diff --git a/css/animate.css b/css/animate.css new file mode 100755 index 0000000..b1badc8 --- /dev/null +++ b/css/animate.css @@ -0,0 +1,3272 @@ +@charset "UTF-8"; + +/*! +Animate.css - http://daneden.me/animate +Licensed under the MIT license - http://opensource.org/licenses/MIT + +Copyright (c) 2015 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; +} + +.animated.bounceIn, +.animated.bounceOut { + -webkit-animation-duration: .75s; + animation-duration: .75s; +} + +.animated.flipOutX, +.animated.flipOutY { + -webkit-animation-duration: .75s; + animation-duration: .75s; +} + +@-webkit-keyframes bounce { + 0%, 20%, 53%, 80%, 100% { + -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + -webkit-transform: translate3d(0,0,0); + transform: translate3d(0,0,0); + } + + 40%, 43% { + -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); + animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); + -webkit-transform: translate3d(0, -30px, 0); + transform: translate3d(0, -30px, 0); + } + + 70% { + -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); + animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); + -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% { + -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + -webkit-transform: translate3d(0,0,0); + transform: translate3d(0,0,0); + } + + 40%, 43% { + -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); + animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); + -webkit-transform: translate3d(0, -30px, 0); + transform: translate3d(0, -30px, 0); + } + + 70% { + -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); + animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); + -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; +} + +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ + +@-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(.95, 1.05, 1); + transform: scale3d(.95, 1.05, 1); + } + + 75% { + -webkit-transform: scale3d(1.05, .95, 1); + transform: scale3d(1.05, .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(.95, 1.05, 1); + transform: scale3d(.95, 1.05, 1); + } + + 75% { + -webkit-transform: scale3d(1.05, .95, 1); + transform: scale3d(1.05, .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(.9, .9, .9) rotate3d(0, 0, 1, -3deg); + transform: scale3d(.9, .9, .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(.9, .9, .9) rotate3d(0, 0, 1, -3deg); + transform: scale3d(.9, .9, .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; +} + +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ + +@-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 jello { + 11.1% { + -webkit-transform: none; + transform: none + } + + 22.2% { + -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); + transform: skewX(-12.5deg) skewY(-12.5deg) + } + 33.3% { + -webkit-transform: skewX(6.25deg) skewY(6.25deg); + transform: skewX(6.25deg) skewY(6.25deg) + } + 44.4% { + -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); + transform: skewX(-3.125deg) skewY(-3.125deg) + } + 55.5% { + -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); + transform: skewX(1.5625deg) skewY(1.5625deg) + } + 66.6% { + -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); + transform: skewX(-0.78125deg) skewY(-0.78125deg) + } + 77.7% { + -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); + transform: skewX(0.390625deg) skewY(0.390625deg) + } + 88.8% { + -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); + transform: skewX(-0.1953125deg) skewY(-0.1953125deg) + } + 100% { + -webkit-transform: none; + transform: none + } +} + +@keyframes jello { + 11.1% { + -webkit-transform: none; + transform: none + } + + 22.2% { + + -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); + transform: skewX(-12.5deg) skewY(-12.5deg) + } + 33.3% { + -webkit-transform: skewX(6.25deg) skewY(6.25deg); + transform: skewX(6.25deg) skewY(6.25deg) + } + 44.4% { + -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); + transform: skewX(-3.125deg) skewY(-3.125deg) + } + 55.5% { + -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); + transform: skewX(1.5625deg) skewY(1.5625deg) + } + 66.6% { + -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); + transform: skewX(-0.78125deg) skewY(-0.78125deg) + } + 77.7% { + -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); + transform: skewX(0.390625deg) skewY(0.390625deg) + } + 88.8% { + -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); + transform: skewX(-0.1953125deg) skewY(-0.1953125deg) + } + 100% { + -webkit-transform: none; + transform: none + } +} + + + +.jello{ + -webkit-animation-name:jello; + animation-name:jello; + -webkit-transform-origin: center; + + transform-origin: center +} + +@-webkit-keyframes bounceIn { + 0%, 20%, 40%, 60%, 80%, 100% { + -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + + 0% { + opacity: 0; + -webkit-transform: scale3d(.3, .3, .3); + transform: scale3d(.3, .3, .3); + } + + 20% { + -webkit-transform: scale3d(1.1, 1.1, 1.1); + transform: scale3d(1.1, 1.1, 1.1); + } + + 40% { + -webkit-transform: scale3d(.9, .9, .9); + transform: scale3d(.9, .9, .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(.97, .97, .97); + transform: scale3d(.97, .97, .97); + } + + 100% { + opacity: 1; + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} + +@keyframes bounceIn { + 0%, 20%, 40%, 60%, 80%, 100% { + -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + + 0% { + opacity: 0; + -webkit-transform: scale3d(.3, .3, .3); + transform: scale3d(.3, .3, .3); + } + + 20% { + -webkit-transform: scale3d(1.1, 1.1, 1.1); + transform: scale3d(1.1, 1.1, 1.1); + } + + 40% { + -webkit-transform: scale3d(.9, .9, .9); + transform: scale3d(.9, .9, .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(.97, .97, .97); + transform: scale3d(.97, .97, .97); + } + + 100% { + opacity: 1; + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} + +.bounceIn { + -webkit-animation-name: bounceIn; + animation-name: bounceIn; +} + +@-webkit-keyframes bounceInDown { + 0%, 60%, 75%, 90%, 100% { + -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + + 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% { + -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + + 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% { + -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + + 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% { + -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + + 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% { + -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + + 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% { + -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + + 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% { + -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + + 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% { + -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + + 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(.9, .9, .9); + transform: scale3d(.9, .9, .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(.3, .3, .3); + transform: scale3d(.3, .3, .3); + } +} + +@keyframes bounceOut { + 20% { + -webkit-transform: scale3d(.9, .9, .9); + transform: scale3d(.9, .9, .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(.3, .3, .3); + transform: scale3d(.3, .3, .3); + } +} + +.bounceOut { + -webkit-animation-name: bounceOut; + animation-name: bounceOut; +} + +@-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(.95, .95, .95); + transform: perspective(400px) scale3d(.95, .95, .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(.95, .95, .95); + transform: perspective(400px) scale3d(.95, .95, .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); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + opacity: 0; + } + + 40% { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + -webkit-animation-timing-function: ease-in; + animation-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); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + opacity: 0; + } + + 40% { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + -webkit-animation-timing-function: ease-in; + animation-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); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + opacity: 0; + } + + 40% { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); + transform: perspective(400px) rotate3d(0, 1, 0, -20deg); + -webkit-animation-timing-function: ease-in; + animation-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); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + opacity: 0; + } + + 40% { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); + transform: perspective(400px) rotate3d(0, 1, 0, -20deg); + -webkit-animation-timing-function: ease-in; + animation-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-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-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; +} + +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ + +@-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; +} + +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ + +@-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(.3, .3, .3); + transform: scale3d(.3, .3, .3); + } + + 50% { + opacity: 1; + } +} + +@keyframes zoomIn { + 0% { + opacity: 0; + -webkit-transform: scale3d(.3, .3, .3); + transform: scale3d(.3, .3, .3); + } + + 50% { + opacity: 1; + } +} + +.zoomIn { + -webkit-animation-name: zoomIn; + animation-name: zoomIn; +} + +@-webkit-keyframes zoomInDown { + 0% { + opacity: 0; + -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); + transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); + -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + } + + 60% { + opacity: 1; + -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); + transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + } +} + +@keyframes zoomInDown { + 0% { + opacity: 0; + -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); + transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); + -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + } + + 60% { + opacity: 1; + -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); + transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + } +} + +.zoomInDown { + -webkit-animation-name: zoomInDown; + animation-name: zoomInDown; +} + +@-webkit-keyframes zoomInLeft { + 0% { + opacity: 0; + -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); + transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + } + + 60% { + opacity: 1; + -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); + transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + } +} + +@keyframes zoomInLeft { + 0% { + opacity: 0; + -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); + transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + } + + 60% { + opacity: 1; + -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); + transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + } +} + +.zoomInLeft { + -webkit-animation-name: zoomInLeft; + animation-name: zoomInLeft; +} + +@-webkit-keyframes zoomInRight { + 0% { + opacity: 0; + -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); + transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + } + + 60% { + opacity: 1; + -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); + transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + } +} + +@keyframes zoomInRight { + 0% { + opacity: 0; + -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); + transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + } + + 60% { + opacity: 1; + -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); + transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + } +} + +.zoomInRight { + -webkit-animation-name: zoomInRight; + animation-name: zoomInRight; +} + +@-webkit-keyframes zoomInUp { + 0% { + opacity: 0; + -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); + transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); + -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + } + + 60% { + opacity: 1; + -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); + transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + } +} + +@keyframes zoomInUp { + 0% { + opacity: 0; + -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); + transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); + -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + } + + 60% { + opacity: 1; + -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); + transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + } +} + +.zoomInUp { + -webkit-animation-name: zoomInUp; + animation-name: zoomInUp; +} + +@-webkit-keyframes zoomOut { + 0% { + opacity: 1; + } + + 50% { + opacity: 0; + -webkit-transform: scale3d(.3, .3, .3); + transform: scale3d(.3, .3, .3); + } + + 100% { + opacity: 0; + } +} + +@keyframes zoomOut { + 0% { + opacity: 1; + } + + 50% { + opacity: 0; + -webkit-transform: scale3d(.3, .3, .3); + transform: scale3d(.3, .3, .3); + } + + 100% { + opacity: 0; + } +} + +.zoomOut { + -webkit-animation-name: zoomOut; + animation-name: zoomOut; +} + +@-webkit-keyframes zoomOutDown { + 40% { + opacity: 1; + -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); + transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + } + + 100% { + opacity: 0; + -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); + transform: scale3d(.1, .1, .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.320, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + } +} + +@keyframes zoomOutDown { + 40% { + opacity: 1; + -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); + transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + } + + 100% { + opacity: 0; + -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); + transform: scale3d(.1, .1, .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.320, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + } +} + +.zoomOutDown { + -webkit-animation-name: zoomOutDown; + animation-name: zoomOutDown; +} + +@-webkit-keyframes zoomOutLeft { + 40% { + opacity: 1; + -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); + transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); + } + + 100% { + opacity: 0; + -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); + transform: scale(.1) translate3d(-2000px, 0, 0); + -webkit-transform-origin: left center; + transform-origin: left center; + } +} + +@keyframes zoomOutLeft { + 40% { + opacity: 1; + -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); + transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); + } + + 100% { + opacity: 0; + -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); + transform: scale(.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(.475, .475, .475) translate3d(-42px, 0, 0); + transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); + } + + 100% { + opacity: 0; + -webkit-transform: scale(.1) translate3d(2000px, 0, 0); + transform: scale(.1) translate3d(2000px, 0, 0); + -webkit-transform-origin: right center; + transform-origin: right center; + } +} + +@keyframes zoomOutRight { + 40% { + opacity: 1; + -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); + transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); + } + + 100% { + opacity: 0; + -webkit-transform: scale(.1) translate3d(2000px, 0, 0); + transform: scale(.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(.475, .475, .475) translate3d(0, 60px, 0); + transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + } + + 100% { + opacity: 0; + -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); + transform: scale3d(.1, .1, .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.320, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + } +} + +@keyframes zoomOutUp { + 40% { + opacity: 1; + -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); + transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + } + + 100% { + opacity: 0; + -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); + transform: scale3d(.1, .1, .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.320, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + } +} + +.zoomOutUp { + -webkit-animation-name: zoomOutUp; + animation-name: zoomOutUp; +} + +@-webkit-keyframes slideInDown { + 0% { + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + visibility: visible; + } + + 100% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +@keyframes slideInDown { + 0% { + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + visibility: visible; + } + + 100% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +.slideInDown { + -webkit-animation-name: slideInDown; + animation-name: slideInDown; +} + +@-webkit-keyframes slideInLeft { + 0% { + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + visibility: visible; + } + + 100% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +@keyframes slideInLeft { + 0% { + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + visibility: visible; + } + + 100% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +.slideInLeft { + -webkit-animation-name: slideInLeft; + animation-name: slideInLeft; +} + +@-webkit-keyframes slideInRight { + 0% { + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + visibility: visible; + } + + 100% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +@keyframes slideInRight { + 0% { + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + visibility: visible; + } + + 100% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +.slideInRight { + -webkit-animation-name: slideInRight; + animation-name: slideInRight; +} + +@-webkit-keyframes slideInUp { + 0% { + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + visibility: visible; + } + + 100% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +@keyframes slideInUp { + 0% { + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + visibility: visible; + } + + 100% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +.slideInUp { + -webkit-animation-name: slideInUp; + animation-name: slideInUp; +} + +@-webkit-keyframes slideOutDown { + 0% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + 100% { + visibility: hidden; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + } +} + +@keyframes slideOutDown { + 0% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + 100% { + visibility: hidden; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + } +} + +.slideOutDown { + -webkit-animation-name: slideOutDown; + animation-name: slideOutDown; +} + +@-webkit-keyframes slideOutLeft { + 0% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + 100% { + visibility: hidden; + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + } +} + +@keyframes slideOutLeft { + 0% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + 100% { + visibility: hidden; + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + } +} + +.slideOutLeft { + -webkit-animation-name: slideOutLeft; + animation-name: slideOutLeft; +} + +@-webkit-keyframes slideOutRight { + 0% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + 100% { + visibility: hidden; + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + } +} + +@keyframes slideOutRight { + 0% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + 100% { + visibility: hidden; + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + } +} + +.slideOutRight { + -webkit-animation-name: slideOutRight; + animation-name: slideOutRight; +} + +@-webkit-keyframes slideOutUp { + 0% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + 100% { + visibility: hidden; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + } +} + +@keyframes slideOutUp { + 0% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + 100% { + visibility: hidden; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + } +} + +.slideOutUp { + -webkit-animation-name: slideOutUp; + animation-name: slideOutUp; +} diff --git a/css/layout-rtl.css b/css/layout-rtl.css new file mode 100755 index 0000000..38c5724 --- /dev/null +++ b/css/layout-rtl.css @@ -0,0 +1,1145 @@ +/*---------------------------------------------------------------------- + + MASTER STYLESHEET + + Project: Metronic "Acidus" Frontend Freebie - Responsive HTML Template Based On Twitter Bootstrap 3.3.4 + Version: 1.0 + Author: KeenThemes + Primary use: Corporate, Business Themes. + Email: support@keenthemes.com + Follow: http://www.twitter.com/keenthemes + Like: http://www.facebook.com/keenthemes + Website: http://www.keenthemes.com + Premium: Premium Metronic Admin Theme: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes + +-----------------------------------------------------------------------*/ +/* eg: @include user-select(none); */ +/* eg: @include rotate(45deg); */ +/* eg: @include translate3d(0,0,0); */ +/* eg: @include border-radius(3px); */ +/*------------------------------------------------------------------ + [The "base.scss" contains basic default element styles + (colors, typography, margins & padding).] +------------------------------------------------------------------*/ +html { + overflow-x: hidden; +} + +html, html a, body { + -webkit-font-smoothing: antialiased; +} + +body { + font-family: Hind, sans-serif; +} + +p { + font-size: 15px; + font-weight: 400; + font-family: Hind, sans-serif; + color: #a6a7aa; + line-height: 1.4; + margin-bottom: 15px; +} + +em, +li, +li a { + font-size: 16px; + font-weight: 500; + font-family: Hind, sans-serif; + color: #515769; +} + +a { + font-family: Hind, sans-serif; + color: #81848f; + outline: 0; +} + +a:focus, a:hover, a:active { + outline: 0; + color: #999caa; + text-decoration: none; +} + +.link { + position: relative; + font-size: 13px; + font-weight: 600; + font-family: Hind, sans-serif; + text-transform: uppercase; +} + +.link:after { + position: absolute; + top: 8px; + left: -15px; + width: 9px; + height: 2px; + background: #17bed2; + content: " "; +} + +span { + font-size: 14px; + font-weight: 400; + font-family: Hind, sans-serif; + color: #bfc1c7; +} + +h1, h2, h3, h4, h5, h6 { + font-weight: 700; + font-family: Hind, sans-serif; + color: #515769; + line-height: 1.4; + margin: 0 0 15px; +} + +h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a { + color: #515769; +} + +h1 > a:hover, h2 > a:hover, h3 > a:hover, h4 > a:hover, h5 > a:hover, h6 > a:hover { + color: #999caa; + text-decoration: none; +} + +h1 > a:focus, h2 > a:focus, h3 > a:focus, h4 > a:focus, h5 > a:focus, h6 > a:focus { + text-decoration: none; +} + +h1 { + font-size: 40px; +} + +h2 { + font-size: 30px; +} + +h3 { + font-size: 22px; +} + +h4 { + font-size: 22px; +} + +::selection { + color: #fff; + background: #17bed2; + text-shadow: none; +} + +::-webkit-selection { + color: #fff; + background: #17bed2; + text-shadow: none; +} + +::-moz-selection { + color: #fff; + background: #17bed2; + text-shadow: none; +} + +:active, +:focus { + outline: none; +} + +/* Section Seperator */ +.section-seperator { + border-bottom: 1px solid #edf0f2; +} + +/* Content Wrapper Link */ +.content-wrapper-link { + position: absolute; + top: 0; + right: 0; + left: 0; + bottom: 0; + display: block; + z-index: 3; + text-decoration: none; +} + +/*------------------------------------------------------------------ + [Blockquote] +------------------------------------------------------------------*/ +.blockquote { + position: relative; + font-size: 17px; + font-weight: 400; + font-family: Hind, sans-serif; + color: #a6a7aa; + line-height: 1.4; + border-right: none; + margin-right: 20px; +} + +.blockquote:before { + position: absolute; + top: 0; + right: -20px; + font-size: 60px; + color: #17bed2; + content: open-quote; +} + +/*------------------------------------------------------------------ + [Button] +------------------------------------------------------------------*/ +.btn-theme { + position: relative; + display: inline-block; + line-height: 1.4; + text-align: center; + background-image: none; + border-style: solid; + white-space: nowrap; + vertical-align: middle; + -ms-touch-action: manipulation; + touch-action: manipulation; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.btn-theme:focus, .btn-theme:active:focus, .btn-theme.active:focus, .btn-theme.focus, .btn-theme:active.focus, .btn-theme.active.focus { + outline: none; +} + +.btn-theme:hover { + transition-duration: 300ms; + transition-property: all; + transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); +} + +.btn-theme:hover, .btn-theme:focus, .btn-theme.focus { + text-decoration: none; +} + +.btn-theme:active, .btn-theme.active { + background-image: none; + outline: 0; +} + +.btn-theme.disabled, .btn-theme[disabled], +fieldset[disabled] .btn-theme { + cursor: not-allowed; + box-shadow: none; + opacity: .65; + pointer-events: none; +} + +.btn-base-bg { + color: #fff; + background: #17bed2; + border-color: transparent; + border-width: 0; +} + +.btn-base-bg:hover, .btn-base-bg:focus, .btn-base-bg.focus { + color: #fff; + background: #63cbd7; + border-color: transparent; +} + +.btn-theme-sm { + font-size: 13px; + font-weight: 600; + padding: 15px 40px; +} + +/*------------------------------------------------------------------ + [Work] +------------------------------------------------------------------*/ +.work .work-overlay { + position: relative; +} + +.work .work-overlay:before { + position: absolute; + top: 0; + right: 0; + width: 100%; + height: 100%; + background: transparent; + content: " "; + transition-duration: 300ms; + transition-property: all; + transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); +} + +.work .work-content { + position: absolute; + right: 0; + bottom: 0; + opacity: 0; + padding: 25px; + -webkit-transform: translate3d(0, 20px, 0); + -moz-transform: translate3d(0, 20px, 0); + transform: translate3d(0, 20px, 0); + transition-duration: 300ms; + transition-property: all; + transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); +} + +.work:hover .work-overlay:before { + background: rgba(0, 0, 0, 0.5); + transition-duration: 300ms; + transition-property: all; + transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); +} + +.work:hover .work-content { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + -moz-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + transition-duration: 300ms; + transition-property: all; + transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); +} + +/*------------------------------------------------------------------ + [Footer] +------------------------------------------------------------------*/ +.footer .footer-logo { + width: 85px; + height: 21px; +} + +.footer .footer-list { + margin-bottom: 0; +} + +.footer .footer-list-item { + color: #777984; + margin-bottom: 15px; +} + +.footer .footer-list-item:last-child { + margin-bottom: 0; +} + +/*------------------------------------------------------------------ + [Header] +------------------------------------------------------------------*/ +/* Navbar */ +.header .navbar { + margin-bottom: 0; +} + +/* Navbar Toggle */ +.header .navbar-toggle { + width: 25px; + height: 25px; + border: none; + padding: 0; + margin: 35px 0; +} + +.header .navbar-toggle .toggle-icon { + position: relative; + width: 21px; + height: 1px; + display: inline-block; + background: #515769; + transition-duration: 300ms; + transition-property: all; + transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); +} + +.header .navbar-toggle .toggle-icon:before, .header .navbar-toggle .toggle-icon:after { + position: absolute; + right: 0; + background: #515769; + content: " "; +} + +.header .navbar-toggle .toggle-icon:before { + width: 10px; + height: 1px; + bottom: 10px; + -webkit-transform: rotate(0); + -moz-transform: rotate(0); + transform: rotate(0); + transition-duration: 300ms; + transition-property: all; + transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); +} + +.header .navbar-toggle .toggle-icon:after { + width: 16px; + height: 1px; + top: -5px; + -webkit-transform: rotate(0); + -moz-transform: rotate(0); + transform: rotate(0); + transition-duration: 300ms; + transition-property: all; + transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); +} + +.header .navbar-toggle:hover .toggle-icon { + background: #17bed2; + transition-duration: 300ms; + transition-property: all; + transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); +} + +.header .navbar-toggle:hover .toggle-icon:before, .header .navbar-toggle:hover .toggle-icon:after { + width: 21px; + height: 1px; + background: #17bed2; + transition-duration: 300ms; + transition-property: all; + transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); +} + +.header .navbar-toggle:hover .toggle-icon.is-clicked { + background: rgba(81, 87, 105, 0); +} + +/* Navbar Logo */ +.header .navbar-logo { + width: 100px; + height: 100px; + float: right; + max-height: 95px; + line-height: 65px; +} + +.header .navbar-logo-wrap { + display: inline-block; + padding: 15px 0; +} + +.header .navbar-logo-wrap:focus, .header .navbar-logo-wrap:hover { + text-decoration: none; +} + +.header .navbar-logo-img { + display: inline-block; + width: 85px; + height: auto; + max-width: 100%; + max-height: 100%; + vertical-align: middle; +} + +/* Navbar */ +.header .navbar-nav { + padding-right: 0; + margin-bottom: 0; + list-style: none; +} + +/* Nav */ +.header .nav-item { + position: relative; + display: block; +} + +.header .nav-item:last-child .nav-item-child { + padding-left: 0; +} + +.header .nav-item-child { + position: relative; + display: block; + font-size: 13px; + font-weight: 600; + font-family: Hind, sans-serif; + text-transform: uppercase; + line-height: 55px; + padding: 20px; +} + +.header .nav-item-child.active { + position: relative; +} + +.header .nav-item-child.active:after { + position: absolute; + top: 45px; + right: 0; + width: 9px; + height: 2px; + background: #17bed2; + content: " "; +} + +/* Media Queries below 991px */ +@media (max-width: 991px) { + /* Bootstrap collapse of navigation with a maximum width: 991px + (Change it to any breakpoint you want to be collapsed) */ + .header .navbar-toggle { + display: block; + } + .header .navbar-collapse.collapse { + display: none !important; + } + .header .navbar-collapse.collapse.in { + display: block !important; + overflow-y: auto !important; + } + .header .nav-collapse { + padding-right: 0; + padding-left: 0; + } + .header .navbar-nav { + margin: 0; + float: none; + } + .header .navbar-nav .nav-item { + float: none; + } + /* Menu Container */ + .header .menu-container:before, .header .menu-container:after { + content: " "; + display: table; + } + .header .menu-container:after { + clear: both; + } + /* Navbar Nav */ + .header .nav-item-child { + line-height: 1.4; + padding: 12px 15px 12px 12px; + } + .header .nav-item-child.active:after { + position: absolute; + top: 61px; + } +} + +/* Media Queries below 767px */ +@media (max-width: 767px) { + /* Menu Container */ + .header .menu-container { + padding-right: 15px; + padding-left: 15px; + margin-right: 0; + margin-left: 0; + } + .header .navbar > .container { + width: auto; + padding-right: 0; + padding-left: 0; + margin-right: 0; + margin-left: 0; + } + .header .navbar > .container > .nav-collapse { + padding-right: 0; + padding-left: 0; + margin-right: 0; + margin-left: 0; + } +} + +/* Media Queries above 992px */ +@media (min-width: 992px) { + /* Navbar */ + .header .navbar-nav-right { + float: left; + } +} + +/*------------------------------------------------------------------ + [Contact] +------------------------------------------------------------------*/ +.contact-list > li { + font-size: 13px; + color: #81848f; + margin-bottom: 10px; +} + +/*-------------------------------------------------- + [Back To Top Theme Button] +----------------------------------------------------*/ +.back-to-top { + position: fixed; + left: 10px; + bottom: 10px; + display: inline-block; + z-index: 9; + width: 40px; + height: 40px; + font-size: 11px; + font-weight: 400; + color: #fff; + text-align: center; + line-height: 3; + letter-spacing: 1px; + text-transform: uppercase; + background: #515769; + border-radius: 3px; + visibility: hidden; + opacity: 0; + padding: 5px; + -webkit-transform: translate3d(0, 50px, 0); + -moz-transform: translate3d(0, 50px, 0); + transform: translate3d(0, 50px, 0); + transition-duration: 300ms; + transition-property: all; + transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); +} + +.back-to-top:hover { + color: #fff; + transition-duration: 300ms; + transition-property: all; + transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); +} + +.back-to-top:focus, .back-to-top:hover { + text-decoration: none; +} + +/* The Button Becomes Visible */ +.back-to-top.back-to-top-is-visible { + visibility: visible; + opacity: .6; + -webkit-transform: translate3d(0, 0, 0); + -moz-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + transition-duration: 300ms; + transition-property: all; + transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); +} + +.back-to-top.back-to-top-is-visible:hover { + opacity: 1; + transition-duration: 300ms; + transition-property: all; + transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); +} + +/* If the user keeps scrolling down, the button is out of focus and becomes less visible */ +.back-to-top.back-to-top-fade-out { + opacity: .4; +} + +.back-to-top.back-to-top-fade-out:hover { + opacity: 1; + transition-duration: 300ms; + transition-property: all; + transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); +} + +/*------------------------------------------------------------------ + [Form Control] +------------------------------------------------------------------*/ +.form-control { + height: 50px; + font-size: 14px; + font-weight: 400; + color: #a6a7aa; + background: #fafafa; + border: none; + box-shadow: none; + border-radius: 0; + padding-right: 15px; +} + +.form-control::-moz-placeholder { + color: #a6a7aa; +} + +.form-control:-ms-input-placeholder { + color: #a6a7aa; +} + +.form-control::-webkit-input-placeholder { + color: #a6a7aa; +} + +.form-control:focus { + color: #515769; + box-shadow: none; +} + +.form-control:focus::-moz-placeholder { + color: #515769; +} + +.form-control:focus:-ms-input-placeholder { + color: #515769; +} + +.form-control:focus::-webkit-input-placeholder { + color: #515769; +} + +/*-------------------------------------------------- + [Masonry Grid] +----------------------------------------------------*/ +.masonry-grid { + margin: 0 -2px; +} + +.masonry-grid:before, .masonry-grid:after { + content: " "; + display: table; +} + +.masonry-grid:after { + clear: both; +} + +.masonry-grid .masonry-grid-item { + display: block; + width: 19.99%; + float: right; + vertical-align: top; + padding: 0 2px; + margin-bottom: 4px; +} + +.masonry-grid .masonry-grid-item.col-12 { + width: 100%; +} + +.masonry-grid .masonry-grid-item.col-11 { + width: 91.66666667%; +} + +.masonry-grid .masonry-grid-item.col-10 { + width: 83.33333333%; +} + +.masonry-grid .masonry-grid-item.col-9 { + width: 75%; +} + +.masonry-grid .masonry-grid-item.col-8 { + width: 66.66666667%; +} + +.masonry-grid .masonry-grid-item.col-7 { + width: 58.33333333%; +} + +.masonry-grid .masonry-grid-item.col-6 { + width: 50%; +} + +.masonry-grid .masonry-grid-item.col-5 { + width: 41.66666667%; +} + +.masonry-grid .masonry-grid-item.col-4 { + width: 33.33333333%; +} + +.masonry-grid .masonry-grid-item.col-3 { + width: 25%; +} + +.masonry-grid .masonry-grid-item.col-2 { + width: 16.66666667%; +} + +.masonry-grid .masonry-grid-item.col-1 { + width: 8.33333333%; +} + +/* Media Queries below 768px */ +@media (max-width: 768px) { + .masonry-grid .masonry-grid-item { + width: 50%; + } + .masonry-grid .masonry-grid-item.col-12, .masonry-grid .masonry-grid-item.col-11, .masonry-grid .masonry-grid-item.col-10, .masonry-grid .masonry-grid-item.col-9, .masonry-grid .masonry-grid-item.col-8, .masonry-grid .masonry-grid-item.col-7, .masonry-grid .masonry-grid-item.col-6, .masonry-grid .masonry-grid-item.col-5, .masonry-grid .masonry-grid-item.col-4, .masonry-grid .masonry-grid-item.col-3, .masonry-grid .masonry-grid-item.col-2, .masonry-grid .masonry-grid-item.col-1 { + width: 50%; + } +} + +/* Media Queries below 600px */ +@media (max-width: 600px) { + .masonry-grid .masonry-grid-item { + width: 100%; + } + .masonry-grid .masonry-grid-item.col-12, .masonry-grid .masonry-grid-item.col-11, .masonry-grid .masonry-grid-item.col-10, .masonry-grid .masonry-grid-item.col-9, .masonry-grid .masonry-grid-item.col-8, .masonry-grid .masonry-grid-item.col-7, .masonry-grid .masonry-grid-item.col-6, .masonry-grid .masonry-grid-item.col-5, .masonry-grid .masonry-grid-item.col-4, .masonry-grid .masonry-grid-item.col-3, .masonry-grid .masonry-grid-item.col-2, .masonry-grid .masonry-grid-item.col-1 { + width: 100%; + } +} + +/*------------------------------------------------------------------ + [Swiper Slider] +------------------------------------------------------------------*/ +.swiper-slider { + position: relative; + width: 100%; + height: 100%; + overflow: hidden; +} + +.swiper-clients-img { + display: block; + width: 190px; + height: auto; + margin: 0 auto; + opacity: 1; + cursor: pointer; + transition-duration: 200ms; + transition-property: all; + transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); +} + +.swiper-clients-img:hover { + opacity: .8; + transition-duration: 200ms; + transition-property: all; + transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); +} + +/*------------------------------------------------------------------ + [Text Colors] +------------------------------------------------------------------*/ +.color-base { + color: #17bed2; +} + +.color-white { + color: #fff; +} + +.color-heading { + color: #515769; +} + +.color-subtitle { + color: #a6a7aa; +} + +.color-link { + color: #81848f; +} + +.color-link-hover { + color: #999caa; +} + +.color-sky-light { + color: #fafafa; +} + +/*------------------------------------------------------------------ + [Background Colors] +------------------------------------------------------------------*/ +.bg-color-base { + background: #17bed2; +} + +.bg-color-white { + background: #fff; +} + +.bg-color-heading { + background: #515769; +} + +.bg-color-subtitle { + background: #a6a7aa; +} + +.bg-color-link { + background: #81848f; +} + +.bg-color-link-hover { + background: #999caa; +} + +.bg-color-sky-light { + background: #fafafa; +} + +/*------------------------------------------------------------------ + [Content] +------------------------------------------------------------------*/ +.content { + padding-top: 40px; + padding-bottom: 40px; +} + +.content-sm { + padding-top: 60px; + padding-bottom: 60px; +} + +.content-md { + padding-top: 80px; + padding-bottom: 80px; +} + +.content-lg { + padding-top: 100px; + padding-bottom: 100px; +} + +/*------------------------------------------------------------------ + [Overflow] +------------------------------------------------------------------*/ +.overflow-h { + overflow: hidden; +} + +/*-------------------------------------------------- + [Font Weight] +----------------------------------------------------*/ +.fweight-300 { + font-weight: 300 !important; +} + +.fweight-400 { + font-weight: 400 !important; +} + +.fweight-500 { + font-weight: 500 !important; +} + +.fweight-600 { + font-weight: 600 !important; +} + +.fweight-700 { + font-weight: 700 !important; +} + +/*------------------------------------------------------------------ + [Left margin] +------------------------------------------------------------------*/ +.margin-l-0 { + margin-right: 0 !important; +} + +.margin-l-5 { + margin-right: 5px !important; +} + +.margin-l-10 { + margin-right: 10px !important; +} + +.margin-l-20 { + margin-right: 20px !important; +} + +/*------------------------------------------------------------------ + [Right margin] +------------------------------------------------------------------*/ +.margin-r-0 { + margin-left: 0 !important; +} + +.margin-r-5 { + margin-left: 5px !important; +} + +.margin-r-10 { + margin-left: 10px !important; +} + +.margin-r-20 { + margin-left: 20px !important; +} + +/*------------------------------------------------------------------ + [Bottom margin] +------------------------------------------------------------------*/ +.margin-b-0 { + margin-bottom: 0 !important; +} + +.margin-b-5 { + margin-bottom: 5px !important; +} + +.margin-b-10 { + margin-bottom: 10px !important; +} + +.margin-b-20 { + margin-bottom: 20px !important; +} + +.margin-b-30 { + margin-bottom: 30px !important; +} + +.margin-b-40 { + margin-bottom: 40px !important; +} + +.margin-b-50 { + margin-bottom: 50px !important; +} + +.margin-b-60 { + margin-bottom: 60px !important; +} + +.margin-b-70 { + margin-bottom: 70px !important; +} + +.margin-b-80 { + margin-bottom: 80px !important; +} + +.margin-b-90 { + margin-bottom: 90px !important; +} + +.margin-b-100 { + margin-bottom: 100px !important; +} + +/*------------------------------------------------------------------ + [Top margin below 992px] +------------------------------------------------------------------*/ +@media (max-width: 992px) { + .md-margin-b-0 { + margin-bottom: 0 !important; + } + .md-margin-b-5 { + margin-bottom: 5px !important; + } + .md-margin-b-10 { + margin-bottom: 10px !important; + } + .md-margin-b-20 { + margin-bottom: 20px !important; + } + .md-margin-b-30 { + margin-bottom: 30px !important; + } + .md-margin-b-40 { + margin-bottom: 40px !important; + } + .md-margin-b-50 { + margin-bottom: 50px !important; + } + .md-margin-b-60 { + margin-bottom: 60px !important; + } + .md-margin-b-70 { + margin-bottom: 70px !important; + } + .md-margin-b-80 { + margin-bottom: 80px !important; + } + .md-margin-b-90 { + margin-bottom: 90px !important; + } + .md-margin-b-100 { + margin-bottom: 100px !important; + } +} + +/*------------------------------------------------------------------ + [Top margin below 768px] +------------------------------------------------------------------*/ +@media (max-width: 768px) { + .sm-margin-b-0 { + margin-bottom: 0 !important; + } + .sm-margin-b-5 { + margin-bottom: 5px !important; + } + .sm-margin-b-10 { + margin-bottom: 10px !important; + } + .sm-margin-b-20 { + margin-bottom: 20px !important; + } + .sm-margin-b-30 { + margin-bottom: 30px !important; + } + .sm-margin-b-40 { + margin-bottom: 40px !important; + } + .sm-margin-b-50 { + margin-bottom: 50px !important; + } + .sm-margin-b-60 { + margin-bottom: 60px !important; + } + .sm-margin-b-70 { + margin-bottom: 70px !important; + } + .sm-margin-b-80 { + margin-bottom: 80px !important; + } + .sm-margin-b-90 { + margin-bottom: 90px !important; + } + .sm-margin-b-100 { + margin-bottom: 100px !important; + } +} + +/*------------------------------------------------------------------ + [Top margin below 480px] +------------------------------------------------------------------*/ +@media (max-width: 480px) { + .xs-margin-b-0 { + margin-bottom: 0 !important; + } + .xs-margin-b-5 { + margin-bottom: 5px !important; + } + .xs-margin-b-10 { + margin-bottom: 10px !important; + } + .xs-margin-b-20 { + margin-bottom: 20px !important; + } + .xs-margin-b-30 { + margin-bottom: 30px !important; + } + .xs-margin-b-40 { + margin-bottom: 40px !important; + } + .xs-margin-b-50 { + margin-bottom: 50px !important; + } + .xs-margin-b-60 { + margin-bottom: 60px !important; + } + .xs-margin-b-70 { + margin-bottom: 70px !important; + } + .xs-margin-b-80 { + margin-bottom: 80px !important; + } + .xs-margin-b-90 { + margin-bottom: 90px !important; + } + .xs-margin-b-100 { + margin-bottom: 100px !important; + } +} + +/*-------------------------------------------------- + [Height] +----------------------------------------------------*/ +.height-100 { + height: 100px !important; +} + +.height-200 { + height: 200px !important; +} + +.height-300 { + height: 300px !important; +} diff --git a/css/layout-rtl.min.css b/css/layout-rtl.min.css new file mode 100755 index 0000000..da03ef0 --- /dev/null +++ b/css/layout-rtl.min.css @@ -0,0 +1 @@ +.blockquote,.btn-theme,p{line-height:1.4}.btn-theme.active.focus,.btn-theme.active:focus,.btn-theme.focus,.btn-theme:active.focus,.btn-theme:active:focus,.btn-theme:focus,:active,:focus,a,a:active,a:focus,a:hover{outline:0}.blockquote,.header .nav-item-child,.link,a,body,em,h1,h2,h3,h4,h5,h6,li,li a,p,span{font-family:Hind,sans-serif}.back-to-top,.header .nav-item-child,.link{text-transform:uppercase}.back-to-top:focus,.back-to-top:hover,.btn-theme.focus,.btn-theme:focus,.btn-theme:hover,.content-wrapper-link,.header .navbar-logo-wrap:focus,.header .navbar-logo-wrap:hover,a:active,a:focus,a:hover,h1>a:focus,h2>a:focus,h3>a:focus,h4>a:focus,h5>a:focus,h6>a:focus{text-decoration:none}html{overflow-x:hidden}body,html,html a{-webkit-font-smoothing:antialiased}p{font-size:15px;font-weight:400;color:#a6a7aa;margin-bottom:15px}em,li,li a{font-size:16px;font-weight:500;color:#515769}a{color:#81848f}a:active,a:focus,a:hover{color:#999caa}.link{position:relative;font-size:13px;font-weight:600}.link:after{position:absolute;top:8px;left:-15px;width:9px;height:2px;background:#17bed2;content:" "}span{font-size:14px;font-weight:400;color:#bfc1c7}h1,h2,h3,h4,h5,h6{font-weight:700;color:#515769;line-height:1.4;margin:0 0 15px}h1>a,h2>a,h3>a,h4>a,h5>a,h6>a{color:#515769}h1>a:hover,h2>a:hover,h3>a:hover,h4>a:hover,h5>a:hover,h6>a:hover{color:#999caa;text-decoration:none}h1{font-size:40px}h2{font-size:30px}h3,h4{font-size:22px}::selection{color:#fff;background:#17bed2;text-shadow:none}::-webkit-selection{color:#fff;background:#17bed2;text-shadow:none}::-moz-selection{color:#fff;background:#17bed2;text-shadow:none}.section-seperator{border-bottom:1px solid #edf0f2}.content-wrapper-link{position:absolute;top:0;right:0;left:0;bottom:0;display:block;z-index:3}.blockquote{position:relative;font-size:17px;font-weight:400;color:#a6a7aa;border-right:none;margin-right:20px}.blockquote:before{position:absolute;top:0;right:-20px;font-size:60px;color:#17bed2;content:open-quote}.btn-theme,.work .work-overlay{position:relative}.btn-theme{display:inline-block;text-align:center;background-image:none;border-style:solid;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn-theme:hover{transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.7,1,.7,1)}.btn-theme.active,.btn-theme:active{background-image:none;outline:0}.btn-theme.disabled,.btn-theme[disabled],fieldset[disabled] .btn-theme{cursor:not-allowed;box-shadow:none;opacity:.65;pointer-events:none}.btn-base-bg{color:#fff;background:#17bed2;border-color:transparent;border-width:0}.btn-base-bg.focus,.btn-base-bg:focus,.btn-base-bg:hover{color:#fff;background:#63cbd7;border-color:transparent}.btn-theme-sm{font-size:13px;font-weight:600;padding:15px 40px}.work .work-content,.work .work-overlay:before{position:absolute;transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.7,1,.7,1);right:0}.work .work-overlay:before{top:0;width:100%;height:100%;background:0 0;content:" "}.work .work-content{bottom:0;opacity:0;padding:25px;-webkit-transform:translate3d(0,20px,0);-moz-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}.work:hover .work-overlay:before{background:rgba(0,0,0,.5);transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.7,1,.7,1)}.work:hover .work-content{opacity:1;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);transform:translate3d(0,0,0);transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.7,1,.7,1)}.footer .footer-logo{width:85px;height:21px}.footer .footer-list{margin-bottom:0}.footer .footer-list-item{color:#777984;margin-bottom:15px}.footer .footer-list-item:last-child,.header .navbar{margin-bottom:0}.header .navbar-toggle{width:25px;height:25px;border:none;padding:0;margin:35px 0}.header .navbar-toggle .toggle-icon{position:relative;width:21px;height:1px;display:inline-block;background:#515769;transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.7,1,.7,1)}.header .navbar-toggle .toggle-icon:after,.header .navbar-toggle .toggle-icon:before{position:absolute;right:0;background:#515769;content:" "}.header .navbar-toggle:hover .toggle-icon,.header .navbar-toggle:hover .toggle-icon:after,.header .navbar-toggle:hover .toggle-icon:before{background:#17bed2;transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.7,1,.7,1)}.header .navbar-toggle .toggle-icon:before{width:10px;height:1px;bottom:10px;-webkit-transform:rotate(0);-moz-transform:rotate(0);transform:rotate(0);transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.7,1,.7,1)}.header .navbar-toggle .toggle-icon:after{width:16px;height:1px;top:-5px;-webkit-transform:rotate(0);-moz-transform:rotate(0);transform:rotate(0);transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.7,1,.7,1)}.header .navbar-toggle:hover .toggle-icon:after,.header .navbar-toggle:hover .toggle-icon:before{width:21px;height:1px}.header .navbar-toggle:hover .toggle-icon.is-clicked{background:rgba(81,87,105,0)}.header .navbar-logo{width:100px;height:100px;float:right;max-height:95px;line-height:65px}.header .navbar-logo-wrap{display:inline-block;padding:15px 0}.header .navbar-logo-img{display:inline-block;width:85px;height:auto;max-width:100%;max-height:100%;vertical-align:middle}.header .nav-item,.header .nav-item-child{display:block;position:relative}.header .navbar-nav{padding-right:0;margin-bottom:0;list-style:none}.header .nav-item:last-child .nav-item-child{padding-left:0}.header .nav-item-child{font-size:13px;font-weight:600;line-height:55px;padding:20px}.header .nav-item-child.active{position:relative}.header .nav-item-child.active:after{position:absolute;top:45px;right:0;width:9px;height:2px;background:#17bed2;content:" "}@media (max-width:991px){.header .navbar-toggle{display:block}.header .navbar-collapse.collapse{display:none!important}.header .navbar-collapse.collapse.in{display:block!important;overflow-y:auto!important}.header .nav-collapse{padding-right:0;padding-left:0}.header .navbar-nav{margin:0;float:none}.header .navbar-nav .nav-item{float:none}.header .menu-container:after,.header .menu-container:before{content:" ";display:table}.header .menu-container:after{clear:both}.header .nav-item-child{line-height:1.4;padding:12px 15px 12px 12px}.header .nav-item-child.active:after{position:absolute;top:61px}}.overflow-h,.swiper-slider{overflow:hidden}@media (max-width:767px){.header .menu-container{padding-right:15px;padding-left:15px;margin-right:0;margin-left:0}.header .navbar>.container,.header .navbar>.container>.nav-collapse{padding-right:0;padding-left:0;margin-right:0;margin-left:0}.header .navbar>.container{width:auto}}@media (min-width:992px){.header .navbar-nav-right{float:left}}.contact-list>li{font-size:13px;color:#81848f;margin-bottom:10px}.back-to-top,.back-to-top:hover{color:#fff;transition-property:all;transition-timing-function:cubic-bezier(.7,1,.7,1);transition-duration:.3s}.back-to-top{position:fixed;left:10px;bottom:10px;display:inline-block;z-index:9;width:40px;height:40px;font-size:11px;font-weight:400;text-align:center;line-height:3;letter-spacing:1px;background:#515769;border-radius:3px;visibility:hidden;opacity:0;padding:5px;-webkit-transform:translate3d(0,50px,0);-moz-transform:translate3d(0,50px,0);transform:translate3d(0,50px,0)}.back-to-top.back-to-top-is-visible{visibility:visible;opacity:.6;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);transform:translate3d(0,0,0);transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.7,1,.7,1)}.back-to-top.back-to-top-is-visible:hover{opacity:1;transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.7,1,.7,1)}.back-to-top.back-to-top-fade-out{opacity:.4}.back-to-top.back-to-top-fade-out:hover{opacity:1;transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.7,1,.7,1)}.swiper-clients-img,.swiper-clients-img:hover{transition-duration:.2s;transition-property:all;transition-timing-function:cubic-bezier(.7,1,.7,1)}.form-control{height:50px;font-size:14px;font-weight:400;color:#a6a7aa;background:#fafafa;border:none;box-shadow:none;border-radius:0;padding-right:15px}.form-control::-moz-placeholder{color:#a6a7aa}.form-control:-ms-input-placeholder{color:#a6a7aa}.form-control::-webkit-input-placeholder{color:#a6a7aa}.form-control:focus{color:#515769;box-shadow:none}.form-control:focus::-moz-placeholder{color:#515769}.form-control:focus:-ms-input-placeholder{color:#515769}.form-control:focus::-webkit-input-placeholder{color:#515769}.masonry-grid{margin:0 -2px}.masonry-grid:after,.masonry-grid:before{content:" ";display:table}.masonry-grid:after{clear:both}.masonry-grid .masonry-grid-item{display:block;width:19.99%;float:right;vertical-align:top;padding:0 2px;margin-bottom:4px}.masonry-grid .masonry-grid-item.col-12{width:100%}.masonry-grid .masonry-grid-item.col-11{width:91.66666667%}.masonry-grid .masonry-grid-item.col-10{width:83.33333333%}.masonry-grid .masonry-grid-item.col-9{width:75%}.masonry-grid .masonry-grid-item.col-8{width:66.66666667%}.masonry-grid .masonry-grid-item.col-7{width:58.33333333%}.masonry-grid .masonry-grid-item.col-6{width:50%}.masonry-grid .masonry-grid-item.col-5{width:41.66666667%}.masonry-grid .masonry-grid-item.col-4{width:33.33333333%}.masonry-grid .masonry-grid-item.col-3{width:25%}.masonry-grid .masonry-grid-item.col-2{width:16.66666667%}.masonry-grid .masonry-grid-item.col-1{width:8.33333333%}@media (max-width:768px){.masonry-grid .masonry-grid-item,.masonry-grid .masonry-grid-item.col-1,.masonry-grid .masonry-grid-item.col-10,.masonry-grid .masonry-grid-item.col-11,.masonry-grid .masonry-grid-item.col-12,.masonry-grid .masonry-grid-item.col-2,.masonry-grid .masonry-grid-item.col-3,.masonry-grid .masonry-grid-item.col-4,.masonry-grid .masonry-grid-item.col-5,.masonry-grid .masonry-grid-item.col-6,.masonry-grid .masonry-grid-item.col-7,.masonry-grid .masonry-grid-item.col-8,.masonry-grid .masonry-grid-item.col-9{width:50%}}@media (max-width:600px){.masonry-grid .masonry-grid-item,.masonry-grid .masonry-grid-item.col-1,.masonry-grid .masonry-grid-item.col-10,.masonry-grid .masonry-grid-item.col-11,.masonry-grid .masonry-grid-item.col-12,.masonry-grid .masonry-grid-item.col-2,.masonry-grid .masonry-grid-item.col-3,.masonry-grid .masonry-grid-item.col-4,.masonry-grid .masonry-grid-item.col-5,.masonry-grid .masonry-grid-item.col-6,.masonry-grid .masonry-grid-item.col-7,.masonry-grid .masonry-grid-item.col-8,.masonry-grid .masonry-grid-item.col-9{width:100%}}.swiper-slider{position:relative;width:100%;height:100%}.swiper-clients-img{display:block;width:190px;height:auto;margin:0 auto;opacity:1;cursor:pointer}.swiper-clients-img:hover{opacity:.8}.color-base{color:#17bed2}.color-white{color:#fff}.color-heading{color:#515769}.color-subtitle{color:#a6a7aa}.color-link{color:#81848f}.color-link-hover{color:#999caa}.color-sky-light{color:#fafafa}.bg-color-base{background:#17bed2}.bg-color-white{background:#fff}.bg-color-heading{background:#515769}.bg-color-subtitle{background:#a6a7aa}.bg-color-link{background:#81848f}.bg-color-link-hover{background:#999caa}.bg-color-sky-light{background:#fafafa}.content{padding-top:40px;padding-bottom:40px}.content-sm{padding-top:60px;padding-bottom:60px}.content-md{padding-top:80px;padding-bottom:80px}.content-lg{padding-top:100px;padding-bottom:100px}.fweight-300{font-weight:300!important}.fweight-400{font-weight:400!important}.fweight-500{font-weight:500!important}.fweight-600{font-weight:600!important}.fweight-700{font-weight:700!important}.margin-l-0{margin-right:0!important}.margin-l-5{margin-right:5px!important}.margin-l-10{margin-right:10px!important}.margin-l-20{margin-right:20px!important}.margin-r-0{margin-left:0!important}.margin-r-5{margin-left:5px!important}.margin-r-10{margin-left:10px!important}.margin-r-20{margin-left:20px!important}.margin-b-0{margin-bottom:0!important}.margin-b-5{margin-bottom:5px!important}.margin-b-10{margin-bottom:10px!important}.margin-b-20{margin-bottom:20px!important}.margin-b-30{margin-bottom:30px!important}.margin-b-40{margin-bottom:40px!important}.margin-b-50{margin-bottom:50px!important}.margin-b-60{margin-bottom:60px!important}.margin-b-70{margin-bottom:70px!important}.margin-b-80{margin-bottom:80px!important}.margin-b-90{margin-bottom:90px!important}.margin-b-100{margin-bottom:100px!important}@media (max-width:992px){.md-margin-b-0{margin-bottom:0!important}.md-margin-b-5{margin-bottom:5px!important}.md-margin-b-10{margin-bottom:10px!important}.md-margin-b-20{margin-bottom:20px!important}.md-margin-b-30{margin-bottom:30px!important}.md-margin-b-40{margin-bottom:40px!important}.md-margin-b-50{margin-bottom:50px!important}.md-margin-b-60{margin-bottom:60px!important}.md-margin-b-70{margin-bottom:70px!important}.md-margin-b-80{margin-bottom:80px!important}.md-margin-b-90{margin-bottom:90px!important}.md-margin-b-100{margin-bottom:100px!important}}@media (max-width:768px){.sm-margin-b-0{margin-bottom:0!important}.sm-margin-b-5{margin-bottom:5px!important}.sm-margin-b-10{margin-bottom:10px!important}.sm-margin-b-20{margin-bottom:20px!important}.sm-margin-b-30{margin-bottom:30px!important}.sm-margin-b-40{margin-bottom:40px!important}.sm-margin-b-50{margin-bottom:50px!important}.sm-margin-b-60{margin-bottom:60px!important}.sm-margin-b-70{margin-bottom:70px!important}.sm-margin-b-80{margin-bottom:80px!important}.sm-margin-b-90{margin-bottom:90px!important}.sm-margin-b-100{margin-bottom:100px!important}}@media (max-width:480px){.xs-margin-b-0{margin-bottom:0!important}.xs-margin-b-5{margin-bottom:5px!important}.xs-margin-b-10{margin-bottom:10px!important}.xs-margin-b-20{margin-bottom:20px!important}.xs-margin-b-30{margin-bottom:30px!important}.xs-margin-b-40{margin-bottom:40px!important}.xs-margin-b-50{margin-bottom:50px!important}.xs-margin-b-60{margin-bottom:60px!important}.xs-margin-b-70{margin-bottom:70px!important}.xs-margin-b-80{margin-bottom:80px!important}.xs-margin-b-90{margin-bottom:90px!important}.xs-margin-b-100{margin-bottom:100px!important}}.height-100{height:100px!important}.height-200{height:200px!important}.height-300{height:300px!important} \ No newline at end of file diff --git a/css/layout.css b/css/layout.css new file mode 100755 index 0000000..70cc670 --- /dev/null +++ b/css/layout.css @@ -0,0 +1,1458 @@ +/*---------------------------------------------------------------------- + + MASTER STYLESHEET + + Project: Metronic "Acidus" Frontend Freebie - Responsive HTML Template Based On Twitter Bootstrap 3.3.4 + Version: 1.0 + Author: KeenThemes + Primary use: Corporate, Business Themes. + Email: support@keenthemes.com + Follow: http://www.twitter.com/keenthemes + Like: http://www.facebook.com/keenthemes + Website: http://www.keenthemes.com + Premium: Premium Metronic Admin Theme: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes + +-----------------------------------------------------------------------*/ +/* eg: @include user-select(none); */ +/* eg: @include rotate(45deg); */ +/* eg: @include translate3d(0,0,0); */ +/* eg: @include border-radius(3px); */ +/* eg: @include visibility-backface(hidden); */ +/*------------------------------------------------------------------ + [The "base.scss" contains basic default element styles + (colors, typography, margins & padding).] +------------------------------------------------------------------*/ +html { + overflow-x: hidden; +} + +html, html a, body { + -webkit-font-smoothing: antialiased; +} + +body { + position: relative; + font-family: Hind, sans-serif; +} + +p { + font-size: 15px; + font-weight: 400; + font-family: Hind, sans-serif; + color: #a6a7aa; + line-height: 1.4; + margin-bottom: 15px; +} + +em, +li, +li a { + font-size: 16px; + font-weight: 500; + font-family: Hind, sans-serif; + color: #515769; +} + +a { + font-family: Hind, sans-serif; + color: #81848f; + outline: 0; +} + +a:focus, a:hover, a:active { + outline: 0; + color: #999caa; + text-decoration: none; +} + +.link { + position: relative; + font-size: 13px; + font-weight: 600; + font-family: Hind, sans-serif; + text-transform: uppercase; +} + +.link:after { + position: absolute; + top: 8px; + right: -15px; + width: 9px; + height: 2px; + background: #17bed2; + content: " "; +} + +span { + font-size: 14px; + font-weight: 400; + font-family: Hind, sans-serif; + color: #bfc1c7; +} + +h1, h2, h3, h4, h5, h6 { + font-weight: 700; + font-family: Hind, sans-serif; + color: #515769; + line-height: 1.4; + margin: 0 0 15px; +} + +h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a { + color: #515769; +} + +h1 > a:hover, h2 > a:hover, h3 > a:hover, h4 > a:hover, h5 > a:hover, h6 > a:hover { + color: #999caa; + text-decoration: none; +} + +h1 > a:focus, h2 > a:focus, h3 > a:focus, h4 > a:focus, h5 > a:focus, h6 > a:focus { + text-decoration: none; +} + +h1 { + font-size: 40px; +} + +h2 { + font-size: 30px; +} + +h3 { + font-size: 22px; +} + +h4 { + font-size: 22px; +} + +::selection { + color: #fff; + background: #17bed2; + text-shadow: none; +} + +::-webkit-selection { + color: #fff; + background: #17bed2; + text-shadow: none; +} + +::-moz-selection { + color: #fff; + background: #17bed2; + text-shadow: none; +} + +:active, +:focus { + outline: none; +} + +/* Section Seperator */ +.section-seperator { + border-bottom: 1px solid #edf0f2; +} + +/* Content Wrapper Link */ +.content-wrapper-link { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: block; + z-index: 3; + text-decoration: none; +} + +/*------------------------------------------------------------------ + [Button] +------------------------------------------------------------------*/ +.btn-theme { + position: relative; + display: inline-block; + line-height: 1.4; + text-align: center; + background-image: none; + border-style: solid; + white-space: nowrap; + vertical-align: middle; + -ms-touch-action: manipulation; + touch-action: manipulation; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.btn-theme:focus, .btn-theme:active:focus, .btn-theme.active:focus, .btn-theme.focus, .btn-theme:active.focus, .btn-theme.active.focus { + outline: none; +} + +.btn-theme:hover { + transition-duration: 300ms; + transition-property: all; + transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); +} + +.btn-theme:hover, .btn-theme:focus, .btn-theme.focus { + text-decoration: none; +} + +.btn-theme:active, .btn-theme.active { + background-image: none; + outline: 0; +} + +.btn-theme.disabled, .btn-theme[disabled], +fieldset[disabled] .btn-theme { + cursor: not-allowed; + box-shadow: none; + opacity: .65; + pointer-events: none; +} + +.btn-icon { + position: relative; + top: 1px; + margin-right: 10px; +} + +.btn-white-bg { + color: #515769; + background: #fff; + border-color: transparent; + border-width: 0; +} + +.btn-white-bg:hover, .btn-white-bg:focus, .btn-white-bg.focus { + color: #fff; + background: #17bed2; + border-color: transparent; +} + +.btn-white-brd { + color: #fff; + background: transparent; + border-color: #fff; + border-width: 2px; +} + +.btn-white-brd:hover, .btn-white-brd:focus, .btn-white-brd.focus { + color: #515769; + background: #fff; + border-color: #fff; +} + +.btn-default-bg { + color: #515769; + background: #f3f4f5; + border-color: transparent; + border-width: 0; +} + +.btn-default-bg:hover, .btn-default-bg:focus, .btn-default-bg.focus { + color: #fff; + background: #17bed2; + border-color: transparent; +} + +.btn-theme-sm { + font-size: 13px; + font-weight: 600; + padding: 15px 40px; +} + +.btn-theme-md { + font-size: 15px; + font-weight: 600; + padding: 20px 30px; +} + +/*------------------------------------------------------------------ + [Progress Bar] +------------------------------------------------------------------*/ +.progress-box .progress { + box-shadow: none; + height: 3px; +} + +.progress-box .progress-bar { + transition-duration: 2000ms; + transition-property: all; + transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); +} + +/*------------------------------------------------------------------ + [Social Icons] +------------------------------------------------------------------*/ +.social-icons { + display: inline-block; + width: 40px; + height: 40px; + font-size: 16px; + color: #fff; + text-align: center; + border-radius: 50%; + vertical-align: middle; + padding: 11px; + transition-duration: 300ms; + transition-property: all; + transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); +} + +.social-icons:hover { + color: #515769; + background: #fff; + transition-duration: 300ms; + transition-property: all; + transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); +} + +/*------------------------------------------------------------------ + [Promo Block] +------------------------------------------------------------------*/ +.promo-block { + padding: 220px 0 130px; +} + +.promo-block .promo-block-title { + font-size: 70px; + color: #fff; + line-height: 1; +} + +@media (max-width: 480px) { + .promo-block .promo-block-title { + font-size: 50px; + } +} + +.promo-block .promo-block-text { + font-size: 25px; + color: #fff; +} + +.promo-block .promo-block-divider { + border-bottom: 1px solid rgba(255, 255, 255, 0.4); + padding-bottom: 20px; + margin-bottom: 35px; +} + +/*------------------------------------------------------------------ + [Service] +------------------------------------------------------------------*/ +.service { + background: #fff; + padding: 30px; +} + +.service .service-element, +.service .service-info { + -webkit-transform: translate3d(0, 0, 0); + -moz-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + transition-duration: 300ms; + transition-property: all; + transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); +} + +.service .service-icon { + display: block; + font-size: 30px; + color: #999caa; + margin-bottom: 30px; +} + +.service:hover .service-element { + opacity: 0; + -webkit-transform: translate3d(0, -100%, 0); + -moz-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + transition-duration: 300ms; + transition-property: all; + transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); +} + +.service:hover .service-info { + -webkit-transform: translate3d(0, -30%, 0); + -moz-transform: translate3d(0, -30%, 0); + transform: translate3d(0, -30%, 0); + transition-duration: 300ms; + transition-property: all; + transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); +} + +/*------------------------------------------------------------------ + [Work] +------------------------------------------------------------------*/ +/* Overlay */ +.work { + position: relative; + display: block; +} + +.work .work-overlay { + position: relative; + cursor: pointer; +} + +.work .work-overlay:before { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: transparent; + content: " "; + transition-duration: 300ms; + transition-property: all; + transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); +} + +.work:hover .work-overlay:before { + background: rgba(0, 0, 0, 0.5); + transition-duration: 300ms; + transition-property: all; + transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); +} + +/* Popup */ +.work .work-popup-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + width: 100%; + height: 100%; + z-index: 99999; + opacity: 0; + visibility: hidden; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + overflow-x: hidden; + background: rgba(81, 87, 105, 0.4); + transition-duration: 300ms; + transition-property: all; + transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); +} + +.work .work-popup-overlay-show { + opacity: 1; + visibility: visible; + -webkit-backface-visibility: visible; + backface-visibility: visible; + transition-duration: 300ms; + transition-property: all; + transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); +} + +.work .work-popup-content { + position: absolute; + top: 50%; + left: 0; + right: 0; + width: 730px; + height: auto; + display: block; + background: #fff; + padding: 30px; + margin: 0 auto; + -webkit-transform: translate3d(0, -50%, 0); + -moz-transform: translate3d(0, -50%, 0); + transform: translate3d(0, -50%, 0); +} + +.work .work-popup-content-divider { + border-right: 1px solid #cdcecf; +} + +@media (max-width: 768px) { + .work .work-popup-content { + width: 95%; + } + .work .work-popup-content-divider { + border-right: none; + border-bottom: 1px solid #cdcecf; + } +} + +.work .work-popup-close { + float: right; + font-size: 13px; + font-weight: 700; + color: #c5c6cb; + transition-duration: 300ms; + transition-property: all; + transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); +} + +.work .work-popup-close:hover { + color: #aaacb3; + transition-duration: 300ms; + transition-property: all; + transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); +} + +/* Tag */ +.work .work-popup-tag { + margin: 0; +} + +.work .work-popup-tag-item { + padding: 0 2px; +} + +.work .work-popup-tag-link { + font-size: 13px; +} + +/*------------------------------------------------------------------ + [Footer] +------------------------------------------------------------------*/ +.footer .footer-logo { + width: 64px; + height: auto; +} + +/*------------------------------------------------------------------ + [Header] +------------------------------------------------------------------*/ +/* Fixed Top */ +.navbar-fixed-top .navbar-collapse { + max-height: 100%; +} + +/* Navbar */ +.header .navbar { + margin-bottom: 0; + border-bottom: 1px solid rgba(255, 255, 255, 0.2); + transition-duration: 300ms; + transition-property: all; + transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); +} + +/* Navbar Toggle */ +.header .navbar-toggle { + width: 25px; + height: 25px; + border: none; + padding: 0; + margin: 35px 0; +} + +.header .navbar-toggle .toggle-icon { + position: relative; + width: 21px; + height: 1px; + display: inline-block; + background: #515769; + transition-duration: 300ms; + transition-property: all; + transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); +} + +.header .navbar-toggle .toggle-icon:before, .header .navbar-toggle .toggle-icon:after { + position: absolute; + left: 0; + background: #515769; + content: " "; +} + +.header .navbar-toggle .toggle-icon:before { + width: 10px; + height: 1px; + bottom: 10px; + -webkit-transform: rotate(0); + -moz-transform: rotate(0); + transform: rotate(0); + transition-duration: 300ms; + transition-property: all; + transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); +} + +.header .navbar-toggle .toggle-icon:after { + width: 16px; + height: 1px; + top: -5px; + -webkit-transform: rotate(0); + -moz-transform: rotate(0); + transform: rotate(0); + transition-duration: 300ms; + transition-property: all; + transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); +} + +.header .navbar-toggle:hover .toggle-icon { + background: #17bed2; + transition-duration: 300ms; + transition-property: all; + transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); +} + +.header .navbar-toggle:hover .toggle-icon:before, .header .navbar-toggle:hover .toggle-icon:after { + width: 21px; + height: 1px; + background: #17bed2; + transition-duration: 300ms; + transition-property: all; + transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); +} + +.header .navbar-toggle:hover .toggle-icon.is-clicked { + background: rgba(81, 87, 105, 0); +} + +/* Navbar Logo */ +.header .logo { + width: 100px; + height: 100px; + float: left; + max-height: 95px; + line-height: 65px; +} + +.header .logo-wrap { + display: inline-block; + padding: 15px 0; +} + +.header .logo-wrap:focus, .header .logo-wrap:hover { + text-decoration: none; +} + +.header .logo-img { + display: inline-block; + width: 64px; + height: auto; + max-width: 100%; + max-height: 100%; + vertical-align: middle; +} + +.header .logo-img-main { + display: inline-block; + transition-duration: 400ms; + transition-property: all; + transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); +} + +.header .logo-img-active { + display: none; + transition-duration: 400ms; + transition-property: all; + transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); +} + +/* Navbar */ +.header .navbar-nav { + padding-left: 0; + margin-bottom: 0; + list-style: none; +} + +/* Nav */ +.header .nav-item { + position: relative; + display: block; +} + +.header .nav-item:last-child .nav-item-child { + padding-right: 0; +} + +.header .nav-item.active .nav-item-hover:after { + opacity: 1; + transition-duration: 400ms; + transition-property: all; + transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); +} + +.header .nav-item:hover .nav-item-hover:after { + opacity: 1; + transition-duration: 400ms; + transition-property: all; + transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); +} + +.header .nav-item-child { + position: relative; + display: block; + font-size: 13px; + font-weight: 600; + font-family: Hind, sans-serif; + color: #fff; + text-transform: uppercase; + line-height: 55px; + padding: 20px; + transition-duration: 300ms; + transition-property: all; + transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); +} + +.header .nav-item-child:hover, .header .nav-item-child:focus { + background: inherit; +} + +.header .nav-item-hover { + position: relative; +} + +.header .nav-item-hover:after { + position: absolute; + top: 45px; + left: 0; + width: 9px; + height: 2px; + background: #17bed2; + opacity: 0; + content: " "; + transition-duration: 400ms; + transition-property: all; + transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); +} + +/* Media Queries below 991px */ +@media (max-width: 991px) { + /* Bootstrap collapse of navigation with a maximum width: 991px + (Change it to any breakpoint you want to be collapsed) */ + .header { + background: #fff; + } + .header .navbar-toggle { + display: block; + } + .header .navbar-collapse.collapse { + display: none !important; + } + .header .navbar-collapse.collapse.in { + display: block !important; + } + .header .nav-collapse { + padding-left: 0; + padding-right: 0; + } + .header .navbar-nav { + margin: 0; + float: none; + } + .header .navbar-nav .nav-item { + float: none; + } + /* Menu Container */ + .header .menu-container:before, .header .menu-container:after { + content: " "; + display: table; + } + .header .menu-container:after { + clear: both; + } + /* Logo */ + .header .logo .logo-img-main { + display: none; + } + .header .logo .logo-img-active { + display: inline-block; + } + /* Navbar Nav */ + .header .nav-item-child { + color: #515769; + line-height: 1.4; + padding: 12px 12px 12px 15px; + } + .header .nav-item-hover:after { + position: absolute; + top: 19px; + } +} + +/* Media Queries below 767px */ +@media (max-width: 767px) { + /* Menu Container */ + .header .menu-container { + padding-left: 15px; + padding-right: 15px; + margin-left: 0; + margin-right: 0; + } + .header .navbar > .container { + width: auto; + padding-left: 0; + padding-right: 0; + margin-left: 0; + margin-right: 0; + } + .header .navbar > .container > .nav-collapse { + padding-left: 0; + padding-right: 0; + margin-left: 0; + margin-right: 0; + } +} + +/* Media Queries above 992px */ +@media (min-width: 992px) { + /* Navbar */ + .header .navbar-nav-right { + float: right; + } +} + +/* Page On Scroll */ +@media (min-width: 992px) { + .page-on-scroll .header .navbar { + background: #fff; + border-bottom-color: #f0f0f0; + transition-duration: 300ms; + transition-property: all; + transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); + } + .page-on-scroll .header .logo-img-main { + display: none; + transition-duration: 400ms; + transition-property: all; + transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); + } + .page-on-scroll .header .logo-img-active { + display: inline-block; + transition-duration: 400ms; + transition-property: all; + transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); + } + .page-on-scroll .header .nav-item-child { + color: #515769; + transition-duration: 300ms; + transition-property: all; + transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); + } +} + +/*-------------------------------------------------- + [Back To Top Theme Button] +----------------------------------------------------*/ +.back-to-top { + position: fixed; + right: 10px; + bottom: 10px; + display: inline-block; + z-index: 9; + width: 40px; + height: 40px; + font-size: 11px; + font-weight: 400; + color: #fff; + text-align: center; + line-height: 3; + letter-spacing: 1px; + text-transform: uppercase; + background: #515769; + border-radius: 3px; + visibility: hidden; + opacity: 0; + padding: 5px; + -webkit-transform: translate3d(0, 50px, 0); + -moz-transform: translate3d(0, 50px, 0); + transform: translate3d(0, 50px, 0); + transition-duration: 300ms; + transition-property: all; + transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); +} + +.back-to-top:hover { + color: #fff; + transition-duration: 300ms; + transition-property: all; + transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); +} + +.back-to-top:focus, .back-to-top:hover { + text-decoration: none; +} + +/* The Button Becomes Visible */ +.back-to-top.back-to-top-is-visible { + visibility: visible; + opacity: .6; + -webkit-transform: translate3d(0, 0, 0); + -moz-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + transition-duration: 300ms; + transition-property: all; + transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); +} + +.back-to-top.back-to-top-is-visible:hover { + opacity: 1; + transition-duration: 300ms; + transition-property: all; + transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); +} + +/* If the user keeps scrolling down, the button is out of focus and becomes less visible */ +.back-to-top.back-to-top-fade-out { + opacity: .4; +} + +.back-to-top.back-to-top-fade-out:hover { + opacity: 1; + transition-duration: 300ms; + transition-property: all; + transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); +} + +/*------------------------------------------------------------------ + [Form Control] +------------------------------------------------------------------*/ +.form-control { + height: 50px; + font-size: 14px; + font-weight: 400; + color: #a6a7aa; + background: #fafafa; + border: none; + box-shadow: none; + border-radius: 0; + padding-left: 15px; +} + +.form-control::-moz-placeholder { + color: #a6a7aa; +} + +.form-control:-ms-input-placeholder { + color: #a6a7aa; +} + +.form-control::-webkit-input-placeholder { + color: #a6a7aa; +} + +.form-control:focus { + color: #515769; + box-shadow: none; +} + +.form-control:focus::-moz-placeholder { + color: #515769; +} + +.form-control:focus:-ms-input-placeholder { + color: #515769; +} + +.form-control:focus::-webkit-input-placeholder { + color: #515769; +} + +/*------------------------------------------------------------------ + [Text Colors] +------------------------------------------------------------------*/ +.color-base { + color: #17bed2 !important; +} + +.color-white { + color: #fff !important; +} + +.color-heading { + color: #515769 !important; +} + +.color-subtitle { + color: #a6a7aa !important; +} + +.color-link { + color: #81848f !important; +} + +.color-link-hover { + color: #999caa !important; +} + +.color-sky-light { + color: #fafafa !important; +} + +/*------------------------------------------------------------------ + [Background Colors] +------------------------------------------------------------------*/ +.bg-color-base { + background: #17bed2 !important; +} + +.bg-color-white { + background: #fff !important; +} + +.bg-color-heading { + background: #515769 !important; +} + +.bg-color-subtitle { + background: #a6a7aa !important; +} + +.bg-color-link { + background: #81848f !important; +} + +.bg-color-link-hover { + background: #999caa !important; +} + +.bg-color-sky-light { + background: #fafafa !important; +} + +/*------------------------------------------------------------------ + [Row] +------------------------------------------------------------------*/ +.row-space-2 { + margin-right: -2px; + margin-left: -2px; +} + +.row-space-2 > [class*="col-"] { + padding-left: 2px; + padding-right: 2px; +} + +/*-------------------------------------------------- + [Container Full Width] +----------------------------------------------------*/ +.container-full-width { + margin-right: auto; + margin-left: auto; +} + +.container-full-width:before, .container-full-width:after { + content: " "; + display: table; +} + +.container-full-width:after { + clear: both; +} + +/*-------------------------------------------------- + [Container Small] +----------------------------------------------------*/ +.container-sm { + padding-right: 15px; + padding-left: 15px; + margin-right: auto; + margin-left: auto; +} + +.container-sm:before, .container-sm:after { + content: " "; + display: table; +} + +.container-sm:after { + clear: both; +} + +/* Media Queries below 768px */ +@media (min-width: 768px) { + .container-sm { + width: 750px; + } +} + +/* Media Queries below 1200px */ +@media (min-width: 1200px) { + .container-sm { + width: 970px; + } +} + +/*------------------------------------------------------------------ + [Content] +------------------------------------------------------------------*/ +.content { + padding-top: 40px; + padding-bottom: 40px; +} + +.content-sm { + padding-top: 60px; + padding-bottom: 60px; +} + +.content-md { + padding-top: 80px; + padding-bottom: 80px; +} + +.content-lg { + padding-top: 100px; + padding-bottom: 100px; +} + +/*------------------------------------------------------------------ + [Full Width] +------------------------------------------------------------------*/ +.full-width { + width: 100%; + height: auto; +} + +/*-------------------------------------------------- + [Font Weight] +----------------------------------------------------*/ +.fweight-300 { + font-weight: 300 !important; +} + +.fweight-400 { + font-weight: 400 !important; +} + +.fweight-500 { + font-weight: 500 !important; +} + +.fweight-600 { + font-weight: 600 !important; +} + +.fweight-700 { + font-weight: 700 !important; +} + +/*------------------------------------------------------------------ + [Left margin] +------------------------------------------------------------------*/ +.margin-l-0 { + margin-left: 0 !important; +} + +.margin-l-5 { + margin-left: 5px !important; +} + +.margin-l-10 { + margin-left: 10px !important; +} + +.margin-l-20 { + margin-left: 20px !important; +} + +/*------------------------------------------------------------------ + [Right margin] +------------------------------------------------------------------*/ +.margin-r-0 { + margin-right: 0 !important; +} + +.margin-r-5 { + margin-right: 5px !important; +} + +.margin-r-10 { + margin-right: 10px !important; +} + +.margin-r-20 { + margin-right: 20px !important; +} + +/*------------------------------------------------------------------ + [Top margin] +------------------------------------------------------------------*/ +.margin-t-0 { + margin-top: 0 !important; +} + +.margin-t-5 { + margin-top: 5px !important; +} + +.margin-t-10 { + margin-top: 10px !important; +} + +.margin-t-20 { + margin-top: 20px !important; +} + +.margin-t-30 { + margin-top: 30px !important; +} + +.margin-t-40 { + margin-top: 40px !important; +} + +.margin-t-50 { + margin-top: 50px !important; +} + +.margin-t-60 { + margin-top: 60px !important; +} + +/*------------------------------------------------------------------ + [Bottom margin] +------------------------------------------------------------------*/ +.margin-b-0 { + margin-bottom: 0 !important; +} + +.margin-b-4 { + margin-bottom: 4px !important; +} + +.margin-b-5 { + margin-bottom: 5px !important; +} + +.margin-b-10 { + margin-bottom: 10px !important; +} + +.margin-b-20 { + margin-bottom: 20px !important; +} + +.margin-b-30 { + margin-bottom: 30px !important; +} + +.margin-b-40 { + margin-bottom: 40px !important; +} + +.margin-b-50 { + margin-bottom: 50px !important; +} + +.margin-b-60 { + margin-bottom: 60px !important; +} + +.margin-b-70 { + margin-bottom: 70px !important; +} + +.margin-b-80 { + margin-bottom: 80px !important; +} + +.margin-b-90 { + margin-bottom: 90px !important; +} + +.margin-b-100 { + margin-bottom: 100px !important; +} + +/*------------------------------------------------------------------ + [Top margin below 992px] +------------------------------------------------------------------*/ +@media (max-width: 992px) { + .md-margin-b-0 { + margin-bottom: 0 !important; + } + .md-margin-b-4 { + margin-bottom: 4px !important; + } + .md-margin-b-5 { + margin-bottom: 5px !important; + } + .md-margin-b-10 { + margin-bottom: 10px !important; + } + .md-margin-b-20 { + margin-bottom: 20px !important; + } + .md-margin-b-30 { + margin-bottom: 30px !important; + } + .md-margin-b-40 { + margin-bottom: 40px !important; + } + .md-margin-b-50 { + margin-bottom: 50px !important; + } + .md-margin-b-60 { + margin-bottom: 60px !important; + } + .md-margin-b-70 { + margin-bottom: 70px !important; + } + .md-margin-b-80 { + margin-bottom: 80px !important; + } + .md-margin-b-90 { + margin-bottom: 90px !important; + } + .md-margin-b-100 { + margin-bottom: 100px !important; + } +} + +/*------------------------------------------------------------------ + [Top margin below 768px] +------------------------------------------------------------------*/ +@media (max-width: 768px) { + .sm-margin-b-0 { + margin-bottom: 0 !important; + } + .sm-margin-b-4 { + margin-bottom: 4px !important; + } + .sm-margin-b-5 { + margin-bottom: 5px !important; + } + .sm-margin-b-10 { + margin-bottom: 10px !important; + } + .sm-margin-b-20 { + margin-bottom: 20px !important; + } + .sm-margin-b-30 { + margin-bottom: 30px !important; + } + .sm-margin-b-40 { + margin-bottom: 40px !important; + } + .sm-margin-b-50 { + margin-bottom: 50px !important; + } + .sm-margin-b-60 { + margin-bottom: 60px !important; + } + .sm-margin-b-70 { + margin-bottom: 70px !important; + } + .sm-margin-b-80 { + margin-bottom: 80px !important; + } + .sm-margin-b-90 { + margin-bottom: 90px !important; + } + .sm-margin-b-100 { + margin-bottom: 100px !important; + } +} + +/*------------------------------------------------------------------ + [Top margin below 480px] +------------------------------------------------------------------*/ +@media (max-width: 480px) { + .xs-margin-b-0 { + margin-bottom: 0 !important; + } + .xs-margin-b-4 { + margin-bottom: 4px !important; + } + .xs-margin-b-5 { + margin-bottom: 5px !important; + } + .xs-margin-b-10 { + margin-bottom: 10px !important; + } + .xs-margin-b-20 { + margin-bottom: 20px !important; + } + .xs-margin-b-30 { + margin-bottom: 30px !important; + } + .xs-margin-b-40 { + margin-bottom: 40px !important; + } + .xs-margin-b-50 { + margin-bottom: 50px !important; + } + .xs-margin-b-60 { + margin-bottom: 60px !important; + } + .xs-margin-b-70 { + margin-bottom: 70px !important; + } + .xs-margin-b-80 { + margin-bottom: 80px !important; + } + .xs-margin-b-90 { + margin-bottom: 90px !important; + } + .xs-margin-b-100 { + margin-bottom: 100px !important; + } +} + +/*-------------------------------------------------- + [Height] +----------------------------------------------------*/ +.height-100 { + height: 100px !important; +} + +.height-200 { + height: 200px !important; +} + +.height-300 { + height: 300px !important; +} + +.height-400 { + height: 400px !important; +} + +.height-500 { + height: 500px !important; +} + +/*------------------------------------------------------------------ + [Top margin below 992px] +------------------------------------------------------------------*/ +@media (max-width: 992px) { + .md-text-center { + text-align: center; + } + .md-text-left { + text-align: left; + } + .md-text-right { + text-align: right; + } +} + +/*------------------------------------------------------------------ + [Top margin below 768px] +------------------------------------------------------------------*/ +@media (max-width: 768px) { + .sm-text-center { + text-align: center; + } + .sm-text-left { + text-align: left; + } + .sm-text-right { + text-align: right; + } +} + +/*------------------------------------------------------------------ + [Top margin below 480px] +------------------------------------------------------------------*/ +@media (max-width: 480px) { + .xs-text-center { + text-align: center; + } + .xs-text-left { + text-align: left; + } + .xs-text-right { + text-align: right; + } +} diff --git a/css/layout.min.css b/css/layout.min.css new file mode 100755 index 0000000..5659542 --- /dev/null +++ b/css/layout.min.css @@ -0,0 +1 @@ +.link,body{position:relative;font-family:Hind,sans-serif}.btn-theme,p{line-height:1.4}.btn-theme.active.focus,.btn-theme.active:focus,.btn-theme.focus,.btn-theme:active.focus,.btn-theme:active:focus,.btn-theme:focus,:active,:focus,a,a:active,a:focus,a:hover{outline:0}.btn-theme:hover,.progress-box .progress-bar{transition-property:all;transition-timing-function:cubic-bezier(.7,1,.7,1)}.header .nav-item-child,.link,a,body,em,h1,h2,h3,h4,h5,h6,li,li a,p,span{font-family:Hind,sans-serif}.header .nav-item-hover:after,.link:after,.work .work-overlay:before{content:" "}.back-to-top,.header .nav-item-child,.link{text-transform:uppercase}.back-to-top:focus,.back-to-top:hover,.btn-theme.focus,.btn-theme:focus,.btn-theme:hover,.content-wrapper-link,.header .logo-wrap:focus,.header .logo-wrap:hover,a:active,a:focus,a:hover,h1>a:focus,h2>a:focus,h3>a:focus,h4>a:focus,h5>a:focus,h6>a:focus{text-decoration:none}.container-full-width:after,.container-sm:after{clear:both}html{overflow-x:hidden}body,html,html a{-webkit-font-smoothing:antialiased}p{font-size:15px;font-weight:400;color:#a6a7aa;margin-bottom:15px}em,li,li a{font-size:16px;font-weight:500;color:#515769}a{color:#81848f}a:active,a:focus,a:hover{color:#999caa}.link{font-size:13px;font-weight:600}.back-to-top,.form-control,span{font-weight:400}.link:after{position:absolute;top:8px;right:-15px;width:9px;height:2px;background:#17bed2}span{font-size:14px;color:#bfc1c7}h1,h2,h3,h4,h5,h6{font-weight:700;color:#515769;line-height:1.4;margin:0 0 15px}h1>a,h2>a,h3>a,h4>a,h5>a,h6>a{color:#515769}h1>a:hover,h2>a:hover,h3>a:hover,h4>a:hover,h5>a:hover,h6>a:hover{color:#999caa;text-decoration:none}h1{font-size:40px}h2{font-size:30px}h3,h4{font-size:22px}::selection{color:#fff;background:#17bed2;text-shadow:none}::-webkit-selection{color:#fff;background:#17bed2;text-shadow:none}::-moz-selection{color:#fff;background:#17bed2;text-shadow:none}.section-seperator{border-bottom:1px solid #edf0f2}.content-wrapper-link{position:absolute;top:0;left:0;right:0;bottom:0;display:block;z-index:3}.btn-icon,.btn-theme,.work{position:relative}.btn-theme,.social-icons{display:inline-block;vertical-align:middle;text-align:center}.btn-theme{background-image:none;border-style:solid;white-space:nowrap;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn-theme:hover{transition-duration:.3s}.btn-theme.active,.btn-theme:active{background-image:none;outline:0}.btn-theme.disabled,.btn-theme[disabled],fieldset[disabled] .btn-theme{cursor:not-allowed;box-shadow:none;opacity:.65;pointer-events:none}.btn-icon{top:1px;margin-right:10px}.btn-white-bg{color:#515769;background:#fff;border-color:transparent;border-width:0}.btn-white-bg.focus,.btn-white-bg:focus,.btn-white-bg:hover{color:#fff;background:#17bed2;border-color:transparent}.btn-white-brd{color:#fff;background:0 0;border-color:#fff;border-width:2px}.btn-white-brd.focus,.btn-white-brd:focus,.btn-white-brd:hover{color:#515769;background:#fff;border-color:#fff}.btn-default-bg{color:#515769;background:#f3f4f5;border-color:transparent;border-width:0}.btn-default-bg.focus,.btn-default-bg:focus,.btn-default-bg:hover{color:#fff;background:#17bed2;border-color:transparent}.btn-theme-sm{font-size:13px;font-weight:600;padding:15px 40px}.btn-theme-md{font-size:15px;font-weight:600;padding:20px 30px}.progress-box .progress{box-shadow:none;height:3px}.progress-box .progress-bar{transition-duration:2s}.social-icons{width:40px;height:40px;font-size:16px;color:#fff;border-radius:50%;padding:11px;transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.7,1,.7,1)}.work .work-overlay:before,.work .work-popup-overlay{top:0;width:100%;height:100%;transition-property:all;transition-timing-function:cubic-bezier(.7,1,.7,1);transition-duration:.3s;left:0}.social-icons:hover{color:#515769;background:#fff;transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.7,1,.7,1)}.promo-block{padding:220px 0 130px}.promo-block .promo-block-title{font-size:70px;color:#fff;line-height:1}@media (max-width:480px){.promo-block .promo-block-title{font-size:50px}}.promo-block .promo-block-text{font-size:25px;color:#fff}.promo-block .promo-block-divider{border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:20px;margin-bottom:35px}.service{background:#fff;padding:30px}.service .service-element,.service .service-info{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);transform:translate3d(0,0,0);transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.7,1,.7,1)}.service .service-icon{display:block;font-size:30px;color:#999caa;margin-bottom:30px}.service:hover .service-element{opacity:0;-webkit-transform:translate3d(0,-100%,0);-moz-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.7,1,.7,1)}.service:hover .service-info{-webkit-transform:translate3d(0,-30%,0);-moz-transform:translate3d(0,-30%,0);transform:translate3d(0,-30%,0);transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.7,1,.7,1)}.work{display:block}.work .work-overlay{position:relative;cursor:pointer}.work .work-overlay:before{position:absolute;background:0 0}.work:hover .work-overlay:before{background:rgba(0,0,0,.5);transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.7,1,.7,1)}.work .work-popup-overlay{position:fixed;right:0;z-index:99999;opacity:0;visibility:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow-x:hidden;background:rgba(81,87,105,.4)}.work .work-popup-overlay-show{opacity:1;visibility:visible;-webkit-backface-visibility:visible;backface-visibility:visible;transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.7,1,.7,1)}.work .work-popup-content{position:absolute;top:50%;left:0;right:0;width:730px;height:auto;display:block;background:#fff;padding:30px;margin:0 auto;-webkit-transform:translate3d(0,-50%,0);-moz-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.header .logo-img,.header .logo-img-main,.header .logo-wrap{display:inline-block}.work .work-popup-content-divider{border-right:1px solid #cdcecf}@media (max-width:768px){.work .work-popup-content{width:95%}.work .work-popup-content-divider{border-right:none;border-bottom:1px solid #cdcecf}}.work .work-popup-close{float:right;font-size:13px;font-weight:700;color:#c5c6cb;transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.7,1,.7,1)}.work .work-popup-close:hover{color:#aaacb3;transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.7,1,.7,1)}.work .work-popup-tag{margin:0}.work .work-popup-tag-item{padding:0 2px}.work .work-popup-tag-link{font-size:13px}.footer .footer-logo{width:64px;height:auto}.navbar-fixed-top .navbar-collapse{max-height:100%}.header .navbar{margin-bottom:0;border-bottom:1px solid rgba(255,255,255,.2);transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.7,1,.7,1)}.header .navbar-toggle{width:25px;height:25px;border:none;padding:0;margin:35px 0}.header .navbar-toggle .toggle-icon{position:relative;width:21px;height:1px;display:inline-block;background:#515769;transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.7,1,.7,1)}.header .navbar-toggle .toggle-icon:after,.header .navbar-toggle .toggle-icon:before{position:absolute;left:0;background:#515769;content:" "}.header .navbar-toggle .toggle-icon:before{width:10px;height:1px;bottom:10px;-webkit-transform:rotate(0);-moz-transform:rotate(0);transform:rotate(0);transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.7,1,.7,1)}.header .navbar-toggle .toggle-icon:after{width:16px;height:1px;top:-5px;-webkit-transform:rotate(0);-moz-transform:rotate(0);transform:rotate(0);transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.7,1,.7,1)}.header .navbar-toggle:hover .toggle-icon{background:#17bed2;transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.7,1,.7,1)}.header .navbar-toggle:hover .toggle-icon:after,.header .navbar-toggle:hover .toggle-icon:before{width:21px;height:1px;background:#17bed2;transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.7,1,.7,1)}.header .logo-img-active,.header .logo-img-main,.header .nav-item.active .nav-item-hover:after,.header .nav-item:hover .nav-item-hover:after{transition-duration:.4s;transition-property:all;transition-timing-function:cubic-bezier(.7,1,.7,1)}.header .navbar-toggle:hover .toggle-icon.is-clicked{background:rgba(81,87,105,0)}.header .logo{width:100px;height:100px;float:left;max-height:95px;line-height:65px}.header .logo-wrap{padding:15px 0}.header .logo-img{width:64px;height:auto;max-width:100%;max-height:100%;vertical-align:middle}.header .logo-img-active{display:none}.header .nav-item,.header .nav-item-child{display:block;position:relative}.header .navbar-nav{padding-left:0;margin-bottom:0;list-style:none}.header .nav-item:last-child .nav-item-child{padding-right:0}.header .nav-item.active .nav-item-hover:after,.header .nav-item:hover .nav-item-hover:after{opacity:1}.header .nav-item-child{font-size:13px;font-weight:600;color:#fff;line-height:55px;padding:20px;transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.7,1,.7,1)}.header .nav-item-child:focus,.header .nav-item-child:hover{background:inherit}.header .nav-item-hover{position:relative}.header .nav-item-hover:after{position:absolute;top:45px;left:0;width:9px;height:2px;background:#17bed2;opacity:0;transition-duration:.4s;transition-property:all;transition-timing-function:cubic-bezier(.7,1,.7,1)}@media (max-width:991px){.header{background:#fff}.header .navbar-toggle{display:block}.header .navbar-collapse.collapse{display:none!important}.header .navbar-collapse.collapse.in{display:block!important}.header .nav-collapse{padding-left:0;padding-right:0}.header .navbar-nav{margin:0;float:none}.header .navbar-nav .nav-item{float:none}.header .menu-container:after,.header .menu-container:before{content:" ";display:table}.header .menu-container:after{clear:both}.header .logo .logo-img-main{display:none}.header .logo .logo-img-active{display:inline-block}.header .nav-item-child{color:#515769;line-height:1.4;padding:12px 12px 12px 15px}.header .nav-item-hover:after{position:absolute;top:19px}}@media (max-width:767px){.header .menu-container{padding-left:15px;padding-right:15px;margin-left:0;margin-right:0}.header .navbar>.container,.header .navbar>.container>.nav-collapse{padding-left:0;padding-right:0;margin-left:0;margin-right:0}.header .navbar>.container{width:auto}}@media (min-width:992px){.header .navbar-nav-right{float:right}.page-on-scroll .header .navbar{background:#fff;border-bottom-color:#f0f0f0;transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.7,1,.7,1)}.page-on-scroll .header .logo-img-active,.page-on-scroll .header .logo-img-main{transition-duration:.4s;transition-property:all;transition-timing-function:cubic-bezier(.7,1,.7,1)}.page-on-scroll .header .logo-img-main{display:none}.page-on-scroll .header .logo-img-active{display:inline-block}.page-on-scroll .header .nav-item-child{color:#515769;transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.7,1,.7,1)}}.back-to-top,.back-to-top:hover{color:#fff;transition-property:all;transition-timing-function:cubic-bezier(.7,1,.7,1)}.back-to-top{position:fixed;right:10px;bottom:10px;display:inline-block;z-index:9;width:40px;height:40px;font-size:11px;text-align:center;line-height:3;letter-spacing:1px;background:#515769;border-radius:3px;visibility:hidden;opacity:0;padding:5px;-webkit-transform:translate3d(0,50px,0);-moz-transform:translate3d(0,50px,0);transform:translate3d(0,50px,0);transition-duration:.3s}.container-full-width:after,.container-full-width:before,.container-sm:after,.container-sm:before{content:" ";display:table}.back-to-top:hover{transition-duration:.3s}.back-to-top.back-to-top-is-visible{visibility:visible;opacity:.6;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);transform:translate3d(0,0,0);transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.7,1,.7,1)}.back-to-top.back-to-top-is-visible:hover{opacity:1;transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.7,1,.7,1)}.back-to-top.back-to-top-fade-out{opacity:.4}.back-to-top.back-to-top-fade-out:hover{opacity:1;transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.7,1,.7,1)}.form-control{height:50px;font-size:14px;color:#a6a7aa;background:#fafafa;border:none;box-shadow:none;border-radius:0;padding-left:15px}.form-control::-moz-placeholder{color:#a6a7aa}.form-control:-ms-input-placeholder{color:#a6a7aa}.form-control::-webkit-input-placeholder{color:#a6a7aa}.form-control:focus{color:#515769;box-shadow:none}.form-control:focus::-moz-placeholder{color:#515769}.form-control:focus:-ms-input-placeholder{color:#515769}.form-control:focus::-webkit-input-placeholder{color:#515769}.color-base{color:#17bed2!important}.color-white{color:#fff!important}.color-heading{color:#515769!important}.color-subtitle{color:#a6a7aa!important}.color-link{color:#81848f!important}.color-link-hover{color:#999caa!important}.color-sky-light{color:#fafafa!important}.bg-color-base{background:#17bed2!important}.bg-color-white{background:#fff!important}.bg-color-heading{background:#515769!important}.bg-color-subtitle{background:#a6a7aa!important}.bg-color-link{background:#81848f!important}.bg-color-link-hover{background:#999caa!important}.bg-color-sky-light{background:#fafafa!important}.row-space-2{margin-right:-2px;margin-left:-2px}.container-full-width,.container-sm{margin-right:auto;margin-left:auto}.row-space-2>[class*=col-]{padding-left:2px;padding-right:2px}.container-sm{padding-right:15px;padding-left:15px}@media (min-width:768px){.container-sm{width:750px}}@media (min-width:1200px){.container-sm{width:970px}}.content{padding-top:40px;padding-bottom:40px}.content-sm{padding-top:60px;padding-bottom:60px}.content-md{padding-top:80px;padding-bottom:80px}.content-lg{padding-top:100px;padding-bottom:100px}.full-width{width:100%;height:auto}.fweight-300{font-weight:300!important}.fweight-400{font-weight:400!important}.fweight-500{font-weight:500!important}.fweight-600{font-weight:600!important}.fweight-700{font-weight:700!important}.margin-l-0{margin-left:0!important}.margin-l-5{margin-left:5px!important}.margin-l-10{margin-left:10px!important}.margin-l-20{margin-left:20px!important}.margin-r-0{margin-right:0!important}.margin-r-5{margin-right:5px!important}.margin-r-10{margin-right:10px!important}.margin-r-20{margin-right:20px!important}.margin-t-0{margin-top:0!important}.margin-t-5{margin-top:5px!important}.margin-t-10{margin-top:10px!important}.margin-t-20{margin-top:20px!important}.margin-t-30{margin-top:30px!important}.margin-t-40{margin-top:40px!important}.margin-t-50{margin-top:50px!important}.margin-t-60{margin-top:60px!important}.margin-b-0{margin-bottom:0!important}.margin-b-4{margin-bottom:4px!important}.margin-b-5{margin-bottom:5px!important}.margin-b-10{margin-bottom:10px!important}.margin-b-20{margin-bottom:20px!important}.margin-b-30{margin-bottom:30px!important}.margin-b-40{margin-bottom:40px!important}.margin-b-50{margin-bottom:50px!important}.margin-b-60{margin-bottom:60px!important}.margin-b-70{margin-bottom:70px!important}.margin-b-80{margin-bottom:80px!important}.margin-b-90{margin-bottom:90px!important}.margin-b-100{margin-bottom:100px!important}.height-100{height:100px!important}.height-200{height:200px!important}.height-300{height:300px!important}.height-400{height:400px!important}.height-500{height:500px!important}@media (max-width:992px){.md-margin-b-0{margin-bottom:0!important}.md-margin-b-4{margin-bottom:4px!important}.md-margin-b-5{margin-bottom:5px!important}.md-margin-b-10{margin-bottom:10px!important}.md-margin-b-20{margin-bottom:20px!important}.md-margin-b-30{margin-bottom:30px!important}.md-margin-b-40{margin-bottom:40px!important}.md-margin-b-50{margin-bottom:50px!important}.md-margin-b-60{margin-bottom:60px!important}.md-margin-b-70{margin-bottom:70px!important}.md-margin-b-80{margin-bottom:80px!important}.md-margin-b-90{margin-bottom:90px!important}.md-margin-b-100{margin-bottom:100px!important}.md-text-center{text-align:center}.md-text-left{text-align:left}.md-text-right{text-align:right}}@media (max-width:768px){.sm-margin-b-0{margin-bottom:0!important}.sm-margin-b-4{margin-bottom:4px!important}.sm-margin-b-5{margin-bottom:5px!important}.sm-margin-b-10{margin-bottom:10px!important}.sm-margin-b-20{margin-bottom:20px!important}.sm-margin-b-30{margin-bottom:30px!important}.sm-margin-b-40{margin-bottom:40px!important}.sm-margin-b-50{margin-bottom:50px!important}.sm-margin-b-60{margin-bottom:60px!important}.sm-margin-b-70{margin-bottom:70px!important}.sm-margin-b-80{margin-bottom:80px!important}.sm-margin-b-90{margin-bottom:90px!important}.sm-margin-b-100{margin-bottom:100px!important}.sm-text-center{text-align:center}.sm-text-left{text-align:left}.sm-text-right{text-align:right}}@media (max-width:480px){.xs-margin-b-0{margin-bottom:0!important}.xs-margin-b-4{margin-bottom:4px!important}.xs-margin-b-5{margin-bottom:5px!important}.xs-margin-b-10{margin-bottom:10px!important}.xs-margin-b-20{margin-bottom:20px!important}.xs-margin-b-30{margin-bottom:30px!important}.xs-margin-b-40{margin-bottom:40px!important}.xs-margin-b-50{margin-bottom:50px!important}.xs-margin-b-60{margin-bottom:60px!important}.xs-margin-b-70{margin-bottom:70px!important}.xs-margin-b-80{margin-bottom:80px!important}.xs-margin-b-90{margin-bottom:90px!important}.xs-margin-b-100{margin-bottom:100px!important}.xs-text-center{text-align:center}.xs-text-left{text-align:left}.xs-text-right{text-align:right}} \ No newline at end of file diff --git a/img/1920x1080/01.jpg b/img/1920x1080/01.jpg new file mode 100755 index 0000000..d7a1b81 Binary files /dev/null and b/img/1920x1080/01.jpg differ diff --git a/img/397x300/01.jpg b/img/397x300/01.jpg new file mode 100755 index 0000000..ee2014b Binary files /dev/null and b/img/397x300/01.jpg differ diff --git a/img/397x300/02.jpg b/img/397x300/02.jpg new file mode 100755 index 0000000..0df37ae Binary files /dev/null and b/img/397x300/02.jpg differ diff --git a/img/397x300/03.jpg b/img/397x300/03.jpg new file mode 100755 index 0000000..4d64fec Binary files /dev/null and b/img/397x300/03.jpg differ diff --git a/img/397x400/01.jpg b/img/397x400/01.jpg new file mode 100755 index 0000000..3932c9d Binary files /dev/null and b/img/397x400/01.jpg differ diff --git a/img/800x400/01.jpg b/img/800x400/01.jpg new file mode 100755 index 0000000..b489a9b Binary files /dev/null and b/img/800x400/01.jpg differ diff --git a/img/logo-dark.png b/img/logo-dark.png new file mode 100755 index 0000000..8997645 Binary files /dev/null and b/img/logo-dark.png differ diff --git a/img/logo.png b/img/logo.png new file mode 100755 index 0000000..4322e74 Binary files /dev/null and b/img/logo.png differ diff --git a/index.html b/index.html new file mode 100755 index 0000000..45157b0 --- /dev/null +++ b/index.html @@ -0,0 +1,515 @@ + + + + +
+ +What I am all about.
+I'm Alex Teseira, orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+Batman would be jealous.
+I build the real value.
+Hire me.
+