Team:Tianjin/Resources/CSS:main

.wrapper,.row,body.page--home #loading #landing-container #about-us { *zoom:1 } .wrapper:before,.row:before,body.page--home #loading #landing-container #about-us:before,.wrapper:after,.row:after,body.page--home #loading #landing-container #about-us:after { content:" "; display:table } .wrapper:after,.row:after,body.page--home #loading #landing-container #about-us:after { clear:both } /*! Animate.css - http://daneden.me/animate Licensed under the MIT license - http://opensource.org/licenses/MIT Copyright (c) 2014 Daniel Eden*/ .animated { -webkit-animation-duration:1s; animation-duration:1s; -webkit-animation-fill-mode:both; animation-fill-mode:both } .animated.infinite { -webkit-animation-iteration-count:infinite; animation-iteration-count:infinite } .animated.hinge { -webkit-animation-duration:2s; animation-duration:2s } @-webkit-keyframes bounce { 0%,20%,53%,80%,100% { transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0) } 40%,43% { transition-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform:translate3d(0, -30px, 0); transform:translate3d(0, -30px, 0) } 70% { transition-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform:translate3d(0, -15px, 0); transform:translate3d(0, -15px, 0) } 90% { -webkit-transform:translate3d(0, -4px, 0); transform:translate3d(0, -4px, 0) } }@keyframes bounce { 0%,20%,53%,80%,100% { transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0) } 40%,43% { transition-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform:translate3d(0, -30px, 0); transform:translate3d(0, -30px, 0) } 70% { transition-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform:translate3d(0, -15px, 0); transform:translate3d(0, -15px, 0) } 90% { -webkit-transform:translate3d(0, -4px, 0); transform:translate3d(0, -4px, 0) } }.bounce { -webkit-animation-name:bounce; animation-name:bounce; -webkit-transform-origin:center bottom; transform-origin:center bottom } @-webkit-keyframes flash { 0%,50%,100% { opacity:1 } 25%,75% { opacity:0 } }@keyframes flash { 0%,50%,100% { opacity:1 } 25%,75% { opacity:0 } }.flash { -webkit-animation-name:flash; animation-name:flash } @-webkit-keyframes pulse { 0% { -webkit-transform:scale3d(1, 1, 1); transform:scale3d(1, 1, 1) } 50% { -webkit-transform:scale3d(1.05, 1.05, 1.05); transform:scale3d(1.05, 1.05, 1.05) } 100% { -webkit-transform:scale3d(1, 1, 1); transform:scale3d(1, 1, 1) } }@keyframes pulse { 0% { -webkit-transform:scale3d(1, 1, 1); transform:scale3d(1, 1, 1) } 50% { -webkit-transform:scale3d(1.05, 1.05, 1.05); transform:scale3d(1.05, 1.05, 1.05) } 100% { -webkit-transform:scale3d(1, 1, 1); transform:scale3d(1, 1, 1) } }.pulse { -webkit-animation-name:pulse; animation-name:pulse } @-webkit-keyframes rubberBand { 0% { -webkit-transform:scale3d(1, 1, 1); transform:scale3d(1, 1, 1) } 30% { -webkit-transform:scale3d(1.25, 0.75, 1); transform:scale3d(1.25, 0.75, 1) } 40% { -webkit-transform:scale3d(0.75, 1.25, 1); transform:scale3d(0.75, 1.25, 1) } 50% { -webkit-transform:scale3d(1.15, 0.85, 1); transform:scale3d(1.15, 0.85, 1) } 65% { -webkit-transform:scale3d(0.95, 1.05, 1); transform:scale3d(0.95, 1.05, 1) } 75% { -webkit-transform:scale3d(1.05, 0.95, 1); transform:scale3d(1.05, 0.95, 1) } 100% { -webkit-transform:scale3d(1, 1, 1); transform:scale3d(1, 1, 1) } }@keyframes rubberBand { 0% { -webkit-transform:scale3d(1, 1, 1); transform:scale3d(1, 1, 1) } 30% { -webkit-transform:scale3d(1.25, 0.75, 1); transform:scale3d(1.25, 0.75, 1) } 40% { -webkit-transform:scale3d(0.75, 1.25, 1); transform:scale3d(0.75, 1.25, 1) } 50% { -webkit-transform:scale3d(1.15, 0.85, 1); transform:scale3d(1.15, 0.85, 1) } 65% { -webkit-transform:scale3d(0.95, 1.05, 1); transform:scale3d(0.95, 1.05, 1) } 75% { -webkit-transform:scale3d(1.05, 0.95, 1); transform:scale3d(1.05, 0.95, 1) } 100% { -webkit-transform:scale3d(1, 1, 1); transform:scale3d(1, 1, 1) } }.rubberBand { -webkit-animation-name:rubberBand; animation-name:rubberBand } @-webkit-keyframes shake { 0%,100% { -webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0) } 10%,30%,50%,70%,90% { -webkit-transform:translate3d(-10px, 0, 0); transform:translate3d(-10px, 0, 0) } 20%,40%,60%,80% { -webkit-transform:translate3d(10px, 0, 0); transform:translate3d(10px, 0, 0) } }@keyframes shake { 0%,100% { -webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0) } 10%,30%,50%,70%,90% { -webkit-transform:translate3d(-10px, 0, 0); transform:translate3d(-10px, 0, 0) } 20%,40%,60%,80% { -webkit-transform:translate3d(10px, 0, 0); transform:translate3d(10px, 0, 0) } }.shake { -webkit-animation-name:shake; animation-name:shake } @-webkit-keyframes swing { 20% { -webkit-transform:rotate3d(0, 0, 1, 15deg); transform:rotate3d(0, 0, 1, 15deg) } 40% { -webkit-transform:rotate3d(0, 0, 1, -10deg); transform:rotate3d(0, 0, 1, -10deg) } 60% { -webkit-transform:rotate3d(0, 0, 1, 5deg); transform:rotate3d(0, 0, 1, 5deg) } 80% { -webkit-transform:rotate3d(0, 0, 1, -5deg); transform:rotate3d(0, 0, 1, -5deg) } 100% { -webkit-transform:rotate3d(0, 0, 1, 0deg); transform:rotate3d(0, 0, 1, 0deg) } }@keyframes swing { 20% { -webkit-transform:rotate3d(0, 0, 1, 15deg); transform:rotate3d(0, 0, 1, 15deg) } 40% { -webkit-transform:rotate3d(0, 0, 1, -10deg); transform:rotate3d(0, 0, 1, -10deg) } 60% { -webkit-transform:rotate3d(0, 0, 1, 5deg); transform:rotate3d(0, 0, 1, 5deg) } 80% { -webkit-transform:rotate3d(0, 0, 1, -5deg); transform:rotate3d(0, 0, 1, -5deg) } 100% { -webkit-transform:rotate3d(0, 0, 1, 0deg); transform:rotate3d(0, 0, 1, 0deg) } }.swing { -webkit-transform-origin:top center; transform-origin:top center; -webkit-animation-name:swing; animation-name:swing } @-webkit-keyframes tada { 0% { -webkit-transform:scale3d(1, 1, 1); transform:scale3d(1, 1, 1) } 10%,20% { -webkit-transform:scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform:scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg) } 30%,50%,70%,90% { -webkit-transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg) } 40%,60%,80% { -webkit-transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg) } 100% { -webkit-transform:scale3d(1, 1, 1); transform:scale3d(1, 1, 1) } }@keyframes tada { 0% { -webkit-transform:scale3d(1, 1, 1); transform:scale3d(1, 1, 1) } 10%,20% { -webkit-transform:scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform:scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg) } 30%,50%,70%,90% { -webkit-transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg) } 40%,60%,80% { -webkit-transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform:scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg) } 100% { -webkit-transform:scale3d(1, 1, 1); transform:scale3d(1, 1, 1) } }.tada { -webkit-animation-name:tada; animation-name:tada } @-webkit-keyframes wobble { 0% { -webkit-transform:none; transform:none } 15% { -webkit-transform:translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform:translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg) } 30% { -webkit-transform:translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform:translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg) } 45% { -webkit-transform:translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform:translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg) } 60% { -webkit-transform:translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform:translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg) } 75% { -webkit-transform:translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform:translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg) } 100% { -webkit-transform:none; transform:none } }@keyframes wobble { 0% { -webkit-transform:none; transform:none } 15% { -webkit-transform:translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform:translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg) } 30% { -webkit-transform:translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform:translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg) } 45% { -webkit-transform:translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform:translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg) } 60% { -webkit-transform:translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform:translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg) } 75% { -webkit-transform:translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform:translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg) } 100% { -webkit-transform:none; transform:none } }.wobble { -webkit-animation-name:wobble; animation-name:wobble } @-webkit-keyframes bounceIn { 0%,20%,40%,60%,80%,100% { transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1) } 0% { opacity:0; -webkit-transform:scale3d(0.3, 0.3, 0.3); transform:scale3d(0.3, 0.3, 0.3) } 20% { -webkit-transform:scale3d(1.1, 1.1, 1.1); transform:scale3d(1.1, 1.1, 1.1) } 40% { -webkit-transform:scale3d(0.9, 0.9, 0.9); transform:scale3d(0.9, 0.9, 0.9) } 60% { opacity:1; -webkit-transform:scale3d(1.03, 1.03, 1.03); transform:scale3d(1.03, 1.03, 1.03) } 80% { -webkit-transform:scale3d(0.97, 0.97, 0.97); transform:scale3d(0.97, 0.97, 0.97) } 100% { opacity:1; -webkit-transform:scale3d(1, 1, 1); transform:scale3d(1, 1, 1) } }@keyframes bounceIn { 0%,20%,40%,60%,80%,100% { transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1) } 0% { opacity:0; -webkit-transform:scale3d(0.3, 0.3, 0.3); transform:scale3d(0.3, 0.3, 0.3) } 20% { -webkit-transform:scale3d(1.1, 1.1, 1.1); transform:scale3d(1.1, 1.1, 1.1) } 40% { -webkit-transform:scale3d(0.9, 0.9, 0.9); transform:scale3d(0.9, 0.9, 0.9) } 60% { opacity:1; -webkit-transform:scale3d(1.03, 1.03, 1.03); transform:scale3d(1.03, 1.03, 1.03) } 80% { -webkit-transform:scale3d(0.97, 0.97, 0.97); transform:scale3d(0.97, 0.97, 0.97) } 100% { opacity:1; -webkit-transform:scale3d(1, 1, 1); transform:scale3d(1, 1, 1) } }.bounceIn { -webkit-animation-name:bounceIn; animation-name:bounceIn; -webkit-animation-duration:.75s; animation-duration:.75s } @-webkit-keyframes bounceInDown { 0%,60%,75%,90%,100% { transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1) } 0% { opacity:0; -webkit-transform:translate3d(0, -3000px, 0); transform:translate3d(0, -3000px, 0) } 60% { opacity:1; -webkit-transform:translate3d(0, 25px, 0); transform:translate3d(0, 25px, 0) } 75% { -webkit-transform:translate3d(0, -10px, 0); transform:translate3d(0, -10px, 0) } 90% { -webkit-transform:translate3d(0, 5px, 0); transform:translate3d(0, 5px, 0) } 100% { -webkit-transform:none; transform:none } }@keyframes bounceInDown { 0%,60%,75%,90%,100% { transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1) } 0% { opacity:0; -webkit-transform:translate3d(0, -3000px, 0); transform:translate3d(0, -3000px, 0) } 60% { opacity:1; -webkit-transform:translate3d(0, 25px, 0); transform:translate3d(0, 25px, 0) } 75% { -webkit-transform:translate3d(0, -10px, 0); transform:translate3d(0, -10px, 0) } 90% { -webkit-transform:translate3d(0, 5px, 0); transform:translate3d(0, 5px, 0) } 100% { -webkit-transform:none; transform:none } }.bounceInDown { -webkit-animation-name:bounceInDown; animation-name:bounceInDown } @-webkit-keyframes bounceInLeft { 0%,60%,75%,90%,100% { transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1) } 0% { opacity:0; -webkit-transform:translate3d(-3000px, 0, 0); transform:translate3d(-3000px, 0, 0) } 60% { opacity:1; -webkit-transform:translate3d(25px, 0, 0); transform:translate3d(25px, 0, 0) } 75% { -webkit-transform:translate3d(-10px, 0, 0); transform:translate3d(-10px, 0, 0) } 90% { -webkit-transform:translate3d(5px, 0, 0); transform:translate3d(5px, 0, 0) } 100% { -webkit-transform:none; transform:none } }@keyframes bounceInLeft { 0%,60%,75%,90%,100% { transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1) } 0% { opacity:0; -webkit-transform:translate3d(-3000px, 0, 0); transform:translate3d(-3000px, 0, 0) } 60% { opacity:1; -webkit-transform:translate3d(25px, 0, 0); transform:translate3d(25px, 0, 0) } 75% { -webkit-transform:translate3d(-10px, 0, 0); transform:translate3d(-10px, 0, 0) } 90% { -webkit-transform:translate3d(5px, 0, 0); transform:translate3d(5px, 0, 0) } 100% { -webkit-transform:none; transform:none } }.bounceInLeft { -webkit-animation-name:bounceInLeft; animation-name:bounceInLeft } @-webkit-keyframes bounceInRight { 0%,60%,75%,90%,100% { transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1) } 0% { opacity:0; -webkit-transform:translate3d(3000px, 0, 0); transform:translate3d(3000px, 0, 0) } 60% { opacity:1; -webkit-transform:translate3d(-25px, 0, 0); transform:translate3d(-25px, 0, 0) } 75% { -webkit-transform:translate3d(10px, 0, 0); transform:translate3d(10px, 0, 0) } 90% { -webkit-transform:translate3d(-5px, 0, 0); transform:translate3d(-5px, 0, 0) } 100% { -webkit-transform:none; transform:none } }@keyframes bounceInRight { 0%,60%,75%,90%,100% { transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1) } 0% { opacity:0; -webkit-transform:translate3d(3000px, 0, 0); transform:translate3d(3000px, 0, 0) } 60% { opacity:1; -webkit-transform:translate3d(-25px, 0, 0); transform:translate3d(-25px, 0, 0) } 75% { -webkit-transform:translate3d(10px, 0, 0); transform:translate3d(10px, 0, 0) } 90% { -webkit-transform:translate3d(-5px, 0, 0); transform:translate3d(-5px, 0, 0) } 100% { -webkit-transform:none; transform:none } }.bounceInRight { -webkit-animation-name:bounceInRight; animation-name:bounceInRight } @-webkit-keyframes bounceInUp { 0%,60%,75%,90%,100% { transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1) } 0% { opacity:0; -webkit-transform:translate3d(0, 3000px, 0); transform:translate3d(0, 3000px, 0) } 60% { opacity:1; -webkit-transform:translate3d(0, -20px, 0); transform:translate3d(0, -20px, 0) } 75% { -webkit-transform:translate3d(0, 10px, 0); transform:translate3d(0, 10px, 0) } 90% { -webkit-transform:translate3d(0, -5px, 0); transform:translate3d(0, -5px, 0) } 100% { -webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0) } }@keyframes bounceInUp { 0%,60%,75%,90%,100% { transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1) } 0% { opacity:0; -webkit-transform:translate3d(0, 3000px, 0); transform:translate3d(0, 3000px, 0) } 60% { opacity:1; -webkit-transform:translate3d(0, -20px, 0); transform:translate3d(0, -20px, 0) } 75% { -webkit-transform:translate3d(0, 10px, 0); transform:translate3d(0, 10px, 0) } 90% { -webkit-transform:translate3d(0, -5px, 0); transform:translate3d(0, -5px, 0) } 100% { -webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0) } }.bounceInUp { -webkit-animation-name:bounceInUp; animation-name:bounceInUp } @-webkit-keyframes bounceOut { 20% { -webkit-transform:scale3d(0.9, 0.9, 0.9); transform:scale3d(0.9, 0.9, 0.9) } 50%,55% { opacity:1; -webkit-transform:scale3d(1.1, 1.1, 1.1); transform:scale3d(1.1, 1.1, 1.1) } 100% { opacity:0; -webkit-transform:scale3d(0.3, 0.3, 0.3); transform:scale3d(0.3, 0.3, 0.3) } }@keyframes bounceOut { 20% { -webkit-transform:scale3d(0.9, 0.9, 0.9); transform:scale3d(0.9, 0.9, 0.9) } 50%,55% { opacity:1; -webkit-transform:scale3d(1.1, 1.1, 1.1); transform:scale3d(1.1, 1.1, 1.1) } 100% { opacity:0; -webkit-transform:scale3d(0.3, 0.3, 0.3); transform:scale3d(0.3, 0.3, 0.3) } }.bounceOut { -webkit-animation-name:bounceOut; animation-name:bounceOut; -webkit-animation-duration:.75s; animation-duration:.75s } @-webkit-keyframes bounceOutDown { 20% { -webkit-transform:translate3d(0, 10px, 0); transform:translate3d(0, 10px, 0) } 40%,45% { opacity:1; -webkit-transform:translate3d(0, -20px, 0); transform:translate3d(0, -20px, 0) } 100% { opacity:0; -webkit-transform:translate3d(0, 2000px, 0); transform:translate3d(0, 2000px, 0) } }@keyframes bounceOutDown { 20% { -webkit-transform:translate3d(0, 10px, 0); transform:translate3d(0, 10px, 0) } 40%,45% { opacity:1; -webkit-transform:translate3d(0, -20px, 0); transform:translate3d(0, -20px, 0) } 100% { opacity:0; -webkit-transform:translate3d(0, 2000px, 0); transform:translate3d(0, 2000px, 0) } }.bounceOutDown { -webkit-animation-name:bounceOutDown; animation-name:bounceOutDown } @-webkit-keyframes bounceOutLeft { 20% { opacity:1; -webkit-transform:translate3d(20px, 0, 0); transform:translate3d(20px, 0, 0) } 100% { opacity:0; -webkit-transform:translate3d(-2000px, 0, 0); transform:translate3d(-2000px, 0, 0) } }@keyframes bounceOutLeft { 20% { opacity:1; -webkit-transform:translate3d(20px, 0, 0); transform:translate3d(20px, 0, 0) } 100% { opacity:0; -webkit-transform:translate3d(-2000px, 0, 0); transform:translate3d(-2000px, 0, 0) } }.bounceOutLeft { -webkit-animation-name:bounceOutLeft; animation-name:bounceOutLeft } @-webkit-keyframes bounceOutRight { 20% { opacity:1; -webkit-transform:translate3d(-20px, 0, 0); transform:translate3d(-20px, 0, 0) } 100% { opacity:0; -webkit-transform:translate3d(2000px, 0, 0); transform:translate3d(2000px, 0, 0) } }@keyframes bounceOutRight { 20% { opacity:1; -webkit-transform:translate3d(-20px, 0, 0); transform:translate3d(-20px, 0, 0) } 100% { opacity:0; -webkit-transform:translate3d(2000px, 0, 0); transform:translate3d(2000px, 0, 0) } }.bounceOutRight { -webkit-animation-name:bounceOutRight; animation-name:bounceOutRight } @-webkit-keyframes bounceOutUp { 20% { -webkit-transform:translate3d(0, -10px, 0); transform:translate3d(0, -10px, 0) } 40%,45% { opacity:1; -webkit-transform:translate3d(0, 20px, 0); transform:translate3d(0, 20px, 0) } 100% { opacity:0; -webkit-transform:translate3d(0, -2000px, 0); transform:translate3d(0, -2000px, 0) } }@keyframes bounceOutUp { 20% { -webkit-transform:translate3d(0, -10px, 0); transform:translate3d(0, -10px, 0) } 40%,45% { opacity:1; -webkit-transform:translate3d(0, 20px, 0); transform:translate3d(0, 20px, 0) } 100% { opacity:0; -webkit-transform:translate3d(0, -2000px, 0); transform:translate3d(0, -2000px, 0) } }.bounceOutUp { -webkit-animation-name:bounceOutUp; animation-name:bounceOutUp } @-webkit-keyframes fadeIn { 0% { opacity:0 } 100% { opacity:1 } }@keyframes fadeIn { 0% { opacity:0 } 100% { opacity:1 } }.fadeIn { -webkit-animation-name:fadeIn; animation-name:fadeIn } @-webkit-keyframes fadeInDown { 0% { opacity:0; -webkit-transform:translate3d(0, -100%, 0); transform:translate3d(0, -100%, 0) } 100% { opacity:1; -webkit-transform:none; transform:none } }@keyframes fadeInDown { 0% { opacity:0; -webkit-transform:translate3d(0, -100%, 0); transform:translate3d(0, -100%, 0) } 100% { opacity:1; -webkit-transform:none; transform:none } }.fadeInDown { -webkit-animation-name:fadeInDown; animation-name:fadeInDown } @-webkit-keyframes fadeInDownBig { 0% { opacity:0; -webkit-transform:translate3d(0, -2000px, 0); transform:translate3d(0, -2000px, 0) } 100% { opacity:1; -webkit-transform:none; transform:none } }@keyframes fadeInDownBig { 0% { opacity:0; -webkit-transform:translate3d(0, -2000px, 0); transform:translate3d(0, -2000px, 0) } 100% { opacity:1; -webkit-transform:none; transform:none } }.fadeInDownBig { -webkit-animation-name:fadeInDownBig; animation-name:fadeInDownBig } @-webkit-keyframes fadeInLeft { 0% { opacity:0; -webkit-transform:translate3d(-100%, 0, 0); transform:translate3d(-100%, 0, 0) } 100% { opacity:1; -webkit-transform:none; transform:none } }@keyframes fadeInLeft { 0% { opacity:0; -webkit-transform:translate3d(-100%, 0, 0); transform:translate3d(-100%, 0, 0) } 100% { opacity:1; -webkit-transform:none; transform:none } }.fadeInLeft { -webkit-animation-name:fadeInLeft; animation-name:fadeInLeft } @-webkit-keyframes fadeInLeftBig { 0% { opacity:0; -webkit-transform:translate3d(-2000px, 0, 0); transform:translate3d(-2000px, 0, 0) } 100% { opacity:1; -webkit-transform:none; transform:none } }@keyframes fadeInLeftBig { 0% { opacity:0; -webkit-transform:translate3d(-2000px, 0, 0); transform:translate3d(-2000px, 0, 0) } 100% { opacity:1; -webkit-transform:none; transform:none } }.fadeInLeftBig { -webkit-animation-name:fadeInLeftBig; animation-name:fadeInLeftBig } @-webkit-keyframes fadeInRight { 0% { opacity:0; -webkit-transform:translate3d(100%, 0, 0); transform:translate3d(100%, 0, 0) } 100% { opacity:1; -webkit-transform:none; transform:none } }@keyframes fadeInRight { 0% { opacity:0; -webkit-transform:translate3d(100%, 0, 0); transform:translate3d(100%, 0, 0) } 100% { opacity:1; -webkit-transform:none; transform:none } }.fadeInRight { -webkit-animation-name:fadeInRight; animation-name:fadeInRight } @-webkit-keyframes fadeInRightBig { 0% { opacity:0; -webkit-transform:translate3d(2000px, 0, 0); transform:translate3d(2000px, 0, 0) } 100% { opacity:1; -webkit-transform:none; transform:none } }@keyframes fadeInRightBig { 0% { opacity:0; -webkit-transform:translate3d(2000px, 0, 0); transform:translate3d(2000px, 0, 0) } 100% { opacity:1; -webkit-transform:none; transform:none } }.fadeInRightBig { -webkit-animation-name:fadeInRightBig; animation-name:fadeInRightBig } @-webkit-keyframes fadeInUp { 0% { opacity:0; -webkit-transform:translate3d(0, 100%, 0); transform:translate3d(0, 100%, 0) } 100% { opacity:1; -webkit-transform:none; transform:none } }@keyframes fadeInUp { 0% { opacity:0; -webkit-transform:translate3d(0, 100%, 0); transform:translate3d(0, 100%, 0) } 100% { opacity:1; -webkit-transform:none; transform:none } }.fadeInUp { -webkit-animation-name:fadeInUp; animation-name:fadeInUp } @-webkit-keyframes fadeInUpBig { 0% { opacity:0; -webkit-transform:translate3d(0, 2000px, 0); transform:translate3d(0, 2000px, 0) } 100% { opacity:1; -webkit-transform:none; transform:none } }@keyframes fadeInUpBig { 0% { opacity:0; -webkit-transform:translate3d(0, 2000px, 0); transform:translate3d(0, 2000px, 0) } 100% { opacity:1; -webkit-transform:none; transform:none } }.fadeInUpBig { -webkit-animation-name:fadeInUpBig; animation-name:fadeInUpBig } @-webkit-keyframes fadeOut { 0% { opacity:1 } 100% { opacity:0 } }@keyframes fadeOut { 0% { opacity:1 } 100% { opacity:0 } }.fadeOut { -webkit-animation-name:fadeOut; animation-name:fadeOut } @-webkit-keyframes fadeOutDown { 0% { opacity:1 } 100% { opacity:0; -webkit-transform:translate3d(0, 100%, 0); transform:translate3d(0, 100%, 0) } }@keyframes fadeOutDown { 0% { opacity:1 } 100% { opacity:0; -webkit-transform:translate3d(0, 100%, 0); transform:translate3d(0, 100%, 0) } }.fadeOutDown { -webkit-animation-name:fadeOutDown; animation-name:fadeOutDown } @-webkit-keyframes fadeOutDownBig { 0% { opacity:1 } 100% { opacity:0; -webkit-transform:translate3d(0, 2000px, 0); transform:translate3d(0, 2000px, 0) } }@keyframes fadeOutDownBig { 0% { opacity:1 } 100% { opacity:0; -webkit-transform:translate3d(0, 2000px, 0); transform:translate3d(0, 2000px, 0) } }.fadeOutDownBig { -webkit-animation-name:fadeOutDownBig; animation-name:fadeOutDownBig } @-webkit-keyframes fadeOutLeft { 0% { opacity:1 } 100% { opacity:0; -webkit-transform:translate3d(-100%, 0, 0); transform:translate3d(-100%, 0, 0) } }@keyframes fadeOutLeft { 0% { opacity:1 } 100% { opacity:0; -webkit-transform:translate3d(-100%, 0, 0); transform:translate3d(-100%, 0, 0) } }.fadeOutLeft { -webkit-animation-name:fadeOutLeft; animation-name:fadeOutLeft } @-webkit-keyframes fadeOutLeftBig { 0% { opacity:1 } 100% { opacity:0; -webkit-transform:translate3d(-2000px, 0, 0); transform:translate3d(-2000px, 0, 0) } }@keyframes fadeOutLeftBig { 0% { opacity:1 } 100% { opacity:0; -webkit-transform:translate3d(-2000px, 0, 0); transform:translate3d(-2000px, 0, 0) } }.fadeOutLeftBig { -webkit-animation-name:fadeOutLeftBig; animation-name:fadeOutLeftBig } @-webkit-keyframes fadeOutRight { 0% { opacity:1 } 100% { opacity:0; -webkit-transform:translate3d(100%, 0, 0); transform:translate3d(100%, 0, 0) } }@keyframes fadeOutRight { 0% { opacity:1 } 100% { opacity:0; -webkit-transform:translate3d(100%, 0, 0); transform:translate3d(100%, 0, 0) } }.fadeOutRight { -webkit-animation-name:fadeOutRight; animation-name:fadeOutRight } @-webkit-keyframes fadeOutRightBig { 0% { opacity:1 } 100% { opacity:0; -webkit-transform:translate3d(2000px, 0, 0); transform:translate3d(2000px, 0, 0) } }@keyframes fadeOutRightBig { 0% { opacity:1 } 100% { opacity:0; -webkit-transform:translate3d(2000px, 0, 0); transform:translate3d(2000px, 0, 0) } }.fadeOutRightBig { -webkit-animation-name:fadeOutRightBig; animation-name:fadeOutRightBig } @-webkit-keyframes fadeOutUp { 0% { opacity:1 } 100% { opacity:0; -webkit-transform:translate3d(0, -100%, 0); transform:translate3d(0, -100%, 0) } }@keyframes fadeOutUp { 0% { opacity:1 } 100% { opacity:0; -webkit-transform:translate3d(0, -100%, 0); transform:translate3d(0, -100%, 0) } }.fadeOutUp { -webkit-animation-name:fadeOutUp; animation-name:fadeOutUp } @-webkit-keyframes fadeOutUpBig { 0% { opacity:1 } 100% { opacity:0; -webkit-transform:translate3d(0, -2000px, 0); transform:translate3d(0, -2000px, 0) } }@keyframes fadeOutUpBig { 0% { opacity:1 } 100% { opacity:0; -webkit-transform:translate3d(0, -2000px, 0); transform:translate3d(0, -2000px, 0) } }.fadeOutUpBig { -webkit-animation-name:fadeOutUpBig; animation-name:fadeOutUpBig } @-webkit-keyframes flip { 0% { -webkit-transform:perspective(400px) rotate3d(0, 1, 0, -360deg); transform:perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function:ease-out; animation-timing-function:ease-out } 40% { -webkit-transform:perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform:perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function:ease-out; animation-timing-function:ease-out } 50% { -webkit-transform:perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform:perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function:ease-in; animation-timing-function:ease-in } 80% { -webkit-transform:perspective(400px) scale3d(0.95, 0.95, 0.95); transform:perspective(400px) scale3d(0.95, 0.95, 0.95); -webkit-animation-timing-function:ease-in; animation-timing-function:ease-in } 100% { -webkit-transform:perspective(400px); transform:perspective(400px); -webkit-animation-timing-function:ease-in; animation-timing-function:ease-in } }@keyframes flip { 0% { -webkit-transform:perspective(400px) rotate3d(0, 1, 0, -360deg); transform:perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function:ease-out; animation-timing-function:ease-out } 40% { -webkit-transform:perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform:perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function:ease-out; animation-timing-function:ease-out } 50% { -webkit-transform:perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform:perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function:ease-in; animation-timing-function:ease-in } 80% { -webkit-transform:perspective(400px) scale3d(0.95, 0.95, 0.95); transform:perspective(400px) scale3d(0.95, 0.95, 0.95); -webkit-animation-timing-function:ease-in; animation-timing-function:ease-in } 100% { -webkit-transform:perspective(400px); transform:perspective(400px); -webkit-animation-timing-function:ease-in; animation-timing-function:ease-in } }.animated.flip { -webkit-backface-visibility:visible; backface-visibility:visible; -webkit-animation-name:flip; animation-name:flip } @-webkit-keyframes flipInX { 0% { -webkit-transform:perspective(400px) rotate3d(1, 0, 0, 90deg); transform:perspective(400px) rotate3d(1, 0, 0, 90deg); transition-timing-function:ease-in; opacity:0 } 40% { -webkit-transform:perspective(400px) rotate3d(1, 0, 0, -20deg); transform:perspective(400px) rotate3d(1, 0, 0, -20deg); transition-timing-function:ease-in } 60% { -webkit-transform:perspective(400px) rotate3d(1, 0, 0, 10deg); transform:perspective(400px) rotate3d(1, 0, 0, 10deg); opacity:1 } 80% { -webkit-transform:perspective(400px) rotate3d(1, 0, 0, -5deg); transform:perspective(400px) rotate3d(1, 0, 0, -5deg) } 100% { -webkit-transform:perspective(400px); transform:perspective(400px) } }@keyframes flipInX { 0% { -webkit-transform:perspective(400px) rotate3d(1, 0, 0, 90deg); transform:perspective(400px) rotate3d(1, 0, 0, 90deg); transition-timing-function:ease-in; opacity:0 } 40% { -webkit-transform:perspective(400px) rotate3d(1, 0, 0, -20deg); transform:perspective(400px) rotate3d(1, 0, 0, -20deg); transition-timing-function:ease-in } 60% { -webkit-transform:perspective(400px) rotate3d(1, 0, 0, 10deg); transform:perspective(400px) rotate3d(1, 0, 0, 10deg); opacity:1 } 80% { -webkit-transform:perspective(400px) rotate3d(1, 0, 0, -5deg); transform:perspective(400px) rotate3d(1, 0, 0, -5deg) } 100% { -webkit-transform:perspective(400px); transform:perspective(400px) } }.flipInX { -webkit-backface-visibility:visible !important; backface-visibility:visible !important; -webkit-animation-name:flipInX; animation-name:flipInX } @-webkit-keyframes flipInY { 0% { -webkit-transform:perspective(400px) rotate3d(0, 1, 0, 90deg); transform:perspective(400px) rotate3d(0, 1, 0, 90deg); transition-timing-function:ease-in; opacity:0 } 40% { -webkit-transform:perspective(400px) rotate3d(0, 1, 0, -20deg); transform:perspective(400px) rotate3d(0, 1, 0, -20deg); transition-timing-function:ease-in } 60% { -webkit-transform:perspective(400px) rotate3d(0, 1, 0, 10deg); transform:perspective(400px) rotate3d(0, 1, 0, 10deg); opacity:1 } 80% { -webkit-transform:perspective(400px) rotate3d(0, 1, 0, -5deg); transform:perspective(400px) rotate3d(0, 1, 0, -5deg) } 100% { -webkit-transform:perspective(400px); transform:perspective(400px) } }@keyframes flipInY { 0% { -webkit-transform:perspective(400px) rotate3d(0, 1, 0, 90deg); transform:perspective(400px) rotate3d(0, 1, 0, 90deg); transition-timing-function:ease-in; opacity:0 } 40% { -webkit-transform:perspective(400px) rotate3d(0, 1, 0, -20deg); transform:perspective(400px) rotate3d(0, 1, 0, -20deg); transition-timing-function:ease-in } 60% { -webkit-transform:perspective(400px) rotate3d(0, 1, 0, 10deg); transform:perspective(400px) rotate3d(0, 1, 0, 10deg); opacity:1 } 80% { -webkit-transform:perspective(400px) rotate3d(0, 1, 0, -5deg); transform:perspective(400px) rotate3d(0, 1, 0, -5deg) } 100% { -webkit-transform:perspective(400px); transform:perspective(400px) } }.flipInY { -webkit-backface-visibility:visible !important; backface-visibility:visible !important; -webkit-animation-name:flipInY; animation-name:flipInY } @-webkit-keyframes flipOutX { 0% { -webkit-transform:perspective(400px); transform:perspective(400px) } 30% { -webkit-transform:perspective(400px) rotate3d(1, 0, 0, -20deg); transform:perspective(400px) rotate3d(1, 0, 0, -20deg); opacity:1 } 100% { -webkit-transform:perspective(400px) rotate3d(1, 0, 0, 90deg); transform:perspective(400px) rotate3d(1, 0, 0, 90deg); opacity:0 } }@keyframes flipOutX { 0% { -webkit-transform:perspective(400px); transform:perspective(400px) } 30% { -webkit-transform:perspective(400px) rotate3d(1, 0, 0, -20deg); transform:perspective(400px) rotate3d(1, 0, 0, -20deg); opacity:1 } 100% { -webkit-transform:perspective(400px) rotate3d(1, 0, 0, 90deg); transform:perspective(400px) rotate3d(1, 0, 0, 90deg); opacity:0 } }.flipOutX { -webkit-animation-name:flipOutX; animation-name:flipOutX; -webkit-animation-duration:.75s; animation-duration:.75s; -webkit-backface-visibility:visible !important; backface-visibility:visible !important } @-webkit-keyframes flipOutY { 0% { -webkit-transform:perspective(400px); transform:perspective(400px) } 30% { -webkit-transform:perspective(400px) rotate3d(0, 1, 0, -15deg); transform:perspective(400px) rotate3d(0, 1, 0, -15deg); opacity:1 } 100% { -webkit-transform:perspective(400px) rotate3d(0, 1, 0, 90deg); transform:perspective(400px) rotate3d(0, 1, 0, 90deg); opacity:0 } }@keyframes flipOutY { 0% { -webkit-transform:perspective(400px); transform:perspective(400px) } 30% { -webkit-transform:perspective(400px) rotate3d(0, 1, 0, -15deg); transform:perspective(400px) rotate3d(0, 1, 0, -15deg); opacity:1 } 100% { -webkit-transform:perspective(400px) rotate3d(0, 1, 0, 90deg); transform:perspective(400px) rotate3d(0, 1, 0, 90deg); opacity:0 } }.flipOutY { -webkit-backface-visibility:visible !important; backface-visibility:visible !important; -webkit-animation-name:flipOutY; animation-name:flipOutY; -webkit-animation-duration:.75s; animation-duration:.75s } @-webkit-keyframes lightSpeedIn { 0% { -webkit-transform:translate3d(100%, 0, 0) skewX(-30deg); transform:translate3d(100%, 0, 0) skewX(-30deg); opacity:0 } 60% { -webkit-transform:skewX(20deg); transform:skewX(20deg); opacity:1 } 80% { -webkit-transform:skewX(-5deg); transform:skewX(-5deg); opacity:1 } 100% { -webkit-transform:none; transform:none; opacity:1 } }@keyframes lightSpeedIn { 0% { -webkit-transform:translate3d(100%, 0, 0) skewX(-30deg); transform:translate3d(100%, 0, 0) skewX(-30deg); opacity:0 } 60% { -webkit-transform:skewX(20deg); transform:skewX(20deg); opacity:1 } 80% { -webkit-transform:skewX(-5deg); transform:skewX(-5deg); opacity:1 } 100% { -webkit-transform:none; transform:none; opacity:1 } }.lightSpeedIn { -webkit-animation-name:lightSpeedIn; animation-name:lightSpeedIn; -webkit-animation-timing-function:ease-out; animation-timing-function:ease-out } @-webkit-keyframes lightSpeedOut { 0% { opacity:1 } 100% { -webkit-transform:translate3d(100%, 0, 0) skewX(30deg); transform:translate3d(100%, 0, 0) skewX(30deg); opacity:0 } }@keyframes lightSpeedOut { 0% { opacity:1 } 100% { -webkit-transform:translate3d(100%, 0, 0) skewX(30deg); transform:translate3d(100%, 0, 0) skewX(30deg); opacity:0 } }.lightSpeedOut { -webkit-animation-name:lightSpeedOut; animation-name:lightSpeedOut; -webkit-animation-timing-function:ease-in; animation-timing-function:ease-in } @-webkit-keyframes rotateIn {

0% { -webkit-transform-origin:center; transform-origin:center; -webkit-transform:rotate3d(0, 0, 1, -200deg); transform:rotate3d(0, 0, 1, -200deg); opacity:0 } 100% { -webkit-transform-origin:center; transform-origin:center; -webkit-transform:none; transform:none; opacity:1 } }@keyframes rotateIn { 0% { -webkit-transform-origin:center; transform-origin:center; -webkit-transform:rotate3d(0, 0, 1, -200deg); transform:rotate3d(0, 0, 1, -200deg); opacity:0 } 100% { -webkit-transform-origin:center; transform-origin:center; -webkit-transform:none; transform:none; opacity:1 } }.rotateIn { -webkit-animation-name:rotateIn; animation-name:rotateIn } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin:left bottom; transform-origin:left bottom; -webkit-transform:rotate3d(0, 0, 1, -45deg); transform:rotate3d(0, 0, 1, -45deg); opacity:0 } 100% { -webkit-transform-origin:left bottom; transform-origin:left bottom; -webkit-transform:none; transform:none; opacity:1 } }@keyframes rotateInDownLeft { 0% { -webkit-transform-origin:left bottom; transform-origin:left bottom; -webkit-transform:rotate3d(0, 0, 1, -45deg); transform:rotate3d(0, 0, 1, -45deg); opacity:0 } 100% { -webkit-transform-origin:left bottom; transform-origin:left bottom; -webkit-transform:none; transform:none; opacity:1 } }.rotateInDownLeft { -webkit-animation-name:rotateInDownLeft; animation-name:rotateInDownLeft } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin:right bottom; transform-origin:right bottom; -webkit-transform:rotate3d(0, 0, 1, 45deg); transform:rotate3d(0, 0, 1, 45deg); opacity:0 } 100% { -webkit-transform-origin:right bottom; transform-origin:right bottom; -webkit-transform:none; transform:none; opacity:1 } }@keyframes rotateInDownRight { 0% { -webkit-transform-origin:right bottom; transform-origin:right bottom; -webkit-transform:rotate3d(0, 0, 1, 45deg); transform:rotate3d(0, 0, 1, 45deg); opacity:0 } 100% { -webkit-transform-origin:right bottom; transform-origin:right bottom; -webkit-transform:none; transform:none; opacity:1 } }.rotateInDownRight { -webkit-animation-name:rotateInDownRight; animation-name:rotateInDownRight } @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin:left bottom; transform-origin:left bottom; -webkit-transform:rotate3d(0, 0, 1, 45deg); transform:rotate3d(0, 0, 1, 45deg); opacity:0 } 100% { -webkit-transform-origin:left bottom; transform-origin:left bottom; -webkit-transform:none; transform:none; opacity:1 } }@keyframes rotateInUpLeft { 0% { -webkit-transform-origin:left bottom; transform-origin:left bottom; -webkit-transform:rotate3d(0, 0, 1, 45deg); transform:rotate3d(0, 0, 1, 45deg); opacity:0 } 100% { -webkit-transform-origin:left bottom; transform-origin:left bottom; -webkit-transform:none; transform:none; opacity:1 } }.rotateInUpLeft { -webkit-animation-name:rotateInUpLeft; animation-name:rotateInUpLeft } @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin:right bottom; transform-origin:right bottom; -webkit-transform:rotate3d(0, 0, 1, -90deg); transform:rotate3d(0, 0, 1, -90deg); opacity:0 } 100% { -webkit-transform-origin:right bottom; transform-origin:right bottom; -webkit-transform:none; transform:none; opacity:1 } }@keyframes rotateInUpRight { 0% { -webkit-transform-origin:right bottom; transform-origin:right bottom; -webkit-transform:rotate3d(0, 0, 1, -90deg); transform:rotate3d(0, 0, 1, -90deg); opacity:0 } 100% { -webkit-transform-origin:right bottom; transform-origin:right bottom; -webkit-transform:none; transform:none; opacity:1 } }.rotateInUpRight { -webkit-animation-name:rotateInUpRight; animation-name:rotateInUpRight } @-webkit-keyframes rotateOut { 0% { -webkit-transform-origin:center; transform-origin:center; opacity:1 } 100% { -webkit-transform-origin:center; transform-origin:center; -webkit-transform:rotate3d(0, 0, 1, 200deg); transform:rotate3d(0, 0, 1, 200deg); opacity:0 } }@keyframes rotateOut { 0% { -webkit-transform-origin:center; transform-origin:center; opacity:1 } 100% { -webkit-transform-origin:center; transform-origin:center; -webkit-transform:rotate3d(0, 0, 1, 200deg); transform:rotate3d(0, 0, 1, 200deg); opacity:0 } }.rotateOut { -webkit-animation-name:rotateOut; animation-name:rotateOut } @-webkit-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin:left bottom; transform-origin:left bottom; opacity:1 } 100% { -webkit-transform-origin:left bottom; transform-origin:left bottom; -webkit-transform:rotate3d(0, 0, 1, 45deg); transform:rotate3d(0, 0, 1, 45deg); opacity:0 } }@keyframes rotateOutDownLeft { 0% { -webkit-transform-origin:left bottom; transform-origin:left bottom; opacity:1 } 100% { -webkit-transform-origin:left bottom; transform-origin:left bottom; -webkit-transform:rotate3d(0, 0, 1, 45deg); transform:rotate3d(0, 0, 1, 45deg); opacity:0 } }.rotateOutDownLeft { -webkit-animation-name:rotateOutDownLeft; animation-name:rotateOutDownLeft } @-webkit-keyframes rotateOutDownRight { 0% { -webkit-transform-origin:right bottom; transform-origin:right bottom; opacity:1 } 100% { -webkit-transform-origin:right bottom; transform-origin:right bottom; -webkit-transform:rotate3d(0, 0, 1, -45deg); transform:rotate3d(0, 0, 1, -45deg); opacity:0 } }@keyframes rotateOutDownRight { 0% { -webkit-transform-origin:right bottom; transform-origin:right bottom; opacity:1 } 100% { -webkit-transform-origin:right bottom; transform-origin:right bottom; -webkit-transform:rotate3d(0, 0, 1, -45deg); transform:rotate3d(0, 0, 1, -45deg); opacity:0 } }.rotateOutDownRight { -webkit-animation-name:rotateOutDownRight; animation-name:rotateOutDownRight } @-webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin:left bottom; transform-origin:left bottom; opacity:1 } 100% { -webkit-transform-origin:left bottom; transform-origin:left bottom; -webkit-transform:rotate3d(0, 0, 1, -45deg); transform:rotate3d(0, 0, 1, -45deg); opacity:0 } }@keyframes rotateOutUpLeft { 0% { -webkit-transform-origin:left bottom; transform-origin:left bottom; opacity:1 } 100% { -webkit-transform-origin:left bottom; transform-origin:left bottom; -webkit-transform:rotate3d(0, 0, 1, -45deg); transform:rotate3d(0, 0, 1, -45deg); opacity:0 } }.rotateOutUpLeft { -webkit-animation-name:rotateOutUpLeft; animation-name:rotateOutUpLeft } @-webkit-keyframes rotateOutUpRight { 0% { -webkit-transform-origin:right bottom; transform-origin:right bottom; opacity:1 } 100% { -webkit-transform-origin:right bottom; transform-origin:right bottom; -webkit-transform:rotate3d(0, 0, 1, 90deg); transform:rotate3d(0, 0, 1, 90deg); opacity:0 } }@keyframes rotateOutUpRight { 0% { -webkit-transform-origin:right bottom; transform-origin:right bottom; opacity:1 } 100% { -webkit-transform-origin:right bottom; transform-origin:right bottom; -webkit-transform:rotate3d(0, 0, 1, 90deg); transform:rotate3d(0, 0, 1, 90deg); opacity:0 } }.rotateOutUpRight { -webkit-animation-name:rotateOutUpRight; animation-name:rotateOutUpRight } @-webkit-keyframes hinge { 0% { -webkit-transform-origin:top left; transform-origin:top left; -webkit-animation-timing-function:ease-in-out; animation-timing-function:ease-in-out } 20%,60% { -webkit-transform:rotate3d(0, 0, 1, 80deg); transform:rotate3d(0, 0, 1, 80deg); -webkit-transform-origin:top left; transform-origin:top left; -webkit-animation-timing-function:ease-in-out; animation-timing-function:ease-in-out } 40%,80% { -webkit-transform:rotate3d(0, 0, 1, 60deg); transform:rotate3d(0, 0, 1, 60deg); -webkit-transform-origin:top left; transform-origin:top left; -webkit-animation-timing-function:ease-in-out; animation-timing-function:ease-in-out; opacity:1 } 100% { -webkit-transform:translate3d(0, 700px, 0); transform:translate3d(0, 700px, 0); opacity:0 } }@keyframes hinge { 0% { -webkit-transform-origin:top left; transform-origin:top left; -webkit-animation-timing-function:ease-in-out; animation-timing-function:ease-in-out } 20%,60% { -webkit-transform:rotate3d(0, 0, 1, 80deg); transform:rotate3d(0, 0, 1, 80deg); -webkit-transform-origin:top left; transform-origin:top left; -webkit-animation-timing-function:ease-in-out; animation-timing-function:ease-in-out } 40%,80% { -webkit-transform:rotate3d(0, 0, 1, 60deg); transform:rotate3d(0, 0, 1, 60deg); -webkit-transform-origin:top left; transform-origin:top left; -webkit-animation-timing-function:ease-in-out; animation-timing-function:ease-in-out; opacity:1 } 100% { -webkit-transform:translate3d(0, 700px, 0); transform:translate3d(0, 700px, 0); opacity:0 } }.hinge { -webkit-animation-name:hinge; animation-name:hinge } @-webkit-keyframes rollIn { 0% { opacity:0; -webkit-transform:translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform:translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg) } 100% { opacity:1; -webkit-transform:none; transform:none } }@keyframes rollIn { 0% { opacity:0; -webkit-transform:translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform:translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg) } 100% { opacity:1; -webkit-transform:none; transform:none } }.rollIn { -webkit-animation-name:rollIn; animation-name:rollIn } @-webkit-keyframes rollOut { 0% { opacity:1 } 100% { opacity:0; -webkit-transform:translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform:translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg) } }@keyframes rollOut { 0% { opacity:1 } 100% { opacity:0; -webkit-transform:translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform:translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg) } }.rollOut { -webkit-animation-name:rollOut; animation-name:rollOut } @-webkit-keyframes zoomIn { 0% { opacity:0; -webkit-transform:scale3d(0.3, 0.3, 0.3); transform:scale3d(0.3, 0.3, 0.3) } 50% { opacity:1 } }@keyframes zoomIn { 0% { opacity:0; -webkit-transform:scale3d(0.3, 0.3, 0.3); transform:scale3d(0.3, 0.3, 0.3) } 50% { opacity:1 } }.zoomIn { -webkit-animation-name:zoomIn; animation-name:zoomIn } @-webkit-keyframes zoomInDown { 0% { opacity:0; -webkit-transform:scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform:scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19) } 60% { opacity:1; -webkit-transform:scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform:scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1) } }@keyframes zoomInDown { 0% { opacity:0; -webkit-transform:scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform:scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19) } 60% { opacity:1; -webkit-transform:scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform:scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1) } }.zoomInDown { -webkit-animation-name:zoomInDown; animation-name:zoomInDown } @-webkit-keyframes zoomInLeft { 0% { opacity:0; -webkit-transform:scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform:scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19) } 60% { opacity:1; -webkit-transform:scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform:scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1) } }@keyframes zoomInLeft { 0% { opacity:0; -webkit-transform:scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform:scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19) } 60% { opacity:1; -webkit-transform:scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform:scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1) } }.zoomInLeft { -webkit-animation-name:zoomInLeft; animation-name:zoomInLeft } @-webkit-keyframes zoomInRight { 0% { opacity:0; -webkit-transform:scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform:scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19) } 60% { opacity:1; -webkit-transform:scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform:scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1) } }@keyframes zoomInRight { 0% { opacity:0; -webkit-transform:scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform:scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19) } 60% { opacity:1; -webkit-transform:scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform:scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1) } }.zoomInRight { -webkit-animation-name:zoomInRight; animation-name:zoomInRight } @-webkit-keyframes zoomInUp { 0% { opacity:0; -webkit-transform:scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform:scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19) } 60% { opacity:1; -webkit-transform:scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform:scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1) } }@keyframes zoomInUp { 0% { opacity:0; -webkit-transform:scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform:scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19) } 60% { opacity:1; -webkit-transform:scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform:scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1) } }.zoomInUp { -webkit-animation-name:zoomInUp; animation-name:zoomInUp } @-webkit-keyframes zoomOut { 0% { opacity:1 } 50% { opacity:0; -webkit-transform:scale3d(0.3, 0.3, 0.3); transform:scale3d(0.3, 0.3, 0.3) } 100% { opacity:0 } }@keyframes zoomOut { 0% { opacity:1 } 50% { opacity:0; -webkit-transform:scale3d(0.3, 0.3, 0.3); transform:scale3d(0.3, 0.3, 0.3) } 100% { opacity:0 } }.zoomOut { -webkit-animation-name:zoomOut; animation-name:zoomOut } @-webkit-keyframes zoomOutDown { 40% { opacity:1; -webkit-transform:scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform:scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19) } 100% { opacity:0; -webkit-transform:scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform:scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-transform-origin:center bottom; transform-origin:center bottom; -webkit-animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1) } }@keyframes zoomOutDown { 40% { opacity:1; -webkit-transform:scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform:scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19) } 100% { opacity:0; -webkit-transform:scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform:scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-transform-origin:center bottom; transform-origin:center bottom; -webkit-animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1) } }.zoomOutDown { -webkit-animation-name:zoomOutDown; animation-name:zoomOutDown } @-webkit-keyframes zoomOutLeft { 40% { opacity:1; -webkit-transform:scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform:scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0) } 100% { opacity:0; -webkit-transform:scale(0.1) translate3d(-2000px, 0, 0); transform:scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin:left center; transform-origin:left center } }@keyframes zoomOutLeft { 40% { opacity:1; -webkit-transform:scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform:scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0) } 100% { opacity:0; -webkit-transform:scale(0.1) translate3d(-2000px, 0, 0); transform:scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin:left center; transform-origin:left center } }.zoomOutLeft { -webkit-animation-name:zoomOutLeft; animation-name:zoomOutLeft } @-webkit-keyframes zoomOutRight { 40% { opacity:1; -webkit-transform:scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform:scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0) } 100% { opacity:0; -webkit-transform:scale(0.1) translate3d(2000px, 0, 0); transform:scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin:right center; transform-origin:right center } }@keyframes zoomOutRight { 40% { opacity:1; -webkit-transform:scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform:scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0) } 100% { opacity:0; -webkit-transform:scale(0.1) translate3d(2000px, 0, 0); transform:scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin:right center; transform-origin:right center } }.zoomOutRight { -webkit-animation-name:zoomOutRight; animation-name:zoomOutRight } @-webkit-keyframes zoomOutUp { 40% { opacity:1; -webkit-transform:scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform:scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19) } 100% { opacity:0; -webkit-transform:scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform:scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin:center bottom; transform-origin:center bottom; -webkit-animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1) } }@keyframes zoomOutUp { 40% { opacity:1; -webkit-transform:scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform:scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19) } 100% { opacity:0; -webkit-transform:scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform:scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin:center bottom; transform-origin:center bottom; -webkit-animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1) } }.zoomOutUp { -webkit-animation-name:zoomOutUp; animation-name:zoomOutUp } @-webkit-keyframes cw { 0% { -webkit-transform:rotate(0deg); transform:rotate(0deg) } 100% { -webkit-transform:rotate(360deg); transform:rotate(360deg) } }@keyframes cw { 0% { -webkit-transform:rotate(0deg); transform:rotate(0deg) } 100% { -webkit-transform:rotate(360deg); transform:rotate(360deg) } }@-webkit-keyframes ccw { 0% { -webkit-transform:rotate(0deg); transform:rotate(0deg) } 100% { -webkit-transform:rotate(-360deg); transform:rotate(-360deg) } }@keyframes ccw { 0% { -webkit-transform:rotate(0deg); transform:rotate(0deg) } 100% { -webkit-transform:rotate(-360deg); transform:rotate(-360deg) } }@-webkit-keyframes scan { 0% { top:10px } 50% { top:190px } 100% { top:10px } }@keyframes scan { 0% { top:10px } 50% { top:190px } 100% { top:10px } }@-webkit-keyframes spinner-rotate-outer { 0% { -webkit-transform:rotateZ(0deg); transform:rotateZ(0deg) } 100% { -webkit-transform:rotateZ(360deg); transform:rotateZ(360deg) } }@keyframes spinner-rotate-outer { 0% { -webkit-transform:rotateZ(0deg); transform:rotateZ(0deg) } 100% { -webkit-transform:rotateZ(360deg); transform:rotateZ(360deg) } }@-webkit-keyframes spinner-rotate-inner { 0% { -webkit-transform:rotateZ(60deg); transform:rotateZ(60deg) } 100% { -webkit-transform:rotateZ(420deg); transform:rotateZ(420deg) } }@keyframes spinner-rotate-inner { 0% { -webkit-transform:rotateZ(60deg); transform:rotateZ(60deg) } 100% { -webkit-transform:rotateZ(420deg); transform:rotateZ(420deg) } }@-webkit-keyframes spinner-rotate-single-1 { 0% { -webkit-transform:rotateZ(56deg); transform:rotateZ(56deg) } 20% { -webkit-transform:rotateZ(-132deg); transform:rotateZ(-132deg) } 40% { -webkit-transform:rotateZ(-250deg); transform:rotateZ(-250deg) } 60% { -webkit-transform:rotateZ(40deg); transform:rotateZ(40deg) } 70% { -webkit-transform:rotateZ(-80deg); transform:rotateZ(-80deg) } 100% { -webkit-transform:rotateZ(56deg); transform:rotateZ(56deg) } }@keyframes spinner-rotate-single-1 { 0% { -webkit-transform:rotateZ(56deg); transform:rotateZ(56deg) } 20% { -webkit-transform:rotateZ(-132deg); transform:rotateZ(-132deg) } 40% { -webkit-transform:rotateZ(-250deg); transform:rotateZ(-250deg) } 60% { -webkit-transform:rotateZ(40deg); transform:rotateZ(40deg) } 70% { -webkit-transform:rotateZ(-80deg); transform:rotateZ(-80deg) } 100% { -webkit-transform:rotateZ(56deg); transform:rotateZ(56deg) } }@-webkit-keyframes spinner-rotate-single-2 { 0% { -webkit-transform:rotateZ(-24deg); transform:rotateZ(-24deg) } 10% { -webkit-transform:rotateZ(142deg); transform:rotateZ(142deg) } 20% { -webkit-transform:rotateZ(-87deg); transform:rotateZ(-87deg) } 30% { -webkit-transform:rotateZ(-345deg); transform:rotateZ(-345deg) } 40% { -webkit-transform:rotateZ(86deg); transform:rotateZ(86deg) } 50% { -webkit-transform:rotateZ(175deg); transform:rotateZ(175deg) } 60% { -webkit-transform:rotateZ(-245deg); transform:rotateZ(-245deg) } 70% { -webkit-transform:rotateZ(4deg); transform:rotateZ(4deg) } 80% { -webkit-transform:rotateZ(-132deg); transform:rotateZ(-132deg) } 90% { -webkit-transform:rotateZ(345deg); transform:rotateZ(345deg) } 100% { -webkit-transform:rotateZ(-24deg); transform:rotateZ(-24deg) } }@keyframes spinner-rotate-single-2 { 0% { -webkit-transform:rotateZ(-24deg); transform:rotateZ(-24deg) } 10% { -webkit-transform:rotateZ(142deg); transform:rotateZ(142deg) } 20% { -webkit-transform:rotateZ(-87deg); transform:rotateZ(-87deg) } 30% { -webkit-transform:rotateZ(-345deg); transform:rotateZ(-345deg) } 40% { -webkit-transform:rotateZ(86deg); transform:rotateZ(86deg) } 50% { -webkit-transform:rotateZ(175deg); transform:rotateZ(175deg) } 60% { -webkit-transform:rotateZ(-245deg); transform:rotateZ(-245deg) } 70% { -webkit-transform:rotateZ(4deg); transform:rotateZ(4deg) } 80% { -webkit-transform:rotateZ(-132deg); transform:rotateZ(-132deg) } 90% { -webkit-transform:rotateZ(345deg); transform:rotateZ(345deg) } 100% { -webkit-transform:rotateZ(-24deg); transform:rotateZ(-24deg) } }@-webkit-keyframes rotates { 0% { -webkit-transform:rotate(0deg); transform:rotate(0deg) } 100% { -webkit-transform:rotate(720deg); transform:rotate(720deg) } }@keyframes rotates { 0% { -webkit-transform:rotate(0deg); transform:rotate(0deg) } 100% { -webkit-transform:rotate(720deg); transform:rotate(720deg) } }@-webkit-keyframes rotatesInvers { 0% { -webkit-transform:rotate(0deg); transform:rotate(0deg) } 100% { -webkit-transform:rotate(-720deg); transform:rotate(-720deg) } }@keyframes rotatesInvers { 0% { -webkit-transform:rotate(0deg); transform:rotate(0deg) } 100% { -webkit-transform:rotate(-720deg); transform:rotate(-720deg) } }@-webkit-keyframes roll { 0% { stroke-dashoffset:0 } 100% { stroke-dashoffset:150 } }@keyframes roll { 0% { stroke-dashoffset:0 } 100% { stroke-dashoffset:150 } }@-webkit-keyframes iconBgColor { 0% { background-color:transparent } 5% { background-color:#004a7c } 15% { background-color:#004a7c } 20% { background-color:transparent } }@keyframes iconBgColor { 0% { background-color:transparent } 5% { background-color:#004a7c } 15% { background-color:#004a7c } 20% { background-color:transparent } }@-webkit-keyframes iconColor { 0% { color:#004a7c } 5% { color:#fff } 15% { color:#fff } 20% { color:#004a7c } }@keyframes iconColor { 0% { color:#004a7c } 5% { color:#fff } 15% { color:#fff } 20% { color:#004a7c } }@-webkit-keyframes svgColor { 0% { fill:#004a7c } 25% { fill:#39898D } 50% { fill:#004a7c } 75% { fill:#39898D } 100% { fill:#004a7c } }@keyframes svgColor { 0% { fill:#004a7c } 25% { fill:#39898D } 50% { fill:#004a7c } 75% { fill:#39898D } 100% { fill:#004a7c } }@keyframes pulse { 0% { -webkit-transform:scale(0.1); transform:scale(0.1); opacity:0 } 1% { -webkit-transform:scale(0.1); transform:scale(0.1); opacity:.7 } 50% { -webkit-transform:scale(1.5); transform:scale(1.5); opacity:0 } 100% { -webkit-transform:scale(1.5); transform:scale(1.5); opacity:0 } }@keyframes fadeIn { 0% { opacity:0 } 100% { opacity:1 } }@-webkit-keyframes comeDown { 0% { opacity:0 } 100% { opacity:1; -webkit-transform:translateY(0); transform:translateY(0) } }@keyframes comeDown { 0% { opacity:0 } 100% { opacity:1; -webkit-transform:translateY(0); transform:translateY(0) } }@keyframes fadeInRight { 100% { opacity:1; -webkit-transform:translateX(0); transform:translateX(0) } }@-webkit-keyframes fadeInRightWide { 0% { opacity:0; -webkit-transform:translate3d(100%, 0, 0); transform:translate3d(100%, 0, 0) } 100% { opacity:1; -webkit-transform:none; transform:none } }@keyframes fadeInRightWide { 0% { opacity:0; -webkit-transform:translate3d(100%, 0, 0); transform:translate3d(100%, 0, 0) } 100% { opacity:1; -webkit-transform:none; transform:none } }@keyframes fadeInUp { 0% { opacity:0; -webkit-transform:translate3d(0, 100%, 0); transform:translate3d(0, 100%, 0) } 100% { opacity:1; -webkit-transform:none; transform:none } }@keyframes bounceIn { 0%,20%,40%,60%,80%,100% { transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1) } 0% { opacity:0; -webkit-transform:scale3d(0.3, 0.3, 0.3); transform:scale3d(0.3, 0.3, 0.3) } 20% { -webkit-transform:scale3d(1.1, 1.1, 1.1); transform:scale3d(1.1, 1.1, 1.1) } 40% { -webkit-transform:scale3d(0.9, 0.9, 0.9); transform:scale3d(0.9, 0.9, 0.9) } 60% { opacity:1; -webkit-transform:scale3d(1.03, 1.03, 1.03); transform:scale3d(1.03, 1.03, 1.03) } 80% { -webkit-transform:scale3d(0.97, 0.97, 0.97); transform:scale3d(0.97, 0.97, 0.97) } 100% { opacity:1; -webkit-transform:scale3d(1, 1, 1); transform:scale3d(1, 1, 1) } }.bounceIn { -webkit-animation-name:bounceIn; animation-name:bounceIn; -webkit-animation-duration:.75s; animation-duration:.75s } @keyframes bounceInLeft { 0%,60%,75%,90%,100% { transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1) } 0% { opacity:0; -webkit-transform:translate3d(-3000px, 0, 0); transform:translate3d(-3000px, 0, 0) } 60% { opacity:1; -webkit-transform:translate3d(25px, 0, 0); transform:translate3d(25px, 0, 0) } 75% { -webkit-transform:translate3d(-10px, 0, 0); transform:translate3d(-10px, 0, 0) } 90% { -webkit-transform:translate3d(5px, 0, 0); transform:translate3d(5px, 0, 0) } 100% { -webkit-transform:none; transform:none } }.bounceInLeft { -webkit-animation-name:bounceInLeft; animation-name:bounceInLeft } @keyframes bounceOut { 20% { -webkit-transform:scale3d(0.9, 0.9, 0.9); transform:scale3d(0.9, 0.9, 0.9) } 50%,55% { opacity:1; -webkit-transform:scale3d(1.1, 1.1, 1.1); transform:scale3d(1.1, 1.1, 1.1) } 100% { opacity:0; -webkit-transform:scale3d(0.3, 0.3, 0.3); transform:scale3d(0.3, 0.3, 0.3) } }.bounceOut { -webkit-animation-name:bounceOut; animation-name:bounceOut; -webkit-animation-duration:.75s; animation-duration:.75s } .animated { -webkit-animation-duration:1s; animation-duration:1s; -webkit-animation-fill-mode:both; animation-fill-mode:both } .grey.lighten-5 { background-color:#fafafa !important } .grey.lighten-4 { background-color:#f5f5f5 !important } .grey.lighten-3 { background-color:#eee !important } .grey.lighten-2 { background-color:#e0e0e0 !important } .grey.lighten-1 { background-color:#bdbdbd !important } .grey { background-color:#9e9e9e !important } .grey.darken-1 { background-color:#757575 !important } .grey.darken-2 { background-color:#616161 !important } .grey.darken-3 { background-color:#424242 !important } .grey.darken-4 { background-color:#212121 !important } .background-dark { background-color:#1A262F; color:#fff } html.lt-ie10 #loading,html.lt-ie10 .page-border { display:none } html.lt-ie10 body { text-align:center; background:#1A262F } html.lt-ie10 body.loading>* { display:block !important } html.lt-ie10 #content { position:absolute; top:50%; left:0; right:0; height:300px; margin-top:-150px } html.lt-ie10 body h1,html.lt-ie10 body h2,html.lt-ie10 body h3 { color:#fff } html.lt-ie10 body h1 { color:#004a7c; font-size:72px } html.lt-ie10 body h2 { font-size:28px; margin-top:65px } html.lt-ie10 body h2 a { color:#39898D } html.lt-ie10 body h2 a:hover,html.lt-ie10 body h2 a:focus { text-decoration:none } html.lt-ie10 .icon-list { margin:0 auto; margin-top:35px; width:355px; text-align:center } html.lt-ie10 .icon-list li { display:inline; float:left; margin:0 8px } html.lt-ie10 .icon-list li a { color:#fff; display:block; float:left; width:55px } html.lt-ie10 .icon-list li a span.icon { font-size:50px; display:block; margin-bottom:10px } html.lt-ie10 .icon-list li a span.icon-label { font-size:14px } html.lt-ie10 .icon-list li a:hover,html.lt-ie10 .icon-list li a:focus { color:#004a7c } @media (min-width: 1025px) { .hide-desktop { display:none !important } }@media (max-width: 1024px) and (min-width: 721px) { .hide-tablet { display:none !important } }@media (max-width: 720px) { .hide-mobile { display:none !important } }[class^="shadow-"] { border:1px solid rgba(0,0,0,0.06) } .shadow-1dp { box-shadow:0 1px 4px 0 rgba(0,0,0,0.04) } .shadow-2dp { box-shadow:0 2px 4px 0 rgba(0,0,0,0.04) } .shadow-3dp { box-shadow:0 3px 4px 0 rgba(0,0,0,0.04) } .shadow-4dp { box-shadow:0 4px 5px 0 rgba(0,0,0,0.04) } .shadow-6dp { box-shadow:0 6px 10px 0 rgba(0,0,0,0.04) } .shadow-8dp { box-shadow:0 8px 10px 1px rgba(0,0,0,0.04) } .shadow-16dp { box-shadow:0 16px 24px 2px rgba(0,0,0,0.04) } a { transition:all,0.4s,ease }

1. site-navigation

{ transition:all 0.2s ease-in-out }

1. site-navigation

{ transition:all 0.2s ease-in-out }

1. site-navigation>ul>li

{ transition:all 0.2s ease-in-out } body.page--home #home-navigation>a { opacity:0; transition:all 0.2s ease-in-out } body.page--home #home-navigation>a:first-child { -webkit-animation:fadeIn 120ms ease-in-out 240ms forwards; animation:fadeIn 120ms ease-in-out 240ms forwards } body.page--home #home-navigation>a:nth-child(2) { -webkit-animation:fadeIn 120ms ease-in-out 480ms forwards; animation:fadeIn 120ms ease-in-out 480ms forwards } body.page--home #home-navigation>a:nth-child(3) { -webkit-animation:fadeIn 120ms ease-in-out 720ms forwards; animation:fadeIn 120ms ease-in-out 720ms forwards } body.page--home #home-navigation>a:nth-child(4) { -webkit-animation:fadeIn 120ms ease-in-out 960ms forwards; animation:fadeIn 120ms ease-in-out 960ms forwards } body.page--home #home-navigation>a:nth-child(5) { -webkit-animation:fadeIn 120ms ease-in-out 1200ms forwards; animation:fadeIn 120ms ease-in-out 1200ms forwards } body.page--home #home-portfolio-list--wrapper { opacity:0; -webkit-animation:fadeInRightWide 800ms ease-in-out 1200ms forwards; animation:fadeInRightWide 800ms ease-in-out 1200ms forwards } body.page--home .main-content #about-us { opacity:0; -webkit-animation:fadeIn 1200ms ease-in 960ms forwards; animation:fadeIn 1200ms ease-in 960ms forwards } .gear-canvas .gear.normal { opacity:0; -webkit-animation:fadeIn 360ms ease-in 2000ms forwards; animation:fadeIn 360ms ease-in 2000ms forwards } .gear-canvas .gear.normal .gear-inner { -webkit-animation:cw 8s linear 3.5s infinite; animation:cw 8s linear 3.5s infinite } .gear-canvas .gear.large { opacity:0; -webkit-animation:fadeIn 360ms ease-in 1000ms forwards; animation:fadeIn 360ms ease-in 1000ms forwards } .gear-canvas .gear.large .gear-inner { -webkit-animation:ccw 8s linear 3.5s infinite; animation:ccw 8s linear 3.5s infinite } .gear-canvas .gear.middle { opacity:0; -webkit-animation:fadeIn 360ms ease-in 1500ms forwards; animation:fadeIn 360ms ease-in 1500ms forwards } .gear-canvas .gear.middle .gear-inner { -webkit-animation:cw 8s linear 3.5s infinite; animation:cw 8s linear 3.5s infinite } .gear-canvas .gear.small { opacity:0; -webkit-animation:fadeIn 360ms ease-in 2500ms forwards; animation:fadeIn 360ms ease-in 2500ms forwards } .gear-canvas .gear.small .gear-inner { -webkit-animation:ccw 8s linear 3.5s infinite; animation:ccw 8s linear 3.5s infinite } .gear-canvas .gear.center { opacity:0; -webkit-animation:fadeIn 360ms ease-in 500ms forwards; animation:fadeIn 360ms ease-in 500ms forwards } .gear-canvas .gear.center .gear-inner { -webkit-animation:cw 8s linear 3.5s infinite; animation:cw 8s linear 3.5s infinite } .gear-canvas .gear-area-c { opacity:0; -webkit-animation:fadeIn 360ms ease-in 2500ms forwards; animation:fadeIn 360ms ease-in 2500ms forwards } .gear-canvas .gear-area-c .one .gear-inner { -webkit-animation:cw 8s linear 3.5s infinite; animation:cw 8s linear 3.5s infinite } .gear-canvas .gear-area-c .two .gear-inner { -webkit-animation:ccw 8s linear 3.5s infinite; animation:ccw 8s linear 3.5s infinite } .gear-canvas .gear-area-c .three .gear-inner { -webkit-animation:cw 8s linear 3.5s infinite; animation:cw 8s linear 3.5s infinite } .gear-canvas .gear-area-c .four { -webkit-transform:rotate(-30deg); transform:rotate(-30deg) } .gear-canvas .gear-area-c .four .gear-inner { -webkit-animation:ccw 8s linear 3.5s infinite; animation:ccw 8s linear 3.5s infinite } .gear-canvas .brain #laser { -webkit-animation:scan 3.5s linear infinite; animation:scan 3.5s linear infinite } .gear-canvas .chain-wapper { opacity:0; -webkit-animation:fadeIn 360ms ease-in 3000ms forwards; animation:fadeIn 360ms ease-in 3000ms forwards } .gear-canvas .chain-wapper svg { -webkit-animation:roll 4s linear 3.5s infinite; animation:roll 4s linear 3.5s infinite }

1. services-graphic .area-typo.left .typo-block,#services-graphic .area-typo.right .typo-block

{ opacity:0; -webkit-animation:fadeInRight 500ms ease-in 1.2s forwards; animation:fadeInRight 500ms ease-in 1.2s forwards }

1. services-graphic .area-typo.left .typo-block .typo-line,#services-graphic .area-typo.right .typo-block .typo-line

{ transition:all 0.7s ease 0s }

1. services-graphic .area-graphic a.icon

{ opacity:0 }

1. services-graphic .area-graphic .area-icon.left .top

{ -webkit-animation:fadeIn 500ms ease 1s forwards, iconBgColor 16s ease 2s infinite; animation:fadeIn 500ms ease 1s forwards, iconBgColor 16s ease 2s infinite }

1. services-graphic .area-graphic .area-icon.left .top span

{ -webkit-animation:iconColor 16s ease 2s infinite; animation:iconColor 16s ease 2s infinite }

1. services-graphic .area-graphic .area-icon.right .top

{ -webkit-animation:fadeIn 500ms ease 1s forwards, iconBgColor 16s ease 6s infinite; animation:fadeIn 500ms ease 1s forwards, iconBgColor 16s ease 6s infinite }

1. services-graphic .area-graphic .area-icon.right .top span

{ -webkit-animation:iconColor 16s ease 6s infinite; animation:iconColor 16s ease 6s infinite }

1. services-graphic .area-graphic .area-icon.right .bottom

{ -webkit-animation:fadeIn 500ms ease 1s forwards, iconBgColor 16s ease 10s infinite; animation:fadeIn 500ms ease 1s forwards, iconBgColor 16s ease 10s infinite }

1. services-graphic .area-graphic .area-icon.right .bottom span

{ -webkit-animation:iconColor 16s ease 10s infinite; animation:iconColor 16s ease 10s infinite }

1. services-graphic .area-graphic .area-icon.left .bottom

{ -webkit-animation:fadeIn 500ms ease 1s forwards, iconBgColor 16s ease 14s infinite; animation:fadeIn 500ms ease 1s forwards, iconBgColor 16s ease 14s infinite }

1. services-graphic .area-graphic .area-icon.left .bottom span

{ -webkit-animation:iconColor 16s ease 14s infinite; animation:iconColor 16s ease 14s infinite }

1. process-canvas .process-block.step-1,#process-canvas .process-block.step-2,#process-canvas .process-block.step-3

{ opacity:0; -webkit-transform:translateY(-50px); transform:translateY(-50px); -webkit-animation:comeDown 800ms 1.2s ease forwards; animation:comeDown 800ms 1.2s ease forwards }

1. process-canvas .process-block.step-4,#process-canvas .process-block.step-5,#process-canvas .process-block.step-6

{ opacity:0; -webkit-transform:translateY(50px); transform:translateY(50px); -webkit-animation:comeDown 800ms 2s ease forwards; animation:comeDown 800ms 2s ease forwards }

1. full-portfolio-list--wrapper

{ opacity:0; -webkit-animation:fadeInRightWide 800ms ease-in-out 240ms forwards; animation:fadeInRightWide 800ms ease-in-out 240ms forwards }

1. contact-preface h2

{ opacity:0; -webkit-transform:translateY(-50px); transform:translateY(-50px); -webkit-animation:comeDown 350ms 500ms ease forwards; animation:comeDown 350ms 500ms ease forwards }

1. contact-preface p

{ opacity:0; -webkit-transform:translateY(-50px); transform:translateY(-50px); -webkit-animation:comeDown 350ms 850ms ease forwards; animation:comeDown 350ms 850ms ease forwards }

1. contact-form .form-group

{ opacity:0; transition:all 0.2s ease-in-out }

1. contact-form .form-group:first-child

{ -webkit-animation:fadeIn 240ms ease-in-out 1200ms forwards; animation:fadeIn 240ms ease-in-out 1200ms forwards }

1. contact-form .form-group:nth-child(2)

{ -webkit-animation:fadeIn 240ms ease-in-out 1680ms forwards; animation:fadeIn 240ms ease-in-out 1680ms forwards }

1. contact-form .form-group:nth-child(3)

{ -webkit-animation:fadeIn 240ms ease-in-out 1920ms forwards; animation:fadeIn 240ms ease-in-out 1920ms forwards }

1. contact-form .form-group:nth-child(4)

{ -webkit-animation:fadeIn 240ms ease-in-out 2160ms forwards; animation:fadeIn 240ms ease-in-out 2160ms forwards }

1. contact-form .form-group:nth-child(5)

{ -webkit-animation:fadeIn 240ms ease-in-out 2400ms forwards; animation:fadeIn 240ms ease-in-out 2400ms forwards } nav.page-navi a { opacity:0; -webkit-animation:fadeIn 500ms ease-in 1.5s forwards; animation:fadeIn 500ms ease-in 1.5s forwards } .typo-display-1 { font-size:96px } .typo-display-1.large { font-size:120px } .typo-display-1.small { font-size:81.6px } .typo-display-2 { font-size:56px } .typo-display-2.large { font-size:70px } .typo-display-2.small { font-size:47.6px } .typo-display-3 { font-size:32px } .typo-display-3.large { font-size:40px } .typo-display-3.small { font-size:27.2px } .typo-display-4 { font-size:28px } .typo-display-4.large { font-size:35px } .typo-display-4.small { font-size:23.8px } .typo-headline { font-size:22px } .typo-headline.large { font-size:27.5px } .typo-headline.small { font-size:18.7px } .typo-title { font-size:20px } .typo-title.large { font-size:25px } .typo-title.small { font-size:17px } .typo-subhead { font-size:16px } .typo-subhead.large { font-size:20px } .typo-subhead.small { font-size:13.6px } .typo-body-2 { font-size:14px } .typo-body-2.large { font-size:17.5px } .typo-body-2.small { font-size:11.9px } .typo-body-1 { font-size:14px } .typo-body-1.large { font-size:17.5px } .typo-body-1.small { font-size:11.9px } .typo-caption { font-size:12px } .typo-caption.large { font-size:15px } .typo-caption.small { font-size:10.2px } .typo-blockquote { font-size:18px } .typo-blockquote.large { font-size:22.5px } .typo-blockquote.small { font-size:15.3px } .typo-menu { font-size:10px } .typo-menu.large { font-size:12.5px } .typo-menu.small { font-size:8.5px } .typo-button { font-size:12px } .typo-button.large { font-size:15px } .typo-button.small { font-size:10.2px } body { font-size:14px } h1 { font-family:"sofia-pro",sans-serif; text-transform:uppercase; font-size:56px; font-weight:700; line-height:1em; letter-spacing:2.8px; margin-top:24px; margin-bottom:24px } h1.large { font-size:70px } h2 { font-family:"sofia-pro",sans-serif; text-transform:uppercase; font-size:32px; font-weight:700; line-height:48px; letter-spacing:0.64px; margin-top:24px; margin-bottom:24px } h2.large { font-size:40px } h3 { font-family:"sofia-pro",sans-serif; text-transform:uppercase; font-size:28px; font-weight:700; line-height:40px; margin-top:24px; margin-bottom:24px } h3.large { font-size:35px } h4 { font-family:"sofia-pro",sans-serif; font-size:22px; font-weight:600; line-height:32px; letter-spacing:0.22px; margin-top:24px; margin-bottom:16px } h4.large { font-size:27.5px } h5 { font-family:"sofia-pro",sans-serif; font-size:20px; font-weight:500; line-height:28px; letter-spacing:0.2px; margin-top:24px; margin-bottom:16px } h5.large { font-size:25px } h6 { font-family:"sofia-pro",sans-serif; font-size:16px; font-weight:600; line-height:24px; letter-spacing:0.16px; margin-top:24px; margin-bottom:16px } h6.large { font-size:20px } p { font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; font-weight:400; line-height:1.5; letter-spacing:0; margin-bottom:16px } ul,ol,dl { font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; font-weight:400; line-height:1.5; letter-spacing:0 } blockquote { font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Helvetica Neue",Helvetica,Arial,sans-serif; position:relative; font-size:18px; font-weight:300; font-style:italic; line-height:1.35; letter-spacing:0.08em } blockquote:before { position:absolute; left:-0.5em; content:'“' } blockquote:after { content:'”'; margin-left:-0.05em } address { font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; font-weight:400; line-height:1.5; letter-spacing:0; font-style:normal } .typo-display-1 { font-family:"sofia-pro",sans-serif; text-transform:uppercase; font-size:96px; font-weight:400; line-height:1 } .typo-display-2 { font-family:"sofia-pro",sans-serif; text-transform:uppercase; font-size:56px; font-weight:700; line-height:1em; letter-spacing:2.8px } .typo-display-3 { font-family:"sofia-pro",sans-serif; text-transform:uppercase; font-size:32px; font-weight:700; line-height:48px; letter-spacing:0.64px } .typo-display-4 { font-family:"sofia-pro",sans-serif; text-transform:uppercase; font-size:28px; font-weight:700; line-height:40px } .typo-headline { font-family:"sofia-pro",sans-serif; font-size:22px; font-weight:600; line-height:32px; letter-spacing:0.22px } .typo-title { font-family:"sofia-pro",sans-serif; font-size:20px; font-weight:500; line-height:28px; letter-spacing:0.2px } .typo-subhead { font-family:"sofia-pro",sans-serif; font-size:16px; font-weight:600; line-height:24px; letter-spacing:0.16px } .typo-body-2 { font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; font-weight:500; line-height:1.4; letter-spacing:0 } .typo-body-1 { font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Helvetica Neue",Helvetica,Arial,sans-serif; font-size:14px; font-weight:400; line-height:1.5; letter-spacing:0 } .typo-caption { font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Helvetica Neue",Helvetica,Arial,sans-serif; font-size:12px; font-weight:400; line-height:1; letter-spacing:0 } .typo-menu { font-family:"sofia-pro",sans-serif; font-size:10px; font-weight:600; line-height:1em; letter-spacing:0.1em; text-transform:uppercase } .typo-menu.small { font-size:13px } .typo-button { font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Helvetica Neue",Helvetica,Arial,sans-serif; font-size:12px; font-weight:500; text-transform:uppercase; line-height:1em; letter-spacing:.28em; letter-spacing:0.28px } .small { font-size:85% } @font-face { font-family:'4eblabs'; src:url("../fonts/4eblabs.eot"); src:url("../fonts/4eblabs.eot") format("embedded-opentype"),url("../fonts/4eblabs.ttf") format("truetype"),url("../fonts/4eblabs.woff") format("woff"),url("../fonts/4eblabs.svg") format("svg"); font-weight:normal; font-style:normal } [class^="icon-"],[class*=" icon-"] { font-family:'4eblabs'; speak:none; font-style:normal; font-weight:normal; font-variant:normal; text-transform:none; line-height:1; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale } .icon-behance:before { content:"\e800" } .icon-calendar:before { content:"\e617" } .icon-stats:before { content:"\e618" } .icon-chrome:before { content:"\e61a" } .icon-firefox:before { content:"\e61b" } .icon-ie:before { content:"\e61c" } .icon-opera:before { content:"\e61d" } .icon-safari:before { content:"\e61e" } .icon-codepen:before { content:"\e619" } .icon-reorder:before { content:"\e071" } .icon-remove-circle:before { content:"\e074" } .icon-long-arrow-right:before { content:"\e0ad" } .icon-long-arrow-left:before { content:"\e0ae" } .icon-circle-arrow-right:before { content:"\e138" } .icon-circle-arrow-left:before { content:"\e139" } .icon-chevron-right:before { content:"\e13c" } .icon-chevron-left:before { content:"\e13d" } .icon-line-arrow-right:before { content:"\e166" } .icon-line-arrow-left:before { content:"\e167" } .icon-angle-right:before { content:"\e16d" } .icon-angle-left:before { content:"\e16e" } .icon-menu:before { content:"\e607" } .icon-gmail:before { content:"\e60a" } .icon-arrow-left:before { content:"\e600" } .icon-arrow-right:before { content:"\e601" } .icon-chart:before { content:"\e602" } .icon-check:before { content:"\e603" } .icon-css3:before { content:"\e604" } .icon-disk:before { content:"\e605" } .icon-dropbox:before { content:"\e606" } .icon-flowchart:before { content:"\e608" } .icon-git:before { content:"\e609" } .icon-grunt:before { content:"\e60b" } .icon-html5:before { content:"\e60c" } .icon-illustrator:before { content:"\e60d" } .icon-javascript:before { content:"\e60e" } .icon-modernizr:before { content:"\e60f" } .icon-mysql:before { content:"\e610" } .icon-omnigraffle:before { content:"\e611" } .icon-photoshop:before { content:"\e612" } .icon-php:before { content:"\e613" } .icon-sketch:before { content:"\e614" } .icon-skype:before { content:"\e615" } .icon-wordpress:before { content:"\e616" } .icon-mobile:before { content:"\e000" } .icon-search:before { content:"\e007" } .icon-browser:before { content:"\e00c" } .icon-expand:before { content:"\e01a" } .icon-lightbulb:before { content:"\e030" } .icon-pencil:before { content:"\e032" } .icon-tools:before { content:"\e033" } .icon-tools-2:before { content:"\e034" } .icon-paintbrush:before { content:"\e036" } .icon-heart:before { content:"\e04a" } .icon-upload:before { content:"\e04c" } .icon-facebook:before { content:"\e05d" } .icon-twitter:before { content:"\e05e" } .icon-googleplus:before { content:"\e05f" } .icon-tumblr:before { content:"\e061" } .icon-linkedin:before { content:"\e062" } .icon-dribbble:before { content:"\e063" } .text-capitalize { text-transform:capitalize !important } .text-uppercase { text-transform:uppercase !important } .text-lowercase { text-transform:lowercase !important } .text-center { text-align:center !important } .text-left { text-align:left !important } .text-right { text-align:right !important } .text-color-contrast-primary { color:rgba(0,0,0,0.87) } .text-color-contrast-secondary { color:rgba(0,0,0,0.54) } .text-color-contrast-hint { color:rgba(0,0,0,0.38) } .text-color-contrast-primary-alt { color:#fff } .text-color-contrast-secondary-alt { color:rgba(255,255,255,0.7) } .text-color-contrast-hint-alt { color:rgba(255,255,255,0.5) } .font-family-title { font-family:"sofia-pro",sans-serif } .font-family-body { font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Helvetica Neue",Helvetica,Arial,sans-serif } .font-ultra-thin { font-weight:100 !important } .font-thin { font-weight:200 !important } .font-light {

font-weight:300 !important } .font-regular { font-weight:400 !important } .font-medium { font-weight:500 !important } .font-semi-bold { font-weight:600 !important } .font-bold { font-weight:700 !important } .font-black { font-weight:900 !important } .font-icons { font-weight:normal; font-style:normal; font-size:24px; line-height:1; letter-spacing:normal; text-transform:none; display:inline-block; word-wrap:normal; font-feature-settings:'liga'; -webkit-font-feature-settings:'liga'; -webkit-font-smoothing:antialiased }

• ,*:before,*:after

{ box-sizing:border-box } body,h1,h2,h3,h4,h5,h6,p,blockquote,pre,hr,dl,dd,ol,ul,figure { margin:0; padding:0 } body { font:400 16px/1.5 -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Helvetica Neue",Helvetica,Arial,sans-serif; color:rgba(0,0,0,0.87); background-color:#f2f2f2; -webkit-text-size-adjust:100%; -webkit-font-feature-settings:"kern" 1; -o-font-feature-settings:"kern" 1; font-feature-settings:"kern" 1; -webkit-font-kerning:normal; font-kerning:normal } h1,h2,h3,h4,h5,h6,p,blockquote,pre,ul,ol,dl,figure { margin-bottom:12px } img { max-width:100%; vertical-align:middle; border:0 } img.full-width { width:100% !important } figure>img { display:block } figcaption { font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Helvetica Neue",Helvetica,Arial,sans-serif; font-size:12px; font-weight:400; line-height:1; letter-spacing:0 } ul,ol { list-style:none } li>ul,li>ol { margin-bottom:0 } a { color:rgba(0,0,0,0.87); text-decoration:none } a:hover,a:focus { color:#004a7c }

-moz-selection

{ background:#004a7c; color:#fff }

selection

{ background:#004a7c; color:#fff } blockquote { color:#828282; border-left:4px solid #e8e8e8; padding-left:12px } blockquote>:last-child { margin-bottom:0 } pre,code { font-size:15px; border:1px solid #e8e8e8; border-radius:3px; background-color:#eef } code { padding:1px 5px } pre { padding:8px 12px; overflow-x:auto } pre>code { border:0; padding-right:0; padding-left:0 } .wrapper { max-width:960px; margin-right:auto; margin-left:auto } @media-query (max-width: 1024px) { .wrapper { max-width:calc(960px - (24px)); padding-right:12px; padding-left:12px } }@media (max-width: 960px) { .wrapper { padding-left:24px; padding-right:24px } }.wrapper:after,.row:after,body.page--home #loading #landing-container #about-us:after { content:""; display:table; clear:both } .icon>svg { display:inline-block; vertical-align:middle } .icon>svg path { fill:#828282 } .line-drawing { transition:opacity 0.5s } .line-drawing path { fill:none } path.line-round { stroke-linecap:round } path.stroke-medium { stroke-width:1 } path.stroke-thin { stroke-width:1 } symbol g { fill:#f2f2f2 }

-webkit-scrollbar

{ display:none }

{ -ms-overflow-style:none } .circle { border-radius:100% } .show { opacity:1 } .hide { opacity:0 } .pull-left { float:left } .pull-right { float:right } .button { font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Helvetica Neue",Helvetica,Arial,sans-serif; font-size:12px; font-weight:500; text-transform:uppercase; line-height:1em; letter-spacing:.28em; letter-spacing:0.28px; height:36px; display:inline-block; text-align:center; line-height:36px; background-color:#004a7c; color:#fff !important; box-shadow:0 1px 4px 0 rgba(0,0,0,0.54); padding-left:1rem; padding-right:1rem } .button.fixed { width:96px } .button.extend { width:100% } .button:hover { background-color:#39898D; transition:all 0.3ms ease-in-out; -webkit-transition:all 0.3ms ease-in-out } .button.secondary { background-color:#39898D } .button.secondary:hover,.button.secondary:focus { background-color:#004a7c } .button.dark { background-color:#1A262F } .button.dark:hover,.button.dark:focus { background-color:#004a7c } .rippleEffect { -webkit-animation:rippleDrop 1s linear; animation:rippleDrop 1s linear } @-webkit-keyframes rippleDrop { 100% { -webkit-transform:scale(500); transform:scale(500) } }@keyframes rippleDrop { 100% { -webkit-transform:scale(500); transform:scale(500) } }.portfolio--4ocal-web-ui-kit { background:#F7CAC9 } .page--4ocal-web-ui-kit .page-border { border-color:#F7CAC9 } .page--4ocal-web-ui-kit .page-border .portfolio-nav-panel { background:#F7CAC9 } .page--4ocal-web-ui-kit .page-border .portfolio--classic .article-title { color:#F7CAC9 } .portfolio--4eeder-web-ui-kit { background:#034F84 } .page--4eeder-web-ui-kit .page-border { border-color:#034F84 } .page--4eeder-web-ui-kit .page-border .portfolio-nav-panel { background:#034F84 } .page--4eeder-web-ui-kit .page-border .portfolio--classic .article-title { color:#034F84 } .portfolio--4boutique-ecommerce-ui-kit { background:#C8A985 } .page--4boutique-ecommerce-ui-kit .page-border { border-color:#C8A985 } .page--4boutique-ecommerce-ui-kit .page-border .portfolio-nav-panel { background:#C8A985 } .page--4boutique-ecommerce-ui-kit .page-border .portfolio--classic .article-title { color:#C8A985 } .portfolio--baobaofaner-website { background:#FF66A4 } .page--baobaofaner-website .page-border { border-color:#FF66A4 } .page--baobaofaner-website .page-border .portfolio-nav-panel { background:#FF66A4 } .page--baobaofaner-website .page-border .portfolio--classic .article-title { color:#FF66A4 } .portfolio--kjnational-website { background:#4F7390 } .page--kjnational-website .page-border { border-color:#4F7390 } .page--kjnational-website .page-border .portfolio-nav-panel { background:#4F7390 } .page--kjnational-website .page-border .portfolio--classic .article-title { color:#4F7390 } .portfolio--the12volt-ecommerce-website { background:#d80c18 } .page--the12volt-ecommerce-website .page-border { border-color:#d80c18 } .page--the12volt-ecommerce-website .page-border .portfolio-nav-panel { background:#d80c18 } .page--the12volt-ecommerce-website .page-border .portfolio--classic .article-title { color:#d80c18 } .portfolio--akoralanecove-website { background:#98af38 } .page--akoralanecove-website .page-border { border-color:#98af38 } .page--akoralanecove-website .page-border .portfolio-nav-panel { background:#98af38 } .page--akoralanecove-website .page-border .portfolio--classic .article-title { color:#98af38 } .portfolio--4ebstudio-website { background:#004a7c } .page--4ebstudio-website .page-border { border-color:#004a7c } .page--4ebstudio-website .page-border .portfolio-nav-panel { background:#004a7c } .page--4ebstudio-website .page-border .portfolio--classic .article-title { color:#004a7c } .portfolio--htcmc-website { background:#35bc7a } .page--htcmc-website .page-border { border-color:#35bc7a } .page--htcmc-website .page-border .portfolio-nav-panel { background:#35bc7a } .page--htcmc-website .page-border .portfolio--classic .article-title { color:#35bc7a } .portfolio--4wow-template { background:#fc0 } .page--4wow-template .page-border { border-color:#fc0 } .page--4wow-template .page-border .portfolio-nav-panel { background:#fc0 } .page--4wow-template .page-border .portfolio--classic .article-title { color:#fc0 } .portfolio--myaushop-ecommerce-website { background:#afd9f5 } .page--myaushop-ecommerce-website .page-border { border-color:#afd9f5 } .page--myaushop-ecommerce-website .page-border .portfolio-nav-panel { background:#afd9f5 } .page--myaushop-ecommerce-website .page-border .portfolio--classic .article-title { color:#afd9f5 } .portfolio--4boutique-ecommerce-ui-kit { background-image:linear-gradient(219deg, #C8A985, #F0E3CC) } .page--4boutique-ecommerce-ui-kit .page-border { border-image-source:radial-gradient(circle at 17% 100%, #C8A985, #F0E3CC 33%, #F0E3CC 67%, #C8A985); border-image-slice:1 } .portfolio--applemusic-gui { background-image:radial-gradient(circle at 17% 100%, #e751be, #eb719d 33%, #9c62ea 67%, #4e54e6) } .portfolio--4wow-template { background-image:linear-gradient(219deg, #73E0B8, #fc0) } .page--4wow-template .page-border { border-image-source:linear-gradient(to left, #73e0b8, #73e0b8 50%, #fc0 50%, #fc0); border-image-slice:1 } .price-table { border:1px solid rgba(255,255,255,0.12); padding:48px 24px; height:100%; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-flow:column; flex-flow:column } .price-table.recommend { border:2px solid #004a7c } .price-table .price-table--header { text-align:center } .price-table .price { margin-top:32px; margin-bottom:32px; text-align:center } .price-table .price * { line-height:1em; margin:0 !important } .price-table .price .price--number { font-weight:200; letter-spacing:0 } .price-table .price .price--caption { font-family:"sofia-pro",sans-serif; font-size:10px; font-weight:600; line-height:1em; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.7) } .price-table .price .price--caption.small { font-size:13px } .price-table ul>li { line-height:1.7em; font-weight:300; letter-spacing:0.05em; padding-left:1em; position:relative } .price-table ul>li:before { content:"\00b7"; position:absolute; left:0 } .price-table footer.portfolio-table--footer { text-align:center; margin-top:1rem } .price-table footer.portfolio-table--footer .label { font-size:10px; text-transform:uppercase; color:#39898D; border:1px solid #39898D; padding:2px 4px } .price-table footer.portfolio-table--footer .market-links { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:horizontal; -webkit-box-direction:normal; -ms-flex-flow:row; flex-flow:row; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -ms-flex-pack:distribute; justify-content:space-around; margin-top:1rem } .price-table footer.portfolio-table--footer .market-links img { width:100px } .scroll-bar { width:360px; margin-left:24px; margin-top:60px; margin-bottom:24px; position:relative; border-bottom:1px dotted #c5c5c5 } @media (max-width: 480px) { .scroll-bar { width:240px } }.ui-slider-handle { position:absolute; top:-12px; bottom:-12px; left:24px; width:24px; height:24px; border-radius:50px; background:#39898D; box-shadow:0 2px 4px 0 rgba(0,0,0,0.5); cursor:move; outline:none; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:horizontal; -webkit-box-direction:normal; -ms-flex-flow:row; flex-flow:row; -webkit-box-align:center; -ms-flex-align:center; align-items:center; vertical-align:middle } .ui-slider-handle:first-of-type { display:none } .ui-slider-handle:before { content:"\2039"; width:50%; text-align:right; color:white; margin-top:-2px } .ui-slider-handle:after { content:"\203A"; width:50%; text-align:left; color:white; margin-top:-2px } .ui-slider-range { height:1px; margin-bottom:-1px; background:rgba(0,0,0,0.87) } .slides input { display:none } .slides #overflow { overflow:hidden } .slides figure img { width:100% } .slides #slides .inner { width:800%; line-height:0 } .slides #slides figure { width:12.5%; float:left; margin:0 } .slides #slide1:checked ~ #slides .inner { margin-left:0% } .slides #slide2:checked ~ #slides .inner { margin-left:-100% } .slides #slide3:checked ~ #slides .inner { margin-left:-200% } .slides #slide4:checked ~ #slides .inner { margin-left:-300% } .slides #slide5:checked ~ #slides .inner { margin-left:-400% } .slides #slide6:checked ~ #slides .inner { margin-left:-500% } .slides #slide7:checked ~ #slides .inner { margin-left:-600% } .slides #slide8:checked ~ #slides .inner { margin-left:-700% } .slides #controls { margin:-30% 0 0 0; width:100%; height:50px } .slides #controls label { display:none; width:50px; height:50px; opacity:0.3 } .slides #active { margin:28% 0 0; text-align:center } @media (max-width: 480px) { .slides #active { margin:10% 0 0 } }.slides #active label { border-radius:5px; display:inline-block; width:10px; height:10px; background:#999999; margin-left:4px; margin-right:4px } .slides #active label:hover { background:#ccc; border-color:#777 !important; cursor:pointer } .slides #controls label:hover { opacity:0.8; cursor:pointer } .slides #slide1:checked ~ #controls label:nth-child(2) { background:url("../images/arrow-next.png") no-repeat center; float:right; margin:0; display:block } @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) { .slides #slide1:checked ~ #controls label:nth-child(2) { background:url("../images/arrow-next@2x.png") no-repeat center; background-size:26px 47px } }.slides #slide2:checked ~ #controls label:nth-child(3) { background:url("../images/arrow-next.png") no-repeat center; float:right; margin:0; display:block } @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) { .slides #slide2:checked ~ #controls label:nth-child(3) { background:url("../images/arrow-next@2x.png") no-repeat center; background-size:26px 47px } }.slides #slide3:checked ~ #controls label:nth-child(4) { background:url("../images/arrow-next.png") no-repeat center; float:right; margin:0; display:block } @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) { .slides #slide3:checked ~ #controls label:nth-child(4) { background:url("../images/arrow-next@2x.png") no-repeat center; background-size:26px 47px } }.slides #slide4:checked ~ #controls label:nth-child(5) { background:url("../images/arrow-next.png") no-repeat center; float:right; margin:0; display:block } @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) { .slides #slide4:checked ~ #controls label:nth-child(5) { background:url("../images/arrow-next@2x.png") no-repeat center; background-size:26px 47px } }.slides #slide5:checked ~ #controls label:nth-child(6) { background:url("../images/arrow-next.png") no-repeat center; float:right; margin:0; display:block } @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) { .slides #slide5:checked ~ #controls label:nth-child(6) { background:url("../images/arrow-next@2x.png") no-repeat center; background-size:26px 47px } }.slides #slide6:checked ~ #controls label:nth-child(7) { background:url("../images/arrow-next.png") no-repeat center; float:right; margin:0; display:block } @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) { .slides #slide6:checked ~ #controls label:nth-child(7) { background:url("../images/arrow-next@2x.png") no-repeat center; background-size:26px 47px } }.slides #slide7:checked ~ #controls label:nth-child(8) { background:url("../images/arrow-next.png") no-repeat center; float:right; margin:0; display:block } @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) { .slides #slide7:checked ~ #controls label:nth-child(8) { background:url("../images/arrow-next@2x.png") no-repeat center; background-size:26px 47px } }.slides #slide8:checked ~ #controls label:nth-child(9) { background:url("../images/arrow-next.png") no-repeat center; float:right; margin:0; display:block } @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) { .slides #slide8:checked ~ #controls label:nth-child(9) { background:url("../images/arrow-next@2x.png") no-repeat center; background-size:26px 47px } }.slides #slide8:checked ~ #controls label:nth-child(1) { background:url("../images/arrow-next.png") no-repeat center; float:right; margin:0; display:block } @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) { .slides #slide8:checked ~ #controls label:nth-child(1) { background:url("../images/arrow-next@2x.png") no-repeat center; background-size:26px 47px } }.slides #slide1:checked ~ #controls label:nth-child(8) { background:url("../images/arrow-prev.png") no-repeat center; float:left; margin:0; display:block } @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) { .slides #slide1:checked ~ #controls label:nth-child(8) { background:url("../images/arrow-prev@2x.png") no-repeat center; background-size:26px 47px } }.slides #slide2:checked ~ #controls label:nth-child(1) { background:url("../images/arrow-prev.png") no-repeat center; float:left; margin:0; display:block } @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) { .slides #slide2:checked ~ #controls label:nth-child(1) { background:url("../images/arrow-prev@2x.png") no-repeat center; background-size:26px 47px } }.slides #slide3:checked ~ #controls label:nth-child(2) { background:url("../images/arrow-prev.png") no-repeat center; float:left; margin:0; display:block } @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) { .slides #slide3:checked ~ #controls label:nth-child(2) { background:url("../images/arrow-prev@2x.png") no-repeat center; background-size:26px 47px } }.slides #slide4:checked ~ #controls label:nth-child(3) { background:url("../images/arrow-prev.png") no-repeat center; float:left; margin:0; display:block } @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) { .slides #slide4:checked ~ #controls label:nth-child(3) { background:url("../images/arrow-prev@2x.png") no-repeat center; background-size:26px 47px } }.slides #slide5:checked ~ #controls label:nth-child(4) { background:url("../images/arrow-prev.png") no-repeat center; float:left; margin:0; display:block } @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) { .slides #slide5:checked ~ #controls label:nth-child(4) { background:url("../images/arrow-prev@2x.png") no-repeat center; background-size:26px 47px } }.slides #slide6:checked ~ #controls label:nth-child(5) { background:url("../images/arrow-prev.png") no-repeat center; float:left; margin:0; display:block } @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) { .slides #slide6:checked ~ #controls label:nth-child(5) { background:url("../images/arrow-prev@2x.png") no-repeat center; background-size:26px 47px } }.slides #slide7:checked ~ #controls label:nth-child(6) { background:url("../images/arrow-prev.png") no-repeat center; float:left; margin:0; display:block } @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) { .slides #slide7:checked ~ #controls label:nth-child(6) { background:url("../images/arrow-prev@2x.png") no-repeat center; background-size:26px 47px } }.slides #slide8:checked ~ #controls label:nth-child(7) { background:url("../images/arrow-prev.png") no-repeat center; float:left; margin:0; display:block } @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) { .slides #slide8:checked ~ #controls label:nth-child(7) { background:url("../images/arrow-prev@2x.png") no-repeat center; background-size:26px 47px } }.slides #slide1:checked ~ #active label:nth-child(1) { background:#004a7c } .slides #slide2:checked ~ #active label:nth-child(2) { background:#004a7c

} .slides #slide3:checked ~ #active label:nth-child(3) { background:#004a7c } .slides #slide4:checked ~ #active label:nth-child(4) { background:#004a7c } .slides #slide5:checked ~ #active label:nth-child(5) { background:#004a7c } .slides #slide6:checked ~ #active label:nth-child(6) { background:#004a7c } .slides #slide7:checked ~ #active label:nth-child(7) { background:#004a7c } .slides #slide8:checked ~ #active label:nth-child(8) { background:#004a7c } .slides #slides { margin-left:auto; margin-right:auto; box-sizing:border-box } .slides #slides .inner { -webkit-transform:translateZ(0); transition:all 800ms cubic-bezier(0.77, 0, 0.175, 1); transition-timing-function:cubic-bezier(0.77, 0, 0.175, 1) } .slides #slider { -webkit-transform:translateZ(0); transition:all 0.5s ease-out } .slides #controls label { -webkit-transform:translateZ(0); transition:opacity 0.2s ease-out } .slides #controls,.slides #slides,.slides #active,.slides #active label { -webkit-transform:translateZ(0); transition:all 0.5s ease-out } .slides-v { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center } .slides-v input { display:none } .slides-v #slides,.slides-v #overflow { overflow:visible; width:calc(50vw - 0.5rem); height:33.33vw } .slides-v figure img { width:100%; height:100% } .slides-v #slides .inner { width:calc(50vw - 0.5rem); height:800%; line-height:0 } .slides-v #slides figure { width:calc(50vw - 0.5rem); height:33.33vw; float:left; margin:0 } .slides-v #slide1:checked ~ #slides .inner { margin-top:0vw } .slides-v #slide2:checked ~ #slides .inner { margin-top:-33.33vw } .slides-v #slide3:checked ~ #slides .inner { margin-top:-66.66vw } .slides-v #slide4:checked ~ #slides .inner { margin-top:-99.99vw } .slides-v #slide5:checked ~ #slides .inner { margin-top:-133.32vw } .slides-v #slide6:checked ~ #slides .inner { margin-top:-166.65vw } .slides-v #slide7:checked ~ #slides .inner { margin-top:-199.98vw } .slides-v #slide8:checked ~ #slides .inner { margin-top:-233.31vw } .slides-v #controls { width:100%; margin:0; position:absolute; z-index:50; -webkit-transform:rotate(90deg); transform:rotate(90deg); 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 } .slides-v #controls .controls-container { width:33.33vw } @media not all and (min-resolution: 0.001dpcm) { @supports (-webkit-appearance: none) { .slides-v #controls { left:0; top:calc(50% - 30px) } } } @media screen and (min-width: 0\0) { .slides-v #controls { left:0; top:calc(50% - 30px) } }.slides-v #controls label { display:none; width:60px; height:60px; opacity:0.3 } .slides-v #active { margin:28% 0 0; text-align:center; height:60px } @media (max-width: 480px) { .slides-v #active { margin:10% 0 0 } }.slides-v #active label { border-radius:5px; display:inline-block; width:10px; height:10px; background:#999999; margin-left:4px; margin-right:4px } .slides-v #active label:hover { background:#ccc; border-color:#777 !important; cursor:pointer } .slides-v #controls label:hover { opacity:0.8; cursor:pointer } .slides-v #slide1:checked ~ #controls label:nth-child(2) { background:url("../images/arrow-next.png") no-repeat center; float:right; margin:0; display:block } @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) { .slides-v #slide1:checked ~ #controls label:nth-child(2) { background:url("../images/arrow-next@2x.png") no-repeat center; background-size:30px 60px } }.slides-v #slide2:checked ~ #controls label:nth-child(3) { background:url("../images/arrow-next.png") no-repeat center; float:right; margin:0; display:block } @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) { .slides-v #slide2:checked ~ #controls label:nth-child(3) { background:url("../images/arrow-next@2x.png") no-repeat center; background-size:30px 60px } }.slides-v #slide3:checked ~ #controls label:nth-child(4) { background:url("../images/arrow-next.png") no-repeat center; float:right; margin:0; display:block } @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) { .slides-v #slide3:checked ~ #controls label:nth-child(4) { background:url("../images/arrow-next@2x.png") no-repeat center; background-size:30px 60px } }.slides-v #slide4:checked ~ #controls label:nth-child(5) { background:url("../images/arrow-next.png") no-repeat center; float:right; margin:0; display:block } @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) { .slides-v #slide4:checked ~ #controls label:nth-child(5) { background:url("../images/arrow-next@2x.png") no-repeat center; background-size:30px 60px } }.slides-v #slide5:checked ~ #controls label:nth-child(6) { background:url("../images/arrow-next.png") no-repeat center; float:right; margin:0; display:block } @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) { .slides-v #slide5:checked ~ #controls label:nth-child(6) { background:url("../images/arrow-next@2x.png") no-repeat center; background-size:30px 60px } }.slides-v #slide6:checked ~ #controls label:nth-child(7) { background:url("../images/arrow-next.png") no-repeat center; float:right; margin:0; display:block } @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) { .slides-v #slide6:checked ~ #controls label:nth-child(7) { background:url("../images/arrow-next@2x.png") no-repeat center; background-size:30px 60px } }.slides-v #slide7:checked ~ #controls label:nth-child(8) { background:url("../images/arrow-next.png") no-repeat center; float:right; margin:0; display:block } @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) { .slides-v #slide7:checked ~ #controls label:nth-child(8) { background:url("../images/arrow-next@2x.png") no-repeat center; background-size:30px 60px } }.slides-v #slide8:checked ~ #controls label:nth-child(9) { background:url("../images/arrow-next.png") no-repeat center; float:right; margin:0; display:block } @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) { .slides-v #slide8:checked ~ #controls label:nth-child(9) { background:url("../images/arrow-next@2x.png") no-repeat center; background-size:30px 60px } }.slides-v #slide8:checked ~ #controls label:nth-child(1) { background:url("../images/arrow-next.png") no-repeat center; float:right; margin:0; display:block } @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) { .slides-v #slide8:checked ~ #controls label:nth-child(1) { background:url("../images/arrow-next@2x.png") no-repeat center; background-size:30px 60px } }.slides-v #slide1:checked ~ #controls label:nth-child(8) { background:url("../images/arrow-prev.png") no-repeat center; float:left; margin:0; display:block } @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) { .slides-v #slide1:checked ~ #controls label:nth-child(8) { background:url("../images/arrow-prev@2x.png") no-repeat center; background-size:30px 60px } }.slides-v #slide2:checked ~ #controls label:nth-child(1) { background:url("../images/arrow-prev.png") no-repeat center; float:left; margin:0; display:block } @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) { .slides-v #slide2:checked ~ #controls label:nth-child(1) { background:url("../images/arrow-prev@2x.png") no-repeat center; background-size:30px 60px } }.slides-v #slide3:checked ~ #controls label:nth-child(2) { background:url("../images/arrow-prev.png") no-repeat center; float:left; margin:0; display:block } @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) { .slides-v #slide3:checked ~ #controls label:nth-child(2) { background:url("../images/arrow-prev@2x.png") no-repeat center; background-size:30px 60px } }.slides-v #slide4:checked ~ #controls label:nth-child(3) { background:url("../images/arrow-prev.png") no-repeat center; float:left; margin:0; display:block } @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) { .slides-v #slide4:checked ~ #controls label:nth-child(3) { background:url("../images/arrow-prev@2x.png") no-repeat center; background-size:30px 60px } }.slides-v #slide5:checked ~ #controls label:nth-child(4) { background:url("../images/arrow-prev.png") no-repeat center; float:left; margin:0; display:block } @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) { .slides-v #slide5:checked ~ #controls label:nth-child(4) { background:url("../images/arrow-prev@2x.png") no-repeat center; background-size:30px 60px } }.slides-v #slide6:checked ~ #controls label:nth-child(5) { background:url("../images/arrow-prev.png") no-repeat center; float:left; margin:0; display:block } @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) { .slides-v #slide6:checked ~ #controls label:nth-child(5) { background:url("../images/arrow-prev@2x.png") no-repeat center; background-size:30px 60px } }.slides-v #slide7:checked ~ #controls label:nth-child(6) { background:url("../images/arrow-prev.png") no-repeat center; float:left; margin:0; display:block } @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) { .slides-v #slide7:checked ~ #controls label:nth-child(6) { background:url("../images/arrow-prev@2x.png") no-repeat center; background-size:30px 60px } }.slides-v #slide8:checked ~ #controls label:nth-child(7) { background:url("../images/arrow-prev.png") no-repeat center; float:left; margin:0; display:block } @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) { .slides-v #slide8:checked ~ #controls label:nth-child(7) { background:url("../images/arrow-prev@2x.png") no-repeat center; background-size:30px 60px } }.slides-v #slide1:checked ~ #active label:nth-child(1) { background:#004a7c } .slides-v #slide2:checked ~ #active label:nth-child(2) { background:#004a7c } .slides-v #slide3:checked ~ #active label:nth-child(3) { background:#004a7c } .slides-v #slide4:checked ~ #active label:nth-child(4) { background:#004a7c } .slides-v #slide5:checked ~ #active label:nth-child(5) { background:#004a7c } .slides-v #slide6:checked ~ #active label:nth-child(6) { background:#004a7c } .slides-v #slide7:checked ~ #active label:nth-child(7) { background:#004a7c } .slides-v #slide8:checked ~ #active label:nth-child(8) { background:#004a7c } .slides-v #slides { margin-left:auto; margin-right:auto; box-sizing:border-box } .slides-v #slides .inner { -webkit-transform:translateZ(0); transition:all 800ms cubic-bezier(0.77, 0, 0.175, 1); transition-timing-function:cubic-bezier(0.77, 0, 0.175, 1) } .slides-v #slider { -webkit-transform:translateZ(0); transition:all 0.5s ease-out } .slides-v #controls label { -webkit-transform:translateZ(0); transition:opacity 0.2s ease-out } @media (max-width: 480px) { .slides-v #controls { display:none } }.slides-v #slides,.slides-v #active,.slides-v #active label { -webkit-transform:translateZ(0); transition:all 0.5s ease-out }

1. gallery

{ margin-top:60px; margin-bottom:100px }

1. gallery #overflow

{ width:690px }

1. portfolio-slider

{ height:calc(100vh - 1rem); margin:0; position:relative }

1. portfolio-slider .overlay

{ position:absolute; z-index:50; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-flow:column; flex-flow:column; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center } @media (max-width: 1024px) { #portfolio-slider .overlay { display:none } }#portfolio-slider .overlay .overlay-layers { width:50vw; height:100vw }

1. portfolio-slider .overlay .overlay-layer

{ width:100%; height:33.33vw }

1. portfolio-slider .overlay .overlay-layer.overlay-layer--top

{ background-image:linear-gradient(-180deg, #F2F2F2 78%, rgba(242,242,242,0.75) 100%) }

1. portfolio-slider .overlay .overlay-layer.overlay-layer--bottom

{ background-image:linear-gradient(0deg, #F2F2F2 77%, rgba(242,242,242,0.75) 100%) } @media not all and (min-resolution: 0.001dpcm) { @supports (-webkit-appearance: none) { #portfolio-slider .overlay { height:calc(100vh - 1rem) }

1. portfolio-slider .overlay .overlay-layers

{ display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-flow:column; flex-flow:column; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center } } } @media screen and (min-width: 0\0) { #portfolio-slider .overlay { height:calc(100vh - 1rem); top:0; -webkit-box-orient:horizontal; -webkit-box-direction:normal; -ms-flex-flow:row; flex-flow:row }

1. portfolio-slider .overlay .overlay-layers

{ display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-flow:column; flex-flow:column; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center } }#portfolio-slider.slides .overlay { display:none }

1. awwwards

{ position:absolute; top:64px; width:90px; height:135px; text-indent:-666em; overflow:hidden; z-index:999; transition:all 1s ease }

1. awwwards.top

{ top:20px }

1. awwwards.left

{ left:0 }

1. awwwards.right

{ right:0 }

1. awwwards a

{ position:absolute; top:0; left:0; display:block; width:90px; height:135px; background-repeat:no-repeat; background-size:90px 135px }

1. awwwards.nominee.green.left a

{ background-image:url(../images/awwwards_nominee_green_left.png) }

1. awwwards.nominee.green.right a

{ background-image:url(../images/awwwards_nominee_green_right.png) } @media only screen and (-Webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3 / 2), only screen and (min-device-pixel-ratio: 1.5) { #awwwards.nominee.green.left a { background-image:url(../images/awwwards_nominee_green_left@2x.png) }

1. awwwards.nominee.green.right a

{ background-image:url(../images/awwwards_nominee_green_right@2x.png) } }.row { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:horizontal; -webkit-box-direction:normal; -ms-flex-flow:row; flex-flow:row; -ms-flex-direction:row; flex-direction:row; margin-left:-12px; margin-right:-12px } @media (max-width: 600px) { .row { margin-left:-8px; margin-right:-8px } }.row.align-top { -webkit-box-align:start; -ms-flex-align:start; align-items:flex-start } .row.align-bottom { -webkit-box-align:end; -ms-flex-align:end; align-items:flex-end } .row.align-middle { -webkit-box-align:center; -ms-flex-align:center; align-items:center } .row.align-baseline { -webkit-box-align:baseline; -ms-flex-align:baseline; align-items:baseline } .row.align-stretch { -webkit-box-align:stretch; -ms-flex-align:stretch; align-items:stretch } .row.align-left { -webkit-box-pack:start; -ms-flex-pack:start; justify-content:flex-start } .row.align-right { -webkit-box-pack:end; -ms-flex-pack:end; justify-content:flex-end } .row.align-center { -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center } .row.align-space-between { -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between } .row.space-around { -ms-flex-pack:distribute; justify-content:space-around } .row+.row { margin-top:24px } .row [class^="col-"],.row .cols { box-sizing:border-box; padding-left:12px; padding-right:12px } @media (max-width: 600px) { .row [class^="col-"],.row .cols { padding-left:8px; padding-right:8px } }.row.layout-dir-column { -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-flow:column; flex-flow:column; -ms-flex-direction:column; flex-direction:column } .row.layout-dir-column [class^="col-"],.row.layout-dir-column .cols { padding-top:12px; padding-bottom:12px; -webkit-box-flex:0; -ms-flex:0 0 auto; flex:0 0 auto } @media (max-width: 600px) { .row.layout-dir-column [class^="col-"],.row.layout-dir-column .cols { padding-top:8px; padding-bottom:8px } }.row.layout-dir-column [class^="col-"]:first-of-type,.row.layout-dir-column .cols:first-of-type { padding-top:0 } .row.wrap { -ms-flex-wrap:wrap; flex-wrap:wrap } .row.wrap [class^="col-"] { margin-bottom:24px } .row.large { margin-left:-24px; margin-right:-24px } .row.large [class^="col-"],.row.large .cols { padding-left:24px; padding-right:24px } @media (max-width: 600px) { .row.large [class^="col-"],.row.large .cols { padding-left:8px; padding-right:8px } }.row.large.wrap [class^="col-"] { margin-bottom:48px } .col-1 { width:8.3333333333% } @media not all and (min-resolution: 0.001dpcm) { @supports (-webkit-appearance: none) { .col-1 { width:8.2333333333% } } } .col-2 { width:16.6666666667% } @media not all and (min-resolution: 0.001dpcm) { @supports (-webkit-appearance: none) { .col-2 { width:16.5666666667% } } } .col-3 { width:25% } @media not all and (min-resolution: 0.001dpcm) { @supports (-webkit-appearance: none) { .col-3 { width:24.9% } } } .col-4 { width:33.3333333333% } @media not all and (min-resolution: 0.001dpcm) { @supports (-webkit-appearance: none) { .col-4 { width:33.2333333333% } } } .col-5 { width:41.6666666667% } @media not all and (min-resolution: 0.001dpcm) { @supports (-webkit-appearance: none) { .col-5 { width:41.5666666667% } } } .col-6 { width:50% } @media not all and (min-resolution: 0.001dpcm) { @supports (-webkit-appearance: none) { .col-6 { width:49.9% } } } .col-7 { width:58.3333333333% } @media not all and (min-resolution: 0.001dpcm) { @supports (-webkit-appearance: none) { .col-7 { width:58.2333333333% } } } .col-8 { width:66.6666666667% } @media not all and (min-resolution: 0.001dpcm) { @supports (-webkit-appearance: none) { .col-8 { width:66.5666666667% } } } .col-9 { width:75% } @media not all and (min-resolution: 0.001dpcm) { @supports (-webkit-appearance: none) { .col-9 { width:74.9% } } } .col-10 { width:83.3333333333% } @media not all and (min-resolution: 0.001dpcm) { @supports (-webkit-appearance: none) { .col-10 { width:83.2333333333% } } } .col-11 { width:91.6666666667% } @media not all and (min-resolution: 0.001dpcm) { @supports (-webkit-appearance: none) { .col-11 { width:91.5666666667% } } } .col-12 { width:100% } @media not all and (min-resolution: 0.001dpcm) { @supports (-webkit-appearance: none) { .col-12 { width:99.9% } } }

1. site-navigation

{ position:fixed; top:50%; left:2rem } @media (min-width: 1025px) { #site-navigation { -webkit-transform-origin:top left; transform-origin:top left; -webkit-transform:rotate(-90deg) translateX(-50%); transform:rotate(-90deg) translateX(-50%); z-index:50 } }@media (max-width: 1024px) { #site-navigation { top:0px; left:0px; width:100vw; height:100vh; background-color:#004a7c; z-index:50; padding-top:120px; transition:all 0.25s ease-in-out; display:none } }@media (max-width: 1024px) { #site-navigation ul { list-style:none; margin-left:0; margin-bottom:30px; width:480px; margin:0 auto } }@media (max-width: 600px) { #site-navigation ul { width:135px; margin:0 auto } }@media (min-width: 1025px) { #site-navigation ul li { display:inline-block } }#site-navigation ul li a { font-family:"sofia-pro",sans-serif; font-size:10px; font-weight:600; line-height:1em; letter-spacing:0.1em; text-transform:uppercase; color:rgba(0,0,0,0.54); padding:0 8px }

1. site-navigation ul li a.small

{ font-size:13px } @media (max-width: 1024px) { #site-navigation ul li a { color:#ffffff; font-size:32px; line-height:2 } }@media (max-width: 480px) { #site-navigation ul li a { font-size:22px } }#site-navigation ul li a:hover,#site-navigation ul li a:focus { color:rgba(0,0,0,0.87) } @media (max-width: 1024px) { #site-navigation ul li a:hover,#site-navigation ul li a:focus { color:#39898D; -webkit-animation:all 300ms ease-in-out; animation:all 300ms ease-in-out } }#site-navigation ul li.active a { color:#39898D; position:relative }

1. site-navigation ul li.active a:after

{ position:absolute; top:50%; right:6px; bottom:50%; left:6px; content:""; border-bottom:1px solid #39898D } .page-border { position:fixed; top:0; right:0; bottom:0; left:0; width:100vw; height:100vh; border:8px solid #004a7c; z-index:9 } .page-container { position:absolute; top:0; right:0; bottom:0; left:0; overflow-y:scroll }

1. site-header

{ position:fixed; z-index:50; top:2rem; right:2rem; left:2rem }

1. site-header #logo

{ margin-top:6px }

1. site-header #back a

{ display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:horizontal; -webkit-box-direction:normal; -ms-flex-flow:row; flex-flow:row; -webkit-box-align:center; -ms-flex-align:center; align-items:center; font-family:"sofia-pro",sans-serif; font-size:12px; font-weight:600; line-height:1em; text-transform:uppercase; letter-spacing:2px; margin:0 }

1. site-header #back a .hint

{ font-size:10px; font-weight:300; letter-spacing:6.4px }

1. site-header #back a .arrow,#site-header #back a .arrow:before,#site-header #back a .arrow:after

{ cursor:pointer; height:1px; width:18px; display:block; content:; transition:all 0.25s ease-in-out; margin-right:8px; background-color:rgba(0,0,0,0.87) } @media (max-width: 600px) { #site-header #back a .arrow,#site-header #back a .arrow:before,#site-header #back a .arrow:after { width:21px; height:2px } }#site-header #back a .arrow { background:transparent; position:relative }

1. site-header #back a .arrow:before

{ -webkit-transform:rotate(45deg); transform:rotate(45deg); position:absolute }

1. site-header #back a .arrow:after

{ -webkit-transform:rotate(-45deg); transform:rotate(-45deg); position:absolute }

1. site-header #back a:hover .arrow:before,#site-header #back a:hover .arrow:after

{ background-color:#004a7c } @media (max-width: 1024px) { #site-header #language-switch { display:none }

1. site-header #nav-toggle

{ position:absolute; top:0; right:0; cursor:pointer; padding:10px 22px 10px 0px }

1. site-header #nav-toggle #menu-icon,#site-header #nav-toggle #menu-icon:before,#site-header #nav-toggle #menu-icon:after

{ cursor:pointer; height:2px; width:22px; background:#000; position:absolute; display:block; content:; z-index:50; transition:all 0.25s ease-in-out }

1. site-header #nav-toggle #menu-icon:before

{ top:-7px }

1. site-header #nav-toggle #menu-icon:after

{ bottom:-7px }

1. site-header #nav-toggle #menu-icon.active

{ background:transparent }

1. site-header #nav-toggle #menu-icon.active:before

{ -webkit-transform:rotate(45deg); transform:rotate(45deg); background-color:#ffffff; top:0 }

1. site-header #nav-toggle #menu-icon.active:after

{ -webkit-transform:rotate(-45deg); transform:rotate(-45deg); background-color:#ffffff; bottom:0 } }@media (max-width: 600px) { #site-header #nav-toggle { top:24px; right:24px }

1. site-header #back

{ position:absolute; right:8px; top:20px }

1. site-header #back .prev-page

{ display:none } }#main-content { width:calc(100vw - 16px); 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; -webkit-box-orient:horizontal; -webkit-box-direction:normal; -ms-flex-flow:row; flex-flow:row } @media (max-width: 600px) { #main-content { overflow-x:hidden } }#main-content article { display:-webkit-box; display:-ms-flexbox; display:flex } .layout--work #main-content { position:relative; height:auto } @media (min-width: 601px) { .layout--page #main-content,.layout--default #main-content { height:calc(100vh - 16px) } }#site-footer { z-index:50; font-family:"sofia-pro",sans-serif; font-size:12px; color:rgba(0,0,0,0.38) } @media (min-width: 601px) { #site-footer { position:absolute; top:auto; right:2rem; bottom:1rem; left:2rem } }@media (max-width: 600px) { #site-footer { text-align:center; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-flow:column; flex-flow:column; -webkit-box-align:center; -ms-flex-align:center; align-items:center } }#site-footer #social-links a { color:rgba(0,0,0,0.38); padding-right:8px }

1. site-footer #social-links a:hover,#site-footer #social-links a:focus

{ color:rgba(0,0,0,0.54) }

1. site-footer #social-links a:not(:first-child):before

{ content:"\2022"; margin-right:8px } @media (max-width: 600px) { .layout--page:not(.page--works) #site-header { top:8px; right:8px; left:8px; padding:16px } .layout--page:not(.page--works) #site-header:not(.modal) { background-color:#f2f2f2 } .layout--page:not(.page--works) #main-content { -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-flow:column; flex-flow:column; padding-top:64px } .layout--page:not(.page--works) #site-footer { margin:2rem auto } .layout--page:not(.page--works).page--about article { margin-right:2rem; height:calc(100vh - 12rem); -webkit-box-align:center; -ms-flex-align:center; align-items:center } }@media (max-width: 600px) { .layout--work #site-header { top:8px; right:8px; left:8px; padding:16px } }.page--works #main-content,.page--home #main-content { height:calc(100vh - 16px) } @media (max-width: 600px) { .page--works #site-header,.page--home #site-header { top:8px !important; right:8px !important; left:8px !important; padding:16px !important } .page--works #site-footer,.page--home #site-footer { position:absolute; top:auto; right:0; bottom:1rem; left:0 } }.layout-space-1 { height:1rem } .layout-space-2 { height:2rem } .layout-space-3 { height:3rem } .layout-space-4 { height:4rem } .layout-space-5 { height:5rem } .layout-space-6 { height:6rem } nav.page-navi a { position:absolute; top:50%; -webkit-transform:translateY(-50%); transform:translateY(-50%); right:40px; z-index:50; font-family:"sofia-pro",sans-serif; font-size:12px; font-weight:600; line-height:1em; text-transform:uppercase; letter-spacing:2px; margin:0; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center } nav.page-navi a .hint { font-size:10px; font-weight:300; letter-spacing:6.4px } nav.page-navi a .arrow { display:inline-block; width:80px; height:1px; background:rgba(0,0,0,0.87); position:relative; vertical-align:middle; margin-left:8px } nav.page-navi a .arrow:after,nav.page-navi a .arrow:before { content:""; position:absolute; top:0; right:0; width:8px; height:1px; background:rgba(0,0,0,0.87); -webkit-transform-origin:top right; transform-origin:top right } nav.page-navi a .arrow:before { -webkit-transform:rotate(40deg); transform:rotate(40deg) } nav.page-navi a .arrow:after { -webkit-transform:rotate(-40deg); transform:rotate(-40deg) } nav.page-navi a:hover .next-page,nav.page-navi a:focus .next-page { -webkit-transform:translateX(100%); transform:translateX(100%); transition:-webkit-transform 0.3s; transition:transform 0.3s; transition:transform 0.3s, -webkit-transform 0.3s; padding-left:8px } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { nav.page-navi a:hover .next-page,nav.page-navi a:focus .next-page { -webkit-transform:translateX(110%); transform:translateX(110%); transition:none; padding-left:0 } }nav.page-navi a:hover .arrow,nav.page-navi a:focus .arrow { transition-delay:0.1s; -webkit-transform:translateX(-100%); transform:translateX(-100%); transition:-webkit-transform 0.3s; transition:transform 0.3s; transition:transform 0.3s, -webkit-transform 0.3s; margin-left:0 } nav.page-navi a:hover .arrow,nav.page-navi a:hover .arrow:before,nav.page-navi a:hover .arrow:after,nav.page-navi a:focus .arrow,nav.page-navi a:focus .arrow:before,nav.page-navi a:focus .arrow:after { background-color:#004a7c } @media (max-width: 1024px) { .page-navi { display:none } }.gear-canvas--wrapper { width:850px; height:600px; margin-left:auto; margin-right:auto; position:relative } .gear-canvas .gear.normal { position:absolute; height:80px; width:80px; border-radius:40px } .gear-canvas .gear.normal .gear-inner { position:relative; height:100%; width:100%; background:#B5B5B5; border-radius:50%; border:1px solid white(0.1) } .gear-canvas .gear.normal .gear-inner .bar { background:#B5B5B5; height:12px; width:96px; position:absolute; left:50%; margin-left:-48px; top:50%; margin-top:-6px; border-radius:2px; border-left:1px solid white(0.1); border-right:1px solid white(0.1) } .gear-canvas .gear.normal .gear-inner .bar:nth-child(2) { -webkit-transform:rotate(60deg); transform:rotate(60deg) } .gear-canvas .gear.normal .gear-inner .bar:nth-child(3) { -webkit-transform:rotate(120deg); transform:rotate(120deg) } .gear-canvas .gear.normal .gear-inner .bar:nth-child(4) { -webkit-transform:rotate(90deg); transform:rotate(90deg) } .gear-canvas .gear.normal .gear-inner .bar:nth-child(5) { -webkit-transform:rotate(30deg); transform:rotate(30deg) } .gear-canvas .gear.normal .gear-inner .bar:nth-child(6) { -webkit-transform:rotate(150deg); transform:rotate(150deg) } .gear-canvas .gear.normal .gear-inner .bar:nth-child(7) { -webkit-transform:rotate(45deg); transform:rotate(45deg) } .gear-canvas .gear.normal .gear-inner .bar:nth-child(8) { -webkit-transform:rotate(135deg); transform:rotate(135deg) } .gear-canvas .gear.normal .gear-inner .bar:nth-child(9) { -webkit-transform:rotate(105deg); transform:rotate(105deg) } .gear-canvas .gear.normal .gear-inner .bar:nth-child(10) { -webkit-transform:rotate(15deg); transform:rotate(15deg) } .gear-canvas .gear.normal .gear-inner .bar:nth-child(11) { -webkit-transform:rotate(165deg); transform:rotate(165deg) } .gear-canvas .gear.normal .gear-inner .bar:nth-child(12) { -webkit-transform:rotate(75deg); transform:rotate(75deg) } .gear-canvas .gear.normal .gear-text { position:absolute; top:0; right:0; bottom:0; left:0; text-align:center; z-index:999; padding-left:16px; padding-right:16px } .gear-canvas .gear.normal .gear-text h6 { font-weight:500; line-height:80px } .gear-canvas .gear.normal:after { content:""; position:absolute; height:64px; width:64px; border-radius:50%; background-color:#f2f2f2; top:50%; left:50%; margin-left:-32px; margin-top:-32px; z-index:3 } .gear-canvas .gear.x-large { position:absolute; height:296px; width:296px; border-radius:148px } .gear-canvas .gear.x-large .gear-inner { position:relative; height:100%; width:100%; background:#979797; border-radius:50%; border:1px solid white(0.1) } .gear-canvas .gear.x-large .gear-inner .bar { background:#979797; height:20px; width:332px; position:absolute; left:50%; margin-left:-166px; top:50%; margin-top:-10px; border-radius:2px; border-left:1px solid white(0.1); border-right:1px solid white(0.1) } .gear-canvas .gear.x-large .gear-inner .bar:nth-child(2) { -webkit-transform:rotate(60deg); transform:rotate(60deg) } .gear-canvas .gear.x-large .gear-inner .bar:nth-child(3) { -webkit-transform:rotate(120deg); transform:rotate(120deg) } .gear-canvas .gear.x-large .gear-inner .bar:nth-child(4) { -webkit-transform:rotate(90deg); transform:rotate(90deg) } .gear-canvas .gear.x-large .gear-inner .bar:nth-child(5) { -webkit-transform:rotate(30deg); transform:rotate(30deg) } .gear-canvas .gear.x-large .gear-inner .bar:nth-child(6) { -webkit-transform:rotate(150deg); transform:rotate(150deg) } .gear-canvas .gear.x-large .gear-inner .bar:nth-child(7) { -webkit-transform:rotate(45deg); transform:rotate(45deg) } .gear-canvas .gear.x-large .gear-inner .bar:nth-child(8) { -webkit-transform:rotate(135deg); transform:rotate(135deg) } .gear-canvas .gear.x-large .gear-inner .bar:nth-child(9) { -webkit-transform:rotate(105deg); transform:rotate(105deg) } .gear-canvas .gear.x-large .gear-inner .bar:nth-child(10) { -webkit-transform:rotate(15deg); transform:rotate(15deg) } .gear-canvas .gear.x-large .gear-inner .bar:nth-child(11) { -webkit-transform:rotate(165deg); transform:rotate(165deg) } .gear-canvas .gear.x-large .gear-inner .bar:nth-child(12) { -webkit-transform:rotate(75deg); transform:rotate(75deg) } .gear-canvas .gear.x-large .gear-text { position:absolute; top:0; right:0; bottom:0; left:0; text-align:center; z-index:999; padding-left:36px; padding-right:36px } .gear-canvas .gear.x-large .gear-text h6 { font-weight:500; line-height:296px } .gear-canvas .gear.x-large:after { content:""; position:absolute; height:260px; width:260px; border-radius:50%; background-color:#f2f2f2; top:50%; left:50%; margin-left:-130px; margin-top:-130px; z-index:3 } .gear-canvas .gear.large { position:absolute; height:135px; width:135px; border-radius:67.5px } .gear-canvas .gear.large .gear-inner { position:relative; height:100%; width:100%; background:#004a7c; border-radius:50%; border:1px solid white(0.1) } .gear-canvas .gear.large .gear-inner .bar { background:#004a7c; height:16px; width:159px; position:absolute; left:50%; margin-left:-79.5px; top:50%; margin-top:-8px; border-radius:2px; border-left:1px solid white(0.1); border-right:1px solid white(0.1) } .gear-canvas .gear.large .gear-inner .bar:nth-child(2) { -webkit-transform:rotate(60deg); transform:rotate(60deg) } .gear-canvas .gear.large .gear-inner .bar:nth-child(3) { -webkit-transform:rotate(120deg); transform:rotate(120deg) } .gear-canvas .gear.large .gear-inner .bar:nth-child(4) { -webkit-transform:rotate(90deg); transform:rotate(90deg) } .gear-canvas .gear.large .gear-inner .bar:nth-child(5) { -webkit-transform:rotate(30deg); transform:rotate(30deg) } .gear-canvas .gear.large .gear-inner .bar:nth-child(6) { -webkit-transform:rotate(150deg); transform:rotate(150deg) } .gear-canvas .gear.large .gear-inner .bar:nth-child(7) { -webkit-transform:rotate(45deg); transform:rotate(45deg) } .gear-canvas .gear.large .gear-inner .bar:nth-child(8) { -webkit-transform:rotate(135deg); transform:rotate(135deg) } .gear-canvas .gear.large .gear-inner .bar:nth-child(9) { -webkit-transform:rotate(105deg); transform:rotate(105deg) } .gear-canvas .gear.large .gear-inner .bar:nth-child(10) { -webkit-transform:rotate(15deg); transform:rotate(15deg) } .gear-canvas .gear.large .gear-inner .bar:nth-child(11) { -webkit-transform:rotate(165deg); transform:rotate(165deg) } .gear-canvas .gear.large .gear-inner .bar:nth-child(12) { -webkit-transform:rotate(75deg); transform:rotate(75deg) } .gear-canvas .gear.large .gear-text { position:absolute; top:0; right:0; bottom:0; left:0; text-align:center; z-index:999; padding-left:35px; padding-right:35px } .gear-canvas .gear.large .gear-text h6 { font-weight:500; line-height:135px } .gear-canvas .gear.large:after { content:""; position:absolute; height:100px; width:100px; border-radius:50%; background-color:#f2f2f2; top:50%; left:50%; margin-left:-50px; margin-top:-50px; z-index:3 } .gear-canvas .gear.middle { position:absolute; height:100px; width:100px; border-radius:50px } .gear-canvas .gear.middle .gear-inner { position:relative; height:100%; width:100%; background:#4a4a4a; border-radius:50%; border:1px solid white(0.1) } .gear-canvas .gear.middle .gear-inner .bar { background:#4a4a4a; height:12px; width:116px; position:absolute; left:50%; margin-left:-58px; top:50%; margin-top:-6px; border-radius:2px; border-left:1px solid white(0.1); border-right:1px solid white(0.1) } .gear-canvas .gear.middle .gear-inner .bar:nth-child(2) { -webkit-transform:rotate(60deg); transform:rotate(60deg) } .gear-canvas .gear.middle .gear-inner .bar:nth-child(3) { -webkit-transform:rotate(120deg); transform:rotate(120deg) } .gear-canvas .gear.middle .gear-inner .bar:nth-child(4) { -webkit-transform:rotate(90deg); transform:rotate(90deg) } .gear-canvas .gear.middle .gear-inner .bar:nth-child(5) { -webkit-transform:rotate(30deg); transform:rotate(30deg) } .gear-canvas .gear.middle .gear-inner .bar:nth-child(6) { -webkit-transform:rotate(150deg); transform:rotate(150deg) } .gear-canvas .gear.middle .gear-inner .bar:nth-child(7) { -webkit-transform:rotate(45deg); transform:rotate(45deg) } .gear-canvas .gear.middle .gear-inner .bar:nth-child(8) { -webkit-transform:rotate(135deg); transform:rotate(135deg) } .gear-canvas .gear.middle .gear-inner .bar:nth-child(9) { -webkit-transform:rotate(105deg); transform:rotate(105deg) } .gear-canvas .gear.middle .gear-inner .bar:nth-child(10) { -webkit-transform:rotate(15deg); transform:rotate(15deg) } .gear-canvas .gear.middle .gear-inner .bar:nth-child(11) { -webkit-transform:rotate(165deg); transform:rotate(165deg) } .gear-canvas .gear.middle .gear-inner .bar:nth-child(12) { -webkit-transform:rotate(75deg); transform:rotate(75deg) } .gear-canvas .gear.middle .gear-text { position:absolute; top:0; right:0; bottom:0; left:0; text-align:center; z-index:999; padding-left:24px; padding-right:24px } .gear-canvas .gear.middle .gear-text h6 { font-weight:500; line-height:100px } .gear-canvas .gear.middle:after { content:""; position:absolute; height:76px; width:76px; border-radius:50%; background-color:#f2f2f2; top:50%; left:50%; margin-left:-38px; margin-top:-38px; z-index:3 } .gear-canvas .gear.small { position:absolute; height:60px; width:60px; border-radius:30px } .gear-canvas .gear.small .gear-inner { position:relative; height:100%; width:100%; background:#D8D8D8; border-radius:50%; border:1px solid white(0.1) } .gear-canvas .gear.small .gear-inner .bar { background:#D8D8D8; height:10px; width:72px; position:absolute; left:50%; margin-left:-36px; top:50%; margin-top:-5px; border-radius:2px; border-left:1px solid white(0.1); border-right:1px solid white(0.1) } .gear-canvas .gear.small .gear-inner .bar:nth-child(2) { -webkit-transform:rotate(60deg); transform:rotate(60deg) } .gear-canvas .gear.small .gear-inner .bar:nth-child(3) { -webkit-transform:rotate(120deg); transform:rotate(120deg) } .gear-canvas .gear.small .gear-inner .bar:nth-child(4) { -webkit-transform:rotate(90deg); transform:rotate(90deg) } .gear-canvas .gear.small .gear-inner .bar:nth-child(5) { -webkit-transform:rotate(30deg); transform:rotate(30deg) } .gear-canvas .gear.small .gear-inner .bar:nth-child(6) { -webkit-transform:rotate(150deg); transform:rotate(150deg) } .gear-canvas .gear.small .gear-inner .bar:nth-child(7) { -webkit-transform:rotate(45deg); transform:rotate(45deg) } .gear-canvas .gear.small .gear-inner .bar:nth-child(8) { -webkit-transform:rotate(135deg); transform:rotate(135deg) } .gear-canvas .gear.small .gear-inner .bar:nth-child(9) { -webkit-transform:rotate(105deg); transform:rotate(105deg) } .gear-canvas .gear.small .gear-inner .bar:nth-child(10) { -webkit-transform:rotate(15deg); transform:rotate(15deg) } .gear-canvas .gear.small .gear-inner .bar:nth-child(11) { -webkit-transform:rotate(165deg); transform:rotate(165deg) } .gear-canvas .gear.small .gear-inner .bar:nth-child(12) { -webkit-transform:rotate(75deg); transform:rotate(75deg) } .gear-canvas .gear.small .gear-text { position:absolute; top:0; right:0; bottom:0; left:0; text-align:center; z-index:999; padding-left:12px; padding-right:12px } .gear-canvas .gear.small .gear-text h6 { font-weight:500; line-height:60px } .gear-canvas .gear.small:after { content:""; position:absolute; height:48px; width:48px; border-radius:50%; background-color:#f2f2f2; top:50%; left:50%; margin-left:-24px; margin-top:-24px; z-index:3 } .gear-canvas .gear.center { top:calc(50% - 148px - 12px); left:calc(50% - 148px); z-index:99 } .gear-canvas .gear-area { position:absolute; top:50%; right:50%; bottom:50%; left:50% } .gear-canvas .gear-area-a { left:0; top:0 } .gear-canvas .gear-area-a .large { left:195px; top:60px } .gear-canvas .gear-area-a .middle { left:330px; top:30px } .gear-canvas .gear-area-a .normal { left:180px; top:195px } .gear-canvas .gear-area-a .small { left:438px; top:60px } .gear-canvas .gear-area-b { left:0; bottom:0 } .gear-canvas .gear-area-b .large { left:168px; bottom:110px } .gear-canvas .gear-area-b .middle { left:300px; bottom:75px } .gear-canvas .gear-area-b .normal { left:230px; bottom:25px } .gear-canvas .gear-area-b .small { left:132px; top:15px } .gear-canvas .gear-area-c { top:0; right:0 } .gear-canvas .gear-area-c .one { position:absolute; height:90px; width:90px; border-radius:45px; top:55px; right:90px } .gear-canvas .gear-area-c .one .gear-inner { position:relative; height:100%; width:100%; background:#004a7c; border-radius:50%; border:1px solid white(0.1) } .gear-canvas .gear-area-c .one .gear-inner .bar { background:#004a7c; height:6px; width:102px; position:absolute; left:50%; margin-left:-51px; top:50%; margin-top:-3px; border-radius:2px; border-left:1px solid white(0.1); border-right:1px solid white(0.1) } .gear-canvas .gear-area-c .one .gear-inner .bar:nth-child(2) { -webkit-transform:rotate(60deg); transform:rotate(60deg) } .gear-canvas .gear-area-c .one .gear-inner .bar:nth-child(3) { -webkit-transform:rotate(120deg); transform:rotate(120deg) } .gear-canvas .gear-area-c .one .gear-inner .bar:nth-child(4) { -webkit-transform:rotate(90deg); transform:rotate(90deg) } .gear-canvas .gear-area-c .one .gear-inner .bar:nth-child(5) { -webkit-transform:rotate(30deg); transform:rotate(30deg) } .gear-canvas .gear-area-c .one .gear-inner .bar:nth-child(6) { -webkit-transform:rotate(150deg); transform:rotate(150deg) } .gear-canvas .gear-area-c .one .gear-inner .bar:nth-child(7) { -webkit-transform:rotate(45deg); transform:rotate(45deg) } .gear-canvas .gear-area-c .one .gear-inner .bar:nth-child(8) { -webkit-transform:rotate(135deg); transform:rotate(135deg) } .gear-canvas .gear-area-c .one .gear-inner .bar:nth-child(9) { -webkit-transform:rotate(105deg); transform:rotate(105deg) } .gear-canvas .gear-area-c .one .gear-inner .bar:nth-child(10) { -webkit-transform:rotate(15deg); transform:rotate(15deg) } .gear-canvas .gear-area-c .one .gear-inner .bar:nth-child(11) { -webkit-transform:rotate(165deg); transform:rotate(165deg) } .gear-canvas .gear-area-c .one .gear-inner .bar:nth-child(12) { -webkit-transform:rotate(75deg); transform:rotate(75deg) } .gear-canvas .gear-area-c .one .gear-text { position:absolute; top:0; right:0; bottom:0; left:0; text-align:center; z-index:999; padding-left:12px; padding-right:12px } .gear-canvas .gear-area-c .one .gear-text h6 { font-weight:500; line-height:90px } .gear-canvas .gear-area-c .one:after { content:""; position:absolute; height:78px; width:78px; border-radius:50%; background-color:#f2f2f2; top:50%; left:50%; margin-left:-39px; margin-top:-39px; z-index:3 } .gear-canvas .gear-area-c .two { position:absolute; height:75px; width:75px; border-radius:37.5px; top:140px; right:60px } .gear-canvas .gear-area-c .two .gear-inner { position:relative; height:100%; width:100%; background:#4A4A4A; border-radius:50%; border:1px solid white(0.1) } .gear-canvas .gear-area-c .two .gear-inner .bar { background:#4A4A4A; height:6px; width:87px; position:absolute; left:50%; margin-left:-43.5px; top:50%; margin-top:-3px; border-radius:2px; border-left:1px solid white(0.1); border-right:1px solid white(0.1) } .gear-canvas .gear-area-c .two .gear-inner .bar:nth-child(2) { -webkit-transform:rotate(60deg); transform:rotate(60deg) } .gear-canvas .gear-area-c .two .gear-inner .bar:nth-child(3) { -webkit-transform:rotate(120deg); transform:rotate(120deg) } .gear-canvas .gear-area-c .two .gear-inner .bar:nth-child(4) { -webkit-transform:rotate(90deg); transform:rotate(90deg) } .gear-canvas .gear-area-c .two .gear-inner .bar:nth-child(5) { -webkit-transform:rotate(30deg); transform:rotate(30deg) } .gear-canvas .gear-area-c .two .gear-inner .bar:nth-child(6) { -webkit-transform:rotate(150deg); transform:rotate(150deg) } .gear-canvas .gear-area-c .two .gear-inner .bar:nth-child(7) { -webkit-transform:rotate(45deg); transform:rotate(45deg) } .gear-canvas .gear-area-c .two .gear-inner .bar:nth-child(8) { -webkit-transform:rotate(135deg); transform:rotate(135deg) } .gear-canvas .gear-area-c .two .gear-inner .bar:nth-child(9) { -webkit-transform:rotate(105deg); transform:rotate(105deg) } .gear-canvas .gear-area-c .two .gear-inner .bar:nth-child(10) { -webkit-transform:rotate(15deg); transform:rotate(15deg) } .gear-canvas .gear-area-c .two .gear-inner .bar:nth-child(11) { -webkit-transform:rotate(165deg); transform:rotate(165deg) } .gear-canvas .gear-area-c .two .gear-inner .bar:nth-child(12) { -webkit-transform:rotate(75deg); transform:rotate(75deg) } .gear-canvas .gear-area-c .two .gear-text { position:absolute; top:0; right:0; bottom:0; left:0; text-align:center; z-index:999; padding-left:12px; padding-right:12px } .gear-canvas .gear-area-c .two .gear-text h6 { font-weight:500; line-height:75px } .gear-canvas .gear-area-c .two:after { content:""; position:absolute; height:63px; width:63px; border-radius:50%; background-color:#f2f2f2; top:50%; left:50%; margin-left:-31.5px; margin-top:-31.5px; z-index:3 } .gear-canvas .gear-area-c .three { position:absolute; height:65px; width:65px; border-radius:32.5px; top:82px; right:18px } .gear-canvas .gear-area-c .three .gear-inner { position:relative; height:100%; width:100%; background:#B5B5B5; border-radius:50%; border:1px solid white(0.1) } .gear-canvas .gear-area-c .three .gear-inner .bar { background:#B5B5B5; height:8px; width:77px; position:absolute; left:50%; margin-left:-38.5px; top:50%; margin-top:-4px; border-radius:2px; border-left:1px solid white(0.1); border-right:1px solid white(0.1) } .gear-canvas .gear-area-c .three .gear-inner .bar:nth-child(2) { -webkit-transform:rotate(60deg); transform:rotate(60deg) } .gear-canvas .gear-area-c .three .gear-inner .bar:nth-child(3) { -webkit-transform:rotate(120deg); transform:rotate(120deg) } .gear-canvas .gear-area-c .three .gear-inner .bar:nth-child(4) { -webkit-transform:rotate(90deg); transform:rotate(90deg) } .gear-canvas .gear-area-c .three .gear-inner .bar:nth-child(5) { -webkit-transform:rotate(30deg); transform:rotate(30deg) } .gear-canvas .gear-area-c .three .gear-inner .bar:nth-child(6) { -webkit-transform:rotate(150deg); transform:rotate(150deg) } .gear-canvas .gear-area-c .three .gear-inner .bar:nth-child(7) { -webkit-transform:rotate(45deg); transform:rotate(45deg) } .gear-canvas .gear-area-c .three .gear-inner .bar:nth-child(8) { -webkit-transform:rotate(135deg); transform:rotate(135deg) } .gear-canvas .gear-area-c .three .gear-inner .bar:nth-child(9) { -webkit-transform:rotate(105deg); transform:rotate(105deg) } .gear-canvas .gear-area-c .three .gear-inner .bar:nth-child(10) { -webkit-transform:rotate(15deg); transform:rotate(15deg) } .gear-canvas .gear-area-c .three .gear-inner .bar:nth-child(11) { -webkit-transform:rotate(165deg); transform:rotate(165deg) } .gear-canvas .gear-area-c .three .gear-inner .bar:nth-child(12) { -webkit-transform:rotate(75deg); transform:rotate(75deg) } .gear-canvas .gear-area-c .three .gear-text { position:absolute; top:0; right:0; bottom:0; left:0; text-align:center; z-index:999; padding-left:12px; padding-right:12px } .gear-canvas .gear-area-c .three .gear-text h6 { font-weight:500; line-height:65px } .gear-canvas .gear-area-c .three:after { content:""; position:absolute; height:53px; width:53px; border-radius:50%; background-color:#f2f2f2; top:50%; left:50%; margin-left:-26.5px; margin-top:-26.5px; z-index:3 } .gear-canvas .gear-area-c .four { position:absolute; height:50px; width:50px; border-radius:25px; top:12px; right:155px } .gear-canvas .gear-area-c .four .gear-inner { position:relative; height:100%; width:100%; background:#D8D8D8; border-radius:50%; border:1px solid white(0.1) } .gear-canvas .gear-area-c .four .gear-inner .bar { background:#D8D8D8; height:6px; width:62px; position:absolute; left:50%; margin-left:-31px; top:50%; margin-top:-3px; border-radius:2px; border-left:1px solid white(0.1); border-right:1px solid white(0.1) } .gear-canvas .gear-area-c .four .gear-inner .bar:nth-child(2) { -webkit-transform:rotate(60deg); transform:rotate(60deg) } .gear-canvas .gear-area-c .four .gear-inner .bar:nth-child(3) { -webkit-transform:rotate(120deg); transform:rotate(120deg) } .gear-canvas .gear-area-c .four .gear-inner .bar:nth-child(4) { -webkit-transform:rotate(90deg); transform:rotate(90deg) } .gear-canvas .gear-area-c .four .gear-inner .bar:nth-child(5) { -webkit-transform:rotate(30deg); transform:rotate(30deg) } .gear-canvas .gear-area-c .four .gear-inner .bar:nth-child(6) { -webkit-transform:rotate(150deg); transform:rotate(150deg) } .gear-canvas .gear-area-c .four .gear-inner .bar:nth-child(7) { -webkit-transform:rotate(45deg); transform:rotate(45deg) } .gear-canvas .gear-area-c .four .gear-inner .bar:nth-child(8) { -webkit-transform:rotate(135deg); transform:rotate(135deg) } .gear-canvas .gear-area-c .four .gear-inner .bar:nth-child(9) { -webkit-transform:rotate(105deg); transform:rotate(105deg) } .gear-canvas .gear-area-c .four .gear-inner .bar:nth-child(10) { -webkit-transform:rotate(15deg); transform:rotate(15deg) } .gear-canvas .gear-area-c .four .gear-inner .bar:nth-child(11) { -webkit-transform:rotate(165deg); transform:rotate(165deg) } .gear-canvas .gear-area-c .four .gear-inner .bar:nth-child(12) { -webkit-transform:rotate(75deg); transform:rotate(75deg) } .gear-canvas .gear-area-c .four .gear-text { position:absolute; top:0; right:0; bottom:0; left:0; text-align:center; z-index:999; padding-left:12px; padding-right:12px } .gear-canvas .gear-area-c .four .gear-text h6 { font-weight:500; line-height:50px } .gear-canvas .gear-area-c .four:after { content:""; position:absolute; height:38px; width:38px; border-radius:50%; background-color:#f2f2f2; top:50%; left:50%; margin-left:-19px; margin-top:-19px; z-index:3 } .gear-canvas .gear-area-c .four:after { background-color:#D8D8D8; border:1px solid #fff } .gear-canvas .gear-area-c .four .gear-text { padding:0; top:-1.3em; left:-70px; right:auto; bottom:auto; width:12em } .gear-canvas .gear-area-c .four h6 { line-height:1em !important; height:1em; font-size:10px; text-transform:uppercase; letter-spacing:0.05em } .gear-canvas .gear-area-d { right:0; bottom:0 } .gear-canvas .gear-area-d .large { left:120px; top:55px } .gear-canvas .gear-area-d .normal { left:195px; top:-30px } .gear-canvas .gear-area-d .small { left:250px; top:40px } .gear-canvas .brain { position:absolute; top:0; right:0; bottom:0; left:0; width:215px; height:215px; left:calc(50% - 107.5px); top:calc(50% - 107.5px - 12px); text-align:center; background:url("../images/brain.png") no-repeat center center; z-index:999 } .gear-canvas .brain #laser { position:absolute; top:0; right:20px; bottom:0; left:20px; height:2px; background-color:#308cbe; box-shadow:0 0 50px 3px #308cbe } .gear-canvas .chain-wapper { position:absolute; top:58px; right:auto; bottom:auto; left:285px; z-index:100; stroke-width:3px; stroke:#333 } body.page--contact article { width:100% } @media (max-width: 840px) { body.page--contact article { -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-flow:column; flex-flow:column; -webkit-box-align:center; -ms-flex-align:center; align-items:center } }@media (min-width: 841px) { body.page--contact .contact-wrapper { width:50% } body.page--contact .contact-wrapper:nth-of-type(1) { padding-right:60px } body.page--contact .contact-wrapper:nth-of-type(2) { padding-left:48px } }@media (max-width: 840px) { body.page--contact .contact-wrapper { width:75% } body.page--contact .contact-wrapper:nth-of-type(1) { margin-bottom:5rem } }@media (max-width: 600px) { body.page--contact .contact-wrapper:nth-of-type(1) { margin-top:3rem; margin-bottom:3rem } }@media (min-width: 841px) { body.page--contact #contact-preface { width:80%; max-width:360px; float:right } }body.page--contact #contact-preface a { color:#004a7c } body.page--contact #contact-preface a:hover,body.page--contact #contact-preface a:focus { color:#39898D } @media (min-width: 841px) { body.page--contact #contact-form { width:80%; max-width:480px } }body.page--contact #contact-form .form-group { position:relative; margin-bottom:1em } body.page--contact #contact-form .form-group .form-control { height:28px; display:block; width:100%; padding:0.1em 0em 1px 0em; border:none; border-bottom:1px solid rgba(0,0,0,0.12); border-radius:0px; outline:none; margin:0px; background:none } body.page--contact #contact-form .form-group.submit { margin-bottom:0.5em } body.page--contact #contact-form .form-group::-webkit-input-placeholder,body.page--contact #contact-form .form-group:-moz-placeholder,body.page--contact #contact-form .form-group::-moz-placeholder,body.page--contact #contact-form .form-group:-ms-input-placeholder { color:transparent } body.page--contact #contact-form .form-group input,body.page--contact #contact-form .form-group textarea,body.page--contact #contact-form .form-group label { text-transform:uppercase; box-shadow:none; -webkit-box-shadow:none } body.page--contact #contact-form .form-group input:focus,body.page--contact #contact-form .form-group textarea:focus { box-shadow:none; -webkit-box-shadow:none; border-color:#39898D } body.page--contact #contact-form .form-group textarea.form-control { padding:0.1em 0em 5px 0em; height:120px } body.page--contact #contact-form .form-group .button { border:0; padding:0; cursor:pointer } body.page--home #loading { background:#1A262F; width:100vw; height:100vh; position:relative; z-index:99 } body.page--home #loading #logo-svg { position:absolute; top:50%; -webkit-transform:translateY(-50%); transform:translateY(-50%); left:calc(50vw - 103px) } body.page--home #loading #logo-svg svg { fill:#004a7c } body.page--home #loading #logo-svg.loading { fill:none } body.page--home #loading #logo-svg.loading svg path,body.page--home #loading #logo-svg.loading svg polygon { -webkit-animation:svgColor linear 3.5s infinite; animation:svgColor linear 3.5s infinite } body.page--home #loading #landing-container { width:100vw; height:100vh; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; -webkit-box-align:center; -ms-flex-align:center; align-items:center } body.page--home #loading #landing-container #mbp-wrapper { width:100vw; height:100vh } body.page--home #loading #landing-container #mbp-drawing { position:absolute; top:auto; right:auto; bottom:auto; left:auto; top:calc(50% - 205px); left:calc(50% - 399px) } body.page--home #loading #landing-container #mbp-drawing svg { pointer-events:none; height:410px } body.page--home #loading #landing-container #mbp-drawing .drawings { max-height:600px } body.page--home #loading #landing-container #mbp-drawing .line-drawing path { stroke:white; stroke-width:2 } body.page--home #loading #landing-container #about-us { font-family:"sofia-pro",sans-serif; width:526px; height:250px; position:absolute; top:calc(50% - 139px); right:calc(50% - 268px); bottom:calc(50% - 139px); left:calc(50% - 268px); padding:0 0 0 20px; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center } body.page--home #loading #landing-container #about-us .our-core { width:50%; height:250px; float:left; position:relative } body.page--home #loading #landing-container #about-us .our-core .circle { opacity:.75; filter:alpha(opacity=75); text-align:center; color:#fff; text-transform:uppercase; font-size:20px; letter-spacing:0.4px } body.page--home #loading #landing-container #about-us .our-core #circle-1,body.page--home #loading #landing-container #about-us .our-core #circle-4 { width:155px; height:155px; line-height:155px; background-image: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%); } body.page--home #loading #landing-container #about-us .our-core #circle-2,body.page--home #loading #landing-container #about-us .our-core #circle-3 { width:130px; height:130px; line-height:130px; background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%); } body.page--home #loading #landing-container #about-us .our-core #circle-1 { position:absolute; top:0; right:auto; bottom:auto; left:0; z-index:10 } body.page--home #loading #landing-container #about-us .our-core #circle-2 { position:absolute; top:0; right:0; bottom:auto; left:auto; z-index:8 } body.page--home #loading #landing-container #about-us .our-core #circle-3 { position:absolute; top:auto; right:auto; bottom:0; left:0; z-index:7 } body.page--home #loading #landing-container #about-us .our-core #circle-4 { position:absolute; top:auto; right:0; bottom:0; left:auto; z-index:9 } body.page--home #loading #landing-container #about-us .our-slogan { width:50%; float:right; position:relative; overflow:hidden } body.page--home #loading #landing-container #about-us .our-slogan h1 { margin-left:25px; color:#fff; font-size:46px; color:#FFFFFF; letter-spacing:0.24px; line-height:46px; font-weight:600 } body.page--home #loading #landing-container #enter-link { cursor:pointer; color:white; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; position:fixed; left:calc(50% - 60px) } body.page--home #loading #landing-container #enter-link .enter-link--text { font-size:16px; color:rgba(255,255,255,0.87); letter-spacing:2.67px } body.page--home #loading #landing-container #enter-link .enter-link--arrow { display:inline-block; width:60px; height:1px; background:white; position:relative; vertical-align:middle; margin-left:8px } body.page--home #loading #landing-container #enter-link .enter-link--arrow:after,body.page--home #loading #landing-container #enter-link .enter-link--arrow:before { content:""; position:absolute; top:0; right:0; width:8px; height:1px; background:white; -webkit-transform-origin:top right; transform-origin:top right } body.page--home #loading #landing-container #enter-link .enter-link--arrow:before { -webkit-transform:rotate(40deg); transform:rotate(40deg) } body.page--home #loading #landing-container #enter-link .enter-link--arrow:after { -webkit-transform:rotate(-40deg); transform:rotate(-40deg) } body.page--home #loading #landing-container #enter-link:hover .enter-link--text,body.page--home #loading #landing-container #enter-link:focus .enter-link--text { -webkit-transform:translateX(100%); transform:translateX(100%); transition:opacity 0.3s, -webkit-transform 0.3s; transition:opacity 0.3s, transform 0.3s; transition:opacity 0.3s, transform 0.3s, -webkit-transform 0.3s; padding-left:8px } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { body.page--home #loading #landing-container #enter-link:hover .enter-link--text,body.page--home #loading #landing-container #enter-link:focus .enter-link--text { -webkit-transform:translateX(110%); transform:translateX(110%); transition:none; padding-left:0 } }body.page--home #loading #landing-container #enter-link:hover .enter-link--arrow,body.page--home #loading #landing-container #enter-link:focus .enter-link--arrow { transition-delay:0.1s; -webkit-transform:translateX(-100%); transform:translateX(-100%); transition:opacity 0.3s, -webkit-transform 0.3s; transition:opacity 0.3s, transform 0.3s; transition:opacity 0.3s, transform 0.3s, -webkit-transform 0.3s; margin-left:0 } body.page--home .page-container #home-navigation--wrapper { -ms-flex-item-align:center; -ms-grid-row-align:center; align-self:center } @media (min-width: 601px) { body.page--home .page-container #home-navigation--wrapper { width:50% } }body.page--home .page-container #home-navigation--wrapper #home-navigation { width:170px; margin-left:auto; margin-right:auto } body.page--home .page-container #home-navigation--wrapper #home-navigation a { display:block; margin-bottom:24px } body.page--home .page-container #home-navigation--wrapper #home-navigation h3 { margin:0; line-height:1em; font-weight:700 } body.page--home .page-container #home-navigation--wrapper #home-navigation span { font-family:"sofia-pro",sans-serif; font-size:10px; font-weight:600; line-height:1em; letter-spacing:0.1em; text-transform:uppercase; display:block; margin-top:2px } body.page--home .page-container #home-navigation--wrapper #home-navigation span.small { font-size:13px } @media (min-width: 601px) { body.page--home .page-container #home-portfolio-list--wrapper { width:50% } body.page--home .page-container #home-portfolio-list--wrapper .portfolio-list { width:1728px } }@media (max-width: 600px) { body.page--home .page-container #home-portfolio-list--wrapper { display:none } }@media (min-width: 841px) { #services-graphic { width:940px; height:492px; position:absolute; top:calc(50% - 246px); bottom:calc(50% - 246px); left:calc(50% - 470px); right:calc(50% - 470px) }

1. services-graphic .area-typo.left,#services-graphic .area-typo.right

{ width:230px; float:left }

1. services-graphic .area-typo.left .typo-block,#services-graphic .area-typo.right .typo-block

{ position:relative; text-transform:uppercase }

1. services-graphic .area-typo.left .typo-block.top,#services-graphic .area-typo.right .typo-block.top

{ padding-bottom:78px }

1. services-graphic .area-typo.left .typo-block.bottom,#services-graphic .area-typo.right .typo-block.bottom

{ margin-top:78px }

1. services-graphic .area-typo.left .typo-block:before,#services-graphic .area-typo.right .typo-block:before

{ border-bottom:1px solid #979797; border-left:1px solid #979797; border-top:1px solid #979797; content:""; height:150px; left:-21px; position:absolute; top:10px; width:14px }

1. services-graphic .area-typo.left .typo-block .typo-line,#services-graphic .area-typo.right .typo-block .typo-line

{ border-top:1px dashed #979797; -webkit-transform:scale(1) !important; transform:scale(1) !important; width:38px; position:absolute; top:85px }

1. services-graphic .area-typo.left .typo-block h4,#services-graphic .area-typo.right .typo-block h4

{ line-height:1em; margin-top:0; margin-bottom:1em; color:#004a7c }

1. services-graphic .area-typo.left .typo-block ul li,#services-graphic .area-typo.right .typo-block ul li

{ font-size:12px; line-height:1.5em }

1. services-graphic .area-typo.left

{ text-align:right }

1. services-graphic .area-typo.left .typo-block

{ -webkit-transform:translateX(20px); transform:translateX(20px) }

1. services-graphic .area-typo.left .typo-block:before

{ border-left:none; border-right:1px solid #918f8e; left:auto; right:-21px }

1. services-graphic .area-typo.left .typo-line

{ left:auto; right:-60px }

1. services-graphic .area-typo.right

{ float:right }

1. services-graphic .area-typo.right .typo-block

{ -webkit-transform:translateX(-20px); transform:translateX(-20px) }

1. services-graphic .area-typo.right .typo-block:before

{ border-right:none; border-left:1px solid #918f8e; left:-21px; right:auto }

1. services-graphic .area-typo.right .typo-line

{ left:-60px; right:auto }

1. services-graphic .area-graphic

{ width:480px; float:left; padding-left:62px; padding-right:62px }

1. services-graphic .area-graphic .area-icon

{ position:relative }

1. services-graphic .area-graphic a.icon

{ width:45px; height:45px; line-height:45px; text-align:center; display:block; border:1px solid #979797 }

1. services-graphic .area-graphic a.icon.top

{ margin-top:62px }

1. services-graphic .area-graphic a.icon.bottom

{ margin-top:280px }

1. services-graphic .area-graphic a.icon:after

{ border-top:1px dashed #979797; content:""; position:absolute; width:125px }

1. services-graphic .area-graphic a.icon span

{ font-size:25px; color:#004a7c; display:block; margin-top:9px }

1. services-graphic .area-graphic a.icon:hover,#services-graphic .area-graphic a.icon:focus

{ background-color:#004a7c; border-color:#004a7c }

1. services-graphic .area-graphic a.icon:hover span,#services-graphic .area-graphic a.icon:focus span

{ color:#fff }

1. services-graphic .area-graphic .area-icon.left

{ float:left }

1. services-graphic .area-graphic .area-icon.left .top:after

{ left:26px; top:145px; -webkit-transform:rotate(45deg); transform:rotate(45deg) }

1. services-graphic .area-graphic .area-icon.left .bottom:after

{ left:26px; top:350px; -webkit-transform:rotate(-45deg); transform:rotate(-45deg) }

1. services-graphic .area-graphic .area-icon.right

{ float:right }

1. services-graphic .area-graphic .area-icon.right .top:after

{ right:26px; top:145px; -webkit-transform:rotate(-45deg); transform:rotate(-45deg) }

1. services-graphic .area-graphic .area-icon.right .bottom:after

{ right:26px; top:350px; -webkit-transform:rotate(45deg); transform:rotate(45deg) }

1. services-graphic .area.area-animate-graphic

{ width:322px; height:312px; float:left; margin-left:-28px; margin-right:-28px; margin-top:90px; position:relative }

1. services-graphic .area.area-animate-graphic .line-drawing path

{ stroke:#979797; stroke-width:1 }

1. services-graphic .area.area-animate-graphic .spinner-circle

{ opacity:0; position:absolute; top:0; right:0; bottom:0; left:0; top:calc(50% - 27px); left:calc(50% - 30px) }

1. services-graphic .area.area-animate-graphic .spinner-circle,#services-graphic .area.area-animate-graphic .spinner-circle:before,#services-graphic .area.area-animate-graphic .spinner-circle:after

{ position:absolute; background-color:transparent; border-radius:50%; border-style:solid }

1. services-graphic .area.area-animate-graphic .spinner-circle

{ width:60px; height:60px; border-width:6px; border-color:#004a7c transparent #004a7c transparent; opacity:.7; -webkit-animation:spinner-rotate-outer 2s ease-in-out infinite; animation:spinner-rotate-outer 2s ease-in-out infinite }

1. services-graphic .area.area-animate-graphic .spinner-circle:before

{ content:; position:absolute; width:25px; height:25px; border-width:6px; border-color:rgba(255,255,250,0.5); background-color:#004a7c; top:12px; left:12px; opacity:.9; -webkit-animation:spinner-rotate-inner 3s linear infinite; animation:spinner-rotate-inner 3s linear infinite }

1. services-graphic .area.area-animate-graphic .spinner-circle:after

{ content:; width:0; height:0; border-width:27px; top:-3px; left:-3px; opacity:.6; -webkit-animation:spinner-rotate-single-2 7s 0s ease-in-out infinite; animation:spinner-rotate-single-2 7s 0s ease-in-out infinite; border-color:transparent transparent transparent #004a7c; box-shadow:2px 0 2px #004a7c } }@media (max-width: 960px) and (min-width: 841px) { #services-graphic .typo-context h4 { font-size:16px } }@media (max-width: 840px) { #services-graphic { width:100vw; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:horizontal; -webkit-box-direction:normal; -ms-flex-flow:row; flex-flow:row; -webkit-box-align:center; -ms-flex-align:center; align-items:center }

1. services-graphic .area

{ width:50%; padding-left:8%; padding-right:8% }

1. services-graphic .area .typo-block

{ margin-bottom:2rem }

1. services-graphic .area .typo-block h4

{ color:#004a7c }

1. services-graphic .area-graphic

{ display:none } }@media (max-width: 600px) { #services-graphic { width:100vw; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-flow:column; flex-flow:column; -webkit-box-align:center; -ms-flex-align:center; align-items:center }

1. services-graphic .area

{ width:100%; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-flow:column; flex-flow:column; -webkit-box-align:center; -ms-flex-align:center; align-items:center }

1. services-graphic .area .typo-block

{ width:200px; margin-top:1rem; margin-bottom:1rem }

1. services-graphic .area .typo-block h4

{ color:#004a7c }

1. services-graphic .area-graphic

{ display:none } }#process-canvas { max-width:960px; display:-webkit-box; display:-ms-flexbox; display:flex; -ms-flex-wrap:wrap; flex-wrap:wrap } @media (min-width: 841px) { #process-canvas { margin-left:auto; margin-right:auto } }@media (max-width: 840px) { #process-canvas { margin-left:2rem; margin-right:2rem } }@media (max-width: 480px) { #process-canvas { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-flow:column; flex-flow:column; -webkit-box-align:center; -ms-flex-align:center; align-items:center } }@media (min-width: 841px) { #process-canvas .process-block { width:33.3333%; margin-top:56px; margin-bottom:56px } }#process-canvas .process-block .process-step { height:50px }

1. process-canvas .process-block .process-step .process-step-icon

{ float:left; width:50px; height:50px; line-height:50px; border:1px solid #979797; text-align:center; margin-right:12px; position:relative }

1. process-canvas .process-block .process-step .process-step-icon span

{ color:#004a7c; font-size:1.8em; line-height:50px }

1. process-canvas .process-block .process-step .process-step-icon:after

{ border-right:1px dashed #979797; content:""; position:absolute; top:50px; right:auto; bottom:auto; left:25px; height:112px }

1. process-canvas .process-block .process-step .process-step-title

{ color:#004a7c; height:50px; line-height:50px }

1. process-canvas .process-block .process-step-list

{ padding-left:61px }

1. process-canvas .process-block .dev-icon-list

{ padding-left:61px; margin-top:15px; position:relative }

1. process-canvas .process-block .dev-icon-list:before

{ border-top:1px dashed #979797; content:""; position:absolute; top:15px; right:auto; bottom:auto; left:26px; width:35px }

1. process-canvas .process-block .dev-icon-list .hexagon

{ width:28px; height:16px; background:#c5c5c5; position:relative; display:block; text-align:center; float:left; margin:8px 2px }

1. process-canvas .process-block .dev-icon-list .hexagon:before

{ content:""; position:absolute; top:-8px; left:0; width:0; height:0; border-left:14px solid transparent; border-right:14px solid transparent; border-bottom:8px solid #c5c5c5 }

1. process-canvas .process-block .dev-icon-list .hexagon:after

{ content:""; position:absolute; bottom:-8px; left:0; width:0; height:0; border-left:14px solid transparent; border-right:14px solid transparent; border-top:8px solid #c5c5c5 }

1. process-canvas .process-block .dev-icon-list .hexagon .icon

{ color:#f2f2f2; font-size:1.1em; display:block } @media (max-width: 840px) { #process-canvas .process-block { width:33.3333%; padding-left:8px; padding-right:8px; margin-top:2rem; margin-bottom:2rem }

1. process-canvas .process-block .process-step-icon,#process-canvas .process-block .dev-icon-list

{ display:none }

1. process-canvas .process-block .process-step-title

{ font-size:18px }

1. process-canvas .process-block .process-step-list

{ padding-left:0 } }@media (max-width: 600px) { #process-canvas .process-block { width:50%; margin-top:1rem; margin-bottom:1rem } }@media (max-width: 480px) { #process-canvas .process-block { width:200px; padding:0; margin-top:8px; margin-bottom:8px } }.portfolio-list--outline { border-left:1px solid rgba(0,0,0,0.12); overflow:hidden } .portfolio-list { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:horizontal; -webkit-box-direction:normal; -ms-flex-flow:row; flex-flow:row } .portfolio-list .portfolio-item { width:1728px; padding-left:24px; padding-right:24px } @media (min-width: 481px) { .portfolio-list .portfolio-item { border-right:1px solid rgba(0,0,0,0.12) } }.portfolio-list .portfolio-item .portfolio-item--number { display:block; width:100%; font-family:"sofia-pro",sans-serif; font-weight:300; line-height:1em; letter-spacing:-0.05em; color:rgba(0,0,0,0.12) } @media (min-width: 481px) { .portfolio-list .portfolio-item .portfolio-item--number { font-size:56px; margin-bottom:48px } }@media (max-width: 480px) { .portfolio-list .portfolio-item .portfolio-item--number { font-size:18px; margin-bottom:16px } }.portfolio-list .portfolio-item figure { margin-bottom:0 } .portfolio-list .portfolio-item picture { display:block; box-shadow:0 1px 4px 0 rgba(0,0,0,0.04); border:1px solid rgba(0,0,0,0.06); padding:8px; background-color:#fff } .portfolio-list .portfolio-item figcaption { text-transform:uppercase; font-weight:600; letter-spacing:2px; margin-top:1rem } .portfolio-list .portfolio-item figcaption span { display:block; width:100% } .portfolio-list .portfolio-item figcaption span.portfolio-category { font-size:10px; font-weight:300; letter-spacing:3.5px } .portfolio-list .portfolio-item a:hover picture,.portfolio-list .portfolio-item a:focus picture { box-shadow:0 8px 16px 0 rgba(0,0,0,0.24); -webkit-transform:translateY(-1rem); transform:translateY(-1rem); transition:all 0.3s ease-in-out } .portfolio-list .portfolio-item a:hover .portfolio-item--number,.portfolio-list .portfolio-item a:focus .portfolio-item--number { -webkit-transform:translateX(37.5%); transform:translateX(37.5%); transition:all 0.3s ease-in-out } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .portfolio-list .portfolio-item a { display:block; width:100% } .portfolio-list .portfolio-item img { width:100% } }#full-portfolio-list--wrapper { width:100%; overflow:hidden; margin-left:200px } @media (max-width: 1024px) { #full-portfolio-list--wrapper { margin-left:0 } }#full-portfolio-list--wrapper #full-portfolio-list { width:8064px } @media (min-width: 481px) { #full-portfolio-list--wrapper #full-portfolio-list .portfolio-item { width:336px; border-right:1px solid rgba(0,0,0,0.12); padding-left:48px; padding-right:48px } }@media (max-width: 480px) { #full-portfolio-list--wrapper #full-portfolio-list .portfolio-item { padding-left:16px; padding-right:16px } }#full-portfolio-list--wrapper .scroll-bar { margin-left:auto; margin-right:auto } .portfolio { width:100vw; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-flow:column; flex-flow:column; overflow:visible } .portfolio h1,.portfolio h2,.portfolio h3,.portfolio h4,.portfolio h5,.portfolio h6 { text-transform:capitalize; margin-bottom:1rem } .portfolio section { padding-top:120px; padding-bottom:120px } .portfolio section.small { padding-top:64px; padding-bottom:64px } .portfolio section.sub-section { padding-top:64px; padding-bottom:64px } @media (max-width: 480px) { .portfolio section.sub-section { padding-top:16px; padding-bottom:16px } }@media (max-width: 840px) { .portfolio section { padding-top:32px; padding-bottom:32px } }.portfolio .portfolio-header { padding-top:185px } .portfolio .portfolio-header--classic { text-align:right } .portfolio .portfolio-header--classic .article-title,.portfolio .portfolio-header--classic .article-brief { line-height:1; margin:0 } .portfolio .portfolio-header--classic .article-brief { font-weight:300; color:rgba(0,0,0,0.38); margin-bottom:0 } .portfolio .portfolio-header--classic .portfolio-label { font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Helvetica Neue",Helvetica,Arial,sans-serif; font-size:12px; font-weight:400; line-height:1; letter-spacing:0 } .portfolio .portfolio-header--classic .article-meta { color:rgba(0,0,0,0.54) } .portfolio h3.portfolio-title,.portfolio h3.portfolio-brief { letter-spacing:0.2em; font-weight:300 } .portfolio h1.portfolio-brief { letter-spacing:0.05em; line-height:70px } .portfolio img:not(:last-of-type) { margin-bottom:64px } .portfolio .tools img { margin-bottom:0; margin-left:8px; margin-right:8px } .portfolio .data * { line-height:1em; margin:0 } .portfolio .portfolio-navigation { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:horizontal; -webkit-box-direction:normal; -ms-flex-flow:row; flex-flow:row; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; margin-top:64px; margin-bottom:64px } .portfolio .portfolio-navigation a { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:horizontal; -webkit-box-direction:normal; -ms-flex-flow:row; flex-flow:row; -webkit-box-align:center; -ms-flex-align:center; align-items:center; font-family:"sofia-pro",sans-serif; font-size:32px; font-weight:600; line-height:1em; letter-spacing:2px } .portfolio .portfolio-navigation a .hint { font-size:10px; font-weight:300; letter-spacing:6.4px; text-transform:uppercase; display:block; height:1rem } .portfolio .portfolio-navigation a .potfolio-title { margin:0 } .portfolio .portfolio-navigation .arrow { display:inline-block; width:60px; height:1px; position:relative; vertical-align:middle; background-color:rgba(0,0,0,0.87) } .portfolio .portfolio-navigation .arrow:after,.portfolio .portfolio-navigation .arrow:before { content:""; position:absolute; top:0; width:8px; height:1px; background-color:rgba(0,0,0,0.87) } .portfolio .portfolio-navigation .arrow.left { margin-right:8px } .portfolio .portfolio-navigation .arrow.left:after,.portfolio .portfolio-navigation .arrow.left:before { left:0; -webkit-transform-origin:top left; transform-origin:top left } .portfolio .portfolio-navigation .arrow.right { margin-left:8px } .portfolio .portfolio-navigation .arrow.right:after,.portfolio .portfolio-navigation .arrow.right:before { right:0; -webkit-transform-origin:top right; transform-origin:top right } .portfolio .portfolio-navigation .arrow:before { -webkit-transform:rotate(40deg); transform:rotate(40deg) } .portfolio .portfolio-navigation .arrow:after { -webkit-transform:rotate(-40deg); transform:rotate(-40deg) } .portfolio .portfolio-navigation .prev:hover .arrow,.portfolio .portfolio-navigation .prev:hover .arrow:after,.portfolio .portfolio-navigation .prev:hover .arrow:before,.portfolio .portfolio-navigation .prev:focus .arrow,.portfolio .portfolio-navigation .prev:focus .arrow:after,.portfolio .portfolio-navigation .prev:focus .arrow:before,.portfolio .portfolio-navigation .next:hover .arrow,.portfolio .portfolio-navigation .next:hover .arrow:after,.portfolio .portfolio-navigation .next:hover .arrow:before,.portfolio .portfolio-navigation .next:focus .arrow,.portfolio .portfolio-navigation .next:focus .arrow:after,.portfolio .portfolio-navigation .next:focus .arrow:before { background:#004a7c } .portfolio .portfolio-navigation .prev:hover .arrow.left,.portfolio .portfolio-navigation .prev:focus .arrow.left,.portfolio .portfolio-navigation .next:hover .arrow.left,.portfolio .portfolio-navigation .next:focus .arrow.left { transition-delay:0.1s; width:16px; transition:all 0.3s ease-in-out; background:#004a7c } .portfolio .portfolio-navigation .next { text-align:right } .portfolio .portfolio-navigation .next:hover .arrow.right,.portfolio .portfolio-navigation .next:focus .arrow.right { transition-delay:0.1s; width:16px; transition:all 0.3s ease-in-out } @media (max-width: 480px) { .portfolio #pricing .row { -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-flow:column; flex-flow:column } .portfolio #pricing .row [class^="col-"] { width:100%; margin-bottom:1rem } }.portfolio-nav-panel { display:none; position:fixed; right:24px; top:50%; -webkit-transform:translateY(-50%); transform:translateY(-50%); background:rgba(203,51,102,0.87); color:white; padding:1rem 12px 4px 12px; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:horizontal; -webkit-box-direction:normal; -ms-flex-flow:row; flex-flow:row; -webkit-box-align:center; -ms-flex-align:center; align-items:center; z-index:50; box-shadow:0 1px 2px 0 rgba(0,0,0,0.5) } @media (max-width: 600px) { .portfolio-nav-panel { right:8px } }#portfolio-nav-toggle { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-flow:column; flex-flow:column; -webkit-box-align:center; -ms-flex-align:center; align-items:center; cursor:pointer }

1. portfolio-nav-toggle .hint

{ font-family:"sofia-pro",sans-serif; font-size:10px; font-weight:600; line-height:1em; letter-spacing:0.1em; text-transform:uppercase; margin-top:16px }

1. portfolio-nav-toggle .hint.small

{ font-size:13px }

1. portfolio-nav-toggle #menu-icon

{ height:8px }

1. portfolio-nav-toggle #menu-icon span,#portfolio-nav-toggle #menu-icon span:before,#portfolio-nav-toggle #menu-icon span:after

{ height:2px; width:21px; background:#fff; display:block; content:; z-index:50; transition:all 0.25s ease-in-out }

1. portfolio-nav-toggle #menu-icon span

{ position:relative }

1. portfolio-nav-toggle #menu-icon span:before

{ top:-7px; position:absolute }

1. portfolio-nav-toggle #menu-icon span:after

{ bottom:-7px; position:absolute }

1. portfolio-nav-toggle #menu-icon span.active

{ background:transparent }

1. portfolio-nav-toggle #menu-icon span.active:before

{ -webkit-transform:rotate(45deg); transform:rotate(45deg); background-color:#ffffff; top:0 }

1. portfolio-nav-toggle #menu-icon span.active:after

{ -webkit-transform:rotate(-45deg); transform:rotate(-45deg); background-color:#ffffff; bottom:0 } .portfolio-nav { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-flow:column; flex-flow:column; font-size:10px; color:white; margin-right:1rem; margin-bottom:8px; padding-left:0.5em } .portfolio-nav a { font-family:"sofia-pro",sans-serif; font-size:10px; font-weight:600; line-height:1em; letter-spacing:0.1em; text-transform:uppercase; font-weight:300; color:white; line-height:2em; position:relative } .portfolio-nav a.small { font-size:13px } .portfolio-nav a.active:before,.portfolio-nav a:hover:before,.portfolio-nav a:focus:before { content:"#"; position:absolute; left:-1em } .portfolio--classic section { padding:0 } .portfolio--classic .article-content { width:calc(100vw - 1rem) } @media (min-width: 1025px) { .portfolio--classic .article-content { height:calc(100vh - 1rem) } }.portfolio--classic .article-content .article-content-fix { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center } @media (min-width: 1025px) { .portfolio--classic .article-content .article-content-fix { width:200vw; height:calc(100vh - 1rem) } }@media (max-width: 1024px) { .portfolio--classic .article-content .article-content-fix { -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-flow:column; flex-flow:column; height:auto } }.portfolio--classic .work-showcase { height:calc(100vh - 1rem); overflow:hidden } @media (min-width: 1025px) { .portfolio--classic .work-showcase { width:calc(50vw - 0.5rem) } }@media (max-width: 1024px) { .portfolio--classic .work-showcase { height:66.66vw } }.portfolio--classic .work-detail { color:rgba(0,0,0,0.54); position:relative; overflow:visible; padding:24px !important; background:#FFFFFF; box-shadow:0px 1px 2px 0px rgba(0,0,0,0.2) } @media (min-width: 1025px) { .portfolio--classic .work-detail { width:30vw; height:33.33vw } }@media (max-width: 1024px) { .portfolio--classic .work-detail { width:100%; padding-left:10% !important; padding-right:10% !important } }.portfolio--classic .work-detail .work-detail-nav { margin-bottom:20px } .portfolio--classic .work-detail .work-detail-nav>li { display:inline; margin-right:1em } .portfolio--classic .work-detail .work-detail-nav>li a.active { text-decoration:none; padding-bottom:3px } .portfolio--classic .work-detail .content-wrapper { padding-right:20px; overflow-y:scroll } @media (min-width: 1025px) { .portfolio--classic .work-detail .content-wrapper { height:calc(33.33vw - 140px) } }.portfolio--classic .work-detail .content-wrapper ul { padding-left:20px; list-style:disc; margin-bottom:1.5em } .portfolio--classic .work-detail .content-wrapper p { margin-top:0; margin-bottom:1em } @media (min-width: 1025px) { .portfolio--classic .portfolio-header { height:33.33vw; padding:0 } .portfolio--classic .portfolio-header .article-title { white-space:nowrap; -webkit-transform:rotate(90deg); transform:rotate(90deg); -webkit-transform-origin:0 0; transform-origin:0 0; margin:0; margin-left:52px; line-height:1 } }@media (max-width: 1024px) { .portfolio--classic .portfolio-header { padding-top:80px; padding-bottom:32px; text-align:center } .portfolio--classic .portfolio-header .article-meta { font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Helvetica Neue",Helvetica,Arial,sans-serif; font-size:12px; font-weight:400; line-height:1; letter-spacing:0; color:rgba(0,0,0,0.38) } .portfolio--classic .portfolio-header .article-meta .label { padding-left:4px; padding-right:4px } }.portfolio--classic .portfolio-footer { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center } @media (min-width: 1025px) { .portfolio--classic .portfolio-footer { position:absolute; z-index:50; width:100vw; bottom:6vh } }@media (max-width: 1024px) { .portfolio--classic .portfolio-footer { margin-top:24px; margin-bottom:24px } }.portfolio--classic .portfolio-footer .wrapper { width:960px } .portfolio--classic .portfolio-footer .portfolio-navigation { margin:0 } @media (max-width: 640px) { .portfolio-brief { font-size:31px; line-height:1.5 !important } }.price-table--body { min-height:420px } .page--4ocal-web-ui-kit .color-primary { color:#92A8D1 } .page--4ocal-web-ui-kit .bg-color-primary { background:#92A8D1 } .page--4ocal-web-ui-kit .color-secondary { color:#F7CAC9 } .page--4ocal-web-ui-kit .bg-color-secondary { background:#F7CAC9 } .page--4ocal-web-ui-kit .color-success { color:#79C753 } .page--4ocal-web-ui-kit .bg-color-success { background:#79C753 } .page--4ocal-web-ui-kit .color-warning { color:#FAE03C } .page--4ocal-web-ui-kit .bg-color-warning { background:#FAE03C } .page--4ocal-web-ui-kit .color-alert { color:#DD4132 } .page--4ocal-web-ui-kit .bg-color-alert { background:#DD4132 } .page--4ocal-web-ui-kit .page-border { border-color:white } .page--4ocal-web-ui-kit .page-container { background:#F7CAC9; z-index:-2 } .page--4ocal-web-ui-kit .main:after { content:""; width:50%; position:absolute; top:0; right:0; bottom:0; background:#92A8D1; z-index:-1 } .page--4ocal-web-ui-kit .portfolio-header { width:100%; padding-top:120px; padding-bottom:120px } @media (max-width: 840px) and (min-width: 481px) { .page--4ocal-web-ui-kit .portfolio-header h1 { font-size:56px } .page--4ocal-web-ui-kit .portfolio-header h5 { font-size:18px } }@media (max-width: 480px) and (max-width: 361px) { .page--4ocal-web-ui-kit .portfolio-header h1 { font-size:32px } .page--4ocal-web-ui-kit .portfolio-header h5 { font-size:10px } .page--4ocal-web-ui-kit .portfolio-header .portfolio-title { text-align:center } .page--4ocal-web-ui-kit .portfolio-header .portfolio-brief { font-size:24px; line-height:1.4 } .page--4ocal-web-ui-kit .portfolio-header .layout-space-4 { height:2rem } }@media (max-width: 360px) { .page--4ocal-web-ui-kit .portfolio-header { padding-bottom:60px } .page--4ocal-web-ui-kit .portfolio-header h1 { font-size:28px } .page--4ocal-web-ui-kit .portfolio-header h5 { font-size:8px } .page--4ocal-web-ui-kit .portfolio-header .color-primary { width:60% } .page--4ocal-web-ui-kit .portfolio-header .portfolio-title { text-align:center } .page--4ocal-web-ui-kit .portfolio-header .portfolio-title img { width:80% } .page--4ocal-web-ui-kit .portfolio-header .portfolio-brief { font-size:18px; line-height:1.4 } }.page--4ocal-web-ui-kit .portfolio-details { box-shadow:0 4px 5px 0 rgba(0,0,0,0.04); background-color:#f2f2f2 } @media (min-width: 1281px) { .page--4ocal-web-ui-kit .portfolio-details { margin-left:80px; margin-right:80px } }@media (min-width: 1025px) and (max-width: 1280px) { .page--4ocal-web-ui-kit .portfolio-details { margin-left:48px; margin-right:48px } }.page--4ocal-web-ui-kit .section-title.combo { margin-bottom:80px } @media (max-width: 600px) { .page--4ocal-web-ui-kit .section-title.combo { margin-bottom:48px } }.page--4ocal-web-ui-kit .section-title.combo h1,.page--4ocal-web-ui-kit .section-title.combo h3 { margin:0; font-weight:400 } .page--4ocal-web-ui-kit .section-title.combo h1 { text-align:center; color:rgba(0,0,0,0.12) } @media (max-width: 840px) and (min-width: 601px) { .page--4ocal-web-ui-kit .section-title.combo h1 { font-size:56px } }@media (max-width: 600px) and (min-width: 361px) { .page--4ocal-web-ui-kit .section-title.combo h1 { font-size:42px } }@media (max-width: 360px) { .page--4ocal-web-ui-kit .section-title.combo h1 { font-size:36px } }.page--4ocal-web-ui-kit .section-title.combo h3 { margin-top:-0.8em } @media (max-width: 840px) and (min-width: 601px) { .page--4ocal-web-ui-kit .section-title.combo h3 { font-size:28px; margin-top:-1em } }@media (max-width: 600px) and (min-width: 481px) { .page--4ocal-web-ui-kit .section-title.combo h3 { font-size:24px; margin-top:-1.2em } }@media (max-width: 480px) { .page--4ocal-web-ui-kit .section-title.combo h3 { font-size:18px; margin-top:-1.2em } }@media (max-width: 360px) { .page--4ocal-web-ui-kit .section-title.combo .cols { width:100vw; text-align:center } .page--4ocal-web-ui-kit .section-title.combo .col-3 { width:0 } }.page--4ocal-web-ui-kit .sub-section-title { text-align:center; color:#F7CAC9 } .page--4ocal-web-ui-kit .sub-section-title .components-title { margin-bottom:-0.5rem } @media (max-width: 360px) { .page--4ocal-web-ui-kit .sub-section-title .components-title { margin-bottom:-0.2em } }@media (max-width: 600px) and (min-width: 481px) { .page--4ocal-web-ui-kit .sub-section-title h1 { font-size:56px } }@media (max-width: 480px) and (min-width: 361px) { .page--4ocal-web-ui-kit .sub-section-title h1 { font-size:38px } }@media (max-width: 360px) { .page--4ocal-web-ui-kit .sub-section-title h1 { font-size:28px } }.page--4ocal-web-ui-kit .color { text-align:center } .page--4ocal-web-ui-kit .color-1 { z-index:50 } .page--4ocal-web-ui-kit .color-2 { margin-left:-48px; z-index:9 } @media (max-width: 480px) { .page--4ocal-web-ui-kit .color-2 { margin-left:-24px } }.page--4ocal-web-ui-kit .color .circle { width:200px; height:200px; border-radius:50%; margin-bottom:1rem } @media (max-width: 600px) and (min-width: 481px) { .page--4ocal-web-ui-kit .color .circle { width:150px; height:150px } }@media (max-width: 480px) and (min-width: 361px) { .page--4ocal-web-ui-kit .color .circle { width:100px; height:100px; margin-bottom:0.5rem } }@media (max-width: 360px) { .page--4ocal-web-ui-kit .color .circle { width:80px; height:80px } }.page--4ocal-web-ui-kit .color .circle.small { width:100px; height:100px } @media (max-width: 600px) and (min-width: 481px) { .page--4ocal-web-ui-kit .color .circle.small { width:70px; height:70px } }@media (max-width: 480px) and (min-width: 361px) { .page--4ocal-web-ui-kit .color .circle.small { width:40px; height:40px } }@media (max-width: 360px) { .page--4ocal-web-ui-kit .color .circle.small { width:30px; height:30px } }.page--4ocal-web-ui-kit .color-1 .circle,.page--4ocal-web-ui-kit .color-2 .circle { opacity:0.8 } .page--4ocal-web-ui-kit .color .color-name { font-weight:400; margin:0 } @media (max-width: 600px) and (min-width: 481px) { .page--4ocal-web-ui-kit .color .color-name { font-size:18px } }@media (max-width: 480px) and (min-width: 361px) { .page--4ocal-web-ui-kit .color .color-name { font-size:16px } }@media (max-width: 360px) { .page--4ocal-web-ui-kit .color .color-name { display:none } }.page--4ocal-web-ui-kit .color .color-value { font-weight:400; color:rgba(0,0,0,0.54); letter-spacing:0.1em } @media (max-width: 600px) and (min-width: 481px) { .page--4ocal-web-ui-kit .color .color-value { font-size:14px } }@media (max-width: 480px) and (min-width: 361px) { .page--4ocal-web-ui-kit .color .color-value { font-size:10px } }@media (max-width: 360px) { .page--4ocal-web-ui-kit .color .color-value { display:none } }.page--4ocal-web-ui-kit .accent-color { height:100% } .page--4ocal-web-ui-kit .price-table--body { min-height:510px } .page--4eeder-web-ui-kit .page-border { border-color:white } .page--4eeder-web-ui-kit .hero--content--mobile { margin:0; padding:0 } .page--4eeder-web-ui-kit .hero--content { background:#034F84; color:white; padding:0; height:715px; position:relative } .page--4eeder-web-ui-kit .hero--content .portfolio-header { position:absolute; top:calc(50% + 10px); -webkit-transform:translateY(-50%); transform:translateY(-50%); right:50%; padding-top:0; padding-left:20px; padding-right:20px; text-align:center; background:#034F84; z-index:50 } .page--4eeder-web-ui-kit .hero--content .portfolio-title,.page--4eeder-web-ui-kit .hero--content .portfolio-brief { margin:0; font-weight:400; letter-spacing:0; line-height:1em } .page--4eeder-web-ui-kit .hero--content .button { background:#B18F6A; box-shadow:none; border-radius:2px; margin-top:2rem } .page--4eeder-web-ui-kit .hero--content .deco--line { position:absolute; top:50%; -webkit-transform:translateY(-50%); transform:translateY(-50%); left:0; width:100%; height:1px; background:white; z-index:9 } .page--4eeder-web-ui-kit .hero--content .portfolio-logo { position:absolute; top:50%; -webkit-transform:translateY(-50%); transform:translateY(-50%); left:calc(50% + 540px); padding:20px; background:#034F84; z-index:999 } @media (max-width: 1280px) { .page--4eeder-web-ui-kit .hero--content .portfolio-logo { display:none } }.page--4eeder-web-ui-kit .hero--content .hero--images { height:715px; overflow:hidden; position:relative; z-index:99 } .page--4eeder-web-ui-kit .hero--content .hero--images .col--left { text-align:left; height:715px; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:start; -ms-flex-align:start; align-items:flex-start; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-flow:column; flex-flow:column; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between } .page--4eeder-web-ui-kit .hero--content .hero--images .col--right { text-align:right } .page--4eeder-web-ui-kit .hero--content .hero--images img:not(:last-of-type) { margin-bottom:24px } .page--4eeder-web-ui-kit .hero--content .hero--images .hero--image-1 { margin-top:-120px } .page--4eeder-web-ui-kit .hero--content .hero--images .hero--image-2 { margin-bottom:-120px } .page--4eeder-web-ui-kit #intro { background:#034F84; color:white; text-align:center; font-size:20px; font-weight:300; letter-spacing:0.067em } @media (max-width: 640px) { .page--4eeder-web-ui-kit #intro { font-size:16px } }.page--4eeder-web-ui-kit #intro .button { margin-top:32px; margin-bottom:24px } .page--4eeder-web-ui-kit .section-title { text-align:center; margin-bottom:64px } .page--4eeder-web-ui-kit .section-title h1 { font-weight:200; margin-bottom:64px } @media (max-width: 640px) { .page--4eeder-web-ui-kit .section-title h1 { font-size:32px } }.page--4eeder-web-ui-kit #styles img:not(:last-of-type) { margin-bottom:120px } @media (max-width: 640px) { .page--4eeder-web-ui-kit #styles img:not(:last-of-type) { margin-bottom:60px } }.page--4eeder-web-ui-kit .sub-section { padding-top:64px } .page--4eeder-web-ui-kit .price-table { -webkit-box-align:center; -ms-flex-align:center; align-items:center } .page--4eeder-web-ui-kit .price-table--body { min-height:auto !important; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center } .page--applemusic-gui { background-color:#fff } .page--applemusic-gui .page-border { border-style:solid; border-width:8px; border-image-source:radial-gradient(circle at 25% 100%, #e751be, #eb719d 34%, #9c62ea 67%, #4e54e6); border-image-slice:1 } .page--applemusic-gui h1,.page--applemusic-gui h2 { font-family:"myriad-pro","Helvetica Neue","Helvetica","Arial",sans-serif !important } .page--applemusic-gui p { font-size:1rem } .page--applemusic-gui .container { margin:0 auto; padding-top:120px; padding-bottom:120px; text-align:center } @media (min-width: 961px) { .page--applemusic-gui .container { width:960px } }@media (max-width: 960px) { .page--applemusic-gui .container { width:100%; padding-left:24px; padding-right:24px } }@media (max-width: 480px) { .page--applemusic-gui .container { padding:3rem 1rem } }.page--applemusic-gui .button { font-size:15.75px; line-height:1.9375; font-weight:300; letter-spacing:0em; background-color:#0070c9; background:linear-gradient(#42a1ec, #0070c9); border-color:#07c; border-width:1px; border-style:solid; border-radius:4px; color:#fff; cursor:pointer; display:inline-block; min-width:30px; padding-left:15px; padding-right:15px; padding-top:1px; text-align:center; white-space:nowrap; text-decoration:none; margin-top:40px; text-transform:capitalize } .page--applemusic-gui .button:hover,.page--applemusic-gui .button:focus { background-color:#147bcd; background:linear-gradient(#51a9ee, #147bcd); border-color:#1482d0; text-decoration:none } .page--applemusic-gui section { padding:0 } .page--applemusic-gui section h1,.page--applemusic-gui section h2 { margin-left:auto; margin-right:auto } .page--applemusic-gui section h2 { font-size:48px; line-height:1; font-weight:300; letter-spacing:0em; margin-top:16px } @media (min-width: 961px) { .page--applemusic-gui section h2 { width:640px } }@media (max-width: 600px) { .page--applemusic-gui section h2 { font-size:36px } }@media (max-width: 480px) { .page--applemusic-gui section h2 { font-size:28px } }.page--applemusic-gui section p { margin-left:auto; margin-right:auto } @media (min-width: 961px) { .page--applemusic-gui section p { width:640px } }.page--applemusic-gui section p.update { font-size:15.75px; color:#999; margin-top:8px } .page--applemusic-gui section#section-hero { background-color:#fafafa } .page--applemusic-gui section#section-hero .container { padding-top:120px } .page--applemusic-gui section#section-hero h1 { font-size:64px; line-height:1.0625; letter-spacing:-0.02em; font-weight:300 } @media (min-width: 961px) { .page--applemusic-gui section#section-hero h1 { width:864px } }@media (max-width: 600px) { .page--applemusic-gui section#section-hero h1 { font-size:48px } }@media (max-width: 480px) { .page--applemusic-gui section#section-hero h1 { font-size:32px } }.page--applemusic-gui section#section-hero h1 .subhead { display:block; color:#888888 } .page--applemusic-gui section#desclaimer { height:600px; background:url("../images/sketch_screen_02.jpg") no-repeat top center; color:#fff } @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) { .page--applemusic-gui section#desclaimer { background:url("../images/sketch_screen_02@2x.jpg") no-repeat top center; background-size:auto 600px } }.page--applemusic-gui section#desclaimer .container { padding-top:170px } .page--applemusic-gui section#desclaimer .social-share { margin-top:60px } .page--applemusic-gui section#desclaimer .social-share>a { color:#fff; font-size:15.75px } .page--applemusic-gui section#desclaimer .social-share>a .social-icon { width:18px; height:18px } .page--applemusic-gui section#desclaimer .social-share>a span { vertical-align:top; line-height:20px; margin-left:4px } .page--applemusic-gui section#desclaimer .social-share>a.facebook-share-button { margin-right:18px } .page--applemusic-gui figure.hero-image { width:930px; height:532px; background:url("../images/apple_music_image.jpg") no-repeat center; margin-left:auto; margin-right:auto; position:relative; margin-top:120px } @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) { .page--applemusic-gui figure.hero-image { background:url("../images/apple_music_image@2x.jpg") no-repeat center; background-size:930px 532px } }@media (max-width: 960px) { .page--applemusic-gui figure.hero-image { background-size:contain; width:100% } }@media (max-width: 600px) { .page--applemusic-gui figure.hero-image { height:350px; margin-top:64px } }@media (max-width: 480px) { .page--applemusic-gui figure.hero-image { height:280px } }@media (max-width: 360px) { .page--applemusic-gui figure.hero-image { height:210px; margin-top:48px } }.page--applemusic-gui figure.apple-music-logo { width:138px; height:35px; background:url("../images/apple_music_logo.png") no-repeat center; margin-left:auto; margin-right:auto } @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) { .page--applemusic-gui figure.apple-music-logo { background:url("../images/apple_music_logo@2x.png") no-repeat center; background-size:138px 35px } }.page--applemusic-gui figure.sketch-preview { width:980px; height:620px; background:url("../images/sketch_screen_01.jpg") no-repeat center; margin-left:auto; margin-right:auto; position:relative; margin-top:60px; box-shadow:0 4px 5px 0 rgba(0,0,0,0.04) } @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) { .page--applemusic-gui figure.sketch-preview { background:url("../images/sketch_screen_01@2x.jpg") no-repeat center; background-size:980px 620px } }@media (max-width: 960px) { .page--applemusic-gui figure.sketch-preview { background-size:contain; width:100% } }@media (max-width: 840px) { .page--applemusic-gui figure.sketch-preview { height:485px } }@media (max-width: 600px) { .page--applemusic-gui figure.sketch-preview { height:336px; margin-top:64px } }@media (max-width: 480px) { .page--applemusic-gui figure.sketch-preview { height:280px } }@media (max-width: 360px) { .page--applemusic-gui figure.sketch-preview { height:210px; margin-top:48px } }.page--applemusic-gui #slides { width:930px; height:532px; padding:39px 121px 62px 119px; background:url("../images/macbook_mockup.jpg") no-repeat center } @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-moz-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) { .page--applemusic-gui #slides { background:url("../images/macbook_mockup@2x.jpg") no-repeat center; background-size:930px 532px } }@media (max-width: 960px) { .page--applemusic-gui #slides { width:744px; height:425.6px; padding:31px 96px 34px 94px; background:url("../images/macbook_mockup.jpg") no-repeat center } }@media screen and (max-width: 960px) and (-webkit-min-device-pixel-ratio: 2), screen and (max-width: 960px) and (min--moz-device-pixel-ratio: 2), screen and (max-width: 960px) and (-moz-min-device-pixel-ratio: 2), screen and (max-width: 960px) and (min-device-pixel-ratio: 2), screen and (max-width: 960px) and (min-resolution: 192dpi), screen and (max-width: 960px) and (min-resolution: 2dppx) { .page--applemusic-gui #slides { background:url("../images/macbook_mockup@2x.jpg") no-repeat center; background-size:744px 425.6px } }@media (max-width: 960px) { .page--applemusic-gui #slides #overflow,.page--applemusic-gui #slides img { width:553px } }@media (max-width: 840px) { .page--applemusic-gui #slides { width:558px; height:319.2px; padding:24px 73px 26px 71px; background:url("../images/macbook_mockup.jpg") no-repeat center } }@media screen and (max-width: 840px) and (-webkit-min-device-pixel-ratio: 2), screen and (max-width: 840px) and (min--moz-device-pixel-ratio: 2), screen and (max-width: 840px) and (-moz-min-device-pixel-ratio: 2), screen and (max-width: 840px) and (min-device-pixel-ratio: 2), screen and (max-width: 840px) and (min-resolution: 192dpi), screen and (max-width: 840px) and (min-resolution: 2dppx) { .page--applemusic-gui #slides { background:url("../images/macbook_mockup@2x.jpg") no-repeat center; background-size:558px 319.2px } }@media (max-width: 840px) { .page--applemusic-gui #slides #overflow,.page--applemusic-gui #slides img { width:414px } }@media (max-width: 600px) { .page--applemusic-gui #slides { width:418.5px; height:239.4px; padding:17px 54px 18px 53px; background:url("../images/macbook_mockup.jpg") no-repeat center } }@media screen and (max-width: 600px) and (-webkit-min-device-pixel-ratio: 2), screen and (max-width: 600px) and (min--moz-device-pixel-ratio: 2), screen and (max-width: 600px) and (-moz-min-device-pixel-ratio: 2), screen and (max-width: 600px) and (min-device-pixel-ratio: 2), screen and (max-width: 600px) and (min-resolution: 192dpi), screen and (max-width: 600px) and (min-resolution: 2dppx) { .page--applemusic-gui #slides { background:url("../images/macbook_mockup@2x.jpg") no-repeat center; background-size:418.5px 239.4px } }@media (max-width: 600px) { .page--applemusic-gui #slides #overflow,.page--applemusic-gui #slides img { width:310.5px } }@media (max-width: 480px) { .page--applemusic-gui #slides { width:353.4px; height:202.16px; padding:15px 46px 16px 45px; background:url("../images/macbook_mockup.jpg") no-repeat center } }@media screen and (max-width: 480px) and (-webkit-min-device-pixel-ratio: 2), screen and (max-width: 480px) and (min--moz-device-pixel-ratio: 2), screen and (max-width: 480px) and (-moz-min-device-pixel-ratio: 2), screen and (max-width: 480px) and (min-device-pixel-ratio: 2), screen and (max-width: 480px) and (min-resolution: 192dpi), screen and (max-width: 480px) and (min-resolution: 2dppx) { .page--applemusic-gui #slides { background:url("../images/macbook_mockup@2x.jpg") no-repeat center; background-size:353.4px 202.16px } }@media (max-width: 480px) { .page--applemusic-gui #slides #overflow,.page--applemusic-gui #slides img { width:262.2px } }@media (max-width: 360px) { .page--applemusic-gui #slides { width:279px; height:159.6px; padding:12px 36px 13px 35px; background:url("../images/macbook_mockup.jpg") no-repeat center } }@media screen and (max-width: 360px) and (-webkit-min-device-pixel-ratio: 2), screen and (max-width: 360px) and (min--moz-device-pixel-ratio: 2), screen and (max-width: 360px) and (-moz-min-device-pixel-ratio: 2), screen and (max-width: 360px) and (min-device-pixel-ratio: 2), screen and (max-width: 360px) and (min-resolution: 192dpi), screen and (max-width: 360px) and (min-resolution: 2dppx) { .page--applemusic-gui #slides { background:url("../images/macbook_mockup@2x.jpg") no-repeat center; background-size:279px 159.6px } }@media (max-width: 360px) { .page--applemusic-gui #slides #overflow,.page--applemusic-gui #slides img { width:207px } }