Liu Zichen (Talk | contribs) |
Liu Zichen (Talk | contribs) |
||
Line 12: | Line 12: | ||
<link rel="stylesheet" type="text/css" href="https://2017.igem.org/Team:Tianjin/Resources/CSS:begining?action=raw&ctype=text/css" /> | <link rel="stylesheet" type="text/css" href="https://2017.igem.org/Team:Tianjin/Resources/CSS:begining?action=raw&ctype=text/css" /> | ||
− | + | ||
<link rel="canonical" href=""> | <link rel="canonical" href=""> | ||
<script> | <script> | ||
Line 73: | Line 73: | ||
} | } | ||
+ | .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 | ||
+ | } | ||
+ | |||
+ | #site-navigation | ||
+ | { | ||
+ | transition: all 0.2s ease-in-out | ||
+ | } | ||
+ | |||
+ | #site-navigation | ||
+ | { | ||
+ | transition: all 0.2s ease-in-out | ||
+ | } | ||
+ | |||
+ | #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 | ||
+ | } | ||
+ | |||
+ | #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 | ||
+ | } | ||
+ | |||
+ | #services-graphic .area-typo.left .typo-block .typo-line,#services-graphic .area-typo.right .typo-block .typo-line | ||
+ | { | ||
+ | transition: all 0.7s ease 0s | ||
+ | } | ||
+ | |||
+ | #services-graphic .area-graphic a.icon | ||
+ | { | ||
+ | opacity: 0 | ||
+ | } | ||
+ | |||
+ | #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 | ||
+ | } | ||
+ | |||
+ | #services-graphic .area-graphic .area-icon.left .top span | ||
+ | { | ||
+ | -webkit-animation: iconColor 16s ease 2s infinite; | ||
+ | animation: iconColor 16s ease 2s infinite | ||
+ | } | ||
+ | |||
+ | #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 | ||
+ | } | ||
+ | |||
+ | #services-graphic .area-graphic .area-icon.right .top span | ||
+ | { | ||
+ | -webkit-animation: iconColor 16s ease 6s infinite; | ||
+ | animation: iconColor 16s ease 6s infinite | ||
+ | } | ||
+ | |||
+ | #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 | ||
+ | } | ||
+ | |||
+ | #services-graphic .area-graphic .area-icon.right .bottom span | ||
+ | { | ||
+ | -webkit-animation: iconColor 16s ease 10s infinite; | ||
+ | animation: iconColor 16s ease 10s infinite | ||
+ | } | ||
+ | |||
+ | #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 | ||
+ | } | ||
+ | |||
+ | #services-graphic .area-graphic .area-icon.left .bottom span | ||
+ | { | ||
+ | -webkit-animation: iconColor 16s ease 14s infinite; | ||
+ | animation: iconColor 16s ease 14s infinite | ||
+ | } | ||
+ | |||
+ | #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 | ||
+ | } | ||
+ | |||
+ | #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 | ||
+ | } | ||
+ | |||
+ | #full-portfolio-list--wrapper | ||
+ | { | ||
+ | opacity: 0; | ||
+ | -webkit-animation: fadeInRightWide 800ms ease-in-out 240ms forwards; | ||
+ | animation: fadeInRightWide 800ms ease-in-out 240ms forwards | ||
+ | } | ||
+ | |||
+ | #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 | ||
+ | } | ||
+ | |||
+ | #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 | ||
+ | } | ||
+ | |||
+ | #contact-form .form-group | ||
+ | { | ||
+ | opacity: 0; | ||
+ | transition: all 0.2s ease-in-out | ||
+ | } | ||
+ | |||
+ | #contact-form .form-group:first-child | ||
+ | { | ||
+ | -webkit-animation: fadeIn 240ms ease-in-out 1200ms forwards; | ||
+ | animation: fadeIn 240ms ease-in-out 1200ms forwards | ||
+ | } | ||
+ | |||
+ | #contact-form .form-group:nth-child(2) | ||
+ | { | ||
+ | -webkit-animation: fadeIn 240ms ease-in-out 1680ms forwards; | ||
+ | animation: fadeIn 240ms ease-in-out 1680ms forwards | ||
+ | } | ||
+ | |||
+ | #contact-form .form-group:nth-child(3) | ||
+ | { | ||
+ | -webkit-animation: fadeIn 240ms ease-in-out 1920ms forwards; | ||
+ | animation: fadeIn 240ms ease-in-out 1920ms forwards | ||
+ | } | ||
+ | |||
+ | #contact-form .form-group:nth-child(4) | ||
+ | { | ||
+ | -webkit-animation: fadeIn 240ms ease-in-out 2160ms forwards; | ||
+ | animation: fadeIn 240ms ease-in-out 2160ms forwards | ||
+ | } | ||
+ | |||
+ | #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 | ||
+ | } | ||
+ | |||
+ | #gallery | ||
+ | { | ||
+ | margin-top: 60px; | ||
+ | margin-bottom: 100px | ||
+ | } | ||
+ | |||
+ | #gallery #overflow | ||
+ | { | ||
+ | width: 690px | ||
+ | } | ||
+ | |||
+ | #portfolio-slider | ||
+ | { | ||
+ | height: calc(100vh - 1rem); | ||
+ | margin: 0; | ||
+ | position: relative | ||
+ | } | ||
+ | |||
+ | #portfolio-slider .overlay | ||
+ | { | ||
+ | position: absolute; | ||
+ | z-index: 50; | ||
+ | display: -webkit-box; | ||
+ | display: -ms-flexbox; | ||
+ | display: flex; | ||
+ | -webkit-box-orient: vertical; | ||
+ | -webkit-box-direction: normal; | ||
+ | -ms-flex-flow: column; | ||
+ | flex-flow: column; | ||
+ | -webkit-box-align: center; | ||
+ | -ms-flex-align: center; | ||
+ | align-items: center; | ||
+ | -webkit-box-pack: center; | ||
+ | -ms-flex-pack: center; | ||
+ | justify-content: center | ||
+ | } | ||
+ | |||
+ | @media (max-width: 1024px) | ||
+ | { | ||
+ | #portfolio-slider .overlay | ||
+ | { | ||
+ | display: none | ||
+ | } | ||
+ | } | ||
+ | |||
+ | #portfolio-slider .overlay .overlay-layers | ||
+ | { | ||
+ | width: 50vw; | ||
+ | height: 100vw | ||
+ | } | ||
+ | |||
+ | #portfolio-slider .overlay .overlay-layer | ||
+ | { | ||
+ | width: 100%; | ||
+ | height: 33.33vw | ||
+ | } | ||
+ | |||
+ | #portfolio-slider .overlay .overlay-layer.overlay-layer--top | ||
+ | { | ||
+ | background-image: linear-gradient(-180deg, #F2F2F2 78%, rgba(242,242,242,0.75) 100%) | ||
+ | } | ||
+ | |||
+ | #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 | ||
+ | } | ||
+ | } | ||
+ | |||
+ | #portfolio-slider.slides .overlay | ||
+ | { | ||
+ | display: none | ||
+ | } | ||
+ | |||
+ | #awwwards | ||
+ | { | ||
+ | position: absolute; | ||
+ | top: 64px; | ||
+ | width: 90px; | ||
+ | height: 135px; | ||
+ | text-indent: -666em; | ||
+ | overflow: hidden; | ||
+ | z-index: 999; | ||
+ | transition: all 1s ease | ||
+ | } | ||
+ | |||
+ | #awwwards.top | ||
+ | { | ||
+ | top: 20px | ||
+ | } | ||
+ | |||
+ | #awwwards.left | ||
+ | { | ||
+ | left: 0 | ||
+ | } | ||
+ | |||
+ | #awwwards.right | ||
+ | { | ||
+ | right: 0 | ||
+ | } | ||
+ | |||
+ | #awwwards a | ||
+ | { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | display: block; | ||
+ | width: 90px; | ||
+ | height: 135px; | ||
+ | background-repeat: no-repeat; | ||
+ | background-size: 90px 135px | ||
+ | } | ||
+ | |||
+ | #awwwards.nominee.green.left a | ||
+ | { | ||
+ | background-image: url(../images/awwwards_nominee_green_left.png) | ||
+ | } | ||
+ | |||
+ | #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% | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | |||
+ | #site-navigation | ||
+ | { | ||
+ | position: fixed; | ||
+ | top: 50%; | ||
+ | left: 2rem | ||
+ | } | ||
+ | |||
+ | @media (min-width: 1025px) | ||
+ | { | ||
+ | #site-navigation | ||
+ | { | ||
+ | -webkit-transform-origin: top left; | ||
+ | transform-origin: top left; | ||
+ | -webkit-transform: rotate(-90deg) translateX(-50%); | ||
+ | transform: rotate(-90deg) translateX(-50%); | ||
+ | z-index: 50 | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media (max-width: 1024px) | ||
+ | { | ||
+ | #site-navigation | ||
+ | { | ||
+ | top: 0px; | ||
+ | left: 0px; | ||
+ | width: 100vw; | ||
+ | height: 100vh; | ||
+ | background-color: #004a7c; | ||
+ | z-index: 50; | ||
+ | padding-top: 120px; | ||
+ | transition: all 0.25s ease-in-out; | ||
+ | display: none | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media (max-width: 1024px) | ||
+ | { | ||
+ | #site-navigation ul | ||
+ | { | ||
+ | list-style: none; | ||
+ | margin-left: 0; | ||
+ | margin-bottom: 30px; | ||
+ | width: 480px; | ||
+ | margin: 0 auto | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media (max-width: 600px) | ||
+ | { | ||
+ | #site-navigation ul | ||
+ | { | ||
+ | width: 135px; | ||
+ | margin: 0 auto | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media (min-width: 1025px) | ||
+ | { | ||
+ | #site-navigation ul li | ||
+ | { | ||
+ | display: inline-block | ||
+ | } | ||
+ | } | ||
+ | |||
+ | #site-navigation ul li a | ||
+ | { | ||
+ | font-family: "sofia-pro",sans-serif; | ||
+ | font-size: 10px; | ||
+ | font-weight: 600; | ||
+ | line-height: 1em; | ||
+ | letter-spacing: 0.1em; | ||
+ | text-transform: uppercase; | ||
+ | color: rgba(0,0,0,0.54); | ||
+ | padding: 0 8px | ||
+ | } | ||
+ | |||
+ | #site-navigation ul li a.small | ||
+ | { | ||
+ | font-size: 13px | ||
+ | } | ||
+ | |||
+ | @media (max-width: 1024px) | ||
+ | { | ||
+ | #site-navigation ul li a | ||
+ | { | ||
+ | color: #ffffff; | ||
+ | font-size: 32px; | ||
+ | line-height: 2 | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media (max-width: 480px) | ||
+ | { | ||
+ | #site-navigation ul li a | ||
+ | { | ||
+ | font-size: 22px | ||
+ | } | ||
+ | } | ||
+ | |||
+ | #site-navigation ul li a:hover,#site-navigation ul li a:focus | ||
+ | { | ||
+ | color: rgba(0,0,0,0.87) | ||
+ | } | ||
+ | |||
+ | @media (max-width: 1024px) | ||
+ | { | ||
+ | #site-navigation ul li a:hover,#site-navigation ul li a:focus | ||
+ | { | ||
+ | color: #39898D; | ||
+ | -webkit-animation: all 300ms ease-in-out; | ||
+ | animation: all 300ms ease-in-out | ||
+ | } | ||
+ | } | ||
+ | |||
+ | #site-navigation ul li.active a | ||
+ | { | ||
+ | color: #39898D; | ||
+ | position: relative | ||
+ | } | ||
+ | |||
+ | #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 | ||
+ | } | ||
+ | |||
+ | #site-header | ||
+ | { | ||
+ | position: fixed; | ||
+ | z-index: 50; | ||
+ | top: 2rem; | ||
+ | right: 2rem; | ||
+ | left: 2rem | ||
+ | } | ||
+ | |||
+ | #site-header #logo | ||
+ | { | ||
+ | margin-top: 6px | ||
+ | } | ||
+ | |||
+ | #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 | ||
+ | } | ||
+ | |||
+ | #site-header #back a .hint | ||
+ | { | ||
+ | font-size: 10px; | ||
+ | font-weight: 300; | ||
+ | letter-spacing: 6.4px | ||
+ | } | ||
+ | |||
+ | #site-header #back a .arrow,#site-header #back a .arrow:before,#site-header #back a .arrow:after | ||
+ | { | ||
+ | cursor: pointer; | ||
+ | height: 1px; | ||
+ | width: 18px; | ||
+ | display: block; | ||
+ | content: ''; | ||
+ | transition: all 0.25s ease-in-out; | ||
+ | margin-right: 8px; | ||
+ | background-color: rgba(0,0,0,0.87) | ||
+ | } | ||
+ | |||
+ | @media (max-width: 600px) | ||
+ | { | ||
+ | #site-header #back a .arrow,#site-header #back a .arrow:before,#site-header #back a .arrow:after | ||
+ | { | ||
+ | width: 21px; | ||
+ | height: 2px | ||
+ | } | ||
+ | } | ||
+ | |||
+ | #site-header #back a .arrow | ||
+ | { | ||
+ | background: transparent; | ||
+ | position: relative | ||
+ | } | ||
+ | |||
+ | #site-header #back a .arrow:before | ||
+ | { | ||
+ | -webkit-transform: rotate(45deg); | ||
+ | transform: rotate(45deg); | ||
+ | position: absolute | ||
+ | } | ||
+ | |||
+ | #site-header #back a .arrow:after | ||
+ | { | ||
+ | -webkit-transform: rotate(-45deg); | ||
+ | transform: rotate(-45deg); | ||
+ | position: absolute | ||
+ | } | ||
+ | |||
+ | #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 | ||
+ | } | ||
+ | } | ||
+ | |||
+ | #main-content | ||
+ | { | ||
+ | width: calc(100vw - 16px); | ||
+ | display: -webkit-box; | ||
+ | display: -ms-flexbox; | ||
+ | display: flex; | ||
+ | -webkit-box-align: center; | ||
+ | -ms-flex-align: center; | ||
+ | align-items: center; | ||
+ | -webkit-box-pack: center; | ||
+ | -ms-flex-pack: center; | ||
+ | justify-content: center; | ||
+ | -webkit-box-orient: horizontal; | ||
+ | -webkit-box-direction: normal; | ||
+ | -ms-flex-flow: row; | ||
+ | flex-flow: row | ||
+ | } | ||
+ | |||
+ | @media (max-width: 600px) | ||
+ | { | ||
+ | #main-content | ||
+ | { | ||
+ | overflow-x: hidden | ||
+ | } | ||
+ | } | ||
+ | |||
+ | #main-content article | ||
+ | { | ||
+ | display: -webkit-box; | ||
+ | display: -ms-flexbox; | ||
+ | display: flex | ||
+ | } | ||
+ | |||
+ | .layout--work #main-content | ||
+ | { | ||
+ | position: relative; | ||
+ | height: auto | ||
+ | } | ||
+ | |||
+ | @media (min-width: 601px) | ||
+ | { | ||
+ | .layout--page #main-content,.layout--default #main-content | ||
+ | { | ||
+ | height: calc(100vh - 16px) | ||
+ | } | ||
+ | } | ||
+ | |||
+ | #site-footer | ||
+ | { | ||
+ | z-index: 50; | ||
+ | font-family: "sofia-pro",sans-serif; | ||
+ | font-size: 12px; | ||
+ | color: rgba(0,0,0,0.38) | ||
+ | } | ||
+ | |||
+ | @media (min-width: 601px) | ||
+ | { | ||
+ | #site-footer | ||
+ | { | ||
+ | position: absolute; | ||
+ | top: auto; | ||
+ | right: 2rem; | ||
+ | bottom: 1rem; | ||
+ | left: 2rem | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media (max-width: 600px) | ||
+ | { | ||
+ | #site-footer | ||
+ | { | ||
+ | text-align: center; | ||
+ | display: -webkit-box; | ||
+ | display: -ms-flexbox; | ||
+ | display: flex; | ||
+ | -webkit-box-orient: vertical; | ||
+ | -webkit-box-direction: normal; | ||
+ | -ms-flex-flow: column; | ||
+ | flex-flow: column; | ||
+ | -webkit-box-align: center; | ||
+ | -ms-flex-align: center; | ||
+ | align-items: center | ||
+ | } | ||
+ | } | ||
+ | |||
+ | #site-footer #social-links a | ||
+ | { | ||
+ | color: rgba(0,0,0,0.38); | ||
+ | padding-right: 8px | ||
+ | } | ||
+ | |||
+ | #site-footer #social-links a:hover,#site-footer #social-links a:focus | ||
+ | { | ||
+ | color: rgba(0,0,0,0.54) | ||
+ | } | ||
+ | |||
+ | #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 | ||
+ | } | ||
+ | } | ||
+ | |||
+ | #process-canvas | ||
+ | { | ||
+ | max-width: 960px; | ||
+ | display: -webkit-box; | ||
+ | display: -ms-flexbox; | ||
+ | display: flex; | ||
+ | -ms-flex-wrap: wrap; | ||
+ | flex-wrap: wrap | ||
+ | } | ||
+ | |||
+ | @media (min-width: 841px) | ||
+ | { | ||
+ | #process-canvas | ||
+ | { | ||
+ | margin-left: auto; | ||
+ | margin-right: auto | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media (max-width: 840px) | ||
+ | { | ||
+ | #process-canvas | ||
+ | { | ||
+ | margin-left: 2rem; | ||
+ | margin-right: 2rem | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media (max-width: 480px) | ||
+ | { | ||
+ | #process-canvas | ||
+ | { | ||
+ | display: -webkit-box; | ||
+ | display: -ms-flexbox; | ||
+ | display: flex; | ||
+ | -webkit-box-orient: vertical; | ||
+ | -webkit-box-direction: normal; | ||
+ | -ms-flex-flow: column; | ||
+ | flex-flow: column; | ||
+ | -webkit-box-align: center; | ||
+ | -ms-flex-align: center; | ||
+ | align-items: center | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media (min-width: 841px) | ||
+ | { | ||
+ | #process-canvas .process-block | ||
+ | { | ||
+ | width: 33.3333%; | ||
+ | margin-top: 56px; | ||
+ | margin-bottom: 56px | ||
+ | } | ||
+ | } | ||
+ | |||
+ | #process-canvas .process-block .process-step | ||
+ | { | ||
+ | height: 50px | ||
+ | } | ||
+ | |||
+ | #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 | ||
+ | } | ||
+ | |||
+ | #process-canvas .process-block .process-step .process-step-icon span | ||
+ | { | ||
+ | color: #004a7c; | ||
+ | font-size: 1.8em; | ||
+ | line-height: 50px | ||
+ | } | ||
+ | |||
+ | #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 | ||
+ | } | ||
+ | |||
+ | #process-canvas .process-block .process-step .process-step-title | ||
+ | { | ||
+ | color: #004a7c; | ||
+ | height: 50px; | ||
+ | line-height: 50px | ||
+ | } | ||
+ | |||
+ | #process-canvas .process-block .process-step-list | ||
+ | { | ||
+ | padding-left: 61px | ||
+ | } | ||
+ | |||
+ | #process-canvas .process-block .dev-icon-list | ||
+ | { | ||
+ | padding-left: 61px; | ||
+ | margin-top: 15px; | ||
+ | position: relative | ||
+ | } | ||
+ | |||
+ | #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 | ||
+ | } | ||
+ | |||
+ | #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 | ||
+ | } | ||
+ | |||
+ | #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 | ||
+ | } | ||
+ | |||
+ | #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 | ||
+ | } | ||
+ | |||
+ | #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% | ||
+ | } | ||
+ | } | ||
+ | |||
+ | #full-portfolio-list--wrapper | ||
+ | { | ||
+ | width: 100%; | ||
+ | overflow: hidden; | ||
+ | margin-left: 200px | ||
+ | } | ||
+ | |||
+ | @media (max-width: 1024px) | ||
+ | { | ||
+ | #full-portfolio-list--wrapper | ||
+ | { | ||
+ | margin-left: 0 | ||
+ | } | ||
+ | } | ||
+ | |||
+ | #full-portfolio-list--wrapper #full-portfolio-list | ||
+ | { | ||
+ | width: 8064px | ||
+ | } | ||
+ | |||
+ | @media (min-width: 481px) | ||
+ | { | ||
+ | #full-portfolio-list--wrapper #full-portfolio-list .portfolio-item | ||
+ | { | ||
+ | width: 336px; | ||
+ | border-right: 1px solid rgba(0,0,0,0.12); | ||
+ | padding-left: 48px; | ||
+ | padding-right: 48px | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media (max-width: 480px) | ||
+ | { | ||
+ | #full-portfolio-list--wrapper #full-portfolio-list .portfolio-item | ||
+ | { | ||
+ | padding-left: 16px; | ||
+ | padding-right: 16px | ||
+ | } | ||
+ | } | ||
+ | |||
+ | #full-portfolio-list--wrapper .scroll-bar | ||
+ | { | ||
+ | margin-left: auto; | ||
+ | margin-right: auto | ||
+ | } | ||
+ | |||
+ | .portfolio | ||
+ | { | ||
+ | width: 100vw; | ||
+ | -webkit-box-orient: vertical; | ||
+ | -webkit-box-direction: normal; | ||
+ | -ms-flex-flow: column; | ||
+ | flex-flow: column; | ||
+ | overflow: visible | ||
+ | } | ||
+ | |||
+ | .portfolio h1,.portfolio h2,.portfolio h3,.portfolio h4,.portfolio h5,.portfolio h6 | ||
+ | { | ||
+ | text-transform: capitalize; | ||
+ | margin-bottom: 1rem | ||
+ | } | ||
+ | |||
+ | .portfolio section | ||
+ | { | ||
+ | padding-top: 120px; | ||
+ | padding-bottom: 120px | ||
+ | } | ||
+ | |||
+ | .portfolio section.small | ||
+ | { | ||
+ | padding-top: 64px; | ||
+ | padding-bottom: 64px | ||
+ | } | ||
+ | |||
+ | .portfolio section.sub-section | ||
+ | { | ||
+ | padding-top: 64px; | ||
+ | padding-bottom: 64px | ||
+ | } | ||
+ | |||
+ | @media (max-width: 480px) | ||
+ | { | ||
+ | .portfolio section.sub-section | ||
+ | { | ||
+ | padding-top: 16px; | ||
+ | padding-bottom: 16px | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media (max-width: 840px) | ||
+ | { | ||
+ | .portfolio section | ||
+ | { | ||
+ | padding-top: 32px; | ||
+ | padding-bottom: 32px | ||
+ | } | ||
+ | } | ||
+ | |||
+ | .portfolio .portfolio-header | ||
+ | { | ||
+ | padding-top: 185px | ||
+ | } | ||
+ | |||
+ | .portfolio .portfolio-header--classic | ||
+ | { | ||
+ | text-align: right | ||
+ | } | ||
+ | |||
+ | .portfolio .portfolio-header--classic .article-title,.portfolio .portfolio-header--classic .article-brief | ||
+ | { | ||
+ | line-height: 1; | ||
+ | margin: 0 | ||
+ | } | ||
+ | |||
+ | .portfolio .portfolio-header--classic .article-brief | ||
+ | { | ||
+ | font-weight: 300; | ||
+ | color: rgba(0,0,0,0.38); | ||
+ | margin-bottom: 0 | ||
+ | } | ||
+ | |||
+ | .portfolio .portfolio-header--classic .portfolio-label | ||
+ | { | ||
+ | font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Helvetica Neue",Helvetica,Arial,sans-serif; | ||
+ | font-size: 12px; | ||
+ | font-weight: 400; | ||
+ | line-height: 1; | ||
+ | letter-spacing: 0 | ||
+ | } | ||
+ | |||
+ | .portfolio .portfolio-header--classic .article-meta | ||
+ | { | ||
+ | color: rgba(0,0,0,0.54) | ||
+ | } | ||
+ | |||
+ | .portfolio h3.portfolio-title,.portfolio h3.portfolio-brief | ||
+ | { | ||
+ | letter-spacing: 0.2em; | ||
+ | font-weight: 300 | ||
+ | } | ||
+ | |||
+ | .portfolio h1.portfolio-brief | ||
+ | { | ||
+ | letter-spacing: 0.05em; | ||
+ | line-height: 70px | ||
+ | } | ||
+ | |||
+ | .portfolio img:not(:last-of-type) | ||
+ | { | ||
+ | margin-bottom: 64px | ||
+ | } | ||
+ | |||
+ | .portfolio .tools img | ||
+ | { | ||
+ | margin-bottom: 0; | ||
+ | margin-left: 8px; | ||
+ | margin-right: 8px | ||
+ | } | ||
+ | |||
+ | .portfolio .data * | ||
+ | { | ||
+ | line-height: 1em; | ||
+ | margin: 0 | ||
+ | } | ||
+ | |||
+ | .portfolio .portfolio-navigation | ||
+ | { | ||
+ | display: -webkit-box; | ||
+ | display: -ms-flexbox; | ||
+ | display: flex; | ||
+ | -webkit-box-orient: horizontal; | ||
+ | -webkit-box-direction: normal; | ||
+ | -ms-flex-flow: row; | ||
+ | flex-flow: row; | ||
+ | -webkit-box-align: center; | ||
+ | -ms-flex-align: center; | ||
+ | align-items: center; | ||
+ | -webkit-box-pack: justify; | ||
+ | -ms-flex-pack: justify; | ||
+ | justify-content: space-between; | ||
+ | margin-top: 64px; | ||
+ | margin-bottom: 64px | ||
+ | } | ||
+ | |||
+ | .portfolio .portfolio-navigation a | ||
+ | { | ||
+ | display: -webkit-box; | ||
+ | display: -ms-flexbox; | ||
+ | display: flex; | ||
+ | -webkit-box-orient: horizontal; | ||
+ | -webkit-box-direction: normal; | ||
+ | -ms-flex-flow: row; | ||
+ | flex-flow: row; | ||
+ | -webkit-box-align: center; | ||
+ | -ms-flex-align: center; | ||
+ | align-items: center; | ||
+ | font-family: "sofia-pro",sans-serif; | ||
+ | font-size: 32px; | ||
+ | font-weight: 600; | ||
+ | line-height: 1em; | ||
+ | letter-spacing: 2px | ||
+ | } | ||
+ | |||
+ | .portfolio .portfolio-navigation a .hint | ||
+ | { | ||
+ | font-size: 10px; | ||
+ | font-weight: 300; | ||
+ | letter-spacing: 6.4px; | ||
+ | text-transform: uppercase; | ||
+ | display: block; | ||
+ | height: 1rem | ||
+ | } | ||
+ | |||
+ | .portfolio .portfolio-navigation a .potfolio-title | ||
+ | { | ||
+ | margin: 0 | ||
+ | } | ||
+ | |||
+ | .portfolio .portfolio-navigation .arrow | ||
+ | { | ||
+ | display: inline-block; | ||
+ | width: 60px; | ||
+ | height: 1px; | ||
+ | position: relative; | ||
+ | vertical-align: middle; | ||
+ | background-color: rgba(0,0,0,0.87) | ||
+ | } | ||
+ | |||
+ | .portfolio .portfolio-navigation .arrow:after,.portfolio .portfolio-navigation .arrow:before | ||
+ | { | ||
+ | content: ""; | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | width: 8px; | ||
+ | height: 1px; | ||
+ | background-color: rgba(0,0,0,0.87) | ||
+ | } | ||
+ | |||
+ | .portfolio .portfolio-navigation .arrow.left | ||
+ | { | ||
+ | margin-right: 8px | ||
+ | } | ||
+ | |||
+ | .portfolio .portfolio-navigation .arrow.left:after,.portfolio .portfolio-navigation .arrow.left:before | ||
+ | { | ||
+ | left: 0; | ||
+ | -webkit-transform-origin: top left; | ||
+ | transform-origin: top left | ||
+ | } | ||
+ | |||
+ | .portfolio .portfolio-navigation .arrow.right | ||
+ | { | ||
+ | margin-left: 8px | ||
+ | } | ||
+ | |||
+ | .portfolio .portfolio-navigation .arrow.right:after,.portfolio .portfolio-navigation .arrow.right:before | ||
+ | { | ||
+ | right: 0; | ||
+ | -webkit-transform-origin: top right; | ||
+ | transform-origin: top right | ||
+ | } | ||
+ | |||
+ | .portfolio .portfolio-navigation .arrow:before | ||
+ | { | ||
+ | -webkit-transform: rotate(40deg); | ||
+ | transform: rotate(40deg) | ||
+ | } | ||
+ | |||
+ | .portfolio .portfolio-navigation .arrow:after | ||
+ | { | ||
+ | -webkit-transform: rotate(-40deg); | ||
+ | transform: rotate(-40deg) | ||
+ | } | ||
+ | |||
+ | .portfolio .portfolio-navigation .prev:hover .arrow,.portfolio .portfolio-navigation .prev:hover .arrow:after,.portfolio .portfolio-navigation .prev:hover .arrow:before,.portfolio .portfolio-navigation .prev:focus .arrow,.portfolio .portfolio-navigation .prev:focus .arrow:after,.portfolio .portfolio-navigation .prev:focus .arrow:before,.portfolio .portfolio-navigation .next:hover .arrow,.portfolio .portfolio-navigation .next:hover .arrow:after,.portfolio .portfolio-navigation .next:hover .arrow:before,.portfolio .portfolio-navigation .next:focus .arrow,.portfolio .portfolio-navigation .next:focus .arrow:after,.portfolio .portfolio-navigation .next:focus .arrow:before | ||
+ | { | ||
+ | background: #004a7c | ||
+ | } | ||
+ | |||
+ | .portfolio .portfolio-navigation .prev:hover .arrow.left,.portfolio .portfolio-navigation .prev:focus .arrow.left,.portfolio .portfolio-navigation .next:hover .arrow.left,.portfolio .portfolio-navigation .next:focus .arrow.left | ||
+ | { | ||
+ | transition-delay: 0.1s; | ||
+ | width: 16px; | ||
+ | transition: all 0.3s ease-in-out; | ||
+ | background: #004a7c | ||
+ | } | ||
+ | |||
+ | .portfolio .portfolio-navigation .next | ||
+ | { | ||
+ | text-align: right | ||
+ | } | ||
+ | |||
+ | .portfolio .portfolio-navigation .next:hover .arrow.right,.portfolio .portfolio-navigation .next:focus .arrow.right | ||
+ | { | ||
+ | transition-delay: 0.1s; | ||
+ | width: 16px; | ||
+ | transition: all 0.3s ease-in-out | ||
+ | } | ||
+ | |||
+ | @media (max-width: 480px) | ||
+ | { | ||
+ | .portfolio #pricing .row | ||
+ | { | ||
+ | -webkit-box-orient: vertical; | ||
+ | -webkit-box-direction: normal; | ||
+ | -ms-flex-flow: column; | ||
+ | flex-flow: column | ||
+ | } | ||
+ | |||
+ | .portfolio #pricing .row [class^="col-"] | ||
+ | { | ||
+ | width: 100%; | ||
+ | margin-bottom: 1rem | ||
+ | } | ||
+ | } | ||
+ | |||
+ | .portfolio-nav-panel | ||
+ | { | ||
+ | display: none; | ||
+ | position: fixed; | ||
+ | right: 24px; | ||
+ | top: 50%; | ||
+ | -webkit-transform: translateY(-50%); | ||
+ | transform: translateY(-50%); | ||
+ | background: rgba(203,51,102,0.87); | ||
+ | color: white; | ||
+ | padding: 1rem 12px 4px 12px; | ||
+ | display: -webkit-box; | ||
+ | display: -ms-flexbox; | ||
+ | display: flex; | ||
+ | -webkit-box-orient: horizontal; | ||
+ | -webkit-box-direction: normal; | ||
+ | -ms-flex-flow: row; | ||
+ | flex-flow: row; | ||
+ | -webkit-box-align: center; | ||
+ | -ms-flex-align: center; | ||
+ | align-items: center; | ||
+ | z-index: 50; | ||
+ | box-shadow: 0 1px 2px 0 rgba(0,0,0,0.5) | ||
+ | } | ||
+ | |||
+ | @media (max-width: 600px) | ||
+ | { | ||
+ | .portfolio-nav-panel | ||
+ | { | ||
+ | right: 8px | ||
+ | } | ||
+ | } | ||
+ | |||
+ | #portfolio-nav-toggle | ||
+ | { | ||
+ | display: -webkit-box; | ||
+ | display: -ms-flexbox; | ||
+ | display: flex; | ||
+ | -webkit-box-orient: vertical; | ||
+ | -webkit-box-direction: normal; | ||
+ | -ms-flex-flow: column; | ||
+ | flex-flow: column; | ||
+ | -webkit-box-align: center; | ||
+ | -ms-flex-align: center; | ||
+ | align-items: center; | ||
+ | cursor: pointer | ||
+ | } | ||
+ | |||
+ | #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 | ||
+ | } | ||
+ | |||
+ | #portfolio-nav-toggle .hint.small | ||
+ | { | ||
+ | font-size: 13px | ||
+ | } | ||
+ | |||
+ | #portfolio-nav-toggle #menu-icon | ||
+ | { | ||
+ | height: 8px | ||
+ | } | ||
+ | |||
+ | #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 | ||
+ | } | ||
+ | |||
+ | #portfolio-nav-toggle #menu-icon span | ||
+ | { | ||
+ | position: relative | ||
+ | } | ||
+ | |||
+ | #portfolio-nav-toggle #menu-icon span:before | ||
+ | { | ||
+ | top: -7px; | ||
+ | position: absolute | ||
+ | } | ||
+ | |||
+ | #portfolio-nav-toggle #menu-icon span:after | ||
+ | { | ||
+ | bottom: -7px; | ||
+ | position: absolute | ||
+ | } | ||
+ | |||
+ | #portfolio-nav-toggle #menu-icon span.active | ||
+ | { | ||
+ | background: transparent | ||
+ | } | ||
+ | |||
+ | #portfolio-nav-toggle #menu-icon span.active:before | ||
+ | { | ||
+ | -webkit-transform: rotate(45deg); | ||
+ | transform: rotate(45deg); | ||
+ | background-color: #ffffff; | ||
+ | top: 0 | ||
+ | } | ||
+ | |||
+ | #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 | ||
+ | } | ||
+ | } | ||
</style> | </style> |
Revision as of 08:13, 15 August 2017
<!DOCTYPE html>