/*
Theme Name: Foto
Theme URI: http://foto.themesawesome.com
Author: Themes Awesome
Author URI: http://www.themesawesome.com
Text Domain: foto
Description: Foto is Photography WordPress Theme
Tags: custom-colors, custom-menu, featured-images, theme-options
Version: 1.5
License:      GNU General Public License V2
License URI:      license.txt

/*-------------------------------------------------------------------------------------
    1. Base
    2. Page Loader
    3. Header
        3.1. Header Left Side
        3.2. Header Center
        3.3. Header Two
        3.4. Logo
        3.5. Main Menu
    4. Content
        4.1. Page Title
        4.2. Blog Post
        4.2.1. Blog - Fullwidth
        4.2.2. Blog - Fullwidth with Sidebar
        4.3. Single Post
        4.3.1. Comment Section
        4.4. Sidebar
        4.4.1. Sidebar - Archive List
        4.4.2. Sidebar - Author
        4.4.3. Sidebar - Latest Post
        4.4.4. Sidebar - Widget Categories
        4.4.5. Sidebar - Widget Pages
        4.4.6. Sidebar - Meta
        4.4.7. Sidebar - RSS
        4.4.8. Sidebar - Search
        4.4.9. Sidebar - Tag Cloud
        4.5. About Page
        4.6. Contact Page
    5. Album Concept
        5.1. Concept 1
        5.2. Concept 2
        5.3. Concept 3
        5.4. Concept 4
        5.5. Concept 5
        5.6. Concept 6
            5.6.1. Concept 6 - 1 Column
        5.7. Concept 7
        5.8. Concept 8
        5.9. Concept 9
        5.10. Concept 10
        5.11. Concept 11
        5.12. Concept 12
        5.13. Concept 13
        5.14. Concept 14
        5.15. Concept 15
        5.16. Concept 16
        5.17. Concept 17
        5.18. Concept 18
    6. Single Gallery
    7. Footer

-------------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------*/
/*  1. Base
/*-----------------------------------------------------------------------------------*/

html {
    font-size: 62.5%;
    -webkit-font-smoothing: antialiased;
    height: 100%;
}

body {
    word-wrap: break-word;
    -ms-word-wrap: break-word;
    font-size: 16px;
    line-height: 1.6;
    color: #000000;
    margin: 0;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

blockquote {
    margin: 1em 0;
    border-left: 10px solid #ccc;
    padding-left: 12px;
}

table {
    width: 80%;
    margin-bottom: 20px;
}

th,
td {
    padding: 8px;
    line-height: 20px;
    text-align: left;
    vertical-align: top;
    border: 1px solid #ddd;
}

th {
    font-weight: bold;
    border-bottom: 2px solid;
    text-align: center;
}

*::-moz-selection {
    background: #000;
    color: #fff;
}

*::selection {
    background: #000;
    color: #fff;
}

*, *::after, *::before {
    box-sizing: border-box;
}

button {
    background-image: none;
    background: transparent;
}

input[type="email"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    border: none;
    outline: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: 20px;
    margin-top: 0;
    text-transform: uppercase;
}

h1 {
    font-size: 36px;
    font-size: 3.6rem;
    line-height: 1;
}

h2 {
    font-size: 30px;
    font-size: 3rem;
    line-height: 1;
}

h3 {
    font-size: 24px;
    font-size: 2.4rem;
    line-height: 1.11111;
}

h4 {
    font-size: 18px;
    font-size: 1.8rem;
    line-height: 1.125;
}

h5 {
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 1.125;
}

h6 {
    font-size: 12px;
    font-size: 1.2rem;
    line-height: 1.6;
}

a {
    cursor: pointer;
    outline: none;
    color: #000;
    text-decoration: none !important;
    -moz-transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -o-transition: all .3s linear;
}

a:hover,
a:active,
a:focus {
    color: #000;
    text-decoration: none;
    outline: none;
}

button:focus {
    outline: 0;
}

p {
    margin: 0 0 20px;
    color: #555555;
}

.container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.row {
    margin-right: -15px;
    margin-left: -15px;
}

.bypostauthor {
    background: #ffffff;
}

.bypostauthor > .comment .comment-author cite:after {
    content: "post author";
    font-size: 7px;
    font-size: 0.693333rem;
    font-style: italic;
    margin-left: 6px;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.alignright {
    float: right;
}

.alignleft {
    float: left;
}

img.aligncenter,
img.alignnone {
    margin-bottom: 12px;
}

img.alignleft {
    margin: 12px 24px 12px 0;
    margin: 10px 20px 10px 0;
}

img.alignright {
    margin: 12px 0 12px 24px;
    margin: 10px 0 10px 20px;
}

pre {
    white-space: pre;
    word-wrap: normal;
    overflow-x: scroll;
    line-height: 1.3;
    margin: 1em 0;
}

figure {
    max-width: 100%;
    height: auto;
}

span.yellow-text {
    color: #f2af59;
}

button {
    margin: 15px 0 !important;
    -moz-transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -o-transition: all .3s linear;
}

button.button-normal,
.button-normal a {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: inline-block;
    padding: 10px 20px;
    margin: 30px 0;
    font-style: normal;
}

button.button-normal.white,
.button-normal.white a {
    background-color: #ffffff;
    border: 1px solid #ffffff;
    color: #000000;
}

button.button-normal.white:hover,
.button-normal.white a:hover {
    background-color: transparent;
    border: 1px solid #ffffff;
    color: #ffffff;
}

button.button-normal.black,
.button-normal.black a {
    background-color: #000000;
    border: 1px solid #000000;
    color: #ffffff;
}

button.button-normal.black:hover,
.button-normal.black a:hover {
    background-color: transparent;
    border: 1px solid #000000;
    color: #000000;
}

form input,
form textarea {
    background-color: #e7e7e7;
    padding: 0 15px;
    width: 100%;
    height: 45px;
    border: none;
    margin-bottom: 10px;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

form textarea {
    padding: 15px 15px;
    height: 100%;
}

form input:focus,
form textarea:focus {
    -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);
}

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

* html .clearfix {
    zoom: 1;
}

.nopadding-bottom {
    padding-bottom: 0 !important;
}

.wp-caption .wp-caption-text,
.gallery-caption,
.entry-caption {
    font-style: italic;
    line-height: 2;
    color: #757575;
    font-size: 12px;
    font-size: 1.2rem;
    text-align: left;
}

.sticky .post-content {
    position: relative;
}

.sticky .post-content:before {
    content: "Featured Post";
    padding: 5px 10px;
    color: #ffffff;
    background-color: #000000;
    position: absolute;
    top: -17px;
    right: 15px;
    z-index: 10;
    font-size: 14px;
}

figure,
select {
    max-width: 100%;
    height: auto;
    margin: 0;
}

/* IE6 */

*:first-child+html .clearfix {
    zoom: 1;
}

/* IE7 */

.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/*-----------------------------------------------------------------------------------*/
/*  2. Page Loader
/*-----------------------------------------------------------------------------------*/

.ip-header {
    position: fixed;
    top: 0;
    z-index: 300;
    min-height: 460px;
    width: 100%;
    height: 100%;
    background: #fff;
}

.ip-header h1 {
    margin: 0;
}

.ip-logo,
.ip-loader {
    position: absolute;
    left: 0;
    width: 100%;
    opacity: 0;
    cursor: default;
    pointer-events: none;
}

.ip-logo {
    top: 0;
    height: 100%;
    -webkit-transform: translate3d(0, 25%, 0);
    transform: translate3d(0, 25%, 0);
}

.ip-loader {
    top: 45%;
}

.ip-header .ip-inner {
    display: block;
    margin: 0 auto;
}

.ip-header .ip-loader svg path {
    fill: none;
    stroke-width: 6;
}

.ip-header .ip-loader svg path.ip-loader-circlebg {
    stroke: #ddd;
}

.ip-header .ip-loader svg path.ip-loader-circle {
    -webkit-transition: stroke-dashoffset 0.2s;
    transition: stroke-dashoffset 0.2s;
    stroke: #000000;
}

.loading .ip-loader {
    opacity: 1;
}

.loading .ip-loader {
    -webkit-animation: animInitialLoader 1s cubic-bezier(0.7, 0, 0.3, 1) both;
    animation: animInitialLoader 1s cubic-bezier(0.7, 0, 0.3, 1) both;
}

@-webkit-keyframes animInitialLoader {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.5, 0.5, 1);
    }
}

@keyframes animInitialLoader {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.5, 0.5, 1);
        transform: scale3d(0.5, 0.5, 1);
    }
}

.loaded .ip-loader {
    opacity: 1;
}

.loaded .ip-loader {
    -webkit-animation: animLoadedLoader 0.5s cubic-bezier(0.7, 0, 0.3, 1) forwards;
    animation: animLoadedLoader 0.5s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}

@-webkit-keyframes animLoadedLoader {
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0) scale3d(0.3, 0.3, 1);
    }
}

@keyframes animLoadedLoader {
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0) scale3d(0.3, 0.3, 1);
        transform: translate3d(0, -100%, 0) scale3d(0.3, 0.3, 1);
    }
}

.loaded .ip-header {
    -webkit-animation: animLoadedHeader 1s cubic-bezier(0.7, 0, 0.3, 1) forwards;
    animation: animLoadedHeader 1s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}

@-webkit-keyframes animLoadedHeader {
    to {
        -webkit-transform: translate3d(0, -100%, 0);
    }
}

@keyframes animLoadedHeader {
    to {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
}

.layout-switch .ip-header {
    position: absolute;
}

.no-js .ip-header {
    position: relative;
    min-height: 0px;
}

#preloader {
    position: fixed;
    height: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 1000;
}

#status {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    background-repeat: no-repeat;
    background-position: center;
    transform: translate(-50%, -50%);
}

/*-----------------------------------------------------------------------------------*/
/*  3.  Header
/*-----------------------------------------------------------------------------------*/

#header {
    position: fixed;
    width: 100%;
    z-index: 200;
    background-color: rgba(255, 255, 255, 0);
    transition: left 500ms, background-color 400ms;
    -webkit-transition: left 500ms, background-color 400ms;
    padding: 10px 0;
}

#header.relative {
    position: relative;
}

.sticky-header #header {
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}

.site-header {
    padding: 0;
    position: relative;
    -webkit-transition: all 500ms;
}

.site-header.container {
    margin: 0 auto;
}

#header.colored {
    background-color: #ffffff;
}
#header.colored nav.menu a{
    color: #000000;
}
#header.colored nav.menu li.custom-button a{
    color: #ffffff;
}

/* 3.1 Header Left Side */

#header.left-side {
    position: fixed;
    float: left;
    background-color: #000000;
    max-height: 100%;
    height: 100%;
}
.sticky-header #header.left-side {
    background-color: #000000;
}

#header.left-side .site-header {
    padding: 0;
}

#header.left-side .mobile-menu {
    display: none;
}

#header.left-side .logo {
    display: block;
    padding: 30px 0;
}

#header.left-side .logo img {
    margin: 0 auto;
}

#header.left-side nav.menu {
    float: none;
    display: block;
    width: 100%;
}

#header.left-side nav.menu > ul {
    padding: 0;
    margin: 0;
}

#header.left-side nav.menu > ul > li {
    padding: 0 30px;
    width: 100%;
    border-bottom: 1px solid #363636;
}

#header.left-side nav.menu > ul > li > a {
    width: 100%;
    display: block;
    padding: 10px 0;
    color: #ffffff;
    font-size: 18px;
}

#header.left-side nav.menu > ul > li:hover > ul {
    left: 100%;
    top: 0 !important;
    opacity: 1;
}

.mobile-menu.hide {
    display: none;
}

/* 3.2 Header Center */

.sticky-header #header.center .site-header {
    padding-top: 0;
    -webkit-transition: padding 0.25s ease-out;
    -moz-transition: padding 0.25s ease-out;
    -ms-transition: padding 0.25s ease-out;
    -o-transition: padding 0.25s ease-out;
    transition: padding 0.25s ease-out;
}

.sticky-header #header.center .logo {
    padding: 20px 0;
    -webkit-transition: padding 0.25s ease-out;
    -moz-transition: padding 0.25s ease-out;
    -ms-transition: padding 0.25s ease-out;
    -o-transition: padding 0.25s ease-out;
    transition: padding 0.25s ease-out;
}

#header.center .logo h2.site-title {
    text-align: center;
}

#header.center .logo {
    display: block;
    padding: 20px 0 30px; 
    margin-left: 0;
}

#header.center .logo img {
    margin: 0 auto; 
}

#header.center nav.menu {
    float: none;
    text-align: center;
}

#header.center nav.menu > ul {
    float: none;
        text-align: center;
}

#header.center .sm-clean li {
    display: inline-block;
    float: none;
}

#header.center .sm-clean li ul li {
    display: block;
}

#header.center .mobile-menu {
    float: none;
    position: absolute;
    right: 0;
    top: 10px;
    z-index: 100;
}

#header.center .sub-menu li, #header.center .has-children li {
    text-align: left;
}

/* 3.3 Header Two */

#header.two-menus .site-header {
    margin: auto;
}

.sticky-header #header.two-menus .site-header {
    padding-top: 0;
    -webkit-transition: padding 0.25s ease-out;
    -moz-transition: padding 0.25s ease-out;
    -ms-transition: padding 0.25s ease-out;
    -o-transition: padding 0.25s ease-out;
    transition: padding 0.25s ease-out;
}

.sticky-header #header.two-menus .logo {
    -webkit-transition: padding 0.25s ease-out;
    -moz-transition: padding 0.25s ease-out;
    -ms-transition: padding 0.25s ease-out;
    -o-transition: padding 0.25s ease-out;
    transition: padding 0.25s ease-out;
}

.sticky-header #header.two-menus .mobile-menu {
    top: 10px;
}

#header.two-menus .header-social {
    float: left;
}

#header.two-menus .header-social li {
    display: inline-block;
}

#header.two-menus .header-social li a {
    font-family: 'FontAwesome';
    font-weight: normal;
    margin-left: 5px;
}

#header.two-menus nav.menu .sm-clean .custom-button a,
#header.center nav.menu .sm-clean .custom-button a {
    color: #fc1547;
    background-color: transparent;
}

header .width-container {
    position: relative;
}

header.two-menus .logo {
    z-index: 36;
    top: 0px;
    position: absolute;
    margin-left: 0;
    width: 100%;
    text-align: center;
}

header.two-menus .logo .logo-image img {
    margin: 0 auto;
}

header.two-menus nav.menu {
    float: none;
}

.primary-left-nav {
    width: 50%;
    float: left;
}

.primary-left-nav .sm-clean,
.primary-left-nav .logo-container {
    float: right;
}

.logo-container {
    height: 10px;
    padding: 0px 4px;
}

.logo-container {
    width: 90px;
}

.primary-right-nav {
    width: 50%;
    float: right;
}

.primary-right-nav .sm-clean, 
.primary-right-nav .logo-container {
    float: left;
}

header.two-menus nav.menu .sm-clean > li:last-child {
    margin-right: 0;
}

/* 3.4 Logo */

.logo {
    display: inline-block;
    font-size: 14px;
    position: relative;
    z-index: 150;
    -moz-transition: all .4s linear;
    -webkit-transition: all .4s linear;
    -o-transition: all .4s linear;
    margin-left: 30px;
}

.logo-image {
    text-align: center;
    margin-top: 5px;
}

.logo:hover {
    opacity: .4;
}

.logo h2.site-title {
    font-size: 20px;
    font-size: 2rem;
    margin: 10px 0px 0px;
}

.sm-clean > li > ul:before, .sm-clean > li > ul:after{
    display: none;
}

.sm-clean a span.sub-arrow {
    margin-top: -3px;
}

.sm-clean ul a span.sub-arrow {
    display: none;
}

.logo-image.background--light path {
    fill: #000000;
}

.logo-image.background--dark path {
    fill: #ffffff;
}

nav.menu.background--light .sm-clean > li > a {
    color: #000000;
}

nav.menu.background--dark .sm-clean > li > a {
    color: #ffffff;
}

nav.menu.background--light .sm-clean > li.custom-button > a {
    color: #ffffff;
}

.page-template-contact-template.sticky-header .logo-image path {
    fill: #000000;
}

/* 3.5 Main Menu */

nav.menu {
    float: right;
}

/* Default Menu */

nav.menu {
    position: relative;
    z-index: 50;
}


nav.menu .sm-clean {
    padding: 0;
    background-color: transparent;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
}

nav.menu .sm-clean a {
    color: #000000;
    font-size: 14px;
    text-transform: uppercase;
    -webkit-transition: opacity 0.25s ease-out;
    -moz-transition: opacity 0.25s ease-out;
    -ms-transition: opacity 0.25s ease-out;
    -o-transition: opacity 0.25s ease-out;
    transition: opacity 0.25s ease-out;
}

nav.menu .sm-clean > li:last-child {
    margin-right: 30px;
}

nav.menu .sm-clean > li > a {
    padding: 10px 20px;
}

.sm-clean .custom-button {
    float: right;
}

.sm-clean ul {
    padding-bottom: 0;
    padding-top: 0;
    border: 0;
    border-radius: 0 !important;
    margin-top: 10px !important;
}

.sm-clean ul li ul {
    top: -10px !important;
}

.sm-clean ul .custom-button {
    float: none;
}

nav.menu .sm-clean .custom-button a {
    color: #fc1547 !important;
}

nav.menu .sm-clean li > ul .custom-button a {
    border-radius: 0 !important;
}

.sm-clean a span.sub-arrow {
    border-color: #000000 transparent transparent transparent;
}

/* Vertical Menu */

.sm-clean.sm-vertical a:hover, .sm-clean.sm-vertical a:focus, .sm-clean.sm-vertical a:active, .sm-clean.sm-vertical a.highlighted {
    background-color: transparent;
}

.sm-clean.sm-vertical .custom-button {
    background-color: #fc1547;
}
.sm-clean.sm-vertical .custom-button a {
    color: #ffffff;
}

/* Mobile Menu */

.mobile-menu {
    display: none;
    position: absolute;
    top: 0;
    right: 2%;
    z-index: 100;
}

.mobile-menu:hover .foto-menu-mobile {
    cursor: pointer;
}

.foto-menu-mobile {
    display: block;
    background: transparent;
    border: 0;
    font-size: 20px;
    font-size: 2rem;
    font-weight: bold;
}

/* Background Check */
.logo.target.background--light a {
    color: #000000;
}
.logo.target.background--dark a {
    color: #ffffff;
}
.menu.target.background--light .sm-clean a span.sub-arrow {
    border-color: #000000 transparent transparent transparent;
}
.menu.target.background--dark .sm-clean a span.sub-arrow {
    border-color: #ffffff transparent transparent transparent;
}

/*-----------------------------------------------------------------------------------*/
/*  4. Content
/*-----------------------------------------------------------------------------------*/

/* 4.1 Page Title */

.page-template-default .page-title .title-wrap {
    padding: 0;
}

.page-template-default .page-title .title-wrap h2 {
    margin: 0;
}

.default-page-title.no-acf {
    padding: 90px 0 20px;
}

.page-title .title-wrap {
    position: relative;
    text-align: center;
    z-index: 2;
    padding: 0 120px;
}



.page-title .title-wrap p {
    margin: 0;
    font-size: 16px;
    font-size: 1.6rem;

}

#main-wrapper {
    height: 100%;
}

.content-wrapper {
    padding: 80px 0;
}

/* 4.2 Blog Post */

.blog .post-item {
    width: 100%;
    float: left;
}

.page-template-blog-template .post-item {
    width: 50%;
    float: left;
}

.blog .post-item img {
    height: auto;
    width: auto;
    text-align: center;
    margin: 0 auto;
}

.post-item .wrapper {
    margin: 15px;
    background-color: #ffffff;
    border: 1px solid #f0f0f0;
}

.post-item img {
    height: auto;
    width: auto;
    max-height: 100%;
}

.post-item .post-content {
    padding: 10px;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

.post-item .post-content:hover {
    -webkit-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.09);
    -moz-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.09);
    box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.09);
}

.post-item .inner-content {
    padding: 20px;
}

.meta-top {
    text-align: center;
    padding-bottom: 25px;
    padding-top: 10px;
}

.meta-top ul {
    padding: 0;
    margin: 0;
}

.meta-top li {
    display: inline-block;
}

.meta-top a {
    color: #999;
    border: 2px solid #999;
    padding: 5px 10px 3px 10px;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.1em;
    -moz-transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -o-transition: all .3s linear;
}

.meta-top a:hover {
    color: #000000;
    border: 2px solid #000000;
}

.heading-block h4 {
    text-align: center;
    margin-bottom: 0;
    letter-spacing: 0.1em;
}

.post-meta {
    text-align: center;
    margin-top: 5px;
    font-size: 13px;
    font-style: italic;
}

.post-meta span {
    color: #737479;
}

.post-meta span:after {
    content: '/';
    padding: 0 4px 0 8px;
}

.post-meta span:last-child:after {
    display: none;
}

.post-meta a {
    color: #737479;
    transition: color 300ms;
    -webkit-transition: color 300ms;
}

.bord {
    background-color: #000000;
    height: 1px;
    width: 10%;
    text-align: center;
    margin: 20px auto;
}

.inner-content .excerpt p {
    font-size: 16px;
    line-height: 22px;
    letter-spacing: -0.1px;
}

.content-bottom {
    padding: 10px 30px 0;
    margin: 0 -10px;
    border-top: 1px solid #e3e3e3;
}

.content-bottom .button {
    width: 50%;
    float: left;
    margin-top: 7px;
}

.content-bottom .button a {
    text-transform: uppercase;
    padding-left: 20px;
    position: relative;
}

.content-bottom .button a:before {
    font-family: "foto" !important;
    text-transform: none !important;
    content: "\68";
    font-size: 15px;
    position: absolute;
    left: 0;
    top: -3px;
}

.content-bottom .share {
    width: 50%;
    float: right;
    text-align: right;
    line-height: 0;
}

.share li {
    float: left;
    list-style: none;
    margin: 0 5px;
    text-align: center;
}

.share li:last-child {
    margin-right: 0;
}

.share li a {
    color: #ffffff;
    background-color: #000000;
    width: 30px;
    height: 30px;
    display: inline-block;
    line-height: 30px;
    border-radius: 50%;
    float: left;
    -moz-transition: all .2s linear;
    -webkit-transition: all .2s linear;
    -o-transition: all .2s linear;
}

.share li.facebook a:hover {
    background-color: #3b5998;
}

.share li.twitter a:hover {
    background-color: #55acee;
}

.share li.google a:hover {
    background-color: #dd4b39;
}

.social-share {
    margin: 0 auto;
    overflow: hidden;
    padding: 0;
    display: inline-block;
}

/* 4.2.1 Blog - Fullwidth */

.fullwidth .content-wrapper {
    margin: 0 30px;
}

.blog-post {
    margin-left: -15px;
    margin-top: -15px;
    margin-right: -15px;
}

/* 4.2.2 Blog - Fullwidth with Sidebar */

.with-sidebar {
    width: 75%;
    float: left;
}

/* 4.3 Single Post */

.single-post-wrap .content-bottom {
    margin: 0;
    padding: 10px 30px;
    display: inline-block;
    width: 100%;
    border-bottom: 1px solid #e3e3e3;
}

.single-post-wrap .post-image img {
    width: auto;
    margin: 0 auto;
}

.single-post-wrap .content-bottom .meta-bottom {
    width: 50%;
    float: left;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: bold;
    line-height: 2.2;
}

.single-post .post-item .wrapper {
    margin: 0;
}

.single-post .content p {
    font-size: 16px;
}

/* 4.3.1 Comment Section */

.comment-section {
    padding: 60px 30px;
}

.comment-respond {
    position: relative;
}

h2.comment-reply-title {
    font-size: 26px;
    font-weight: bold;
    letter-spacing: 0.1em;
}

h2.comment-reply-title small a {
    font-size: 13px;
    letter-spacing: 0.1em;
    background-color: #111;
    border: 1px solid #111;
    color: #fff;
    padding: 5px 10px;
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0;
}

h2.comment-reply-title small a:hover {
    border: 1px solid #111;
    background-color: transparent;
    color: #111;
}

.comments-area ol.comment-list {
    list-style: none;
    padding: 0 0 10px 0;
    margin-bottom: 30px;
    border-bottom: 1px solid #ebebeb;
}

.comments-area ol.comment-list li article.comment {
    position: relative;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #ebebeb;
}

.comments-area ol.comment-list li ul.children {
    position: relative;
    list-style: none;
}

.comments-area ol.comment-list li ul.children:before {
    content: "";
    position: absolute;
    left: 0;
    height: 100%;
    width: 1px;
    background-color: #ebebeb;
}

.comments-area ol.comment-list li ul.children li article.comment {
    position: relative;
    overflow: visible;
}

.comments-area ol.comment-list li ul.children li article.comment:before {
    content: "";
    position: absolute;
    left: -40px;
    height: 1px;
    width: 25px;
    top: 50%;
    background-color: #ebebeb;
}

.comments-area ol.comment-list li article.comment .avatar {
    margin-right: 20px;
    max-width: 75px;
}

.comments-area ol.comment-list li article.comment .avatar img {
    width: 100%;
    border-radius: 50%;
    min-width: 75px;
}

.comments-area ol.comment-list li article.comment .meta-comment {
    overflow: hidden;
}

.comments-area ol.comment-list li article.comment .meta-comment .comment-author cite {
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
}

.comments-area ol.comment-list li article.comment .meta-comment .comment-meta {
    font-size: 14px;
    color: #999;
}

.comments-area ol.comment-list li article.comment .comment-content {
    margin-top: 20px;
    font-size: 16px;
    line-height: 24px;
}

.comments-area ol.comment-list li article.comment .meta-comment .comment-action {
    position: absolute;
    top: 20px;
    right: 20px;
}

.comments-area ol.comment-list li article.comment .meta-comment .comment-action a {
    color: #fff;
    background-color: #000000;
    text-transform: uppercase;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.1em;
    border: 1px solid #000000;
}

.comments-area ol.comment-list li article.comment .meta-comment .comment-action a:hover {
    color: #000000;
    background-color: #fff;
    border: 1px solid #000000;
}

.comments-area .comment-respond h3.comment-reply-title {
    margin-bottom: 5px;
}

.comments-area .comment-respond form p.logged-in-as a {
    color: #737479;
}

.comments-area .comment-respond form p.logged-in-as a:hover {
    color: #000000;
}

.comments-area .comment-respond form p label {
    display: block;
    color: #000000;
    font-weight: bold;
    margin-bottom: 10px;
}

.comments-area .comment-respond form p input,
.comments-area .comment-respond form p textarea {
    font-size: 13px;
    letter-spacing: 0.1em;
    border: 1px solid #ebebeb;
    padding: 15px;
    height: 100%;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    transition: all .3s ease;
}

.comments-area .comment-respond form p.comment-form-author input,
.comments-area .comment-respond form p.comment-form-email input,
.comments-area .comment-respond form p.comment-form-url input,
.comments-area .comment-respond form p.comment-form-comment textarea {
    width: 100%;
}

.comments-area .comment-respond form p input:hover,
.comments-area .comment-respond form p textarea:hover,
.comments-area .comment-respond form p input:focus,
.comments-area .comment-respond form p textarea:focus {
    border: 1px solid #ababab;
}

.comments-area .comment-respond form p.comment-form-author,
.comments-area .comment-respond form p.comment-form-email,
.comments-area .comment-respond form p.comment-form-url {
    width: 33.333%;
    padding: 0 15px;
    float: left;
}

.comments-area .comment-respond form p.comment-form-author {
    padding-left: 0;
}

.comments-area .comment-respond form p.comment-form-url {
    padding-right: 0;
}

.comments-area .comment-respond form p.form-submit input {
    width: auto;
    padding: 14px 25px;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: inline-block;
    border: 1px solid #000000;
    margin-top: 20px;
    cursor: pointer;
    color: #fff;
    background-color: #000000;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.comments-area .comment-respond form p.form-submit input:hover {
    color: #000000;
    border: 1px solid #000000;
    background-color: #fff;
}

/* 4.4 Sidebar */

#primary-sidebar {
    width: 25%;
    float: right;
    padding-left: 30px;
}

.sidebar .sidebar-widget {
    margin-bottom: 60px;
}

.sidebar-widget .heading-block {
    border: 1px solid #e4e4e4;
    padding: 10px;
    margin-bottom: 20px;
}

.sidebar-widget select, .sidebar-widget option {
    width: 100%;
    max-width: 100%;
    height: 40px;
    padding: 0 10px;
}

.sidebar .sidebar-widget ul, .sidebar .sidebar-widget ul.children, .sidebar .sidebar-widget ul.sub-menu {
    padding: 0;
    list-style: none;
}
.sidebar .sidebar-widget ul.children li, .sidebar .sidebar-widget ul.sub-menu li {
    padding-left: 8px;
    border: none;
    padding-bottom: 0;
}
.sidebar .sidebar-widget li {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dotted #e7e7e7;
}
.sidebar .sidebar-widget li a {
    color: #000000;
}
.sidebar .sidebar-widget li:hover, .sidebar .sidebar-widget li:hover a {
    color: #48D8F9;
}


/* 4.4.1 Sidebar - Archive List */

.widget_archive ul,
.widget_meta ul,
.widget_categories ul,
.widget_pages ul,
.widget_meta ul,
.widget_recent_comments ul,
.widget_recent_entries ul,
.widget_rss ul,
.widget_nav_menu ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.widget_archive ul li,
.widget_categories ul li {
    text-align: left;
    font-size: 16px;
    margin-bottom: 5px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eaeaea;
}

.widget_archive ul li a:hover,
.widget_categories ul li a:hover,
.widget_pages ul li a:hover,
.widget_meta ul li a:hover,
.widget_recent_comments ul li a:hover,
.widget_recent_entries ul li a:hover,
.widget_rss ul li a:hover,
.widget_nav_menu ul li a:hover {
    opacity: 0.7;
}

/* 4.4.2 Sidebar - Author */

.foto_author .widget-author-img {
    margin-bottom: 15px;
}

.foto_author .author-wrap {
    text-align: center;
}

.foto_author .widget-author-detail {
    margin-bottom: 20px;
    font-size: 16px;
}

.widget-author-img img {
    width: 100%;
}


/* 4.4.3 Sidebar - Latest Post */

.sidebar-recent-post {
    display: inline-block;
}

.sidebar-recent-post .post-item {
    margin-bottom: 15px;
    padding-bottom: 15px;
    display: inline-block;
    width: 100%;
    border-bottom: 1px solid #e4e4e4;
}

.post-item .post-thumb {
    float: left;
    width: 100px;
    margin-right: 15px;
}

.post-item .latest-post-content {
    overflow: hidden;
}

.latest-post-content h4 {
    font-size: 14px;
    line-height: 20px;
    -moz-transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -o-transition: all .3s linear;
}

.latest-post-content h4:hover {
    opacity: 0.7;
}

.latest-post-content .meta {
    margin-bottom: 10px;
    font-style: italic;
    color: #737479;
}

/* 4.4.4 Sidebar - Widget Categories */

.widget_categories ul.children,
.widget_pages ul.children,
.widget_nav_menu ul.sub-menu {
    margin-top: 10px;
}

.widget_categories ul.children li:last-child,
.widget_pages ul.children li:last-child,
.widget_nav_menu ul.sub-menu li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* 4.4.5 Sidebar - Widget Pages */

.widget_pages ul li,
.widget_meta ul li,
.widget_recent_comments ul li,
.widget_recent_entries ul li,
.widget_rss ul li,
.widget_nav_menu ul li {
    font-size: 16px;
    margin-bottom: 5px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eaeaea;
}

/* 4.4.6 Sidebar - Meta */

.widget_meta ul li a {
    font-weight: bold;
}

/* 4.4.7 Sidebar - RSS */

.widget_rss ul li a {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

.widget_rss ul li span.rss-date {
    font-style: italic;
    color: #737479;
}

.widget_rss ul li .rssSummary {
    margin: 10px 0;
}

/* 4.4.8 Sidebar - Search */

.widget_search input.submit.search-button {
    background-color: #000000;
    color: #fff;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.1em;
    cursor: pointer;
}

/* 4.4.9 Sidebar - Tag Cloud */

.widget_tag_cloud .tagcloud a {
    font-size: 12px !important;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: 1px solid #000000;
    padding: 5px 10px;
    display: inline-block;
    margin-bottom: 5px;
}

.widget_tag_cloud .tagcloud a:hover {
    border: 1px solid #000000;
    background-color: #000000;
    color: #fff;
}

/* 4.5 About Page */

.about-wrap {
    background-color: #000000;
    padding: 80px 0;
}

.about-section {
    position: relative;
    margin-bottom: 40px;
}

.about-image {
    float: left;
    width: 70%;
}

.about-detail {
    position: absolute;
    width: 35%;
    right: 0;
}

.about h2.section-title {
    font-size: 36px;
    font-weight: bold;
    letter-spacing: 0.1em;
}

.about-wrap h2.section-title, .about-content p, .team-studio .body-detail p {
    color: #fff;
}

.about-detail .inner-detail .bord {
    background-color: transparent;
    text-align: center;
    margin: 20px auto;
    position: absolute;
    bottom: -35%;
    right: 0;
    width: 300px;
    height: 250px;
    border: 10px solid #363636;
    z-index: -1;
}

.about-content p, .team-studio .body-detail p {
    font-size: 20px;
    line-height: 32px;
}

.team-studio {
    padding-top: 40px;
}

.team-description {
    width: 40%;
}

.team-description .title-section {
    position: relative;
    z-index: 1;
}

.team-description h2.section-title {
    padding: 80px 0;
}

.team-description .title-section .bord {
    background-color: transparent;
    text-align: center;
    margin: 20px auto;
    position: absolute;
    bottom: 0;
    right: 15%;
    width: 300px;
    height: 150px;
    border: 10px solid #363636;
    z-index: -1;
}

.team-member {
    width: 60%;
}

.team-person {
    padding: 0;
}

.team-inner {
    margin: 5px;
    position: relative;
}

.team-person:hover .team-overlay {
    opacity: 1;
}

.team-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 2;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.7);
    -webkit-transition: opacity .4s ease-in-out;
    -o-transition: opacity .4s ease-in-out;
    transition: opacity .4s ease-in-out;
}

.nyet {
    background-color: #ffffff;
    content: "";
    position: absolute;
    opacity: 0.4;
    display: none;
}

.nyet.top {
    height: 10px;
    width: 100%;
    top: 0;
    left: 0;
    display: block;
}

.nyet.bottom {
    height: 10px;
    width: 100%;
    bottom: 0;
    left: 0;
    display: block;
}

.nyet.left {
    height: calc(100% - 20px);
    width: 10px;
    top: 10px;
    left: 0;
    display: block;
}

.nyet.right {
    height: calc(100% - 20px);
    width: 10px;
    top: 10px;
    right: 0;
    display: block;
}

.border-utara {
    border: 10px solid #fff
}

.team-detail {
    width: 100%;
    position: absolute;
    z-index: 2;
    top: 50%;
    padding: 0 30px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.team-detail h3 {
    text-align: center;
    color: #ffffff;
    margin-bottom: 0;
    font-weight: bold;
    letter-spacing: 0.1em;
}

.team-detail .position {
    color: #999999;
    font-size: 18px;
}

.team-detail ul {
    padding: 0;
    list-style: none;
}

.team-detail ul li {
    display: inline-block;
    margin: 0 5px;
}

.team-detail ul li a {
    color: #ffffff;
    font-size: 22px;
    opacity: 0.7;
}

.team-detail ul li a:hover {
    opacity: 1;
}

.author-section, .testimonial-section {
    background-color: #000000;
    padding: 80px 0;
}

.author-image, .client-detail {
    width: 30%;
    float: left;
}

.author-image img {
    border-radius: 100%;
}

.author-detail, .the-clients {
    width: 70%;
    float: left;
    color: #ffffff;
    padding: 0 30px;
}

.the-clients .clients {
    margin: 20px 0;
}

.author-detail h5 {
    margin-bottom: 10px;
    font-size: 12px;
    letter-spacing: 0.1em;
}

.author-detail p {
    color: #999999;
}

.signature {
    margin-top: 60px;
}

.client-section {
    background-color: #eeeeee;
    padding: 80px 0;
}

.client-detail h2, .client-detail p {
    color: #999999;
}

.testimonial-section {
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
}

.testimonial-section .flexslider {
    background: transparent;
    margin: 0;
    border: 0;
}

.testi-content p, .testi-content h5 {
    color: #ffffff;
}

.testi-content p {
    font-size: 20px;
}

.testi-content h5 {
    letter-spacing: 0.1em;
    margin-top: 40px;
    font-weight: bold;
}

.testimonial-slider .flex-control-nav {
    text-align: left;
    position: relative;
    bottom: 0;
    margin-top: 15px
}

.testimonial-slider .flex-control-nav li {
    margin: 0 3px;
}

.testimonial-slider .flex-control-nav li:first-child {
    margin-left: 0;
}

.testimonial-slider .flex-control-paging li a {
    width: 45px;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 0;
}

.testimonial-slider .flex-control-paging li a.flex-active {
    background: rgba(255, 255, 255, 1);
}

/* 4.6 Contact Page */

.margin-wrap {
    margin: 0 30px;
}

.contact-page.white {
    background-color: transparent;
    position: relative;
    padding: 80px 0;
}

.contact-map iframe {
    width: 100%;
    height: 450px;
    border: 0;
    margin: 0;
    padding: 0;
}

.contact-map .maps .overlay {
    background: transparent;
    position: relative;
    width: 100%;
    height: 450px;
    top: 450px;
    margin-top: -450px;
}
.contact-map .maps {
    line-height: 0;
}

.contact-map .map {
    overflow: hidden;
}

.contact-form input[type="submit"] {
    width: auto;
    height: auto;
    padding: 10px 25px;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: inline-block;
    border: 1px solid #000000;
    margin-top: 20px;
    cursor: pointer;
    color: #fff;
    background-color: #000000;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.contact-form input[type="submit"]:hover {
    color: #000000;
    border: 1px solid #000000;
    background-color: #fff;
}

.contact-section-top {
    position: relative;
    overflow: hidden;
    margin-bottom: 80px;
}

.contact-page.white .contact-desc {
    width: 40%;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    background-color: #000000;
    padding: 40px;
}

.contact-desc .title h2 {
    font-size: 26px;
    font-weight: bold;
    letter-spacing: 0.1em;
    color: #fff;
}

.contact-desc .contact-text p {
    color: #fff;
    margin-bottom: 5px;
}

.contact-desc .contact-text p span {
    font-weight: bold;
    letter-spacing: 0.1em;
}

.contact-page.white .contact-map {
    width: 70%;
    float: right;
}
.contact-content {
    padding-top: 80px;
    background-color: #000000;
}
.contact-page.white .contact-content {
    background-color: transparent;
}
.contact-desc p {
    color: #fff;
}

.contact-full-desc {
    margin-top: 30px;
}

.contact-form p {
    color: #fff;
}

.contact-page.white .contact-form p {
    color: #000000;
}

/*-----------------------------------------------------------------------------------*/
/*  5. Album Concept
/*-----------------------------------------------------------------------------------*/

/* 5.1 Concept 1 */

body.concept-1 {
    height: auto;
}

.stack-1 {
    position: relative;
    min-height: 75vh;
    height: 100%;
    overflow: hidden;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}


.view-full .stack-1 {
    height: calc(100% + 50px) !important;
}

.stack-slider {
    position: absolute;
    height: 70vh;
    width: 100vw;
    top: -55vh;
    opacity: 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transform: translate3d(0, 60vh, 0);
    transform: translate3d(0, 60vh, 0);
    -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
    transition: transform 0.5s, opacity 0.5s;
    -webkit-transition-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
    transition-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
}

.view-init .stack-slider {
    opacity: 1;
}

.move-items .stack-slider {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.view-full .flickity-viewport {
    overflow: visible;
}


.stacks-wrapper {
    height: 100%;
}

.view-full .stacks-wrapper {
    top: 60vh;
}

.stack {
    width: 33%;
    min-width: 300px;
    height: 100%;
    text-align: center;
}

.stack.is-selected {
    height: auto;
}

.stack.stack-prev,
.stack.stack-next {
    -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
    transition: transform 0.5s, opacity 0.5s;
    -webkit-transition-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
    transition-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
}

.move-items .stack.stack-prev,
.move-items .stack.stack-next {
    opacity: 0;
}

.move-items .stack.stack-prev {
    -webkit-transform: translate3d(-70px, 65vh, 0);
    transform: translate3d(-70px, 65vh, 0);
}

.move-items .stack.stack-next {
    -webkit-transform: translate3d(70px, 65vh, 0);
    transform: translate3d(70px, 65vh, 0);
}

.stack.is-selected .stack-title::before,
.stack.stack-prev .stack-title::after,
.stack.stack-next .stack-title::after {
    width: 33px;
    height: 33px;
    position: absolute;
    opacity: 0;
    z-index: 100;
    font-family: "foto" !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    speak: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.stack.is-selected .stack-title::before {
    margin: 0 0 0 -18px;
    left: 50%;
    top: 0;
    content: "\69";
    font-size: 16px;
    border: 1px solid;
    line-height: 35px;
    background: #000;
    color: #fff;
    -webkit-transition: -webkit-transform 0.5s, opacity 0.3s;
    transition: transform 0.5s, opacity 0.3s;
    -webkit-transition-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
    transition-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
}

.item-clickable .stack.is-selected .stack-title::before {
    opacity: 1;
}

.move-items .is-selected .stack-title::before {
    -webkit-transform: rotate3d(0, 0, 1, 180deg);
    transform: rotate3d(0, 0, 1, 180deg);
}

.stack.stack-prev .stack-title::after,
.stack.stack-next .stack-title::after {
    content: "\6a";
    top: 0;
    border: 1px solid;
    font-size: 16px;
    line-height: 32px;
}

.stack.stack-prev .stack-title::after {
    right: 50%;
    margin: 0 -18px 0 0;
    -webkit-transform: rotate3d(0, 0, 1, 180deg);
    transform: rotate3d(0, 0, 1, 180deg);
}

.stack.stack-next .stack-title::after {
    left: 50%;
    margin: 0 0 0 -18px;
    -webkit-transform: rotate3d(0, 0, 1, 0);
    transform: rotate3d(0, 0, 1, 0);
}

.stack.stack-prev .stack-title:hover::after,
.stack.stack-next .stack-title:hover::after {
    opacity: 1;
}

.stack-title {
    font-size: 1em;
    letter-spacing: 0.1rem;
    margin: 70px 0 20px;
    padding: 50px 40px 15px;
    text-align: center;
    display: inline-block;
    position: relative;
    cursor: pointer;
}

.stack-title a {
    display: block;
    position: relative;
    padding-bottom: 5px;
    color: #fff;
    width: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.stack-title a::after {
    content: attr(data-text);
    position: relative;
    width: 100%;
    height: 100%;
    top: 10px;
    left: 0;
    color: #999999;
    font-size: 12px;
    line-height: 1.8;
    opacity: 0;
    pointer-events: none;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
}

.stack-title a span {
    display: block;
    color: #595959;
    cursor: pointer;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.is-selected .stack-title a span {
    color: #000;
}

.stack-title a::after,
.stack-title a span {
    -webkit-transition: -webkit-transform 1s 0.15s, opacity 1s 0.15s;
    transition: transform 1s 0.15s, opacity 1s 0.15s;
    -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.stack-title a:hover {
    color: #fff;
}

.move-items .is-selected .stack-title a::after {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.item {
    padding-bottom: 5%;
    opacity: 0;
    width: 100%;
    position: relative;
    text-align: left;
    -webkit-transform: translate3d(0, 75px, 0);
    transform: translate3d(0, 75px, 0);
    -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
    transition: transform 0.5s, opacity 0.5s;
    -webkit-transition-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
    transition-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
}

.move-items .is-selected .item {
    opacity: 1;
}

.move-items .is-selected .item:first-of-type .item__content::after {
    -webkit-transform: translate3d(0, 0, 0) scale3d(0.95, 0.95, 1);
    transform: translate3d(0, 0, 0) scale3d(0.95, 0.95, 1);
}

.move-items .is-selected .item:first-of-type .item__content::before {
    -webkit-transform: translate3d(0, 0, 0) scale3d(0.9, 0.9, 1);
    transform: translate3d(0, 0, 0) scale3d(0.9, 0.9, 1);
}

.item:first-of-type {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.move-items .is-selected .item {
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.move-items .is-selected .item:first-of-type {
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}

.item__content {
    position: relative;
    z-index: 100;
    max-width: 700px;
    margin: 0 auto;
    margin-right: 5%;
}

.item__content p {
    font-size: 0.75em;
}

.item:first-of-type .item__content::before,
.item:first-of-type .item__content::after {
    content: '';
    width: 100%;
    height: 20px;
    top: 0;
    left: 0;
    z-index: -1;
    position: absolute;
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.item:first-of-type .item__content::before {
    background: #b8b8b8;
    -webkit-transform: translate3d(0, -20px, 0) scale3d(0.9, 0.9, 1);
    transform: translate3d(0, -20px, 0) scale3d(0.9, 0.9, 1);
}

.item:first-of-type .item__content::after {
    background: #a7a7a7;
    -webkit-transform: translate3d(0, -10px, 0) scale3d(0.95, 0.95, 1);
    transform: translate3d(0, -10px, 0) scale3d(0.95, 0.95, 1);
}

.gallery-album {
    position: relative;
    z-index: 100;
    max-width: 700px;
    margin: 0 20px;
}

.gallery-album img {
    width: 100%;
}

.gallery-album .img:before,
.gallery-album .img:after {
    content: '';
    width: 100%;
    height: 20px;
    top: 0;
    left: 0;
    z-index: -1;
    position: absolute;
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.gallery-album .img:before {
    background: #b8b8b8;
    -webkit-transform: translate3d(0, -20px, 0) scale3d(0.9, 0.9, 1);
    transform: translate3d(0, -20px, 0) scale3d(0.9, 0.9, 1);
}

.gallery-album .img:after {
    background: #a7a7a7;
    -webkit-transform: translate3d(0, -10px, 0) scale3d(0.95, 0.95, 1);
    transform: translate3d(0, -10px, 0) scale3d(0.95, 0.95, 1);
}

.view-full .gallery-album {
    display: none;
}

.page-template-concept-1 .item {
    display: none;
}

.view-full .is-selected .item {
    display: block;
}

.item img {
    width: 100%;
    display: block;
    position: relative;
    z-index: 100;
}

.item__title {
    font-size: 12px;
    margin: 0;
    padding: 0.75em 0;
    color: #000000;

}

.item__date {
    font-size: 0.75em;
    vertical-align: middle;
    display: inline-block;
    color: #4F4E4E;
    margin-left: 5px;
}

.item__details {
    text-align: left;
    margin: 0 0 2em;
}

.item__details ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.item__details ul li {
    display: block;
    color: #9d9d9d;
    white-space: nowrap;
    opacity: 0;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
    -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
    transition: transform 0.5s, opacity 0.5s;
}

.move-items .is-selected .item__details ul li {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.move-items .is-selected .item__details ul li:first-child {
    -webkit-transition-delay: 0.25s;
    transition-delay: 0.25s;
}

.move-items .is-selected .item__details ul li:nth-child(2) {
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}

.move-items .is-selected .item__details ul li:nth-child(3) {
    -webkit-transition-delay: 0.35s;
    transition-delay: 0.35s;
}

.move-items .is-selected .item__details ul li:nth-child(4) {
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
}

.move-items .is-selected .item__details ul li:nth-child(5) {
    -webkit-transition-delay: 0.45s;
    transition-delay: 0.45s;
}

.item__content--related {
    text-align: center;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.item__content--related > p {
    width: 100%;
    font-size: 1em;
    font-weight: bold;
    padding: 1em 0;
    color: #7E7D7D;
}

.media-item {
    display: block;
    margin: 0 auto;
    max-width: 50%;
    min-width: 250px;
    font-weight: bold;
    padding: 1em;
}

.media-item__img {
    max-width: 250px;
    width: auto;
    opacity: 0.3;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
}

.media-item:hover .media-item__img,
.media-item:focus .media-item__img {
    opacity: 1;
}

.media-item__title {
    font-size: 1em;
    margin: 0;
    padding: 0.5em;
}

/* Mobile-first media queries */

@media screen and (min-width: 65em) {
    .item__details {
        position: absolute;
        top: 0;
        margin: 0 0 0 1em;
        z-index: 1000;
        left: 100%;
        width: 40%;
    }
}

/* Mobile-specific media queries */

@media screen and (max-width: 65em) {
    .stack {
        width: 60%;
    }
}

@media screen and (max-width: 45em) {
    .menu__item {
        display: block;
        background: #4F4E4E;
        overflow: hidden;
        height: 4px;
        width: 30px;
        margin: 3px 10px 0 0;
    }
    .menu__item span {
        display: none;
    }
    .codrops-header {
        padding: 0.5em 0;
    }
    .stack.stack-prev .stack-title::after,
    .stack.stack-next .stack-title::after {
        top: 1.85em;
    }
    .codrops-header h1 {
        font-size: 0.85em;
        padding: 0.25em;
    }
}

@media screen and (max-height: 35em) {
    .stack-slider {
        height: 60vh;
        -webkit-transform: translate3d(0, 40vh, 0);
        transform: translate3d(0, 40vh, 0);
    }
}

/* 5.2. Concept 2 */

.page-template-concept-2 .site-header {
    background-color: transparent;
}

nav.menu.background--dark ul.sm-menus > li > a,
.background--dark #slide-buttons {
    color: #fff !important;
}

nav.menu.background--light ul.sm-menus > li > a,
.background--light #slide-buttons {
    color: #000000 !important;
}

.concept-2 {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
}

.slit-demo-1 .sl-slider-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
	
}

.slit-demo-1 .sl-slider-wrapper .overlay {
    background-color: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 50;
}

.demo-2 .sl-slider-wrapper {
    width: 100%;
    height: 600px;
    overflow: hidden;
    position: relative;
}

.demo-2 .sl-slider h2,
.demo-2 .sl-slider blockquote {
    padding: 100px 30px 10px 30px;
    width: 80%;
    max-width: 960px;
    color: #fff;
    margin: 0 auto;
    position: relative;
    z-index: 100;
}

.demo-2 .sl-slider h2 {
    font-size: 100px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.demo-2 .sl-slider blockquote {
    font-size: 28px;
    padding-top: 10px;
    font-weight: 300;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.demo-2 .sl-slider blockquote cite {
    font-size: 16px;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 5px;
    padding-top: 30px;
    display: inline-block;
}

.demo-2 .bg-img {
    padding: 200px;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    position: absolute;
    top: -200px;
    left: -200px;
    width: 100%;
    height: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    background-position: center center;
}

.nav-arrows span {
    position: absolute;
    z-index: 100;
    top: 50%;
    width: 40px;
    height: 40px;
    border: 2px solid #ddd;
    border: 2px solid rgba(255, 255, 255, 1);
    text-indent: -90000px;
    margin-top: -40px;
    cursor: pointer;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.nav-arrows span:hover {
    opacity: 0.7;
}

.nav-arrows span.nav-arrow-prev {
    left: 3%;
    border-right: none;
    border-top: none;
}

.nav-arrows span.nav-arrow-next {
    right: 3%;
    border-left: none;
    border-bottom: none;
}

.nav-arrow-next.background--light, .nav-arrow-prev.background--light {
    border: 2px solid rgba(0, 0, 0, 1);
}

.nav-arrow-next.background--dark, .nav-arrow-prev.background--dark {
    border: 2px solid rgba(255, 255, 255, 1);
}

.nav-dots {
    text-align: center;
    position: absolute;
    bottom: 2%;
    height: 30px;
    width: 100%;
    left: 0;
    z-index: 50;
}

.nav-dots span {
    display: inline-block;
    position: relative;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin: 3px;
    background: #ddd;
    background: rgba(150, 150, 150, 0.4);
    cursor: pointer;
    box-shadow: 0 1px 1px rgba(255, 255, 255, 0.4), inset 0 1px 1px rgba(0, 0, 0, 0.1);
}

.demo-2 .nav-dots span {
    background: rgba(150, 150, 150, 0.1);
    margin: 6px;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
    box-shadow: 0 1px 1px rgba(255, 255, 255, 0.4), inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(255, 255, 255, 0.5);
}

.demo-2 .nav-dots span.nav-dot-current,
.demo-2 .nav-dots span:hover {
    box-shadow: 0 1px 1px rgba(255, 255, 255, 0.4), inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 0 0 5px rgba(255, 255, 255, 0.5);
}

.nav-dots span.nav-dot-current:after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    top: 3px;
    left: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
}

.slit-demo-1 .deco {
    width: 260px;
    height: 260px;
    border: 2px dashed #ddd;
    border: 2px dashed rgba(150, 150, 150, 0.4);
    border-radius: 50%;
    position: absolute;
    bottom: 50%;
    left: 50%;
    margin: 0 0 0 -130px;
}

.slit-demo-1[data-icon]:after {
    content: attr(data-icon);
    color: #ffffff;
    text-shadow: 0 0 1px #999;
    position: absolute;
    z-index: 75;
    width: 220px;
    height: 220px;
    line-height: 220px;
    text-align: center;
    font-size: 100px;
    top: 50%;
    left: 50%;
    margin: -110px 0 0 -110px;
    box-shadow: inset 0 0 0 10px #f7f7f7;
    border-radius: 50%;
}

.slit-demo-1 .view-album {
    position: absolute;
    z-index: 75;
    width: 100%;
    text-align: center;
    bottom: 60%;
    margin: 0 0 -110px 0;
	display: none;
}

.slit-demo-1 .view-album a {
    color: #fff;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.1em;
    background-color: transparent;
    padding: 10px 20px;
    display: inline-block;
    border: 2px solid #fff;
	display: none;
}

.slit-demo-1 .view-album a:hover {
    color: #000000;
    border: 2px solid #fff;
    background-color: #fff;
	display: none;
}

.slit-demo-1 .sl-slide h2 {
    color: #fff;
    text-shadow: 0 0 1px #fff;
    position: absolute;
    z-index: 75;
    font-size: 34px;
    font-weight: 700;
    letter-spacing: 13px;
    text-transform: uppercase;
    width: 80%;
    left: 10%;
    text-align: center;
    line-height: 50px;
    bottom: 50%;
    margin: 0 0 -120px 0;
	display: none;
}

.slit-demo-1 .sl-slide blockquote {
    position: absolute;
    width: 100%;
    text-align: center;
    left: 0;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    height: 70px;
    color: #ffffff;
    z-index: 75;
    bottom: 50%;
    margin: 0 0 -200px 0;
    padding: 0;
    border: none;
	display: none;
}

.slit-demo-1 .sl-slide blockquote p {
    color: #fff;
    margin: 0 auto;
    width: 30%;
    position: relative;
    line-height: 22px;
    font-size: 16px;
	display: none;
}

.slit-demo-1 .sl-slide blockquote cite {
    font-size: 12px;
    padding-top: 10px;
    display: inline-block;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 4px;
	display: none;
}

.sl-trans-elems .deco {
    -webkit-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
    -moz-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
    -o-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
    -ms-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
    animation: roll 1s ease-out both, fadeIn 1s ease-out both;
}

.sl-trans-elems .view-album {
    -webkit-animation: fadeIn 2s ease-in-out both;
    -moz-animation: fadeIn 2s ease-in-out both;
    -o-animation: fadeIn 2s ease-in-out both;
    -ms-animation: fadeIn 2s ease-in-out both;
    animation: fadeIn 2s ease-in-out both;
}

.sl-trans-elems h2 {
    -webkit-animation: moveUp 1s ease-in-out both;
    -moz-animation: moveUp 1s ease-in-out both;
    -o-animation: moveUp 1s ease-in-out both;
    -ms-animation: moveUp 1s ease-in-out both;
    animation: moveUp 1s ease-in-out both;
}

.sl-trans-elems blockquote {
    -webkit-animation: fadeIn 0.5s linear 0.5s both;
    -moz-animation: fadeIn 0.5s linear 0.5s both;
    -o-animation: fadeIn 0.5s linear 0.5s both;
    -ms-animation: fadeIn 0.5s linear 0.5s both;
    animation: fadeIn 0.5s linear 0.5s both;
}

.sl-trans-back-elems .deco {
    -webkit-animation: scaleDown 1s ease-in-out both;
    -moz-animation: scaleDown 1s ease-in-out both;
    -o-animation: scaleDown 1s ease-in-out both;
    -ms-animation: scaleDown 1s ease-in-out both;
    animation: scaleDown 1s ease-in-out both;
}

.sl-trans-back-elems .view-album {
    -webkit-animation: fadeOut 2s ease-in-out both;
    -moz-animation: fadeOut 2s ease-in-out both;
    -o-animation: fadeOut 2s ease-in-out both;
    -ms-animation: fadeOut 2s ease-in-out both;
    animation: fadeOut 2s ease-in-out both;
}

.sl-trans-back-elems h2 {
    -webkit-animation: fadeOut 1s ease-in-out both;
    -moz-animation: fadeOut 1s ease-in-out both;
    -o-animation: fadeOut 1s ease-in-out both;
    -ms-animation: fadeOut 1s ease-in-out both;
    animation: fadeOut 1s ease-in-out both;
}

.sl-trans-back-elems blockquote {
    -webkit-animation: fadeOut 1s linear both;
    -moz-animation: fadeOut 1s linear both;
    -o-animation: fadeOut 1s linear both;
    -ms-animation: fadeOut 1s linear both;
    animation: fadeOut 1s linear both;
}

.album-2 .content {
    padding: 40px 0;
}

.album-2 .album-desc {
    margin-bottom: 40px;
}

.album-2 .album-desc h4 {
    text-align: center;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 4px;
}

.album-2 .album-desc h2 {
    text-align: center;
    font-size: 34px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.album-2 .album-desc blockquote {
    text-align: center;
    width: 60%;
    max-width: 400px;
    margin: 0 auto;
    border: none;
    padding: 0;
}

.album-2 .album-desc blockquote cite {
    font-size: 10px;
    padding-top: 10px;
    display: inline-block;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 4px;
}

.album-2 .grid {
    overflow: hidden;
    max-width: 100%;
    width: 100%;
    margin: 0;
}

.album-2 .grid a {
    float: none;
    width: 100%;
}

.grid__item {
    width: 25%;
    padding: 0.2%;
}

.grid__item--current {
    opacity: 0 !important;
}

.img-wrap {
    display: block;
}

.img-wrap:focus,
.img-wrap:hover {
    outline: none;
}

.img-wrap img {
    display: block;
    max-width: 100%;
    width: 100%;
    height: 100%;
}

.preview {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -ms-flex-line-pack: center;
    -webkit-align-content: center;
    align-content: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    width: 50%;
    height: 100%;
    pointer-events: none;
}

.preview::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: #1f1d1d;
    -webkit-transition: opacity 0.6s;
    transition: opacity 0.6s;
}

.preview--open {
    pointer-events: auto;
}

.preview--open::before {
    opacity: 1;
}

.clone {
    position: fixed;
    z-index: 110;
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    -webkit-backface-visibility: hidden;
}

.original {
    position: relative;
    z-index: 120;
    display: block;
    object-fit: contain;
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
    -webkit-backface-visibility: hidden;
}

.preview--open .animate {
    /* open */
    -webkit-transition: -webkit-transform 0.6s, opacity 0.2s;
    transition: transform 0.6s, opacity 0.2s;
}

.animate {
    /* close */
    -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
    transition: transform 0.3s, opacity 0.2s;
}

.description {
    color: #fff;
}

.js .description--grid {
    display: none;
}

.description--preview {
    font-size: 2em;
    position: absolute;
    z-index: 140;
    width: 100%;
    left: 100%;
    top: 0;
    height: 100%;
    padding: 0 1em;
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    opacity: 0;
    -webkit-transition: opacity 1s, -webkit-transform 1s;
    transition: opacity 1s, transform 1s;
    -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    -webkit-transform: translate3d(0, 30px, 0);
    transform: translate3d(0, 30px, 0);
}

.preview--open .description--preview {
    opacity: 1;
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.description--preview h3 {
    font-weight: normal;
    margin: 0;
}

.description--preview p {
    font-size: 0.65em;
    max-width: 100%;
}

.description--preview p em {
    color: #5D5D5D;
    display: block;
    padding: 0.4em 0 0 0;
}

/* Details */

.details {
    max-width: 100%;
    /* IE 10-11 bug flexbox */
}

.details ul {
    line-height: 1;
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

.details ul li {
    font-size: 0.5em;
    position: relative;
    display: inline-block;
    margin: 0 1em 0 0;
    padding: 0.15em 0;
    white-space: nowrap;
    opacity: 0;
    color: #9d9d9d;
    -webkit-transition: -webkit-transform 1s, opacity 1s;
    transition: transform 1s, opacity 1s;
    -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
}

.preview--open .details ul li {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.preview--open .details ul li:nth-child(1) {
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

.preview--open .details ul li:nth-child(2) {
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}

.preview--open .details ul li:nth-child(3) {
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
}

.preview--open .details ul li:nth-child(4) {
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
}

.preview--open .details ul li:nth-child(5) {
    -webkit-transition-delay: 0.6s;
    transition-delay: 0.6s;
}

.details ul li:first-child {
    font-weight: bold;
    color: #909090;
}

.icon {
    font-family: 'camera-icons';
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
    text-transform: none;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    speak: none;
}

.icon + span {
    margin-left: 5px;
    vertical-align: middle;
}

.icon-focal_length:before {
    content: '\e600';
}

.icon-exposure_time:before {
    content: '\e601';
}

.icon-iso:before {
    content: '\e602';
}

.icon-camera:before {
    content: '\e603';
}

.icon-aperture:before {
    content: '\e604';
}

.details .icon {
    margin-right: 5px;
    color: #fff;
}


/* Close button */

.action {
    font-size: 1.5em;
    margin: 0;
    padding: 0;
    cursor: pointer;
    vertical-align: top;
    color: #fff;
    border: none;
    background: none;
}

.action:hover,
.action:focus {
    color: #fff;
    outline: none;
}

.action--close {
    position: fixed;
    z-index: 150;
    top: 0;
    right: 0;
    padding: 1em;
    opacity: 0;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, transform 0.3s;
    -webkit-transform: scale3d(0.6, 0.6, 1);
    transform: scale3d(0.6, 0.6, 1);
}

.preview--image-loaded .action--close {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
}

.text-hidden {
    position: absolute;
    display: block;
    overflow: hidden;
    width: 0;
    height: 0;
    color: transparent;
}

@media screen and (max-width: 40em) {
    .description--preview h3 {
        font-size: 0.5em;
    }
    .description--preview p,
    .details {
        display: none;
    }
}


@-webkit-keyframes roll {
    0% {
        -webkit-transform: translateX(500px) rotate(360deg);
    }
    100% {
        -webkit-transform: translateX(0px) rotate(0deg);
    }
}

@-moz-keyframes roll {
    0% {
        -moz-transform: translateX(500px) rotate(360deg);
        opacity: 0;
    }
    100% {
        -moz-transform: translateX(0px) rotate(0deg);
        opacity: 1;
    }
}

@-o-keyframes roll {
    0% {
        -o-transform: translateX(500px) rotate(360deg);
        opacity: 0;
    }
    100% {
        -o-transform: translateX(0px) rotate(0deg);
        opacity: 1;
    }
}

@-ms-keyframes roll {
    0% {
        -ms-transform: translateX(500px) rotate(360deg);
        opacity: 0;
    }
    100% {
        -ms-transform: translateX(0px) rotate(0deg);
        opacity: 1;
    }
}

@keyframes roll {
    0% {
        transform: translateX(500px) rotate(360deg);
        opacity: 0;
    }
    100% {
        transform: translateX(0px) rotate(0deg);
        opacity: 1;
    }
}

@-webkit-keyframes moveUp {
    0% {
        -webkit-transform: translateY(40px);
    }
    100% {
        -webkit-transform: translateY(0px);
    }
}

@-moz-keyframes moveUp {
    0% {
        -moz-transform: translateY(40px);
    }
    100% {
        -moz-transform: translateY(0px);
    }
}

@-o-keyframes moveUp {
    0% {
        -o-transform: translateY(40px);
    }
    100% {
        -o-transform: translateY(0px);
    }
}

@-ms-keyframes moveUp {
    0% {
        -ms-transform: translateY(40px);
    }
    100% {
        -ms-transform: translateY(0px);
    }
}

@keyframes moveUp {
    0% {
        transform: translateY(40px);
    }
    100% {
        transform: translateY(0px);
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-o-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-ms-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes scaleDown {
    0% {
        -webkit-transform: scale(1);
    }
    100% {
        -webkit-transform: scale(0.5);
    }
}

@-moz-keyframes scaleDown {
    0% {
        -moz-transform: scale(1);
    }
    100% {
        -moz-transform: scale(0.5);
    }
}

@-o-keyframes scaleDown {
    0% {
        -o-transform: scale(1);
    }
    100% {
        -o-transform: scale(0.5);
    }
}

@-ms-keyframes scaleDown {
    0% {
        -ms-transform: scale(1);
    }
    100% {
        -ms-transform: scale(0.5);
    }
}

@keyframes scaleDown {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0.5);
    }
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-moz-keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-o-keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-ms-keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@media screen and (max-width: 660px) {
    .slit-demo-1 .deco {
        width: 130px;
        height: 130px;
        margin-left: -65px;
        margin-bottom: 50px;
    }
    .slit-demo-1[data-icon]:after {
        width: 110px;
        height: 110px;
        line-height: 110px;
        font-size: 40px;
        margin: -55px 0 0 -55px;
    }
    .slit-demo-1 .sl-slide blockquote {
        margin-bottom: -120px;
    }
    .slit-demo-1 .sl-slide h2 {
        line-height: 22px;
        font-size: 18px;
        margin-bottom: -40px;
        letter-spacing: 8px;
    }
    .slit-demo-1 .sl-slide blockquote p:before {
        line-height: 10px;
        width: 40px;
        height: 40px;
        font-size: 120px;
        left: -45px;
    }
    .demo-2 .sl-slider-wrapper {
        height: 500px;
    }
    .demo-2 .sl-slider h2 {
        font-size: 36px;
    }
    .demo-2 .sl-slider blockquote {
        font-size: 16px;
    }
}

.sl-slider-wrapper {
    width: 800px;
    height: 400px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.sl-slider {
    position: absolute;
    top: 0;
    left: 0;
}

.sl-slide,
.sl-slides-wrapper,
.sl-slide-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.sl-slide {
    z-index: 1;
}

.sl-content-slice {
    overflow: hidden;
    position: absolute;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    background: #fff;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    opacity: 1;
}

.sl-slide-horizontal .sl-content-slice {
    width: 100%;
    height: 50%;
    left: -200px;
    -webkit-transform: translateY(0%) scale(1);
    -moz-transform: translateY(0%) scale(1);
    -o-transform: translateY(0%) scale(1);
    -ms-transform: translateY(0%) scale(1);
    transform: translateY(0%) scale(1);
}

.sl-slide-horizontal .sl-content-slice:first-child {
    top: -200px;
    padding: 200px 200px 0px 200px;
}

.sl-slide-horizontal .sl-content-slice:nth-child(2) {
    top: 50%;
    padding: 0px 200px 200px 200px;
}

.sl-slide-vertical .sl-content-slice {
    width: 50%;
    height: 100%;
    top: -200px;
    -webkit-transform: translateX(0%) scale(1);
    -moz-transform: translateX(0%) scale(1);
    -o-transform: translateX(0%) scale(1);
    -ms-transform: translateX(0%) scale(1);
    transform: translateX(0%) scale(1);
}

.sl-slide-vertical .sl-content-slice:first-child {
    left: -200px;
    padding: 200px 0px 200px 200px;
}

.sl-slide-vertical .sl-content-slice:nth-child(2) {
    left: 50%;
    padding: 200px 200px 200px 0px;
}

.sl-content-wrapper {
    position: absolute;
}

.sl-content {
    width: 100%;
    height: 100%;
    background: #fff;
}

.sl-slide-horizontal .sl-slide-inner {
    background: #ddd;
}

.sl-slide-vertical .sl-slide-inner {
    background: #ccc;
}

.bg-img {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* 5.3. Concept 3 */

.photostack {
    background: #ddd;
    position: relative;
    text-align: center;
    overflow: hidden;
}

.photostack-start {
    cursor: pointer;
}

.photostack > div {
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

.photostack figure {
    width: 320px;
    height: 360px;
    position: relative;
    display: inline-block;
    background: #fff;
    padding: 40px;
    text-align: center;
    margin: 5px;
}

.js .photostack figure {
    position: absolute;
    display: block;
    margin: 0;
}

.photostack figcaption h2 {
    margin: 20px 0 0 0;
    color: #000000;
    font-size: 16px;

}

.photostack-img {
    outline: none;
    display: block;
    background: #f9f9f9;
}

.photostack-back {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #fff;
    color: #a7a0a2;
    padding: 50px 40px;
    text-align: left;
    font-size: 22px;
    line-height: 1.25;
    z-index: 1;
}

.photostack-back p {
    margin: 0;
}

.photostack-back p span {
    text-decoration: line-through;
}

.photostack nav {
    position: absolute;
    width: 100%;
    bottom: 30px;
    z-index: 90;
    text-align: center;
    left: 0;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
}

.photostack-start nav {
    opacity: 0;
}

.photostack nav span {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    background: #000000;
    border-radius: 50%;
    text-align: center;
    -webkit-transition: -webkit-transform 0.6s ease-in-out, background 0.3s;
    transition: transform 0.6s ease-in-out, background 0.3s;
    -webkit-transform: scale(0.48);
    transform: scale(0.48);
}

.photostack nav span:last-child {
    margin-right: 0;
}

.photostack nav span.current {
    background: #000000;
    -webkit-transform: scale(1);
    transform: scale(1);
}

.photostack nav span.current.flip {
    -webkit-transform: scale(1) rotateY(-180deg) translateZ(-1px);
    transform: scale(1) rotateY(-180deg) translateZ(-1px);
    background: #555;
}

.photostack nav span.flippable::after {
    opacity: 1;
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
}

.js .photostack::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    top: 0;
    left: 0;
    z-index: 100;
    -webkit-transition: opacity 0.3s, visibility 0s 0.3s;
    transition: opacity 0.3s, visibility 0s 0.3s;
}

.js .photostack-start::before {
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
}

.js .photostack::after {
    content: 'View Gallery';
    font-weight: 400;
    position: absolute;
    border: 3px solid #fff;
    text-align: center;
    white-space: nowrap;
    left: 50%;
    top: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    padding: 10px 20px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    z-index: 101;
}

.js .photostack::before,
.js .photostack::after {
    opacity: 0;
    visibility: hidden;
}

.js .photostack-start::before,
.js .photostack-start:hover::after,
.touch .photostack-start::after {
    opacity: 1;
    visibility: visible;
}

.photostack figure::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    visibility: visible;
    opacity: 1;
    background: rgba(0, 0, 0, 0.05);
    -webkit-transition: opacity 0.6s;
    transition: opacity 0.6s;
}

figure.photostack-current::after {
    -webkit-transition: opacity 0.6s, visibility 0s 0.6s;
    transition: opacity 0.6s, visibility 0s 0.6s;
    opacity: 0;
    visibility: hidden;
}

.photostack-transition figure {
    -webkit-transition: -webkit-transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out;
}

.photostack-perspective {
    -webkit-perspective: 1800px;
    perspective: 1800px;
}

.photostack-perspective > div,
.photostack-perspective figure {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.photostack-perspective figure,
.photostack-perspective figure div {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.photostack-perspective figure.photostack-flip {
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
}

.csstransformspreserve3d figure.photostack-flip .photostack-back {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    display: block;
}

.no-csstransformspreserve3d figure.photostack-showback .photostack-back {
    display: block;
}

.no-js .photostack figure {
    box-shadow: -2px 2px 0 rgba(0, 0, 0, 0.05);
}

.no-js .photostack figure::after {
    display: none;
}

.no-js .photostack figure:nth-child(3n) {
    -webkit-transform: translateX(-10%) rotate(5deg);
    transform: translateX(-10%) rotate(5deg);
}

.no-js .photostack figure:nth-child(3n-2) {
    -webkit-transform: translateY(10%) rotate(-3deg);
    transform: translateY(10%) rotate(-3deg);
}

#photostack-1 nav span.current {
    background: #888;
    -webkit-transform: scale(0.61);
    transform: scale(0.61);
}

.grid {
    margin: 40px auto 120px;
    max-width: 1000px;
    width: 90%;
}

.grid a {
    float: left;
    width: 33%;
    color: #000000;
}

.grid figure {
    position: relative;
    overflow: hidden;
    margin: 5px;
    background: #000000;
}

.grid figure img {
    position: relative;
    display: block;
    width: 100%;
    opacity: 0.7;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
}

.grid figcaption {
    position: absolute;
    top: 0;
    z-index: 11;
    padding: 10px;
    width: 100%;
    height: 100%;
    text-align: center;
}

.grid figcaption h2 {
    margin: 0 0 20px 0;
    color: #3498db;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 300;
    font-size: 130%;
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
}

.grid figcaption p {
    padding: 0 20px;
    color: #aaa;
    font-weight: 300;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, transform 0.3s;
}

.grid figcaption h2,
.grid figcaption p {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
}

.grid figure button {
    position: absolute;
    padding: 4px 20px;
    border: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, transform 0.3s;
}

.grid figcaption,
.grid figcaption h2,
.grid figcaption p,
.grid figure button {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.grid svg {
    position: absolute;
    top: -1px;
    z-index: 10;
    width: 100%;
    height: 100%;
}

.grid svg path {
    fill: #fff;
}

.grid a:hover figure img {
    opacity: 1;
}

.grid a:hover figcaption h2,
.grid a:hover figcaption p {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.grid a:hover figcaption p {
    opacity: 0;
}

.demo-1 body {
    background: #3498db;
}

.demo-1 .grid figure button,
.demo-3 .grid figure button {
    top: 50%;
    left: 50%;
    border: 3px solid #fff;
    background: transparent;
    cursor: pointer;
    color: #fff;
    opacity: 0;
    -webkit-transform: translateY(-50%) translateX(-50%) scale(0.25);
    transform: translateY(-50%) translateX(-50%) scale(0.25);
}

.demo-1 .grid a:hover figure button,
.demo-3 .grid a:hover figure button {
    opacity: 1;
    -webkit-transform: translateY(-50%) translateX(-50%) scale(1);
    transform: translateY(-50%) translateX(-50%) scale(1);
}

.demo-2 body {
    background: #e74c3c;
}

.demo-2 .grid figcaption h2 {
    color: #e74c3c;
}

.demo-2 .grid figcaption p {
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
}

.demo-2 .grid figure button {
    bottom: 0;
    left: 0;
    padding: 15px;
    width: 100%;
    background: #fff;
    color: #000000;
    font-weight: 300;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}

.demo-2 .grid a:hover figure button {
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.demo-2 .grid figcaption h2,
.demo-2 .grid figcaption p,
.demo-3 .grid figcaption h2,
.demo-3 .grid figcaption p {
    -webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.115, 1);
    /* older webkit */
    -webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.115, 1.445);
    timing-function: cubic-bezier(0.250, 0.250, 0.115, 1.445);
}

.demo-2 .grid a:hover figcaption p,
.demo-3 .grid a:hover figcaption p {
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    -webkit-transition-duration: 0.1s;
    transition-duration: 0.1s;
}

.demo-3 body {
    background: #52be7f;
}

.demo-3 .grid figcaption h2 {
    color: #52be7f;
}

.demo-3 .grid a:hover figcaption h2 {
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
}

@media screen and (max-width: 58em) {
    .grid a {
        width: 33.333%;
    }
    .grid a:nth-child(odd) {
        margin: 0;
    }
    .grid a:nth-child(3n-1) {
        margin: 30px 0 -30px 0;
    }
}

@media screen and (max-width: 45em) {
    .grid {
        max-width: 500px;
    }
    .grid a {
        width: 50%;
    }
    .grid a:nth-child(3n-1) {
        margin: 0;
    }
    .grid a:nth-child(even) {
        margin: 30px 0 -30px 0;
    }
    .grid figcaption h2 {
        margin-bottom: 0px;
        -webkit-transform: translateY(30px);
        transform: translateY(30px);
    }
    .grid figcaption p {
        margin: 0;
        padding: 0 10px;
    }
}

@media screen and (max-width: 27em) {
    .grid {
        max-width: 250px;
    }
    .grid a {
        width: 100%;
    }
    .grid a:nth-child(even) {
        margin: 0;
    }
}

/* 5.4. Concept 4 */


/* 5.5. Concept 5 */

.concept-5.demo-1 .grid-svg figure button {
    cursor: pointer;
    -moz-transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -o-transition: all .3s linear;
}

.concept-5.demo-1 .grid-svg figure button:hover {
    border: 3px solid #fff;
    background-color: #fff;
    color: #000000;
}

/* 5.6. Concept 6 */

.concept-6 .column {
    padding: 0;
}

.concept-6.concept-grid-iso .gallery-item .image {
    margin: 0;
}

.concept-6 .image img {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    position: relative;
    -webkit-backface-visibility: hidden;
}

.concept-6 .image:hover img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}


/* 5.6.1. Concept 6 - 1 Column */

.concept-6 .image img {
    width: 100%;
}

.concept-6 .gallery-item.col-1 {
    margin-bottom: 15px;
}

.concept-6 .gallery-item.col-1:last-child {
    margin-bottom: 0;
}

.with-space {
    overflow: hidden;
}

.with-space .col-2 {
    width: 49%;
}

.with-space .col-3 {
    width: 32.333333%;
}

.with-space .col-4 {
    width: 24%;
}

.with-space .col-5 {
    width: 19%;
}

.with-space .gallery-section {
    margin-right: -1%;
    margin-bottom: -1%;
}

.with-space .gallery-item {
    margin: 0 1% 1% 0;
}

.gallery-isogrid .gallery-item .image img {
    width: 100%;
    height: 100%;
}

/* 5.7. Concept 7 */

.concept-7 .column {
    padding: 0;
}

.concept-7.concept-masonry-iso .gallery-item .image {
    margin: 0;
}

.concept-7 .image img {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    position: relative;
    -webkit-backface-visibility: hidden;
}

.concept-7 .image:hover img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

/* 5.8. Concept 8 */


/* 5.9. Concept 9 */

.carousel-wrap-layout.owl-carousel {
    overflow: hidden;
}

.owl-carousel-layout .owl-carousel .owl-item.center .gallery-overlay {
    opacity: 1;
    text-align: center;
    padding: 190px 40px 30px 40px;
}

.owl-carousel-layout .owl-carousel .owl-item.center .gallery-overlay h3,
.owl-carousel-layout .owl-carousel .owl-item.center .gallery-overlay h4 {
    letter-spacing: 0.1em;
    color: #fff;
    margin-bottom: 0;
}

.owl-carousel-layout .owl-carousel .owl-item img {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    opacity: .7;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    position: relative;
    -webkit-backface-visibility: hidden;
}

.owl-carousel-layout .owl-carousel .owl-item.center img {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

.owl-carousel-layout .owl-prev, .owl-carousel-layout .owl-next {
    background: transparent !important;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.owl-carousel-layout .owl-prev i, .owl-carousel-layout .owl-next i {
    font-size: 30px;
    color: #000;
    opacity: 0.7;
    font-weight: bold;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

.owl-carousel-layout .owl-prev:hover i  {
    opacity: 1;
}

.owl-carousel-layout .owl-next:hover i {
    opacity: 1;
}

.owl-carousel-layout .owl-prev i:before, .owl-carousel-layout .owl-next i:before {
    border: 2px solid;
    padding: 7px;
    border-radius: 100%;
}

.owl-carousel-layout .owl-prev {
    left: -10%;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

.owl-carousel-layout .owl-next {
    right: -10%; 
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

.owl-carousel-layout .carousel-wrap-layout.owl-carousel:hover .owl-prev {
    left: 0;
}

.owl-carousel-layout .carousel-wrap-layout.owl-carousel:hover .owl-next {
    right: 0;
}

/* 5.10. Concept 10 */

.page-template-concept-10 #mega-menu-wrap-header-menu #mega-menu-header-menu > li.mega-menu-item > a.mega-menu-link,
.page-template-concept-10 #slide-buttons {
    color: #fff;
}

.concept-10 .ms-section.ms-table {
    background-position: center center;
    background-size: cover;
    position: relative;
}

.concept-10 .ms-section.ms-table .overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

.concept-10 .ms-section.ms-table:hover .overlay {
    background-color: rgba(0, 0, 0, 0.4);
}

.concept-10 .ms-tableCell .gallery-caption {
    padding: 0 20%;
    position: relative;
    z-index: 20;
    text-align: center;
}

.concept-10 .ms-tableCell .gallery-caption h2,
.concept-10 .ms-tableCell .gallery-caption p,
.concept-10 .ms-tableCell .gallery-caption cite {
    color: #fff;
}

.concept-10 .ms-tableCell .gallery-caption h2 {
    letter-spacing: 0.1em;
    display: inline-block;
    margin: 0;
}

.concept-10 .ms-tableCell .gallery-caption h2:after {
    content: "";
    position: relative;
    display: block;
    margin: 20px auto;
    height: 2px;
    background: white;
    transform: scale(1.3, 1);
    -ms-transform: scale(1.3, 1);
    -webkit-transform: scale(1.3, 1);
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

.concept-10 .ms-section.ms-table:hover .ms-tableCell .gallery-caption h2:after {
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
    transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
}

.concept-10 .ms-tableCell .gallery-caption p {
    font-size: 16px;
    line-height: 22px;
}

.concept-10 .ms-tableCell .gallery-caption cite {
    font-size: 16px;
    font-weight: bold;
}

#multiscroll-nav span {
    border: 1px solid #fff !important;
}

#multiscroll-nav li .active span {
    background: #fff !important;
}

/* 5.11. Concept 11 */



/* 5.12. Concept 12 */

main.codrops {
    overflow: hidden;
}

.hidden {
    position: absolute;
    overflow: hidden;
    width: 0;
    height: 0;
    pointer-events: none;
}

.icon {
    /*display: block;*/
    width: 1.5em;
    height: 1em;
    margin: 0 auto;
    fill: currentColor;
}

.btn {
    display: inline-block;
    margin: 0;
    padding: 0;
    cursor: pointer;
    pointer-events: auto;
    color: #000000;
    background-color: transparent;
    border: 2px solid #000000;
    line-height: 18px;
    padding: 8px;
}

.btn:focus {
    outline: none;
}

.btn:hover {
    background-color: #000000;
    color: #fff;
    border: 2px solid #000000;
}

.btn--arrow {
    font-size: 0.4em;
}

.slide__title .view-album a {
    color: #000000;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.1em;
    background-color: transparent;
    padding: 10px 20px;
    display: inline-block;
    border: 2px solid #000000;
    margin-top: 10px;
}

.slide__title .view-album a:hover {
    color: #fff;
    background-color: #000000;
    border: 2px solid #000000;
}

.slideshow__nav {
    position: absolute;
}

.no-js .slideshow__nav {
    display: none;
}

.slideshow__nav--arrows {
    font-size: 4em;
    right: 30px;
    bottom: 20px;
    pointer-events: auto;
    opacity: 1;
}

.slideshow__nav--arrows button i {
    line-height: 42px;
}

.slideshow__nav--arrows .icon {
    height: 1.5em;
}

.content--related {
    font-size: 0.85em;
    font-weight: bold;
    text-align: center;
}

.media-item {
    display: inline-block;
    padding: 1em;
    vertical-align: top;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
}

.media-item__img {
    max-width: 100%;
    opacity: 0.3;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
}

.media-item:hover .media-item__img,
.media-item:focus .media-item__img {
    opacity: 1;
}

.media-item__title {
    font-size: 1em;
    margin: 0;
    padding: 0.5em;
}

@media screen and (max-width: 45em) {
    .slideshow__nav--arrows {
        font-size: 2em;
        right: auto;
        bottom: 0.2em;
        left: 0.7em;
    }

}

.slideshow {
    position: relative;
}

.slideshow:focus {
    outline: none;
}

.js .slideshow::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70px;
    height: 70px;
    margin: -35px 0 0 -35px;
    pointer-events: none;
    border: 10px solid rgba(255, 255, 255, 0.1);
    border-top-color: #ffeb3b;
    border-radius: 50%;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
    -webkit-animation: rotateLoader 0.8s linear infinite forwards;
    animation: rotateLoader 0.8s linear infinite forwards;
}

@-webkit-keyframes rotateLoader {
    to {
        -webkit-transform: rotate3d(360deg);
        transform: rotate3d(360deg);
    }
}

@keyframes rotateLoader {
    to {
        -webkit-transform: rotate3d(0, 0, 1, 360deg);
        transform: rotate3d(0, 0, 1, 360deg);
    }
}

.js .slideshow--loaded::after {
    opacity: 0;
}

.js .slideshow {
        height: 100%;
    max-height: 100%;
    pointer-events: none;
}

.slide {
    position: relative;
    width: 100%;
    padding: 5em 0 15em;
}

.slide.slide--layout-5 {
    padding: 5em 0 10em;
}

.js .slide {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    margin: 0;
    pointer-events: none;
    opacity: 0;
}

.js .slide--current {
    pointer-events: auto;
    opacity: 1;
}

.slide-imgwrap {
    position: relative;
    height: 100%;
    margin: 0 auto;
}

.no-js .slide-imgwrap {
    height: 400px;
}

.slide__img-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: tranform, opacity;
    background-position: 50% 50%;
    background-size: cover;
}

.slide__title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: calc(100% - 11em);
    max-width: 800px;
    padding: 2em;
}

.js .slide__title {
    pointer-events: none;
    opacity: 0;
}

.js .slide--current .slide__title {
    pointer-events: auto;
    opacity: 1;
}

.slide__title-main {
    font-size: 3em;
    line-height: 0.8;
    display: inline-block;
    margin: 0;
}

.slide__title-sub {
    font-size: 1.15em;
    line-height: 1.5;
    margin-top:5px;
}

.slide__title-sub a {
    border-bottom: 1px solid;
}

@media screen and (max-width: 45em) {
    .slideshow {
        padding-top: 7em;
    }
    .js .slideshow {
        height: calc(100vh - 60px);
    }
    /*.slide {
        padding: 2em 0 6em;
    }*/
    .no-js .slide {
        padding: 4em 0 0;
    }
    .slide-imgwrap {
        width: calc(100% - 1em);
    }
    .slide__title {
        width: calc(100% - 2em);
        margin: 0 0 4em 0;
        padding: 1.5em;
    }
    .slide__title-main {
        font-size: 2em;
    }
}

.slide--layout-1 .slide__img {
    position: absolute;
    width: calc(50% - 0.5em);
}

.slide--layout-1 .slide__img:first-child {
    height: 100%;
}

.slide--layout-1 .slide__img:nth-child(n+2) {
    left: calc(50% + 0.5em);
    height: calc(50% - 0.5em);
}

.slide--layout-1 .slide__img:nth-child(3) {
    top: calc(50% + 0.5em);
}

/* 5.13. Concept 13 */

.slide--layout-2 .slide__img {
    position: absolute;
    top: 50%;
    left: 50%;
}

.slide--layout-2 .slide__img:not(:last-child) {
    width: 300px;
    height: 300px;
}

.slide--layout-2 .slide__img:not(:last-child) .slide__img-inner {
    border: 6px solid #e2e2e2;
}

.slide--layout-2 .slide__img:first-child {
    -webkit-transform: translate3d(-50%,-50%,0) translate3d(-60%,-40%,0) rotate(-16deg);
    transform: translate3d(-50%,-50%,0) translate3d(-60%,-40%,0) rotate(-16deg);
}

.slide--layout-2 .slide__img:nth-child(2) {
    -webkit-transform: translate3d(-50%,-50%,0) translate3d(60%,-40%,0) rotate(10deg);
    transform: translate3d(-50%,-50%,0) translate3d(60%,-40%,0) rotate(10deg);
}

.slide--layout-2 .slide__img:nth-child(3) {
    -webkit-transform: translate3d(-50%,-50%,0) translate3d(60%,40%,0) rotate(-15deg);
    transform: translate3d(-50%,-50%,0) translate3d(60%,40%,0) rotate(-15deg);
}

.slide--layout-2 .slide__img:nth-child(4) {
    -webkit-transform: translate3d(-50%,-50%,0) translate3d(-60%,40%,0) rotate(10deg);
    transform: translate3d(-50%,-50%,0) translate3d(-60%,40%,0) rotate(10deg);
}

.slide--layout-2 .slide__img:last-child {
    -webkit-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0);
    width: 450px;
    height: 400px;
}

.slide--layout-2 .slide__img:last-child .slide__img-inner {
    border: 10px solid #e2e2e2;
    border-bottom-width: 65px;
}

.slide__img-caption {
    position: absolute;
    width: 100%;
    top: 100%;
    text-align: center;
    margin: 0;
    padding: 1em;
    font-size: 1.25em;
    color: #000000;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

@media screen and (max-width: 45em) {
    .slide--layout-2 .slide__img:not(:last-child) {
        width: 100px;
        height: 100px;
    }
    .slide--layout-2 .slide__img:last-child .slide__img-inner {
        border-bottom-width: 40px;
    }
    .slide--layout-2 .slide__img:last-child {
        width: 160px;
        height: 160px;
    }
    .slide__img-caption {
        font-size: 0.75em;
    }
}

/* 5.14. Concept 14 */

.slide--layout-3 .slide__img {
    position: absolute;
    width: 450px;
    height: 450px;
    top: 40%;
    left: 50%;
    -webkit-transform: translate3d(-50%,-50%,0) translate3d(-50%,0,0) rotate(-10deg);
    transform: translate3d(-50%,-50%,0) translate3d(-50%,0,0) rotate(-10deg);
}

@media screen and (max-width: 45em) {
    .slide--layout-3 .slide__img {
        width: 200px;
        height: 200px;
    }
}

.slide--layout-3 .slide__img-inner {
    -webkit-transform-origin: 50% 200%;
    transform-origin: 50% 200%;
}

/* 5.15. Concept 15 */

.slide--layout-4 a.album-redirect {
    position: absolute;
}

.slide--layout-4 a.album-redirect:nth-child(2) {
    top: 15%;
    left: 15%;
    width: 30%;
    height: 50%;
}

.slide--layout-4 a.album-redirect:first-child {
    top: 40%;
    left: 5%;
    width: 80%;
    height: 60%;
}

.slide--layout-4 a.album-redirect:nth-child(3) {
    top: 0;
    left: 40%;
    width: 40%;
    height: 60%;
}

.slide--layout-4 a.album-redirect:nth-child(4) {
    top: 50%;
    left: 75%;
    width: 22.5%;
    height: 42.5%;
}

/* 5.16. Concept 16 */

.slide--layout-5 .slide-imgwrap {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    padding: 8% 0;
    width: 100%;
}

.slide--layout-5 .slide__img {
    position: relative;
    width: calc((100% / 6) - 10px);
    padding-bottom: calc((100% / 6) - 10px);
    min-height: 150px;
    margin: 5px;
}

@media screen and (max-width: 45em) {
    .slide--layout-5 .slide__img {
        min-height: 50px;
    }
}

/* 5.17. Concept 17 */

.slide--layout-6 a.album-redirect {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 45%;
    padding-bottom: 45%;
    -webkit-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0);
}

.slide--layout-6 .slide__img-inner {
    border-radius: 50%;
}

.slide--layout-6 a.album-redirect:first-child {
    -webkit-transform: translate3d(0%,-40%,0) scale(0.6);
    transform: translate3d(0%,-40%,0) scale(0.6);
}

.slide--layout-6 a.album-redirect:nth-child(3) {
    -webkit-transform: translate3d(-100%,-60%,0) scale(0.75);
    transform: translate3d(-100%,-60%,0) scale(0.75);
}

/* 5.18. Concept 18 */

.slide--layout-7 a.album-redirect {
    position: absolute;
    width: 41%;
    height: 100%;
}

.slide--layout-7 a.album-redirect:nth-child(2) {
    left: 30%;
}

.slide--layout-7 a.album-redirect:nth-child(3) {
    left: 60%;
}

.slide--layout-7 .slide__img-inner {
    -moz-clip-path: url('../index.html#polygon-clip-rhomboid'); /* Firefox needs this path */
    -webkit-clip-path: polygon(0% 100%, 30% 0%, 100% 0%, 70% 100%);
    clip-path: polygon(0% 100%, 30% 0%, 100% 0%, 70% 100%);
}

/*-----------------------------------------------------------------------------------*/
/*  6.  Single Gallery
/*-----------------------------------------------------------------------------------*/

.page-title .title-wrap .author-section {
    margin-bottom: 30px;
}

.page-title .title-wrap .subtitle-album {
    color: #999999;
    font-size: 18px;    
    padding: 10px 0 0;
    display: block;
}

.page-title .title-wrap .title-content p {
    font-size: 28px;
    line-height: normal;
}

.single-gallery .page-title .title-wrap .title-content cite {
    font-weight: bold;
    margin-top: 20px;
    display: inline-block;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/*creative grid*/


.single-gallery .album-2 .caption-gallery {
    font-size: 18px;
    color: #999999;
}

.single-gallery .album-2 h3 {
    margin-bottom: 10px;
}

/*gallery full slider info*/

.gallery-info-slide {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}

.gallery-slider-info {
    position: relative;
}

.gallery-slider-info .flexslider {
    margin: 0;
    border: 0;
    padding: 0;
}

.gallery-slider-info .flexslider .slides > li {
    background-size: cover;
    background-position: center center;
}

.gallery-slider-info .flex-direction-nav a {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 14px 29px;
    color: transparent;
    text-shadow: none !important;
    text-indent: 9999px;
    background-color: rgba(255, 255, 255, 0.3);
    padding: 40px;
}

.gallery-slider-info .flex-direction-nav .flex-prev {
    background-image: url(./img/navigate-left-light.png) !important;
    left: 3% !important;
    opacity: 1 !important;
    text-indent: 99999px;
    top: auto;
    bottom: 20%;
}

.gallery-slider-info .flex-direction-nav .flex-next {
    background-image: url(./img/navigate-right-light.png) !important;
    opacity: 1 !important;
    left: 8% !important;
    text-indent: 99999px;
    top: auto;
    bottom: 20%;
}

.gallery-slider-content .content-text {
    position: absolute;
    top: 82%;
    left: 3%; 
}

.info-content, .info-content p {
    color: #ffffff;
}

.info-content p {
    margin-bottom: 10px;
    width: 75%;
    line-height: 1.4;
    font-size: 15px;
}

.info-content .album-title {
    margin-bottom: 10px;
}

.gallery-slider-details {
    position: absolute;
    bottom: 10%;
    right: 5%;
    padding: 0 0 80px;
}

.gallery-slider-details .info-icon {
    bottom: 2px;
    right: 25px;
    z-index: 500;
    top: auto;
    left: auto;
    position: absolute;
    background-color: #ffffff;
    border-radius: 100%;
}

.gallery-slider-details .info-icon:hover {
    cursor: pointer;
}

.gallery-slider-details .info-icon:before {
    background-color: #fff;
    padding: 10px;
    border-radius: 100%;
}

.gallery-slider-details ul {
    list-style: none;
    opacity: 0;
    left: auto;
    color: #fff;
    padding: 35px;
    background-color: #111111;
    position: relative;
    border-radius: 30px;
    -webkit-transition: all 1s ease; /* Safari and Chrome */
    -moz-transition: all 1s ease; /* Firefox */
    -ms-transition: all 1s ease; /* IE 9 */
    -o-transition: all 1s ease; /* Opera */
    transition: all 1s ease;
}

.gallery-slider-details ul:after {
    content: '';
    position: absolute;
    top: auto;
    bottom: -30px;
    left: auto;
    right: 30px;
    width: 0;
    height: 0;
    overflow: hidden;
    border-width: 15px;
    border-style: dashed dashed solid dashed;
    border-color: #111111 transparent transparent transparent;

}

.gallery-slider-details li {
    line-height: 1.9;
    font-size: 14px;
}

.gallery-slider-details ul li i:before, .gallery-slider-details ul li span {
    color: #ffffff !important;
}

.gallery-slider-details ul li i {
    margin-top: 6px;
}

.gallery-slider-details ul.active {
    opacity: 1;
}

/*gallery list*/

ul.lists-gallery {
    list-style: none;
    padding: 0;
    margin: 0;
}

.list-gallery {
    padding: 60px 0;
    position: relative;
}

.list-gallery.normal-background {
    background-color: #ffffff;
    border-top: 1px solid #eeeeee;
}

.list-gallery.normal-background:first-child {
    border: 0;
    padding-top: 0;
}

.list-gallery .expander-image {
    color: #ffffff;
    position: absolute;
    top: 80px;
    right: 20%;
    font-size: 30px;
    opacity: 0;
    -webkit-transition: all 0.2s ease-in-out; /* Safari and Chrome */
    -moz-transition: all 0.2s ease-in-out; /* Firefox */
    -ms-transition: all 0.2s ease-in-out; /* IE 9 */
    -o-transition: all 0.2s ease-in-out; /* Opera */
    transition: all 0.2s ease-in-out;
}

.list-gallery .expander-image.active {
    opacity: 1;
}

.list-gallery img {
    width: 62%;
    margin: auto;
    -webkit-transition: all 0.2s ease-in-out; /* Safari and Chrome */
    -moz-transition: all 0.2s ease-in-out; /* Firefox */
    -ms-transition: all 0.2s ease-in-out; /* IE 9 */
    -o-transition: all 0.2s ease-in-out; /* Opera */
    transition: all 0.2s ease-in-out;
}

.list-gallery:hover img {
    opacity: 0.7;
    cursor: pointer;
}

.list-gallery-content {
    margin-top: 40px;
}

.gallery-content, .gallery-details {
    float: left;
    width: 50%;
}

.list-gallery .gallery-details ul {
    padding: 0;
    list-style: none;
    max-width: 100%;
}

.list-gallery .gallery-details li {
    display: inline-block;
    width: 49%;
    max-width: 100%;
}

.list-gallery .gallery-details li i {
    margin-top: 5px;
}

.list-gallery .gallery-details li i.fa-user {
    color: #9d9d9d;
}

.list-gallery .album-author span {
    margin-left: 15px;
    vertical-align: middle;
}

.ab-dark .gallery-content, .ab-dark .gallery-details, .ab-dark .gallery-details i:before {
    color: #e3e3e3;
}

.ab-light .gallery-content, .ab-light .gallery-details, .ab-light .gallery-details i:before {
    color: #000000;
}

/* Polaroid Grid */

.polaroid-grid .gallery-item .border-wrap {
    background-color: #ffffff;
    border: 10px solid #ffffff;
}

.polaroid-grid .gallery-item .gallery-info {
    padding: 15px 5px 10px;
}

.polaroid-grid .gallery-item .gallery-info h4 {
    margin-bottom: 0;
    text-transform: capitalize;
}

.polaroid-grid .gallery-item .gallery-info p.caption {
    margin-top: 5px;
    margin-bottom: 0;
}

.polaroid-grid .gallery-item .image img {
    -webkit-transition: all 0.7s cubic-bezier(0.600, 0.000, 0.200, 1.000);
    -moz-transition: all 0.7s cubic-bezier(0.600, 0.000, 0.200, 1.000);
    -o-transition: all 0.7s cubic-bezier(0.600, 0.000, 0.200, 1.000);
    transition: all 0.7s cubic-bezier(0.600, 0.000, 0.200, 1.000);
    -webkit-transition-timing-function: cubic-bezier(0.600, 0.000, 0.200, 1.000);
    -moz-transition-timing-function: cubic-bezier(0.600, 0.000, 0.200, 1.000);
    -o-transition-timing-function: cubic-bezier(0.600, 0.000, 0.200, 1.000);
    transition-timing-function: cubic-bezier(0.600, 0.000, 0.200, 1.000);
}

.polaroid-grid .gallery-item .border-wrap:hover .image img {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

/* Chocolat Lightbox */

.chocolat-zoomable.chocolat-zoomed .chocolat-img {
    cursor: zoom-out;
}

.chocolat-open {
    overflow: hidden;
}

.chocolat-overlay {
    height: 100%;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
    background-color: #000;
    display: none;
    opacity: 1;
}

.chocolat-wrapper {
    height: 100%;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 200;
    color: #fff;
}

.chocolat-zoomable .chocolat-img {
    cursor: zoom-in;
}

.chocolat-loader {
    height: 32px;
    width: 32px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -16px;
    margin-top: -16px;
    z-index: 11;
    background: url(./img/chocolat/loader.gif);
    display: none;
}

.chocolat-content {
    position: fixed;
    width: 0px;
    height: 0px;
    left: 50%;
    top: 50%;
    z-index: 14;
    text-align: left;
}

.chocolat-content .chocolat-img {
    position: absolute;
    width: 100%;
    height: 100%;
}

.chocolat-wrapper .chocolat-left {
    position: absolute;
    left: 0;
    width: 50px;
    height: 100px;
    top: 50%;
    margin-top: -50px;
    cursor: pointer;
    background: url(./img/chocolat/left.png) 50% 50% no-repeat;
    z-index: 17;
    display: none;
}

.chocolat-wrapper .chocolat-right {
    position: absolute;
    right: 0;
    width: 50px;
    height: 100px;
    top: 50%;
    margin-top: -50px;
    cursor: pointer;
    background: url(./img/chocolat/right.png) 50% 50% no-repeat;
    z-index: 17;
    display: none;
}

.chocolat-wrapper .chocolat-right.active {
    display: block;
}

.chocolat-wrapper .chocolat-left.active {
    display: block;
}

.chocolat-wrapper .chocolat-top {
    position: absolute;
    top: 0px;
    right: 0;
    left: 0;
    line-height: 50px;
    height: 50px;
    overflow: hidden;
    z-index: 17;
    margin-bottom: 10px;
}

.chocolat-wrapper .chocolat-close {
    width: 50px;
    height: 50px;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    background: url(./img/chocolat/close.png) 50% 50% no-repeat;
}

.chocolat-wrapper .chocolat-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    line-height: 40px;
    height: 40px;
    font-size: 12px;
    z-index: 17;
    padding-left: 15px;
    padding-right: 15px;
    background: rgba(0, 0, 0, 0.2);
    text-align: right;
    margin-top: 10px;
}

.chocolat-wrapper .chocolat-set-title {
    display: inline-block;
    padding-right: 15px;
    line-height: 1;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
}

.chocolat-wrapper .chocolat-pagination {
    float: right;
    display: inline-block;
    padding-left: 15px;
    padding-right: 15px;
    margin-right: 15px;
    /*border-right: 1px solid rgba(255, 255, 255, 0.2);*/
}

.chocolat-wrapper .chocolat-fullscreen {
    width: 16px;
    height: 40px;
    background: url(./img/chocolat/fullscreen.png) 50% 50% no-repeat;
    display: block;
    margin: auto;
    cursor: pointer;
    float: right;
}

.chocolat-wrapper .chocolat-description {
    display: inline-block;
    float: left;
}

/* compact view */

.chocolat-cover .chocolat-content .chocolat-left,
.chocolat-cover .chocolat-content .chocolat-right {
    position: fixed;
    height: 100%;
    top: 0;
    padding: 0px;
}

.chocolat-cover .chocolat-content .chocolat-right {
    right: 0px;
    background: url(./img/chocolat/right-compact.png) 100% 50% no-repeat;
}

.chocolat-cover .chocolat-content .chocolat-left {
    left: 0;
    background: url(./img/chocolat/left-compact.png) 0% 50% no-repeat;
}

.chocolat-cover .chocolat-content .chocolat-top {
    top: 0;
    left: 0;
    position: fixed;
    z-index: 1;
}

.chocolat-cover .chocolat-content .chocolat-close {
    background: url(./img/chocolat/close-compact.png) 0% center no-repeat;
}

.chocolat-cover .chocolat-content .chocolat-bottom {
    bottom: 0;
    left: 0;
    position: fixed;
    background: rgba(255, 255, 255, 0.75);
    z-index: 1;
}

.chocolat-cover .chocolat-content .chocolat-pagination,
.chocolat-cover .chocolat-content .chocolat-description {
    padding: 0 10px;
}

/* no container mode*/

body.chocolat-open>.chocolat-overlay {
    z-index: 15;
}

body.chocolat-open>.chocolat-loader {
    z-index: 15;
}

body.chocolat-open>.chocolat-content {
    z-index: 17;
}

/* container mode*/

.chocolat-in-container .chocolat-wrapper,
.chocolat-in-container .chocolat-content,
.chocolat-in-container .chocolat-overlay {
    position: absolute;
}

.chocolat-in-container {
    position: relative;
}

/* uncomment to hide controls when zoomed-in*/

/*
.chocolat-zoomable .chocolat-top,
.chocolat-zoomable .chocolat-bottom,
.chocolat-zoomable .chocolat-right,
.chocolat-zoomable .chocolat-left {
    transition: opacity .3s ease, visibility 0s .3s;
   opacity: 1;
}

.chocolat-zoomable.chocolat-zoomed .chocolat-top,
.chocolat-zoomable.chocolat-zoomed .chocolat-bottom,
.chocolat-zoomable.chocolat-zoomed .chocolat-right,
.chocolat-zoomable.chocolat-zoomed .chocolat-left {
    visibility: hidden;
    opacity: 0;
}*/

/*magnific popup*/
.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close {
    right: -10px;
    top: -15px;
    font-size: 35px;
}

/*-----------------------------------------------------------------------------------*/
/*  7.  Footer
/*-----------------------------------------------------------------------------------*/

/* Style 1 */

#footer .style-1 {
    padding: 60px 0;
    overflow: hidden;
    border-top: 1px solid #eaeaea;
}

#footer .style-1 .copyright-text {
    font-size: 16px;
    margin-top: 13px;
    float: left;
}

#footer .style-1 .social-link {
    float: right;
}

#footer .social-link ul {
    margin: 0;
    padding: 0;
}

#footer .social-link ul li {
    display: inline-block;
    margin-left: 5px;
    text-align: center;
}

#footer .social-link ul li a {
    font-size: 15px;
    width: 45px;
    height: 45px;
    background-color: #000000;
    border-radius: 50%;
    line-height: 45px;
    color: #fff;
}

#footer .social-link ul li a:hover {
    opacity: 0.7;
}

/* Style 2 */

#footer .style-2 {
    padding-top: 100px;
    background-color: #000000;
}

.footer-wrap.style-2 .footer-desc {
    padding: 0 !important;
    margin-bottom: 60px;
    float: left;
    width: 50%;
}

.footer-wrap.style-2 .footer-desc p {
    color: #A2A2A2;
    font-size: 24px;
    font-size: 2.4rem;
    line-height: 32px;
    margin: 0;
}

.footer-wrap.style-2 .footer-button {
  width: 50%;
  float: left;
  position: relative;
}

.button-title {
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.button-title span {
    color: #fff;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.1em;
    background-color: transparent;
    padding: 10px 20px;
    display: inline-block;
    border: 2px solid #fff;
    -moz-transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -o-transition: all .3s linear;
}

.button-title span:hover {
    color: #000000;
    border: 2px solid #fff;
    background-color: #fff;
}

.footer-wrap.style-2 .copyright {
    overflow: hidden;
    padding: 40px 0;
}

.footer-wrap.style-2 .copyright-text {
    font-size: 16px;
    width: 50%;
    float: left;
    color: #ffffff;
    margin-top: 10px;
}

.footer-wrap.style-2 .copyright-text a {
    color: #ffffff;
}

#footer .style-2 .social-link {
    float: right;
}

#footer .style-2 .social-link ul li a {
    background-color: #A2A2A2;
    color: #000000;
}

/* Style 3 */

#footer .style-3 {
    padding: 60px 0;
}

.style-3 .copyright {
    text-align: center;
    font-size: 16px;
}

#footer .style-3 .social-link {
    margin-bottom: 20px;
}

#footer .style-3 .social-link ul li.last {
    margin-right: 0;
}

/* Footer Left Side */

.footer-header {
    position: absolute;
    bottom: 60px;
    padding: 0 30px;
}

.footer-header .social-link {
    display: block;
    overflow: hidden;
}

.footer-header .social-link ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.footer-header .social-link ul li {
    float: left;
    margin-right: 15px;
}

.footer-header .social-link ul li:last-child {
    margin-right: 0;
}

.footer-header .social-link ul li a {
    color: #ffffff;
    font-size: 18px;
}

.footer-header .copyright-text {
    margin-top: 20px;
    color: #ffffff;
}

.footer-header .copyright-text a {
    color: #ffffff;
}