@charset "UTF-8";
@-webkit-keyframes fadeIn{
    0%{
        opacity:0
    }
    to{
        opacity:1
    }
}
@keyframes fadeIn{
    0%{
        opacity:0
    }
    to{
        opacity:1
    }
}
@-webkit-keyframes fadeOut{
    0%{
        opacity:1
    }
    to{
        opacity:0
    }
}
@keyframes fadeOut{
    0%{
        opacity:1
    }
    to{
        opacity:0
    }
}
@-webkit-keyframes fadeInUp{
    0%{
        opacity:0;
        -webkit-transform:translate3d(0, 150px, 0);
        transform:translate3d(0, 150px, 0)
    }
    to{
        opacity:1;
        -webkit-transform:none;
        transform:none
    }
}
@keyframes fadeInUp{
    0%{
        opacity:0;
        -webkit-transform:translate3d(0, 150px, 0);
        transform:translate3d(0, 150px, 0)
    }
    to{
        opacity:1;
        -webkit-transform:none;
        transform:none
    }
}
@-webkit-keyframes fadeInDown{
    0%{
        opacity:1;
        -webkit-transform:none;
        transform:none
    }
    to{
        opacity:0;
        -webkit-transform:translate3d(0, 150px, 0);
        transform:translate3d(0, 150px, 0)
    }
}
@keyframes fadeInDown{
    0%{
        opacity:1;
        -webkit-transform:none;
        transform:none
    }
    to{
        opacity:0;
        -webkit-transform:translate3d(0, 150px, 0);
        transform:translate3d(0, 150px, 0)
    }
}
.m-scene{
}
.m-scene .scene_element{
    -webkit-animation-duration:0.35s;
    animation-duration:0.35s;
    -webkit-transition-timing-function:ease-in;
    -o-transition-timing-function:ease-in;
    transition-timing-function:ease-in;
    -webkit-animation-fill-mode:both;
    animation-fill-mode:both
}
.m-scene .scene_element--fadein{
    animation:fadeIn 0.35s;
    -moz-animation:fadeIn 0.35s;
    -webkit-animation:fadeIn 0.35s;
    -o-animation:fadeIn 0.35s
}
.m-scene .scene_element--fadeinup{
    animation:fadeInUp 0.35s;
    -moz-animation:fadeInUp 0.35s;
    -webkit-animation:fadeInUp 0.35s;
    -o-animation:fadeInUp 0.35s
}
.m-scene.is-exiting{
    opacity:0;
    transition:opacity 0.35s ease-in-out;
    -webkit-transition:opacity 0.35s ease-in-out;
    -moz-transition:opacity 0.35s ease-in-out;
    -o-transition:opacity 0.35s ease-in-out
}
.m-scene.is-exiting .scene_element--fadeinup{
    animation:fadeInDown 0.35s;
    -moz-animation:fadeInDown 0.35s;
    -webkit-animation:fadeInDown 0.35s;
    -o-animation:fadeInDown 0.35s
}
.m-scene.is-exiting .scene_element--fadein{
    animation:fadeOut 0.35s;
    -moz-animation:fadeOut 0.35s;
    -webkit-animation:fadeOut 0.35s;
    -o-animation:fadeOut 0.35s
}
.funzone .cursor{
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    width:300px;
    height:300px;
    position:absolute;
    top:-150px;
    left:-150px;
    display:block;
    pointer-events:none;
    transform:rotate(-90deg) scale(1);
    -moz-transform:rotate(-90deg) scale(1);
    -webkit-transform:rotate(-90deg) scale(1);
    -o-transform:rotate(-90deg) scale(1);
    -ms-transform:rotate(-90deg) scale(1);
    z-index:9999
}
.funzone .cursor.button-hover svg{
    transform:rotate(-90deg) scale(1);
    -moz-transform:rotate(-90deg) scale(1);
    -webkit-transform:rotate(-90deg) scale(1);
    -o-transform:rotate(-90deg) scale(1);
    -ms-transform:rotate(-90deg) scale(1);
    opacity:.5
}
.funzone .cursor.button-hover{
    mix-blend-mode:screen;
    opacity:.5
}
.funzone .cursor svg{
    width:100%;
    position:absolute;
    transform:rotate(-90deg) scale(0.15);
    -moz-transform:rotate(-90deg) scale(0.15);
    -webkit-transform:rotate(-90deg) scale(0.15);
    -o-transform:rotate(-90deg) scale(0.15);
    -ms-transform:rotate(-90deg) scale(0.15);
    -webkit-transition:600ms all cubic-bezier(0.23, 1, 0.32, 1);
    -o-transition:600ms all cubic-bezier(0.23, 1, 0.32, 1);
    transition:600ms all cubic-bezier(0.23, 1, 0.32, 1)
}
.funzone .cursor svg path{
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    width:20px;
    height:20px;
    fill:#D6372E;
    -webkit-transition:600ms all cubic-bezier(0.23, 1, 0.32, 1);
    -o-transition:600ms all cubic-bezier(0.23, 1, 0.32, 1);
    transition:600ms all cubic-bezier(0.23, 1, 0.32, 1)
}
@media only screen and (max-width:64em){
    .funzone .cursor{
        display:none
    }
}
.link-mask>span{
    font-family:"Montserrat", "Open Sans", sans-serif;
    display:inline-block;
    color:rgba(255, 255, 255, 0.3);
    font-weight:800;
    height:70px
}
.navlinks li:first-of-type .fake-link:before{
    content:"work."
}
.navlinks li:nth-of-type(2) .fake-link:before{
    content:"studio."
}
.navlinks li:nth-of-type(3) .fake-link:before{
    content:"team."
}
.navlinks li:nth-of-type(4) .fake-link:before{
    content:"contact."
}
.navlinks li:nth-of-type(5) .fake-link:before{
    content:"funhouse."
}
.link-mask-wrap{
    position:absolute;
    overflow:hidden;
    height:70px
}
.link-mask{
    position:absolute;
    overflow:hidden;
    width:100%;
    height:70px;
    -webkit-transform:translateX(-102%);
    -ms-transform:translateX(-102%);
    transform:translateX(-102%);
    transition:all 600ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 600ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 600ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 600ms cubic-bezier(0.77, 0, 0.175, 1)
}
.link-mask>span{
    position:absolute;
    color:#fff;
    -webkit-transform:translateX(102%);
    -ms-transform:translateX(102%);
    transform:translateX(102%);
    transition:all 600ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 600ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 600ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 600ms cubic-bezier(0.77, 0, 0.175, 1)
}
.link-mask i{
    color:#D6372E;
    font-style:normal
}
.navigation{
    z-index:8999
}
.logo{
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    font-size:.1em;
    line-height:0;
    overflow:hidden;
    
    
    width:120px;
    position:fixed;
    height:40px;
    top:15px;
    left:15px;
    z-index:9700
}
.logo span{
    position:absolute;
    left:-100%;
    top:-100%
}
.logo.animated img{
    height:40px;
    margin-left:1px;
    width:auto
}
.logo.animated:hover img{
    position:relative;
    animation:animIn 0.9s steps(29) 1;
    -moz-animation:animIn 0.9s steps(29) 1;
    -webkit-animation:animIn 0.9s steps(29) 1;
    -o-animation:animIn 0.9s steps(29) 1;
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards
}
@-webkit-keyframes animIn{
    0%{
        transform:translateX(0%);
        -moz-transform:translateX(0%);
        -webkit-transform:translateX(0%);
        -o-transform:translateX(0%);
        -ms-transform:translateX(0%)
    }
    to{
        transform:translateX(-96.7%);
        -moz-transform:translateX(-96.7%);
        -webkit-transform:translateX(-96.7%);
        -o-transform:translateX(-96.7%);
        -ms-transform:translateX(-96.7%)
    }
}
@keyframes animIn{
    0%{
        transform:translateX(0%);
        -moz-transform:translateX(0%);
        -webkit-transform:translateX(0%);
        -o-transform:translateX(0%);
        -ms-transform:translateX(0%)
    }
    to{
        transform:translateX(-96.7%);
        -moz-transform:translateX(-96.7%);
        -webkit-transform:translateX(-96.7%);
        -o-transform:translateX(-96.7%);
        -ms-transform:translateX(-96.7%)
    }
}
@-webkit-keyframes animOut{
    0%{
        transform:translateX(-96.7%);
        -moz-transform:translateX(-96.7%);
        -webkit-transform:translateX(-96.7%);
        -o-transform:translateX(-96.7%);
        -ms-transform:translateX(-96.7%)
    }
    to{
        transform:translateX(0%);
        -moz-transform:translateX(0%);
        -webkit-transform:translateX(0%);
        -o-transform:translateX(0%);
        -ms-transform:translateX(0%)
    }
}
@keyframes animOut{
    0%{
        transform:translateX(-96.7%);
        -moz-transform:translateX(-96.7%);
        -webkit-transform:translateX(-96.7%);
        -o-transform:translateX(-96.7%);
        -ms-transform:translateX(-96.7%)
    }
    to{
        transform:translateX(0%);
        -moz-transform:translateX(0%);
        -webkit-transform:translateX(0%);
        -o-transform:translateX(0%);
        -ms-transform:translateX(0%)
    }
}
.mc-chicken{
    font-family:"Montserrat", "Open Sans", sans-serif;
    font-size:.48em;
    font-weight:800;
    letter-spacing:.1em;
    position:fixed;
    top:15px;
    right:15px;
    line-height:1.8em;
    cursor:pointer;
    z-index:9500
}
.mc-chicken div{
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition-delay:0.5s;
    -moz-transition-delay:0.5s;
    -o-transition-delay:0.5s;
    -ms-transition-delay:0.5s;
    transition-delay:0.5s;
    display:inline-block;
    padding:10px 26px 10px 15px
}
.mc-chicken span{
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition-delay:0.5s;
    -moz-transition-delay:0.5s;
    -o-transition-delay:0.5s;
    -ms-transition-delay:0.5s;
    transition-delay:0.5s;
    display:block;
    position:absolute;
    top:48%;
    right:0;
    width:3px;
    height:24px;
    background-color:#253069;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    transform:translate3d(0, -50%, 0) scale(1, 1) rotate(10deg);
    -moz-transform:translate3d(0, -50%, 0) scale(1, 1) rotate(10deg);
    -webkit-transform:translate3d(0, -50%, 0) scale(1, 1) rotate(10deg);
    -o-transform:translate3d(0, -50%, 0) scale(1, 1) rotate(10deg);
    -ms-transform:translate3d(0, -50%, 0) scale(1, 1) rotate(10deg);
    -webkit-transform-origin:center;
    -ms-transform-origin:center;
    transform-origin:center
}
.mc-chicken span:nth-of-type(2){
    right:10px
}
.mc-chicken.opened{
    color:#fff
}
.mc-chicken.opened div{
    -webkit-transition-delay:0s;
    -moz-transition-delay:0s;
    -o-transition-delay:0s;
    -ms-transition-delay:0s;
    transition-delay:0s
}
.mc-chicken.opened span{
    -webkit-transition-delay:0s;
    -moz-transition-delay:0s;
    -o-transition-delay:0s;
    -ms-transition-delay:0s;
    transition-delay:0s;
    top:48%;
    right:0;
    width:3px;
    height:24px;
    background-color:#fff;
    transform:translate3d(0, -50%, 0) scale(1, 1) rotate(225deg);
    -moz-transform:translate3d(0, -50%, 0) scale(1, 1) rotate(225deg);
    -webkit-transform:translate3d(0, -50%, 0) scale(1, 1) rotate(225deg);
    -o-transform:translate3d(0, -50%, 0) scale(1, 1) rotate(225deg);
    -ms-transform:translate3d(0, -50%, 0) scale(1, 1) rotate(225deg)
}
.mc-chicken.opened span:nth-of-type(2){
    transform:translate3d(0, -50%, 0) scale(1, 1) rotate(-225deg);
    -moz-transform:translate3d(0, -50%, 0) scale(1, 1) rotate(-225deg);
    -webkit-transform:translate3d(0, -50%, 0) scale(1, 1) rotate(-225deg);
    -o-transform:translate3d(0, -50%, 0) scale(1, 1) rotate(-225deg);
    -ms-transform:translate3d(0, -50%, 0) scale(1, 1) rotate(-225deg)
}
.mc-chicken.light{
    color:#fff
}
.mc-chicken.light span{
    background-color:#fff
}
#home .mc-chicken{
    color:#fff;
    mix-blend-mode:normal
}
#home .mc-chicken span{
    background-color:#fff
}
@media only screen and (min-width:48em){
    .logo{
        width:50px;
        height:50px;
        top:30px;
        left:30px
    }
    .logo.animated img{
        height:50px;
        width:auto
    }
    .mc-chicken{
        top:30px;
        right:30px
    }
}
@media only screen and (min-width:64em){
    .logo{
        width:150px;
        height:50px;
        top:60px;
        left:60px
    }
    .mc-chicken{
        top:54px;
        right:60px
    }
}
.slidenav{
    transition:all 1ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -webkit-transition:all 1ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -moz-transition:all 1ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -o-transition:all 1ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -webkit-transition-delay:1s;
    -moz-transition-delay:1s;
    -o-transition-delay:1s;
    -ms-transition-delay:1s;
    transition-delay:1s;
    transform:scale(0, 1);
    -moz-transform:scale(0, 1);
    -webkit-transform:scale(0, 1);
    -o-transform:scale(0, 1);
    -ms-transform:scale(0, 1);
    -ms-transform-origin:100% 0%;
    -webkit-transform-origin:100% 0%;
    transform-origin:100% 0%;
    z-index:8000;
    top:0%;
    left:0;
    width:100vw;
    height:100vh;
    position:fixed;
    background-color:transparent;
    color:#fff;
    overflow:visible
}
.slidenav:before{
    content:"";
    transition:all 800ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 800ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 800ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 800ms cubic-bezier(0.77, 0, 0.175, 1);
    transform:scale(0, 0) translate(50%, -50%);
    -moz-transform:scale(0, 0) translate(50%, -50%);
    -webkit-transform:scale(0, 0) translate(50%, -50%);
    -o-transform:scale(0, 0) translate(50%, -50%);
    -ms-transform:scale(0, 0) translate(50%, -50%);
    -webkit-transition-delay:0.35s;
    -moz-transition-delay:0.35s;
    -o-transition-delay:0.35s;
    -ms-transition-delay:0.35s;
    transition-delay:0.35s;
    display:block;
    width:370vw;
    height:auto;
    padding-top:370vw;
    background-color:#1e2756;
    position:fixed;
    top:0;
    right:0;
    -ms-transform-origin:100% 0%;
    -webkit-transform-origin:100% 0;
    transform-origin:100% 0;
    border-radius:50%;
    z-index:1
}
.slidenav li{
    transition:all 650ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 650ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 650ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 650ms cubic-bezier(0.77, 0, 0.175, 1);
    transform:scale(0.8) translate(200px, 0);
    -moz-transform:scale(0.8) translate(200px, 0);
    -webkit-transform:scale(0.8) translate(200px, 0);
    -o-transform:scale(0.8) translate(200px, 0);
    -ms-transform:scale(0.8) translate(200px, 0);
    -webkit-transition-delay:0.25s;
    -moz-transition-delay:0.25s;
    -o-transition-delay:0.25s;
    -ms-transition-delay:0.25s;
    transition-delay:0.25s;
    opacity:0;
    height:70px;
    position:relative;
    font-size:2.25em;
    line-height:1.2em;
    -ms-transform-origin:100% 0;
    -webkit-transform-origin:100% 0;
    transform-origin:100% 0
}
.slidenav li:nth-child(2){
    -webkit-transition-delay:0.2s;
    -moz-transition-delay:0.2s;
    -o-transition-delay:0.2s;
    -ms-transition-delay:0.2s;
    transition-delay:0.2s
}
.slidenav li:nth-child(3){
    -webkit-transition-delay:0.15s;
    -moz-transition-delay:0.15s;
    -o-transition-delay:0.15s;
    -ms-transition-delay:0.15s;
    transition-delay:0.15s
}
.slidenav li:nth-child(4){
    -webkit-transition-delay:0.1s;
    -moz-transition-delay:0.1s;
    -o-transition-delay:0.1s;
    -ms-transition-delay:0.1s;
    transition-delay:0.1s
}
.slidenav li:nth-child(5){
    -webkit-transition-delay:0.05s;
    -moz-transition-delay:0.05s;
    -o-transition-delay:0.05s;
    -ms-transition-delay:0.05s;
    transition-delay:0.05s
}
.slidenav li.selected .link-mask,.slidenav li.selected .link-mask>span,.slidenav li:hover .link-mask,.slidenav li:hover .link-mask>span{
    -webkit-transform:translateY(0%);
    -ms-transform:translateY(0%);
    transform:translateY(0%);
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1)
}
.slidenav a{
    font-family:"Montserrat", "Open Sans", sans-serif;
    display:inline-block;
    color:rgba(255, 255, 255, 0.3);
    font-weight:800
}
.slidenav.active{
    transform:scale(1, 1);
    -moz-transform:scale(1, 1);
    -webkit-transform:scale(1, 1);
    -o-transform:scale(1, 1);
    -ms-transform:scale(1, 1);
    -webkit-transition-delay:0s;
    -moz-transition-delay:0s;
    -o-transition-delay:0s;
    -ms-transition-delay:0s;
    transition-delay:0s;
    top:0%;
    left:0%;
    bottom:0%;
    right:0%
}
.slidenav.active:before{
    transform:scale(1, 1) translate(50%, -50%);
    -moz-transform:scale(1, 1) translate(50%, -50%);
    -webkit-transform:scale(1, 1) translate(50%, -50%);
    -o-transform:scale(1, 1) translate(50%, -50%);
    -ms-transform:scale(1, 1) translate(50%, -50%);
    -webkit-transition-delay:0s;
    -moz-transition-delay:0s;
    -o-transition-delay:0s;
    -ms-transition-delay:0s;
    transition-delay:0s
}
.slidenav.active li{
    opacity:1;
    transform:scale(1) translate(0%, 0%);
    -moz-transform:scale(1) translate(0%, 0%);
    -webkit-transform:scale(1) translate(0%, 0%);
    -o-transform:scale(1) translate(0%, 0%);
    -ms-transform:scale(1) translate(0%, 0%);
    -webkit-transition-delay:0.75s;
    -moz-transition-delay:0.75s;
    -o-transition-delay:0.75s;
    -ms-transition-delay:0.75s;
    transition-delay:0.75s
}
.slidenav.active li:nth-child(2){
    -webkit-transition-delay:0.8s;
    -moz-transition-delay:0.8s;
    -o-transition-delay:0.8s;
    -ms-transition-delay:0.8s;
    transition-delay:0.8s
}
.slidenav.active li:nth-child(3){
    -webkit-transition-delay:0.85s;
    -moz-transition-delay:0.85s;
    -o-transition-delay:0.85s;
    -ms-transition-delay:0.85s;
    transition-delay:0.85s
}
.slidenav.active li:nth-child(4){
    -webkit-transition-delay:0.9s;
    -moz-transition-delay:0.9s;
    -o-transition-delay:0.9s;
    -ms-transition-delay:0.9s;
    transition-delay:0.9s
}
.slidenav.active li:nth-child(5){
    -webkit-transition-delay:0.95s;
    -moz-transition-delay:0.95s;
    -o-transition-delay:0.95s;
    -ms-transition-delay:0.95s;
    transition-delay:0.95s
}
.slidenav.active .nav-img{
    transform:translate(0, -50%) scale(1);
    -moz-transform:translate(0, -50%) scale(1);
    -webkit-transform:translate(0, -50%) scale(1);
    -o-transform:translate(0, -50%) scale(1);
    -ms-transform:translate(0, -50%) scale(1);
    -webkit-transition-delay:0.6s;
    -moz-transition-delay:0.6s;
    -o-transition-delay:0.6s;
    -ms-transition-delay:0.6s;
    transition-delay:0.6s;
    opacity:1
}
.slidenav.active .nav-img image{
    transform:scale(0.95);
    -moz-transform:scale(0.95);
    -webkit-transform:scale(0.95);
    -o-transform:scale(0.95);
    -ms-transform:scale(0.95);
    -ms-transform-origin:50% 100;
    -webkit-transform-origin:50% 100%;
    transform-origin:50% 100%
}
.slidenav.active .nav-img image.selected{
    -webkit-transition-delay:0.15s;
    -moz-transition-delay:0.15s;
    -o-transition-delay:0.15s;
    -ms-transition-delay:0.15s;
    transition-delay:0.15s;
    opacity:1;
    transform:scale(1);
    -moz-transform:scale(1);
    -webkit-transform:scale(1);
    -o-transform:scale(1);
    -ms-transform:scale(1)
}
.slidenav.active.set image.selected{
    opacity:0;
    -webkit-transition-delay:0s;
    -moz-transition-delay:0s;
    -o-transition-delay:0s;
    -ms-transition-delay:0s;
    transition-delay:0s;
    transform:scale(0.95);
    -moz-transform:scale(0.95);
    -webkit-transform:scale(0.95);
    -o-transform:scale(0.95);
    -ms-transform:scale(0.95)
}
.slidenav.active.set image.hovered,.slidenav.active.set image.selected.hovered{
    -webkit-transition-delay:0.15s;
    -moz-transition-delay:0.15s;
    -o-transition-delay:0.15s;
    -ms-transition-delay:0.15s;
    transition-delay:0.15s;
    opacity:1;
    transform:scale(1);
    -moz-transform:scale(1);
    -webkit-transform:scale(1);
    -o-transform:scale(1);
    -ms-transform:scale(1)
}
.navlinks-wrap{
    transition:all 450ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 450ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 450ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 450ms cubic-bezier(0.77, 0, 0.175, 1);
    transform:translate(0%, -50%);
    -moz-transform:translate(0%, -50%);
    -webkit-transform:translate(0%, -50%);
    -o-transform:translate(0%, -50%);
    -ms-transform:translate(0%, -50%);
    position:absolute;
    top:50%;
    left:20%;
    z-index:8500
}
.nav-img{
    z-index:8250;
    display:none;
    position:absolute;
    top:50%;
    left:-110%;
    width:200%;
    height:auto;
    transform:translate(-5%, -50%) scale(0.8);
    -moz-transform:translate(-5%, -50%) scale(0.8);
    -webkit-transform:translate(-5%, -50%) scale(0.8);
    -o-transform:translate(-5%, -50%) scale(0.8);
    -ms-transform:translate(-5%, -50%) scale(0.8);
    transition:all 350ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -webkit-transition:all 350ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -moz-transition:all 350ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -o-transition:all 350ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -webkit-transform-origin:50% 50%;
    -ms-transform-origin:50% 50%;
    transform-origin:50% 50%;
    opacity:0
}
.nav-img .scene{
    position:relative;
    width:100%;
    height:auto
}
.nav-img svg{
    fill:none
}
.nav-img image{
    transition:all 450ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 450ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 450ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 450ms cubic-bezier(0.77, 0, 0.175, 1);
    opacity:0;
    width:100%;
    -webkit-backface-visibility:hidden;
    -moz-backface-visibility:hidden;
    backface-visibility:hidden;
    -webkit-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    transform-style:preserve-3d
}
.contact-icon{
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    opacity:1;
    position:fixed;
    border-radius:50%;
    bottom:15px;
    right:15px;
    width:40px;
    height:40px;
    padding:10px;
    background-color:#D6372E;
    z-index:9556;
    -webkit-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.1);
    box-shadow:0px 10px 30px rgba(0, 0, 0, 0.1)
}
.contact-icon a{
    line-height:1em;
    z-index:10
}
.contact-icon a:before{
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    display:block;
    border-radius:50%;
    content:"";
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:-1
}
.contact-icon a:hover:before{
    transform:scale(1.2);
    -moz-transform:scale(1.2);
    -webkit-transform:scale(1.2);
    -o-transform:scale(1.2);
    -ms-transform:scale(1.2)
}
@media only screen and (min-width:48em){
    .slidenav li{
        height:90px;
        font-size:3em
    }
    .slidenav .nav-img{
        display:block;
        top:50%;
        left:-20%;
        width:100%
    }
    .link-mask,.link-mask-wrap,.link-mask>span{
        height:90px
    }
    .navlinks-wrap{
        left:50%
    }
}
@media only screen and (min-width:64em){
    .slidenav:before{
        width:250vw;
        height:auto;
        padding-top:250vw
    }
    .slidenav li{
        height:110px;
        font-size:3.75em
    }
    .link-mask,.link-mask-wrap,.link-mask>span{
        height:110px
    }
    .contact-icon{
        width:40px;
        height:40px;
        padding:10px
    }
}
@media only screen and (min-width:75em){
    .slidenav li{
        height:120px
    }
    .link-mask,.link-mask-wrap,.link-mask>span{
        height:180px
    }
    .contact-icon{
        width:50px;
        height:50px;
        padding:15px;
        bottom:45px;
        right:45px
    }
}
@media only screen and (min-width:1921px){
    .slidenav li{
        height:150px
    }
    .link-mask,.link-mask-wrap,.link-mask>span{
        height:150px
    }
    .mc-chicken{
        font-size:.4em
    }
}
@media only screen and (max-width:1023px){
    #canvas-logo{
        display:none
    }
    #main .slidenav:before{
        width:450vw;
        height:auto;
        padding-top:450vw
    }
}
@media only screen and (min-width:1024px) and (max-width:1440px){
    .slidenav li{
        height:90px;
        font-size:3em
    }
    .slidenav .nav-img{
        display:block;
        top:50%;
        left:-20%;
        width:100%
    }
    .link-mask,.link-mask-wrap,.link-mask>span{
        height:90px
    }
    .navlinks-wrap{
        left:50%
    }
}
.blog-back{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    position:fixed;
    top:60px;
    left:60px;
    font-family:"Montserrat", "Open Sans", sans-serif;
    font-weight:800;
    font-size:.8333em;
    color:#fff
}
.blog-back img{
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    margin-right:1em;
    width:15px;
    height:auto
}
.blog-back:hover img{
    margin-right:.65em
}
.hero-blog{
    font-family:"Montserrat", "Open Sans", sans-serif;
    margin:0;
    position:relative;
    overflow:hidden;
    height:90vh;
    background:#253069;
    background-size:cover
}
.hero-blog h1{
    font-size:2.5em;
    line-height:1.3em;
    color:#fff
}
.hero-blog a{
    color:#fff
}
.hero-blog:before{
    content:"featured";
    position:absolute;
    transform:translate(-50%, -50%);
    -moz-transform:translate(-50%, -50%);
    -webkit-transform:translate(-50%, -50%);
    -o-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
    top:42%;
    left:50%;
    font-size:10.41em;
    color:rgba(255, 255, 255, 0.37);
    font-weight:800;
    mix-blend-mode:soft-light
}
.hero-blog .hero-blog-tag{
    font-size:.5em;
    margin-bottom:1em;
    text-transform:uppercase;
    letter-spacing:.2em;
    font-weight:800
}
.hero-blog .hero-blog-tag a{
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    position:relative;
    display:inline-block;
    background-color:#F2F0F0;
    color:#F2F0F0;
    padding:.25em 1.5em;
    overflow:hidden
}
.hero-blog .hero-blog-tag a:before{
    content:"" attr(data-linkName) "";
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    position:absolute;
    text-transform:uppercase;
    display:block;
    line-height:3.7em;
    width:100%;
    height:100%;
    top:0%;
    left:0%;
    color:#253069
}
.hero-blog .hero-blog-tag a:after{
    content:"" attr(data-linkName) "";
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    line-height:3.7em;
    position:absolute;
    text-transform:uppercase;
    display:block;
    width:100%;
    height:100%;
    top:-100%;
    left:0%;
    color:#253069
}
.hero-blog .hero-blog-tag a:hover:before{
    top:100%
}
.hero-blog .hero-blog-tag a:hover:after{
    top:0%
}
.hero-blog-image{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0
}
.hero-blog-image img{
    position:absolute;
    top:0%;
    left:50%;
    width:auto;
    height:100%;
    transform:translate(-50%, 0%);
    -moz-transform:translate(-50%, 0%);
    -webkit-transform:translate(-50%, 0%);
    -o-transform:translate(-50%, 0%);
    -ms-transform:translate(-50%, 0%)
}
.hero-blog-content{
    width:75%;
    transform:translate(-50%, -50%);
    -moz-transform:translate(-50%, -50%);
    -webkit-transform:translate(-50%, -50%);
    -o-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
    position:absolute;
    top:50%;
    left:50%;
    text-align:center
}
.blog-author{
    margin-top:1.5em;
    font-size:.6666em;
    color:#fff;
    font-family:"Lato", "Open Sans", sans-serif
}
.blog-filter-wrap{
    padding:90px 0
}
.blog-filter{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center
}
.blog-filter li{
    font-family:"Montserrat", "Open Sans", sans-serif;
    font-weight:800;
    font-size:.8333em;
    position:relative;
    overflow:hidden
}
.blog-filter li a{
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    display:inline-block;
    padding:.5em 1em;
    transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    -webkit-transform-style:preserve-3d;
    -webkit-font-smoothing:antialiased
}
.blog-filter li.selected{
    font-size:1.2em;
    overflow:visible
}
.blog-filter li.selected:before{
    transform:translate(-50%, -50%) scale(1, 1);
    -moz-transform:translate(-50%, -50%) scale(1, 1);
    -webkit-transform:translate(-50%, -50%) scale(1, 1);
    -o-transform:translate(-50%, -50%) scale(1, 1);
    -ms-transform:translate(-50%, -50%) scale(1, 1);
    opacity:1;
    top:100%;
    left:50%
}
.blog-filter li.selected a:hover{
    transform:scale(1, 1);
    -moz-transform:scale(1, 1);
    -webkit-transform:scale(1, 1);
    -o-transform:scale(1, 1);
    -ms-transform:scale(1, 1)
}
.blog-filter li:before{
    content:"";
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    transform:translate(-50%, 150%) scale(0.1, 0.1);
    -moz-transform:translate(-50%, 150%) scale(0.1, 0.1);
    -webkit-transform:translate(-50%, 150%) scale(0.1, 0.1);
    -o-transform:translate(-50%, 150%) scale(0.1, 0.1);
    -ms-transform:translate(-50%, 150%) scale(0.1, 0.1);
    position:absolute;
    opacity:0;
    top:100%;
    left:50%;
    display:block;
    width:0;
    height:0;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-top:10px solid #D6372E
}
.blog-post-wrap{
    border-bottom:1px solid rgba(37, 48, 105, 0.15);
    padding:60px 0;
    display:block;
    position:relative;
    overflow:hidden
}
.blog-post-wrap:before{
    content:"";
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:100%;
    background-color:#F2F0F0;
    z-index:-1
}
.blog-post-wrap:hover:before{
    bottom:0
}
.blog-post-wrap:hover .blog-post-img:before{
    transform:translate(-50%, -50%) scale(0, 0);
    -moz-transform:translate(-50%, -50%) scale(0, 0);
    -webkit-transform:translate(-50%, -50%) scale(0, 0);
    -o-transform:translate(-50%, -50%) scale(0, 0);
    -ms-transform:translate(-50%, -50%) scale(0, 0)
}
.blog-post-wrap:hover .blog-post-img:after{
    transform:translate(-50%, -50%) scale(1, 1);
    -moz-transform:translate(-50%, -50%) scale(1, 1);
    -webkit-transform:translate(-50%, -50%) scale(1, 1);
    -o-transform:translate(-50%, -50%) scale(1, 1);
    -ms-transform:translate(-50%, -50%) scale(1, 1)
}
.blog-post-wrap:hover .blog-post-img img{
    transform:scale(1.1, 1.1) translate(-50%, -50%);
    -moz-transform:scale(1.1, 1.1) translate(-50%, -50%);
    -webkit-transform:scale(1.1, 1.1) translate(-50%, -50%);
    -o-transform:scale(1.1, 1.1) translate(-50%, -50%);
    -ms-transform:scale(1.1, 1.1) translate(-50%, -50%)
}
.blog-post-wrap:hover h1{
    color:#D6372E
}
.blog-post{
    width:76%;
    margin:0 auto;
    padding:0 12%
}
.blog-content-wrap{
    font-size:.8333em
}
.blog-content-wrap p{
    margin:0 0 2em
}
.blog-content-wrap h2{
    margin:1.2em 0 .65em;
    font-size:3em;
    line-height:1.2em
}
.blog-content-wrap h2 span{
    color:#D6372E
}
.blog-content-wrap h3{
    margin:2.2em 0 1em;
    font-size:1.5em
}
.blog-content-wrap figure+p{
    margin-top:2em
}
.blog-content-wrap #about-author{
    padding-top:90px;
    margin-top:90px;
    border-top:1px solid rgba(37, 48, 105, 0.15)
}
.blog-content-wrap #about-author h3{
    font-size:2em;
    margin:0 0 .75em 0
}
.blog-content-wrap #about-author .author-desc{
    font-size:.8em
}
.blog-content-wrap #about-author .author-img{
    line-height:0;
    border:50px solid #D6372E;
    border-radius:50%;
    overflow:hidden
}
.blog-content p:first-child:first-letter{
    color:#D6372E;
    font-family:"Montserrat", "Lato", sans-serif;
    float:left;
    font-weight:800;
    font-size:2.92em;
    padding:.3em .2em 0 .1em
}
.blog-post-img{
    position:relative;
    line-height:0;
    border-radius:50%;
    padding-top:100%;
    overflow:hidden;
    background-color:transparent;
    -webkit-transform-style:preserve-3d;
    transform-style:preserve-3d
}
.blog-post-img:before{
    content:"";
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    transform:translate(-50%, -50%) scale(1, 1);
    -moz-transform:translate(-50%, -50%) scale(1, 1);
    -webkit-transform:translate(-50%, -50%) scale(1, 1);
    -o-transform:translate(-50%, -50%) scale(1, 1);
    -ms-transform:translate(-50%, -50%) scale(1, 1);
    -webkit-transform-style:preserve-3d;
    transform-style:preserve-3d;
    position:absolute;
    top:50%;
    left:50%;
    width:50%;
    height:50%;
    background-color:#fff;
    border-radius:50%
}
.blog-post-img:after{
    content:"";
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    transform:translate(-50%, -50%) scale(0, 0);
    -moz-transform:translate(-50%, -50%) scale(0, 0);
    -webkit-transform:translate(-50%, -50%) scale(0, 0);
    -o-transform:translate(-50%, -50%) scale(0, 0);
    -ms-transform:translate(-50%, -50%) scale(0, 0);
    -webkit-transform-style:preserve-3d;
    transform-style:preserve-3d;
    position:absolute;
    top:50%;
    left:50%;
    width:30%;
    height:30%;
    border-radius:50%;
    background:transparent url("../img/blog/img-arrow.html") no-repeat center center;
    background-size:80% 80%
}
.blog-post-img img{
    position:absolute;
    display:block;
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    transform:scale(1, 1) translate(-50%, -50%);
    -moz-transform:scale(1, 1) translate(-50%, -50%);
    -webkit-transform:scale(1, 1) translate(-50%, -50%);
    -o-transform:scale(1, 1) translate(-50%, -50%);
    -ms-transform:scale(1, 1) translate(-50%, -50%);
    -webkit-transform-style:preserve-3d;
    transform-style:preserve-3d;
    -webkit-transform-origin:0 50%;
    -ms-transform-origin:0 50%;
    transform-origin:0 50%;
    height:100%;
    width:auto;
    top:50%;
    left:50%;
    z-index:-1
}
.blog-tag{
    font-size:.5em;
    text-transform:uppercase;
    letter-spacing:.2em;
    font-family:"Montserrat", "Open Sans", sans-serif;
    font-weight:600
}
.blog-post-title h1{
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    font-size:2.08333em;
    margin:.4em 0;
    line-height:1.25em
}
#blog-related{
    background-color:#F2F0F0;
    position:relative;
    margin-top:240px
}
#blog-related h2{
    margin:0 0 .65em;
    padding-top:.25em;
    font-size:5em
}
#blog-related h2 span{
    color:#D6372E
}
#blog-related:before{
    content:"";
    position:absolute;
    display:block;
    left:0;
    top:-15%;
    width:100%;
    height:50%;
    background-color:#F2F0F0;
    transform:skewY(-7deg);
    -moz-transform:skewY(-7deg);
    -webkit-transform:skewY(-7deg);
    -o-transform:skewY(-7deg);
    -ms-transform:skewY(-7deg);
    z-index:-1
}
#blog-related .blog-rel-item h1{
    font-size:1.25em;
    line-height:1.2em
}
#blog-related .rel-title{
    padding:.3em 5% 0
}
#footer-newsletter{
    background-color:#F2F0F0;
    padding:2em 0
}
#footer-newsletter .grid-wrap{
    width:100%;
    padding:0;
    margin:0
}
.newsletter-wrap{
    background-color:#fff;
    padding:60px
}
.newsletter-wrap img{
    height:50px;
    width:auto
}
.newsletter-wrap h1{
    font-size:2.5em
}
#newsletter-form{
    margin-top:1.5em;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap
}
#newsletter-form #email{
    width:100%
}
#newsletter-form #newsletter-submit{
    width:100%
}
@media only screen and (min-width:48em){
    #footer-newsletter{
        background-color:transparent;
        position:relative
    }
    #footer-newsletter .grid-wrap{
        width:76%;
        margin:0 auto;
        padding:0 12%
    }
    #footer-newsletter:before{
        content:"";
        display:block;
        background-color:#253069;
        position:absolute;
        bottom:0;
        z-index:-1;
        left:0;
        width:100%;
        height:50%
    }
    #footer-newsletter:after{
        content:"";
        display:block;
        background-color:#F2F0F0;
        position:absolute;
        top:0;
        z-index:-1;
        left:0;
        width:100%;
        height:50%
    }
    #newsletter-form{
        -ms-flex-wrap:nowrap;
        flex-wrap:nowrap
    }
    #newsletter-form #email{
        width:70%
    }
    #newsletter-form #newsletter-submit{
        width:30%
    }
}
@media only screen and (min-width:64em){
    #newsletter-form{
        -ms-flex-wrap:nowrap;
        flex-wrap:nowrap
    }
    #newsletter-form #email{
        width:70%
    }
    #newsletter-form #newsletter-submit{
        width:30%
    }
}
.project-heading{
    margin:0;
    padding:0;
    height:100%;
    position:relative;
    overflow:visible
}
.project-heading h1{
    position:absolute;
    transform:translate(0%, -50%);
    -moz-transform:translate(0%, -50%);
    -webkit-transform:translate(0%, -50%);
    -o-transform:translate(0%, -50%);
    -ms-transform:translate(0%, -50%);
    animation:titleAnim 5s infinite;
    -moz-animation:titleAnim 5s infinite;
    -webkit-animation:titleAnim 5s infinite;
    -o-animation:titleAnim 5s infinite;
    -webkit-transform-origin:0 0;
    -ms-transform-origin:0 0;
    transform-origin:0 0;
    -webkit-animation-direction:alternate;
    animation-direction:alternate;
    top:45vh;
    left:20vw;
    font-size:22vw
}
.project-heading h1 span{
    color:#D6372E
}
@-webkit-keyframes titleAnim{
    0%{
        transform:translate(0%, -50%) scale(1, 1);
        -moz-transform:translate(0%, -50%) scale(1, 1);
        -webkit-transform:translate(0%, -50%) scale(1, 1);
        -o-transform:translate(0%, -50%) scale(1, 1);
        -ms-transform:translate(0%, -50%) scale(1, 1);
        -webkit-transform-origin:0 0;
        transform-origin:0 0
    }
    to{
        transform:translate(0%, -43%) scale(0.95, 1.05);
        -moz-transform:translate(0%, -43%) scale(0.95, 1.05);
        -webkit-transform:translate(0%, -43%) scale(0.95, 1.05);
        -o-transform:translate(0%, -43%) scale(0.95, 1.05);
        -ms-transform:translate(0%, -43%) scale(0.95, 1.05);
        -webkit-transform-origin:0 0;
        transform-origin:0 0
    }
}
@keyframes titleAnim{
    0%{
        transform:translate(0%, -50%) scale(1, 1);
        -moz-transform:translate(0%, -50%) scale(1, 1);
        -webkit-transform:translate(0%, -50%) scale(1, 1);
        -o-transform:translate(0%, -50%) scale(1, 1);
        -ms-transform:translate(0%, -50%) scale(1, 1);
        -webkit-transform-origin:0 0;
        transform-origin:0 0
    }
    to{
        transform:translate(0%, -43%) scale(0.95, 1.05);
        -moz-transform:translate(0%, -43%) scale(0.95, 1.05);
        -webkit-transform:translate(0%, -43%) scale(0.95, 1.05);
        -o-transform:translate(0%, -43%) scale(0.95, 1.05);
        -ms-transform:translate(0%, -43%) scale(0.95, 1.05);
        -webkit-transform-origin:0 0;
        transform-origin:0 0
    }
}
.project-heading .details{
    position:absolute;
    top:85vh;
    left:40vw;
    line-height:2em;
    font-size:.58333em
}
.project-heading .details li:first-child{
    font-size:1.714em;
    margin-bottom:.2em
}
.project-heading .scroll-line{
    left:35vw;
    top:86vh
}
.project-heading .count{
    font-size:.5833em;
    position:absolute;
    top:6.5vh;
    left:40vw
}
.project-heading .live-link{
    position:absolute;
    top:85vh;
    right:15vw;
    z-index:2555
}
.project-heading .live-link.live-link-static{
    pointer-events:none;
    cursor:default
}
.project-heading .live-link.live-link-static span{
    background-color:transparent;
    width:auto;
    height:auto
}
.project-heading .live-link.live-link-static i{
    display:block;
    padding-left:2em;
    font-size:.65em
}
.project-heading .live-link.live-link-static a:before{
    display:none
}
.project-heading .live-link.live-link-static a:after{
    display:none
}
.project-heading .live-link a{
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    padding-right:110px;
    display:block;
    position:relative
}
.project-heading .live-link a span{
    top:50%;
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    transform:translate(0%, -50%);
    -moz-transform:translate(0%, -50%);
    -webkit-transform:translate(0%, -50%);
    -o-transform:translate(0%, -50%);
    -ms-transform:translate(0%, -50%);
    right:30px;
    display:block;
    position:absolute;
    width:60px;
    height:2px;
    background-color:rgba(45, 45, 48, 0.15)
}
.project-heading .live-link a:before{
    content:"";
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    transform:translate(40%, -50%) scale(0.2, 0.2);
    -moz-transform:translate(40%, -50%) scale(0.2, 0.2);
    -webkit-transform:translate(40%, -50%) scale(0.2, 0.2);
    -o-transform:translate(40%, -50%) scale(0.2, 0.2);
    -ms-transform:translate(40%, -50%) scale(0.2, 0.2);
    top:50%;
    right:0;
    display:block;
    position:absolute;
    width:48px;
    height:48px;
    border-radius:50%;
    background-color:#D6372E;
    z-index:1000
}
.project-heading .live-link a:after{
    content:"";
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    transform:translate(0%, -50%) scale(0.01, 0.01);
    -moz-transform:translate(0%, -50%) scale(0.01, 0.01);
    -webkit-transform:translate(0%, -50%) scale(0.01, 0.01);
    -o-transform:translate(0%, -50%) scale(0.01, 0.01);
    -ms-transform:translate(0%, -50%) scale(0.01, 0.01);
    background:url("../img/img-arrow.svg") no-repeat;
    background-size:70% 70%;
    background-position:center center;
    top:50%;
    right:0;
    display:block;
    position:absolute;
    width:48px;
    height:48px;
    z-index:1500
}
.project-heading .live-link a:hover span{
    transform:translate(-50%, -50%) scale(0.01, 1);
    -moz-transform:translate(-50%, -50%) scale(0.01, 1);
    -webkit-transform:translate(-50%, -50%) scale(0.01, 1);
    -o-transform:translate(-50%, -50%) scale(0.01, 1);
    -ms-transform:translate(-50%, -50%) scale(0.01, 1)
}
.project-heading .live-link a:hover:before{
    transform:translate(-100%, -50%) scale(1, 1);
    -moz-transform:translate(-100%, -50%) scale(1, 1);
    -webkit-transform:translate(-100%, -50%) scale(1, 1);
    -o-transform:translate(-100%, -50%) scale(1, 1);
    -ms-transform:translate(-100%, -50%) scale(1, 1)
}
.project-heading .live-link a:hover:after{
    transform:translate(-100%, -50%) scale(0.5, 0.5);
    -moz-transform:translate(-100%, -50%) scale(0.5, 0.5);
    -webkit-transform:translate(-100%, -50%) scale(0.5, 0.5);
    -o-transform:translate(-100%, -50%) scale(0.5, 0.5);
    -ms-transform:translate(-100%, -50%) scale(0.5, 0.5)
}
.project-heading figure{
    position:absolute;
    width:10%
}
.project .video-box{
    position:relative
}
.project .container{
    text-align:center
}
.project .overlay{
    position:fixed;
    top:0;
    left:0;
    z-index:1;
    height:100%;
    width:100%;
    background:#000;
    opacity:0.6;
    display:none
}
.project .video{
    display:none;
    position:absolute;
    width:80%;
    height:80%;
    top:10%;
    left:10%;
    z-index:999
}
.project .video-container{
    width:100%;
    height:100%;
    overflow:hidden
}
.project .video-container iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%
}
.project .img-group{
    line-height:0
}
.project .btn-play{
    background-color:rgba(255, 255, 255, 0.2);
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    transform:translate(-50%, -50%) translateZ(0);
    -moz-transform:translate(-50%, -50%) translateZ(0);
    -webkit-transform:translate(-50%, -50%) translateZ(0);
    -o-transform:translate(-50%, -50%) translateZ(0);
    -ms-transform:translate(-50%, -50%) translateZ(0);
    position:absolute;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    top:50%;
    left:50%;
    width:15%;
    height:15%;
    border-radius:50%;
    border:none;
    padding:15% 0 0 0;
    color:transparent;
    outline:none
}
.project .btn-play:before{
    content:"";
    border-radius:50%;
    display:block;
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    transform:translateZ(0);
    -moz-transform:translateZ(0);
    -webkit-transform:translateZ(0);
    -o-transform:translateZ(0);
    -ms-transform:translateZ(0);
    position:absolute;
    top:10%;
    left:10%;
    width:80%;
    height:auto;
    padding-top:80%;
    background-color:#BE53F6
}
.project .btn-play:after{
    content:"";
    display:block;
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    transform:translateZ(0);
    -moz-transform:translateZ(0);
    -webkit-transform:translateZ(0);
    -o-transform:translateZ(0);
    -ms-transform:translateZ(0);
    position:absolute;
    top:10%;
    left:10%;
    width:80%;
    height:auto;
    padding-top:80%;
    background:transparent url("../img/video-play-icon.svg") no-repeat center center;
    background-size:20%
}
.project .btn-play:hover{
    transform:translate(-50%, -50%) translateZ(0) scale(0.9);
    -moz-transform:translate(-50%, -50%) translateZ(0) scale(0.9);
    -webkit-transform:translate(-50%, -50%) translateZ(0) scale(0.9);
    -o-transform:translate(-50%, -50%) translateZ(0) scale(0.9);
    -ms-transform:translate(-50%, -50%) translateZ(0) scale(0.9)
}
.project .btn-play:hover:before{
    transform:translateZ(0) scale(1.3);
    -moz-transform:translateZ(0) scale(1.3);
    -webkit-transform:translateZ(0) scale(1.3);
    -o-transform:translateZ(0) scale(1.3);
    -ms-transform:translateZ(0) scale(1.3)
}
.project .btn-play:hover:after{
    transform:scale(1.1) translateZ(0);
    -moz-transform:scale(1.1) translateZ(0);
    -webkit-transform:scale(1.1) translateZ(0);
    -o-transform:scale(1.1) translateZ(0);
    -ms-transform:scale(1.1) translateZ(0)
}
.project .btn-close{
    display:none;
    z-index:5555;
    outline:none;
    background-color:transparent;
    position:absolute;
    top:40%;
    width:8%;
    height:8%;
    padding-top:8%;
    right:0;
    border:none;
    color:transparent
}
.project .btn-close:before{
    content:"";
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    display:block;
    position:absolute;
    top:0%;
    right:0%;
    width:100%;
    height:auto;
    padding-top:100%;
    background:transparent url("../img/video-close-icon.svg") no-repeat center center;
    background-size:20%
}
.project .btn-close:after{
    content:"close";
    transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    -o-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    -webkit-transform-origin:56% 90%;
    -ms-transform-origin:56% 90%;
    transform-origin:56% 90%;
    display:block;
    color:#fff;
    text-transform:uppercase;
    font-size:.5em;
    letter-spacing:.2em;
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    position:absolute;
    top:0%;
    right:0%;
    width:100%;
    height:auto;
    padding-top:100%;
    background-size:20%
}
.project .btn-close:hover:before{
    transform:scale(0.85) rotate(90deg);
    -moz-transform:scale(0.85) rotate(90deg);
    -webkit-transform:scale(0.85) rotate(90deg);
    -o-transform:scale(0.85) rotate(90deg);
    -ms-transform:scale(0.85) rotate(90deg)
}
.project .project-h2{
    position:relative
}
.project .project-h2 h2{
    font-size:8.75vw;
    margin:5rem 0 3rem;
    margin-top:;
    line-height:1.05em
}
.project .title-caption{
    font-size:30px;
    font-family:"Montserrat", "Lato", sans-serif;
    font-weight:500
}
.project .wrapped-heading{
    position:relative
}
.project .wrapped-heading h2{
    font-size:14vw;
    line-height:1em
}
.project .wrapped-heading h2 span{
    display:inline
}
.project .chapter-desc{
    margin-top:2em;
    position:relative
}
.project p{
    font-size:0.833333em
}
.project p+p{
    margin-top:2em
}
.project figure{
    line-height:0
}
.project-description{
    position:relative
}
.project-description p{
    font-size:2.8vw
}
.project-description .desc-img{
    position:absolute;
    transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    -o-transform:rotate(180deg);
    -ms-transform:rotate(180deg);
    top:0;
    right:0;
    width:40%;
    height:auto;
    z-index:-1
}
.project-description .desc-img img{
    width:100%;
    height:auto
}
.paragraph-title{
    display:block;
    font-size:.8333em;
    margin:0 0 2em 0
}
.w50{
    width:50%
}
.w60{
    width:60%
}
.w75{
    width:75%
}
.w50.left-offset{
    width:40%;
    margin-left:10%
}
.chapter-icon{
    width:8vw;
    max-width:300px;
    height:auto;
    margin-bottom:4em
}
.img-wrap{
    height:auto;
    position:relative
}
.img-wrap figure{
    line-height:0
}
.img-wrap img{
    width:100%;
    height:auto
}
.wrapped-img{
    width:100%;
    position:absolute
}
.offset-top-neg{
    margin-top:-3em
}
.scrolling-text{
    font-family:'Montserrat', 'Open Sans', sans-serif;
    font-weight:900;
    color:#252020;
    font-size:30vw;
    opacity:.08;
    position:absolute;
    top:30%;
    right:-50%
}
#development .chapter-icon{
    width:10vw;
    position:absolute;
    top:-80%;
    left:30%
}
#development strong{
    font-weight:600
}
#development article p{
    font-size:.6666em;
    line-height:1.5em
}
#development h4{
    font-size:.83333em;
    line-height:1.35em
}
#development h2 span{
    color:#fff
}
#development h4,#development p{
    color:#fff
}
.next-project{
    height:100vh;
    position:relative
}
.next-project:before{
    content:"" attr(data-linkNo) "";
    position:absolute;
    text-transform:uppercase;
    font-family:"Montserrat", "Open Sans", sans-serif;
    line-height:1.3em;
    font-weight:900;
    font-size:20em;
    display:block;
    top:43%;
    left:50%;
    transform:translate(-50%, -50%);
    -moz-transform:translate(-50%, -50%);
    -webkit-transform:translate(-50%, -50%);
    -o-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
    color:#fff;
    opacity:.07
}
.next-project .project-title{
    position:absolute;
    display:block;
    top:40%;
    left:50%;
    transform:translate(-50%, -50%);
    -moz-transform:translate(-50%, -50%);
    -webkit-transform:translate(-50%, -50%);
    -o-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%)
}
.next-project a{
    display:block;
    position:relative;
    color:#fff
}
.next-project a:hover .next-ico{
    opacity:1;
    left:110%
}
.next-project a:hover .shape-morph.shape-morph-bottom{
    left:100%;
    top:80%;
    width:150%
}
.next-project h2{
    position:relative;
    width:100%;
    font-size:10vw
}
.next-project .shape-morph.shape-morph-bottom{
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    left:70%;
    top:150%;
    width:80%;
    z-index:1!important
}
.next-project .next-ico{
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    transform:translate(-50%, -50%);
    -moz-transform:translate(-50%, -50%);
    -webkit-transform:translate(-50%, -50%);
    -o-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
    position:absolute;
    left:70%;
    top:50%;
    width:3%;
    z-index:10;
    opacity:0;
    height:auto
}
.next-project span{
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    z-index:999;
    position:absolute;
    top:0;
    right:0;
    text-shadow:-15px 15px 60px rgba(37, 33, 33, 0.2)
}
video{
    max-width:100%
}
.relative-content{
    position:relative
}
.prototype{
    background-color:#fff;
    -webkit-box-shadow:0 50px 100px rgba(0, 0, 0, 0.15);
    box-shadow:0 50px 100px rgba(0, 0, 0, 0.15)
}
#client{
    font-family:"Montserrat", "Lato", sans-serif;
    font-weight:500
}
#client p{
    font-size:30px
}
#client .quote{
    margin:1.5em 0 1em;
    font-size:4rem;
    line-height:1.15em;
    color:#737071
}
#client .quote strong{
    color:#231F20
}
#client .quote-link{
    cursor:pointer;
    position:relative;
    font-size:14px;
    color:#231F20;
    display:inline-block;
    padding-left:90px
}
#client .quote-link span{
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    display:inline-block
}
#client .quote-link:before{
    content:"";
    -webkit-transform-origin:0 0;
    -ms-transform-origin:0 0;
    transform-origin:0 0;
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    display:block;
    height:1px;
    width:100%;
    position:absolute;
    top:50%;
    left:0;
    background-color:#231F20;
    transform:scale(0.25, 1);
    -moz-transform:scale(0.25, 1);
    -webkit-transform:scale(0.25, 1);
    -o-transform:scale(0.25, 1);
    -ms-transform:scale(0.25, 1)
}
#client .quote-link:hover span{
    transform:translateX(-40px);
    -moz-transform:translateX(-40px);
    -webkit-transform:translateX(-40px);
    -o-transform:translateX(-40px);
    -ms-transform:translateX(-40px)
}
#client .quote-link:hover:before{
    transform:scale(1, 2) translateY(15px);
    -moz-transform:scale(1, 2) translateY(15px);
    -webkit-transform:scale(1, 2) translateY(15px);
    -o-transform:scale(1, 2) translateY(15px);
    -ms-transform:scale(1, 2) translateY(15px)
}
#demo .prototype{
    border-radius:40px;
    overflow:hidden;
    -webkit-box-shadow:0px 0px 0px 20px #231F20;
    -moz-box-shadow:0px 0px 0px 20px #231F20;
    box-shadow:0px 0px 0px 20px #231F20
}
#sales{
    background-color:#FCFBF0;
    font-family:"Montserrat", "Lato", sans-serif
}
#sales .sale-item{
    font-weight:500;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:start;
    -ms-flex-align:start;
    align-items:flex-start;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
    border-bottom:2px solid #231F20;
    padding-bottom:1.5em;
    margin-bottom:.75em
}
#sales .sale-item p{
    position:relative;
    margin-top:.5em;
    font-size:30px;
    line-height:1.2em
}
#sales .sale-item div{
    position:relative;
    font-size:9vw;
    line-height:1em;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex
}
#sales .sale-item i{
    width:30px;
    margin:10px 0 0;
    height:30px;
    display:inline-block;
    position:absolute;
    top:0;
    right:-60px;
    background:url("../img/projects/helias/sale-arrow.svg");
    background-size:cover;
    opacity:.2
}
#sales .sale-item i.decrease{
    transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    -o-transform:rotate(90deg);
    -ms-transform:rotate(90deg)
}
#awarded{
    background-color:#FCFBF0
}
#awarded h2{
    margin-top:0
}
#awarded .award-list{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:start;
    -ms-flex-align:start;
    align-items:flex-start;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between
}
#awarded .award-list .item span{
    display:block;
    font-size:1rem;
    line-height:1.5rem
}
#p-services{
    background-color:#FCFBF0
}
#p-services h2{
    margin-top:0;
    font-size:15vw;
    line-height:.9em
}
#p-services .relative-content{
    margin-bottom:10vh
}
#p-services .relative-content img{
    z-index:9;
    position:absolute;
    top:5vh;
    right:-5%;
    width:50%
}
#p-services article p{
    font-size:16px
}
#p-services .next-project a{
    color:#231F20
}
#p-services .next-project .shape-morph-bottom svg{
    fill:#231F20;
    opacity:.2
}
.carousel-wrap{
    position:relative
}
.helias{
    color:#231F20
}
.helias .project-heading h1{
    left:30%
}
.helias .project-heading img{
    position:absolute
}
.helias .project-heading img:first-of-type{
    width:7%;
    top:5vh;
    left:15%
}
.helias .project-heading img:nth-of-type(2){
    width:8%;
    top:25vh;
    left:5%
}
.helias .project-heading img:nth-of-type(3){
    width:8%;
    top:40vh;
    left:20%
}
.helias .project-heading .shape-morph{
    left:50%
}
.helias .project-heading .scroll-line span{
    background-color:#231F20
}
.helias .intro{
    background:transparent url("../img/projects/helias/challenge-wave-top.png") no-repeat bottom left;
    background-size:cover
}
.helias .slidenav:before{
    background-color:#fff
}
.helias .link-mask-wrap .link{
    color:rgba(35, 31, 32, 0.2)
}
.helias .link-mask-wrap .link .link-mask span{
    color:#231F20
}
.helias .link-mask i{
    color:#FFFCD9;
    font-style:normal
}
.helias .project-arrow a:after,.helias .project-arrow a:before{
    background-color:#231F20
}
.helias .live-link a{
    color:#231F20
}
.helias .live-link a:before{
    background-color:#231F20
}
.helias .text-link{
    color:#231F20
}
.helias .text-link:before{
    background-color:#231F20
}
.helias .logo{
    background-color:#231F20
}
.helias .contact-icon{
    background-color:#231F20
}
.helias h1 span,.helias h2 span,.helias h3 span,.helias h4 span{
    color:#231F20;
    font-style:normal
}
.helias .mc-chicken span{
    background-color:#231F20
}
.helias .mc-chicken div{
    color:#231F20
}
.helias .mc-chicken.opened span{
    background-color:#231F20
}
.helias .shape-morph{
    top:25%;
    z-index:1;
    transform:translate(-50%, -50%);
    -moz-transform:translate(-50%, -50%);
    -webkit-transform:translate(-50%, -50%);
    -o-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
    right:-30%;
    width:90%;
    z-index:-1
}
.helias .shape-morph svg{
    fill:#FFFCD9
}
.helias .lSAction>a{
    background-color:#231F20
}
.helias .lSAction>a:before{
    background-color:#FFFCD9
}
.helias .lSAction>a:after{
    background-color:#FFFCD9
}
.helias #approach .relative-content img{
    position:absolute;
    top:25vh;
    z-index:-1;
    right:-15%;
    width:60%
}
.helias #approach .img-scroll{
    position:absolute;
    top:25vh;
    right:10%;
    width:30%
}
.helias .intro{
    position:relative;
    z-index:10
}
.helias #challenge .relative-content img{
    position:absolute;
    left:-40%;
    top:40vh;
    width:70%
}
.helias #challenge .img-wrap{
    line-height:0
}
.helias #challenge .img-wrap img:nth-of-type(2){
    position:absolute;
    top:30vh;
    left:10%;
    width:50%
}
.helias #challenge .img-wrap img:nth-of-type(3){
    position:absolute;
    top:0;
    left:0
}
.helias #challenge #blends{
    background-color:#FCFBF0
}
.helias #challenge .blends{
    background:transparent url("../img/projects/helias/blend-bg.png") no-repeat bottom left;
    background-size:cover;
    margin:13vh 0 10vh;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between
}
.helias #challenge .blends div{
    margin:0 2em
}
.helias #features .distort{
    line-height:0
}
.helias #features .distort img:nth-of-type(2){
    position:absolute;
    top:65vh;
    left:15%;
    width:9%
}
.helias #features .distort img:nth-of-type(3){
    position:absolute;
    top:20vh;
    left:7%;
    width:9%
}
.helias #features .videos{
    padding-bottom:10vh;
    position:relative;
    background-color:#FCFBF0
}
.helias #features .videos .prototype{
    position:relative;
    z-index:10
}
.helias #features .videos img:first-of-type{
    position:absolute;
    z-index:1;
    top:25vh;
    right:6%;
    width:65%
}
.helias #features .videos img:nth-of-type(2){
    position:absolute;
    z-index:1;
    bottom:-5vh;
    right:10%;
    width:50%
}
.helias #features .basket{
    line-height:0
}
.helias #features .basket img:first-of-type{
    position:absolute;
    top:35vh;
    left:5%;
    width:35%
}
.helias #features .mobile{
    position:relative;
    background:transparent url("../img/projects/helias/mobile-bg.png") no-repeat top left;
    background-size:cover
}
.helias #features .mobile .scrolling-text{
    left:-40%;
    top:10vh;
    font-size:20vw;
    opacity:1;
    color:#231F20
}
.helias #features .mobile-screens{
    margin-top:15vh;
    position:relative
}
.helias #features .mobile-screens img:first-of-type{
    position:absolute;
    top:0;
    left:0
}
.helias #features .mobile-screens img:nth-of-type(2){
    position:relative;
    z-index:999
}
.helias #demo{
    position:relative
}
.helias #demo:before{
    content:"";
    display:block;
    width:100%;
    height:50%;
    background-color:#FCFBF0;
    position:absolute;
    bottom:0;
    left:0;
    z-index:-1
}
.snooze{
    color:#1a1545
}
.snooze .project-heading{
    background-color:#fff;
    background-size:cover
}
.snooze .project-heading h1{

    z-index:20;
    left:13%;
    color:#fff
}
.snooze .project-heading img{
    position:absolute;
    width:12%;
    top:60vh;
    left:9%
}
.snooze .project-heading .shape-morph{
    z-index:10;
    left:50%
}
.snooze .project-heading .scroll-line span{
    background-color:#ffa500;
}
.snooze .project-heading .live-link a:after{
    content:"";
    background:url("../img/projects/snooze/img-arrow.svg") no-repeat;
    background-size:70% 70%;
    background-position:center center
}
.snooze .details{
    color:#fff
}
.snooze .title-caption{
    color:#00D5FF
}
.snooze .slidenav:before{
    background-color:#fff
}
.snooze .link-mask-wrap .link{
    color:rgba(0, 77, 241, 0.2)
}
.snooze .link-mask-wrap .link .link-mask span{
    color:#004DF1
}
.snooze .link-mask i{
    color:#00D5FF;
    font-style:normal
}
.snooze .project-arrow a:after,.snooze .project-arrow a:before{
    background-color:#004DF1
}
.snooze .live-link a{
    color:#fff
}
.snooze .live-link a:before{
    background-color:#fff
}
.snooze .live-link a span{
    background-color:#fff;
    opacity:.3
}
.snooze .text-link{
    color:#fff
}
.snooze .text-link:before{
    background-color:#fff
}
.snooze .logo{
    background-color:transparent;
}
.snooze .contact-icon{
    background-color:#3d94d1
}
.snooze h1 span,.snooze h2 span,.snooze h3 span,.snooze h4 span{
    color:#004DF1;
    font-style:normal
}
.snooze .mc-chicken.light span{
    background-color:#fff
}
.snooze .mc-chicken.light div{
    color:#fff
}
.snooze .mc-chicken span{
    background-color:#009AF0
}
.snooze .mc-chicken div{
    color:#3d94d1
}
.snooze .mc-chicken.opened span{
    background-color:#004DF1
}
.snooze .scrolling-text{
    font-size:16vw;
    opacity:1;
    text-transform:uppercase;
    color:#fff;
    text-shadow:-1px -1px 0 #3d94d1, 1px -1px 0 #3d94d1, -1px 1px 0 #3d94d1, 1px 1px 0 #3d94d1
}
.snooze .shape-morph{
    top:25%;
    z-index:1;
    transform:translate(-50%, -50%);
    -moz-transform:translate(-50%, -50%);
    -webkit-transform:translate(-50%, -50%);
    -o-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
    right:-30%;
    width:90%;
    z-index:-1
}
.snooze .shape-morph svg{
    fill:#3d94d1;
}
.snooze .lSAction>a{
    background-color:#374f9f
}
.snooze .lSAction>a:before{
    background-color:#009af0
}
.snooze .lSAction>a:after{
    background-color:#009af0
}
.snooze #approach .relative-content img{
    position:absolute;
    bottom:13%;
    z-index:-1;
    left:-25%;
    width:58%
}
.snooze #approach .img-scroll{
    position:absolute;
    top:15vh;
    right:5%;
    width:36%
}
.snooze .intro{
    position:relative;
    z-index:10
}
.snooze #challenge .relative-content img{
    position:absolute;
    width:30%;
    top:5vh;
    right:0
}
.snooze #challenge .img-wrap{
    line-height:0
}
.snooze #challenge .img-wrap img:nth-of-type(2){
    position:absolute;
    top:30vh;
    left:10%;
    width:50%
}
.snooze #challenge .img-wrap img:nth-of-type(3){
    position:absolute;
    top:0;
    left:0
}
.snooze #challenge .packaging{
    position:relative
}
.snooze #challenge .packaging-1{
    margin-top:0vh
}
.snooze #challenge .packaging-1 .scrolling-text:first-of-type{
    top:0
}
.snooze #challenge .packaging-1 .scrolling-text:nth-of-type(2){
    top:25vh
}
.snooze #challenge .packaging-1 .scrolling-text:nth-of-type(3){
    top:50vh
}
.snooze #challenge .packaging-1 img{
    margin-top:32vh;
    position:relative;
    z-index:100
}
.snooze #challenge .packaging-2{
    margin-top:35vh;
    padding-bottom:55vh
}
.snooze #challenge .packaging-2 .scrolling-text{
    color:#EFF4FF
}
.snooze #challenge .packaging-2 .scrolling-text:first-of-type{
    bottom:15vh;
    top:auto
}
.snooze #challenge .packaging-2 .scrolling-text:nth-of-type(2){
    bottom:40vh;
    top:auto
}
.snooze #challenge .packaging-2 img{
    position:relative;
    z-index:100
}
.snooze #challenge .packaging-2:before{
    
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:60%;
    background:transparent url("../img/projects/snooze/grey-bg.png") no-repeat;
    background-size:cover
}
.snooze #website .relative-content img{
    position:absolute;
    width:25%;
    bottom:20%;
    left:5%
}
.snooze #website .mobile{
    position:relative
}
.snooze #website .img-wrap{
    position:relative
}
.snooze #website .img-wrap img:nth-of-type(2){
    position:absolute;
    top:10%;
    left:55%;
    width:20%
}
.snooze #website .img-wrap img:nth-of-type(3){
    position:absolute;
    top:50%;
    left:22%;
    width:15%
}
.snooze #website #customers .relative-content img{
    bottom:5vh;
    width:25%;
    left:7%
}
.snooze #website .lSAction a{
    top:40%
}
.snooze #website .carousel-wrap .scrolling-text{
    line-height:1;
    z-index:2;
    top:auto;
    bottom:0
}
.snooze #treatment .images{
    position:relative;
    background:#004DF1 url("../img/projects/snooze/sales-bg.png");
    background-size:contain
}
.snooze #treatment .images:before{
    content:"";
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:100vw;
    height:50vh;
    background-color:#fff
}
.snooze #treatment .images:after{
    content:"";
    display:block;
    position:absolute;
    bottom:0;
    left:0;
    width:100vw;
    height:50vh;
    background-color:#fff
}
.snooze #treatment .images img{
    position:relative;
    z-index:10
}
.snooze #treatment .images .cloud:first-of-type{
    position:absolute;
    top:40%;
    left:51%;
    width:25%
}
.snooze #treatment .images .cloud:nth-of-type(2){
    position:absolute;
    bottom:15%;
    left:30%;
    width:20%
}
.snooze .mobile img:nth-of-type(2){
    position:absolute;
    top:0;
    left:0
}
.snooze .mobile .scrolling-text{
    top:auto;
    bottom:25%
}
.snooze #client .quote{
    color:#1a1545
}
.snooze #client .quote strong{
    color:#009AF0
}
.snooze #client .quote-link{
    color:#009AF0
}
.snooze #client .quote-link:before{
    background-color:#009AF0
}
.snooze .footer-wrap{
    background-color: #1a1545;
    background-size:contain
}
.snooze #p-services,.snooze #sales{
    background-color:transparent;
    color:#fff
}
.snooze #sales .sale-item{
    border-color:#00D5FF
}
.snooze #sales .sale-item i{
    opacity:1;
    background:url("../img/projects/snooze/sale-arrow.svg");
    background-repeat:no-repeat
}
.snooze #p-services .relative-content img{
    right:7%;
    width:26%
}
.snooze #p-services .next-project a{
    color:#fff
}
.snooze #p-services .next-project h2 span{
    color:#fff
}
.snooze #p-services .next-project .shape-morph.shape-morph-bottom svg{
    fill:#3d94d1;
    opacity:1
}
.betches{
    color:#252020
}
.betches .project-heading figure{
    bottom:25%;
    left:7%
}
.betches .project-heading .scroll-line span{
    background-color:#D3708F
}
.betches .slidenav:before{
    background-color:#252020
}
.betches .link-mask i{
    color:#D3708F;
    font-style:normal
}
.betches .project-arrow a:after,.betches .project-arrow a:before{
    background-color:#252020
}
.betches .live-link a{
    color:#252020
}
.betches .live-link a:before{
    background-color:#D3708F
}
.betches .text-link{
    color:#D3708F
}
.betches .text-link:before{
    background-color:#D3708F
}
.betches .logo{
    background-color:#D3708F
}
.betches .contact-icon{
    background-color:#D3708F
}
.betches h1 span,.betches h2 span,.betches h3 span,.betches h4 span{
    color:#D3708F;
    font-style:normal
}
.betches .mc-chicken span{
    background-color:#252020
}
.betches .mc-chicken.opened span{
    background-color:#fff
}
.betches .shape-morph{
    top:50%;
    transform:translate(-50%, -50%);
    -moz-transform:translate(-50%, -50%);
    -webkit-transform:translate(-50%, -50%);
    -o-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
    right:-100%;
    width:100%
}
.betches .shape-morph svg{
    fill:#D3708F
}
.betches #story .wrapped-img{
    top:0;
    left:0
}
.betches #story .desc-box{
    margin-top:5em
}
.betches #story .img-first{
    opacity:.075;
    top:25vh;
    left:50%
}
.betches #story .img-fourth{
    left:50%;
    width:30%;
    top:60%
}
.betches #ux .chapter-icon{
    position:absolute;
    top:-10%;
    left:100%
}
.betches #ux .img-first{
    display:inline-block;
    width:75%;
    top:0;
    right:0
}
.betches #design .chapter-icon{
    position:absolute;
    top:-40%;
    left:50%
}
.betches #design .chapter-desc .img-first{
    bottom:100%;
    left:20%
}
.betches .colors{
    padding:0 1.25%
}
.betches .colors .color-box{
    position:relative;
    color:#fff;
    width:90%;
    padding:5%;
    height:25vh;
    padding-top:-25vh;
    min-height:200px;
    margin-bottom:2vh
}
.betches .colors .color-box span{
    display:block
}
.betches .colors .color-box .color-category{
    font-size:.75vw;
    text-transform:uppercase
}
.betches .colors .color-box .color-value{
    position:absolute;
    left:5%;
    bottom:10%;
    font-size:3vw;
    opacity:.2
}
.betches .colors .color-box.grey{
    background-color:#252020
}
.betches .colors .color-box.charm{
    background-color:#d3708f
}
.betches .colors .color-box.cavern{
    background-color:#E0C9C4
}
.betches .colors .color-box.chestwod{
    background-color:#9091D6
}
.betches .colors .color-box.blizzard{
    background-color:#A7DCEB
}
.betches .colors .color-box.peach{
    background-color:#FFCC9F
}
.betches .colors .color-box.appricot{
    background-color:#F08282
}
.betches .colors .color-box.dolly{
    color:#252020;
    background-color:#FDF790
}
.betches .typography .wrapped-img{
    top:35%;
    left:110%;
    width:20%
}
.betches .icons{
    position:relative;
    background-color:#f6e2e9
}
.betches .icons .scrolling-text{
    left:-20%;
    top:45%
}
.betches .web .scrolling-text{
    left:0%;
    top:45%
}
.betches .web .sketch{
    margin-top:-8em
}
.betches .web .wrapped-img{
    bottom:0;
    left:0
}
.betches .web .iphone-rich{
    background-color:#99CDCE
}
.betches .web .iphone-rich .img-second{
    width:25%;
    top:35%;
    left:0
}
.betches .web .iphone-rich .img-third{
    width:25%;
    top:60%;
    left:60%
}
.betches .web .iphone-rich .img-fourth{
    width:15%;
    top:80%;
    left:10%
}
.betches .web .iphone-rich .img-sixth{
    width:15%;
    top:30%;
    left:75%
}
.betches .web-sketch{
    background-color:#f6e2e9
}
.betches .iphone-window{
    background-color:#F8F0ED
}
.betches .iphone-window .img-third{
    width:15%;
    top:100%;
    left:60%
}
.betches .video-section{
    background-color:#252020
}
.betches .video-section .img-second{
    top:5%
}
.betches .video-section .img-third{
    top:5%;
    width:20%;
    left:60%
}
.betches .video-section:before{
    content:"";
    position:absolute;
    top:60%;
    bottom:0;
    right:0;
    left:0;
    background-color:#fff
}
.betches .video-section .img-fourth{
    width:30%;
    bottom:5%;
    left:10%
}
.betches .video-section .scrolling-text{
    top:85%;
    right:-75%
}
.betches .podcast{
    position:relative
}
.betches .podcast .img-first{
    position:absolute;
    top:0;
    left:70%;
    width:8%
}
.betches .animated-bg{
    background-color:#252020;
    height:80vh;
    position:relative;
    animation:bgAnim 3s infinite;
    -moz-animation:bgAnim 3s infinite;
    -webkit-animation:bgAnim 3s infinite;
    -o-animation:bgAnim 3s infinite
}
.betches .animated-bg img{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    -moz-transform:translate(-50%, -50%);
    -webkit-transform:translate(-50%, -50%);
    -o-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
    width:70%;
    height:auto
}
@-webkit-keyframes bgAnim{
    0%,6.25%{
        background-color:#252020
    }
    12.5%,18.75%{
        background-color:#D3708F
    }
    25%,31.25%{
        background-color:#E0C9C4
    }
    37.5%,43.75%{
        background-color:#9091D6
    }
    50%,56.25%{
        background-color:#A7DCEB
    }
    62.5%,68.75%{
        background-color:#F08282
    }
    75%,81.25%{
        background-color:#FFCC9F
    }
    87.5%,93.75%{
        background-color:#FDF790
    }
}
@keyframes bgAnim{
    0%,6.25%{
        background-color:#252020
    }
    12.5%,18.75%{
        background-color:#D3708F
    }
    25%,31.25%{
        background-color:#E0C9C4
    }
    37.5%,43.75%{
        background-color:#9091D6
    }
    50%,56.25%{
        background-color:#A7DCEB
    }
    62.5%,68.75%{
        background-color:#F08282
    }
    75%,81.25%{
        background-color:#FFCC9F
    }
    87.5%,93.75%{
        background-color:#FDF790
    }
}
.betches #development{
    background-color:#F08282;
    position:relative
}
.betches #development:before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:50vh;
    background-color:#fff
}
.betches .next-project a{
    color:#252020
}
.betches .next-project h2 span{
    color:#252020!important
}
.betches .next-project svg{
    fill:#fff
}
.storyverse{
    background-color:#333231;
    color:#E6E6E6
}
.storyverse .live-link a{
    color:#E6E6E6
}
.storyverse .live-link a:after{
    background:url("../img/projects/storyverse/img-arrow.svg") no-repeat;
    background-size:70% 70%;
    background-position:center center
}
.storyverse .live-link a span{
    background-color:#E6E6E6;
    opacity:.25
}
.storyverse .project-heading .scroll-line span{
    background-color:#E6E6E6
}
.storyverse .slidenav:before{
    background-color:#333231
}
.storyverse .link-mask i{
    color:#E6E6E6;
    font-style:normal
}
.storyverse .live-link a:before{
    background-color:#E6E6E6
}
.storyverse .text-link{
    color:#E6E6E6
}
.storyverse .text-link:before{
    background-color:#E6E6E6
}
.storyverse .logo{
    background-color:#cdcdcd
}
.storyverse .contact-icon{
    background-color:#cdcdcd
}
.storyverse h1 span,.storyverse h2 span,.storyverse h3 span,.storyverse h4 span{
    color:#E6E6E6;
    font-style:normal
}
.storyverse .mc-chicken span{
    background-color:#E6E6E6
}
.storyverse .mc-chicken.opened span{
    background-color:#fff
}
.storyverse .shape-morph{
    top:65%;
    z-index:1;
    transform:translate(-50%, -50%);
    -moz-transform:translate(-50%, -50%);
    -webkit-transform:translate(-50%, -50%);
    -o-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
    right:-15%;
    width:84%
}
.storyverse .shape-morph svg{
    fill:#E6E6E6;
    opacity:.1
}
.storyverse #story .chapter-icon{
    width:25%
}
.storyverse #story .img-first{
    top:0%;
    left:0%
}
.storyverse #ux{
    position:relative;
    background-color:#fff;
    color:#333231;
    overflow:hidden
}
.storyverse #ux .chapter-icon{
    position:absolute;
    top:-75%;
    left:90%;
    width:25%
}
.storyverse #ux .img-slider-wrap{
    width:110%;
    margin-left:-5%;
    margin-top:-1em;
    overflow:hidden;
    background:url("../img/projects/storyverse/ux-skew.svg");
    background-size:100% auto;
    background-position:top left;
    background-repeat:no-repeat
}
.storyverse #ux .img-slider{
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    animation:imgSlider 2s infinite ease-in-out;
    -moz-animation:imgSlider 2s infinite ease-in-out;
    -webkit-animation:imgSlider 2s infinite ease-in-out;
    -o-animation:imgSlider 2s infinite ease-in-out;
    background:url("../img/projects/storyverse/ux-slide-1.png") no-repeat;
    background-size:100% 100%;
    background-position:center center;
    width:100%
}
.storyverse #ux .img-slider:before{
    z-index:999;
    content:"";
    display:block;
    padding-top:75%
}
@-webkit-keyframes imgSlider{
    0%{
        background:url("../img/projects/storyverse/ux-slide-1.png") no-repeat;
        background-size:100% 100%;
        background-position:center center
    }
    25%{
        background:url("../img/projects/storyverse/ux-slide-2.png") no-repeat;
        background-size:100% 100%;
        background-position:center center
    }
    50%{
        background:url("../img/projects/storyverse/ux-slide-3.png") no-repeat;
        background-size:100% 100%;
        background-position:center center
    }
    75%{
        background:url("../img/projects/storyverse/ux-slide-4.png") no-repeat;
        background-size:100% 100%;
        background-position:center center
    }
}
@keyframes imgSlider{
    0%{
        background:url("../img/projects/storyverse/ux-slide-1.png") no-repeat;
        background-size:100% 100%;
        background-position:center center
    }
    25%{
        background:url("../img/projects/storyverse/ux-slide-2.png") no-repeat;
        background-size:100% 100%;
        background-position:center center
    }
    50%{
        background:url("../img/projects/storyverse/ux-slide-3.png") no-repeat;
        background-size:100% 100%;
        background-position:center center
    }
    75%{
        background:url("../img/projects/storyverse/ux-slide-4.png") no-repeat;
        background-size:100% 100%;
        background-position:center center
    }
}
.storyverse #design{
    position:relative;
    background-color:#fff;
    color:#333231
}
.storyverse #design .chapter-icon{
    position:absolute;
    top:-30%;
    left:50%
}
.storyverse #design .wrapped-img{
    width:40%;
    left:60%;
    top:0
}
.storyverse .carousel-wrap{
    margin-top:-40vh
}
.storyverse .carousel-wrap .lSAction>a{
    background-color:#E6E6E6
}
.storyverse .carousel-wrap .lSAction>a:before{
    background-color:#333231
}
.storyverse .carousel-wrap .lSAction>a:after{
    background-color:#333231
}
.storyverse .next-project a{
    color:#E6E6E6
}
.storyverse .next-project .shape-morph-bottom svg{
    fill:#262525;
    opacity:1
}
.storyverse .next-project h2 span{
    color:#E6E6E6!important
}
.storyverse #development{
    background-color:#333231;
    color:#E6E6E6
}
.storyverse #development .box p{
    opacity:.6
}
.modernmd{
    color:#3A3A3C
}
.modernmd .live-link a{
    color:#3A3A3C
}
.modernmd .live-link a:after{
    background:url("../img/projects/modernmd/img-arrow.svg") no-repeat;
    background-size:70% 70%;
    background-position:center center
}
.modernmd .live-link a span{
    background-color:#3A3A3C;
    opacity:.25
}
.modernmd .project-heading img{
    position:absolute;
    width:80%;
    top:60vh;
    left:10vw
}
.modernmd .project-heading .scroll-line span{
    background-color:#DE2E26
}
.modernmd .slidenav:before{
    background-color:#3A3A3C
}
.modernmd .link-mask i{
    color:#DE2E26;
    font-style:normal
}
.modernmd .live-link a:before{
    background-color:#3A3A3C
}
.modernmd .text-link{
    color:#DE2E26
}
.modernmd .text-link:before{
    background-color:#DE2E26
}
.modernmd .logo{
    background-color:#DE2E26
}
.modernmd .contact-icon{
    background-color:#DE2E26
}
.modernmd h1 span,.modernmd h2 span,.modernmd h3 span,.modernmd h4 span{
    color:#DE2E26;
    font-style:normal
}
.modernmd .mc-chicken span{
    background-color:#3A3A3C
}
.modernmd .mc-chicken.opened span{
    background-color:#fff
}
.modernmd .shape-morph{
    top:10%;
    z-index:1;
    transform:translate(-50%, -50%);
    -moz-transform:translate(-50%, -50%);
    -webkit-transform:translate(-50%, -50%);
    -o-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
    right:-80%;
    width:100%;
    z-index:-1
}
.modernmd .shape-morph svg{
    fill:#DE2E26
}
.modernmd .paragraph-title{
    color:#DE2E26
}
.modernmd #story .chapter-icon{
    width:30%;
    margin-left:2em;
    margin-bottom:4em
}
.modernmd #story .img-wrap{
    display:block;
    height:100vh
}
.modernmd #story .img-first{
    width:43%;
    left:8%;
    top:35%
}
.modernmd #story .img-second{
    width:38%;
    left:0%;
    top:10%;
    -webkit-box-shadow:0 20px 50px rgba(58, 58, 60, 0.2);
    box-shadow:0 20px 50px rgba(58, 58, 60, 0.2)
}
.modernmd #story .img-third{
    width:50%;
    left:33%;
    top:15%;
    -webkit-box-shadow:0 26px 60px rgba(58, 58, 60, 0.2);
    box-shadow:0 26px 60px rgba(58, 58, 60, 0.2)
}
.modernmd #story .img-fourth{
    width:8%;
    left:12%;
    bottom:0%
}
.modernmd #ux .chapter-icon{
    width:25%;
    position:absolute;
    top:0;
    left:100%
}
.modernmd #ux .img-second{
    position:absolute;
    top:0;
    right:5%;
    width:35%
}
.modernmd #design{
    position:relative
}
.modernmd #design .chapter-icon{
    width:35%
}
.modernmd #design>figure:first-child{
    position:absolute;
    top:30vh;
    right:0
}
.modernmd #design>figure:last-child{
    margin-bottom:-40vh
}
.modernmd #design .img-second{
    width:10%;
    bottom:0%;
    right:10%
}
.modernmd #design .lSAction>a{
    -webkit-box-shadow:none;
    box-shadow:none;
    background-color:#F2F2F2
}
.modernmd #design .lSAction>a:before{
    background-color:#DE2E26
}
.modernmd #design .lSAction>a:after{
    background-color:#DE2E26
}
.modernmd .carousel-wrap{
    position:relative
}
.modernmd .carousel-wrap:after{
    content:"";
    display:block;
    position:absolute;
    background-color:#3A3A3C;
    width:100%;
    height:40%;
    bottom:0;
    left:0
}
.modernmd #img-slider .lslide{
    height:100%
}
.modernmd #development{
    background-color:#3A3A3C;
    color:#fff
}
.modernmd #development h2 span{
    color:#DE2E26
}
.modernmd #development .paragraph-title{
    color:#DE2E26
}
.modernmd .next-project h2 span{
    color:#fff!important
}
.taylor{
    background-color:#39519E;
    color:#fff
}
.taylor .live-link a{
    color:#fff
}
.taylor .live-link a:after{
    background:url("../img/projects/taylor/img-arrow.svg") no-repeat;
    background-size:70% 70%;
    background-position:center center
}
.taylor .live-link a span{
    background-color:#fff;
    opacity:.25
}
.taylor .parallax-bg{
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:400vh;
    background:transparent url("../img/projects/taylor/bg-parallax.html") repeat top left;
    background-size:auto
}
.taylor .project-heading .scroll-line span{
    background-color:#26C3DA
}
.taylor .slidenav:before{
    background-color:#39519E
}
.taylor .link-mask i{
    color:#26C3DA;
    font-style:normal
}
.taylor .live-link a:before{
    background-color:#fff
}
.taylor .text-link{
    color:#fff
}
.taylor .text-link:before{
    background-color:#fff
}
.taylor .logo{
    z-index:9999;
    background-color:#26C3DA
}
.taylor .contact-icon{
    background-color:#26C3DA
}
.taylor h1 span,.taylor h2 span,.taylor h3 span,.taylor h4 span{
    color:#26C3DA;
    font-style:normal
}
.taylor h1{
    z-index:999
}
.taylor h3{
    color:#26C3DA
}
.taylor p{
    color:rgba(255, 255, 255, 0.6)
}
.taylor .mc-chicken span{
    background-color:#fff
}
.taylor .mc-chicken.opened span{
    background-color:#fff
}
.taylor .shape-morph{
    top:25%;
    z-index:1;
    transform:translate(-50%, -50%);
    -moz-transform:translate(-50%, -50%);
    -webkit-transform:translate(-50%, -50%);
    -o-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
    right:-85%;
    width:100%
}
.taylor .shape-morph svg{
    fill:url(#MyGradient);
    opacity:1
}
.taylor .lSAction>a{
    -webkit-box-shadow:none;
    box-shadow:none;
    background-color:#26C3DA
}
.taylor .lSAction>a:before{
    background-color:#fff
}
.taylor .lSAction>a:after{
    background-color:#fff
}
.taylor .gradient-box{
    width:100%;
    height:100vh;
    position:relative;
    overflow:hidden;
    -webkit-box-shadow:0px 20px 60px rgba(0, 0, 0, 0.15);
    box-shadow:0px 20px 60px rgba(0, 0, 0, 0.15);
    border:5px solid #26C3DA
}
.taylor .gradient-box:before{
    content:"";
    background:-webkit-linear-gradient(45deg, #37308D, #26C3DA);
    background:-o-linear-gradient(45deg, #37308D, #26C3DA);
    background:linear-gradient(45deg, #37308D, #26C3DA);
    animation:gradAnim 22s infinite;
    -moz-animation:gradAnim 22s infinite;
    -webkit-animation:gradAnim 22s infinite;
    -o-animation:gradAnim 22s infinite;
    transform:translate(0, 0);
    -moz-transform:translate(0, 0);
    -webkit-transform:translate(0, 0);
    -o-transform:translate(0, 0);
    -ms-transform:translate(0, 0);
    -webkit-animation-direction:alternate;
    animation-direction:alternate;
    display:block;
    position:absolute;
    top:-50%;
    left:-30%;
    right:-30%;
    bottom:-50%;
    background-color:yellow
}
@-webkit-keyframes gradAnim{
    0%{
        transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        -o-transform:rotate(0deg);
        -ms-transform:rotate(0deg)
    }
    to{
        transform:rotate(720deg);
        -moz-transform:rotate(720deg);
        -webkit-transform:rotate(720deg);
        -o-transform:rotate(720deg);
        -ms-transform:rotate(720deg)
    }
}
@keyframes gradAnim{
    0%{
        transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        -o-transform:rotate(0deg);
        -ms-transform:rotate(0deg)
    }
    to{
        transform:rotate(720deg);
        -moz-transform:rotate(720deg);
        -webkit-transform:rotate(720deg);
        -o-transform:rotate(720deg);
        -ms-transform:rotate(720deg)
    }
}
.taylor .gradient-box img{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    -moz-transform:translate(-50%, -50%);
    -webkit-transform:translate(-50%, -50%);
    -o-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
    width:60%
}
.taylor #story .chapter-icon{
    width:30%;
    margin-bottom:5em;
    margin-left:3em
}
.taylor #story .img-first{
    top:30%
}
.taylor #story .img-third{
    top:0
}
.taylor #ux{
    position:relative
}
.taylor #ux .scrolling-text{
    left:-100%;
    top:65%
}
.taylor #ux .chapter-icon{
    position:absolute;
    top:0;
    left:100%
}
.taylor #design{
    position:relative
}
.taylor #design .chapter-icon{
    position:absolute;
    top:40%;
    left:110%;
    width:25%
}
.taylor .design-color-wrap{
    position:absolute;
    top:80vh;
    right:0;
    width:30%
}
.taylor .font{
    position:relative
}
.taylor .font figure:nth-of-type(2){
    width:12%;
    position:absolute;
    top:60%;
    right:20%
}
.taylor .logo-built figure{
    position:relative;
    overflow:hidden;
    -webkit-box-shadow:0px 30px 80px rgba(0, 0, 0, 0.15);
    box-shadow:0px 30px 80px rgba(0, 0, 0, 0.15)
}
.taylor .logo-built figure img{
    position:absolute;
    top:0;
    left:0;
    opacity:0
}
.taylor .logo-built figure img:first-child{
    position:static;
    opacity:1
}
.taylor .logo-built figure img:nth-child(2){
    opacity:0;
    animation:logoSlide1 5s infinite;
    -moz-animation:logoSlide1 5s infinite;
    -webkit-animation:logoSlide1 5s infinite;
    -o-animation:logoSlide1 5s infinite;
    -webkit-animation-delay:1s;
    -moz-animation-delay:1s;
    -o-animation-delay:1s;
    -ms-animation-delay:1s;
    animation-delay:1s
}
.taylor .logo-built figure img:nth-child(3){
    animation:logoSlide2 5s infinite;
    -moz-animation:logoSlide2 5s infinite;
    -webkit-animation:logoSlide2 5s infinite;
    -o-animation:logoSlide2 5s infinite;
    -webkit-animation-delay:1s;
    -moz-animation-delay:1s;
    -o-animation-delay:1s;
    -ms-animation-delay:1s;
    animation-delay:1s;
    opacity:0
}
.taylor .logo-built figure img:nth-child(4){
    animation:logoSlide3 5s infinite;
    -moz-animation:logoSlide3 5s infinite;
    -webkit-animation:logoSlide3 5s infinite;
    -o-animation:logoSlide3 5s infinite;
    -webkit-animation-delay:1s;
    -moz-animation-delay:1s;
    -o-animation-delay:1s;
    -ms-animation-delay:1s;
    animation-delay:1s;
    opacity:0
}
@-webkit-keyframes logoSlide1{
    0%{
        opacity:0
    }
    5%,80%{
        opacity:1
    }
    80.1%,to{
        opacity:0
    }
}
@keyframes logoSlide1{
    0%{
        opacity:0
    }
    5%,80%{
        opacity:1
    }
    80.1%,to{
        opacity:0
    }
}
@-webkit-keyframes logoSlide2{
    0%,25%{
        opacity:0
    }
    30%,80%{
        opacity:1
    }
    80.1%,to{
        opacity:0
    }
}
@keyframes logoSlide2{
    0%,25%{
        opacity:0
    }
    30%,80%{
        opacity:1
    }
    80.1%,to{
        opacity:0
    }
}
@-webkit-keyframes logoSlide3{
    0%,50%{
        opacity:0
    }
    55%,80%{
        opacity:1
    }
    80.1%,to{
        opacity:0
    }
}
@keyframes logoSlide3{
    0%,50%{
        opacity:0
    }
    55%,80%{
        opacity:1
    }
    80.1%,to{
        opacity:0
    }
}
.taylor .brand{
    position:relative
}
.taylor .brand .grid-wrap:first-of-type{
    position:absolute;
    top:20vh
}
.taylor .letterhead .img-second{
    width:11%;
    top:10%;
    right:20%
}
.taylor .bag{
    background-color:rgba(25, 25, 26, 0.2);
    position:relative
}
.taylor .bag figure:first-of-type{
    position:absolute;
    top:50%;
    left:15%;
    width:11%
}
.taylor .bag .scrolling-text{
    right:-100%
}
.taylor .website .color-bg{
    background-color:rgba(25, 25, 26, 0.2)
}
.taylor .devices{
    position:relative
}
.taylor .devices:before{
    content:"";
    position:absolute;
    display:block;
    left:0;
    top:0%;
    width:100%;
    height:80%;
    background-color:rgba(25, 25, 26, 0.2)
}
.taylor .devices .img-second{
    top:10%;
    right:0
}
.taylor .prototype-vid{
    -webkit-box-shadow:0px 25px 60px rgba(0, 0, 0, 0.15);
    box-shadow:0px 25px 60px rgba(0, 0, 0, 0.15);
    line-height:0
}
.taylor .special-device .img-second{
    top:0
}
.taylor .carousel-wrap{
    position:relative
}
.taylor .carousel-wrap:after{
    content:"";
    display:block;
    position:absolute;
    background-color:rgba(25, 25, 26, 0.2);
    width:100%;
    height:15%;
    bottom:0%;
    left:0
}
.taylor #development{
    background-color:rgba(25, 25, 26, 0.2)
}
.taylor #development h2 span,.taylor #development h4{
    color:#26C3DA
}
.taylor .next-project h2 span{
    color:#fff!important
}
.cornerstone{
    color:#232325
}
.cornerstone .live-link a{
    color:#232325
}
.cornerstone .live-link a:after{
    background:url("../img/projects/cornerstone/img-arrow.svg") no-repeat;
    background-size:70% 70%;
    background-position:center center
}
.cornerstone .live-link a span{
    background-color:#232325;
    opacity:.25
}
.cornerstone .project-heading .scroll-line span{
    background-color:#0666D1
}
.cornerstone h1{
    color:#0666D1
}
.cornerstone .slidenav:before{
    background-color:#0666D1
}
.cornerstone .link-mask i{
    color:#FFA726;
    font-style:normal
}
.cornerstone .live-link a:before{
    background-color:#232325
}
.cornerstone .text-link{
    color:#0666D1
}
.cornerstone .text-link:before{
    background-color:#0666D1
}
.cornerstone .logo{
    background-color:#0666D1
}
.cornerstone .contact-icon{
    background-color:#0666D1
}
.cornerstone h1,.cornerstone h2,.cornerstone h3,.cornerstone h4{
    color:#0666D1
}
.cornerstone h1 span,.cornerstone h2 span,.cornerstone h3 span,.cornerstone h4 span{
    color:#FFA726;
    font-style:normal
}
.cornerstone .mc-chicken span{
    background-color:#232325
}
.cornerstone .mc-chicken.opened span{
    background-color:#fff
}
.cornerstone .shape-morph{
    transform:translate(-50%, -50%);
    -moz-transform:translate(-50%, -50%);
    -webkit-transform:translate(-50%, -50%);
    -o-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
    top:40%;
    z-index:1;
    right:-90%;
    width:100%;
    z-index:-1
}
.cornerstone .shape-morph svg{
    fill:#FFA726
}
.cornerstone .lSAction>a{
    -webkit-box-shadow:none;
    box-shadow:none;
    background-color:#0666D1
}
.cornerstone .lSAction>a:before{
    background-color:#fff
}
.cornerstone .lSAction>a:after{
    background-color:#fff
}
.cornerstone .screen-built figure{
    position:relative;
    overflow:hidden;
    -webkit-box-shadow:0px 30px 80px rgba(0, 0, 0, 0.15);
    box-shadow:0px 30px 80px rgba(0, 0, 0, 0.15)
}
.cornerstone .screen-built figure img{
    position:absolute;
    top:0;
    left:0;
    opacity:0
}
.cornerstone .screen-built figure img:first-child{
    position:static;
    opacity:1
}
.cornerstone .screen-built figure img:nth-child(2){
    opacity:0;
    animation:logoSlide1 5s infinite;
    -moz-animation:logoSlide1 5s infinite;
    -webkit-animation:logoSlide1 5s infinite;
    -o-animation:logoSlide1 5s infinite;
    -webkit-animation-delay:1s;
    -moz-animation-delay:1s;
    -o-animation-delay:1s;
    -ms-animation-delay:1s;
    animation-delay:1s
}
.cornerstone .screen-built figure img:nth-child(3){
    animation:logoSlide2 5s infinite;
    -moz-animation:logoSlide2 5s infinite;
    -webkit-animation:logoSlide2 5s infinite;
    -o-animation:logoSlide2 5s infinite;
    -webkit-animation-delay:1s;
    -moz-animation-delay:1s;
    -o-animation-delay:1s;
    -ms-animation-delay:1s;
    animation-delay:1s;
    opacity:0
}
.cornerstone .screen-built figure img:nth-child(4){
    animation:logoSlide3 5s infinite;
    -moz-animation:logoSlide3 5s infinite;
    -webkit-animation:logoSlide3 5s infinite;
    -o-animation:logoSlide3 5s infinite;
    -webkit-animation-delay:1s;
    -moz-animation-delay:1s;
    -o-animation-delay:1s;
    -ms-animation-delay:1s;
    animation-delay:1s;
    opacity:0
}
.cornerstone .screen-built figure img:nth-child(5){
    animation:logoSlide4 5s infinite;
    -moz-animation:logoSlide4 5s infinite;
    -webkit-animation:logoSlide4 5s infinite;
    -o-animation:logoSlide4 5s infinite;
    -webkit-animation-delay:1s;
    -moz-animation-delay:1s;
    -o-animation-delay:1s;
    -ms-animation-delay:1s;
    animation-delay:1s;
    opacity:0
}
.cornerstone .screen-built figure img:nth-child(6){
    animation:logoSlide5 5s infinite;
    -moz-animation:logoSlide5 5s infinite;
    -webkit-animation:logoSlide5 5s infinite;
    -o-animation:logoSlide5 5s infinite;
    -webkit-animation-delay:1s;
    -moz-animation-delay:1s;
    -o-animation-delay:1s;
    -ms-animation-delay:1s;
    animation-delay:1s;
    opacity:0
}
@keyframes logoSlide1{
    0%{
        opacity:0
    }
    5%,80%{
        opacity:1
    }
    80.1%,to{
        opacity:0
    }
}
@keyframes logoSlide2{
    0%,16%{
        opacity:0
    }
    21%,84%{
        opacity:1
    }
    84.1%,to{
        opacity:0
    }
}
@keyframes logoSlide3{
    0%,32%{
        opacity:0
    }
    37%,84%{
        opacity:1
    }
    84.1%,to{
        opacity:0
    }
}
@-webkit-keyframes logoSlide4{
    0%,48%{
        opacity:0
    }
    53%,84%{
        opacity:1
    }
    84.1%,to{
        opacity:0
    }
}
@keyframes logoSlide4{
    0%,48%{
        opacity:0
    }
    53%,84%{
        opacity:1
    }
    84.1%,to{
        opacity:0
    }
}
@-webkit-keyframes logoSlide5{
    0%,64%{
        opacity:0
    }
    69%,84%{
        opacity:1
    }
    84.1%,to{
        opacity:0
    }
}
@keyframes logoSlide5{
    0%,64%{
        opacity:0
    }
    69%,84%{
        opacity:1
    }
    84.1%,to{
        opacity:0
    }
}
.cornerstone .project-heading img{
    position:absolute;
    width:80%;
    top:70vh;
    left:10vw
}
.cornerstone .paragraph-title{
    color:#232325
}
.cornerstone #story .img-first{
    top:10%;
    left:5%;
    width:35%
}
.cornerstone #story .img-third{
    top:50%;
    right:5%;
    width:30%
}
.cornerstone #ux .chapter-icon{
    position:absolute;
    top:-75%;
    right:30%
}
.cornerstone #design .chapter-icon{
    width:30%;
    margin-bottom:5em
}
.cornerstone .font-choice{
    position:relative;
    background-color:#84CC3B
}
.cornerstone .font-choice:before{
    content:"";
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background:transparent url("../img/projects/cornerstone/pattern.png") repeat top left;
    background-size:15%;
    opacity:.07
}
.cornerstone .font-choice .img-wrap{
    height:30vh
}
.cornerstone .font-choice .img-wrap .img-first{
    top:-130%;
    width:40%;
    left:40%
}
.cornerstone .font-choice .img-wrap .img-second{
    top:-70%;
    width:25%;
    left:30%
}
.cornerstone .ui-1{
    height:100vh
}
.cornerstone .ui-1 .img-first{
    top:20%;
    left:-5%;
    width:30%
}
.cornerstone .ui-1 .img-second{
    width:100%;
    height:auto
}
.cornerstone .ui-1 .img-third{
    top:45%;
    right:5%;
    width:10%
}
.cornerstone .ui-2 .img-second{
    top:-10%;
    left:15%;
    width:8%
}
.cornerstone .ui-3{
    margin-top:-40vh
}
.cornerstone .ui-3 .img-second{
    top:40%;
    left:3%;
    width:25%
}
.cornerstone .ui-3 .img-third{
    top:50%;
    left:17%;
    width:25%
}
.cornerstone .ui-4 .img-second,.cornerstone .ui-4 .img-third{
    top:0
}
.cornerstone #development{
    background-color:#0666D1;
    position:relative
}
.cornerstone #development h2{
    color:#fff
}
.cornerstone #development h2 span{
    color:#FFA726
}
.cornerstone #development:before{
    content:"";
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background:transparent url("../img/projects/cornerstone/pattern.png") repeat top left;
    background-size:15%;
    opacity:.07
}
.cornerstone #development .next-project h2 span{
    color:#fff!important
}
.allpro{
    color:#144E9B
}
.allpro .live-link a{
    color:#144E9B
}
.allpro .live-link a:after{
    background:url("../img/projects/allpro/img-arrow.svg") no-repeat;
    background-size:70% 70%;
    background-position:center center
}
.allpro .live-link a span{
    background-color:#144E9B;
    opacity:.25
}
.allpro .project-heading .scroll-line span{
    background-color:#F9EB21
}
.allpro .slidenav:before{
    background-color:#144E9B
}
.allpro .link-mask i{
    color:#F9EB21;
    font-style:normal
}
.allpro #img-slider{
    background-color:#fff
}
.allpro #img-slider .lslide{
    height:auto;
    line-height:0
}
.allpro .lSSlideOuter{
    overflow:visible!important
}
.allpro .lSSlideOuter .lSPager.lSpg{
    bottom:-4em
}
.allpro .lSSlideOuter .lSPager.lSpg>li.active a,.allpro .lSSlideOuter .lSPager.lSpg>li:hover a,.allpro .lSSlideOuter .lSPager.lSpg>li a{
    background-color:#144E9B
}
.allpro .lSSlideOuter .lSPager.lSpg>li.active a:before,.allpro .lSSlideOuter .lSPager.lSpg>li:hover a:before,.allpro .lSSlideOuter .lSPager.lSpg>li a:before{
    border:1px solid #144E9B
}
.allpro h1{
    color:#144E9B
}
.allpro .paragraph-title{
    text-transform:uppercase;
    font-size:.75em;
    letter-spacing:.15em
}
.allpro .live-link a:before{
    background-color:#144E9B
}
.allpro .text-link{
    color:#F9EB21
}
.allpro .text-link:before{
    background-color:#F9EB21
}
.allpro .logo{
    background-color:#144E9B
}
.allpro .contact-icon{
    background-color:#144E9B
}
.allpro h1,.allpro h2,.allpro h3,.allpro h4{
    color:#144E9B
}
.allpro h1 span,.allpro h2 span,.allpro h3 span,.allpro h4 span{
    color:#F9EB21;
    font-style:normal
}
.allpro .mc-chicken span{
    background-color:#144E9B
}
.allpro .mc-chicken.opened span{
    background-color:#fff
}
.allpro .shape-morph{
    top:40%;
    z-index:1;
    transform:translate(-50%, -50%);
    -moz-transform:translate(-50%, -50%);
    -webkit-transform:translate(-50%, -50%);
    -o-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
    right:-90%;
    width:100%;
    z-index:-1
}
.allpro .shape-morph svg{
    fill:#F9EB21
}
.allpro .lSAction>a{
    -webkit-box-shadow:none;
    box-shadow:none;
    background-color:#144E9B
}
.allpro .lSAction>a:before{
    background-color:#F9EB21
}
.allpro .lSAction>a:after{
    background-color:#F9EB21
}
.allpro .btn-play:before{
    background-color:#144E9B
}
.allpro .btn-play:after{
    background:transparent url("../img/projects/allpro/video-play-icon.svg") no-repeat center center
}
.allpro #story .chapter-icon{
    margin:0 0 4em 2em
}
.allpro #story .img-first{
    top:5%;
    left:0;
    width:40%
}
.allpro #story .img-third{
    width:25%;
    bottom:-15%;
    right:15%
}
.allpro .photoshoot .img-box{
    position:relative
}
.allpro .photoshoot .img-jump{
    margin-bottom:-2em
}
.allpro .rotating-circle-wrap{
    margin:0;
    padding:0;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    -moz-transform:translate(-50%, -50%);
    -webkit-transform:translate(-50%, -50%);
    -o-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
    width:35%
}
.allpro .rotating-circle{
    position:relative;
    border-radius:50%;
    width:100%;
    height:auto;
    padding:100% 0 0;
    margin:0;
    background:#fff url("../img/projects/allpro/striped-circle.svg") no-repeat center center;
    background-size:100% 100%;
    animation:CircleAnimation 30s infinite;
    -moz-animation:CircleAnimation 30s infinite;
    -webkit-animation:CircleAnimation 30s infinite;
    -o-animation:CircleAnimation 30s infinite;
    animation-direction:alternate;
    -webkit-animation-direction:alternate;
    -o-animation-direction:alternate;
    -moz-animation-direction:alternate;
    color:#144E9B
}
.allpro .rotating-circle .circle-content{
    animation:CircleAnimationRev 30s infinite;
    -moz-animation:CircleAnimationRev 30s infinite;
    -webkit-animation:CircleAnimationRev 30s infinite;
    -o-animation:CircleAnimationRev 30s infinite;
    animation-direction:alternate;
    -webkit-animation-direction:alternate;
    -o-animation-direction:alternate;
    -moz-animation-direction:alternate;
    position:absolute;
    width:100%;
    top:50%;
    left:0;
    transform:translate(0%, -50%);
    -moz-transform:translate(0%, -50%);
    -webkit-transform:translate(0%, -50%);
    -o-transform:translate(0%, -50%);
    -ms-transform:translate(0%, -50%);
    text-align:center
}
.allpro .rotating-circle .circle-content span{
    display:block;
    text-transform:uppercase;
    line-height:1em;
    font-weight:600
}
.allpro .rotating-circle .circle-content span:first-of-type{
    font-family:"Montserrat", "Lato", sans-serif;
    font-size:6em;
    font-weight:900
}
.allpro .rotating-circle .circle-content span:nth-of-type(2){
    font-size:1;
    line-height:1.2em;
    letter-spacing:.3em
}
.allpro .rotating-circle .circle-content span:nth-of-type(3){
    line-height:1.2em;
    font-size:.75em
}
@-webkit-keyframes CircleAnimation{
    0%{
        transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        -o-transform:rotate(0deg);
        -ms-transform:rotate(0deg)
    }
    to{
        transform:rotate(360deg);
        -moz-transform:rotate(360deg);
        -webkit-transform:rotate(360deg);
        -o-transform:rotate(360deg);
        -ms-transform:rotate(360deg)
    }
}
@keyframes CircleAnimation{
    0%{
        transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        -o-transform:rotate(0deg);
        -ms-transform:rotate(0deg)
    }
    to{
        transform:rotate(360deg);
        -moz-transform:rotate(360deg);
        -webkit-transform:rotate(360deg);
        -o-transform:rotate(360deg);
        -ms-transform:rotate(360deg)
    }
}
@-webkit-keyframes CircleAnimationRev{
    0%{
        transform:translate(0%, -50%) rotate(0deg);
        -moz-transform:translate(0%, -50%) rotate(0deg);
        -webkit-transform:translate(0%, -50%) rotate(0deg);
        -o-transform:translate(0%, -50%) rotate(0deg);
        -ms-transform:translate(0%, -50%) rotate(0deg)
    }
    to{
        transform:translate(0%, -50%) rotate(-360deg);
        -moz-transform:translate(0%, -50%) rotate(-360deg);
        -webkit-transform:translate(0%, -50%) rotate(-360deg);
        -o-transform:translate(0%, -50%) rotate(-360deg);
        -ms-transform:translate(0%, -50%) rotate(-360deg)
    }
}
@keyframes CircleAnimationRev{
    0%{
        transform:translate(0%, -50%) rotate(0deg);
        -moz-transform:translate(0%, -50%) rotate(0deg);
        -webkit-transform:translate(0%, -50%) rotate(0deg);
        -o-transform:translate(0%, -50%) rotate(0deg);
        -ms-transform:translate(0%, -50%) rotate(0deg)
    }
    to{
        transform:translate(0%, -50%) rotate(-360deg);
        -moz-transform:translate(0%, -50%) rotate(-360deg);
        -webkit-transform:translate(0%, -50%) rotate(-360deg);
        -o-transform:translate(0%, -50%) rotate(-360deg);
        -ms-transform:translate(0%, -50%) rotate(-360deg)
    }
}
.allpro #ux .chapter-icon{
    position:absolute;
    top:-100%;
    right:0
}
.allpro #design .chapter-icon{
    margin-bottom:4em
}
.allpro #design .design-multi-preview .img-wrap .img-fifth,.allpro #design .design-multi-preview .img-wrap .img-fourth,.allpro #design .design-multi-preview .img-wrap .img-third{
    top:0
}
.allpro #design .design-multi-preview .img-wrap .img-second{
    width:9%;
    top:10%;
    left:50%
}
.allpro .light-bg{
    background-color:#EBF6F9
}
.allpro .design-mobile .img-fourth,.allpro .design-mobile .img-third{
    top:0
}
.allpro .design-mobile .img-second{
    width:30%;
    top:0;
    left:55%
}
.allpro .carousel-wrap{
    position:relative
}
.allpro .carousel-wrap:before{
    content:"";
    position:absolute;
    top:65%;
    left:0;
    right:0;
    bottom:0;
    background-color:#272E36
}
.allpro #development{
    background-color:#272E36
}
.allpro #development .chapter-icon{
    top:-95%
}
.allpro #development h2{
    color:#fff
}
.allpro #development h2 span{
    color:#F9EB21
}
.allpro .next-project h2 span{
    color:#fff!important
}
.gts{
    position:relative;
    color:#171817
}
.gts:before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background-color:#F3F2F7;
    z-index:-1
}
.gts .live-link a{
    color:#171817
}
.gts .live-link a:after{
    background:url("../img/projects/gts/img-arrow.svg") no-repeat;
    background-size:70% 70%;
    background-position:center center
}
.gts .live-link a span{
    background-color:#171817;
    opacity:.25
}
.gts .project-heading .scroll-line span{
    background-color:#86c635
}
.gts .slidenav:before{
    background-color:#171817
}
.gts .link-mask i{
    color:#86c635;
    font-style:normal
}
.gts .live-link a:before{
    background-color:#171817
}
.gts .text-link{
    color:#86c635
}
.gts .text-link:before{
    background-color:#86c635
}
.gts .logo{
    background-color:#86c635
}
.gts .contact-icon{
    background-color:#86c635
}
.gts h1 span,.gts h2 span,.gts h3 span,.gts h4 span{
    color:#86c635;
    font-style:normal
}
.gts .btn-play:before{
    background-color:#86c635
}
.gts .mc-chicken span{
    background-color:#171817
}
.gts .mc-chicken.opened span{
    background-color:#fff
}
.gts .shape-morph{
    top:25%;
    z-index:1;
    transform:translate(-50%, -50%);
    -moz-transform:translate(-50%, -50%);
    -webkit-transform:translate(-50%, -50%);
    -o-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
    right:-60%;
    width:90%;
    z-index:-1
}
.gts .shape-morph svg{
    fill:#86c635
}
.gts .project-heading{
    overflow:visible!important
}
.gts .project-heading:before{
    content:"";
    z-index:-1;
    position:absolute;
    height:100vh;
    top:50%;
    left:0;
    right:0;
    background:transparent url("../img/projects/gts/hero-img.jpg") no-repeat;
    background-size:cover;
    background-position:top left
}
.gts .paragraph-title{
    color:#171817
}
.gts .next-project h2 span{
    color:#fff!important
}
.gts .bg-green{
    margin-top:25vh;
    z-index:2555;
    color:#fff;
    background-color:#91cd3c
}
.gts .bg-green .paragraph-title{
    color:#fff
}
.gts .bg-green h2{
    color:#171817
}
.gts .bg-green h2 span{
    color:#fff
}
.gts #story .chapter-icon{
    margin:0 0 4em 2em
}
.gts .story-video-wrap{
    line-height:0
}
.gts .scrolling-text{
    opacity:1;
    top:0;
    color:#F3F2F7;
    z-index:-1;
    text-shadow:-2px 0 #E2E1E6, 0 2px #E2E1E6, 2px 0 #E2E1E6, 0 -2px #E2E1E6
}
.gts .boxes{
    margin-top:40vh
}
.gts .boxes .scrolling-text{
    left:-10%;
    top:15%
}
.gts .boxes .img-second,.gts .boxes .img-third{
    top:0;
    left:0
}
.gts #design .chapter-icon{
    position:absolute;
    top:-32%;
    left:74%
}
.gts .color .img-second{
    top:0
}
.gts .ipad-wrap{
    padding-bottom:70vh;
    background-color:#8dc74c
}
.gts .video-box{
    margin-top:-50vh
}
.gts .hiring-wrap{
    position:relative
}
.gts .hiring-wrap .scrolling-text{
    top:50%;
    left:-50%
}
.gts #development h2,.gts #development h3,.gts #development h4,.gts #development p{
    color:#171817
}
.gts #development h2 span{
    color:#86c635
}
.gts .next-project:before{
    color:#171817;
    opacity:.07
}
.gts .next-project h2 a{
    color:#171817
}
.gts .next-project h2 span{
    color:#171817!important
}
.hennessey{
    position:relative;
    color:#302D2E
}
.hennessey:before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background:transparent url("../img/projects/hennessey/main-bg.png") repeat-y top left;
    background-size:100%;
    z-index:-1
}
.hennessey .live-link a{
    color:#302D2E
}
.hennessey .live-link a:after{
    background:url("../img/projects/hennessey/img-arrow.svg") no-repeat;
    background-size:70% 70%;
    background-position:center center
}
.hennessey .live-link a span{
    background-color:#302D2E;
    opacity:.25
}
.hennessey .project-heading .scroll-line span{
    background-color:#38CEBB
}
.hennessey .slidenav:before{
    background-color:#302D2E
}
.hennessey .link-mask i{
    color:#38CEBB;
    font-style:normal
}
.hennessey .live-link a:before{
    background-color:#302D2E
}
.hennessey .text-link{
    color:#38CEBB
}
.hennessey .text-link:before{
    background-color:#38CEBB
}
.hennessey .logo{
    background-color:#38CEBB
}
.hennessey .contact-icon{
    background-color:#38CEBB
}
.hennessey h1 span,.hennessey h2 span,.hennessey h3 span,.hennessey h4 span{
    color:#38CEBB;
    font-style:normal
}
.hennessey .btn-play:before{
    background-color:#38CEBB
}
.hennessey .mc-chicken span{
    background-color:#302D2E
}
.hennessey .mc-chicken.opened span{
    background-color:#fff
}
.hennessey .shape-morph{
    top:25%;
    z-index:1;
    transform:translate(-50%, -50%);
    -moz-transform:translate(-50%, -50%);
    -webkit-transform:translate(-50%, -50%);
    -o-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
    right:-40%;
    width:90%;
    z-index:-1
}
.hennessey .shape-morph svg{
    fill:#38CEBB
}
.hennessey .project-heading .shape-morph{
    mix-blend-mode:multiply
}
.hennessey .scrolling-rectangle{
    position:absolute;
    top:20%;
    left:5%;
    width:30%;
    height:auto;
    padding-top:30%;
    border:20px solid #F6F2E9
}
.hennessey .paragraph-title{
    color:#302D2E
}
.hennessey .next-project:before{
    color:#fff;
    opacity:.07
}
.hennessey .next-project h2 a{
    color:#fff
}
.hennessey #story .chapter-icon{
    position:absolute;
    top:-35%;
    left:50%
}
.hennessey #story .img-second{
    top:40%;
    width:25%;
    right:20%
}
.hennessey #ux .chapter-icon{
    position:absolute;
    top:-80%;
    left:40%
}
.hennessey .ui-wrap{
    position:relative
}
.hennessey .ui-wrap .scrolling-rectangle{
    top:35vh;
    left:0%;
    width:20%;
    height:auto;
    padding-top:20%
}
.hennessey .stamp .img-first{
    width:32%;
    top:35vh;
    left:5%
}
.hennessey .letterhead{
    margin-bottom:-50vh;
    z-index:5555
}
.hennessey .bg-dark{
    z-index:-1;
    overflow:visible;
    position:relative;
    background-color:#302D2E;
    padding-bottom:20vh
}
.hennessey .bg-dark .img-first{
    top:75vh
}
.hennessey .bg-dark .img-third{
    margin-top:0vh
}
.hennessey .bg-dark .scrolling-rectangle{
    top:50vh;
    left:-10%;
    width:25%;
    padding-top:25%;
    border-color:rgba(255, 255, 255, 0.1)
}
.hennessey .final-prev{
    margin-top:-60vh
}
.hennessey #development{
    background-color:#302D2E
}
.hennessey #development h4,.hennessey #development p{
    color:#fff
}
@media only screen and (max-width:768px){
    .project .carousel-wrap{
        margin-top:-4em
    }
    .project .carousel-wrap .lSAction>a{
        width:10%;
        height:auto;
        padding-top:10%
    }
    .project .project-heading .scroll-line{
        display:none
    }
    .project .project-heading .shape-morph{
        width:150%;
        left:70%;
        top:40vh
    }
    .project .project-heading .live-link a:before{
        display:none
    }
    .project .project-heading .live-link a{
        text-decoration:underline
    }
    .project .details{
        font-size:.7em;
        left:30vw;
        top:70vh
    }
    .project .count{
        font-size:.7em;
        left:30vw
    }
    .project .project-h2 h2{
        font-size:10vw;
        margin:2rem 0 0rem
    }
    .project .title-caption{
        font-size:16px
    }
    .project .live-link{
        top:90vh;
        width:60vw;
        left:30vw
    }
    .project .live-link a:hover span,.project .live-link a span{
        transform:translate(0%, -50%) scale(0.01, 1);
        -moz-transform:translate(0%, -50%) scale(0.01, 1);
        -webkit-transform:translate(0%, -50%) scale(0.01, 1);
        -o-transform:translate(0%, -50%) scale(0.01, 1);
        -ms-transform:translate(0%, -50%) scale(0.01, 1)
    }
    .project .live-link a:before,.project .live-link a:hover:before{
        right:30%;
        transform:translate(0%, -50%) scale(1, 1);
        -moz-transform:translate(0%, -50%) scale(1, 1);
        -webkit-transform:translate(0%, -50%) scale(1, 1);
        -o-transform:translate(0%, -50%) scale(1, 1);
        -ms-transform:translate(0%, -50%) scale(1, 1)
    }
    .project .live-link a:after,.project .live-link a:hover:after{
        right:30%;
        transform:translate(0%, -50%) scale(0.5);
        -moz-transform:translate(0%, -50%) scale(0.5);
        -webkit-transform:translate(0%, -50%) scale(0.5);
        -o-transform:translate(0%, -50%) scale(0.5);
        -ms-transform:translate(0%, -50%) scale(0.5)
    }
    .project .chapter-desc{
        padding-top:1em
    }
    .project .chapter-icon{
        width:15vw
    }
    .project #development .chapter-icon{
        top:-100%;
        width:17vw
    }
    .project .btn-play{
        width:25%;
        height:25%;
        padding-top:25%
    }
    .project .btn-play:after{
        background-size:25%
    }
    .project .photoshoot .rotating-circle-wrap{
        top:45%;
        width:40%
    }
    .project .photoshoot .rotating-circle{
        animation:none;
        -moz-animation:none;
        -webkit-animation:none;
        -o-animation:none
    }
    .project .photoshoot .circle-content{
        animation:none;
        -moz-animation:none;
        -webkit-animation:none;
        -o-animation:none
    }
    .project .photoshoot .circle-content span:first-of-type{
        font-size:3em!important
    }
    .project .photoshoot .circle-content span:nth-of-type(2){
        font-size:.9em
    }
    .project .photoshoot .circle-content span:nth-of-type(3){
        line-height:1.1em
    }
    .project .btn-close{
        top:0%;
        width:10%;
        height:10%;
        padding-top:10%
    }
    .project .btn-close:before{
        background-size:50%
    }
    .project .btn-close:after{
        display:none
    }
    .project .next-project .next-ico,.project .next-project a:hover .next-ico{
        transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        transform:translate(-50%, -50%);
        -moz-transform:translate(-50%, -50%);
        -webkit-transform:translate(-50%, -50%);
        -o-transform:translate(-50%, -50%);
        -ms-transform:translate(-50%, -50%);
        position:absolute;
        left:70%;
        top:135%;
        width:5%;
        z-index:10;
        opacity:1;
        height:auto
    }
    .project .next-project a:hover .shape-morph.shape-morph-bottom{
        transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        left:70%;
        top:150%;
        width:80%;
        z-index:1!important
    }
    .project .wrapped-heading h2{
        font-size:25vw;
        line-height:1em
    }
    .project .wrapped-heading h2 span{
        display:inline
    }
    .project #story .chapter-icon{
        position:absolute;
        top:-20%;
        right:10%
    }
    .project #ux .chapter-icon{
        top:-10%;
        left:70%
    }
    .project-description p{
        font-size:5vw
    }
    .next-project h2{
        font-size:2.5em
    }
    .project .lSSlideOuter .lSPager.lSpg>li a{
        margin:15px;
        z-index:99
    }
    #client p{
        font-size:16px
    }
    #client .quote{
        font-size:7vw
    }
    #demo .prototype{
        border-radius:20px;
        overflow:hidden;
        -webkit-box-shadow:0px 0px 0px 10px #231F20;
        -moz-box-shadow:0px 0px 0px 10px #231F20;
        box-shadow:0px 0px 0px 10px #231F20
    }
    #sales .sale-item p{
        margin-top:.5em;
        font-size:16px
    }
    #sales .sale-item div{
        font-size:12vw;
        line-height:1em
    }
    #sales .sale-item i{
        width:14px;
        margin:10px 0 0;
        height:14px
    }
    #awarded .project-h2 h2{
        margin-bottom:.5em
    }
    #awarded .award-list{
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-align:start;
        -ms-flex-align:start;
        align-items:flex-start;
        -webkit-box-pack:justify;
        -ms-flex-pack:justify;
        justify-content:space-between;
        -ms-flex-wrap:wrap;
        flex-wrap:wrap
    }
    #awarded .award-list .item{
        margin-top:1em;
        width:40%
    }
    #awarded .award-list .item span{
        display:block;
        font-size:1rem;
        line-height:1.5rem
    }
    #awarded .award-list .a-logo{
        width:80px
    }
    #p-services .relative-content img{
        top:7vh;
        right:-10%;
        width:55%
    }
    .helias .project-heading img{
        position:absolute
    }
    .helias .project-heading img:first-of-type{
        width:9%;
        top:15vh;
        left:20%
    }
    .helias .project-heading img:nth-of-type(2){
        width:10%;
        top:25vh;
        left:8%
    }
    .helias .project-heading img:nth-of-type(3){
        width:10%;
        top:45vh;
        left:23%
    }
    .helias .project-heading .shape-morph{
        width:150%;
        left:70%;
        top:40vh
    }
    .helias .project-heading .live-link a:before{
        display:none
    }
    .helias .project-heading .live-link a{
        text-decoration:underline
    }
    .helias #approach .relative-content img{
        top:10vh;
        right:-5%;
        width:55%
    }
    .helias #approach .img-scroll{
        top:10vh;
        right:10%;
        width:30%
    }
    .helias #challenge .relative-content img{
        left:auto;
        right:10%;
        top:-10vh;
        width:60%
    }
    .helias #challenge .img-wrap img:nth-of-type(2){
        top:10vh
    }
    .helias #challenge #blends .blends{
        -ms-flex-wrap:wrap;
        flex-wrap:wrap;
        -ms-flex-pack:distribute;
        justify-content:space-around
    }
    .helias #challenge #blends .blends div{
        width:25%;
        padding-bottom:10vh
    }
    .helias #features .distort img:nth-of-type(2){
        top:25vh;
        left:15%;
        width:9%
    }
    .helias #features .distort img:nth-of-type(3){
        top:11vh;
        left:7%;
        width:9%
    }
    .helias #features .videos img:first-of-type{
        top:30vh;
        right:-10%
    }
    .helias #features .videos img:nth-of-type(2){
        bottom:32vh;
        right:60%
    }
    .helias #features .basket img:first-of-type{
        top:15vh
    }
    .helias #features .mobile .mobile-screens{
        margin-top:6vh
    }
    .snooze .project-heading h1{
        left:20%
    }
    .snooze #approach .relative-content img{
        display:none
    }
    .snooze #approach .img-scroll{
        top:5vh;
        right:5%;
        width:45%
    }
    .snooze #challenge .relative-content img{
        top:9%;
        right:-5%;
        width:40%
    }
    .snooze #challenge .packaging-1{
        margin-top:0;
        padding-top:20vh
    }
    .snooze #challenge .packaging-1 .scrolling-text:first-of-type{
        top:10vh
    }
    .snooze #challenge .packaging-1 .scrolling-text:nth-of-type(2){
        top:20vh
    }
    .snooze #challenge .packaging-1 .scrolling-text:nth-of-type(3){
        top:30vh
    }
    .snooze #challenge .packaging-1 img{
        margin-top:0
    }
    .snooze #challenge .packaging-2{
        margin-top:20vh;
        padding-bottom:20vh
    }
    .snooze #challenge .packaging-2 .scrolling-text{
        color:#EFF4FF
    }
    .snooze #challenge .packaging-2 .scrolling-text:first-of-type{
        bottom:10vh
    }
    .snooze #challenge .packaging-2 .scrolling-text:nth-of-type(2){
        bottom:20vh
    }
    .snooze #website .relative-content img{
        top:10vh;
        left:73%;
        width:30%
    }
    .snooze #website #customers .relative-content img{
        top:0;
        left:80%;
        width:35%
    }
    .snooze #treatment .images:before{
        height:20vh
    }
    .snooze #treatment .images:after{
        height:20vh
    }
    .snooze #treatment .images img{
        position:relative;
        z-index:10
    }
    .snooze #treatment .images .cloud:first-of-type{
        display:none
    }
    .snooze #treatment .images .cloud:nth-of-type(2){
        display:none
    }
    .betches .project-heading figure{
        left:5%;
        width:15%
    }
    .betches #story .img-fourth{
        width:45%;
        left:50%;
        top:75%
    }
    .betches #ux .offset-top-neg{
        margin-top:1em
    }
    .betches .animated-bg{
        height:50vh
    }
    .betches .shape-morph{
        width:150%;
        right:-130%
    }
    .betches #design .chapter-desc figure{
        display:none
    }
    .betches #design .chapter-icon{
        top:-40%;
        left:45%
    }
    .betches .icons .scrolling-text{
        left:18%;
        top:50%;
        font-size:4em
    }
    .betches .web-sketch .sketch{
        margin-top:0em
    }
    .betches .video .img-third{
        top:50%
    }
    .betches .video .img-third{
        display:none
    }
    .betches .video .img-fourth{
        bottom:15%
    }
    .betches .video .scrolling-text{
        right:-10%
    }
    .betches .podcast .img-first{
        width:25%
    }
    .betches #development:before{
        height:30vh
    }
    .betches #development .chapter-icon{
        left:40%;
        top:-90%
    }
    .storyverse .shape-morph{
        width:150%;
        right:-70%
    }
    .storyverse #ux .chapter-icon{
        top:-50%;
        left:80%
    }
    .storyverse #design .chapter-icon{
        top:-60%;
        left:40%
    }
    .storyverse #design .wrapped-img{
        width:30%;
        left:70%;
        top:5em
    }
    .storyverse #development .chapter-icon{
        left:50%;
        top:-90%
    }
    .modernmd #story .img-wrap{
        display:block;
        height:auto;
        padding-bottom:6em
    }
    .modernmd #story .img-wrap .img-first{
        display:none
    }
    .modernmd #story .img-wrap .img-second{
        position:static;
        width:50%
    }
    .modernmd #story .img-wrap .img-third{
        width:60%;
        left:40%
    }
    .modernmd #story .img-wrap .img-fourth{
        width:20%;
        bottom:0
    }
    .modernmd #design .chapter-icon{
        position:absolute;
        left:70%;
        top:20vh
    }
    .modernmd #design>figure:last-child{
        margin-bottom:-20vh
    }
    .modernmd #development .chapter-icon{
        left:50%
    }
    .taylor .shape-morph{
        width:150%;
        right:-120%;
        top:50%
    }
    .taylor .gradient-box{
        height:50vh
    }
    .taylor #story .chapter-icon{
        top:-25%
    }
    .taylor #ux .chapter-icon{
        top:-90%;
        left:0
    }
    .taylor #design .design-color-wrap{
        position:static;
        width:100%;
        margin:2em
    }
    .taylor #design .envelopes{
        position:static
    }
    .taylor #design .brand{
        position:relative
    }
    .taylor #design .brand .grid-wrap:first-of-type{
        position:static
    }
    .taylor #design .letterhead{
        padding-top:0
    }
    .taylor #design .letterhead .img-second{
        top:-20%;
        right:10%;
        width:20%
    }
    .taylor #design .bag figure:first-of-type{
        position:absolute;
        top:20%;
        left:10%;
        width:20%
    }
    .taylor #design .carousel-wrap{
        margin-top:0em
    }
    .taylor #development .chapter-icon{
        left:75%
    }
    .taylor #development p{
        color:rgba(255, 255, 255, 0.6)
    }
    .cornerstone #ux{
        padding-top:0
    }
    .cornerstone #ux .chapter-icon{
        left:85%;
        top:-95%
    }
    .cornerstone #story .img-wrap{
        padding-top:3em
    }
    .cornerstone #story .img-first{
        top:0
    }
    .cornerstone #story .img-third{
        top:65%
    }
    .cornerstone #design .chapter-icon{
        position:absolute;
        top:-35%;
        right:0
    }
    .cornerstone #design .ui-1{
        height:auto;
        padding-bottom:0
    }
    .cornerstone #design .ui-1 .img-second{
        position:static;
        width:90%;
        margin:0 auto;
        margin-bottom:1em
    }
    .cornerstone #design .ui-1 .img-first,.cornerstone #design .ui-1 .img-sixth{
        display:none
    }
    .cornerstone #design .ui-1 .img-fifth{
        margin-top:3em;
        width:75%
    }
    .cornerstone #design .ui-2 .img-second{
        display:none
    }
    .cornerstone #design .website .img-third{
        display:block
    }
    .cornerstone .font-choice{
        padding:5em 0
    }
    .cornerstone .font-choice .img-wrap{
        display:none
    }
    .cornerstone .carousel-wrap{
        margin-top:0
    }
    .cornerstone .ui-3{
        margin-top:-4em
    }
    .cornerstone .ui-3 .wrapped-img{
        display:none
    }
    .cornerstone #development .chapter-icon{
        left:50%
    }
    .allpro .rotating-circle-wrap{
        top:50%;
        left:50%;
        width:50%
    }
    .allpro .rotating-circle .circle-content span:first-of-type{
        font-size:4em
    }
    .allpro .rotating-circle .circle-content span:nth-of-type(2){
        font-size:1em;
        letter-spacing:.1em
    }
    .allpro .rotating-circle .circle-content span:nth-of-type(3){
        font-size:.6em
    }
    .allpro .shape-morph{
        width:150%;
        right:-80%
    }
    .allpro .photoshoot .img-jump{
        margin-bottom:1em
    }
    .allpro #story .chapter-icon{
        top:-25%
    }
    .allpro #story .img-box{
        padding-top:0
    }
    .allpro #ux .chapter-icon{
        top:-75%;
        left:80%
    }
    .allpro #design{
        position:relative
    }
    .allpro #design .chapter-icon{
        position:absolute;
        top:7em;
        left:70%
    }
    .allpro .carousel-wrap{
        margin-top:0em
    }
    .allpro #development .chapter-icon{
        left:60%
    }
    .gts .shape-morph{
        top:40%;
        width:140%;
        right:-70%
    }
    .gts #story .chapter-icon{
        top:-20%
    }
    .gts .boxes{
        margin-top:4em
    }
    .gts .ipad-wrap{
        padding-bottom:9em
    }
    .gts .video-box{
        margin-top:-5em
    }
    .gts #development .chapter-icon{
        left:65%;
        top:-90%
    }
    .hennessey .shape-morph{
        top:40%;
        width:140%;
        right:-120%
    }
    .hennessey #story .chapter-icon{
        left:55%;
        top:-50%
    }
    .hennessey #story .img-wrap .scrolling-horizontal{
        position:absolute;
        top:-50%;
        width:50%;
        height:auto;
        padding-top:50%
    }
    .hennessey #story .img-wrap .scrolling-rectangle{
        width:100%;
        padding-top:100%;
        top:175%;
        left:-10%;
        z-index:-1;
        border-width:15px
    }
    .hennessey #story .img-wrap .img-second{
        width:50%;
        right:0;
        top:50%
    }
    .hennessey #ux .chapter-icon{
        top:-150%;
        left:50%
    }
    .hennessey #design{
        position:relative
    }
    .hennessey #design .chapter-icon{
        position:absolute;
        left:65%;
        top:10vh
    }
    .hennessey .ui-wrap .scrolling-rectangle{
        top:15vh
    }
    .hennessey .stamp .img-first{
        position:static;
        margin-bottom:-5em;
        width:50%
    }
    .hennessey .bg-dark{
        padding-bottom:30vh
    }
    .hennessey .bg-dark .img-first{
        top:20vh
    }
    .hennessey .bg-dark .scrolling-rectangle{
        top:10vh;
        left:-10%;
        width:25%;
        padding-top:25%;
        border-color:rgba(255, 255, 255, 0.1)
    }
    .hennessey .bg-dark .img-third{
        margin-top:0em
    }
    .hennessey .letterhead{
        margin-bottom:-20vh
    }
    .hennessey .final-prev{
        margin-top:-20vh
    }
    .hennessey #development .chapter-icon{
        left:55%;
        top:-100%
    }
}
.lSSlideOuter{
    overflow:hidden;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none
}
.lightSlider:after,.lightSlider:before{
    content:" ";
    display:table
}
.lightSlider{
    overflow:hidden;
    margin:0
}
.lSSlideWrapper{
    max-width:100%;
    overflow:hidden;
    position:relative
}
.lSSlideWrapper>.lightSlider:after{
    clear:both
}
.lSSlideWrapper .lSSlide{
    -webkit-transform:translate(0px, 0px);
    -ms-transform:translate(0px, 0px);
    transform:translate(0px, 0px);
    -webkit-transition:all 1s;
    -webkit-transition-property:-webkit-transform, height;
    -moz-transition-property:-moz-transform, height;
    -webkit-transition-property:height,-webkit-transform;
    transition-property:height,-webkit-transform;
    -o-transition-property:transform,height;
    transition-property:transform,height;
    transition-property:transform,height,-webkit-transform;
    -webkit-transition-duration:inherit!important;
    -o-transition-duration:inherit!important;
    transition-duration:inherit!important;
    -webkit-transition-timing-function:inherit!important;
    -o-transition-timing-function:inherit!important;
    transition-timing-function:inherit!important
}
.lSSlideWrapper .lSFade{
    position:relative
}
.lSSlideWrapper .lSFade>*{
    position:absolute!important;
    top:0;
    left:0;
    z-index:9;
    margin-right:0;
    width:100%
}
.lSSlideWrapper.usingCss .lSFade>*{
    opacity:0;
    -webkit-transition-delay:0s;
    -o-transition-delay:0s;
    transition-delay:0s;
    -webkit-transition-duration:inherit!important;
    -o-transition-duration:inherit!important;
    transition-duration:inherit!important;
    -webkit-transition-property:opacity;
    -o-transition-property:opacity;
    transition-property:opacity;
    -webkit-transition-timing-function:inherit!important;
    -o-transition-timing-function:inherit!important;
    transition-timing-function:inherit!important
}
.lSSlideWrapper .lSFade>.active{
    z-index:10
}
.lSSlideWrapper.usingCss .lSFade>.active{
    opacity:1
}
.lSSlideOuter .lSPager.lSpg{
    margin:0;
    padding:0;
    text-align:center;
    position:absolute;
    width:100%;
    left:0%;
    bottom:7%
}
.lSSlideOuter .lSPager.lSpg>li{
    cursor:pointer;
    display:inline-block;
    margin:0
}
.lSSlideOuter .lSPager.lSpg>li a{
    background-color:#fff;
    border-radius:50%;
    display:block;
    height:8px;
    overflow:visible;
    text-indent:-999em;
    width:8px;
    margin:20px;
    position:relative;
    z-index:99;
    -webkit-transition:all 0.5s linear 0s;
    -o-transition:all 0.5s linear 0s;
    transition:all 0.5s linear 0s
}
.lSSlideOuter .lSPager.lSpg>li a:before{
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    transform:translate(-50%, -50%);
    -moz-transform:translate(-50%, -50%);
    -webkit-transform:translate(-50%, -50%);
    -o-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    display:block;
    width:100%;
    height:100%;
    border-radius:50%;
    border:1px solid #fff
}
.lSSlideOuter .lSPager.lSpg>li.active a,.lSSlideOuter .lSPager.lSpg>li:hover a{
    background-color:#fff
}
.lSSlideOuter .lSPager.lSpg>li:hover a:before{
    width:400%;
    height:400%
}
.lSSlideOuter .lSPager.lSpg>li.active a:before{
    width:400%;
    height:400%
}
.lSSlideOuter .media{
    opacity:0.8
}
.lSSlideOuter .media.active{
    opacity:1
}
.lSSlideOuter .lSPager.lSGallery{
    list-style:none outside none;
    padding-left:0;
    margin:0;
    overflow:hidden;
    transform:translate3d(0px, 0px, 0px);
    -moz-transform:translate3d(0px, 0px, 0px);
    -ms-transform:translate3d(0px, 0px, 0px);
    -webkit-transform:translate3d(0px, 0px, 0px);
    -o-transform:translate3d(0px, 0px, 0px);
    -webkit-transition-property:-webkit-transform;
    -moz-transition-property:-moz-transform;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none
}
.lSSlideOuter .lSPager.lSGallery li{
    overflow:hidden;
    -webkit-transition:border-radius 0.12s linear 0s 0.35s linear 0s;
    -o-transition:border-radius 0.12s linear 0s 0.35s linear 0s;
    transition:border-radius 0.12s linear 0s 0.35s linear 0s
}
.lSSlideOuter .lSPager.lSGallery li.active,.lSSlideOuter .lSPager.lSGallery li:hover{
    border-radius:5px
}
.lSSlideOuter .lSPager.lSGallery img{
    display:block;
    height:auto;
    max-width:100%
}
.lSSlideOuter .lSPager.lSGallery:after,.lSSlideOuter .lSPager.lSGallery:before{
    content:" ";
    display:table
}
.lSSlideOuter .lSPager.lSGallery:after{
    clear:both
}
.lSAction>a{
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    display:block;
    width:4%;
    margin:.5%;
    padding:0;
    height:auto;
    padding-top:4%;
    top:50%;
    cursor:pointer;
    position:absolute;
    z-index:99;
    border-radius:50%;
    -webkit-box-shadow:0 10px 35px rgba(0, 0, 0, 0.2);
    box-shadow:0 10px 35px rgba(0, 0, 0, 0.2)
}
.lSAction>a:before{
    content:"";
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    transform:rotate(45deg) translate(-50%, -50%);
    -moz-transform:rotate(45deg) translate(-50%, -50%);
    -webkit-transform:rotate(45deg) translate(-50%, -50%);
    -o-transform:rotate(45deg) translate(-50%, -50%);
    -ms-transform:rotate(45deg) translate(-50%, -50%);
    -webkit-transform-origin:0% 0%;
    -ms-transform-origin:0% 0%;
    transform-origin:0% 0%;
    -webkit-backface-visibility:hidden;
    -moz-backface-visibility:hidden;
    backface-visibility:hidden;
    -webkit-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    transform-style:preserve-3d;
    display:block;
    position:absolute;
    width:5%;
    height:25%;
    top:42%;
    left:50%
}
.lSAction>a:after{
    content:"";
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    transform:rotate(135deg) translate(-50%, -50%);
    -moz-transform:rotate(135deg) translate(-50%, -50%);
    -webkit-transform:rotate(135deg) translate(-50%, -50%);
    -o-transform:rotate(135deg) translate(-50%, -50%);
    -ms-transform:rotate(135deg) translate(-50%, -50%);
    -webkit-backface-visibility:hidden;
    -moz-backface-visibility:hidden;
    backface-visibility:hidden;
    -webkit-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    transform-style:preserve-3d;
    -webkit-transform-origin:0% 0%;
    -ms-transform-origin:0% 0%;
    transform-origin:0% 0%;
    display:block;
    position:absolute;
    width:5%;
    height:25%;
    top:58%;
    left:50%
}
.lSAction>a:hover{
    margin:0%;
    padding:.5%;
    padding-top:4.5%
}
.lSAction>a:hover:before{
    transform:rotate(225deg) translate(-50%, -50%);
    -moz-transform:rotate(225deg) translate(-50%, -50%);
    -webkit-transform:rotate(225deg) translate(-50%, -50%);
    -o-transform:rotate(225deg) translate(-50%, -50%);
    -ms-transform:rotate(225deg) translate(-50%, -50%)
}
.lSAction>a:hover:after{
    transform:rotate(-45deg) translate(-50%, -50%);
    -moz-transform:rotate(-45deg) translate(-50%, -50%);
    -webkit-transform:rotate(-45deg) translate(-50%, -50%);
    -o-transform:rotate(-45deg) translate(-50%, -50%);
    -ms-transform:rotate(-45deg) translate(-50%, -50%)
}
.lSAction>.lSPrev{
    left:3%
}
.lSAction>.lSNext{
    right:3%
}
.lSAction>.lSNext:before{
    transform:rotate(-45deg) translate(-50%, -50%);
    -moz-transform:rotate(-45deg) translate(-50%, -50%);
    -webkit-transform:rotate(-45deg) translate(-50%, -50%);
    -o-transform:rotate(-45deg) translate(-50%, -50%);
    -ms-transform:rotate(-45deg) translate(-50%, -50%)
}
.lSAction>.lSNext:after{
    transform:rotate(-135deg) translate(-50%, -50%);
    -moz-transform:rotate(-135deg) translate(-50%, -50%);
    -webkit-transform:rotate(-135deg) translate(-50%, -50%);
    -o-transform:rotate(-135deg) translate(-50%, -50%);
    -ms-transform:rotate(-135deg) translate(-50%, -50%)
}
.lSAction>.lSNext:hover:before{
    transform:rotate(-225deg) translate(-50%, -50%);
    -moz-transform:rotate(-225deg) translate(-50%, -50%);
    -webkit-transform:rotate(-225deg) translate(-50%, -50%);
    -o-transform:rotate(-225deg) translate(-50%, -50%);
    -ms-transform:rotate(-225deg) translate(-50%, -50%)
}
.lSAction>.lSNext:hover:after{
    transform:rotate(45deg) translate(-50%, -50%);
    -moz-transform:rotate(45deg) translate(-50%, -50%);
    -webkit-transform:rotate(45deg) translate(-50%, -50%);
    -o-transform:rotate(45deg) translate(-50%, -50%);
    -ms-transform:rotate(45deg) translate(-50%, -50%)
}
.lSAction>a.disabled{
    pointer-events:none
}
.cS-hidden{
    height:1px;
    opacity:0;
    filter:alpha(opacity=0);
    overflow:hidden
}
.lSSlideOuter.lSrtl{
    direction:rtl
}
.lSSlideOuter .lightSlider,.lSSlideOuter .lSPager{
    padding-left:0;
    list-style:none outside none
}
.lSSlideOuter.lSrtl .lightSlider,.lSSlideOuter.lSrtl .lSPager{
    padding-right:0
}
.lSSlideOuter .lightSlider>*,.lSSlideOuter .lSGallery li{
    float:left
}
.lSSlideOuter.lSrtl .lightSlider>*,.lSSlideOuter.lSrtl .lSGallery li{
    float:right!important
}
.lSSlideOuter{
    position:relative
}
@-webkit-keyframes rightEnd{
    0%{
        left:0
    }
    50%{
        left:-15px
    }
    to{
        left:0
    }
}
@keyframes rightEnd{
    0%{
        left:0
    }
    50%{
        left:-15px
    }
    to{
        left:0
    }
}
@-webkit-keyframes topEnd{
    0%{
        top:0
    }
    50%{
        top:-15px
    }
    to{
        top:0
    }
}
@keyframes topEnd{
    0%{
        top:0
    }
    50%{
        top:-15px
    }
    to{
        top:0
    }
}
@-webkit-keyframes leftEnd{
    0%{
        left:0
    }
    50%{
        left:15px
    }
    to{
        left:0
    }
}
@keyframes leftEnd{
    0%{
        left:0
    }
    50%{
        left:15px
    }
    to{
        left:0
    }
}
@-webkit-keyframes bottomEnd{
    0%{
        bottom:0
    }
    50%{
        bottom:-15px
    }
    to{
        bottom:0
    }
}
@keyframes bottomEnd{
    0%{
        bottom:0
    }
    50%{
        bottom:-15px
    }
    to{
        bottom:0
    }
}
.lSSlideOuter .rightEnd{
    -webkit-animation:rightEnd 0.3s;
    animation:rightEnd 0.3s;
    position:relative
}
.lSSlideOuter .leftEnd{
    -webkit-animation:leftEnd 0.3s;
    animation:leftEnd 0.3s;
    position:relative
}
.lSSlideOuter.vertical .rightEnd{
    -webkit-animation:topEnd 0.3s;
    animation:topEnd 0.3s;
    position:relative
}
.lSSlideOuter.vertical .leftEnd{
    -webkit-animation:bottomEnd 0.3s;
    animation:bottomEnd 0.3s;
    position:relative
}
.lSSlideOuter.lSrtl .rightEnd{
    -webkit-animation:leftEnd 0.3s;
    animation:leftEnd 0.3s;
    position:relative
}
.lSSlideOuter.lSrtl .leftEnd{
    -webkit-animation:rightEnd 0.3s;
    animation:rightEnd 0.3s;
    position:relative
}
.lightSlider.lsGrab>*{
    cursor:-webkit-grab;
    cursor:-moz-grab;
    cursor:-o-grab;
    cursor:-ms-grab;
    cursor:grab
}
.lightSlider.lsGrabbing>*{
    cursor:move;
    cursor:-webkit-grabbing;
    cursor:-moz-grabbing;
    cursor:-o-grabbing;
    cursor:-ms-grabbing;
    cursor:grabbing
}
.js-form-response{
    position:fixed;
    transition:all 500ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 500ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 500ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 500ms cubic-bezier(0.77, 0, 0.175, 1);
    z-index:9999;
    overflow-x:scroll;
    left:0%;
    bottom:100%;
    width:100%;
    min-height:100vh;
    height:100%;
    opacity:0;
    background-color:#fff;
    text-align:center;
    padding:14vh 20vw 0;
    -webkit-box-sizing:border-box;
    box-sizing:border-box
}
.js-form-response h2{
    font-size:7vw;
    margin:0 0 .5em
}
.js-form-response h6{
    font-family:"Lato", sans-serif;
    font-size:.7em;
    margin:5em 0 2em
}
.js-form-response p{
    width:65%;
    margin:0 auto 2em
}
.js-form-response a.back-home{
    font-size:.65em;
    letter-spacing:.1em;
    padding:1.5em 2em;
    border-radius:5px;
    background-color:#D6372E;
    color:#fff
}
.js-form-response .social{
    width:100%;
    margin:1em auto 2em;
    padding:0;
    text-align:center
}
.js-form-response .social li{
    position:relative;
    list-style-type:none;
    display:inline-block;
    width:auto;
    text-align:center;
    line-height:.1em;
    margin:0 .25em
}
.js-form-response .social a{
    color:#fff;
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    width:80px;
    height:80px;
    overflow:hidden;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    display:inline-block;
    position:relative;
    border-radius:50%;
    background-color:#F2F0F0;
    border:5px solid transparent
}
.js-form-response .social a span{
    position:absolute;
    top:-100%
}
.js-form-response .social a img{
    width:100%;
    height:auto
}
.js-form-response.sent{
    -webkit-transition-delay:1.8s;
    -moz-transition-delay:1.8s;
    -o-transition-delay:1.8s;
    -ms-transition-delay:1.8s;
    transition-delay:1.8s;
    opacity:1;
    bottom:0%
}
.form-close{
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    cursor:pointer;
    display:block;
    z-index:5555;
    outline:none;
    width:40px;
    height:40px;
    background-color:transparent;
    position:fixed;
    top:8vh;
    right:5vw
}
.form-close:hover{
    transform:scale(0.85) rotate(90deg);
    -moz-transform:scale(0.85) rotate(90deg);
    -webkit-transform:scale(0.85) rotate(90deg);
    -o-transform:scale(0.85) rotate(90deg);
    -ms-transform:scale(0.85) rotate(90deg)
}
@media only screen and (max-width:64em){
    .js-form-response{
        padding:10vh 10vw 0
    }
    .js-form-response h2{
        font-size:2em;
        margin-bottom:.75em
    }
    .js-form-response p{
        width:100%;
        font-size:.8em;
        line-height:1.5em
    }
    .js-form-response .social li{
        margin:0 .35em
    }
    .js-form-response .social a{
        width:70px;
        height:70px
    }
    .form-close{
        width:30px!important;
        height:30px!important;
        top:4vh;
        right:4vw
    }
}
@media only screen and (max-width:48em){
    .form-close{
        top:2vh;
        right:3vw
    }
}
input{
    border:none;
    background-color:#F2F0F0;
    
    line-height:80px;
    padding-left:8%;
    margin:0;
    width:92%
}
button.form-btn{
    text-align:center;
    height:80px;
    line-height:80px;
    font-family:"Montserrat", "Lato", sans-serif;
    font-weight:600;
    border:none;
    background-color:#D6372E;
    color:#fff;
    padding:0px;
    font-size:.75em;
    margin:0;
    width:100%
}
.link{
    cursor:pointer
}
section.main-type{
    padding-bottom:5vh;
    background:transparent url("../img/form/bg-bottom.png") no-repeat bottom right;
    background-size:100% auto;
    display:none
}
section.main-type .offset-top-sm{
    padding-top:7.5vh!important
}
section.main-type .small{
    margin-bottom:2vh
}
#main-form h1,#main-form h2{
    font-size:2em!important
}
#main-form h3{
    font-size:.80em;
    margin-bottom:2em
}
#main-form .hidden{
    visibility:hidden;
    line-height:.1em;
    margin:0;
    padding:0;
    height:.1em
}
#main-form h6.section-caption{
    font-family:"Montserrat", "Open Sans", sans-serif;
    font-weight:600;
    font-size:.5em;
    letter-spacing:.15em;
    margin:1em 0 2em;
    text-transform:uppercase
}
.anchor-link{
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    text-transform:uppercase;
    font-size:.75em;
    text-align:center;
    display:block;
    cursor:pointer;
    margin:2em auto 0
}
.form-content{
    margin-top:7.5vh;
    height:92.5vh
}
.option-wrap{
    margin-top:8vh
}
.step-number{
    font-size:.75em;
    color:#BFBBBB;
    margin-bottom:2em
}
.step-number strong{
    color:#253069
}
.start-project{
    display:block;
    font-size:5em;
    color:#253069
}
.step{
    min-height:100vh;
    height:100%
}
.chat-step h2,.step-2 h2,.step-3 h2,.step-4 h2{
    margin-bottom:.5em
}
.form-wrap{
    margin-top:2vh
}
.form-icon{
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    background-color:transparent;
    background-image:url("../img/form/icon-selected.png");
    background-repeat:no-repeat;
    background-position:center center;
    background-size:0% 0%;
    position:relative;
    display:block;
    width:74%;
    margin:0 13% .75em;
    height:auto;
    padding-top:74%;
    border-radius:20%;
    border:1px solid #e4e7f5
}
.form-icon img{
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    position:absolute;
    display:block;
    width:90%;
    height:auto;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    -moz-transform:translate(-50%, -50%);
    -webkit-transform:translate(-50%, -50%);
    -o-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%)
}
.form-icon:hover img{
    transform:translate(-50%, -50%) scale(0.9);
    -moz-transform:translate(-50%, -50%) scale(0.9);
    -webkit-transform:translate(-50%, -50%) scale(0.9);
    -o-transform:translate(-50%, -50%) scale(0.9);
    -ms-transform:translate(-50%, -50%) scale(0.9)
}
.step-1 .form-icon img{
    width:30%
}
.js-form-link,.js-show-section{
    cursor:pointer
}
.js-form-link.selected .form-icon,.js-show-section.selected .form-icon{
    transform:scale(0.8);
    -moz-transform:scale(0.8);
    -webkit-transform:scale(0.8);
    -o-transform:scale(0.8);
    -ms-transform:scale(0.8);
    background-color:#3d94d1;
    background-size:35% 35%
}
.js-form-link.selected .form-icon img,.js-show-section.selected .form-icon img{
    opacity:0
}
.form-error{
    display:block;
    margin-top:-1em;
    text-align:left;
    font-size:.6em;
    color:#D6372E
}
.text-input{
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    width:100%;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    line-height:4em!important;
    height:auto;
    background-color:#EBECF1;
    margin:0 0 1em;
    font-size:.75em;
    font-family:"Lato", "Open Sans", sans-serif;
    color:#253069;
    padding:0 2em;
    border:1px solid #fff
}

.text-select{
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    width:100%;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    line-height:4em!important;
    height:auto;
    background-color:#EBECF1;
    margin:0 0 1em;
    font-size:.75em;
    font-family:"Lato", "Open Sans", sans-serif;
    color:#253069;
    padding:1.3em 2em;
    border:1px solid #fff;
    outline:none;
}


input::-webkit-calendar-picker-indicator {
    opacity:0;
}
datalist {
  position: absolute;
  background-color: white;
  border: 1px solid blue;
  border-radius: 0 0 5px 5px;
  border-top: none;
  font-family: sans-serif;
  width: 350px;
  padding: 5px;
  max-height: 10rem;
  overflow-y: auto
  
}
.text-datalist{
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    width:100%;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    line-height:4em!important;
    height:auto;
    background-color:#EBECF1;
    margin:0 0 1em;
    font-size:.75em;
    font-family:"Lato", "Open Sans", sans-serif;
    color:#253069;
    padding:0em 2em;
    border:1px solid #fff;
    outline:none;
}

.text-input ::-webkit-input-placeholder{
    color:#253069;
    opacity:1
}
.text-input :-ms-input-placeholder{
    color:#253069;
    opacity:1
}
.text-input ::-ms-input-placeholder{
    color:#253069;
    opacity:1
}
.text-input ::placeholder{
    color:#253069;
    opacity:1
}
.text-input :-ms-input-placeholder{
    color:#253069
}
textarea{
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    width:100%;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    background-color:#EBECF1;
    font-size:.75em;
    font-family:"Lato", "Open Sans", sans-serif;
    color:#253069;
    padding:2em;
    border:none
}
input:focus,textarea:focus{
    outline:none;
    background-color:#fff;
    border:1px solid #e4e7f5;
    transform:scale(1.025);
    -moz-transform:scale(1.025);
    -webkit-transform:scale(1.025);
    -o-transform:scale(1.025);
    -ms-transform:scale(1.025);
    -webkit-box-shadow:0 5px 15px 0 rgba(0, 0, 0, 0.06);
    box-shadow:0 5px 15px 0 rgba(0, 0, 0, 0.06);
    color:#253069
}
.submit-button-wrap{
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    margin-top:2em;
    position:relative;
    width:100%;
    height:auto;
    padding-top:100%;
    border-radius:50%;
    background-color:rgba(37, 48, 105, 0.15)
}
.submit-button-wrap .submit-button{
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    position:absolute;
    top:0;
    left:0;
    display:block;
    font-family:"Montserrat", "Open Sans", sans-serif;
    background-color:#3d94d1;
    color:#fff;
    padding:0;
    font-size:.7em;
    font-weight:600;
    letter-spacing:.15em;
    width:80%;
    margin:10%;
    height:80%;
    border-radius:50%
}
.submit-button-wrap:hover{
    transform:scale(0.8);
    -moz-transform:scale(0.8);
    -webkit-transform:scale(0.8);
    -o-transform:scale(0.8);
    -ms-transform:scale(0.8)
}
.submit-button-wrap:hover .submit-button{
    transform:scale(1.4);
    -moz-transform:scale(1.4);
    -webkit-transform:scale(1.4);
    -o-transform:scale(1.4);
    -ms-transform:scale(1.4)
}
.form-pager{
    display:none
}
p.section-caption{
    font-family:"Montserrat", "Open Sans", sans-serif;
    font-weight:600;
    font-size:.5em;
    letter-spacing:.15em;
    margin:3em 0 0;
    text-transform:uppercase
}
.slider-input{
    background-color:transparent;
    font-size:2.0833em;
    color:#253069;
    text-align:center;
    margin:0;
    padding:0;
    height:auto;
    line-height:1em;
    font-family:"Lato", "Open Sans", sans-serif;
    outline:none
}
.slider-input:focus{
    outline:none;
    border:none;
    transform:none;
    -moz-transform:none;
    -webkit-transform:none;
    -o-transform:none;
    -ms-transform:none;
    -webkit-box-shadow:none;
    box-shadow:none;
    color:#253069
}
/*! nouislider - 11.1.0 - 2018-04-02 11:18:13 */
.noUi-target,.noUi-target *{
    -webkit-touch-callout:none;
    -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
    -webkit-user-select:none;
    -ms-touch-action:none;
    touch-action:none;
    -ms-user-select:none;
    -moz-user-select:none;
    user-select:none;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box
}
.noUi-target{
    position:relative;
    direction:ltr
}
.noUi-base,.noUi-connects{
    width:100%;
    height:100%;
    position:relative;
    z-index:1
}
.noUi-connects{
    overflow:hidden;
    z-index:0
}
.noUi-connect,.noUi-origin{
    will-change:transform;
    position:absolute;
    z-index:1;
    top:0;
    left:0;
    height:100%;
    width:100%;
    -ms-transform-origin:0 0;
    -webkit-transform-origin:0 0;
    transform-origin:0 0
}
html:not([dir=rtl]) .noUi-horizontal .noUi-origin{
    left:auto;
    right:0
}
.noUi-vertical .noUi-origin{
    width:0
}
.noUi-horizontal .noUi-origin{
    height:0
}
.noUi-handle{
    position:absolute
}
.noUi-state-tap .noUi-connect,.noUi-state-tap .noUi-origin{
    -webkit-transition:transform 0.3s;
    -webkit-transition:-webkit-transform 0.3s;
    transition:-webkit-transform 0.3s;
    -o-transition:transform 0.3s;
    transition:transform 0.3s;
    transition:transform 0.3s, -webkit-transform 0.3s
}
.noUi-state-drag *{
    cursor:inherit!important
}
.noUi-horizontal{
    height:5px;
    margin-top:2.5em
}
.noUi-horizontal .noUi-handle{
    width:60px;
    height:60px;
    left:-30px;
    top:-30px;
    outline:none
}
.noUi-horizontal .noUi-handle:hover{
    background-color:#cd3128
}
.noUi-vertical{
    width:18px
}
.noUi-vertical .noUi-handle{
    width:28px;
    height:34px;
    left:-6px;
    top:-17px
}
html:not([dir=rtl]) .noUi-horizontal .noUi-handle{
    right:-17px;
    left:auto
}
.noUi-target{
    background:#e4e7f5;
    border-radius:4px
}
.noUi-connects{
    border-radius:3px
}
.noUi-draggable{
    cursor:ew-resize
}
.noUi-vertical .noUi-draggable{
    cursor:ns-resize
}
.noUi-handle{
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    border-radius:50%;
    background:#D6372E;
    cursor:pointer;
    -webkit-box-shadow:0 7px 18px 0px rgba(0, 0, 0, 0.15);
    box-shadow:0 7px 18px 0px rgba(0, 0, 0, 0.15)
}
.noUi-active{
    transform:scale(0.9);
    -moz-transform:scale(0.9);
    -webkit-transform:scale(0.9);
    -o-transform:scale(0.9);
    -ms-transform:scale(0.9);
    -webkit-box-shadow:0 5px 12px 0px rgba(0, 0, 0, 0.25);
    box-shadow:0 5px 12px 0px rgba(0, 0, 0, 0.25)
}
.noUi-handle:before{
    content:"";
    display:block;
    position:absolute;
    height:16px;
    width:16px;
    background:transparent url("../img/form/ui-slider-left.svg") no-repeat;
    background-size:contain;
    left:40%;
    top:50%;
    transform:translate(-50%, -50%);
    -moz-transform:translate(-50%, -50%);
    -webkit-transform:translate(-50%, -50%);
    -o-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%)
}
.noUi-handle:after{
    content:"";
    display:block;
    position:absolute;
    height:16px;
    width:16px;
    background:transparent url("../img/form/ui-slider-right.svg") no-repeat;
    background-size:contain;
    left:70%;
    top:50%;
    transform:translate(-50%, -50%);
    -moz-transform:translate(-50%, -50%);
    -webkit-transform:translate(-50%, -50%);
    -o-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%)
}
.noUi-vertical .noUi-handle:after,.noUi-vertical .noUi-handle:before{
    width:14px;
    height:1px;
    left:6px;
    top:14px
}
.noUi-vertical .noUi-handle:after{
    top:17px
}
[disabled] .noUi-connect{
    background:#B8B8B8
}
[disabled].noUi-handle,[disabled] .noUi-handle,[disabled].noUi-target{
    cursor:not-allowed
}
.noUi-pips,.noUi-pips *{
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box
}
.noUi-pips{
    position:absolute;
    color:#999
}
.noUi-value{
    position:absolute;
    white-space:nowrap;
    text-align:center
}
.noUi-value-sub{
    color:#ccc;
    font-size:10px
}
.noUi-marker{
    position:absolute;
    background:#CCC
}
.noUi-marker-sub{
    background:#AAA
}
.noUi-marker-large{
    background:#AAA
}
.noUi-pips-horizontal{
    padding:10px 0;
    height:80px;
    top:100%;
    left:0;
    width:100%
}
.noUi-value-horizontal{
    -webkit-transform:translate(-50%, 50%);
    -ms-transform:translate(-50%, 50%);
    transform:translate(-50%, 50%)
}
.noUi-rtl .noUi-value-horizontal{
    -webkit-transform:translate(50%, 50%);
    -ms-transform:translate(50%, 50%);
    transform:translate(50%, 50%)
}
.noUi-marker-horizontal.noUi-marker{
    margin-left:-1px;
    width:2px;
    height:5px
}
.noUi-marker-horizontal.noUi-marker-sub{
    height:10px
}
.noUi-marker-horizontal.noUi-marker-large{
    height:15px
}
.noUi-pips-vertical{
    padding:0 10px;
    height:100%;
    top:0;
    left:100%
}
.noUi-value-vertical{
    -webkit-transform:translate(0, -50%);
    -ms-transform:translate(0, -50%, 0);
    transform:translate(0, -50%, 0);
    padding-left:25px
}
.noUi-rtl .noUi-value-vertical{
    -webkit-transform:translate(0, 50%);
    -ms-transform:translate(0, 50%);
    transform:translate(0, 50%)
}
.noUi-marker-vertical.noUi-marker{
    width:5px;
    height:2px;
    margin-top:-1px
}
.noUi-marker-vertical.noUi-marker-sub{
    width:10px
}
.noUi-marker-vertical.noUi-marker-large{
    width:15px
}
.noUi-tooltip{
    display:block;
    position:absolute;
    border:1px solid #D9D9D9;
    border-radius:3px;
    background:#fff;
    color:#000;
    padding:5px;
    text-align:center;
    white-space:nowrap
}
.noUi-horizontal .noUi-tooltip{
    -webkit-transform:translate(-50%, 0);
    -ms-transform:translate(-50%, 0);
    transform:translate(-50%, 0);
    left:50%;
    bottom:120%
}
.noUi-vertical .noUi-tooltip{
    -webkit-transform:translate(0, -50%);
    -ms-transform:translate(0, -50%);
    transform:translate(0, -50%);
    top:50%;
    right:120%
}
@media only screen and (max-width:48em){
    .text-input{
        line-height:2em;
        height:auto
    }
    .slider-input{
        font-size:1.75em
    }
    .main-type .noUi-horizontal .noUi-handle{
        width:48px;
        height:48px;
        left:-24px;
        top:-24px;
        outline:none
    }
    .main-type .noUi-horizontal .noUi-handle:hover{
        background-color:#cd3128
    }
    .main-type .noUi-horizontal{
        margin-top:1.75em
    }
    .main-type .noUi-handle:before{
        height:13px;
        width:13px;
        left:40%
    }
    .main-type .noUi-handle:after{
        height:13px;
        width:13px;
        left:70%
    }
    .main-type p.section-caption{
        font-size:.6em;
        margin:2em 0 0
    }
}
@media only screen and (min-width:48em){
    #main-form h1,#main-form h2{
        font-size:2.75em!important
    }
    #main-form h3{
        margin-bottom:0em
    }
    #main-form .section-caption{
        font-size:.65em
    }
    .form-icon{
        margin:0 13% 1.25em
    }
}
@media only screen and (min-width:64em){
    #main-form h1,#main-form h2{
        font-size:3.75em!important
    }
    #main-form h3{
        font-size:.8333em;
        margin-bottom:0em
    }
    #main-form .section-caption{
        font-size:.5em
    }
    #main-form .step{
        margin-top:20vh
    }
    .form-icon{
        margin:0 13% 1.5em
    }
    .form-pager{
        display:block;
        position:fixed;
        top:50%;
        left:4%;
        transform:translate(0, -50%);
        -moz-transform:translate(0, -50%);
        -webkit-transform:translate(0, -50%);
        -o-transform:translate(0, -50%);
        -ms-transform:translate(0, -50%)
    }
    .form-pager li{
        position:relative;
        z-index:999;
        font-weight:400;
        transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        line-height:4em;
        display:block;
        margin:0;
        padding:0;
        width:3em;
        font-size:.5em
    }
    .form-pager li a{
        text-align:center;
        position:relative;
        display:block
    }
    .form-pager li a:before{
        transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        transform:translate(-50%, -50%) scale(0.1);
        -moz-transform:translate(-50%, -50%) scale(0.1);
        -webkit-transform:translate(-50%, -50%) scale(0.1);
        -o-transform:translate(-50%, -50%) scale(0.1);
        -ms-transform:translate(-50%, -50%) scale(0.1);
        transform-origin:50% 50%;
        -webkit-transform-origin:50% 50%;
        -ms-transform-origin:50% 50%;
        opacity:0;
        content:"";
        display:block;
        position:absolute;
        top:50%;
        left:50%;
        border-radius:50%;
        background-color:#3d94d1;
        z-index:-1
    }
    .form-pager li a.active{
        transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        color:#fff
    }
    .form-pager li a.active:before{
        transform:translate(-50%, -50%) scale(1);
        -moz-transform:translate(-50%, -50%) scale(1);
        -webkit-transform:translate(-50%, -50%) scale(1);
        -o-transform:translate(-50%, -50%) scale(1);
        -ms-transform:translate(-50%, -50%) scale(1);
        opacity:1;
        width:40px;
        height:40px
    }
}
#footer{
    background-color:#253069;
    width:100%;
    padding:120px 0
}
#footer .social{
    width:90%;
    margin:0 auto;
    padding:0 5%;
    max-width:1680px
}
#footer .social li{
    list-style-type:none;
    text-align:center;
    line-height:.1em
}
#footer .social a{
    color:#fff;
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    width:100%;
    height:auto;
    max-width:80px;
    display:inline-block;
    position:relative;
    border-radius:50%;
    overflow:hidden;
    background-color:#fff;
    margin-bottom:1.5em
}
#footer .social a span{
    position:absolute;
    top:-100%;
    left:-100%
}
#footer .social a img{
    width:100%;
    height:auto
}
#footer .footer-contact{
    padding-top:5em;
    font-size:.6em;
    text-align:center;
    font-weight:300;
    color:rgba(255, 255, 255, 0.6)
}
#footer .footer-contact a{
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    color:rgba(255, 255, 255, 0.6);
    position:relative
}
#footer .footer-contact a:before{
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transform-style:preserve-3d;
    -webkit-transform-style:preserve-3d;
    transform-style:preserve-3d;
    -webkit-transform-origin:0 50%;
    -ms-transform-origin:0 50%;
    transform-origin:0 50%;
    content:"";
    display:block;
    position:absolute;
    width:0%;
    height:2px;
    background-color:#fff;
    bottom:-0.35em;
    left:0
}
#footer .footer-contact a:hover{
    color:#fff
}
#footer .footer-contact a:hover:before{
    width:100%
}
#footer .copyright{
    text-align:center;
    font-weight:300;
    padding-top:.85em;
    font-size:.6em;
    color:rgba(255, 255, 255, 0.6)
}
@media only screen and (min-width:48em){
    .social a{
        margin-bottom:0
    }
}
.transPixelFix{
    -webkit-backface-visibility:hidden;
    -moz-backface-visibility:hidden;
    backface-visibility:hidden;
    -webkit-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    transform-style:preserve-3d
}
.CenterFix{
    transform:translate(-50%, -50%);
    -moz-transform:translate(-50%, -50%);
    -webkit-transform:translate(-50%, -50%);
    -o-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%)
}
.CenterFixY{
    transform:translate(-50%, 0%);
    -moz-transform:translate(-50%, 0%);
    -webkit-transform:translate(-50%, 0%);
    -o-transform:translate(-50%, 0%);
    -ms-transform:translate(-50%, 0%)
}
.BoxSizing{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{
    display:block
}
audio,canvas,video{
    display:inline-block
}
ul{
    margin:0;
    padding:0
}
audio:not([controls]){
    display:none;
    height:0
}
[hidden],template{
    display:none
}
html{
    font-family:sans-serif;
    -ms-text-size-adjust:100%;
    -webkit-text-size-adjust:100%
}
body{
    margin:0
}
a{
    background:transparent
}
a:focus{
    outline:thin dotted
}
a:active,a:hover{
    outline:0
}
h1{
    font-size:2em;
    margin:0.67em 0
}
abbr[title]{
    border-bottom:1px dotted
}
b,strong{
    font-weight:bold
}
dfn{
    font-style:italic
}
hr{
    -moz-box-sizing:content-box;
    -webkit-box-sizing:content-box;
    box-sizing:content-box;
    height:0
}
mark{
    background:#ff0;
    color:#000
}
code,kbd,pre,samp{
    font-family:monospace, serif;
    font-size:1em
}
pre{
    white-space:pre-wrap
}
q{
    quotes:"\201C" "\201D" "\2018" "\2019"
}
small{
    font-size:80%
}
sub,sup{
    font-size:75%;
    line-height:0;
    position:relative;
    vertical-align:baseline
}
sup{
    top:-0.5em
}
sub{
    bottom:-0.25em
}
img{
    border:0
}
svg:not(:root){
    overflow:hidden
}
figure{
    margin:0
}
fieldset{
    border:1px solid #c0c0c0;
    margin:0 2px;
    padding:0.35em 0.625em 0.75em
}
legend{
    border:0;
    padding:0
}
button,input,select,textarea{
    font-family:inherit;
    font-size:100%;
    margin:0
}
button,input{
    line-height:normal
}
button,select{
    text-transform:none
}
button,html input[type=button],input[type=reset],input[type=submit]{
    -webkit-appearance:button;
    cursor:pointer
}
button[disabled],html input[disabled]{
    cursor:default
}
input[type=checkbox],input[type=radio]{
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    padding:0
}
input[type=search]{
    -webkit-appearance:textfield;
    -moz-box-sizing:content-box;
    -webkit-box-sizing:content-box;
    box-sizing:content-box
}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{
    -webkit-appearance:none
}
button::-moz-focus-inner,input::-moz-focus-inner{
    border:0;
    padding:0
}
textarea{
    overflow:auto;
    vertical-align:top
}
table{
    border-collapse:collapse;
    border-spacing:0
}
.animated{
    -webkit-animation-duration:.5s;
    animation-duration:.5s;
    -webkit-animation-fill-mode:both;
    animation-fill-mode:both;
    -webkit-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    -o-transform-style:preserve-3d;
    transform-style:preserve-3d
}
@keyframes imgMatrix{
    0%{
        opacity:0;
        -webkit-transform:scale(0, 1) rotateX(10deg) rotateY(90deg) rotateZ(10deg) translateY(300px);
        transform:scale(0, 1) rotateX(10deg) rotateY(90deg) rotateZ(10deg) translateY(300px)
    }
    to{
        -webkit-transform:scale(1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateY(0);
        transform:scale(1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateY(0)
    }
}
@-webkit-keyframes imgMatrix{
    0%{
        opacity:0;
        -webkit-transform:scale(0, 1) rotateX(10deg) rotateY(90deg) rotateZ(10deg) translateY(300px);
        transform:scale(0, 1) rotateX(10deg) rotateY(90deg) rotateZ(10deg) translateY(300px)
    }
    to{
        -webkit-transform:scale(1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateY(0);
        transform:scale(1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateY(0)
    }
}
.imgMatrix{
    -webkit-animation-name:imgMatrix;
    animation-name:imgMatrix
}
@keyframes matrixWide{
    0%{
        opacity:0;
        -webkit-transform:scale(0.1, 1) rotateX(40deg) rotateY(0deg) rotateZ(9deg) translateY(150px);
        transform:scale(0.1, 1) rotateX(40deg) rotateY(0deg) rotateZ(9deg) translateY(150px)
    }
    to{
        opacity:1;
        -webkit-transform:scale(1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateY(0);
        transform:scale(1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateY(0)
    }
}
@-webkit-keyframes matrixWide{
    0%{
        opacity:0;
        -webkit-transform:scale(0.1, 1) rotateX(40deg) rotateY(0deg) rotateZ(9deg) translateY(150px);
        transform:scale(0.1, 1) rotateX(40deg) rotateY(0deg) rotateZ(9deg) translateY(150px)
    }
    to{
        opacity:1;
        -webkit-transform:scale(1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateY(0);
        transform:scale(1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateY(0)
    }
}
.matrixWide{
    -webkit-animation-name:matrixWide;
    animation-name:matrixWide
}
@keyframes textLeft{
    0%{
        opacity:0;
        -webkit-transform:scale(0.35, 0.25) rotateX(15deg) rotateZ(20deg) translateY(150px) translateX(-50px);
        transform:scale(0.35, 0.25) rotateX(15deg) rotateZ(20deg) translateY(150px) translateX(-50px)
    }
    to{
        opacity:1;
        -webkit-transform:scale(1, 1) rotateX(0deg) rotateZ(0deg) translateY(0) translateX(0);
        transform:scale(1, 1) rotateX(0deg) rotateZ(0deg) translateY(0) translateX(0)
    }
}
@-webkit-keyframes textLeft{
    0%{
        opacity:0;
        -webkit-transform:scale(0.35, 0.25) rotateX(15deg) rotateZ(20deg) translateY(150px) translateX(-50px);
        transform:scale(0.35, 0.25) rotateX(15deg) rotateZ(20deg) translateY(150px) translateX(-50px)
    }
    to{
        opacity:1;
        -webkit-transform:scale(1, 1) rotateX(0deg) rotateZ(0deg) translateY(0) translateX(0);
        transform:scale(1, 1) rotateX(0deg) rotateZ(0deg) translateY(0) translateX(0)
    }
}
.textLeft{
    -webkit-animation-name:textLeft;
    animation-name:textLeft
}
@keyframes fadeIn{
    0%{
        opacity:0
    }
    to{
        opacity:1
    }
}
@-webkit-keyframes fadeIn{
    0%{
        opacity:0
    }
    to{
        opacity:1
    }
}
.fadeIn{
    -webkit-animation-name:fadeIn;
    animation-name:fadeIn
}
@keyframes fadeInRight{
    0%{
        -webkit-transform:translateX(-300px);
        transform:translateX(-300px);
        opacity:0
    }
    to{
        -webkit-transform:translateX(0px);
        transform:translateX(0px);
        opacity:1
    }
}
@-webkit-keyframes fadeInRight{
    0%{
        -webkit-transform:translateX(-300px);
        transform:translateX(-300px);
        opacity:0
    }
    to{
        -webkit-transform:translateX(0px);
        transform:translateX(0px);
        opacity:1
    }
}
.fadeInRight{
    -webkit-animation-name:fadeInRight;
    animation-name:fadeInRight
}
@keyframes fadeInUp{
    0%{
        -webkit-transform:translateY(60px);
        transform:translateY(60px);
        opacity:0
    }
    to{
        -webkit-transform:translateY(0px);
        transform:translateY(0px);
        opacity:1
    }
}
@-webkit-keyframes fadeInUp{
    0%{
        -webkit-transform:translateY(60px);
        transform:translateY(60px);
        opacity:0
    }
    to{
        -webkit-transform:translateY(0px);
        transform:translateY(0px);
        opacity:1
    }
}
.fadeInUp{
    -webkit-animation-name:fadeInUp;
    animation-name:fadeInUp
}
@keyframes fadeInLeft{
    0%{
        -webkit-transform:translateX(300px);
        transform:translateX(300px);
        opacity:0
    }
    to{
        -webkit-transform:translateX(0px);
        transform:translateX(0px);
        opacity:1
    }
}
@-webkit-keyframes fadeInLeft{
    0%{
        -webkit-transform:translateX(300px);
        transform:translateX(300px);
        opacity:0
    }
    to{
        -webkit-transform:translateX(0px);
        transform:translateX(0px);
        opacity:1
    }
}
.fadeInLeft{
    -webkit-animation-name:fadeInLeft;
    animation-name:fadeInLeft
}
.container,.container-fluid{
    margin-right:auto;
    margin-left:auto
}
.container-fluid{
    padding-right:2rem;
    padding-left:2rem
}
.row{
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-flex:0;
    -ms-flex:0 1 auto;
    flex:0 1 auto;
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-direction:row;
    flex-direction:row;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    margin-right:-0.5rem;
    margin-left:-0.5rem
}
.row.reverse{
    -webkit-box-orient:horizontal;
    -webkit-box-direction:reverse;
    -ms-flex-direction:row-reverse;
    flex-direction:row-reverse
}
.col.reverse{
    -webkit-box-orient:vertical;
    -webkit-box-direction:reverse;
    -ms-flex-direction:column-reverse;
    flex-direction:column-reverse
}
.box{
    padding-bottom:45px
}
.offset-top{
    padding-top:120px
}
.offset-bottom{
    padding-bottom:120px
}
.offset-bottom-huge{
    padding-bottom:30vh
}
.offset-both{
    padding:120px 0
}
.offset-top-md{
    padding-top:90px
}
.offset-bottom-md{
    padding-bottom:90px
}
.offset-both-md{
    padding:90px 0
}
.offset-top-sm{
    padding-top:60px
}
.offset-bottom-sm{
    padding-bottom:60px
}
.offset-both-sm{
    padding:60px 0
}
.col-xs,.col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-offset-0,.col-xs-offset-1,.col-xs-offset-2,.col-xs-offset-3,.col-xs-offset-4,.col-xs-offset-5,.col-xs-offset-6,.col-xs-offset-7,.col-xs-offset-8,.col-xs-offset-9,.col-xs-offset-10,.col-xs-offset-11,.col-xs-offset-12{
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    -webkit-box-flex:0;
    -ms-flex:0 0 auto;
    flex:0 0 auto;
    padding-right:0.5rem;
    padding-left:0.5rem
}
.col-xs{
    -webkit-box-flex:1;
    -ms-flex-positive:1;
    flex-grow:1;
    -ms-flex-preferred-size:0;
    flex-basis:0;
    max-width:100%
}
.col-xs-1{
    -ms-flex-preferred-size:8.33333333%;
    flex-basis:8.33333333%;
    max-width:8.33333333%
}
.col-xs-2{
    -ms-flex-preferred-size:16.66666667%;
    flex-basis:16.66666667%;
    max-width:16.66666667%
}
.col-xs-3{
    -ms-flex-preferred-size:25%;
    flex-basis:25%;
    max-width:25%
}
.col-xs-4{
    -ms-flex-preferred-size:33.33333333%;
    flex-basis:33.33333333%;
    max-width:33.33333333%
}
.col-xs-5{
    -ms-flex-preferred-size:41.66666667%;
    flex-basis:41.66666667%;
    max-width:41.66666667%
}
.col-xs-6{
    -ms-flex-preferred-size:50%;
    flex-basis:50%;
    max-width:50%
}
.col-xs-7{
    -ms-flex-preferred-size:58.33333333%;
    flex-basis:58.33333333%;
    max-width:58.33333333%
}
.col-xs-8{
    -ms-flex-preferred-size:66.66666667%;
    flex-basis:66.66666667%;
    max-width:66.66666667%
}
.col-xs-9{
    -ms-flex-preferred-size:75%;
    flex-basis:75%;
    max-width:75%
}
.col-xs-10{
    -ms-flex-preferred-size:83.33333333%;
    flex-basis:83.33333333%;
    max-width:83.33333333%
}
.col-xs-11{
    -ms-flex-preferred-size:91.66666667%;
    flex-basis:91.66666667%;
    max-width:91.66666667%
}
.col-xs-12{
    -ms-flex-preferred-size:100%;
    flex-basis:100%;
    max-width:100%
}
.col-xs-offset-0{
    margin-left:0
}
.col-xs-offset-1{
    margin-left:8.33333333%
}
.col-xs-offset-2{
    margin-left:16.66666667%
}
.col-xs-offset-3{
    margin-left:25%
}
.col-xs-offset-4{
    margin-left:33.33333333%
}
.col-xs-offset-5{
    margin-left:41.66666667%
}
.col-xs-offset-6{
    margin-left:50%
}
.col-xs-offset-7{
    margin-left:58.33333333%
}
.col-xs-offset-8{
    margin-left:66.66666667%
}
.col-xs-offset-9{
    margin-left:75%
}
.col-xs-offset-10{
    margin-left:83.33333333%
}
.col-xs-offset-11{
    margin-left:91.66666667%
}
.start-xs{
    -webkit-box-pack:start;
    -ms-flex-pack:start;
    justify-content:flex-start;
    text-align:start
}
.center-xs{
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    text-align:center
}
.end-xs{
    -webkit-box-pack:end;
    -ms-flex-pack:end;
    justify-content:flex-end;
    text-align:end
}
.top-xs{
    -webkit-box-align:start;
    -ms-flex-align:start;
    align-items:flex-start
}
.middle-xs{
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center
}
.bottom-xs{
    -webkit-box-align:end;
    -ms-flex-align:end;
    align-items:flex-end
}
.around-xs{
    -ms-flex-pack:distribute;
    justify-content:space-around
}
.between-xs{
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between
}
.first-xs{
    -webkit-box-ordinal-group:0;
    -ms-flex-order:-1;
    order:-1
}
.last-xs{
    -webkit-box-ordinal-group:2;
    -ms-flex-order:1;
    order:1
}
@media only screen and (min-width:48em){
    .container{
        width:49rem
    }
    .col-sm,.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-offset-0,.col-sm-offset-1,.col-sm-offset-2,.col-sm-offset-3,.col-sm-offset-4,.col-sm-offset-5,.col-sm-offset-6,.col-sm-offset-7,.col-sm-offset-8,.col-sm-offset-9,.col-sm-offset-10,.col-sm-offset-11,.col-sm-offset-12{
        -webkit-box-sizing:border-box;
        box-sizing:border-box;
        -webkit-box-flex:0;
        -ms-flex:0 0 auto;
        flex:0 0 auto;
        padding-right:0.5rem;
        padding-left:0.5rem
    }
    .box{
        padding-bottom:60px
    }
    .offset-top{
        padding-top:120px
    }
    .offset-bottom{
        padding-bottom:120px
    }
    .offset-both{
        padding:120px 0
    }
    .offset-top-md{
        padding-top:100px
    }
    .offset-bottom-md{
        padding-bottom:100px
    }
    .offset-both-md{
        padding:100px 0
    }
    .offset-top-sm{
        padding-top:80px
    }
    .offset-bottom-sm{
        padding-bottom:80px
    }
    .offset-both-sm{
        padding:80px 0
    }
    .col-sm{
        -webkit-box-flex:1;
        -ms-flex-positive:1;
        flex-grow:1;
        -ms-flex-preferred-size:0;
        flex-basis:0;
        max-width:100%
    }
    .col-sm-1{
        -ms-flex-preferred-size:8.33333333%;
        flex-basis:8.33333333%;
        max-width:8.33333333%
    }
    .col-sm-2{
        -ms-flex-preferred-size:16.66666667%;
        flex-basis:16.66666667%;
        max-width:16.66666667%
    }
    .col-sm-3{
        -ms-flex-preferred-size:25%;
        flex-basis:25%;
        max-width:25%
    }
    .col-sm-4{
        -ms-flex-preferred-size:33.33333333%;
        flex-basis:33.33333333%;
        max-width:33.33333333%
    }
    .col-sm-5{
        -ms-flex-preferred-size:41.66666667%;
        flex-basis:41.66666667%;
        max-width:41.66666667%
    }
    .col-sm-6{
        -ms-flex-preferred-size:50%;
        flex-basis:50%;
        max-width:50%
    }
    .col-sm-7{
        -ms-flex-preferred-size:58.33333333%;
        flex-basis:58.33333333%;
        max-width:58.33333333%
    }
    .col-sm-8{
        -ms-flex-preferred-size:66.66666667%;
        flex-basis:66.66666667%;
        max-width:66.66666667%
    }
    .col-sm-9{
        -ms-flex-preferred-size:75%;
        flex-basis:75%;
        max-width:75%
    }
    .col-sm-10{
        -ms-flex-preferred-size:83.33333333%;
        flex-basis:83.33333333%;
        max-width:83.33333333%
    }
    .col-sm-11{
        -ms-flex-preferred-size:91.66666667%;
        flex-basis:91.66666667%;
        max-width:91.66666667%
    }
    .col-sm-12{
        -ms-flex-preferred-size:100%;
        flex-basis:100%;
        max-width:100%
    }
    .col-sm-offset-0{
        margin-left:0
    }
    .col-sm-offset-1{
        margin-left:8.33333333%
    }
    .col-sm-offset-2{
        margin-left:16.66666667%
    }
    .col-sm-offset-3{
        margin-left:25%
    }
    .col-sm-offset-4{
        margin-left:33.33333333%
    }
    .col-sm-offset-5{
        margin-left:41.66666667%
    }
    .col-sm-offset-6{
        margin-left:50%
    }
    .col-sm-offset-7{
        margin-left:58.33333333%
    }
    .col-sm-offset-8{
        margin-left:66.66666667%
    }
    .col-sm-offset-9{
        margin-left:75%
    }
    .col-sm-offset-10{
        margin-left:83.33333333%
    }
    .col-sm-offset-11{
        margin-left:91.66666667%
    }
    .start-sm{
        -webkit-box-pack:start;
        -ms-flex-pack:start;
        justify-content:flex-start;
        text-align:start
    }
    .center-sm{
        -webkit-box-pack:center;
        -ms-flex-pack:center;
        justify-content:center;
        text-align:center
    }
    .end-sm{
        -webkit-box-pack:end;
        -ms-flex-pack:end;
        justify-content:flex-end;
        text-align:end
    }
    .top-sm{
        -webkit-box-align:start;
        -ms-flex-align:start;
        align-items:flex-start
    }
    .middle-sm{
        -webkit-box-align:center;
        -ms-flex-align:center;
        align-items:center
    }
    .bottom-sm{
        -webkit-box-align:end;
        -ms-flex-align:end;
        align-items:flex-end
    }
    .around-sm{
        -ms-flex-pack:distribute;
        justify-content:space-around
    }
    .between-sm{
        -webkit-box-pack:justify;
        -ms-flex-pack:justify;
        justify-content:space-between
    }
    .first-sm{
        -webkit-box-ordinal-group:0;
        -ms-flex-order:-1;
        order:-1
    }
    .last-sm{
        -webkit-box-ordinal-group:2;
        -ms-flex-order:1;
        order:1
    }
}
@media only screen and (min-width:64em){
    .container{
        width:65rem
    }
    .col-md,.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,.col-md-offset-0,.col-md-offset-1,.col-md-offset-2,.col-md-offset-3,.col-md-offset-4,.col-md-offset-5,.col-md-offset-6,.col-md-offset-7,.col-md-offset-8,.col-md-offset-9,.col-md-offset-10,.col-md-offset-11,.col-md-offset-12{
        -webkit-box-sizing:border-box;
        box-sizing:border-box;
        -webkit-box-flex:0;
        -ms-flex:0 0 auto;
        flex:0 0 auto;
        padding-right:0.5rem;
        padding-left:0.5rem
    }
    .box{
        padding-bottom:90px
    }
    .offset-top{
        padding-top:180px
    }
    .offset-bottom{
        padding-bottom:180px
    }
    .offset-bottom-huge{
        padding-bottom:40vh
    }
    .offset-both{
        padding:180px 0
    }
    .offset-top-md{
        padding-top:150px
    }
    .offset-bottom-md{
        padding-bottom:150px
    }
    .offset-both-md{
        padding:50px 0
    }
    .offset-top-sm{
        padding-top:90px
    }
    .offset-bottom-sm{
        padding-bottom:90px
    }
    .offset-both-sm{
        padding:90px 0
    }
    .col-md{
        -webkit-box-flex:1;
        -ms-flex-positive:1;
        flex-grow:1;
        -ms-flex-preferred-size:0;
        flex-basis:0;
        max-width:100%
    }
    .col-md-1{
        -ms-flex-preferred-size:8.33333333%;
        flex-basis:8.33333333%;
        max-width:8.33333333%
    }
    .col-md-2{
        -ms-flex-preferred-size:16.66666667%;
        flex-basis:16.66666667%;
        max-width:16.66666667%
    }
    .col-md-3{
        -ms-flex-preferred-size:25%;
        flex-basis:25%;
        max-width:25%
    }
    .col-md-4{
        -ms-flex-preferred-size:33.33333333%;
        flex-basis:33.33333333%;
        max-width:33.33333333%
    }
    .col-md-5{
        -ms-flex-preferred-size:41.66666667%;
        flex-basis:41.66666667%;
        max-width:41.66666667%
    }
    .col-md-6{
        -ms-flex-preferred-size:50%;
        flex-basis:50%;
        max-width:50%
    }
    .col-md-7{
        -ms-flex-preferred-size:58.33333333%;
        flex-basis:58.33333333%;
        max-width:58.33333333%
    }
    .col-md-8{
        -ms-flex-preferred-size:66.66666667%;
        flex-basis:66.66666667%;
        max-width:66.66666667%
    }
    .col-md-9{
        -ms-flex-preferred-size:75%;
        flex-basis:75%;
        max-width:75%
    }
    .col-md-10{
        -ms-flex-preferred-size:83.33333333%;
        flex-basis:83.33333333%;
        max-width:83.33333333%
    }
    .col-md-11{
        -ms-flex-preferred-size:91.66666667%;
        flex-basis:91.66666667%;
        max-width:91.66666667%
    }
    .col-md-12{
        -ms-flex-preferred-size:100%;
        flex-basis:100%;
        max-width:100%
    }
    .col-md-offset-0{
        margin-left:0
    }
    .col-md-offset-1{
        margin-left:8.33333333%
    }
    .col-md-offset-2{
        margin-left:16.66666667%
    }
    .col-md-offset-3{
        margin-left:25%
    }
    .col-md-offset-4{
        margin-left:33.33333333%
    }
    .col-md-offset-5{
        margin-left:41.66666667%
    }
    .col-md-offset-6{
        margin-left:50%
    }
    .col-md-offset-7{
        margin-left:58.33333333%
    }
    .col-md-offset-8{
        margin-left:66.66666667%
    }
    .col-md-offset-9{
        margin-left:75%
    }
    .col-md-offset-10{
        margin-left:83.33333333%
    }
    .col-md-offset-11{
        margin-left:91.66666667%
    }
    .start-md{
        -webkit-box-pack:start;
        -ms-flex-pack:start;
        justify-content:flex-start;
        text-align:start
    }
    .center-md{
        -webkit-box-pack:center;
        -ms-flex-pack:center;
        justify-content:center;
        text-align:center
    }
    .end-md{
        -webkit-box-pack:end;
        -ms-flex-pack:end;
        justify-content:flex-end;
        text-align:end
    }
    .top-md{
        -webkit-box-align:start;
        -ms-flex-align:start;
        align-items:flex-start
    }
    .middle-md{
        -webkit-box-align:center;
        -ms-flex-align:center;
        align-items:center
    }
    .bottom-md{
        -webkit-box-align:end;
        -ms-flex-align:end;
        align-items:flex-end
    }
    .around-md{
        -ms-flex-pack:distribute;
        justify-content:space-around
    }
    .between-md{
        -webkit-box-pack:justify;
        -ms-flex-pack:justify;
        justify-content:space-between
    }
    .first-md{
        -webkit-box-ordinal-group:0;
        -ms-flex-order:-1;
        order:-1
    }
    .last-md{
        -webkit-box-ordinal-group:2;
        -ms-flex-order:1;
        order:1
    }
}
@media only screen and (min-width:75em){
    .container{
        width:76rem
    }
    .col-lg,.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-offset-0,.col-lg-offset-1,.col-lg-offset-2,.col-lg-offset-3,.col-lg-offset-4,.col-lg-offset-5,.col-lg-offset-6,.col-lg-offset-7,.col-lg-offset-8,.col-lg-offset-9,.col-lg-offset-10,.col-lg-offset-11,.col-lg-offset-12{
        -webkit-box-sizing:border-box;
        box-sizing:border-box;
        -webkit-box-flex:0;
        -ms-flex:0 0 auto;
        flex:0 0 auto;
        padding-right:0.5rem;
        padding-left:0.5rem
    }
    .box{
        padding-bottom:120px
    }
    .offset-top{
        padding-top:230px
    }
    .offset-bottom{
        padding-bottom:230px
    }
    .offset-bottom-huge{
        padding-bottom:50vh
    }
    .offset-both{
        padding:230px 0
    }
    .offset-top-md{
        padding-top:180px
    }
    .offset-bottom-md{
        padding-bottom:180px
    }
    .offset-both-md{
        padding:70px 0
    }
    .offset-top-sm{
        padding-top:120px
    }
    .offset-bottom-sm{
        padding-bottom:120px
    }
    .offset-both-sm{
        padding:120px 0
    }
    .col-lg{
        -webkit-box-flex:1;
        -ms-flex-positive:1;
        flex-grow:1;
        -ms-flex-preferred-size:0;
        flex-basis:0;
        max-width:100%
    }
    .col-lg-1{
        -ms-flex-preferred-size:8.33333333%;
        flex-basis:8.33333333%;
        max-width:8.33333333%
    }
    .col-lg-2{
        -ms-flex-preferred-size:16.66666667%;
        flex-basis:16.66666667%;
        max-width:16.66666667%
    }
    .col-lg-3{
        -ms-flex-preferred-size:25%;
        flex-basis:25%;
        max-width:25%
    }
    .col-lg-4{
        -ms-flex-preferred-size:33.33333333%;
        flex-basis:33.33333333%;
        max-width:33.33333333%
    }
    .col-lg-5{
        -ms-flex-preferred-size:41.66666667%;
        flex-basis:41.66666667%;
        max-width:41.66666667%
    }
    .col-lg-6{
        -ms-flex-preferred-size:50%;
        flex-basis:50%;
        max-width:50%
    }
    .col-lg-7{
        -ms-flex-preferred-size:58.33333333%;
        flex-basis:58.33333333%;
        max-width:58.33333333%
    }
    .col-lg-8{
        -ms-flex-preferred-size:66.66666667%;
        flex-basis:66.66666667%;
        max-width:66.66666667%
    }
    .col-lg-9{
        -ms-flex-preferred-size:75%;
        flex-basis:75%;
        max-width:75%
    }
    .col-lg-10{
        -ms-flex-preferred-size:83.33333333%;
        flex-basis:83.33333333%;
        max-width:83.33333333%
    }
    .col-lg-11{
        -ms-flex-preferred-size:91.66666667%;
        flex-basis:91.66666667%;
        max-width:91.66666667%
    }
    .col-lg-12{
        -ms-flex-preferred-size:100%;
        flex-basis:100%;
        max-width:100%
    }
    .col-lg-offset-0{
        margin-left:0
    }
    .col-lg-offset-1{
        margin-left:8.33333333%
    }
    .col-lg-offset-2{
        margin-left:16.66666667%
    }
    .col-lg-offset-3{
        margin-left:25%
    }
    .col-lg-offset-4{
        margin-left:33.33333333%
    }
    .col-lg-offset-5{
        margin-left:41.66666667%
    }
    .col-lg-offset-6{
        margin-left:50%
    }
    .col-lg-offset-7{
        margin-left:58.33333333%
    }
    .col-lg-offset-8{
        margin-left:66.66666667%
    }
    .col-lg-offset-9{
        margin-left:75%
    }
    .col-lg-offset-10{
        margin-left:83.33333333%
    }
    .col-lg-offset-11{
        margin-left:91.66666667%
    }
    .start-lg{
        -webkit-box-pack:start;
        -ms-flex-pack:start;
        justify-content:flex-start;
        text-align:start
    }
    .center-lg{
        -webkit-box-pack:center;
        -ms-flex-pack:center;
        justify-content:center;
        text-align:center
    }
    .end-lg{
        -webkit-box-pack:end;
        -ms-flex-pack:end;
        justify-content:flex-end;
        text-align:end
    }
    .top-lg{
        -webkit-box-align:start;
        -ms-flex-align:start;
        align-items:flex-start
    }
    .middle-lg{
        -webkit-box-align:center;
        -ms-flex-align:center;
        align-items:center
    }
    .bottom-lg{
        -webkit-box-align:end;
        -ms-flex-align:end;
        align-items:flex-end
    }
    .around-lg{
        -ms-flex-pack:distribute;
        justify-content:space-around
    }
    .between-lg{
        -webkit-box-pack:justify;
        -ms-flex-pack:justify;
        justify-content:space-between
    }
    .first-lg{
        -webkit-box-ordinal-group:0;
        -ms-flex-order:-1;
        order:-1
    }
    .last-lg{
        -webkit-box-ordinal-group:2;
        -ms-flex-order:1;
        order:1
    }
}
.ie-only{
    display:none
}
#canvas-wrap{
    position:fixed;
    top:0%;
    left:0%;
    right:0;
    bottom:0
}
body{
    font-family:"Lato", "Open Sans", sans-serif;
    font-size:1.25em;
    line-height:1.66em;
    color:#253069;
    position:relative;
    overflow-x:hidden
}
#main{
    overflow:hidden
}
h1,h2,h3,h4,h5,h6{
    font-family:"Montserrat", "Open Sans", sans-serif;
    font-weight:800;
    margin:0;
    line-height:1.1em
}
h1 b,h2 b,h3 b,h4 b,h5 b,h6 b{
    color:#D6372E
}
h2{
    font-size:5em
}
h3+p,h4+div,h4+p{
    margin-top:2.5em
}
p+p{
    margin-top:2.5em
}
address{
    font-style:normal;
    line-height:1.6em
}
.project-label{
    display:none;
    position:absolute;
    -ms-backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    top:90px;
    left:50%;
    transform:translate(-50%, -50%);
    -moz-transform:translate(-50%, -50%);
    -webkit-transform:translate(-50%, -50%);
    -o-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%)
}
.project-label h6{
    font-size:.5em;
    font-weight:600;
    letter-spacing:.2em
}
.project-label h6 span{
    font-weight:600!important
}
#gmap{
    -webkit-backface-visibility:hidden;
    -moz-backface-visibility:hidden;
    backface-visibility:hidden;
    -webkit-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    transform-style:preserve-3d;
    width:100%;
    height:90vh
}
a.text-link{
    display:inline-block;
    position:relative;
    padding-bottom:2px
}
a.text-link:before{
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transform-style:preserve-3d;
    -webkit-transform-style:preserve-3d;
    transform-style:preserve-3d;
    -webkit-transform-origin:0 50%;
    -ms-transform-origin:0 50%;
    transform-origin:0 50%;
    content:"";
    display:block;
    position:absolute;
    width:0%;
    height:2px;
    background-color:#253069;
    bottom:0;
    left:0
}
a.text-link:hover:before{
    width:100%
}
.scroll-line{
    position:absolute;
    height:90px;
    bottom:10%;
    left:0%
}
.scroll-line span:first-child{
    position:absolute;
    transform:translate(-50%, -50%);
    -moz-transform:translate(-50%, -50%);
    -webkit-transform:translate(-50%, -50%);
    -o-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
    animation:scrollLine 2s infinite;
    -moz-animation:scrollLine 2s infinite;
    -webkit-animation:scrollLine 2s infinite;
    -o-animation:scrollLine 2s infinite;
    bottom:20%;
    left:18%;
    display:block;
    width:2px;
    height:90px;
    background-color:#253069
}
.scroll-line span:nth-of-type(2){
    position:absolute;
    transform:translate(-50%, -50%);
    -moz-transform:translate(-50%, -50%);
    -webkit-transform:translate(-50%, -50%);
    -o-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
    animation:scrollLine-2 2s infinite;
    -moz-animation:scrollLine-2 2s infinite;
    -webkit-animation:scrollLine-2 2s infinite;
    -o-animation:scrollLine-2 2s infinite;
    bottom:20%;
    left:18%;
    display:block;
    width:2px;
    height:90px;
    background-color:#253069
}
@-webkit-keyframes scrollLine{
    0%{
        transform:scale(1, 0);
        -moz-transform:scale(1, 0);
        -webkit-transform:scale(1, 0);
        -o-transform:scale(1, 0);
        -ms-transform:scale(1, 0);
        -webkit-transform-origin:left top;
        transform-origin:left top
    }
    20%{
        transform:scale(1, 1);
        -moz-transform:scale(1, 1);
        -webkit-transform:scale(1, 1);
        -o-transform:scale(1, 1);
        -ms-transform:scale(1, 1);
        -webkit-transform-origin:left top;
        transform-origin:left top
    }
    20.1%{
        transform:scale(1, 1);
        -moz-transform:scale(1, 1);
        -webkit-transform:scale(1, 1);
        -o-transform:scale(1, 1);
        -ms-transform:scale(1, 1);
        -webkit-transform-origin:left bottom;
        transform-origin:left bottom
    }
    60%{
        transform:scale(1, 0);
        -moz-transform:scale(1, 0);
        -webkit-transform:scale(1, 0);
        -o-transform:scale(1, 0);
        -ms-transform:scale(1, 0);
        -webkit-transform-origin:left bottom;
        transform-origin:left bottom
    }
    to{
        transform:scale(1, 0);
        -moz-transform:scale(1, 0);
        -webkit-transform:scale(1, 0);
        -o-transform:scale(1, 0);
        -ms-transform:scale(1, 0);
        -webkit-transform-origin:left bottom;
        transform-origin:left bottom
    }
}
@keyframes scrollLine{
    0%{
        transform:scale(1, 0);
        -moz-transform:scale(1, 0);
        -webkit-transform:scale(1, 0);
        -o-transform:scale(1, 0);
        -ms-transform:scale(1, 0);
        -webkit-transform-origin:left top;
        transform-origin:left top
    }
    20%{
        transform:scale(1, 1);
        -moz-transform:scale(1, 1);
        -webkit-transform:scale(1, 1);
        -o-transform:scale(1, 1);
        -ms-transform:scale(1, 1);
        -webkit-transform-origin:left top;
        transform-origin:left top
    }
    20.1%{
        transform:scale(1, 1);
        -moz-transform:scale(1, 1);
        -webkit-transform:scale(1, 1);
        -o-transform:scale(1, 1);
        -ms-transform:scale(1, 1);
        -webkit-transform-origin:left bottom;
        transform-origin:left bottom
    }
    60%{
        transform:scale(1, 0);
        -moz-transform:scale(1, 0);
        -webkit-transform:scale(1, 0);
        -o-transform:scale(1, 0);
        -ms-transform:scale(1, 0);
        -webkit-transform-origin:left bottom;
        transform-origin:left bottom
    }
    to{
        transform:scale(1, 0);
        -moz-transform:scale(1, 0);
        -webkit-transform:scale(1, 0);
        -o-transform:scale(1, 0);
        -ms-transform:scale(1, 0);
        -webkit-transform-origin:left bottom;
        transform-origin:left bottom
    }
}
@-webkit-keyframes scrollLine-2{
    0%{
        transform:scale(1, 0);
        -moz-transform:scale(1, 0);
        -webkit-transform:scale(1, 0);
        -o-transform:scale(1, 0);
        -ms-transform:scale(1, 0);
        -webkit-transform-origin:left top;
        transform-origin:left top
    }
    40%{
        transform:scale(1, 0);
        -moz-transform:scale(1, 0);
        -webkit-transform:scale(1, 0);
        -o-transform:scale(1, 0);
        -ms-transform:scale(1, 0);
        -webkit-transform-origin:left top;
        transform-origin:left top
    }
    80%{
        transform:scale(1, 1);
        -moz-transform:scale(1, 1);
        -webkit-transform:scale(1, 1);
        -o-transform:scale(1, 1);
        -ms-transform:scale(1, 1);
        -webkit-transform-origin:left top;
        transform-origin:left top
    }
    80.1%{
        transform:scale(1, 1);
        -moz-transform:scale(1, 1);
        -webkit-transform:scale(1, 1);
        -o-transform:scale(1, 1);
        -ms-transform:scale(1, 1);
        -webkit-transform-origin:left bottom;
        transform-origin:left bottom
    }
    to{
        transform:scale(1, 0);
        -moz-transform:scale(1, 0);
        -webkit-transform:scale(1, 0);
        -o-transform:scale(1, 0);
        -ms-transform:scale(1, 0);
        -webkit-transform-origin:left bottom;
        transform-origin:left bottom
    }
}
@keyframes scrollLine-2{
    0%{
        transform:scale(1, 0);
        -moz-transform:scale(1, 0);
        -webkit-transform:scale(1, 0);
        -o-transform:scale(1, 0);
        -ms-transform:scale(1, 0);
        -webkit-transform-origin:left top;
        transform-origin:left top
    }
    40%{
        transform:scale(1, 0);
        -moz-transform:scale(1, 0);
        -webkit-transform:scale(1, 0);
        -o-transform:scale(1, 0);
        -ms-transform:scale(1, 0);
        -webkit-transform-origin:left top;
        transform-origin:left top
    }
    80%{
        transform:scale(1, 1);
        -moz-transform:scale(1, 1);
        -webkit-transform:scale(1, 1);
        -o-transform:scale(1, 1);
        -ms-transform:scale(1, 1);
        -webkit-transform-origin:left top;
        transform-origin:left top
    }
    80.1%{
        transform:scale(1, 1);
        -moz-transform:scale(1, 1);
        -webkit-transform:scale(1, 1);
        -o-transform:scale(1, 1);
        -ms-transform:scale(1, 1);
        -webkit-transform-origin:left bottom;
        transform-origin:left bottom
    }
    to{
        transform:scale(1, 0);
        -moz-transform:scale(1, 0);
        -webkit-transform:scale(1, 0);
        -o-transform:scale(1, 0);
        -ms-transform:scale(1, 0);
        -webkit-transform-origin:left bottom;
        transform-origin:left bottom
    }
}
.bs-button-wrap{
    display:inline-block;
    position:relative;
    margin-top:60px;
    margin-bottom: 55px;
}
.bs-button-wrap .circle{
    position:absolute;
    top:0;
    left:0;
    width:8px;
    height:8px;
    border-radius:50%;
    background-color:#374f9f;
    color:#fff
}
.contact-button-wrap{
    z-index:50
}
#contact .contact-button{
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    font-family:"Montserrat", "Open Sans", sans-serif;
    font-weight:600;
    font-size:1.35em;
    position:relative;
    text-indent:-9999px;
    line-height:0;
    display:block;
    border-radius:50%;
    width:60%;
    height:auto;
    padding-top:60%;
    margin:20%;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    background-color:#D6372E
}
#contact .contact-button:after{
    content:"" attr(data-linkName) "";
    position:absolute;
    text-transform:uppercase;
    text-indent:0px;
    line-height:1.3em;
    font-size:.75em;
    display:block;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    -moz-transform:translate(-50%, -50%);
    -webkit-transform:translate(-50%, -50%);
    -o-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
    color:#fff
}
#contact .contact-button:before{
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    z-index:-1;
    content:"";
    position:absolute;
    top:-15%;
    right:-15%;
    bottom:-15%;
    left:-15%;
    border-radius:50%;
    background-color:rgba(37, 48, 105, 0.1)
}
#contact .contact-button:hover{
    width:60%;
    height:auto;
    padding-top:60%;
    margin:20%
}
#contact .contact-button:hover:before{
    top:-15%;
    right:-15%;
    bottom:-15%;
    left:-15%
}
h3{
    font-size:2.083em
}
h4{
    font-weight:600
}
p{
    line-height:1.66em;
    margin:0
}
.cl-effect-5 a:focus span,.cl-effect-5 a:hover span{
    -webkit-transform:translateY(-100%);
    -moz-transform:translateY(-100%);
    -ms-transform:translateY(-100%);
    transform:translateY(-100%)
}
a{
    outline:0;
    color:#253069;
    text-decoration:none
}
a.bs-button{
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    font-size:.75em;
    line-height:4em;
    color:#fff;
    display:inline-block;
    font-family:"Montserrat", "Open Sans", sans-serif;
    padding:0 30px;
    font-weight:600;
    overflow:hidden;
    position:relative;
    background-color:#3d94d1
}
a.bs-button.btn-small{
    padding:0 20px;
    line-height:4em
}
a.bs-button span{
    position:relative;
    display:inline-block;
    -webkit-transition:-webkit-transform 0.3s;
    -moz-transition:-moz-transform 0.3s;
    transition:-webkit-transform 0.3s;
    -o-transition:transform 0.3s;
    transition:transform 0.3s;
    transition:transform 0.3s, -webkit-transform 0.3s
}
a.bs-button span:before{
    position:absolute;
    top:100%;
    content:attr(data-hover);
    font-weight:600;
    -webkit-transform:translate3d(0, 0, 0);
    -moz-transform:translate3d(0, 0, 0);
    transform:translate3d(0, 0, 0)
}
a.bs-button:focus span,a.bs-button:hover span{
    -webkit-transform:translateY(-100%);
    -moz-transform:translateY(-100%);
    -ms-transform:translateY(-100%);
    transform:translateY(-100%)
}
a.contact{
    background-color:transparent!important
}
::-moz-selection{
    background:rgba(214, 55, 46, 0.05);
    color:#D6372E
}
::selection{
    background:rgba(214, 55, 46, 0.05);
    color:#1a1545
}
::-moz-selection{
    background:rgba(214, 55, 46, 0.05);
    color:#D6372E
}
a:active,a:focus,a:hover{
    outline:0
}
ul li{
    list-style-type:none
}
figure{
    line-height:1em;
    margin:0;
    padding:0;
    position:relative
}
figure a{
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    display:block;
    line-height:0;
    background-color:#F2F0F0
}
img{
    width:100%
}
header .header-description{
    margin:2em 0 4em 0
}
.scene-element>.grid-wrap{
    padding-top:5vh
}
.wrapped-heading span{
    display:block
}
.main-heading{
    margin-top:2em;
    position:relative
}
.main-heading.studio{
    margin-top:0;
    height:100vh
}
.main-heading.studio .scroll-line{
    left:18%;
    bottom:10%
}
.main-heading.studio .shape-morph{
    top:50vh;
    left:5%;
    width:130%
}
.main-heading.studio h1{
    margin-top:15vh
}
.main-heading h1 span{
    display:inline-block;
    line-height:.85em
}
.main-heading span:first-child{
    display:inline;
    margin-right:-0.225em;
    padding:0
}
.main-heading h1{
    font-size:6em
}
.main-heading p{
    margin:2em 0 0
}
.suptitle{
    text-transform:uppercase;
    font-size:.6em;
    letter-spacing:.2em;
    font-family:"Montserrat", "Lato", sans-serif
}
.italic{
    font-style:italic
}
.small{
    font-size:.75em
}
.smaller{
    font-size:.65em
}
.big{
    font-size:1.5em;
    line-height:1.8em
}
.huge{
    font-family:"Montserrat", "Lato", sans-serif;
    font-weight:800;
    font-size:2em;
    line-height:1.6em
}
.center{
    text-align:center
}
.right{
    text-align:right
}
.left{
    text-align:left
}
.grid-wrap{
    width:76%;
    margin:0 auto;
    padding:0 12%
}
.svg-shape{
    position:absolute
}
.svg-shape.shape-static{
    position:static;
    width:100%;
    height:auto;
    padding:0 0 3em
}
#index-loader{
    position:fixed;
    display:block;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:9900;
    background-color:#fff
}
#index-loader .index-copy{
    position:absolute;
    top:50%;
    left:50%;
    width:80vw;
    -ms-transform-origin:0% 50%;
    -webkit-transform-origin:0% 50%;
    transform-origin:0% 50%;
    transform:translate(-50%, -50%);
    -moz-transform:translate(-50%, -50%);
    -webkit-transform:translate(-50%, -50%);
    -o-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%)
}
#index-loader .index-copy h2{
    color:#fff;
    text-align:center;
    line-height:1.5em;
    font-size:3vw!important
}
#index-loader .index-copy .letter{
    -webkit-transform-origin:0 100%;
    -ms-transform-origin:0 100%;
    transform-origin:0 100%;
    display:inline-block;
    color:#fff;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    opacity:0
}
#index-loader .index-copy .letter:nth-of-type(18){
    display:inline
}
#index-loader .index-copy .letter:nth-of-type(18):before{
    content:"";
    display:block
}
#index-loader .index-copy .letter:nth-of-type(38){
    display:inline
}
#index-loader .index-copy .letter:nth-of-type(38):before{
    content:"";
    display:block
}
#index-loader .index-logo{
    width:5%;
    opacity:0;
    display:block;
    position:absolute;
    top:30%;
    left:47.5%
}
#index-loader .loading-circle{
    transform:scale(0.1) translate(-50%, -50%);
    -moz-transform:scale(0.1) translate(-50%, -50%);
    -webkit-transform:scale(0.1) translate(-50%, -50%);
    -o-transform:scale(0.1) translate(-50%, -50%);
    -ms-transform:scale(0.1) translate(-50%, -50%);
    display:block;
    position:absolute;
    border-radius:50%;
    top:90%;
    left:50%;
    width:100%;
    height:auto;
    padding-top:100%;
    background-color:#3d94d1
}
#loader{
    position:absolute;
    z-index:9950;
    opacity:0
}
#loader .loader-logo{
    width:75%;
    position:fixed;
    display:none;
    text-align:center;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    -moz-transform:translate(-50%, -50%);
    -webkit-transform:translate(-50%, -50%);
    -o-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%)
}
#loader .loader-logo span{
    opacity:0;
    -webkit-backface-visibility:hidden;
    display:inline-block;
    width:8%;
    margin-right:-0.2rem
}
#loader .loader-logo span svg{
    -webkit-backface-visibility:hidden;
    -webkit-transform:scale(1.01) translateZ(0);
    transform:scale(1.01) translateZ(0);
    width:100%;
    height:auto
}
#loader .loader-logo span svg path{
    fill:#fff
}
#loader .loader-logo span:first-of-type{
    width:7.5%;
    margin-right:-0.05em
}
#loader .loader-logo span:nth-of-type(5){
    width:12.5%
}
#loader .loader-logo span:nth-of-type(5){
    width:12.5%
}
#loader .loader-logo span:nth-of-type(7){
    width:6%
}
#loader .loader-logo span:nth-of-type(8){
    width:6%
}
#loader .loader-logo span:nth-of-type(10) svg{
    margin-bottom:-0.35em
}
#loader .circle-first{
    transition:all 1250ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 1250ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 1250ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 1250ms cubic-bezier(0.77, 0, 0.175, 1);
    position:fixed;
    background-color:#3d94d1;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%) scale(0, 0);
    -moz-transform:translate(-50%, -50%) scale(0, 0);
    -webkit-transform:translate(-50%, -50%) scale(0, 0);
    -o-transform:translate(-50%, -50%) scale(0, 0);
    -ms-transform:translate(-50%, -50%) scale(0, 0);
    -ms-transform-origin:50% 50%;
    -webkit-transform-origin:50% 50%;
    transform-origin:50% 50%;
    -webkit-backface-visibility:hidden;
    width:130%;
    height:auto;
    padding-top:130%;
    border-radius:50%
}
#loader .circle-second{
    transition:all 1250ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 1250ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 1250ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 1250ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition-delay:0s;
    -moz-transition-delay:0s;
    -o-transition-delay:0s;
    -ms-transition-delay:0s;
    transition-delay:0s;
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%) scale(0, 0);
    -moz-transform:translate(-50%, -50%) scale(0, 0);
    -webkit-transform:translate(-50%, -50%) scale(0, 0);
    -o-transform:translate(-50%, -50%) scale(0, 0);
    -ms-transform:translate(-50%, -50%) scale(0, 0);
    -ms-transform-origin:50% 50%;
    -webkit-transform-origin:50% 50%;
    transform-origin:50% 50%;
    -webkit-backface-visibility:hidden;
    width:130%;
    padding-top:130%;
    height:auto;
    border-radius:50%;
    background-color:#fff
}
.loading #loader{
    opacity:1
}
.loading #loader .loader-logo{
    display:block
}
.loading #loader .circle-first{
    -webkit-transition-delay:0s;
    -moz-transition-delay:0s;
    -o-transition-delay:0s;
    -ms-transition-delay:0s;
    transition-delay:0s;
    transform:translate(-50%, -50%) scale(1, 1);
    -moz-transform:translate(-50%, -50%) scale(1, 1);
    -webkit-transform:translate(-50%, -50%) scale(1, 1);
    -o-transform:translate(-50%, -50%) scale(1, 1);
    -ms-transform:translate(-50%, -50%) scale(1, 1)
}
.loading #loader .circle-second{
    -webkit-transition-delay:1.7s;
    -moz-transition-delay:1.7s;
    -o-transition-delay:1.7s;
    -ms-transition-delay:1.7s;
    transition-delay:1.7s;
    transform:translate(-50%, -50%) scale(1, 1);
    -moz-transform:translate(-50%, -50%) scale(1, 1);
    -webkit-transform:translate(-50%, -50%) scale(1, 1);
    -o-transform:translate(-50%, -50%) scale(1, 1);
    -ms-transform:translate(-50%, -50%) scale(1, 1)
}
.shape-morph{
    width:140%;
    height:auto;
    transform:translate(0%, -50%);
    -moz-transform:translate(0%, -50%);
    -webkit-transform:translate(0%, -50%);
    -o-transform:translate(0%, -50%);
    -ms-transform:translate(0%, -50%);
    position:absolute;
    top:40%;
    right:-40%;
    z-index:-1
}
.shape-morph .scene{
    position:relative;
    width:100%;
    height:auto
}
.shape-morph svg{
    fill:none
}
.team .shape-morph{
    width:100%;
    height:100%;
    top:-10%;
    left:20%;
    z-index:-1
}
.team .shape-morph svg{
    fill:#D6372E
}
.studio .shape-morph .scene{
    fill:none
}
.funzone .shape-morph{
    width:80%;
    height:auto;
    top:40%;
    left:60%
}
#culture .shape-morph{
    width:70%;
    height:auto;
    top:40%;
    right:30%;
    z-index:-1;
    mix-blend-mode:normal
}
#approach{
}
#approach .svg-shape{
    top:25vh;
    right:10%;
    width:20%
}
#approach sup{
    display:none
}
#awards{
    margin-top:20vh;
    position:relative;
    background:#fff url("../img/studio/awards.png") no-repeat center bottom;
    background-size:cover;
    margin-bottom:20vh
}
#awards #awards-slider{
    margin-bottom:0;
    margin-top:5vh
}
#awards .svg-shape{
    display:none
}
#awards h2{
    font-size:3em
}
#awards h2+.row{
    margin-top:2.5em
}
#awards .swipe-gesture{
    line-height:0;
    position:relative;
    margin:0 auto;
    width:40vw
}
#awards .swipe-gesture span{
    text-align:center;
    animation:swipeLoop 3s infinite;
    -moz-animation:swipeLoop 3s infinite;
    -webkit-animation:swipeLoop 3s infinite;
    -o-animation:swipeLoop 3s infinite;
    border-radius:50%;
    position:absolute;
    top:50%;
    left:50%;
    width:10vw;
    height:10vw;
    background-color:#F2F0F0;
    transform:translate(-50%, -50%);
    -moz-transform:translate(-50%, -50%);
    -webkit-transform:translate(-50%, -50%);
    -o-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%)
}
#awards .swipe-gesture span img{
    width:40%;
    transform:translateY(35%);
    -moz-transform:translateY(35%);
    -webkit-transform:translateY(35%);
    -o-transform:translateY(35%);
    -ms-transform:translateY(35%)
}
@-webkit-keyframes swipeLoop{
    0%{
        transform:translate(-50%, -50%) scale(1);
        -moz-transform:translate(-50%, -50%) scale(1);
        -webkit-transform:translate(-50%, -50%) scale(1);
        -o-transform:translate(-50%, -50%) scale(1);
        -ms-transform:translate(-50%, -50%) scale(1)
    }
    5%{
        transform:translate(-50%, -50%) scale(0.8);
        -moz-transform:translate(-50%, -50%) scale(0.8);
        -webkit-transform:translate(-50%, -50%) scale(0.8);
        -o-transform:translate(-50%, -50%) scale(0.8);
        -ms-transform:translate(-50%, -50%) scale(0.8)
    }
    25%{
        transform:translate(50%, -50%) scale(0.8);
        -moz-transform:translate(50%, -50%) scale(0.8);
        -webkit-transform:translate(50%, -50%) scale(0.8);
        -o-transform:translate(50%, -50%) scale(0.8);
        -ms-transform:translate(50%, -50%) scale(0.8)
    }
    30%{
        transform:translate(50%, -50%) scale(1);
        -moz-transform:translate(50%, -50%) scale(1);
        -webkit-transform:translate(50%, -50%) scale(1);
        -o-transform:translate(50%, -50%) scale(1);
        -ms-transform:translate(50%, -50%) scale(1)
    }
    40%{
        transform:translate(-50%, -50%) scale(1);
        -moz-transform:translate(-50%, -50%) scale(1);
        -webkit-transform:translate(-50%, -50%) scale(1);
        -o-transform:translate(-50%, -50%) scale(1);
        -ms-transform:translate(-50%, -50%) scale(1)
    }
    45%{
        transform:translate(-50%, -50%) scale(0.8);
        -moz-transform:translate(-50%, -50%) scale(0.8);
        -webkit-transform:translate(-50%, -50%) scale(0.8);
        -o-transform:translate(-50%, -50%) scale(0.8);
        -ms-transform:translate(-50%, -50%) scale(0.8)
    }
    60%{
        transform:translate(-150%, -50%) scale(0.8);
        -moz-transform:translate(-150%, -50%) scale(0.8);
        -webkit-transform:translate(-150%, -50%) scale(0.8);
        -o-transform:translate(-150%, -50%) scale(0.8);
        -ms-transform:translate(-150%, -50%) scale(0.8)
    }
    65%{
        transform:translate(-150%, -50%) scale(1);
        -moz-transform:translate(-150%, -50%) scale(1);
        -webkit-transform:translate(-150%, -50%) scale(1);
        -o-transform:translate(-150%, -50%) scale(1);
        -ms-transform:translate(-150%, -50%) scale(1)
    }
    75%,to{
        transform:translate(-50%, -50%) scale(1);
        -moz-transform:translate(-50%, -50%) scale(1);
        -webkit-transform:translate(-50%, -50%) scale(1);
        -o-transform:translate(-50%, -50%) scale(1);
        -ms-transform:translate(-50%, -50%) scale(1)
    }
}
@keyframes swipeLoop{
    0%{
        transform:translate(-50%, -50%) scale(1);
        -moz-transform:translate(-50%, -50%) scale(1);
        -webkit-transform:translate(-50%, -50%) scale(1);
        -o-transform:translate(-50%, -50%) scale(1);
        -ms-transform:translate(-50%, -50%) scale(1)
    }
    5%{
        transform:translate(-50%, -50%) scale(0.8);
        -moz-transform:translate(-50%, -50%) scale(0.8);
        -webkit-transform:translate(-50%, -50%) scale(0.8);
        -o-transform:translate(-50%, -50%) scale(0.8);
        -ms-transform:translate(-50%, -50%) scale(0.8)
    }
    25%{
        transform:translate(50%, -50%) scale(0.8);
        -moz-transform:translate(50%, -50%) scale(0.8);
        -webkit-transform:translate(50%, -50%) scale(0.8);
        -o-transform:translate(50%, -50%) scale(0.8);
        -ms-transform:translate(50%, -50%) scale(0.8)
    }
    30%{
        transform:translate(50%, -50%) scale(1);
        -moz-transform:translate(50%, -50%) scale(1);
        -webkit-transform:translate(50%, -50%) scale(1);
        -o-transform:translate(50%, -50%) scale(1);
        -ms-transform:translate(50%, -50%) scale(1)
    }
    40%{
        transform:translate(-50%, -50%) scale(1);
        -moz-transform:translate(-50%, -50%) scale(1);
        -webkit-transform:translate(-50%, -50%) scale(1);
        -o-transform:translate(-50%, -50%) scale(1);
        -ms-transform:translate(-50%, -50%) scale(1)
    }
    45%{
        transform:translate(-50%, -50%) scale(0.8);
        -moz-transform:translate(-50%, -50%) scale(0.8);
        -webkit-transform:translate(-50%, -50%) scale(0.8);
        -o-transform:translate(-50%, -50%) scale(0.8);
        -ms-transform:translate(-50%, -50%) scale(0.8)
    }
    60%{
        transform:translate(-150%, -50%) scale(0.8);
        -moz-transform:translate(-150%, -50%) scale(0.8);
        -webkit-transform:translate(-150%, -50%) scale(0.8);
        -o-transform:translate(-150%, -50%) scale(0.8);
        -ms-transform:translate(-150%, -50%) scale(0.8)
    }
    65%{
        transform:translate(-150%, -50%) scale(1);
        -moz-transform:translate(-150%, -50%) scale(1);
        -webkit-transform:translate(-150%, -50%) scale(1);
        -o-transform:translate(-150%, -50%) scale(1);
        -ms-transform:translate(-150%, -50%) scale(1)
    }
    75%,to{
        transform:translate(-50%, -50%) scale(1);
        -moz-transform:translate(-50%, -50%) scale(1);
        -webkit-transform:translate(-50%, -50%) scale(1);
        -o-transform:translate(-50%, -50%) scale(1);
        -ms-transform:translate(-50%, -50%) scale(1)
    }
}
#awards .lSSlideOuter .lSPager.lSpg{
    bottom:9vh;
    display:none
}
#awards .lSSlideOuter .lSPager.lSpg>li.active a,#awards .lSSlideOuter .lSPager.lSpg>li:hover a,#awards .lSSlideOuter .lSPager.lSpg>li a{
    background-color:#253069
}
#awards .lSSlideOuter .lSPager.lSpg>li.active a:before,#awards .lSSlideOuter .lSPager.lSpg>li:hover a:before,#awards .lSSlideOuter .lSPager.lSpg>li a:before{
    border:1px solid #253069
}
#awards .lSAction>a{
    background-color:#253069
}
#awards .lSAction>a:before{
    background-color:#fff
}
#awards .lSAction>a:after{
    background-color:#fff
}
#clients h2{
    font-size:3em
}
#clients li{
    padding:6vw
}
#studio-intro{
    height:100%;
    padding:5vh 0;
    position:relative;
    line-height:1.9em
}
#studio-intro p{
    font-size:1.1em
}
#services{
    font-weight:400;
    position:relative;
    color:#fff;
    background:#253069 url("../img/img-bridge.png") no-repeat 0% 75%;
    background-size:100%
}
#services h2,#services h3,#services h4{
    color:#fff
}
#services h4{
    margin-top:2.25em;
    font-size:1.75em
}
#services ul{
    margin-top:30px;
    font-size:1em;
    line-height:2em
}
#services ul li{
    line-height:1.35em;
    padding:.3em 0
}
#services .svg-shape{
    width:15%;
    top:10%;
    right:15%
}
#services .svg-shape.shape-static{
    width:20%
}
#culture{
    position:relative
}
#culture:before{
    content:"";
    position:absolute;
    display:block;
    left:0;
    top:-40vh;
    width:100%;
    height:130vh;
    background-color:#253069;
    transform:skewY(-7deg);
    -moz-transform:skewY(-7deg);
    -webkit-transform:skewY(-7deg);
    -o-transform:skewY(-7deg);
    -ms-transform:skewY(-7deg);
    z-index:-1
}
#culture .culture-img div{
    background-color:#F2F0F0;
    line-height:0
}
.culture-wrap{
    position:relative
}
#bottom-work{
    height:75vh;
    overflow:hidden;
    position:relative
}
#bottom-work figure{
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    margin:0;
    padding:0;
    position:absolute;
    top:125%;
    left:50%;
    transform:translate(-50%, -50%);
    -moz-transform:translate(-50%, -50%);
    -webkit-transform:translate(-50%, -50%);
    -o-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
    height:auto;
    width:60vw
}
#bottom-work figure img{
    width:100%;
    height:auto
}
#bottom-work h2{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    -moz-transform:translate(-50%, -50%);
    -webkit-transform:translate(-50%, -50%);
    -o-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
    display:block;
    font-size:4em;
    line-height:.5em
}
#bottom-cta{
    background-color:#F2F0F0;
    position:relative;
    margin-top:240px
}
#bottom-cta:before{
    content:"";
    position:absolute;
    display:block;
    left:0;
    top:-15%;
    width:100%;
    height:50%;
    background-color:#F2F0F0;
    transform:skewY(-7deg);
    -moz-transform:skewY(-7deg);
    -webkit-transform:skewY(-7deg);
    -o-transform:skewY(-7deg);
    -ms-transform:skewY(-7deg);
    z-index:1
}
#bottom-cta .svg-shape{
    width:15%;
    height:auto;
    top:0%;
    left:40%;
    z-index:100
}
#bottom-cta .apply-img{
    transform:translate(-50%, -50%);
    -moz-transform:translate(-50%, -50%);
    -webkit-transform:translate(-50%, -50%);
    -o-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
    position:absolute;
    width:60%;
    height:auto;
    top:-10%;
    right:-20%;
    z-index:200
}
#bottom-cta .careers-img{
    transform:translate(-50%, -50%);
    -moz-transform:translate(-50%, -50%);
    -webkit-transform:translate(-50%, -50%);
    -o-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
    position:absolute;
    width:30%;
    height:auto;
    top:-10%;
    right:-10%;
    z-index:150
}
#bottom-cta .box-wrap{
    position:relative;
    z-index:300
}
.apply-text{
    padding:30px 0
}
.apply-text .small{
    line-height:1em
}
.studio-team-img{
    position:relative;
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    line-height:0
}
#bottom-team{
    height:75vh;
    cursor:pointer;
    overflow:hidden;
    position:relative
}
#bottom-team .studio-team-img{
    position:absolute;
    bottom:0;
    left:50%;
    width:100%;
    transform:translate(-50%, 50%);
    -moz-transform:translate(-50%, 50%);
    -webkit-transform:translate(-50%, 50%);
    -o-transform:translate(-50%, 50%);
    -ms-transform:translate(-50%, 50%)
}
#bottom-team .studio-team-link{
    font-size:20vw;
    transform:translate(-50%, -95%);
    -moz-transform:translate(-50%, -95%);
    -webkit-transform:translate(-50%, -95%);
    -o-transform:translate(-50%, -95%);
    -ms-transform:translate(-50%, -95%)
}
@media only screen and (min-width:768px){
    #bottom-team{
        margin-top:25vh;
        height:auto;
        cursor:pointer;
        overflow:hidden;
        position:relative
    }
    #bottom-team .studio-team-link{
        font-size:12vw;
        transform:translate(-50%, 0%);
        -moz-transform:translate(-50%, 0%);
        -webkit-transform:translate(-50%, 0%);
        -o-transform:translate(-50%, 0%);
        -ms-transform:translate(-50%, 0%)
    }
    #bottom-team .studio-team-img{
        position:static;
        transform:translateX(0);
        -moz-transform:translateX(0);
        -webkit-transform:translateX(0);
        -o-transform:translateX(0);
        -ms-transform:translateX(0)
    }
    #bottom-team.active .studio-team-img{
        transform:translateY(50%) scale(0.8);
        -moz-transform:translateY(50%) scale(0.8);
        -webkit-transform:translateY(50%) scale(0.8);
        -o-transform:translateY(50%) scale(0.8);
        -ms-transform:translateY(50%) scale(0.8)
    }
    #bottom-team.active .studio-team-link{
        transform:translate(-50%, -65%);
        -moz-transform:translate(-50%, -65%);
        -webkit-transform:translate(-50%, -65%);
        -o-transform:translate(-50%, -65%);
        -ms-transform:translate(-50%, -65%)
    }
    #bottom-team.active a:before{
        -webkit-transition-delay:0.15s;
        -moz-transition-delay:0.15s;
        -o-transition-delay:0.15s;
        -ms-transition-delay:0.15s;
        transition-delay:0.15s;
        transform:translate(-50%, -50%) scaleX(1);
        -moz-transform:translate(-50%, -50%) scaleX(1);
        -webkit-transform:translate(-50%, -50%) scaleX(1);
        -o-transform:translate(-50%, -50%) scaleX(1);
        -ms-transform:translate(-50%, -50%) scaleX(1)
    }
}
.studio-team-link{
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    position:absolute;
    bottom:10vh;
    left:50%;
    transform:translate(-50%, 0%);
    -moz-transform:translate(-50%, 0%);
    -webkit-transform:translate(-50%, 0%);
    -o-transform:translate(-50%, 0%);
    -ms-transform:translate(-50%, 0%)
}
.studio-team-link a{
    display:block;
    position:relative
}
.studio-team-link a:before{
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    transform:translate(-50%, -50%) scaleX(0);
    -moz-transform:translate(-50%, -50%) scaleX(0);
    -webkit-transform:translate(-50%, -50%) scaleX(0);
    -o-transform:translate(-50%, -50%) scaleX(0);
    -ms-transform:translate(-50%, -50%) scaleX(0);
    content:"";
    -ms-transform-origin:50% 50%;
    -webkit-transform-origin:50% 50%;
    transform-origin:50% 50%;
    position:absolute;
    top:50%;
    left:50%;
    display:block;
    width:105%;
    height:20px;
    background-color:#253069
}
#wip{
    position:relative
}
#wip .wip-heading{
    display:block;
    width:100%;
    padding:0 0 5vh 0;
    text-align:left
}
#wip .wip-heading h2{
    color:#fff;
    font-size:12vw;
    text-align:center;
    padding:15vh 0 0
}
#wip .wip-heading h2 div{
    position:relative;
    display:inline-block;
    -ms-backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden
}
#wip .wip-heading h2 div span{
    display:block;
    transition:all 300ms cubic-bezier(0.66, 0.11, 0.4, 2.7);
    -webkit-transition:all 300ms cubic-bezier(0.66, 0.11, 0.4, 2.7);
    -moz-transition:all 300ms cubic-bezier(0.66, 0.11, 0.4, 2.7);
    -o-transition:all 300ms cubic-bezier(0.66, 0.11, 0.4, 2.7);
    -ms-backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    transform:translateZ(0);
    -moz-transform:translateZ(0);
    -webkit-transform:translateZ(0);
    -o-transform:translateZ(0);
    -ms-transform:translateZ(0);
    -ms-transform-origin:50% 50%;
    -webkit-transform-origin:50% 50%;
    transform-origin:50% 50%;
    position:relative
}
#wip .wip-heading h2 div:first-of-type:hover span{
    transform:scale(0.75, 1.5) rotate(-3deg);
    -moz-transform:scale(0.75, 1.5) rotate(-3deg);
    -webkit-transform:scale(0.75, 1.5) rotate(-3deg);
    -o-transform:scale(0.75, 1.5) rotate(-3deg);
    -ms-transform:scale(0.75, 1.5) rotate(-3deg)
}
#wip .wip-heading h2 div:nth-of-type(2):hover span{
    transform:scale(1.1, 1.4) rotate(8deg);
    -moz-transform:scale(1.1, 1.4) rotate(8deg);
    -webkit-transform:scale(1.1, 1.4) rotate(8deg);
    -o-transform:scale(1.1, 1.4) rotate(8deg);
    -ms-transform:scale(1.1, 1.4) rotate(8deg)
}
#wip .wip-heading h2 div:nth-of-type(3):hover span{
    transform:scale(0.9, 1.6) rotate(-6deg);
    -moz-transform:scale(0.9, 1.6) rotate(-6deg);
    -webkit-transform:scale(0.9, 1.6) rotate(-6deg);
    -o-transform:scale(0.9, 1.6) rotate(-6deg);
    -ms-transform:scale(0.9, 1.6) rotate(-6deg)
}
#wip .wip-heading h2 div:nth-of-type(4):hover span{
    transform:scale(1.1, 1.9) rotate(3deg);
    -moz-transform:scale(1.1, 1.9) rotate(3deg);
    -webkit-transform:scale(1.1, 1.9) rotate(3deg);
    -o-transform:scale(1.1, 1.9) rotate(3deg);
    -ms-transform:scale(1.1, 1.9) rotate(3deg)
}
#wip .wip-heading h2 div:nth-of-type(5):hover span{
    transform:scale(0.6, 1.7) rotate(-5deg);
    -moz-transform:scale(0.6, 1.7) rotate(-5deg);
    -webkit-transform:scale(0.6, 1.7) rotate(-5deg);
    -o-transform:scale(0.6, 1.7) rotate(-5deg);
    -ms-transform:scale(0.6, 1.7) rotate(-5deg)
}
#wip .wip-heading h2 div:nth-of-type(6):hover span{
    transform:scale(0.9, 1.6) rotate(-6deg);
    -moz-transform:scale(0.9, 1.6) rotate(-6deg);
    -webkit-transform:scale(0.9, 1.6) rotate(-6deg);
    -o-transform:scale(0.9, 1.6) rotate(-6deg);
    -ms-transform:scale(0.9, 1.6) rotate(-6deg)
}
#wip .wip-heading h2 div:nth-of-type(7):hover span{
    transform:scale(0.65, 1.6) rotate(5deg);
    -moz-transform:scale(0.65, 1.6) rotate(5deg);
    -webkit-transform:scale(0.65, 1.6) rotate(5deg);
    -o-transform:scale(0.65, 1.6) rotate(5deg);
    -ms-transform:scale(0.65, 1.6) rotate(5deg)
}
#wip .wip-heading h2 div:nth-of-type(8):hover span{
    transform:scale(0.6, 1.7) rotate(-2deg);
    -moz-transform:scale(0.6, 1.7) rotate(-2deg);
    -webkit-transform:scale(0.6, 1.7) rotate(-2deg);
    -o-transform:scale(0.6, 1.7) rotate(-2deg);
    -ms-transform:scale(0.6, 1.7) rotate(-2deg)
}
@-webkit-keyframes particleFade{
    0%,75%{
        opacity:1
    }
    to{
        opacity:0
    }
}
@keyframes particleFade{
    0%,75%{
        opacity:1
    }
    to{
        opacity:0
    }
}
#wip .shape-morph{
    position:absolute;
    width:100%;
    height:auto;
    mix-blend-mode:multiply
}
#wip a{
    display:block;
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    background-color:#253069;
    position:relative;
    line-height:1em
}
#wip a>div{
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    overflow:hidden;
    line-height:0
}
#wip .buzz-item{
    position:relative;
    line-height:0.01em;
    background-color:#253069
}
#wip video{
    width:100%;
    height:auto;
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1)
}
#wip h2{
    color:#fff
}
#wip .wip-header-bg{
    position:fixed;
    z-index:-1;
    top:0;
    width:100%;
    height:100vh;
    left:0;
    background:transparent url("../img/wip-hero-bg.png") no-repeat top left;
    background-size:100%
}
#wip .wip-text{
    opacity:0;
    display:block;
    position:absolute;
    bottom:0;
    left:10%;
    width:80%;
    font-size:.85em;
    line-height:1.3em;
    color:#fff;
    text-align:center
}
#wip .wip-icon{
    display:block;
    position:absolute;
    background-color:#F2F0F0;
    border-radius:50%;
    overflow:hidden;
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    opacity:1;
    line-height:0;
    text-indent:-999px;
    height:auto;
    background-repeat:no-repeat;
    background-size:30% 30%;
    background-position:50% 50%
}
#wip .wip-icon.icon-facebook{
    background-image:url("../img/_svg/social-facebook.svg")
}
#wip .wip-icon.icon-buzzworthy{
    background-color:#253069;
    background-image:url("../img/_svg/social-buzzworthy.svg");
    background-size:50% 50%
}
#wip .wip-icon.icon-instagram{
    background-image:url("../img/_svg/social-instagram.svg")
}
#wip .wip-icon.icon-twitter{
    background-image:url("../img/_svg/social-twitter.svg")
}
#wip .wip-icon.icon-dribbble{
    background-image:url("../img/_svg/social-dribbble.svg")
}
#wip .wip-icon.icon-behance{
    background-image:url("../img/_svg/social-behance.svg")
}
#wip .wip-icon.icon-linkedin{
    background-image:url("../img/_svg/social-linkedin.svg")
}
#wip img{
    transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1)
}
#canvas-heading{
    display:none
}
#team{
    position:relative;
    color:#D6372E
}
#team:before{
    content:"";
    position:absolute;
    display:block;
    left:0;
    top:250px;
    width:100%;
    height:100%;
    background-color:#253069;
    transform:skewY(-7deg);
    -moz-transform:skewY(-7deg);
    -webkit-transform:skewY(-7deg);
    -o-transform:skewY(-7deg);
    -ms-transform:skewY(-7deg);
    z-index:-1
}
#team .team-name{
    margin-top:-1em;
    padding:0 5%;
    position:relative;
    z-index:1000
}
#team h3{
    font-size:1.5em;
    text-transform:uppercase;
    color:#fff
}
#team h3 span{
    display:block
}
#team p{
    position:static;
    font-size:.8em;
    margin-top:.7em
}
#team .team-item video{
    width:100%;
    height:auto;
    margin:0;
    display:block;
    padding:0
}
#team .team-item .img-box{
    line-height:0;
    margin:0;
    padding:0;
    background-color:transparent
}
#team .img-box{
    position:relative;
    width:100%;
    height:auto;
    overflow:hidden;
    background-color:black;
    background-color:#e5e2e1;
    -webkit-backface-visibility:hidden;
    -moz-backface-visibility:hidden;
    backface-visibility:hidden;
    -webkit-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    transform-style:preserve-3d
}
#team .img-box img{
    animation:animTeamOut 0.4s steps(19) 1;
    -moz-animation:animTeamOut 0.4s steps(19) 1;
    -webkit-animation:animTeamOut 0.4s steps(19) 1;
    -o-animation:animTeamOut 0.4s steps(19) 1;
    display:block;
    -webkit-backface-visibility:hidden;
    -moz-backface-visibility:hidden;
    backface-visibility:hidden;
    -webkit-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    transform-style:preserve-3d;
    width:2000%;
    position:relative;
    z-index:500
}
#team .img-box:hover img{
    animation:animTeamIn 0.4s steps(19) 1;
    -moz-animation:animTeamIn 0.4s steps(19) 1;
    -webkit-animation:animTeamIn 0.4s steps(19) 1;
    -o-animation:animTeamIn 0.4s steps(19) 1;
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards
}
@-webkit-keyframes animTeamIn{
    0%{
        transform:translateX(0%);
        -moz-transform:translateX(0%);
        -webkit-transform:translateX(0%);
        -o-transform:translateX(0%);
        -ms-transform:translateX(0%)
    }
    to{
        transform:translateX(-95%);
        -moz-transform:translateX(-95%);
        -webkit-transform:translateX(-95%);
        -o-transform:translateX(-95%);
        -ms-transform:translateX(-95%)
    }
}
@keyframes animTeamIn{
    0%{
        transform:translateX(0%);
        -moz-transform:translateX(0%);
        -webkit-transform:translateX(0%);
        -o-transform:translateX(0%);
        -ms-transform:translateX(0%)
    }
    to{
        transform:translateX(-95%);
        -moz-transform:translateX(-95%);
        -webkit-transform:translateX(-95%);
        -o-transform:translateX(-95%);
        -ms-transform:translateX(-95%)
    }
}
@-webkit-keyframes animTeamOut{
    0%{
        transform:translateX(-95%);
        -moz-transform:translateX(-95%);
        -webkit-transform:translateX(-95%);
        -o-transform:translateX(-95%);
        -ms-transform:translateX(-95%)
    }
    to{
        transform:translateX(0%);
        -moz-transform:translateX(0%);
        -webkit-transform:translateX(0%);
        -o-transform:translateX(0%);
        -ms-transform:translateX(0%)
    }
}
@keyframes animTeamOut{
    0%{
        transform:translateX(-95%);
        -moz-transform:translateX(-95%);
        -webkit-transform:translateX(-95%);
        -o-transform:translateX(-95%);
        -ms-transform:translateX(-95%)
    }
    to{
        transform:translateX(0%);
        -moz-transform:translateX(0%);
        -webkit-transform:translateX(0%);
        -o-transform:translateX(0%);
        -ms-transform:translateX(0%)
    }
}
.team-heading{
    position:relative;
    margin-top:2em
}
.team-heading h1{
    line-height:1.1em;
    font-size:3em
}
.team-heading span{
    display:block
}
.team-heading .shape-morph{
    width:175%;
    top:20%;
    right:-90%;
    height:auto
}
.page-404 p{
    margin-top:2em
}
#contact h1{
    font-size:4.5em
}
.contact-wrap{
    margin-top:0%;
    position:relative
}
.contact-wrap .address-wrap{
    position:absolute;
    display:block;
    width:100%;
    transform:translate(-50%, 0%);
    -moz-transform:translate(-50%, 0%);
    -webkit-transform:translate(-50%, 0%);
    -o-transform:translate(-50%, 0%);
    -ms-transform:translate(-50%, 0%);
    top:-80vh;
    left:50%
}
.contact-wrap .address-wrap address{
    text-align:center
}
.contact-wrap p{
    font-family:"Montserrat", "Open Sans", sans-serif;
    font-weight:600;
    text-transform:uppercase;
    font-size:.85em;
    margin-bottom:2em
}
.contact-wrap #google-map{
    margin-top:80vh
}
@media only screen and (max-width:768px){
    .main-heading.studio .shape-morph{
        width:250%;
        top:50%;
        left:-30%
    }
    #wip .wip-heading h2{
        padding:10vh 0 0
    }
    .main-heading h1{
        font-size:6em
    }
    .main-heading h1 span{
        display:block
    }
    #index-loader .index-logo{
        width:10%;
        left:45%
    }
    #index-loader .index-copy h2{
        font-size:6vw!important
    }
    #studio-intro{
        height:auto;
        padding:0 0 15vh
    }
    .big{
        font-size:1em;
        line-height:1.6em
    }
    .team-heading{
        position:relative;
        margin-top:2em
    }
    .team-heading h1{
        line-height:1.1em;
        font-size:2.5em
    }
}
@media only screen and (max-width:1024px){
    #services .bs-button-wrap{
        margin:2em 0 4em
    }
}
@media only screen and (min-width:768px) and (max-width:1024px){
    .main-heading h1{
        font-size:8em!important
    }
}
@media only screen and (min-width:768px){
    #index-loader .index-copy .letter:nth-of-type(18){
        display:inline-block
    }
    #index-loader .index-copy .letter:nth-of-type(18):before{
        content:"";
        display:none
    }
    #index-loader .index-copy .letter:nth-of-type(38){
        display:inline
    }
    #index-loader .index-copy .letter:nth-of-type(38):before{
        content:"";
        display:block
    }
    #loader .loader-logo span:first-of-type{
        width:7.5%
    }
    #loader .loader-logo span:nth-of-type(5){
        width:12.5%;
        margin-right:-0.3rem
    }
    #loader .loader-logo span:nth-of-type(7){
        width:6%
    }
    #loader .loader-logo span:nth-of-type(8){
        width:6%
    }
    #loader .loader-logo span:nth-of-type(10){
        margin-left:.08em
    }
    #loader .loader-logo span:nth-of-type(10) svg{
        margin-bottom:-0.45em
    }
}
@media only screen and (min-width:1024px) and (max-width:1440px){
    body .main-heading h1{
        font-size:8em!important
    }
    body .team-heading h1{
        font-size:3em!important
    }
    body h2{
        font-size:6em
    }
    .portfolio-wrapper .portfolio li{
        font-size:5.25em;
        height:180px
    }
    .portfolio-wrapper .portfolio li a{
        line-height:180px
    }
    .portfolio-wrapper .portfolio li .portfolio-mask-wrap{
        line-height:1.2em
    }
    .portfolio-wrapper .portfolio li .portfolio-mask,.portfolio-wrapper .portfolio li .portfolio-mask-wrap,.portfolio-wrapper .portfolio li .portfolio-mask>span{
        height:180px
    }
}
@media only screen and (min-width:48em){
    header h2{
        font-size:6em;
        line-height:1em;
        margin-top:.175em
    }
    header .header-description{
        margin:3em 0 6em 0
    }
    #studio-intro{
        padding:15vh 0
    }
    #studio-intro p{
        font-size:1.5em;
        color:#253069
    }
    a.bs-button{
        padding:0 40px;
        line-height:5em
    }
    a.bs-button.btn-small{
        padding:0 35px;
        line-height:3.5em
    }
    #awards{
        margin-bottom:20vh
    }
    #awards #awards-slider{
        margin-top:10vh;
        margin-bottom:15vh
    }
    #awards .lSSlideOuter .lSPager.lSpg{
        display:block
    }
    #awards .svg-shape{
        display:block;
        width:15vw;
        left:-2vw;
        top:30vh;
        transform:rotate(270deg);
        -moz-transform:rotate(270deg);
        -webkit-transform:rotate(270deg);
        -o-transform:rotate(270deg);
        -ms-transform:rotate(270deg)
    }
    #awards .swipe-gesture{
        display:none
    }
    #clients li{
        padding:6vw 12vw
    }
    #blog-related,#bottom-cta{
        margin-top:300px
    }
    #blog-related .apply-img,#bottom-cta .apply-img{
        width:30%;
        top:-10%;
        right:10%
    }
    #blog-related .careers-img,#bottom-cta .careers-img{
        width:25%;
        top:-10%;
        right:10%
    }
    #contact h1,.main-heading h1{
        font-size:10em
    }
    #services h4{
        margin-top:4em;
        font-size:1.25em
    }
    #services ul{
        font-size:.75em;
        margin:2em 0 0
    }
    #services ul li{
        padding:.2em 0
    }
    .team-heading h1{
        line-height:1.1em;
        font-size:4em
    }
    .team-heading .shape-morph{
        width:100%;
        top:-20%;
        right:-50%;
        height:auto
    }
    #team .row>div+div{
        padding-top:0px
    }
    #team .team-name{
        padding:0 1em
    }
    #team h3{
        font-size:1.6666em
    }
    #team p{
        font-size:.7em;
        padding-right:0
    }
    #bottom-work{
        height:75vh
    }
    #bottom-work figure{
        display:none
    }
    #bottom-work h2{
        font-size:7em
    }
    #contact .contact-wrap{
        margin-top:6em
    }
    #contact .contact-wrap #google-map{
        margin-top:20vh
    }
    #contact .contact-wrap .address-wrap{
        top:-20vh;
        left:50%
    }
    #contact .contact-wrap .address-wrap address{
        text-align:left
    }
    #contact .contact-wrap .address-wrap address:nth-of-type(2){
        text-align:right
    }
    #contact .contact-wrap .contact-button{
        font-size:1.2em;
        width:80%;
        height:auto;
        padding-top:80%;
        margin:10%;
        background-color:#D6372E;
        -webkit-box-sizing:border-box;
        box-sizing:border-box
    }
    #contact .contact-wrap .contact-button:hover{
        width:90%;
        padding-top:90%;
        margin:5%
    }
    #contact .contact-wrap .contact-button:hover:before{
        z-index:-1;
        top:5%;
        right:5%;
        bottom:5%;
        left:5%
    }
}
@media only screen and (max-width:1023px){
    #wip .wip-icon{
        bottom:20px;
        left:20px;
        width:60px;
        height:auto;
        padding-top:60px
    }
    #index-loader .loading-circle{
        transform:scale(0.1) translate(-50%, -50%);
        -moz-transform:scale(0.1) translate(-50%, -50%);
        -webkit-transform:scale(0.1) translate(-50%, -50%);
        -o-transform:scale(0.1) translate(-50%, -50%);
        -ms-transform:scale(0.1) translate(-50%, -50%);
        display:block;
        position:absolute;
        border-radius:50%;
        top:90%;
        left:50%;
        width:250%;
        height:auto;
        padding-top:250%;
        background-color:#3d94d1;
    }
    #loader .circle-first,#loader .circle-second{
        width:250%;
        height:auto;
        padding-top:250%
    }
    #approach{
        position:relative
    }
    #approach .approach-item{
        transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        display:-webkit-box;
        display:-moz-box;
        display:-ms-flexbox;
        display:-webkit-flex;
        display:flex;
        -webkit-box-orient:horizontal;
        -webkit-box-direction:normal;
        -ms-flex-flow:row wrap;
        flex-flow:row wrap;
        -webkit-box-align:center;
        -ms-flex-align:center;
        align-items:center;
        overflow:hidden;
        cursor:pointer;
        padding:.5em 0 0;
        width:100%;
        border-bottom:1px solid rgba(37, 48, 105, 0.15)
    }
    #approach .approach-item.active .approach-content{
        opacity:1;
        padding-bottom:3em;
        max-height:500px;
        transform:translateY(0%);
        -moz-transform:translateY(0%);
        -webkit-transform:translateY(0%);
        -o-transform:translateY(0%);
        -ms-transform:translateY(0%)
    }
    #approach .approach-item.active h3:after,#approach .approach-item.active h3:before{
        transform:translate(-50%, -50%) rotate(180deg);
        -moz-transform:translate(-50%, -50%) rotate(180deg);
        -webkit-transform:translate(-50%, -50%) rotate(180deg);
        -o-transform:translate(-50%, -50%) rotate(180deg);
        -ms-transform:translate(-50%, -50%) rotate(180deg)
    }
    #approach .approach-icon{
        transition:all 1s cubic-bezier(0.6, 0.06, 0, 1);
        -webkit-transition:all 1s cubic-bezier(0.6, 0.06, 0, 1);
        -moz-transition:all 1s cubic-bezier(0.6, 0.06, 0, 1);
        -o-transition:all 1s cubic-bezier(0.6, 0.06, 0, 1);
        width:20%;
        height:auto
    }
    #approach .approach-title{
        padding-left:10%;
        width:60%;
        text-align:left
    }
    #approach .approach-content{
        transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        text-align:left;
        opacity:0;
        width:100%;
        max-height:0;
        font-size:.8em;
        transform:translateY(50px);
        -moz-transform:translateY(50px);
        -webkit-transform:translateY(50px);
        -o-transform:translateY(50px);
        -ms-transform:translateY(50px);
        padding:.5em 0
    }
    #approach h3{
        width:100%;
        text-align:left;
        margin:0;
        position:relative;
        display:inline-block
    }
    #approach h3:after,#approach h3:before{
        content:"";
        top:50%;
        right:0%;
        transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        transform:translate(-50%, -50%);
        -moz-transform:translate(-50%, -50%);
        -webkit-transform:translate(-50%, -50%);
        -o-transform:translate(-50%, -50%);
        -ms-transform:translate(-50%, -50%);
        display:block;
        position:absolute;
        width:12px;
        height:3px;
        background-color:#fff;
    }
    #approach h3:after{
        top:50%;
        right:0%;
        transform:translate(-50%, -50%) rotate(90deg);
        -moz-transform:translate(-50%, -50%) rotate(90deg);
        -webkit-transform:translate(-50%, -50%) rotate(90deg);
        -o-transform:translate(-50%, -50%) rotate(90deg);
        -ms-transform:translate(-50%, -50%) rotate(90deg)
    }
    .portfolio-wrapper{
        overflow:hidden;
        width:100%;
        padding:0%;
        margin:0;
        height:auto;
        position:relative
    }
    .portfolio-wrapper>.hp-footer{
        display:none
    }
    .portfolio-wrapper>.hp-footer h6{
        transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1)
    }
    .portfolio-wrapper li{
        transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        text-align:center;
        position:relative;
        overflow:hidden;
        font-size:3em;
        padding:15vh 0
    }
    .portfolio-wrapper .portfolio-mask-wrap{
        width:100%;
        z-index:150;
        margin:0;
        padding:0
    }
    .portfolio-wrapper .portfolio-mask{
        display:block;
        height:auto
    }
    .portfolio-wrapper .portfolio-item.in-middle .portfolio-item-img img{
        transform:scale(1.05);
        -moz-transform:scale(1.05);
        -webkit-transform:scale(1.05);
        -o-transform:scale(1.05);
        -ms-transform:scale(1.05)
    }
    .portfolio-wrapper a{
        transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        font-family:"Montserrat", "Open Sans", sans-serif;
        text-align:center;
        display:inline-block;
        position:relative;
        color:#fff;
        font-weight:800;
        line-height:1.3em
    }
    .portfolio-wrapper a:before{
        content:"";
        transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        transform:rotate(45deg);
        -moz-transform:rotate(45deg);
        -webkit-transform:rotate(45deg);
        -o-transform:rotate(45deg);
        -ms-transform:rotate(45deg);
        -webkit-transform-origin:50% 50%;
        -ms-transform-origin:50% 50%;
        transform-origin:50% 50%;
        display:block;
        position:absolute;
        background-color:#fff;
        width:3px;
        height:15px;
        top:50%;
        right:-1em
    }
    .portfolio-wrapper a:after{
        content:"";
        transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        transform:rotate(-45deg);
        -moz-transform:rotate(-45deg);
        -webkit-transform:rotate(-45deg);
        -o-transform:rotate(-45deg);
        -ms-transform:rotate(-45deg);
        -webkit-transform-origin:50% 50%;
        -ms-transform-origin:50% 50%;
        transform-origin:50% 50%;
        display:block;
        position:absolute;
        background-color:#fff;
        width:3px;
        height:15px;
        top:40%;
        right:-1em
    }
    .portfolio-wrapper .portfolio-item-img{
        transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        position:absolute;
        top:0%;
        left:0%;
        height:100%;
        width:100%;
        z-index:-1;
        background-color:#253069
    }
    .portfolio-wrapper .portfolio-item-img img{
        transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        transform:scale(1);
        -moz-transform:scale(1);
        -webkit-transform:scale(1);
        -o-transform:scale(1);
        -ms-transform:scale(1);
        height:100%;
        opacity:.75;
        -o-object-fit:cover;
        object-fit:cover
    }
}
@media only screen and (max-width:47.9em){
    #approach .approach-icon{
        width:30%
    }
    #approach .approach-title{
        padding-left:10%;
        width:60%;
        text-align:left
    }
    #approach h3{
        font-size:1.6em
    }
    .portfolio-wrapper li{
        font-size:2em;
        line-height:2em
    }
    .portfolio-wrapper a:before{
        top:49%
    }
    .portfolio-wrapper a:after{
        top:30%
    }
}
@media only screen and (min-width:64em){
    #wip a:hover .wip-text{
        opacity:1;
        bottom:4em
    }
    #wip a:hover img,#wip a:hover video{
        opacity:.2;
        transform:scale(1.05);
        -moz-transform:scale(1.05);
        -webkit-transform:scale(1.05);
        -o-transform:scale(1.05);
        -ms-transform:scale(1.05)
    }
    #wip img,#wip video{
        transform:scale(1);
        -moz-transform:scale(1);
        -webkit-transform:scale(1);
        -o-transform:scale(1);
        -ms-transform:scale(1)
    }
    #wip .wip-icon{
        transform:translate(-50%, -50%);
        -moz-transform:translate(-50%, -50%);
        -webkit-transform:translate(-50%, -50%);
        -o-transform:translate(-50%, -50%);
        -ms-transform:translate(-50%, -50%);
        opacity:1;
        top:100%;
        text-indent:-999px;
        left:50%
    }
    #awards{
        margin-top:0
    }
    #awards .svg-shape{
        width:12vw;
        top:20vh;
        left:-2vw;
        transform:rotate(260deg);
        -moz-transform:rotate(260deg);
        -webkit-transform:rotate(260deg);
        -o-transform:rotate(260deg);
        -ms-transform:rotate(260deg)
    }
    #awards h2{
        font-size:8.3em
    }
    #clients h2{
        font-size:5em
    }
    #clients li{
        position:relative;
        padding:5vw 4vw
    }
    #clients li span{
        transition:all 650ms cubic-bezier(0.295, 0.94, 0.455, 1);
        -webkit-transition:all 650ms cubic-bezier(0.295, 0.94, 0.455, 1);
        -moz-transition:all 650ms cubic-bezier(0.295, 0.94, 0.455, 1);
        -o-transition:all 650ms cubic-bezier(0.295, 0.94, 0.455, 1);
        z-index:-1;
        display:inline-block;
        position:absolute;
        width:115%;
        height:auto;
        top:50%;
        left:50%;
        transform:translate(-50%, -50%) scale(0, 0.5) rotateZ(20deg);
        -moz-transform:translate(-50%, -50%) scale(0, 0.5) rotateZ(20deg);
        -webkit-transform:translate(-50%, -50%) scale(0, 0.5) rotateZ(20deg);
        -o-transform:translate(-50%, -50%) scale(0, 0.5) rotateZ(20deg);
        -ms-transform:translate(-50%, -50%) scale(0, 0.5) rotateZ(20deg);
        opacity:0
    }
    #clients li svg{
        -webkit-backface-visibility:hidden;
        -moz-backface-visibility:hidden;
        backface-visibility:hidden;
        -webkit-transform-style:preserve-3d;
        -moz-transform-style:preserve-3d;
        transform-style:preserve-3d;
        transition:all 650ms cubic-bezier(0.295, 0.94, 0.455, 1);
        -webkit-transition:all 650ms cubic-bezier(0.295, 0.94, 0.455, 1);
        -moz-transition:all 650ms cubic-bezier(0.295, 0.94, 0.455, 1);
        -o-transition:all 650ms cubic-bezier(0.295, 0.94, 0.455, 1);
        fill:#253069
    }
    #clients li:hover svg{
        fill:#fff;
        transform:scale(0.9);
        -moz-transform:scale(0.9);
        -webkit-transform:scale(0.9);
        -o-transform:scale(0.9);
        -ms-transform:scale(0.9)
    }
    #clients li:hover span{
        transform:translate(-50%, -50%) scale(1, 1) rotateZ(0deg);
        -moz-transform:translate(-50%, -50%) scale(1, 1) rotateZ(0deg);
        -webkit-transform:translate(-50%, -50%) scale(1, 1) rotateZ(0deg);
        -o-transform:translate(-50%, -50%) scale(1, 1) rotateZ(0deg);
        -ms-transform:translate(-50%, -50%) scale(1, 1) rotateZ(0deg);
        opacity:1
    }
    .project-label{
        display:block
    }
    .main-heading{
        margin-top:2em;
        position:relative
    }
    .main-heading.studio .scroll-line{
        left:18%;
        bottom:-5vh
    }
    .main-heading.studio .scroll-line span{
        height:15vh
    }
    #studio-intro{
        padding:15vh 0 30vh;
        position:relative;
        line-height:1.9em
    }
    #studio-intro h3{
        font-size:1em;
        margin-top:1em
    }
    #studio-intro p{
        font-size:1.5em;
        color:#253069
    }
    .loading #loader .loader-logo{
        width:25%
    }
    @-webkit-keyframes circleZoom-1{
        0%{
            width:0
        }
        25%{
            width:125%
        }
        to{
            width:125%
        }
    }
    @keyframes circleZoom-1{
        0%{
            width:0
        }
        25%{
            width:125%
        }
        to{
            width:125%
        }
    }
    @-webkit-keyframes circleZoom-2{
        0%,75%{
            width:0
        }
        to{
            width:125%
        }
    }
    @keyframes circleZoom-2{
        0%,75%{
            width:0
        }
        to{
            width:125%
        }
    }
    .portfolio-wrapper{
        overflow:hidden;
        width:76%;
        padding:12% 12%;
        margin:0;
        height:100%;
        position:relative
    }
    .portfolio-wrapper li{
        position:relative
    }
    .portfolio-wrapper li:before{
        display:none
    }
    .portfolio-wrapper:before{
        content:"";
        transition:all 500ms cubic-bezier(0.77, 0, 0.175, 1);
        -webkit-transition:all 500ms cubic-bezier(0.77, 0, 0.175, 1);
        -moz-transition:all 500ms cubic-bezier(0.77, 0, 0.175, 1);
        -o-transition:all 500ms cubic-bezier(0.77, 0, 0.175, 1);
        display:block;
        position:absolute;
        top:0;
        left:50%;
        right:0;
        bottom:0;
        background-color:#253069;
        z-index:-1
    }
    .portfolio-wrapper>.hp-footer{
        height:2em;
        width:100%;
        overflow:hidden;
        font-size:.8em;
        position:fixed;
        transform:rotate(-90deg);
        -moz-transform:rotate(-90deg);
        -webkit-transform:rotate(-90deg);
        -o-transform:rotate(-90deg);
        -ms-transform:rotate(-90deg);
        font-weight:600;
        -webkit-transform-origin:0 0;
        -ms-transform-origin:0 0;
        transform-origin:0 0;
        bottom:60px;
        left:66px
    }
    .portfolio-wrapper>.hp-footer h6{
        line-height:3rem;
        margin:0;
        padding:0;
        transition:all 500ms cubic-bezier(0.77, 0, 0.175, 1);
        -webkit-transition:all 500ms cubic-bezier(0.77, 0, 0.175, 1);
        -moz-transition:all 500ms cubic-bezier(0.77, 0, 0.175, 1);
        -o-transition:all 500ms cubic-bezier(0.77, 0, 0.175, 1)
    }
    .portfolio-wrapper>.hp-footer .project-caption{
        position:absolute;
        font-weight:600;
        font-size:.9em;
        top:0;
        transform:translateY(100%);
        -moz-transform:translateY(100%);
        -webkit-transform:translateY(100%);
        -o-transform:translateY(100%);
        -ms-transform:translateY(100%);
        left:0;
        color:#fff
    }
    .portfolio-wrapper>.hp-footer .project-caption.hovered{
        top:0%
    }
    .portfolio-wrapper.selected:before{
        left:0
    }
    .portfolio-wrapper.selected>.hp-footer h6.copyright{
        transform:translate(0, -100%);
        -moz-transform:translate(0, -100%);
        -webkit-transform:translate(0, -100%);
        -o-transform:translate(0, -100%);
        -ms-transform:translate(0, -100%)
    }
    .portfolio-wrapper.selected>.hp-footer .project-caption.hovered{
        transform:translateY(0);
        -moz-transform:translateY(0);
        -webkit-transform:translateY(0);
        -o-transform:translateY(0);
        -ms-transform:translateY(0)
    }
    .portfolio-wrapper li{
        transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -webkit-transition-delay:0.15s;
        -moz-transition-delay:0.15s;
        -o-transition-delay:0.15s;
        -ms-transition-delay:0.15s;
        transition-delay:0.15s;
        height:85px;
        position:relative;
        line-height:1.2em;
        font-size:2.5em
    }
    .portfolio-wrapper li:nth-child(2){
        -webkit-transition-delay:0.15s;
        -moz-transition-delay:0.15s;
        -o-transition-delay:0.15s;
        -ms-transition-delay:0.15s;
        transition-delay:0.15s
    }
    .portfolio-wrapper li:nth-child(3){
        -webkit-transition-delay:0.125s;
        -moz-transition-delay:0.125s;
        -o-transition-delay:0.125s;
        -ms-transition-delay:0.125s;
        transition-delay:0.125s
    }
    .portfolio-wrapper li:nth-child(4){
        -webkit-transition-delay:0.1s;
        -moz-transition-delay:0.1s;
        -o-transition-delay:0.1s;
        -ms-transition-delay:0.1s;
        transition-delay:0.1s
    }
    .portfolio-wrapper li:nth-child(5){
        -webkit-transition-delay:0.075s;
        -moz-transition-delay:0.075s;
        -o-transition-delay:0.075s;
        -ms-transition-delay:0.075s;
        transition-delay:0.075s
    }
    .portfolio-wrapper li.active:hover .portfolio-mask{
        transform:translateX(0%);
        -moz-transform:translateX(0%);
        -webkit-transform:translateX(0%);
        -o-transform:translateX(0%);
        -ms-transform:translateX(0%);
        transition:all 400ms cubic-bezier(0.77, 0, 0.175, 1);
        -webkit-transition:all 400ms cubic-bezier(0.77, 0, 0.175, 1);
        -moz-transition:all 400ms cubic-bezier(0.77, 0, 0.175, 1);
        -o-transition:all 400ms cubic-bezier(0.77, 0, 0.175, 1)
    }
    .portfolio-wrapper li.active:hover .portfolio-mask>span{
        transform:translateX(0%);
        -moz-transform:translateX(0%);
        -webkit-transform:translateX(0%);
        -o-transform:translateX(0%);
        -ms-transform:translateX(0%)
    }
    .portfolio-wrapper li.active:before{
        bottom:0;
        opacity:1
    }
    .portfolio-wrapper li .active:nth-of-type(8):before{
        bottom:5%
    }
    .portfolio-wrapper .fake-link:before{
        content:attr(data-mask-link)
    }
    .portfolio-wrapper a{
        transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        font-family:"Montserrat", "Open Sans", sans-serif;
        backface-visibility:hidden;
        -webkit-backface-visibility:hidden;
        display:block;
        width:100%;
        overflow:hidden;
        line-height:1.25em;
        color:rgba(37, 48, 105, 0.15);
        font-weight:800
    }
    .portfolio-wrapper a:before{
        content:"";
        transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        transform:rotate(90deg) translate(0%, 40%);
        -moz-transform:rotate(90deg) translate(0%, 40%);
        -webkit-transform:rotate(90deg) translate(0%, 40%);
        -o-transform:rotate(90deg) translate(0%, 40%);
        -ms-transform:rotate(90deg) translate(0%, 40%);
        -webkit-transform-origin:50% 50%;
        -ms-transform-origin:50% 50%;
        transform-origin:50% 50%;
        display:block;
        position:absolute;
        background-color:#fff;
        width:4px;
        height:20px;
        text-align:center;
        top:50%;
        right:0em;
        opacity:0
    }
    .portfolio-wrapper a:after{
        content:"";
        transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        transform:rotate(-90deg) translate(0%, -40%);
        -moz-transform:rotate(-90deg) translate(0%, -40%);
        -webkit-transform:rotate(-90deg) translate(0%, -40%);
        -o-transform:rotate(-90deg) translate(0%, -40%);
        -ms-transform:rotate(-90deg) translate(0%, -40%);
        -webkit-transform-origin:50% 50%;
        -ms-transform-origin:50% 50%;
        transform-origin:50% 50%;
        display:block;
        position:absolute;
        background-color:#fff;
        width:4px;
        height:20px;
        text-align:center;
        top:50%;
        right:0em;
        opacity:0
    }
    .portfolio-wrapper .portfolio-mask,.portfolio-wrapper .portfolio-mask>span{
        height:85px
    }
    .portfolio-wrapper .portfolio-mask-wrap{
        position:absolute;
        overflow:hidden;
        left:50%;
        transform:translate(-50%, 0%);
        -moz-transform:translate(-50%, 0%);
        -webkit-transform:translate(-50%, 0%);
        -o-transform:translate(-50%, 0%);
        -ms-transform:translate(-50%, 0%);
        height:85px;
        transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1)
    }
    .portfolio-wrapper .portfolio-mask{
        position:absolute;
        overflow:hidden;
        width:100%;
        height:85px;
        transform:translateX(50%);
        -moz-transform:translateX(50%);
        -webkit-transform:translateX(50%);
        -o-transform:translateX(50%);
        -ms-transform:translateX(50%);
        transition:all 400ms cubic-bezier(0.77, 0, 0.175, 1);
        -webkit-transition:all 400ms cubic-bezier(0.77, 0, 0.175, 1);
        -moz-transition:all 400ms cubic-bezier(0.77, 0, 0.175, 1);
        -o-transition:all 400ms cubic-bezier(0.77, 0, 0.175, 1)
    }
    .portfolio-wrapper .portfolio-mask>span{
        position:absolute;
        color:#fff;
        transform:translateX(-50%);
        -moz-transform:translateX(-50%);
        -webkit-transform:translateX(-50%);
        -o-transform:translateX(-50%);
        -ms-transform:translateX(-50%);
        transition:all 400ms cubic-bezier(0.77, 0, 0.175, 1);
        -webkit-transition:all 400ms cubic-bezier(0.77, 0, 0.175, 1);
        -moz-transition:all 400ms cubic-bezier(0.77, 0, 0.175, 1);
        -o-transition:all 400ms cubic-bezier(0.77, 0, 0.175, 1);
        display:inline-block;
        font-weight:800
    }
    .portfolio-wrapper .portfolio{
        overflow:hidden
    }
    .portfolio-wrapper .portfolio.entered{
        overflow:visible
    }
    .portfolio-wrapper .portfolio.entered .project-label .portfolio-mask{
        transform:translateX(0%);
        -moz-transform:translateX(0%);
        -webkit-transform:translateX(0%);
        -o-transform:translateX(0%);
        -ms-transform:translateX(0%)
    }
    .portfolio-wrapper .portfolio.entered .project-label .portfolio-mask>span{
        transform:translateX(0%);
        -moz-transform:translateX(0%);
        -webkit-transform:translateX(0%);
        -o-transform:translateX(0%);
        -ms-transform:translateX(0%)
    }
    .portfolio-wrapper .portfolio-item.active a:after,.portfolio-wrapper .portfolio-item.active a:before{
        right:-0.5em;
        opacity:1
    }
    .portfolio-wrapper .portfolio-item.active a:before{
        transform:rotate(45deg) translate(0%, 40%);
        -moz-transform:rotate(45deg) translate(0%, 40%);
        -webkit-transform:rotate(45deg) translate(0%, 40%);
        -o-transform:rotate(45deg) translate(0%, 40%);
        -ms-transform:rotate(45deg) translate(0%, 40%)
    }
    .portfolio-wrapper .portfolio-item.active a:after{
        transform:rotate(-45deg) translate(0%, -40%);
        -moz-transform:rotate(-45deg) translate(0%, -40%);
        -webkit-transform:rotate(-45deg) translate(0%, -40%);
        -o-transform:rotate(-45deg) translate(0%, -40%);
        -ms-transform:rotate(-45deg) translate(0%, -40%)
    }
    .portfolio-wrapper .portfolio-item.active .portfolio-item-img.show{
        transition:all 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transition:all 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -moz-transition:all 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -o-transition:all 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        transform:translate(-50%, 0) scale(1.03);
        -moz-transform:translate(-50%, 0) scale(1.03);
        -webkit-transform:translate(-50%, 0) scale(1.03);
        -o-transform:translate(-50%, 0) scale(1.03);
        -ms-transform:translate(-50%, 0) scale(1.03);
        -webkit-transition-delay:0.2s;
        -moz-transition-delay:0.2s;
        -o-transition-delay:0.2s;
        -ms-transition-delay:0.2s;
        transition-delay:0.2s;
        top:0;
        opacity:1
    }
    .portfolio-wrapper .portfolio-item.active .portfolio-mask-wrap{
        overflow:visible
    }
    .portfolio-wrapper.selected .portfolio-item .portfolio-mask{
        transform:translateX(101%);
        -moz-transform:translateX(101%);
        -webkit-transform:translateX(101%);
        -o-transform:translateX(101%);
        -ms-transform:translateX(101%)
    }
    .portfolio-wrapper.selected .portfolio-item .portfolio-mask>span{
        transform:translateX(-101%);
        -moz-transform:translateX(-101%);
        -webkit-transform:translateX(-101%);
        -o-transform:translateX(-101%);
        -ms-transform:translateX(-101%)
    }
    .portfolio-wrapper.selected .portfolio-item .portfolio-item-img{
        transition:all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transition:all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -moz-transition:all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -o-transition:all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        transform:translate(-50%, 0) scale(1);
        -moz-transform:translate(-50%, 0) scale(1);
        -webkit-transform:translate(-50%, 0) scale(1);
        -o-transform:translate(-50%, 0) scale(1);
        -ms-transform:translate(-50%, 0) scale(1);
        -webkit-transition-delay:0s;
        -moz-transition-delay:0s;
        -o-transition-delay:0s;
        -ms-transition-delay:0s;
        transition-delay:0s;
        top:0;
        opacity:0
    }
    .portfolio-wrapper.selected .portfolio-item.active .portfolio-mask{
        transform:translateX(0%);
        -moz-transform:translateX(0%);
        -webkit-transform:translateX(0%);
        -o-transform:translateX(0%);
        -ms-transform:translateX(0%)
    }
    .portfolio-wrapper.selected .portfolio-item.active .portfolio-mask>span{
        transform:translateX(0%);
        -moz-transform:translateX(0%);
        -webkit-transform:translateX(0%);
        -o-transform:translateX(0%);
        -ms-transform:translateX(0%)
    }
    .portfolio-wrapper.selected .portfolio-item a{
        color:rgba(0, 0, 0, 0.2)
    }
    .portfolio-wrapper .portfolio-item-img{
        transition:all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -webkit-transition:all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -moz-transition:all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        -o-transition:all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        transform:translate(-50%, 0) scale(1);
        -moz-transform:translate(-50%, 0) scale(1);
        -webkit-transform:translate(-50%, 0) scale(1);
        -o-transform:translate(-50%, 0) scale(1);
        -ms-transform:translate(-50%, 0) scale(1);
        -webkit-transition-delay:0s;
        -moz-transition-delay:0s;
        -o-transition-delay:0s;
        -ms-transition-delay:0s;
        transition-delay:0s;
        -webkit-transform-origin:50% 50%;
        -ms-transform-origin:50% 50%;
        transform-origin:50% 50%;
        position:fixed;
        opacity:0;
        line-height:0;
        top:0%;
        left:50%;
        height:100%;
        width:100%;
        z-index:-1
    }
    .portfolio-wrapper .portfolio-item-img img{
        height:100%;
        opacity:.75;
        -o-object-fit:cover;
        object-fit:cover
    }
    header h2{
        font-size:6em;
        line-height:1em;
        margin-top:.25em
    }
    header .header-description{
        margin:3em 0 6em 0
    }
    #bottom-cta .svg-shape{
        width:5%;
        left:35%
    }
    #bottom-cta .careers-img{
        width:20%;
        top:-10%;
        right:15%
    }
    #approach{
        position:relative
    }
    #approach .svg-shape{
        display:block;
        width:12%;
        height:auto;
        top:0%;
        right:35%;
        max-width:200px
    }
    #approach .approach-icon{
        transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        display:inline-block;
        width:120px;
        height:120px;
        margin-top:1em
    }
    #approach .approach-title{
        transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1)
    }
    #approach .approach-content{
        transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        opacity:0;
        font-size:.7em;
        transform:scale(0.35, 0.25) rotateX(15deg) rotateZ(20deg) translateY(150px) translateX(-50px);
        -moz-transform:scale(0.35, 0.25) rotateX(15deg) rotateZ(20deg) translateY(150px) translateX(-50px);
        -webkit-transform:scale(0.35, 0.25) rotateX(15deg) rotateZ(20deg) translateY(150px) translateX(-50px);
        -o-transform:scale(0.35, 0.25) rotateX(15deg) rotateZ(20deg) translateY(150px) translateX(-50px);
        -ms-transform:scale(0.35, 0.25) rotateX(15deg) rotateZ(20deg) translateY(150px) translateX(-50px);
        padding:0 0 2em
    }
    #approach h3{
        margin:0 0 .8em 0;
        position:relative;
        display:inline-block
    }
    #approach h3:after,#approach h3:before{
        content:"";
        top:50%;
        right:-40px;
        transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        transform:translate(-50%, -50%);
        -moz-transform:translate(-50%, -50%);
        -webkit-transform:translate(-50%, -50%);
        -o-transform:translate(-50%, -50%);
        -ms-transform:translate(-50%, -50%);
        display:block;
        position:absolute;
        width:12px;
        height:3px;
        background-color:#fff
    }
    #approach h3:after{
        top:50%;
        right:-40px;
        transform:translate(-50%, -50%) rotate(90deg);
        -moz-transform:translate(-50%, -50%) rotate(90deg);
        -webkit-transform:translate(-50%, -50%) rotate(90deg);
        -o-transform:translate(-50%, -50%) rotate(90deg);
        -ms-transform:translate(-50%, -50%) rotate(90deg)
    }
    #approach h3 sup{
        position:absolute;
        top:0;
        font-size:.3em;
        font-family:"Lato", "Open Sans", sans-serif;
        left:-1.5em;
        display:block
    }
    #approach .approach-item{
        transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        overflow:hidden;
        cursor:pointer
    }
    #approach .approach-item:hover{
        margin-bottom:1em
    }
    #approach .approach-item:hover .approach-content{
        opacity:1;
        transform:scale(1, 1) rotateX(0deg) rotateZ(0deg) translateY(0) translateX(0);
        -moz-transform:scale(1, 1) rotateX(0deg) rotateZ(0deg) translateY(0) translateX(0);
        -webkit-transform:scale(1, 1) rotateX(0deg) rotateZ(0deg) translateY(0) translateX(0);
        -o-transform:scale(1, 1) rotateX(0deg) rotateZ(0deg) translateY(0) translateX(0);
        -ms-transform:scale(1, 1) rotateX(0deg) rotateZ(0deg) translateY(0) translateX(0)
    }
    #approach .approach-item:hover .approach-title{
        transform:scale(0.8);
        -moz-transform:scale(0.8);
        -webkit-transform:scale(0.8);
        -o-transform:scale(0.8);
        -ms-transform:scale(0.8)
    }
    #approach .approach-item:hover .approach-icon{
        margin-top:0
    }
    #approach .approach-item:hover h3:after,#approach .approach-item:hover h3:before{
        transform:translate(-50%, -50%) rotate(180deg);
        -moz-transform:translate(-50%, -50%) rotate(180deg);
        -webkit-transform:translate(-50%, -50%) rotate(180deg);
        -o-transform:translate(-50%, -50%) rotate(180deg);
        -ms-transform:translate(-50%, -50%) rotate(180deg)
    }
    .bs-button-wrap{
        margin-top:60px
    }
    .apply-text{
        padding:30px 0
    }
    #partners{
        position:relative
    }
    #partners ul{
        margin:2em 0 0;
        font-size:2.083em;
        font-weight:400
    }
    #partners ul li{
        padding:.5em 0
    }
    #google-map{
        position:relative;
        overflow:hidden;
        z-index:1
    }
    #google-map:before{
        display:block;
        content:"";
        position:absolute;
        top:-35%;
        left:0;
        width:50%;
        height:50%;
        background-color:#fff;
        transform:skew(0deg, -20deg);
        -moz-transform:skew(0deg, -20deg);
        -webkit-transform:skew(0deg, -20deg);
        -o-transform:skew(0deg, -20deg);
        -ms-transform:skew(0deg, -20deg);
        z-index:1
    }
    #google-map:after{
        display:block;
        content:"";
        position:absolute;
        top:-35%;
        right:0;
        width:50%;
        height:50%;
        background-color:#fff;
        z-index:1;
        transform:skew(0deg, 20deg);
        -moz-transform:skew(0deg, 20deg);
        -webkit-transform:skew(0deg, 20deg);
        -o-transform:skew(0deg, 20deg);
        -ms-transform:skew(0deg, 20deg)
    }
    #bottom-work{
        height:100vh;
        padding:10% 0;
        overflow:hidden;
        position:relative
    }
    #bottom-work figure{
        display:block;
        transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        margin:0;
        padding:0;
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%, -50%);
        -moz-transform:translate(-50%, -50%);
        -webkit-transform:translate(-50%, -50%);
        -o-transform:translate(-50%, -50%);
        -ms-transform:translate(-50%, -50%);
        max-width:600px;
        height:auto;
        width:360px
    }
    #bottom-work figure img{
        width:100%;
        height:auto
    }
    #bottom-work figure.active{
        top:100%
    }
    #bottom-work h2{
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%, -50%);
        -moz-transform:translate(-50%, -50%);
        -webkit-transform:translate(-50%, -50%);
        -o-transform:translate(-50%, -50%);
        -ms-transform:translate(-50%, -50%);
        display:block;
        font-size:10em;
        line-height:.5em
    }
    #bottom-work a{
        display:block;
        position:relative
    }
    #bottom-work a:before{
        transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -webkit-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -moz-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        -o-transition:all 350ms cubic-bezier(0.77, 0, 0.175, 1);
        content:"";
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%, -50%);
        -moz-transform:translate(-50%, -50%);
        -webkit-transform:translate(-50%, -50%);
        -o-transform:translate(-50%, -50%);
        -ms-transform:translate(-50%, -50%);
        display:block;
        width:0%;
        height:20px;
        background-color:#253069
    }
    #bottom-work a:hover:before{
        -webkit-transition-delay:0.15s;
        -moz-transition-delay:0.15s;
        -o-transition-delay:0.15s;
        -ms-transition-delay:0.15s;
        transition-delay:0.15s;
        width:105%
    }
    #newsletter-form{
        margin-top:1.5em;
        -ms-flex-wrap:wrap;
        flex-wrap:wrap
    }
    #newsletter-form #email{
        width:70%
    }
    #newsletter-form #newsletter-submit{
        width:30%
    }
    .portfolio-wrapper li{
        height:140px
    }
    .portfolio-wrapper .portfolio-mask,.portfolio-wrapper .portfolio-mask-wrap,.portfolio-wrapper .portfolio-mask>span{
        height:140px
    }
    #contact .contact-wrap{
        margin-top:0;
        position:relative
    }
    #contact .contact-wrap .address-wrap{
        position:absolute;
        display:block;
        width:100%;
        transform:translate(-50%, -50%);
        -moz-transform:translate(-50%, -50%);
        -webkit-transform:translate(-50%, -50%);
        -o-transform:translate(-50%, -50%);
        -ms-transform:translate(-50%, -50%);
        top:0%;
        left:50%;
        z-index:100
    }
    #contact .contact-wrap .contact-button{
        width:66%;
        height:auto;
        padding-top:66%;
        margin:17%
    }
    #contact .contact-wrap .contact-button:before{
        top:-15%;
        right:-15%;
        bottom:-15%;
        left:-15%
    }
    #contact .contact-wrap .contact-button:hover{
        width:76%;
        height:auto;
        padding-top:76%;
        margin:12%
    }
}
@media only screen and (min-width:75em){
    body{
        font-size:1.5em;
        line-height:1.66em
    }
    h2{
        font-size:8.333em;
        line-height:1em
    }
    #wip .wip-icon{
        width:80px;
        padding-top:80px
    }
    #approach{
        position:relative;
        z-index:500
    }
    .approach-desc{
        font-size:1.8vw
    }
    #clients li{
        padding:4vw
    }
    #canvas-heading{
        position:relative;
        display:block;
        width:100%;
        height:85vh
    }
    #canvas-heading canvas{
        position:absolute;
        width:100%;
        height:auto;
        left:20%;
        top:-5%;
        display:none
    }
    #canvas-heading h2{
        position:absolute;
        font-size:14rem;
        line-height:1em;
        top:15%;
        left:15%
    }
    #canvas-heading h2 span{
        display:block
    }
    #services .svg-shape{
        width:7%;
        right:38%;
        top:15%
    }
    #loader .loader-logo{
        width:25%
    }
    #contact h1,.main-heading h1{
        font-size:11em;
        line-height:1em
    }
    .team-heading h1{
        line-height:1.1em;
        font-size:4em
    }
    #blog-related,#bottom-cta{
        margin-top:360px
    }
    #blog-related .apply-img,#bottom-cta .apply-img{
        width:35%;
        top:-10%;
        right:-5%
    }
    #blog-related .careers-img,#bottom-cta .careers-img{
        width:25%;
        top:-10%;
        right:0%
    }
    .apply-text{
        margin:30px 0 0 60px
    }
    #culture{
        background-color:#253069;
        position:relative
    }
    #culture:before{
        content:"";
        position:absolute;
        display:block;
        left:0;
        top:80%;
        width:100%;
        height:60vh;
        background-color:#fff;
        transform:skewY(-7deg);
        -moz-transform:skewY(-7deg);
        -webkit-transform:skewY(-7deg);
        -o-transform:skewY(-7deg);
        -ms-transform:skewY(-7deg);
        z-index:10
    }
    #culture .culture-img:firs-of-type{
        padding-right:12%;
        position:relative;
        z-index:100
    }
    #culture .culture-img:nth-of-type(2){
        padding-right:10%
    }
    #culture .grid-wrap{
        position:relative;
        z-index:300
    }
    #team .row>div+div{
        padding-top:120px
    }
    .portfolio-wrapper{
        width:80%;
        padding:10% 10%;
        margin:0
    }
    .portfolio-wrapper li{
        height:220px;
        font-size:6.666em
    }
    .portfolio-wrapper a{
        line-height:220px
    }
    .portfolio-wrapper .portfolio-mask,.portfolio-wrapper .portfolio-mask-wrap,.portfolio-wrapper .portfolio-mask>span{
        height:220px
    }
}
@media only screen and (min-width:95em){
    .apply-text{
        margin:30px 0 0 0
    }
    #bottom-work figure{
        width:440px
    }
}
@media only screen and (min-width:1921px){
    body{
        font-size:1.75em
    }
    #approach .approach-icon{
        width:160px;
        height:160px
    }
    #studio-intro p{
        font-size:1.6em;
        color:#253069
    }
    #team .team-name{
        font-size:1.15em
    }
    #blog-related,#bottom-cta{
        margin-top:450px
    }
    #blog-related .apply-img,#bottom-cta .apply-img{
        width:25%;
        top:-10%;
        right:10%
    }
    #blog-related .careers-img,#bottom-cta .careers-img{
        width:20%;
        top:-10%;
        right:10%
    }
    .apply-text{
        margin:60px 0 0 30px
    }
    #bottom-work figure{
        width:520px
    }
    .portfolio-wrapper{
        width:80%;
        padding:5% 10%;
        margin:0
    }
    .portfolio-wrapper li{
        height:250px
    }
    .portfolio-wrapper .portfolio-mask,.portfolio-wrapper .portfolio-mask-wrap,.portfolio-wrapper .portfolio-mask>span{
        height:250px
    }
}