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 } }

1. 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) }

#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 }

#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 } }

1. 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) }

#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 } }

1. 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 } }

1. 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 } }

1. 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 } }

1. 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 }

#site-header #nav-toggle { position: absolute; top: 0; right: 0; cursor: pointer; padding: 10px 22px 10px 0px }

#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 }

#site-header #nav-toggle #menu-icon:before { top: -7px }

#site-header #nav-toggle #menu-icon:after { bottom: -7px }

#site-header #nav-toggle #menu-icon.active { background: transparent }

#site-header #nav-toggle #menu-icon.active:before { -webkit-transform: rotate(45deg); transform: rotate(45deg); background-color: #ffffff; top: 0 }

#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 }

#site-header #back { position: absolute; right: 8px; top: 20px }

#site-header #back .prev-page { display: none } }

1. 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 } }

1. 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) } }

1. 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 } }

1. 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) }

#services-graphic .area-typo.left,#services-graphic .area-typo.right { width: 230px; float: left }

#services-graphic .area-typo.left .typo-block,#services-graphic .area-typo.right .typo-block { position: relative; text-transform: uppercase }

#services-graphic .area-typo.left .typo-block.top,#services-graphic .area-typo.right .typo-block.top { padding-bottom: 78px }

#services-graphic .area-typo.left .typo-block.bottom,#services-graphic .area-typo.right .typo-block.bottom { margin-top: 78px }

#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 }

#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 }

#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 }

#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 }

#services-graphic .area-typo.left { text-align: right }

#services-graphic .area-typo.left .typo-block { -webkit-transform: translateX(20px); transform: translateX(20px) }

#services-graphic .area-typo.left .typo-block:before { border-left: none; border-right: 1px solid #918f8e; left: auto; right: -21px }

#services-graphic .area-typo.left .typo-line { left: auto; right: -60px }

#services-graphic .area-typo.right { float: right }

#services-graphic .area-typo.right .typo-block { -webkit-transform: translateX(-20px); transform: translateX(-20px) }

#services-graphic .area-typo.right .typo-block:before { border-right: none; border-left: 1px solid #918f8e; left: -21px; right: auto }

#services-graphic .area-typo.right .typo-line { left: -60px; right: auto }

#services-graphic .area-graphic { width: 480px; float: left; padding-left: 62px; padding-right: 62px }

#services-graphic .area-graphic .area-icon { position: relative }

#services-graphic .area-graphic a.icon { width: 45px; height: 45px; line-height: 45px; text-align: center; display: block; border: 1px solid #979797 }

#services-graphic .area-graphic a.icon.top { margin-top: 62px }

#services-graphic .area-graphic a.icon.bottom { margin-top: 280px }

#services-graphic .area-graphic a.icon:after { border-top: 1px dashed #979797; content: ""; position: absolute; width: 125px }

#services-graphic .area-graphic a.icon span { font-size: 25px; color: #004a7c; display: block; margin-top: 9px }

#services-graphic .area-graphic a.icon:hover,#services-graphic .area-graphic a.icon:focus { background-color: #004a7c; border-color: #004a7c }

#services-graphic .area-graphic a.icon:hover span,#services-graphic .area-graphic a.icon:focus span { color: #fff }

#services-graphic .area-graphic .area-icon.left { float: left }

#services-graphic .area-graphic .area-icon.left .top:after { left: 26px; top: 145px; -webkit-transform: rotate(45deg); transform: rotate(45deg) }

#services-graphic .area-graphic .area-icon.left .bottom:after { left: 26px; top: 350px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg) }

#services-graphic .area-graphic .area-icon.right { float: right }

#services-graphic .area-graphic .area-icon.right .top:after { right: 26px; top: 145px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg) }

#services-graphic .area-graphic .area-icon.right .bottom:after { right: 26px; top: 350px; -webkit-transform: rotate(45deg); transform: rotate(45deg) }

#services-graphic .area.area-animate-graphic { width: 322px; height: 312px; float: left; margin-left: -28px; margin-right: -28px; margin-top: 90px; position: relative }

#services-graphic .area.area-animate-graphic .line-drawing path { stroke: #979797; stroke-width: 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) }

#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 }

#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 }

#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 }

#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 }

#services-graphic .area { width: 50%; padding-left: 8%; padding-right: 8% }

#services-graphic .area .typo-block { margin-bottom: 2rem }

#services-graphic .area .typo-block h4 { color: #004a7c }

#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 }

#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 }

#services-graphic .area .typo-block { width: 200px; margin-top: 1rem; margin-bottom: 1rem }

#services-graphic .area .typo-block h4 { color: #004a7c }

#services-graphic .area-graphic { display: none } }

1. 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 } }

1. 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 }

#process-canvas .process-block .process-step-icon,#process-canvas .process-block .dev-icon-list { display: none }

#process-canvas .process-block .process-step-title { font-size: 18px }

#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% } }

1. full-portfolio-list--wrapper {

width: 100%; overflow: hidden; margin-left: 200px }

@media (max-width: 1024px) { #full-portfolio-list--wrapper { margin-left: 0 } }

1. 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 } }

1. 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 } }

1. 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 } }