/***

*      __  __              
*     |  \/  |     ( )      
*     | \  / | __ _ _ _ __  
*     | |\/| |/ _` | | '_ \ 
*     | |  | | (_| | | | | |
*     |_|  |_|\__,_|_|_| |_|
*                           
*                           
*/

html {

margin: 0;
padding: 0;
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;

}

body {

position: absolute;
width: 100%;
height: 100%;

}

html, body {

max-width: 100%;
overflow-x: hidden;
-webkit-tap-highlight-color: transparent;

}

html.scrollable, html.scrollable body {

overflow-y: auto;
-webkit-overflow-scrolling: touch;

}

img {

max-width: 100%;
display: inline-block;

}

img.rounded { border-radius: $default-border-radius; }

.slides {

color: #fff;
fill: #fff;
font-family: $body-font;
background: #111;

-webkit-font-smoothing: antialiased;
text-rendering: optimizeSpeed;

//transition: 0.15s;

}

.safari.retina .slides {

-webkit-font-smoothing: subpixel-antialiased;

}

.slides.bodyWhite {

background: #fff;

}

.slides.desktopSwipe {

cursor: -webkit-grab;

}

.slides.desktopSwipe:active {

cursor: -webkit-grabbing;

}

.slides.desktopSwipe .slide .container .wrap {

cursor: inherit;

}

/* typography */ a {

cursor: pointer;
color: inherit;  
text-decoration: none;
transition: 0.35s;

&.underline {
        text-decoration: underline;
}

&:hover {
        transition: 0.15s;
        opacity: 0.8;
}

}

h1, .h1 {

font-size: 52px;
line-height: 1.05;  
font-weight: 300;
margin-bottom: 20px;
letter-spacing: -0.036em;

&.big {
        font-size: 70px;
        line-height: 1.2;
}

&.huge {
        font-size: 100px;
        line-height: 1.3;
        letter-spacing: -0.04em;
        margin-bottom: 40px;
}

&.small {
        font-size: 46px;
}

&.micro {
        font-size: 34px;
}

}

h2, .h2 {

font-size: 35px;
line-height: 1.17;
margin-bottom: 15px;
font-weight:  400;

&.uppercase {
        letter-spacing: 0.2em !important;
}

&.small {
        font-size: 23px;
}

&.micro {
        font-size: 19px;
}

&.huge {
        font-size: 45px;
}

}

h3, .h3 {

font-size: 22px;
margin-bottom: 12px;
font-weight:600;

&.large {
        font-size: 32px;
}

&.big {
        font-size: 24px;
}

&.small {
        font-size: 20px;
}

&.micro {
        font-size: 16px;
}

+ h1,
+ .h1 {
        margin-top: 30px  
}

}

h4, .h4 {

font-size: 22px;
margin-bottom: 10px;

&.small {
        font-size: 13px;
}

&.micro {
        font-size: 5px;
}

}

h5, .h5 {

font-size: 19px;
font-weight: 600;
margin-bottom: 3px;

.small {

}

}

//paragraph p, .p {

font-size: 18px;
line-height: 1.385;
margin-bottom: 30px;
&.hero {
        font-size: 36px;
        line-height: 1.25;
        letter-spacing: -1px;
        font-weight: 300;
        margin-bottom: 25px;
}

&.large {
         font-size: 32px;
         line-height: 1.4;  
}

&.small{
        font-size: 22px;
        line-height: 1.36;
        margin-bottom: 20px;
}

&.tiny {
        font-size: 20px;
        line-height: 1.29441;
        margin-bottom: 20px;
}

&.micro {
        font-size: 17px;
        line-height: 1.22727273;
        margin-bottom: 20px;
        margin-top: 2px;
}

&:not(.hero) + p {
        margin-top: -20px;
}

+ h2,
+ .h2 {
        margin-top: 60px;
}

}

small {

font-size: 17px;
line-height: 1.3;

.small {
        font-size: 14px;
        line-height: 1.28;
}

}

.uppercase {

text-transform: uppercase !important;
letter-spacing: 0.15em !important;
text-indent: 0.1em !important; //neat
font-weight: 700 !important;

}

@include media($phablet, max) {

h1,
.h1,
h1.huge, 
.h1.huge,
h1.big, 
.h1.big {
        font-size: 52px;
        margin-bottom: 20px;
}

p.hero {
        font-size: 32px;
}

h1.small,
.h1.small {
        font-size: 40px;
}

.mobileCrop { margin: 0 !important;}
.mobileCropBottom { margin-bottom: 0 !important;}
.mobileCropTop { margin-top: 0 !important;}
.mobileCropLeft { margin-left: 0 !important;}
.mobileCropRight { margin-right: 0 !important;}

}

@include media(320px, max) {

h1.huge, 
.h1.huge,
h1.big, 
.h1.big {
        font-size: 50px;
}

}

/* buttons */ .button {

display: inline-block;
border-radius: $default-border-radius;
padding: 13px 22px 16px;
color: #fff;
border: none;
outline: none;
text-decoration: none;
background: $default-button-color;
font-size: 20px;
font-weight: 600;
text-align: center;
vertical-align: top;
cursor: pointer;
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: relative;
white-space: nowrap;
transform: translate3d(0, 0, 0);
box-shadow: inset 0 -100px 0 rgba(0,0,0,0);
-webkit-appearance: none;
margin-bottom: 20px;
user-select: none;
transition: 0.25s;

.slide & {
        margin-left: 7px;
        margin-right: 7px;

        &.small {
                margin-left: 4px;
                margin-right: 4px;
        }
}

.material-icons {
        vertical-align: bottom;
        margin-right: 11px;

        &.right {
                margin-left: 11px;
                margin-right: 0px;
        }
}

svg {
        width: 22px;
        height: 22px;
        vertical-align: bottom;
        margin-right: 14px;
        pointer-events: none !important;
        position: relative;

        * {
                pointer-events: none !important;
        }
}

&.actionButton {
        display: inline-block;
        height: 50px;
        width: 50px;
        padding: 14px;
        border-radius: 25px;
        z-index: 999;
        background: rgba(40,40,40,.6);
        line-height: 1;
        box-shadow: 0 0 0 1px rgba(255,255,255,0.05);
        cursor: pointer;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        vertical-align: top;

        .material-icons {
                margin: 0;
                position: relative;
                left: -2px;
                top: -2px;
                font-size: 26px;
        }

        &.stroke {
                box-shadow:none;
        }

        &:hover {
                background: rgba(41,41,41,.8);
        }

        &.rounded {
                border-radius: $rounded-border-radius;
        }

        &.rectangular {
                border-radius: 2px;
        }

        svg,
        .slide.whiteSlide & svg {
                fill: #fff;
        }

        &.sound [class*="sound-"] {
          position: absolute;
          opacity: 0;
          transition: 0.5s;
          left: 13px;
        }
        &.sound.playing .sound-on,
        &.sound:not(.playing) .sound-off {
          opacity: 1;
        }

        &.transparent {
                background-color: transparent;
                box-shadow: none;
        }
}

&:hover {
        transition: 0.25s !important;
        opacity: 1;
        box-shadow: inset 0 -100px 0 rgba(0,0,0,0.075), 0 4px 6px 0 rgba(0,0,0,.1),0 1px 10px 0 rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.1);
}

&:active {
        transition:  transform 0.25s, opacity 0.25s, top 0.25s !important;
        box-shadow: inset 0 -100px 0 rgba(0,0,0,0.2), 0 3px 6px 0 rgba(0,0,0,.1),0 0px 10px 0 rgba(0,0,0,.1),0 1px 4px -1px rgba(0,0,0,.1);
        top: 1px;
}

&.uppercase {
        font-size: 17px;
        font-weight: 700;
        padding-top: 16px;
        padding-bottom: 16px;
}

&:not(.stroke) svg {
        fill: #fff;  
}

&.round {
        border-radius: 99px;
  padding-left: 28px;
  padding-right: 28px;
}

&.rounded {
         border-radius: $rounded-border-radius;
}

&.square {
        border-radius: 0px;
}

&.stroke {
        color: $default-dark-color;
        border: 2px solid;
        background-color: transparent !important;
        padding-top: 12px;
        padding-bottom: 13px;
        padding-left: 23px;
        padding-right: 23px;

        &.round {
          padding-left: 26px;
          padding-right: 26px;
        }

        &.uppercase {
                padding-top: 14px;
                padding-bottom: 14px;

                svg {
                        width: 19px;
                        height: 19px;
                }

                &.small {
                        padding-top: 9px;
                        padding-bottom: 10px;
                        padding-left: 23px;
                        padding-right: 23px;
                }
        }

        &.small {
                border: 1px solid;
                padding-top: 8px;
                padding-bottom: 8px;
        }

        @include media($phablet, min) {
                &.big {
                        padding-top: 17px;
                        padding-bottom: 21px;

                        &.uppercase {
                                padding-top: 20px;
                                padding-bottom: 23px;
                        }
                }
        }

        &:hover {
                box-shadow: inset 0 -100px 0 rgba(41,41,41,0.05), 0 4px 6px 0 rgba(0,0,0,.1),0 1px 10px 0 rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.1);
        }
}

&.small {
        font-size: 17px;
        font-weight: 600;
        padding: 9px 14px 9px;

        .material-icons {
                vertical-align: bottom;
                position: relative;
                font-size: 20px;
                margin-right: 8px;
                bottom: 1px;

                &.right {
                        margin-left: 8px;
                        margin-right: 0px;
                }
        }

        svg {
                width: 18px;
                height: 18px;
                margin-right: 10px;
                bottom: 2px;
        }

        &.round {
                padding-left: 18px;
                padding-right: 18px; 
        }

        &.rounded {
                border-radius: 5px;
        }

        &.uppercase {
                font-size: 15px;
                padding: 10px 16px 11px;

                &.round {
                        padding-left: 19px;
                        padding-right: 19px; 
                }

                svg {
                        bottom: 0;
                }
        }
}

@include media($phablet, min) {
        &.big {
                font-size: 30px;
                padding: 19px 32px 23px;

                &.round {
                        padding-left: 42px;
                        padding-right: 42px; 
                }

                &.rounded {
                        border-radius: 7px;
                }

                &.uppercase {
                        font-size: 26px;
                        padding: 22px 30px 25px;

                        &.round {
                                padding-left: 42px;
                                padding-right: 42px; 
                        }
                }

                .material-icons {
                        vertical-align: bottom;
                        margin-right: 16px;
                        font-size: 38px;

                        &.right {
                                margin-left: 16px;
                                margin-right: 0px;
                        }
                }

                svg {
                        width: 36px;
                        height: 36px;
                        margin-right: 18px;
                }
        }
}

&.empty {
        padding: 0 !important;
        border-radius: 0 !important;
        background-color: transparent !important;
        font-size: 0 !important;
        margin: 0;
}

&.hollow {
        padding: 0 !important;
        border-radius: 0 !important;
        background-color: transparent !important;
        font-size: 0 !important;

        svg {
                margin: 0;
        }
}

&.shade {
        position: relative;

        &:after {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: #292929;
                opacity: 0;
                transition: 0.25s;
        }
        &:hover:after {
                 opacity: 0.15;
        }
        &:active:after {
                 opacity: 0.2;
        }
}

&.play {
        width: 90px;
        height: 90px;
        border-radius: 50%;
        padding: 27px;
        margin-left: 0px;
        margin-right: 0px;

        svg {
                fill: #fff;
                width: 35px;
                height: 36px;
                margin: 0;
        }

        &.small {
                width: 60px;
                height: 60px;
                border-radius: 50%;
                padding:  20px 19px;

                svg {
                        fill: #fff;
                        width:  23px;
                        height:  23px;
                }
        }

        &:hover {
                transform: scale(1.05);  
        }
}

&.lowercase {
        text-transform: lowercase;
        letter-spacing: 0em;
        font-weight: 300;
}

}

.slide.whiteSlide .button.stroke {

color: $default-dark-color;

}

.slide.whiteSlide .button.white:hover {

box-shadow: 0 0 0 1px rgba(41,41,41,0) inset, inset 0 -100px 0 rgba(41, 41, 41, 0.06), 0 4px 6px 0 rgba(0, 0, 0, 0.1),0 1px 10px 0 rgba(0, 0, 0, 0.06),0 2px 4px -1px rgba(0, 0, 0, 0.18);

}

.roundButton {

border-radius: 50px;
height: 50px;
width: 50px;
padding: 14px;
margin: 5px;

svg {
         bottom: 2px;
}

}

@include media(320px, max) {

.button.uppercase,
.uppercase {
        letter-spacing: 0.07em;
}

}

/* stuff */ .material-icons {

font-family:  'Material Icons';
font-weight:  normal;
font-style:  normal;
font-size:  24px;  /* Preferred icon size */
display:  inline-block;
line-height:  1;
text-transform:  none;
letter-spacing:  normal;
word-wrap:  normal;
white-space:  nowrap;
direction:  ltr;

-webkit-font-smoothing:  antialiased;
text-rendering:  optimizeLegibility;
-moz-osx-font-smoothing:  grayscale;
font-feature-settings:  'liga';

&.md-18 { font-size: 18px; }
&.md-24 { font-size: 24px; }
&.md-36 { font-size: 36px; }
&.md-48 { font-size: 48px; }

}

svg {

//transition: 0.15s;

}

.slide.whiteSlide svg {

fill: $default-dark-color;

}

.svgContainer, .embedContainer {

position: relative;
width: 100%;
height: 0;
padding: 0;

}

.svgContainer svg.scale, .embedContainer .scale {

position: absolute; 
height: 100%; 
width: 100%; 
left: 0; 
top: 0;

}

.dots { font-size: 0;}

.dot {

padding: 8px;
display: inline-block;

}

.dot:after {

content: "";
display: inline-block;
width: 6px;
height: 6px;
background: #fff;
border-radius: 50%;
opacity: 0.5;
transition: 0.25s;

}

.dots.big .dot:after {

width: 14px;
height: 14px;

}

.slide.whiteSlide .dot:after {

background: $default-dark-color;

}

.dot:hover:after {

transform: scale(1.333333);
opacity: 1;

}

.dot:active:after, .dot.selected:after {

opacity: 1;
transform: scale(1);

}

.tabs {

border: 1px solid #fff;  
color: #fff;
max-width: 260px;
border-radius: 5px;

li {
        border: 1px solid #fff;
        padding: 15px 20px;
        letter-spacing: 2.5px;
        font-size: 17px;
        transition: 0.15s;

        &:first-child {
                border-radius: 4px 4px 0 0;  
        }

        &:last-child {
                border-radius: 0 0 4px 4px;  
        }

        &.selected {
                background: #fff;
                color: $default-dark-color;
        }
}

} .whiteSlide .tabs, .whiteSlide .tabs li {

border: 1px solid #303030;
color: $default-dark-color;

}

.whiteSlide .tabs li.selected {

background: $default-dark-color;
color: #fff;

}

.links li {

font-size: 17px;
letter-spacing: 0;
padding: 4px 0;

}

.address {

letter-spacing: -1.5px;
font-size: 30px;
line-height: 1.1666;

}

.price {

font-size: 140px;
line-height: 1.26;
margin-bottom: 20px;
font-weight: 200;

}

.currency {

font-size: 40px;
vertical-align: super;
font-weight: 400;
padding-right: 10px;
margin-left: -0.8em;
opacity: 0.6;
position: relative;
top: -16px;

}

.social-circles {

font-size: 0;

}

.social-circles li {

display: inline-block;

}

.social-circles li svg {

width: 22px;
height: 22px;
fill: #fff;

}

/* forms */ form {

font-size: 0; 
margin-top: -5px; 

* {
        font-family: inherit;
}

textarea {
        max-height: 200px;
        max-width: 100%;
        min-height: 130px;

        &.round {
                border-radius: 15px !important;
        }
}

label, .label {
        display: block;
        font-size: 17px;
        margin-top: 12px;
        margin-bottom: 7px;

        &.uppercase {
                font-size: 14px;
        }
}

input[type="text"],
input[type="name"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
textarea,
select {
        background-color:  #fff;
        position:  relative;
        background: #fff;
        padding: 13px 16px 16px;
        border: none;
        font-size: 20px;
        color: #242424;
        outline: none;
        border-radius: $default-border-radius;
        width: 100%;
        font-weight: 600;

        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;

        box-shadow: 0 0 0 1px rgba(41, 41, 41, 0.1) inset, 0 3px 4px 0px rgba(41, 41, 41, 0.1) inset, 0 -100px 0 #fff inset;
        transition: 0.15s;

        &.flat,
        &:focus {
                box-shadow: 0 0 0 1px rgba(41, 41, 41, 0.2) inset, 0 3px 4px 0px rgba(41, 41, 41, 0) inset, 0 -100px 0 #fff inset;
        }

        &:focus {
                @include inputPlaceholder(#242424, 400, 0);
        }

        &.round {
                border-radius:50px;
                padding-left: 22px;
                padding-right: 22px;
        }

        &.rounded {
                border-radius: $rounded-border-radius;
        }

        &:after {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: #fff;
        }

        @include media($phablet, min) {
                & {
                        max-width: 300px;
                }
        }

        @include inputPlaceholder(#242424, 400, 0.5);
}

textarea {
        font-weight: 400;

        &.round {
                border-radius:25px;
        }

}

select {
        background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="https://www.w3.org/2000/svg" width="37" height="7"><path fill="#303030" d="M14.022 0l5.978 6 6-6z"  /></svg>');
}                                                                         

input[type="text"],
input[type="name"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="submit"],
button[type="submit"],
textarea {
        margin: 5px;

        &.wide {
                max-width: 100%;
                margin-left: 0;
                margin-right: 0;
        }
}

@include media($phablet + 1, min) {

        input.pair {
                width: 50% !important;
                max-width: 50% !important;
                border-top-right-radius: 0px !important;
                border-bottom-right-radius: 0px !important;

                + .pair {
                        border-top-left-radius: 0px !important;
                        border-bottom-left-radius: 0px !important;
                        border-top-right-radius: $default-border-radius !important;
                        border-bottom-right-radius: $default-border-radius !important;
                        width: calc(50% + 1px) !important;
                        max-width: calc(50% + 1px) !important;
                        margin-left: -1px;
                }
        }
}

&.wide input,
&.wide textarea {
        width: 100%;
        max-width: 100%;
        margin: 8px 0;
}

&.center input,
&.center textarea {
        text-align: center;
}

}

@include media($phablet + 1, max) {

form input,
form textarea,
form label {
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100%;
        max-width: 350px !important;
        display: block !important;
}

form label {
        margin-top: 30px;
}

}

/***

*       _____ _       _          
*      / ___/| ( )   | |         
*     | (___ | |_  __| | ________
*      \___ \| | |/ _` |/ , / __/
*      ____) | | | (_| |  __\__ \
*     /_____/|_|_|\__,_|\___/___/
*                                
*                                
*/

.slide {

position: fixed;
width: 100%;
height: 100%;
background: $default-dark-color;
color: #fff;
z-index: 10;
overflow: hidden;

&.active {
        transform-style: preserve-3d;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
}

.mobile & {
        visibility: hidden;
        &.active {
                visibility: visible;
        }
}

&.whiteSlide {
        color: $default-dark-color;
        background: #fff;
}

}

.content {

overflow: hidden;
position: absolute;
backface-visibility: hidden;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
-webkit-overflow-scrolling: touch;

&.scrollBar {
        overflow-y: auto;
}

.windows .defaultScroll & {
        overflow: auto;
        overflow-x: hidden;
}

.mobile & {
        overflow: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
}

}

/* Background Fade */ .fade .content { background: rgba(17,19,20,0.6); } /default/ .fade-1 .content { background: rgba(17,19,20,0.1); } .fade-2 .content { background: rgba(17,19,20,0.2); } .fade-3 .content { background: rgba(17,19,20,0.3); } .fade-4 .content { background: rgba(17,19,20,0.4); } .fade-5 .content { background: rgba(17,19,20,0.5); } .fade-6 .content { background: rgba(17,19,20,0.6); } .fade-7 .content { background: rgba(17,19,20,0.7); } .fade-8 .content { background: rgba(17,19,20,0.8); } .fade-9 .content { background: rgba(17,19,20,0.9); }

.whiteSlide .content { background: rgba(255,255,255,0.85); }

.container {

display: table;
table-layout: fixed;
position: relative;
width: 100%;
height: 100%;

.wrap {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
        overflow:  hidden;

        &:not(.noSpaces),
        &.spaceWrap,
        .spaceWrap {
                padding: calc(5.56% + 50px) calc(2% + 15px);
        }

        .overflowHidden {
                overflow:  hidden;
        }

        * {
                -webkit-user-select: text;
                -moz-user-select: text;
                -ms-user-select: text;
                user-select: text; 
        }
}

}

.slide .background, .popup .background {

position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;

}

.slide .background iframe, .popup .background iframe {

border: 0;
position: absolute;
top: 0;
left: 0;

}

.slide:not(.youtube) .background iframe, .popup:not(.youtube) .background iframe {

width: 100%;
height: 100%;

}

/* Grid */ .grid {

margin-left: -2%;
margin-right: -2%;

[class*='col-'] {
        display: block;
        width: 100%;
        padding-left: 2%;
        padding-right: 2%;
        float: left;
}

&.fixedSpaces {
        $gapSpace: 14px;

        margin-left: -$gapSpace;
        margin-right: -$gapSpace;

        [class*='col-'] {
                padding-left: $gapSpace;
                padding-right: $gapSpace;
        }
}

&.noSpaces {
        margin-left: 0;
        margin-right: 0;

        [class*='col-'] {
                padding-left: 0;
                padding-right: 0;
        }
}

.toLeft[class*='col-'] {
        margin-left: 0 !important;
        margin-right: auto !important;
}

.toRight[class*='col-'] {
        margin-right: 0 !important;
        margin-left: auto !important;
        float: right;
}

.toCenter[class*='col-'] {
        margin-left: auto !important;
        margin-right: auto !important;
}

// generate columns
@for $i from 1 through 12 {
        $width: (100% / 12) * $i;

        > .col-#{$i}-12 {
                max-width: $width;
        }
}

& + .grid {
        margin-top: 20px;
}

&:after {
        content: "";
        display: table;
        clear: both;
}

}

// Generate fixed Classes // .fix-1-12 { max-width: 8.33333% !important; } @for $i from 1 through 12 {

$width: ($max-width / 12) * $i;

.fix-#{$i}-12 {
        max-width: round($width) !important;
}

}

class*='fix-'

{

width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
float: none;

}

.toLeft, .toLeft {

margin-left: 0 !important;
margin-right: auto !important;

}

.toRight, .toRight {

margin-right: 0 !important;
margin-left: auto !important;
float: right;

}

.toCenter {

margin-left: auto !important;
margin-right: auto !important;

}

//.….…. .popupTrigger, .dropdownTrigger, .sidebarTrigger {

cursor: pointer;

}

.shiftImage {

margin-top: -15%;
margin-bottom: -100%;

}

.shiftImageVertical {

margin-right: -100%;
max-width: none;

}

.slide.video .background {

overflow: hidden;

}

.slide.video .background video {

position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
background-size: cover;

}

.slide.video .background video::-webkit-media-controls {

display: none !important;

}

.slide.video .background video::-webkit-media-controls-panel {

display: none!important;
-webkit-appearance: none;

}

.slide.video .background video::-webkit-media-controls-start-playback-button {

display: none!important;
-webkit-appearance: none;

}

html:not(.mobile) .slide.video .background {

background: none !important;

}

.mobile .slide.video .background video {

display: none;

}

.videoThumbnail {

cursor: pointer;
position: relative;
font-size: 0;
overflow: hidden;
line-height: 0;

&.shadow {
        box-shadow: 0 32px 44px 0 rgba(0,0,0,0.6);
}

&:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: url('../assets/svg/video-icon.svg') no-repeat;
        background-position: center center;
        transition: 0.5s;
}

&:not(.noTint):hover:after {
        background-color: rgba(0,0,0,0.15);
}

&:hover:after {
        transform: scale(1.1);
        transition: 0.25s;
}

&:active:after {
        opacity: 0.8;
}

&.small {
        max-width: 200px;
        display: block;

        &.shadow {
                box-shadow: 0 9px 24px 0 rgba(0,0,0,0.6);
        }
}

&.small:after {
        background-size: 44px;  
}

}

.shadow, .button.empty.shadow:hover {

box-shadow: 0 32px 44px 0 rgba(0,0,0,0.6);

}

.pad {

border-radius: 6px;
padding: 10%;
color: $default-dark-color;
background: #fff;
overflow: hidden;

&.shadow {
        box-shadow: 0 35px 54px rgba(0, 0, 0, 0.3), 0 5px 20px rgba(0, 0, 0, 0.07), 0 0px 1px rgba(0, 0, 0, 0.12);

        &.stroke {
                background: transparent;
                transition: 0.15s;
                color: #fff;
        }

        &.stroke:hover {
                background: #fff;
                color: $default-dark-color;
                transition: 0.15s;
        }
}

&.shadowHover {
        transition: 0.5s;
        box-shadow: 0 52px 64px rgba(0,0,0,0);

        &:hover {
                 box-shadow: 0 52px 64px rgba(0,0,0,0.5);
        }
}

small {
        font-size: 15px;
        line-height: 1.45;
        margin: 15px 0;
}

@include media($phablet, max) {

        &.collapse {
                background: inherit;
                color: inherit;
                border: none;
                padding: 0 !important;
                overflow: inherit;
                border-radius: 0;
                box-shadow: none;
                transition: 0s !important;
        }

        &.shadow {
                 box-shadow: none;
        }
}

}

.quoteBubble {

padding: 7%;
background: #fff;
font-size: 26px;
color: $default-dark-color;
position: relative;

&:after {
        content: "";
        position: absolute;
        bottom: -13px;
        left: 6%;
        border-width: 13px 13px 0;
        border-style: solid;
        border-color: #fff transparent;
        display: block;
        width: 0;
}

}

.quoteName {

padding-top: 26px;
font-size: 22px;
font-weight: 600;

}

.quoteTitle {

font-weight: 400;
opacity: 0.8;

}

.slide.whiteSlide .quoteBubble {

background: $default-dark-color;
color: #fff;

}

.slide.whiteSlide .quoteBubble:after {

border-color: #303030 transparent;
color: #fff;

}

.resizing .equalElement {

transition: 0s !important;

}

.hr {

position: relative;
height: 1px;

} .hr:after {

content: "";
position: absolute;
bottom: 0;
width: 100%;
background: rgba(255,255,255,.2);
height: 1px;
left: 0;
transform: scaleX(3);

.whiteSlide & {
        background: rgba(41,41,41,.05);
}

}

/* smaller that tablet landscape */ @include media($tablet, max){

.videoThumbnail {
        max-width: 100%;
        width: 100%;
}

.grid:not(.later) > [class*='col-'] {
        max-width: 100% !important;
        width: 100% !important;
}

.grid:not(.later) > [class*='col-'] .mobileLeft {
        text-align: left;  
}

.grid:not(.later) > [class*='col-'] .mobileRight {
        text-align: right;  
}

.grid:not(.later) > [class*='col-'] .pad {
         border: none;
         padding: 10% 0 !important;
         border-radius: 0;
         transition: 0s !important;
}
.grid:not(.later) > [class*='col-'] .pad:hover,
.grid:not(.later) > [class*='col-'] .pad.stroke {
         background: inherit;
         color: inherit;
}

.shiftImage {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
}

.shiftImageVertical {
        margin-right: 0 !important;
        max-width: 100% !important;
}

}

/* phablet landscape and tablet portrait and smaller */ @include media($phablet - 1, max){

.grid.later > [class*='col-'] {
        max-width: 100% !important;
        width: 100% !important;
}

.grid.later > [class*='col-'] .mobileLeft {
        text-align: left;  
}

.grid.later > [class*='col-'] .mobileRight {
        text-align: right;  
}

}

/* desktop and bigger */ @include media($tablet, min){

.hideForDesktop {
        display: none !important;
}

}

/* tablet landscape and smaller */ @include media($tablet, min){

.showForDesktop {
        display: block !important;
}

}

/* tablet landscape and smaller */ @include media($tablet + 1, max){

.hideForTablet {
        display: none !important;
}

}

/* tablet landscape and smaller */ @include media($tablet + 1, max){

.showForTablet {
        display: block !important;
}

}

@include media($phablet, max){

.hideForPhablet {
        display: none !important;
}

}

/* tablet portrait and smaller */ @include media($phablet + 1, max){

.showForPhablet {
         display: block !important;
}

}

/* phone portrait and smaller */ @include media($phone, max){

.hideForPhone {
         display: none !important;
}

} @include media($phone, max){

.showForPhone {
         display: block !important;
}

}

/* show and hide for Mobile */ html.mobile .hideForMobile {

display: none !important;

}

html.mobile .showForMobile {

display: block !important;

}

.helpBubble {

cursor: pointer;

&:after {
        content: "?";
        font-size: 14px;
        width: 17px;
        height: 17px;
        line-height: 1.2;
        background: $default-dark-color;
        opacity: 0.3;
        color: #fff;
        border-radius: 50%;
        display: inline-block;
        margin-left: 4px;
        font-weight: 700;
        transition: 0.25s;
}

.helpMessage {
        background: rgba(255, 255, 255, 0.98);
        color: $default-dark-color;
        font-size: 17px;
        position: absolute;
        z-index: 10;
        box-shadow: 0 1px 8px rgba(0,0,0,0.07), 0 6px 8px rgba(0,0,0,0.05);
        padding: 17px;
        text-align: left;
        bottom: 50%;
        margin-bottom: 5px;
        transform: translateY(10px) scale(0.95);
        transition: 0.25s;
        opacity: 0;
        pointer-events: none;
        color: rgba(48,48,48,0.7);

        strong {
                color: rgba(48,48,48,1);
        }
}

&:hover .helpMessage {
        pointer-events: all;
        transform: translateY(0) scale(1);
        opacity: 1;   
}

&:hover:after {
        opacity: 1;  
}

}

/***

*      _____                 _     
*     |  __ \               | |    
*     | |__) __ _ _ __   ___| |____ 
*     |  ___/ _` | '_ \ / _ | / __/
*     | |  | (_| | | | |  __| \__ \
*     |_|   \__,_|_| |_|\___|_/___/
*                                  
*                                  
*/

.panel {

position: fixed;
left: 0;
width: 100%;
padding: 1.5% 1.8%;
z-index: 200;
text-align: center;
font-size: 22px;
pointer-events: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
user-select: none;

transform: translate3d(0,0,0);

&.large {
        padding: 2.78% 5%;
}

&.small {
        padding-top: 14px;
        padding-bottom: 14px;
}

&.top {
        top: 0;
}

&.bottom {
        bottom: 0;
}

.animated &.top,
.animateOnScroll &.top {
        transform: translate3d(0,-100%,0);
        opacity: 0;
}

.animated &.bottom,
.animateOnScroll &.bottom {
        transform: translate3d(0,100%,0);
        opacity: 0;
}

.animated &.bottom:not(.fixed),
.animateOnScroll &.bottom:not(.fixed) {
        transform: translate3d(0,0,0) !important;
}

.page-loaded .animated &,
.page-loaded .animateOnScroll & {
        transition: transform 0.5s, opacity 0.5s, padding 0.5s;
        transform: translate3d(0,0,0);
        opacity: 1;
}

.slides.whiteSlide & {
        color: $default-dark-color;
}
.scroll &.hideOnScroll,
.mobile .simplifiedMobile &.hideOnScroll {

        &.top.hide {
                transform: translateY(-100%) !important;
                opacity: 0;
        }
        &.bottom.hide {
                transform: translateY(100%) !important;
                opacity: 0;
        }
}

.sections {
        display: table;
        width: 100%;
        font-size: 0;

        & > div {
                display: table-cell;
                vertical-align: middle;
                text-align: center;
                width: 33.33333%;
                white-space: nowrap;
                font-size: 22px;
                height: 50px;

                &.auto {
                 width: 0.1%;  
                }

                * {
                        pointer-events: all;
                }
                &.left {
                        text-align: left;

                        ul.crop {
                                padding-left: 0;  

                                li:first-child {
                                        margin-left: 0;   
                                }
                        }
                        &.space {
                                padding-right: 20px;
                        }
                }
                &.right {
                        text-align: right;

                        ul.crop {
                                padding-right: 0;

                                li:last-child {
                                        margin-right: 0;
                                }
                        }
                        &.space {
                                 padding-left: 20px;
                        }
                }

                &.center.space {
                        padding: 0 20px;
                }

        }

        &.hidden { display: none; }

        .menu {
                white-space: nowrap;
                display: inline-block;
                padding: 0 20px;
                font-size: 0;

                li {
                        font-size: 22px;
                        display: inline-block;
                        margin: 0 10px;

                        a {
                                 padding: 4px 10px 5px;
                        }
                }

                &.small li {
                        font-size: 18px;
                        margin: 0 4px;
                }

                &.uppercase {
                        font-weight: 600 !important;

                        li {
                                font-size: 17px;
                                margin: 0 10px;
                                letter-spacing: 0.15em;
                        }

                        &.small li {
                                font-size: 17px;
                        }
                }

        }

}

.hidden,
.hidden * {
        display: none;
}

svg {
        fill: #fff;
        width: 22px;
        height: 22px;
}

.slides.whiteSlide & svg {
        fill: $default-dark-color;
}

a:not(.button):hover {
        opacity: 0.75;
        -webkit-transition: 0.15s;
        transition: 0.15s;
}

.button {
        margin: 0;
}

.button + .button {
        margin-left: 10px;  
}

.button:not(.actionButton) {
        display: inline-block;
        padding-left: 22px!important;
        padding-right: 22px!important;
        background: #fff;
        color: $default-dark-color;
        font-size: 20px!important;
        vertical-align: middle;
        padding-top: 11px!important;
        padding-bottom: 14px!important;

        &.small {
                font-size: 18px;  
        }

        &.micro {
                font-size: 16px;
                padding: 12px 22px;
        }
}

.nextSlide,
.prevSlide {
        width: 24px;
        height: 24px;
        position: relative;
        top: 5px;
}

.slides.whiteSlide & .menuButton {
        background: $default-dark-color;
        color: #fff;
}

.slides.whiteSlide & .button.menuButton.stroke {
        color: $default-dark-color;
}

.slides.whiteSlide & .actionButton svg {
        fill: #fff;  
}

.menuButton.uppercase {
        font-size: 17px;
        padding: 12px 19px;
}

.menuButton.uppercase.small {
        font-size: 14px;
}

.button.menuButton.stroke {
        color: #fff;
}

//
.prevSlide,
.nextSlide {
        transition: 0.25s;
}

.firstSlide & .prevSlide,
.lastSlide & .nextSlide {
        opacity: 0;
        pointer-events: none;
        cursor: default;
}

.firstSlide &.bottom .nextSlide svg {
         animation: animateArrow 4s infinite;
}

.twitterIcon,
.panelIcon {
        position: relative;
        top: 5px;
}

}

@keyframes animateArrow {

80% { transform: translateY(0px); }
90% { transform: translateY(10px); }
100% { transform: translateY(0px); }

}

/* ipad portrait and smaller */ @include media($phablet - 1, max) {

.panel { padding: 2.78% 5%; }

}

.nextSlide, .prevSlide {

cursor: pointer;

&:hover {
        transition: 0.15s;
}

&:active {
        opacity: 0.75;
}

.firstSlide.lastSlide & {
        opacity: 0;
}

}

/* preloader */ html:not(.page-loaded) .slides.animated .slide.selected, html:not(.page-loaded) .slides.animated.scroll .slide {

opacity: 0.2 !important;

}

.loadingIcon {

position: fixed;
z-index: 10000;
text-align: center;
top: 10px;
right: 10px;
opacity: 0;

}

.page-ready .loadingIcon {

transform: scale(1);
opacity: 1;
transition: 0.5s 0.5s;

}

.loadingIcon svg {

width: 24px;
height: 24px;

}

.loadingIcon svg .dash {

stroke: #fff;

} .page-loaded .loadingIcon {

opacity: 0;
transform: scale(0);
pointer-events: none;
transition: all 0.5s, visibility 0s 5s;

}

.slides .loadingIcon svg {

animation: loading 3s infinite cubic-bezier(.64,.48,.55,.64);

}

.page-loaded .slides .loadingIcon svg {

-webkit-animation: none;
animation: none;

}

.loadingIcon svg .dash {

-webkit-transition: 0.3s linear;
transition: 0.3s linear;

}

@keyframes loading {

from { transform: rotate(-1080deg);}

}

/***

*       _____       _      
*      / ___/( )   | |     
*     | (___  _  __| | ___ 
*      \___ \| |/ _` |/ _ \
*      ____) | | (_| |  __/
*     /_____/|_|\__,_|\___/
*                          
*                          
*/

.side {

position: fixed;
right: 0;
top: 0;
bottom: 0;
height: 100%;
z-index: 100;
padding: calc(3% + 50px) 4%;
pointer-events: none;
opacity: 0;
transition: opacity 0.5s;
transform: translate3d(0, 0, 0);

@include media(1380px, min) {
        & {
                padding-left: 55px;
                padding-right: 55px;
        }
}

.page-loaded & { opacity: 1; }

&.large { padding: calc(5.56% + 50px) 5%; }

&.left { left: 0; right: inherit; }
&.right { right: 0; left: inherit; }

/* compact navigation */
&.compact {
        padding: 30px 4%; 

        & .navigation li {
                width: 15px;
                height: 7px;
                margin: 0;
                -webkit-box-shadow: none;
                box-shadow: none;
                border-radius: 0;
                background: #fff;
                opacity: 0.2;
                padding: 1px;
                cursor: pointer;

                &.selected,
                &:hover {
                         opacity: 1;
                }

                &:after {
                         display: none;
                }

                &:before {
                        margin: 0 -12px;
                        top: -10px;
                }

                .whiteSlide & {
                        background: $default-dark-color;
                } 
        }

        &:not(.square) .navigation li:first-child {
                border-radius: 10px 10px 0 0;
        }

        &:not(.square) .navigation li:last-child {
                 border-radius: 0 0 10px 10px;
        }
}

/* for nav in panel */
.panel & {
        position: relative;
        display: inline;
        height: auto;
        padding: 0;
}

.slides.whiteSlide & svg:not([fill]) {
         fill: $default-dark-color;
}

}

.navigation {

display: table;
height: 100%;

ul {
        display: table-cell;
        vertical-align: middle;
}

* {
        pointer-events: all;
}

li {
        fill: #fff;
        display: block;
        background: transparent;
        padding: 9px;
        margin: 0 -9px;
        cursor: pointer;
        position: relative;
}

li:after {
        content: "";
        display: block;  
        width: 15px;
        height: 15px;
        border-radius: 7px;
        opacity: 0.5;
        background: #fff;
        box-shadow: 0 0 1px #303030;
        transition: opacity 0.25s, background 0.25s;
}

li.selected:after{
        opacity: 1;
}

li:hover:after {
        opacity: 1;
}

/* sizes */
.medium & li {
        padding: 11px;
        margin: 0 -11px;
}

.medium & li:after {
        width: 10px;
        height: 10px;
        border-radius: 5px;
}

.small & li {
        padding: 13px;
        margin: 0 -9px;
}

.small & li:after {
        width: 6px;
        height: 6px;
        border-radius: $default-border-radius;
}

li[data-title]:before {
        content: attr(data-title);
        position: absolute;
        left: 0;
        top: 1px;
        background: rgba(40,40,40, 0.7);
        color: #fff;
        font-size: 15px;
        border-radius: 50px;
        padding: 6px 14px 7px;
        visibility: hidden;
        white-space: nowrap;
        letter-spacing: 0.01em;
        transform: translateX(-100%);
        box-shadow: 0 0 0 1px rgba(255,255,255,0.1);
}

li:hover:before {
        visibility: visible;
}

.left & li:before {
        transform: translateX(100%);
        left: inherit;
        right: 0;
}

.panel.bottom & li:before {
        transform: translateY(-100%) translateX(-50%);
        left: 14px;
        top: -2px;
}

/* navigation styles */

/* stroke */
.stroke & li:after {
        border-color: #fff;
        border-style: solid;
        border-width: 2px;
        background-color: transparent;
}

.stroke.small & li:after {
        border-width: 1px;
}

.stroke & li.selected:after {
        background: #fff;
}

.stroke & li:hover:after {
         background: #fff;
}

/* square */
.square & li:after {
        border-radius: 0;
}
.square.small & li:after {
        border-radius: 0;
}

/* diamond */
.diamond & li:after {
        border-radius: 0px;
        transform: rotate(45deg) scale(0.72);
}
.diamond.medium & li:after {
        transform: rotate(45deg) scale(0.88);
}
.diamond.small & li:after {
        transform: rotate(45deg) scale(1);
}

/* nav colors for white slide */
.slides.whiteSlide & li:after {
        background: $default-dark-color;
        box-shadow: 0 0 1px #fff;
}

.slides.whiteSlide .stroke & li:after {
        border-color: $default-dark-color;
        background: transparent;
}

.slides.whiteSlide .stroke & li:hover:after {
        background: #303030;
}

.slides.whiteSlide .stroke & li.selected:after {
        border-color: #303030;
        background: $default-dark-color;
}

.panel &,
.panel & ul {
         display: inline;  
}

.panel & li {
        display: inline-block;
        margin: -9px 0;
}

.panel .side.small & li {
         margin: 0;  
}

.sideArrow {
        width: 31px;
        height: 72px;
        margin: 0px -9px;

        @include media($phablet - 1, max) { 
                & {
                        width:17px;
                        height:40px;
                }
        }
}

} /* End of Side */

/***

*       _____ _                    
*      / ___/| |                   
*     | (___ | |__   __ _ _ __ ___ 
*      \___ \| '_ \ / _` | '__/ _ \
*      ____) | | | | (_| | | |  __/
*     /_____/|_| |_|\__,_|_|  \___/
*                                  
*                                  
*/

.dropdown {

position: fixed;
z-index: 300;
color: $default-dark-color;
width: 160px;
background: #fff;
box-shadow: 0 6px 11px 0 rgba(0, 0, 0, 0.15), 0 14px 28px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05);
margin-bottom: 50px;
border-radius: 8px;
text-align: center;
cursor: default;
transform: translateY(0) scale(0.9);
transform-origin: top;
transition: transform 0.35s, opacity 0.35s, box-shadow 0.35s;

//hidden by default
&:not(.show) {
        pointer-events: none;
        opacity: 0;
}

.slides & h3, //support v.2
.title {
        font-size: 17px;
        padding: 15px 0;
        font-weight: 500;
        margin: 0;
        text-align: center;
        opacity: 0.65;
}

//arrow
&:after,
&:before {
        content: "";
        bottom: 100%;
        left: 25px;
        border: solid transparent;
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-color: rgba(255, 255, 255, 0);
        border-bottom-color: #fff;
        border-width: 7px;
        margin-left: -7px;
}
&:before {
        border-bottom-color: rgba(0,0,0,.1);
        border-width: 8px;
        margin-left: -8px;
}

&.show {
        visibility: visible;
        opacity: 1;
        transform: translateY(20px);

        &.hide {
                opacity: 0;
                transform: translateY(40px);
                box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.15), 0 0 0 rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05);
                pointer-events:none;
        }
}

&.bottom {
        transform-origin: bottom;

        &.show {
                transform: translateY(-20px);

                &.hide {
                        transform: translateY(-40px);
                }
        }

        &:after,
        &:before {
                top: 100%;
                bottom: initial;
                border-bottom-color: rgba(255, 255, 255, 0);
                border-top-color: #fff;
        }

        &:before {
                border-top-color: rgba(0,0,0,.06);
        }
}

&.right:after,
&.right:before {
        right: 18px;
        left: auto;
}

&.right:before {
        right: 17px;
}

&.center:after,
&.center:before {
        left: 50%;
}

&.noArrow:after,
&.noArrow:before {
         display: none;
}

/* share */
&.share li {
        float: left;
        text-align: center;
        display: block;
        width: 80px;
        height: 50px;
        padding: 14px 0;
        color: #fff;
        position: relative;
        cursor: pointer;
        opacity: 0.9;
        transition: 0.15s;

        &:hover {
                opacity: 1;
        }

        &:after {
                content: " ";
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                opacity: 0;
                background: rgba(0,0,0,0.1);
                transition: 0.25s;
        }

        &:active:after {
                opacity: 1;
                transition: 0.1s;
        }

        svg {
                width: 20px;
                height: 20px;
                fill: #fff;
        }

        &.mail {
                width: 100%;
                height: 50px;
                color: #7E7E7E;
                font-size: 15px;
                padding: 15px 0;
                border-bottom-left-radius: 6px;
                border-bottom-right-radius: 6px;

                &:after {
                        border-radius: 0 0 7px 7px;
                        background: rgba(0,0,0,0.05);
                }
                &:hover {
                 text-decoration: underline;
                }
        }
}

.scroll & {
        position: absolute;
        top: 0;
}

}

/***

*       _____       _      _                
*      / ___/( )   | |    | |               
*     | (___  _  __| | ___| |__   __ _ _ ___
*      \___ \| |/ _` |/ _ | '_ \ / _` | '__/
*      ____) | | (_| |  __| |_) | (_| | |   
*     /_____/|_|\__,_|\___|_.__/ \__,_|_|   
*                                           
*                                           
*/

.sidebar {

position: fixed;
top: 0;
right: 0;
width: 320px;
max-width: 90%;
height: 100%;
color: #fff;
z-index: 500;
background: rgba(34,34,34,1);
transition: transform 0.5s, visibility 0s;
transform: translateX(100%);
overflow-y: auto;
-webkit-overflow-scrolling: touch;

.sidebarShown &.visible {
        transform: translateX(0%);
        opacity: 1;
}

.content {
        padding: 40px;
        overflow-y: auto; 
        position: relative;
}

&.small .content {
        padding: 30px;
}

.wrap {
        padding: 0;  
}

&.left {
        right: inherit;
        left: 0;
        transform: translateX(-100%);
}

&.top {
        top: 0;
        width: 100%;
        max-width: 100%;
        height: auto;
        transform: translateY(-100%);
}

&.bottom {
        bottom: 0;
        top: inherit;
        width: 100%;
        max-width: 100%;
        height: auto;
        transform: translateY(100%);
}

/* ELEMENTS */
.logo {
        padding: 0;
        font-size: 0;
        margin-bottom: 35px;  
}

a {
        display: inline-block;
        color: #fff;
        fill: #fff;

        &:hover {
                opacity: 0.8;
        }
}

.close {
        position: absolute;
        top: 0;
        right: 0;
        cursor: pointer;
        padding: 14px;
        font-size: 0;
        opacity: 0.5;
        z-index: 101;
        transition: 0.25s;

        &:hover {
                opacity: 1;
        }

        svg {
                width: 30px;
                height: 30px;
                fill: #fff;
        }

        &:active svg {
                transform:  scale(0.92);
        }
}

/* menu items */
ul {
        line-height: 1.9;
        margin-bottom: 25px;  
        display: block;
        font-size: 0;
}

.uppercase li a {
        text-transform: uppercase;  
        letter-spacing: 0.15em;
}

.mainMenu li a {
        font-size: 24px;
        font-weight: 600;
}

.mainMenu.small li a {
        font-size: 22px;
}

.subMenu li {
        font-weight: 400;
        text-transform: none;
        letter-spacing: 0px;
        opacity: 0.8;
        font-size: 22px;
}

.subMenu.small li {
        font-size: 17px;
}

/* social */
.social {
        margin-top: 40px;

        li {
                display: inline-block;
                margin-right: 20px;

                &:last-child {
                        margin-right: 0;  
                }

                a {
                        font-size: 0;
                        padding: 0;

                        svg {
                                width: 18px;
                                height: 18px;
                        }
                }
        }

        &.small li {
                margin-right: 12px;

                a svg {
                        width: 15px;
                        height: 15px;
                }
        }

        &.large li {
                margin-right: 12px;

                a svg {
                        width: 22px;
                        height: 22px;
                }
        }
}

&.small .social {
        margin-top: 30px;
}

.large li a {
        font-size: 36px;  
}

.light li a {
        font-weight: 300;
}

.social.medium li a svg {
        width: 18px;
        height: 18px;
}

.social.medium li {
        margin-right: 14px;
}

}

.sidebarShown .slide.selected .content {

overflow: hidden;

}

/* SIDEBAR ANIMATION */ .page-loaded.sidebarShown .slide.selected {

transform: scale(0.95) !important;
pointer-events: none;
opacity: 0.5 !important;

}

.sidebarShown .panel.top {

opacity: 0;

}

.sidebarShown .panel.bottom {

opacity: 0.5;   
transform: scale(0.95) translateY(-10%);

}

.page-loaded.sidebarShown .panel, .page-loaded.sidebarShown .slide.selected, .page-loaded.sidebarShown .slide.selected:after, .sidebar {

transition: transform 0.5s, opacity 0.5s !important;

}

/***

*      _____                        
*     |  __ \                       
*     | |__) __  _ __  _   _ _ __  
*     |  ___/ _ \| '_ \| | | | '_ \ 
*     | |  | (_) | |_) | |_| | |_) |
*     |_|   \___/| .__/ \__,_| .__/ 
*                | |         | |    
*                |_|         |_|    
*/

/* POPUP */ .popup {

position: fixed;
top: 0;
right: 0;
width: 100%;
height: 100%;
color: #fff;
z-index: 1000;
transition: transform 0.5s, opacity 0.5s;
overflow-y: auto;
display: none;
transform: translate3d(0,0,0);

&:not([class*="fade"]){
        background: rgba(17, 17, 17, 0.9);
}

.popupShown &.visible {
        display: block;
        animation: popupFadeIn 0.75s;
}

.content {
        overflow-y: auto;
}

.popupShown &.visible:not(.animated) .popupContent {
        animation: zoomOut 0.5s 0.25s backwards;
}

.popupShown .slow &.visible {
        animation: fadeIn 1.25s;
}

.popupShown .slow &.visible:not(.animated) .popupContent {
        animation: zoomOut 1s 0.25s backwards;
}

.popupShown .fast &.visible {
        animation: fadeIn 0.5s;
}
.popupShown .fast &.visible .popupContent {
        animation: zoomOut 0.5s 0.25s backwards;
}

.close {
        position: fixed;
        top: 0;
        right: 0;
        cursor: pointer;
        padding: 14px;
        font-size: 0;
        opacity: 0.5;
        z-index: 1050;
        transition: 0.25s;
        transform: translate3d(0,0,0);

        &.left {
                right: inherit;
                left: 0;
        }

        &:hover {
                opacity: 1;
        }

        svg {
                width: 30px;
                height: 30px;
                fill: #fff;
        }

        &.closeButton {
                margin: 14px;
                display: inline-block;
                position: relative;
                font-size: 18px;
                line-height: 1;
                border-radius: $default-border-radius;
                padding: 13px 20px;
                border: none;
                outline: none;
                overflow: hidden;
                white-space: nowrap;
                -webkit-appearance: none;
                user-select: none !important;
                color: #fff;
                background: $default-dark-color;
                text-decoration: none;
                cursor: pointer;
                -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
                transform: translate3d(0, 0, 0);

                &.round {
                        padding-left: 18px !important;
                        padding-right: 18px !important;
                        border-radius: 50px;
                }

                svg {
                        width: 20px;
                        height: 20px;
                        fill: #fff;
                        position: relative;
                        left: -4px;
                        margin-right: 4px;
                }

                &.white svg {
                        fill: $default-dark-color;
                }
        }
}

&.white .close svg {
        fill: $default-dark-color;
}

.wrap {
        padding: 18px 58px;

        &.spaces {
                padding: 58px;
        }       
}

&.fullscreen .wrap {
        padding: 0;
}

&.fullscreen .embedVideo {
        height: 100vh;
        padding-bottom: 0;
}

}

@keyframes popupFadeIn {

from { opacity: 0;}

}

/* embed video container for slides and popups */ .embedVideo {

position: relative;
padding-bottom: 56.25%; /* 16x9 */
height: 0;
overflow: hidden;
max-width: 100%;

}

.embedVideo iframe, .embedVideo object, .embedVideo embed, .embedVideo video {

position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

}

.embedVideo.size-16x10 {

padding-bottom: 62.5%;

}

.embedVideo.size-16x10 {

padding-bottom: 62.5%;

}

.embedVideo.size-4x3 {

padding-bottom: 75%;

}

.embedVideo.size-1x1, .embedVideo.size-square {

padding-bottom: 100%;

}

/***

*      ______                       _____                            
*     |___  /                      |_   _|                           
*        / / ___   ___  _ __ ___     | |  _ __ ___   __ _  __ _  ___ 
*       / / / _ \ / _ \| '_ ` _ \    | | | '_ ` _ \ / _` |/ _` |/ _ \
*      / /_| (_) | (_) | | | | | |  _| |_| | | | | | (_| | (_| |  __/
*     /_____\___/ \___/|_| |_| |_| |_____|_| |_| |_|\__,_|\__, |\___/
*                                                          __/ |     
*                                                         |___/      
*/
data-action=“zoom”

{

@extend .cursorZoomIn;

}

.zoom-img, .zoom-img-wrap {

position: relative;
transition: all 0.5s;
transition-timing-function: cubic-bezier(.2,0,.3,1) !important;
z-index:  100;

img.zoom-img {
        margin:  0 !important;
        @extend .cursorZoomOut;
}

}

.zoom-overlay {

background: rgba(17, 17, 17, 1);
position: fixed;
top: -9999px;
left: -9999px;
right: -9999px;
bottom: -9999px;
pointer-events: none;
opacity: 0;
transition: opacity 0.5s;
z-index:  99;

}

.zoom-overlay-open .zoom-overlay {

opacity: 0.9;

}

.zoom-overlay-open .side, .zoom-overlay-open .panel {

opacity: 0;
transition-delay: 0s;
transition: 0.25s;

}

.zoom-overlay-open, .zoom-overlay-transitioning {

cursor: default;

}

.zoom-img-parent {

position: relative;
z-index: 1000;

}

/***

*       _____ _ _     _           
*      / ___/| (_)   | |          
*     | (___ | |_  __| | ___ _ __ 
*      \___ \| | |/ _` |/ _ \ '__/
*      ____) | | | (_| |  __/ |   
*     /_____/|_|_|\__,_|\___/_|   
*                                 
*                                 
*/

.slider {

position: relative;

&.clickable {
        cursor: pointer;
}

&.autoHeight {
        transition: 0.5s;
}

> li {
        display: none;
        top: 0;
        left: 0;
        opacity: 0;
        transition: opacity 0.35s;
        pointer-events: none;

        &.selected {
                display: block;
                opacity: 1;
                transition: opacity 0.35s;
                pointer-events: all;
        }
}

}

.controller li {

cursor: pointer;

&.selected {
        cursor: default;
        pointer-events: none;
}

}

/* \ /

        .           ,                              o
         *                 ¤     ~            .·
                        ______  __  __          _       *
                 |  ___/ / _// _|   *    | |        
                 | |___ | |_| |_ ___  ___| |_ ____
        .  |  __/ |  _|  _/ _ \/ __| __/ __/
 ¯   | |____| | | ||  __| (__| |_\__ \    ¨
´    |_____/|_| |_| \___|\___/\__/___/   '
                                                                                                                         ¸         §
 ¸.*         ¤        *         .           .
                                                                                .            °            /

.*/

/* DEFAULT */ .slide.before {

transform: translate3d(0,-50%,0);

}

.slide, .slide.after {

transform: translate3d(0,50%,0);
will-change: transform;

}

.slide.before, .slide.after {

opacity: 0;

}

.slide.selected {

-webkit-transform: translate3d(0,0,0) !important;
-moz-transform: translate3d(0,0,0) !important;
-ms-transform: translate3d(0,0,0) !important;
-o-transform: translate3d(0,0,0) !important;
transform: translate3d(0,0,0) !important;
z-index: 11;

.scroll & {
  z-index: 10;
}

}

.page-loaded .slide.selected {

opacity: 1 !important;

}

/* horizontal */ .horizontal .slide, .horizontal .slide.before {

-ms-transform: translate3D(-50%,0,0);
transform: translate3D(-50%,0,0);

}

.horizontal .slide.after {

-ms-transform: translate3D(50%,0,0);
transform: translate3D(50%,0,0);

}

/* FILM */ .film .slide.before {

-ms-transform: translate3D(-100%,0,0);
transform: translate3D(0,-100%,0);

}

.film .slide.after {

-ms-transform: translate3D(0,100%,0);
transform: translate3D(0,100%,0);

}

/* Horizontal */ .film.horizontal .slide.before {

-ms-transform: translate3D(-100%,0,0);
transform: translate3D(-100%,0,0);

}

.film.horizontal .slide, .film.horizontal .slide.after {

-ms-transform: translate3D(100%,0,0);
transform: translate3D(100%,0,0);

}

/* ZEN */ .zen .slide.before {

-ms-transform: translateY(-100%) scale(0.8);
transform: translateY(-100%) scale(0.8);

}

.zen .slide, .zen .slide.after {

-ms-transform: translateY(100%) scale(0.8);
transform: translateY(100%) scale(0.8);

}

/* Horizontal */ .zen.horizontal .slide.before {

-ms-transform: translateX(-100%) scale(0.8);
transform: translateX(-100%) scale(0.8);

}

.zen.horizontal .slide, .zen.horizontal .slide.after {

-ms-transform: translateX(100%) scale(0.8);
transform: translateX(100%) scale(0.8);

}

/* STACK */ .stack .slide, .stack .slide.after {

-ms-transform: translateY(100%);
transform: translateY(100%);

}

.stack .slide.after {

opacity: initial;

}

.stack .slide.selected, .stack .slide.after.active {

z-index: 11 !important;

}

.stack .slide.before {

-ms-transform: scale(0.9);
transform: scale(0.9);

}

/* Horizontal */ .stack.horizontal .slide, .stack.horizontal .slide.after {

-ms-transform: translateX(100%);
transform: translateX(100%);

}

.stack.horizontal .slide.before {

transform: scale(0.9);

}

/* CARDS */ .cards .slide, .cards .slide.after {

-ms-transform: translateY(10%);
transform: translateY(10%);
opacity: initial;

} .cards .slide.after {

z-index: 8 !important;
opacity: 0;

}

.cards .slide.selected {

z-index: 9 !important;

}

.cards .slide.before {

-ms-transform: translateY(-100%);
transform: translateY(-100%);
z-index: 7;

}

.cards .slide.active.before {

z-index: 10 !important;

}

/* Horizontal */ .cards.horizontal .slide, .cards.horizontal .slide.after {

-ms-transform: translateX(10%);
transform: translateX(10%);

}

.cards.horizontal .slide.before {

-ms-transform: translateX(-100%);
transform: translateX(-100%);

}

/* ZOOM CHANGE */ .zoom .slide.before {

-ms-transform: scale(1.4);
transform: scale(1.4);

}

.zoom .slide, .zoom .slide.after {

-ms-transform: scale(0.8);
transform: scale(0.8);
opacity: 0;

}

/* PLAIN CHANGE */ .plain .slide.before {

-ms-transform: scale(1);
transform: scale(1);

}

.plain .slide, .plain .slide.after {

-ms-transform: scale(1);
transform: scale(1);

}

.plain .slide.after:after, .plain .slide.before:after {

opacity: 1;
background: #111;

}

/* SPEED */ .page-loaded .fast .slide.active, .page-loaded .fast .slide.selected {

transition: transform 0.6s, opacity 0.6s;

}

.page-loaded .slide.selected, .page-loaded .slide.active {

transition: transform 1s, opacity 1s;

}

.page-loaded .slow .slide.active, .page-loaded .slow .slide.selected {

transition: transform 1.4s, opacity 1.4s;

}

.page-loaded .slide.selected.entry, .page-loaded .slide.active.entry {

transition: transform 0s, opacity 1s;

}

/* panels */ .slides.animated.fast .panel {

transition: transform 0.6s, opacity 0.6s, padding 0.5s, background 0.5s, border 0.5s, box-shadow 0.5s;

} .slides.animated .panel {

transition: transform 0.8s, opacity 0.8s, padding 0.5s, background 0.5s, border 0.5s, box-shadow 0.5s;

} .slides.animated.slow .panel {

transition: transform 1s, opacity 1s, padding 0.5s, background 0.5s, border 0.5s, box-shadow 0.5s;

}

/* EASING */ .smooth .active, .smooth .selected, .smooth .panel, .smooth .sidebar {

transition-timing-function: cubic-bezier(.55,.05,.35,.95) !important;

}

.bounce .active, .bounce .selected, .bounce .panel, .bounce .sidebar {

transition-timing-function: cubic-bezier(.40,1.15,.35,1) !important;

}

/***

*                                       _           _   ______ _                           _       
*         /\         ( )               | |         | | |  ___/| |                         | |      
*        /  \   _ __  _ _ __ ___   __ _| |_ ___  __| | | |___ | | ___ _ __ ___   ___ _ __ | |_ ___ 
*       / /\ \ | '_ \| | '_ ` _ \ / _` | __/ _ \/ _` | |  __/ | |/ _ \ '_ ` _ \ / _ \ '_ \| __/ __/
*      / ____ \| | | | | | | | | | (_| | ||  __/ (_| | | |____| |  __/ | | | | |  __/ | | | |_\__ \
*     /_/    \_\_| |_|_|_| |_| |_|\__,_|\__\___/\__,_| |_____/|_|\___/_| |_| |_|\___/_| |_|\__|___/
*                                                                                                  
*                                                                                                  
*/

.animated [class*=“ae-”] {

-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translate3d(0,0,0);

transition-timing-function: cubic-bezier(0.25, 0.1, 0.20, 1);

}

/* Speed */ .animated.fast .animate [class*=“ae-”]:not(.done), .animated.fast.animate [class*=“ae-”]:not(.done), .animated.animate .fast [class*=“ae-”]:not(.done), .animated.animate [class*=“ae-”].fast:not(.done) {

transition-duration: $fast-duration + ms;

}

.animated .animate [class*=“ae-”]:not(.done), .animated.animate [class*=“ae-”]:not(.done) {

transition-duration: $default-duration + ms;

}

.animated.slow .animate [class*=“ae-”]:not(.done), .animated.slow.animate [class*=“ae-”]:not(.done), .animated.animate .slow [class*=“ae-”]:not(.done), .animated.animate [class*=“ae-”].slow:not(.done) {

transition-duration: $slow-duration + ms;

}

/* Delays */

//Default delay @for $i from 1 through 10 {

$delay: ($i - 1) * $default-delay-step + $start-delay;

.animated .animate .ae-#{$i}:not(.done),
.animated.animate .ae-#{$i}:not(.done) {
        transition-delay: $delay + ms;
}

}

//Fast Delay @for $i from 1 through 10 {

$delay: ($i - 1) * $fast-delay-step + $start-delay;

.animated.fast .animate .ae-#{$i}:not(.done),
.animated.fast.animate .ae-#{$i}:not(.done),
.animated.animate .ae-#{$i}.fast:not(.done),
.animated.animate .fast .ae-#{$i}:not(.done) {
        transition-delay: $delay + ms;
}

}

//Slow Delay @for $i from 1 through 10 {

$delay: ($i - 1) * $slow-delay-step + $start-delay;

.animated.slow .animate .ae-#{$i}:not(.done),
.animated.slow.animate .ae-#{$i}:not(.done),
.animated.animate .ae-#{$i}.slow:not(.done),
.animated.animate .slow .ae-#{$i}:not(.done) {
        transition-delay: $delay + ms;
}

}

/* Directions */ .animated [class*=“ae-”]:not(.done), /* default */ .animated .fromBottom [class*=“ae-”]:not(.done), .animated.fromBottom [class*=“ae-”]:not(.done), .slides.animated [class*=“ae-”].fromBottom:not(.done) {

visibility: hidden;
transform: translate3d(0,$horisontal-distance,0);
opacity: 0;

}

.animated .fromTop [class*=“ae-”]:not(.done), .animated.fromTop [class*=“ae-”]:not(.done), .slides.animated [class*=“ae-”].fromTop:not(.done) {

transform: translate3d(0,-$horisontal-distance,0);

}

.animated .fromLeft [class*=“ae-”]:not(.done), .animated.fromLeft [class*=“ae-”]:not(.done), .slides.animated [class*=“ae-”].fromLeft:not(.done) {

transform: translate3d(-$horisontal-distance,0,0);

}

.animated .fromRight [class*=“ae-”]:not(.done), .animated.fromRight [class*=“ae-”]:not(.done), .slides.animated [class*=“ae-”].fromRight:not(.done) {

transform: translate3d($horisontal-distance,0,0);

}

.animated .fromCenter [class*=“ae-”]:not(.done), .animated.fromCenter [class*=“ae-”]:not(.done), .slides.animated [class*=“ae-”].fromCenter:not(.done) {

transform: scale($small-scale) translate3d(0,0,0);

}

.animated .fromAbove [class*=“ae-”]:not(.done), .animated.fromAbove [class*=“ae-”]:not(.done), .slides.animated [class*=“ae-”].fromAbove:not(.done) {

transform: scale($large-scale) translate3d(0,0,0);

}

.animated .fromBottomLeft [class*=“ae-”]:not(.done), .animated.fromBottomLeft [class*=“ae-”]:not(.done), .slides.animated [class*=“ae-”].fromBottomLeft:not(.done) {

transform: translate3d(-$horisontal-distance,$horisontal-distance,0);

}

.animated .fromTopLeft [class*=“ae-”]:not(.done), .animated.fromTopLeft [class*=“ae-”]:not(.done), .slides.animated [class*=“ae-”].fromTopLeft:not(.done) {

-webkit-transform: translate3d(-$horisontal-distance,-$horisontal-distance,0);
transform: translate3d(-$horisontal-distance,-$horisontal-distance,0);

}

.animated .fromBottomRight [class*=“ae-”]:not(.done), .animated.fromBottomRight [class*=“ae-”]:not(.done), .slides.animated [class*=“ae-”].fromBottomRight:not(.done) {

transform: translate3d($horisontal-distance,$horisontal-distance,0);

}

.animated .fromTopRight [class*=“ae-”]:not(.done), .animated.fromTopRight [class*=“ae-”]:not(.done), .slides.animated [class*=“ae-”].fromTopRight:not(.done) {

transform: translate3d($horisontal-distance,-$horisontal-distance,0);

}

.animated .fadeIn [class*=“ae-”]:not(.done), .animated.fadeIn [class*=“ae-”]:not(.done), .slides.animated [class*=“ae-”].fadeIn:not(.done) {

transform: scale(1) translate3d(0,0,0);

}

.animated .fromBlur [class*=“ae-”]:not(.done), .animated.fromBlur [class*=“ae-”]:not(.done), .slides.animated [class*=“ae-”].fromBlur:not(.done) {

transform: scale(1) translate3d(0,0,0);
filter: blur($blur-size);

}

/* Final Step */ .slides.animated .animate.active [class*=“ae-”]:not(.done), .slides .animated.animate.active [class*=“ae-”]:not(.done) {

opacity: 1;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
visibility: visible;
transform: translate3d(0,0,0);
filter: none;

}

/* Animated on scroll */ .slides.animateOnScroll {

-webkit-backface-visibility: hidden;
backface-visibility: hidden;

}

/* hide elements */ .animateOnScroll .slide [class*=“ae-”]:not(.do) { opacity: 0; visibility: hidden; }

/* Speed */ .animateOnScroll [class*=“ae-”].do {

animation-fill-mode: backwards;
animation-duration: $default-duration + ms;
visibility: visible;

}

.animateOnScroll.fast .slide [class*=“ae-”].do, .animateOnScroll .fast .slide [class*=“ae-”].do, .animateOnScroll .slide [class*=“ae-”].do.fast {

animation-duration: $fast-duration + ms;

}

.animateOnScroll.slow .slide [class*=“ae-”].do, .animateOnScroll .slow .slide [class*=“ae-”].do, .animateOnScroll .slide [class*=“ae-”].do.slow {

animation-duration: $slow-duration + ms;

}

/* Directions */ .animateOnScroll .slide [class*=“ae-”].do { animation-name: fromBottom; }

/* generate directions */ $directions: fromBottom fromTop fromLeft fromRight fromCenter fromAbove fromBottomLeft fromTopLeft fromBottomRight fromTopRight fadeIn fromBlur; @each $direction in $directions {

.animateOnScroll .slide.#{$direction} [class*="ae-"].do,
.animateOnScroll .slide .#{$direction} [class*="ae-"].do,
.animateOnScroll .slide [class*="ae-"].do.#{$direction} {
        animation-name: #{$direction};
}

}

// keyframes @keyframes fromBottom { from { transform: translate3d(0,$horisontal-distance,0); opacity:0;}} @keyframes fromTop { from { transform: translate3d(0,-$horisontal-distance,0); opacity:0;}} @keyframes fromLeft { from { transform: translate3d(-$horisontal-distance,0,0); opacity:0;}} @keyframes fromRight { from { transform: translate3d($horisontal-distance,0,0); opacity:0;}} @keyframes fromCenter { from { transform: scale($small-scale) translate3d(0,0,0); opacity:0;}} @keyframes fromAbove { from { transform: scale($large-scale) translate3d(0,0,0); opacity:0;}} @keyframes fromBottomLeft { from { transform: translate3d(-$horisontal-distance,$horisontal-distance,0); opacity:0;}} @keyframes fromTopLeft { from { transform: translate3d(-$horisontal-distance,-$horisontal-distance,0); opacity:0;}} @keyframes fromBottomRight { from { transform: translate3d($horisontal-distance,$horisontal-distance,0); opacity:0;}} @keyframes fromTopRight { from { transform: translate3d($horisontal-distance,-$horisontal-distance,0); opacity:0;}} @keyframes fadeIn { from { transform: scale(1) translate3d(0,0,0); opacity:0;}} @keyframes fromBlur { from { transform: scale(1) translate3d(0,0,0); filter:blur($blur-size); opacity:0;}}

/* Delays */

//Default Delay @for $i from 1 through 10 {

$delay: ($i - 1) * $default-delay-step + $start-delay;

.animateOnScroll .ae-#{$i} {
        animation-delay: $delay + ms;
}

}

// Fast Delay @for $i from 1 through 10 {

$delay: ($i - 1) * $fast-delay-step + $start-delay;

.animateOnScroll.fast .ae-#{$i},
.animateOnScroll .ae-#{$i},
.animateOnScroll .fast .ae-#{$i}.fast ,
.animateOnScroll .ae-#{$i}.fast {
        animation-delay: $delay + ms;
}

}

//Slow Delay @for $i from 1 through 10 {

$delay: ($i - 1) * $slow-delay-step + $start-delay;

.animateOnScroll.slow .ae-#{$i},
.animateOnScroll .slow .ae-#{$i},
.animateOnScroll .ae-#{$i}.slow {
        animation-delay: $delay + ms;
}

}

/***

*      ____             _                                   _    ______  __  __          _       
*     |  _ \           | |                                 | |  |  ____|/ _|/ _|        | |      
*     | |_) | __ _  ___| | ____ _ _ __ ___  _   _ _ __   __| |  | |__  | |_| |_ ___  ___| |_ ___ 
*     |  _ < / _` |/ __| |/ / _` | '__/ _ \| | | | '_ \ / _` |  |  __| |  _|  _/ _ \/ __| __/ __|
*     | |_) | (_| | (__|   < (_| | | | (_) | |_| | | | | (_| |  | |____| | | ||  __/ (__| |_\__ \
*     |____/ \__,_|\___|_|\_\__, |_|  \___/ \__,_|_| |_|\__,_|  |______|_| |_| \___|\___|\__|___/
*                            __/ |                                                               
*                           |___/                                                                
*/

/* KEN BURNS */ .slides.animated .kenBurns .background, .slides.animated .kenBurns.zoomout .background, .slides.animateOnScroll .kenBurns .background, .slides.animateOnScroll .kenBurns.zoomout .background {

transform: translate3d(0,0,0);
opacity: 0.2;
z-index: 1;

}

.slides.animated .kenBurns:not(.video) .background, .slides.animated .kenBurns.zoomout:not(.video) .background, .slides.animateOnScroll .kenBurns:not(.video) .background, .slides.animateOnScroll .kenBurns.zoomout:not(.video) .background {

transition: transform 5s cubic-bezier(.3,0,.7,1), opacity 1s ease;

}

.animated .active.kenBurns:not(.video) .background, .animated .active.kenBurns.zoomout:not(.video) .background, .animated .active .kenBurns.zoomout:not(.video) .background, .animateOnScroll .active.kenBurns:not(.video) .background, .animateOnScroll .active.kenBurns.zoomout:not(.video) .background, .animateOnScroll .active .kenBurns.zoomout:not(.video) .background {

opacity: 1;
transform: scale(1.05) rotate(-0.02deg);

}

.slides.animated .kenBurns.zoomout:not(.video) .background, .slides.animateOnScroll .kenBurns.zoomout:not(.video) .background {

transform: scale(1.05) rotate(-0.02deg);

} .animated .active.kenBurns.zoomout:not(.video) .background, .windows .slides.animated .active.kenBurns.zoomout:not(.video) .background, .animateOnScroll .active.kenBurns.zoomout:not(.video) .background, .windows .slides.animateOnScroll .active.kenBurns.zoomout:not(.video) .background {

transform: translate3d(0,0,0);

}

.mobile .kenBurns .background, .mobile .kenBurns.zoomout .background {

transition: 0s;
transform: none;

}

/* PARALLAX */ .slides.animated .parallax:not(.video) .background, .slides.animateOnScroll .parallax:not(.video) .background {

transform: translate3d(0,0,0) scale(1.25);
transition: transform-origin 1s, transform 1s;

}

.slides.animated.fast .parallax:not(.video) .background, .slides.animateOnScroll.fast .parallax:not(.video) .background {

transition: transform-origin .6s, transform .6s;

}

.slides.animated.slow .parallax:not(.video) .background, .slides.animateOnScroll.slow .parallax:not(.video) .background {

transition: transform-origin 1.4s, transform 1.4s;

}

.slides.animated .parallax.animate:not(.video) .background, .slides.animateOnScroll .parallax.animate:not(.video) .background {

transform-origin: center;

}

.slides.animated .slide.after.parallax:not(.video) .background, .slides.animateOnScroll .slide.after.parallax:not(.video) .background {

transform-origin: top center;

}

.slides.animated .slide.before.parallax:not(.video) .background, .slides.animateOnScroll .slide.before.parallax:not(.video) .background {

transform-origin: bottom center;

}

/* horizontal */ .slides.animated.horizontal .slide.after.parallax:not(.video) .background, .slides.animateOnScroll.horizontal .slide.after.parallax:not(.video) .background {

transform-origin: left center;

}

.slides.animated.horizontal .slide.before.parallax:not(.video) .background, .slides.animateOnScroll.horizontal .slide.before.parallax:not(.video) .background {

transform-origin: right center;

}

/* zoom */ .slides.animated.zoom .slide.after.parallax:not(.video) .background, .slides.animateOnScroll.zoom .slide.after.parallax:not(.video) .background {

transform-origin: center;
transform: translate3d(0,0,0) scale(1);

}

.slides.animated.zoom .slide.animate.parallax:not(.video) .background, .slides.animateOnScroll.zoom .slide.animate.parallax:not(.video) .background {

transform-origin: center;
transform: translate3d(0,0,0) scale(1.1);

}

.slides.animated.zoom .slide.before.parallax:not(.video) .background, .slides.animateOnScroll.zoom .slide.before.parallax:not(.video) .background {

transform-origin: center;
transform: translate3d(0,0,0) scale(1);

}

/* plain */ .slides.animated.plain .slide.after.parallax:not(.video) .background, .slides.animateOnScroll.plain .slide.after.parallax:not(.video) .background {

transform-origin: center;
transform: translate3d(0,0,0) scale(1);

}

.slides.animated.plain .slide.animate.parallax:not(.video) .background, .slides.animateOnScroll.plain .slide.animate.parallax:not(.video) .background {

transform-origin: center;
transform: translate3d(0,0,0) scale(1);

}

.slides.animated.plain .slide.before.parallax:not(.video) .background, .slides.animateOnScroll.plain .slide.before.parallax:not(.video) .background {

transform-origin: center;
transform: translate3d(0,0,0) scale(1);

}

//background attachment: fixed .attachmentFixed {

background-attachment: fixed !important;
background-size: cover !important;

}

/* SCENIC */ .slides.animated .scenic:not(.video) .background, .slides.animateOnScroll .scenic:not(.video) .background {

animation: scenic 140s cubic-bezier(.2,0,.8,1) infinite;

}

@keyframes scenic {

50% { transform: scale(1.5) rotate(-0.02deg);}

}

/* SCROLL EFFECT */ .scroll, .mobile .simplifiedMobile {

position: relative;
-webkit-overflow-scrolling: touch;

} .scroll .content .mobile .simplifiedMobile .content {

-webkit-overflow-scrolling: initial;
overflow: hidden;

}

.scroll .wrap {

overflow: hidden;

}

.scroll .slide, .scroll .slide .content, // fix for oversized content .scroll .container, .mobile .simplifiedMobile .slide, .mobile .simplifiedMobile .content, .mobile .simplifiedMobile .container {

position: relative !important;
height: auto;
opacity: 1;

}

.mobile .simplifiedMobile .popup .content, .mobile .simplifiedMobile .popup .container {

position: absolute !important;
height: 100%;

}

.scroll .container, .mobile .simplifiedMobile .container {

height: 100vh;

}

.scroll .slide.autoHeight .container, .mobile .slide.autoHeight .simplifiedMobile .container {

height: auto;

}

.scroll .slide .background, .mobile .simplifiedMobile .slide .background {

position: absolute !important;
min-height: 100vh;

}

.scroll .slide, .scroll .slide.after, .scroll .slide.before, .mobile .simplifiedMobile .slide, .mobile .simplifiedMobile .slide.after, .mobile .simplifiedMobile .slide.before {

visibility: visible;
transform: none !important;

}

.mobile .simplifiedMobile .slide, .mobile .simplifiedMobile .slide.after, .mobile .simplifiedMobile .slide.before {

opacity: 1 !important;

}

.page-loaded.sidebarShown .scroll .slide, .page-loaded.mobile.sidebarShown .simplifiedMobile .slide {

transform: translate3d(0,0,0) !important;
pointer-events: none;
opacity: 0.5 !important;

}

.page-loaded .scroll .slide {

transition: transform 0.5s, opacity 0.5s !important;

}

.scroll .panel, .mobile .simplifiedMobile .panel {

position: absolute;

}

.mobile .simplifiedMobile .navigation {

display: none;

}

.mobile .simplifiedMobile [class*=“ae-”] {

visibility: visible !important;
opacity: 1 !important;
transform: none !important;

}

.mobile .simplifiedMobile [class*=“ae-”] {

visibility: visible !important;
opacity: 1 !important;
transform: none !important;

}

.popupShown, .popupShown body, .sidebarShown, .sidebarShown body {

overflow-y: hidden !important;

}

.scroll .parallax:not(.video) .background {

transform: translate3d(0,0,0) scale(1.25);
transition: none !important;

}

@keyframes fadeIn { from { opacity: 0;} } @keyframes zoomOut { from { opacity: 0; transform: scale(0.86);} } @keyframes riseUp { from { opacity: 0; transform: scale(0.86) translateY(50px);} }

/* Parallax Motion */ @include media($tablet, max) {

.parallaxMotion:not(.responsive) .parallaxElement,
.parallaxMotion .parallaxElement:not(.responsive) {
        transform: none !important;
}

} /* End Effects */