/*
Theme Name: Studio Villa Update
Theme URI: 
Author: MeCreative, Studio Villa
Author URI: 
Description: 
Version: 1.2
License: 
License URI: 
Tags:  
Text Domain: 
*/

BODY, H1, H2 {font-family:'Merkury Regular',sans-serif}
STRONG, H3, H4, H5, .strong {font-family:'Merkury Bold',sans-serif; font-weight:normal }
/* ==========================================================================
   FOUNDATION
   ========================================================================== */
.row {max-width:90em}
.top-bar {background:none; height:4.6875em}
.title-area {float:left}
.columns {min-height:1px}
.top-bar-section, .top-bar-section ul li {background:none;}
.top-bar-section ul li > a {font-family:'Merkury Bold',sans-serif}
.top-bar-section ul li > a.button {font-size:1em}
.button {background:none !important; border:none !important}
.allways-fixed {left:0.9375em;right:0.9375em;width:auto;position:fixed;top:0}
.flex-video {padding-bottom:54.8% /*org is 67.5*/; margin-bottom:0}
.f-topbar-fixed {padding-top:0 !important}
.even-1 LI {width:100%}
/* ==========================================================================
   TYPO
   ========================================================================== */
H1, H2, H3, H4, H5 {color:#000}
H1 {margin:0;}
P {margin-top:0}
/* ==========================================================================
   COLORS
   ========================================================================== */
A {color:#000}
A:hover {color:#444}
.bg-key {background:#e84b3c}
.bg-w {background:white}
.bg-g1 {background:#e5e5e5}

.txt-w, .txt-w * {color:#fff !important}

::-moz-selection { background: white; }
::selection { background: white; }

/* ==========================================================================
   SPACE
   ========================================================================== */
/*BODY {padding:0 0.9375em;}*/
.p0 {padding:0 !important}
.pt2 {padding-top:1.875em }
.pt3 {padding-top:2.8125em }
.pb1 {padding-bottom:0.9375em;}
.pb2, .pb2-for-medium-down {padding-bottom:1.875em }
.ptb2 {padding-top:1.875em;padding-bottom:1.875em}
.plr0 {padding-left:0;padding-right:0}
.plr2 {padding-left:1.875em;padding-right:1.875em}
SPAN.plr2 {display:block}
.m0 {margin:0}
.mb2 {margin-bottom:1.875em}
.mb6 {margin-bottom:5.625em}


.small-only-pb2 {padding-bottom:1.875em }
.small-only-plr0 {padding-left:0;padding-right:0}


/* ==========================================================================
   MAIN NAV
   ========================================================================== */
.name {position:fixed;display:block;z-index:2001;top:0}
.name, .top-bar UL.right, .top-bar UL.right LI{width:4.6875em;height:4.6875em;margin:0}
.top-bar-section .left {font-size:300%;}
.top-bar-section .left LI {margin-bottom:6%;}
.top-bar UL.left A {text-transform:uppercase}
.top-bar UL.right LI A, .top-bar .toggle-topbar.menu-icon A {display:block;padding:0;margin:0;width:4.6875em;height:4.6875em;font-size:1em;}
.menu-icon {top:0 !important;margin:0 !important;z-index:5000 }

.top-bar-section {position:fixed;top:0;bottom:0;width:100%;background:#e84b3c;z-index:2003;opacity:0;visibility:hidden;}
.expanded .top-bar-section {opacity:1;visibility:visible;}

.top-bar-section UL {top:50%;position:absolute;-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%)}

.facebook:hover, .top-bar {background:#fff}
.hide-ui {margin-top:-4.6875em}
.fixed, .allways-fixed {z-index:2000}
.alert-box {margin-bottom:0; font-size:200% }

.top-bar .toggle-topbar.menu-icon A SPAN {height:3px;border-radius:5px;-webkit-border-radius:5px;background:#e84b3c;display:block;left:25px;right:25px;position:absolute;top:36px}
.top-bar .toggle-topbar.menu-icon A SPAN:after,
.top-bar .toggle-topbar.menu-icon A SPAN:before
{box-shadow:none;position:absolute;width:100%;height:3px;background:#e84b3c;left:0;bottom:-8px;top:auto;margin:0;content:"";display:block;border-radius:5px;-webkit-border-radius:5px;}
.top-bar .toggle-topbar.menu-icon A SPAN:before {bottom:auto;top:-8px}

.expanded.top-bar .toggle-topbar.menu-icon A SPAN:after,
.expanded.top-bar .toggle-topbar.menu-icon A SPAN:before
{background:white}
.expanded.top-bar .toggle-topbar.menu-icon A SPAN {height:0}
.expanded.top-bar .toggle-topbar.menu-icon A SPAN:after {
    bottom:-2px; height:3px;
    -webkit-transform: rotate(-45deg);  
    -moz-transform: rotate(-45deg);  
    -ms-transform: rotate(-45deg);  
    -o-transform: rotate(-45deg);  
    transform: rotate(-45deg);
}
.expanded.top-bar .toggle-topbar.menu-icon A SPAN:before {
    top:-1px; height:3px;
    -webkit-transform: rotate(45deg);  
    -moz-transform: rotate(45deg);  
    -ms-transform: rotate(45deg);  
    -o-transform: rotate(45deg);  
    transform: rotate(45deg);
}
.top-bar-section LI {
    -webkit-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    transition-delay: 100ms;
    opacity:0
}
.expanded .top-bar-section LI {opacity:1}

/* ==========================================================================
   ELEMENTS
   ========================================================================== */
.el IMG {max-width:100%}
.no-touch .el  >a IMG.fitImage {
    -webkit-transition:-webkit-transform .8s ease, opacity .4s ease .2s; 
    transition:transform .8s ease, opacity .4s ease .2s; 
    -webkit-transform-origin:50% 50%;
    transform-origin:50% 50%;
}
.no-touch .el  >a:hover IMG.fitImage {
    -webkit-transform:scale(1.07);
    transform:scale(1.07);
}
#instagramFeed .cycle-slideshow-manual {background:none}

#page-info {padding-top:6.5625em;padding-bottom:1.875em }
    .text-large P {font-size:1.2em}

#projects LI {padding:0;overflow: hidden}
#projects LI > * {position:relative;padding-bottom:75%;height:0;width:100%;display:block}
    #projects LI > * > * {position:absolute;top:0;bottom:0;left:0;right:0;display:block}
    #projects .title, #related .title {text-transform:uppercase;position:absolute;left:97%;top:15px;white-space:nowrap }
    #projects LI.fill-grid {display:none}

.pre {background-image:url(img/villa_clap-01.svg)}
#projects .contact A {display:block;width:100%;height:100%;background:url(img/villa_clap-02.svg) no-repeat center; background-size:30%}
#projects .contact A:hover {background-image:url(img/villa_clap-01.svg); background-size:30%}
#projects LI.contact A .jump {bottom:0.5em;right:0.9375em}

#projects LI .jump, #b-navi .jump, #single-navi .jump {display:block;text-align:right;padding-right:3.75em;height:3.75em;position:absolute;z-index:2000;bottom:0.5em;right:0.9375em;top:auto;left:auto;}
#b-navi .jump, #single-navi .jump {display:block;text-align:right;padding-right:3.75em;height:3.75em;position:relative;z-index:2000;bottom:0.5em;right:0.9375em;top:auto;left:auto;}

#post-navi .jump, #projects LI .jump {display:block;text-align:right;padding-right:3.75em;height:3.75em;}
.jump SMALL, .text-medium {font-size:80%; line-height:1.4; display:block  }
.jump SMALL {height:15px}
.jump.next {background:url(img/villa_arrow_right.svg) no-repeat center right;}
.jump.prev {background:url(img/villa_arrow_left.svg) no-repeat center right}
.jump.headline {height:auto; top:0; bottom:auto;}
#post-navi .jump.prev {background:url(img/villa_arrow_left.svg) no-repeat center left; text-align:left; padding-left:3.75em;padding-right:0;}

#b-navi .jump, #single-navi .jump  {width:20%;position: absolute; right:1.3em; color:#000}
#b-navi .jump.prev, #single-navi .jump.prev {background:url(img/villa_arrow_left_b.svg) no-repeat center left; text-align:left; padding-left:3.75em;padding-right:0;left:1.3em;right:auto}
#b-navi .jump.next, #single-navi .jump.next {background:url(img/villa_arrow_right_b.svg) no-repeat center right; }
#b-navi .columns, #single-navi .columns {min-height:60px;position: relative }

#post-specs P {margin:0;}
#post-specs LI {padding-bottom:0.9375em }
#post-specs UL {margin-top: 7px;}


.text-list {list-style-type:none; margin:0; }
.upper {text-transform:uppercase }
.caption {text-transform:uppercase;position:absolute;left:15px;top:15px;opacity:0;margin-left: 0.5%;}
#related .flex-video {display:block; position: relative;}

#love {position:fixed;width:100%;top:0;bottom:0;z-index:1001; left:0; right:0; }
#love.hide-me{display:none !important}
footer {text-transform:uppercase}
    footer .copy IMG {margin-top:-5px; width:10%; height:auto; }
    footer .copy H5 {margin:0; display: inline-block;line-height:40px; font-size:80% }

#maps-overlay {position:absolute;left:0;right:0;top:0;bottom:0;background:rgba(0,0,0,0.1);cursor:pointer}
#idle {
    position: fixed;
    top:0;bottom:0;left:0;right:0;
    -webkit-animation:fadein 4s linear;
    -moz-animation:fadein 4s linear;
    animation:fadein 4s linear;
    background:url(img/villa_logo.svg) no-repeat center;
    background-size:contain;
    /*-webkit-transition: background 20ms ease;-ms-transition: background 20ms ease;transition: background 20ms ease;*/
}


/* ==========================================================================
   CYCLE
   ========================================================================== */
.cycle-slideshow, .cycle-slideshow-manual { margin-bottom:-1px;display:block;overflow:hidden;-webkit-backface-visibility: hidden; -webkit-transform: translateZ(0); -mox-transform: translateZ(0); transform:translateZ(0)}
.cycle-slide {display: block; width:101%; position:absolute; top:0; bottom:0; overflow:hidden; margin-left: -0.5%;  }
.autoheight .cycle-slide {position:static !important}
.cycle-slide IMG {display: block;}
#instagramFeed .cycle-slide IMG {min-width:100%}

.slider-prev, .slider-next {opacity:0;position:absolute;z-index:1001;bottom:15px;left:0;top:1em;display:block;width:20%;background:url(img/villa_arrow_left.svg) no-repeat 19px bottom}
.slider-next {left:auto;right:0;background:url(img/villa_arrow_right.svg) no-repeat right 19px bottom }
.slider-prev.dark {background-image:url(img/villa_arrow_left_dark.svg)}
.slider-next.dark {background-image:url(img/villa_arrow_right_dark.svg)}

.cycle-pager {position: absolute; bottom:-0.4em; left:1.875em; height:auto;width:auto;z-index:1000; color:white; }
.cycle-pager SPAN {display: inline-block; padding:0 0.05em; line-height:0.9375em; font-size:210%}
.cycle-pager A {color:rgba(255,255,255,0.6)}
.cycle-pager A:hover, .cycle-pager A.cycle-pager-active {color:#fff}

.cycle-pager.fce {left:50%;margin-left:-100px;width:200px;text-align: center}
.cycle-pager.fce.dark A {color:rgba(68,68,68,0.6)}
.cycle-pager.fce.dark A:hover, .cycle-pager.fce.dark A.cycle-pager-active {color:#444} 

.cycle-caption {color:white; position: absolute;bottom:0.65em;left:50%;width:60px;margin-left:-30px;text-align:center }
.cycle-caption.dark {color:#444}
.cycle-caption HR {border:none;position:relative;top:17px;width:33px; height:2px; background-color:#FFF; margin:0; }
.cycle-caption.dark HR {background-color:#111 }
.cycle-caption SPAN:first-child {font-size:12px; margin-left:-65px; line-height:0;position:relative;top:5px;}
.cycle-caption SPAN:last-child {font-size:12px; margin-left:-20px; line-height:0}

.autoFit {width:100%; height:auto;}
/* ==========================================================================
   ADD
   ========================================================================== */
.mb2-for-custom-down {margin-bottom:1.875em}
.slider-next.hide-for-small.show-me {display:none !important}
.slider-prev.hide-for-small.show-me {display:none !important}

#single-navi {height:4.6875em;position:fixed;bottom:0;width:100%;z-index:9999;left:0;opacity:0;pointer-events:none;}
#single-navi.visible {opacity:1;pointer-events:auto;}
#single-navi .jump {bottom:auto;top:.4em;}

#content-inner {z-index:-1 }
#content-main {opacity:0; -webkit-transform: translateY(60%); transform: translateY(60%);}
#content-main.reset {opacity:1; -webkit-transform: translateY(0); transform: translateY(0);}
#page-effect {position:fixed;top:-200px;bottom:-200px;left:-10%;width:120%;min-height:120vh;z-index:-1;pointer-events:none;   }

/* ==========================================================================
   QUERY
   ========================================================================== */

@media only screen and (min-width: 540px) {
.text-large P {font-size:1.7em}
}
@media only screen and (min-width: 40.063em) { /* MEDIUM ============================= */
    .top-bar .title-area {position: relative;}
    .top-bar {background: #e84b3c}
    .top-bar-section {opacity:1;position:relative;bottom:auto;visibility:visible;top:0}
    .top-bar-section UL {top:0;-webkit-transform:none;-ms-transform:none;transform:none;}
    .top-bar-section .left {max-width:465px;background:#fff;right:4.6875em;left:4.6875em;height:4.6875em !important;font-size:1em;position:absolute; }
    .top-bar-section .left LI {width:33.3333%; float:left; height:4.6875em; margin:0}
    .top-bar-section .left .button {color:rgb(238,88,17); line-height:2.75em }
    .top-bar-section .left LI:hover .button {color:rgb(240,123,99); line-height:2.75em }
    .top-bar-section LI {opacity:1}
    /*BODY {padding:0 1.875em}*/
    #content, #single-navi {padding:0 1.875em}
    .allways-fixed {left:1.875em;right:1.875em}
    .small-only-pb2 {padding-bottom: inherit}
    
    #page-info {padding-top:135px;padding-bottom:3.75em}
    .contact A, .contact A:hover {background-size:100%}
    
    /*#projects LI.contact A .jump {bottom:1.875em;right:1.875em}*/
    footer .copy IMG {margin-top:-10px; width:auto;  }
    footer .copy H5 {font-size:inherit}
    
    .medium-6 {width:100%;}
    .cycle-pager {bottom:1.2em}
    .slider-next.hide-for-small.show-me {display:block !important}
    .slider-prev.hide-for-small.show-me {display:block !important}

}
@media only screen and (min-width: 52.063em) { /* CUSTOM ============================= */
    .medium-6 {width:50%;}
    .pr2-for-custom-up {padding-right:1.875em;display: block}
    .ptb2-for-custom-up {padding-top:1.4em;padding-bottom:1.4em}
    
    .mb2-for-custom-down {margin-bottom:inherit}

    #related.medium-block-grid-2>li {width:25%}
    #related.medium-block-grid-2>li:nth-of-type(2n+1) {clear:none}
}

@media only screen and (min-width: 64.063em) { /* LARGE ============================= */
    .large-3.medium-6 {width:25%}
    #page-info {padding-bottom:4.6875em}
    #page-info .large-8 {min-height:215px}
    .ptb2-for-large-only {padding-top:1.4em;padding-bottom:1.4em}
    #post-navi {position: absolute; left:0;right:0;bottom:1.6em;top:4em}
    #post-navi .jump {position:relative;bottom:auto;right:0;}
    #post-navi .jump.prev {position:relative;bottom:auto;right:0;padding-left:0;padding-right:3.75em;text-align:right;background-position:center right;}
    #post-navi .jump.headline {height:auto;bottom:auto;}
    
    #projects .contact A:hover {background-image:url(img/villa_clap-01.svg); background-size:30%}

    
    /*#post-navi UL {position:absolute;bottom:1.875em;right:1.875em;top:auto;left:auto;}*/
    .button-group.even-2 LI {width:100%}
    .pb2-for-large {padding-bottom:1.875em}
    .pb2-for-medium-down {padding-bottom:0}


}
@media only screen and (min-width: 90.063em) { /* XLARGE ============================= */
}

/* ==========================================================================
   UTIL
   ========================================================================== */
.hide-me {
  opacity:0 !important;
  display:block !important
}
.show-me {
    opacity:1 !important;
    display:block !important
}
.fade,
.menu-icon A SPAN, .menu-icon A SPAN:after, .menu-icon A SPAN:before, #page-info
{-webkit-transition: all 300ms ease;-ms-transition: all 300ms ease;transition: all 300ms ease;}

.top-bar-section {
    -webkit-transition: all 200ms ease-out;-ms-transition: all 200ms ease-out;transition: all 200ms ease-out;
    -webkit-transition-delay: .3s; /* Safari */
    transition-delay: .3s;
}
.expanded .top-bar-section {
    -webkit-transition-delay: 0s; /* Safari */
    transition-delay: 0s;
}
.fade-y {-webkit-transition: margin-top 400ms ease;-ms-transition: margin-top 400ms ease;transition: margin-top 400ms ease;}
.fade-opacity, IMG {-webkit-transition: opacity 400ms ease 400ms ;-ms-transition: opacity 400ms ease 400ms ;transition: opacity 400ms ease 400ms ;}
.to-next IMG, .to-prev IMG  {-webkit-transition: opacity 400ms ease 600ms ;-ms-transition: opacity 400ms ease 600ms ;transition: opacity 400ms ease 600ms ;}
.fade-color, .fade-color HR, .fade-color A  {
    -webkit-transition: color 400ms ease , background-color 400ms ease;
    -ms-transition: color 400ms ease , background-color 400ms ease;
    transition: color 400ms ease , background-color 400ms ease;
}

.r90-cw {
    -webkit-transform: rotate(90deg);  
    -moz-transform: rotate(90deg);  
    -ms-transform: rotate(90deg);  
    -o-transform: rotate(90deg);  
    transform: rotate(90deg);  
    
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
.cycle-caption HR {
    -webkit-transform: rotate(-60deg);  
    -moz-transform: rotate(-60deg);  
    -ms-transform: rotate(-60deg);  
    -o-transform: rotate(-60deg);  
    transform: rotate(-60deg);  
    
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

/* ==========================================================================
   FX
   ========================================================================== */
.spin {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
.loaderspin {
    -webkit-animation:spin .5s linear infinite;
    -moz-animation:spin .5s linear infinite;
    animation:spin .5s linear infinite;
}
.fancy {
-webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}
.blur {
    filter: blur(10px);
    filter: url("blur.svg#gaussian_blur");
    -webkit-filter: blur(10px);
    -o-filter: blur(20px);
    
    -webkit-transition: all 5ms ease;-ms-transition: all 5ms ease;transition: all 5ms ease;
}


.m-scene .scene_element {
  -webkit-animation-duration: 0.4s;
  animation-duration: 0.4s;
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.m-scene .scene_element--fadeinup {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;

}
.m-scene.to-next .scene_element--fadeinup,
.m-scene.to-prev .scene_element--fadeinup {
  -webkit-animation-name: none;
  animation-name: none;
}

.m-scene #page-effect {
	-webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.m-scene.to-prev #page-effect {
	z-index:9999;
  -webkit-animation-name: flyOutPrev;
  animation-name: flyOutPrev;
  -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
.m-scene.is-exiting.to-prev #page-effect {
  -webkit-animation-name: flyInPrev;
  animation-name: flyInPrev;
  -webkit-animation-delay:0s;
  animation-delay:0s;
  -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
.m-scene.to-next #page-effect {
	z-index:9999;
  -webkit-animation-name: flyOutNext;
  animation-name: flyOutNext;
  -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
.m-scene.is-exiting.to-next #page-effect {
  -webkit-animation-name: flyInNext;
  animation-name: flyInNext;
  -webkit-animation-delay:0s;
  animation-delay:0s;
  -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}

@keyframes flyOutNext { 0% {transform:translate3d(0,0,0); } 100% {transform:translate3d(-110%,0,0); }  }
@-webkit-keyframes flyOutNext { 0% {-webkit-transform:translate3d(0,0,0); } 100% {-webkit-transform:translate3d(-110%,0,0); } }
@keyframes flyOutPrev { 0% {transform:translate3d(0,0,0); } 100% {transform:translate3d(110%,0,0); }  }
@-webkit-keyframes flyOutPrev { 0% {-webkit-transform:translate3d(0,0,0); } 100% {-webkit-transform:translate3d(110%,0,0); } }

@keyframes flyInNext { 0% {transform:translate3d(110%,0,0); } 100% {transform:translate3d(0,0,0); }  }
@-webkit-keyframes flyInNext { 0% {-webkit-transform:translate3d(110%,0,0); } 100% {-webkit-transform:translate3d(0,0,0); } }
@keyframes flyInPrev { 0% {transform:translate3d(-110%,0,0); } 100% {transform:translate3d(0,0,0); }  }
@-webkit-keyframes flyInPrev { 0% {-webkit-transform:translate3d(-110%,0,0); } 100% {-webkit-transform:translate3d(0,0,0); } }

/*
 * Keyframes
 */
@keyframes fadeInUp { 0% { opacity:0; -webkit-transform: translateY(60%); transform: translateY(60%);} 100% { opacity:1; -webkit-transform: none; transform: none; } }
@-webkit-keyframes fadeInUp { 0% { opacity:0; -webkit-transform: translateY(60%);} 100% { opacity:1; -webkit-transform: none; } }

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

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

.vc {position: relative;top: 50%;-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);}