@charset "UTF-8"; /*! 文字动画:下方查动画名称:http://www.html5tricks.com/demo/css3-animate-css/index.html 示例:
Animate.css
圆图及方形图动画 http://www.html5tricks.com/demo/css3-hover-image-15-animation/index.html 示例: 查看源码复制过来 Copyright (c) 2013 Daniel Eden */ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s } @-webkit-keyframes bounce { 0%, 100%, 20%, 53%, 80% { -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1); transition-timing-function: cubic-bezier(0.215, .61, .355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } 40%, 43% { -webkit-transition-timing-function: cubic-bezier(0.755, .050, .855, .060); transition-timing-function: cubic-bezier(0.755, .050, .855, .060); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0) } 70% { -webkit-transition-timing-function: cubic-bezier(0.755, .050, .855, .060); transition-timing-function: cubic-bezier(0.755, .050, .855, .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%, 100%, 20%, 53%, 80% { -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1); transition-timing-function: cubic-bezier(0.215, .61, .355, 1); -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } 40%, 43% { -webkit-transition-timing-function: cubic-bezier(0.755, .050, .855, .060); transition-timing-function: cubic-bezier(0.755, .050, .855, .060); -webkit-transform: translate3d(0, -30px, 0); -ms-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0) } 70% { -webkit-transition-timing-function: cubic-bezier(0.755, .050, .855, .060); transition-timing-function: cubic-bezier(0.755, .050, .855, .060); -webkit-transform: translate3d(0, -15px, 0); -ms-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0) } 90% { -webkit-transform: translate3d(0, -4px, 0); -ms-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0) } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; -ms-transform-origin: center bottom; transform-origin: center bottom } @-webkit-keyframes flash { 0%, 100%, 50% { opacity: 1 } 25%, 75% { opacity: 0 } } @keyframes flash { 0%, 100%, 50% { opacity: 1 } 25%, 75% { opacity: 0 } } .flash { -webkit-animation-name: flash; animation-name: flash } @-webkit-keyframes pulse { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1) } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05) } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1) } } @keyframes pulse { 0% { -webkit-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1) } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); -ms-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05) } 100% { -webkit-transform: scale3d(1, 1, 1); -ms-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, .75, 1); transform: scale3d(1.25, .75, 1) } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1) } 50% { -webkit-transform: scale3d(1.15, .85, 1); transform: scale3d(1.15, .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); -ms-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1) } 30% { -webkit-transform: scale3d(1.25, .75, 1); -ms-transform: scale3d(1.25, .75, 1); transform: scale3d(1.25, .75, 1) } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); -ms-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1) } 50% { -webkit-transform: scale3d(1.15, .85, 1); -ms-transform: scale3d(1.15, .85, 1); transform: scale3d(1.15, .85, 1) } 65% { -webkit-transform: scale3d(.95, 1.05, 1); -ms-transform: scale3d(.95, 1.05, 1); transform: scale3d(.95, 1.05, 1) } 75% { -webkit-transform: scale3d(1.05, .95, 1); -ms-transform: scale3d(1.05, .95, 1); transform: scale3d(1.05, .95, 1) } 100% { -webkit-transform: scale3d(1, 1, 1); -ms-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); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); -ms-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0) } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); -ms-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); -ms-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg) } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); -ms-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg) } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); -ms-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg) } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); -ms-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg) } 100% { -webkit-transform: rotate3d(0, 0, 1, 0deg); -ms-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg) } } .swing { -webkit-transform-origin: top center; -ms-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); -ms-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1) } 10%, 20% { -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); -ms-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); -ms-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); -ms-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); -ms-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1) } } .tada { -webkit-animation-name: tada; animation-name: tada } @-webkit-keyframes wobble { 0% { -webkit-transform: none; transform: none } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg) } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg) } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg) } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg) } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg) } 100% { -webkit-transform: none; transform: none } } @keyframes wobble { 0% { -webkit-transform: none; -ms-transform: none; transform: none } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); -ms-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); -ms-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); -ms-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); -ms-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); -ms-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg) } 100% { -webkit-transform: none; -ms-transform: none; transform: none } } .wobble { -webkit-animation-name: wobble; animation-name: wobble } @-webkit-keyframes bounceIn { 0%, 100%, 20%, 40%, 60%, 80% { -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1); transition-timing-function: cubic-bezier(0.215, .61, .355, 1) } 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%, 100%, 20%, 40%, 60%, 80% { -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1); transition-timing-function: cubic-bezier(0.215, .61, .355, 1) } 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); -ms-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3) } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); -ms-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1) } 40% { -webkit-transform: scale3d(.9, .9, .9); -ms-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9) } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); -ms-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03) } 80% { -webkit-transform: scale3d(.97, .97, .97); -ms-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97) } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1) } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; -webkit-animation-duration: .75s; animation-duration: .75s } @-webkit-keyframes bounceInDown { 0%, 100%, 60%, 75%, 90% { -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1); transition-timing-function: cubic-bezier(0.215, .61, .355, 1) } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0) } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0) } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0) } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0) } 100% { -webkit-transform: none; transform: none } } @keyframes bounceInDown { 0%, 100%, 60%, 75%, 90% { -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1); transition-timing-function: cubic-bezier(0.215, .61, .355, 1) } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); -ms-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0) } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); -ms-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0) } 75% { -webkit-transform: translate3d(0, -10px, 0); -ms-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0) } 90% { -webkit-transform: translate3d(0, 5px, 0); -ms-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0) } 100% { -webkit-transform: none; -ms-transform: none; transform: none } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown } @-webkit-keyframes bounceInLeft { 0%, 100%, 60%, 75%, 90% { -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1); transition-timing-function: cubic-bezier(0.215, .61, .355, 1) } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0) } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0) } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0) } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0) } 100% { -webkit-transform: none; transform: none } } @keyframes bounceInLeft { 0%, 100%, 60%, 75%, 90% { -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1); transition-timing-function: cubic-bezier(0.215, .61, .355, 1) } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); -ms-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0) } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); -ms-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0) } 75% { -webkit-transform: translate3d(-10px, 0, 0); -ms-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0) } 90% { -webkit-transform: translate3d(5px, 0, 0); -ms-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0) } 100% { -webkit-transform: none; -ms-transform: none; transform: none } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft } @-webkit-keyframes bounceInRight { 0%, 100%, 60%, 75%, 90% { -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1); transition-timing-function: cubic-bezier(0.215, .61, .355, 1) } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0) } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0) } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0) } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0) } 100% { -webkit-transform: none; transform: none } } @keyframes bounceInRight { 0%, 100%, 60%, 75%, 90% { -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1); transition-timing-function: cubic-bezier(0.215, .61, .355, 1) } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); -ms-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0) } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); -ms-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0) } 75% { -webkit-transform: translate3d(10px, 0, 0); -ms-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0) } 90% { -webkit-transform: translate3d(-5px, 0, 0); -ms-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0) } 100% { -webkit-transform: none; -ms-transform: none; transform: none } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight } @-webkit-keyframes bounceInUp { 0%, 100%, 60%, 75%, 90% { -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1); transition-timing-function: cubic-bezier(0.215, .61, .355, 1) } 0% { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0) } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0) } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0) } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0) } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes bounceInUp { 0%, 100%, 60%, 75%, 90% { -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1); transition-timing-function: cubic-bezier(0.215, .61, .355, 1) } 0% { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); -ms-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0) } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); -ms-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0) } 75% { -webkit-transform: translate3d(0, 10px, 0); -ms-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0) } 90% { -webkit-transform: translate3d(0, -5px, 0); -ms-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0) } 100% { -webkit-transform: translate3d(0, 0, 0); -ms-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); -ms-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9) } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); -ms-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); -ms-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3) } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; -webkit-animation-duration: .75s; animation-duration: .75s } @-webkit-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0) } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0) } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0) } } @keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); -ms-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0) } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); -ms-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0) } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); -ms-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); -ms-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0) } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); -ms-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); -ms-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0) } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); -ms-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); -ms-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0) } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); -ms-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0) } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); -ms-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); -ms-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0) } 100% { opacity: 1; -webkit-transform: none; -ms-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); -ms-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0) } 100% { opacity: 1; -webkit-transform: none; -ms-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); -ms-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) } 100% { opacity: 1; -webkit-transform: none; -ms-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); -ms-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0) } 100% { opacity: 1; -webkit-transform: none; -ms-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); -ms-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) } 100% { opacity: 1; -webkit-transform: none; -ms-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); -ms-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0) } 100% { opacity: 1; -webkit-transform: none; -ms-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); -ms-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0) } 100% { opacity: 1; -webkit-transform: none; -ms-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); -ms-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0) } 100% { opacity: 1; -webkit-transform: none; -ms-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); -ms-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); -ms-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); -ms-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); -ms-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); -ms-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); -ms-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); -ms-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); -ms-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); -ms-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); -ms-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); -ms-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); -ms-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); -ms-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } } .animated.flip { -webkit-backface-visibility: visible; -ms-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-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0 } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg) } 100% { -webkit-transform: perspective(400px); transform: perspective(400px) } } @keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -ms-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0 } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -ms-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); -ms-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); -ms-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg) } 100% { -webkit-transform: perspective(400px); -ms-transform: perspective(400px); transform: perspective(400px) } } .flipInX { -webkit-backface-visibility: visible !important; -ms-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-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0 } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg) } 100% { -webkit-transform: perspective(400px); transform: perspective(400px) } } @keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -ms-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0 } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -ms-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); -ms-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); -ms-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg) } 100% { -webkit-transform: perspective(400px); -ms-transform: perspective(400px); transform: perspective(400px) } } .flipInY { -webkit-backface-visibility: visible !important; -ms-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); -ms-transform: perspective(400px); transform: perspective(400px) } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -ms-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); -ms-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0 } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-animation-duration: .75s; animation-duration: .75s; -webkit-backface-visibility: visible !important; -ms-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); -ms-transform: perspective(400px); transform: perspective(400px) } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); -ms-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); -ms-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0 } } .flipOutY { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; -webkit-animation-duration: .75s; animation-duration: .75s } @-webkit-keyframes lightSpeedIn { 0% { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0 } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1 } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1 } 100% { -webkit-transform: none; transform: none; opacity: 1 } } @keyframes lightSpeedIn { 0% { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); -ms-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0 } 60% { -webkit-transform: skewX(20deg); -ms-transform: skewX(20deg); transform: skewX(20deg); opacity: 1 } 80% { -webkit-transform: skewX(-5deg); -ms-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1 } 100% { -webkit-transform: none; -ms-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); -ms-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; -ms-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); -ms-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0 } 100% { -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; -webkit-transform: none; -ms-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; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); -ms-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0 } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; -ms-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; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); -ms-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0 } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; -ms-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; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); -ms-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0 } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; -ms-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; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); -ms-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0 } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; -ms-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; -ms-transform-origin: center; transform-origin: center; opacity: 1 } 100% { -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); -ms-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: rotate(0, 0, 1, 45deg); transform: rotate(0, 0, 1, 45deg); opacity: 0 } } @keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; opacity: 1 } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0, 0, 1, 45deg); -ms-transform: rotate(0, 0, 1, 45deg); transform: rotate(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; -ms-transform-origin: right bottom; transform-origin: right bottom; opacity: 1 } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); -ms-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; -ms-transform-origin: left bottom; transform-origin: left bottom; opacity: 1 } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); -ms-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; -ms-transform-origin: right bottom; transform-origin: right bottom; opacity: 1 } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); -ms-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; -ms-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); -ms-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; -ms-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); -ms-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; -ms-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); -ms-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0 } } .hinge { -webkit-animation-name: hinge; animation-name: hinge } @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg) } 100% { opacity: 1; -webkit-transform: none; transform: none } } @keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); -ms-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; -ms-transform: none; transform: none } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn } @-webkit-keyframes rollOut { 0% { opacity: 1 } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg) } } @keyframes rollOut { 0% { opacity: 1 } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); -ms-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); -ms-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.55, .055, .675, .19); animation-timing-function: cubic-bezier(0.55, .055, .675, .19) } 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, .885, .32, 1); animation-timing-function: cubic-bezier(0.175, .885, .32, 1) } } @keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); -ms-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.55, .055, .675, .19); animation-timing-function: cubic-bezier(0.55, .055, .675, .19) } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -ms-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, .885, .32, 1); animation-timing-function: cubic-bezier(0.175, .885, .32, 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.55, .055, .675, .19); animation-timing-function: cubic-bezier(0.55, .055, .675, .19) } 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, .885, .32, 1); animation-timing-function: cubic-bezier(0.175, .885, .32, 1) } } @keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); -ms-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.55, .055, .675, .19); animation-timing-function: cubic-bezier(0.55, .055, .675, .19) } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); -ms-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, .885, .32, 1); animation-timing-function: cubic-bezier(0.175, .885, .32, 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.55, .055, .675, .19); animation-timing-function: cubic-bezier(0.55, .055, .675, .19) } 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, .885, .32, 1); animation-timing-function: cubic-bezier(0.175, .885, .32, 1) } } @keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); -ms-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.55, .055, .675, .19); animation-timing-function: cubic-bezier(0.55, .055, .675, .19) } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); -ms-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, .885, .32, 1); animation-timing-function: cubic-bezier(0.175, .885, .32, 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.55, .055, .675, .19); animation-timing-function: cubic-bezier(0.55, .055, .675, .19) } 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, .885, .32, 1); animation-timing-function: cubic-bezier(0.175, .885, .32, 1) } } @keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); -ms-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.55, .055, .675, .19); animation-timing-function: cubic-bezier(0.55, .055, .675, .19) } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -ms-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, .885, .32, 1); animation-timing-function: cubic-bezier(0.175, .885, .32, 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); -ms-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.55, .055, .675, .19); animation-timing-function: cubic-bezier(0.55, .055, .675, .19) } 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, .885, .32, 1); animation-timing-function: cubic-bezier(0.175, .885, .32, 1) } } @keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -ms-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.55, .055, .675, .19); animation-timing-function: cubic-bezier(0.55, .055, .675, .19) } 100% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); -ms-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; -ms-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, .885, .32, 1); animation-timing-function: cubic-bezier(0.175, .885, .32, 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); -ms-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); -ms-transform: scale(.1) translate3d(-2000px, 0, 0); transform: scale(.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; -ms-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); -ms-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); -ms-transform: scale(.1) translate3d(2000px, 0, 0); transform: scale(.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; -ms-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.55, .055, .675, .19); animation-timing-function: cubic-bezier(0.55, .055, .675, .19) } 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, .885, .32, 1); animation-timing-function: cubic-bezier(0.175, .885, .32, 1) } } @keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -ms-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.55, .055, .675, .19); animation-timing-function: cubic-bezier(0.55, .055, .675, .19) } 100% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); -ms-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; -ms-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, .885, .32, 1); animation-timing-function: cubic-bezier(0.175, .885, .32, 1) } } .zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp } .ih { position: relative; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .ih, .ih * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .ih img { width: 100%; height: 100%; } .ih.c { position: relative; width: 220px; height: 220px; border-radius: 50%; } .ih.c .img { position: relative; width: 220px; height: 220px; border-radius: 50%; } .ih.c .img:before { position: absolute; display: block; content: ''; width: 100%; height: 100%; border-radius: 50%; box-shadow: inset 0 0 0 16px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.3); -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .ih.c .img img { border-radius: 50%; } .ih.c .info { position: absolute; top: 0; bottom: 0; left: 0; right: 0; text-align: center; border-radius: 50%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .ih.c.e1 .spinner { width: 230px; height: 230px; border: 10px solid #ecab18; border-right-color: #1ad280; border-bottom-color: #1ad280; border-radius: 50%; -webkit-transition: all 0.8s ease-in-out; -moz-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } .ih.c.e1 .img { position: absolute; top: 10px; bottom: 0; left: 10px; right: 0; width: auto; height: auto; } .ih.c.e1 .img:before { display: none; } .ih.c.e1.colored .info { background: #1a4a72; background: rgba(26, 74, 114, 0.6); } .ih.c.e1 .info { top: 10px; bottom: 0; left: 10px; right: 0; background: #333333; background: rgba(0, 0, 0, 0.6); opacity: 0; -webkit-transition: all 0.8s ease-in-out; -moz-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } .ih.c.e1 .info h3 { color: #fff; text-transform: uppercase; position: relative; letter-spacing: 2px; font-size: 22px; margin: 0 30px; padding: 55px 0 0 0; height: 110px; text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3); } .ih.c.e1 .info p { color: #bbb; padding: 10px 5px; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255, 255, 255, 0.5); } .ih.c.e1 a:hover .spinner { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .ih.c.e1 a:hover .info { opacity: 1; } .ih.c.e2 .img { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .ih.c.e2.colored .info { background: #1a4a72; background: rgba(26, 74, 114, 0.6); } .ih.c.e2 .info { background: #333333; background: rgba(0, 0, 0, 0.6); opacity: 0; pointer-events: none; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .ih.c.e2 .info h3 { color: #fff; text-transform: uppercase; position: relative; letter-spacing: 2px; font-size: 22px; margin: 0 30px; padding: 55px 0 0 0; height: 110px; text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3); } .ih.c.e2 .info p { color: #bbb; padding: 10px 5px; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255, 255, 255, 0.5); } .ih.c.e2.left_to_right .info { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } .ih.c.e2.left_to_right a:hover .img { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); } .ih.c.e2.left_to_right a:hover .info { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .ih.c.e2.right_to_left .info { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } .ih.c.e2.right_to_left a:hover .img { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .ih.c.e2.right_to_left a:hover .info { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .ih.c.e2.top_to_bottom .info { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } .ih.c.e2.top_to_bottom a:hover .img { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); } .ih.c.e2.top_to_bottom a:hover .info { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .ih.c.e2.bottom_to_top .info { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } .ih.c.e2.bottom_to_top a:hover .img { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .ih.c.e2.bottom_to_top a:hover .info { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .ih.c.e3 .img { z-index: 11; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .ih.c.e3.colored .info { background: #1a4a72; } .ih.c.e3 .info { background: #333333; opacity: 0; pointer-events: none; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .ih.c.e3 .info h3 { color: #fff; text-transform: uppercase; position: relative; letter-spacing: 2px; font-size: 22px; margin: 0 30px; padding: 55px 0 0 0; height: 110px; text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3); } .ih.c.e3 .info p { color: #bbb; padding: 10px 5px; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255, 255, 255, 0.5); } .ih.c.e3.left_to_right .img { -webkit-transform: scale(1) translateX(0); -moz-transform: scale(1) translateX(0); -ms-transform: scale(1) translateX(0); -o-transform: scale(1) translateX(0); transform: scale(1) translateX(0); } .ih.c.e3.left_to_right .info { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } .ih.c.e3.left_to_right a:hover .img { -webkit-transform: scale(0.5) translateX(100%); -moz-transform: scale(0.5) translateX(100%); -ms-transform: scale(0.5) translateX(100%); -o-transform: scale(0.5) translateX(100%); transform: scale(0.5) translateX(100%); } .ih.c.e3.left_to_right a:hover .info { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .ih.c.e3.right_to_left .img { -webkit-transform: scale(1) translateX(0); -moz-transform: scale(1) translateX(0); -ms-transform: scale(1) translateX(0); -o-transform: scale(1) translateX(0); transform: scale(1) translateX(0); } .ih.c.e3.right_to_left .info { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } .ih.c.e3.right_to_left a:hover .img { -webkit-transform: scale(0.5) translateX(-100%); -moz-transform: scale(0.5) translateX(-100%); -ms-transform: scale(0.5) translateX(-100%); -o-transform: scale(0.5) translateX(-100%); transform: scale(0.5) translateX(-100%); } .ih.c.e3.right_to_left a:hover .info { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .ih.c.e3.top_to_bottom .img { -webkit-transform: scale(1) translateY(0); -moz-transform: scale(1) translateY(0); -ms-transform: scale(1) translateY(0); -o-transform: scale(1) translateY(0); transform: scale(1) translateY(0); } .ih.c.e3.top_to_bottom .info { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } .ih.c.e3.top_to_bottom a:hover .img { -webkit-transform: scale(0.5) translateY(100%); -moz-transform: scale(0.5) translateY(100%); -ms-transform: scale(0.5) translateY(100%); -o-transform: scale(0.5) translateY(100%); transform: scale(0.5) translateY(100%); } .ih.c.e3.top_to_bottom a:hover .info { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .ih.c.e3.bottom_to_top .img { -webkit-transform: scale(1) translateY(0); -moz-transform: scale(1) translateY(0); -ms-transform: scale(1) translateY(0); -o-transform: scale(1) translateY(0); transform: scale(1) translateY(0); } .ih.c.e3.bottom_to_top .info { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } .ih.c.e3.bottom_to_top a:hover .img { -webkit-transform: scale(0.5) translateY(-100%); -moz-transform: scale(0.5) translateY(-100%); -ms-transform: scale(0.5) translateY(-100%); -o-transform: scale(0.5) translateY(-100%); transform: scale(0.5) translateY(-100%); } .ih.c.e3.bottom_to_top a:hover .info { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .ih.c.e4 .img { opacity: 1; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .ih.c.e4.colored .info { background: #1a4a72; } .ih.c.e4 .info { background: #333333; opacity: 0; visibility: hidden; pointer-events: none; -webkit-transition: all 0.35s ease; -moz-transition: all 0.35s ease; transition: all 0.35s ease; } .ih.c.e4 .info h3 { color: #fff; text-transform: uppercase; position: relative; letter-spacing: 2px; font-size: 22px; margin: 0 30px; padding: 55px 0 0 0; height: 110px; text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3); } .ih.c.e4 .info p { color: #bbb; padding: 10px 5px; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255, 255, 255, 0.5); -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .ih.c.e4 a:hover .img { opacity: 0; pointer-events: none; } .ih.c.e4 a:hover .info { visibility: visible; opacity: 1; } .ih.c.e4.left_to_right .img { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .ih.c.e4.left_to_right .info { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } .ih.c.e4.left_to_right a:hover .img { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } .ih.c.e4.left_to_right a:hover .info { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .ih.c.e4.right_to_left .img { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .ih.c.e4.right_to_left .info { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } .ih.c.e4.right_to_left a:hover .img { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } .ih.c.e4.right_to_left a:hover .info { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .ih.c.e4.top_to_bottom .img { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .ih.c.e4.top_to_bottom .info { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } .ih.c.e4.top_to_bottom a:hover .img { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } .ih.c.e4.top_to_bottom a:hover .info { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .ih.c.e4.bottom_to_top .img { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .ih.c.e4.bottom_to_top .info { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } .ih.c.e4.bottom_to_top a:hover .img { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } .ih.c.e4.bottom_to_top a:hover .info { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .ih.c.e5 { -webkit-perspective: 900px; -moz-perspective: 900px; perspective: 900px; } .ih.c.e5.colored .info .info-back { background: #1a4a72; background: rgba(26, 74, 114, 0.6); } .ih.c.e5 .info { -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .ih.c.e5 .info .info-back { visibility: hidden; border-radius: 50%; width: 100%; height: 100%; background: #333333; background: rgba(0, 0, 0, 0.6); -webkit-transform: rotate3d(0, 1, 0, 180deg); -moz-transform: rotate3d(0, 1, 0, 180deg); -ms-transform: rotate3d(0, 1, 0, 180deg); -o-transform: rotate3d(0, 1, 0, 180deg); transform: rotate3d(0, 1, 0, 180deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .ih.c.e5 .info h3 { color: #fff; text-transform: uppercase; position: relative; letter-spacing: 2px; font-size: 22px; margin: 0 30px; padding: 55px 0 0 0; height: 110px; text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3); } .ih.c.e5 .info p { color: #bbb; padding: 10px 5px; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255, 255, 255, 0.5); } .ih.c.e5 a:hover .info { -webkit-transform: rotate3d(0, 1, 0, -180deg); -moz-transform: rotate3d(0, 1, 0, -180deg); -ms-transform: rotate3d(0, 1, 0, -180deg); -o-transform: rotate3d(0, 1, 0, -180deg); transform: rotate3d(0, 1, 0, -180deg); } .ih.c.e5 a:hover .info .info-back { visibility: visible; } .ih.c.e6 .img { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .ih.c.e6.colored .info { background: #1a4a72; } .ih.c.e6 .info { background: #333333; opacity: 0; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .ih.c.e6 .info h3 { color: #fff; text-transform: uppercase; position: relative; letter-spacing: 2px; font-size: 22px; margin: 0 30px; padding: 55px 0 0 0; height: 110px; text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3); } .ih.c.e6 .info p { color: #bbb; padding: 10px 5px; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255, 255, 255, 0.5); } .ih.c.e6.scale_up .info { -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); } .ih.c.e6.scale_up a:hover .img { opacity: 0; -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); } .ih.c.e6.scale_up a:hover .info { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .ih.c.e6.scale_down .info { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); } .ih.c.e6.scale_down a:hover .img { opacity: 0; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); } .ih.c.e6.scale_down a:hover .info { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .ih.c.e6.scale_down_up .info { -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); -webkit-transition: all 0.35s ease-in-out 0.2s; -moz-transition: all 0.35s ease-in-out 0.2s; transition: all 0.35s ease-in-out 0.2s; } .ih.c.e6.scale_down_up a:hover .img { opacity: 0; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); } .ih.c.e6.scale_down_up a:hover .info { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .ih.c.e7 .img { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: all 0.35s ease-out; -moz-transition: all 0.35s ease-out; transition: all 0.35s ease-out; } .ih.c.e7.colored .info { background: #1a4a72; } .ih.c.e7 .info { background: #333333; opacity: 0; visibility: hidden; pointer-events: none; -webkit-transition: all 0.35s ease 0.2s; -moz-transition: all 0.35s ease 0.2s; transition: all 0.35s ease 0.2s; } .ih.c.e7 .info h3 { color: #fff; text-transform: uppercase; position: relative; letter-spacing: 2px; font-size: 22px; margin: 0 30px; padding: 55px 0 0 0; height: 110px; text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3); } .ih.c.e7 .info p { color: #bbb; padding: 10px 5px; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255, 255, 255, 0.5); } .ih.c.e7 a:hover .img { opacity: 0; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); } .ih.c.e7 a:hover .info { visibility: visible; opacity: 1; } .ih.c.e7.left_to_right .info { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } .ih.c.e7.left_to_right a:hover .info { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .ih.c.e7.right_to_left .info { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } .ih.c.e7.right_to_left a:hover .info { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .ih.c.e7.top_to_bottom .info { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } .ih.c.e7.top_to_bottom a:hover .info { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .ih.c.e7.bottom_to_top .info { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } .ih.c.e7.bottom_to_top a:hover .info { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .ih.c.e8.colored .info { background: #1a4a72; } .ih.c.e8 .img-container { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .ih.c.e8 .img-container .img { opacity: 1; -webkit-transition: all 0.3s ease-in-out 0.3s; -moz-transition: all 0.3s ease-in-out 0.3s; transition: all 0.3s ease-in-out 0.3s; } .ih.c.e8 .info-container { position: absolute; top: 0; bottom: 0; left: 0; right: 0; text-align: center; border-radius: 50%; opacity: 0; pointer-events: none; -webkit-transition: all 0.3s ease-in-out 0.3s; -moz-transition: all 0.3s ease-in-out 0.3s; transition: all 0.3s ease-in-out 0.3s; } .ih.c.e8 .info { width: 100%; height: 100%; background: #333333; pointer-events: none; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); -webkit-transition: all 0.35s ease-in-out 0.6s; -moz-transition: all 0.35s ease-in-out 0.6s; transition: all 0.35s ease-in-out 0.6s; } .ih.c.e8 .info h3 { color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 22px; margin: 0 30px; padding: 45px 0 0 0; height: 140px; text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3); } .ih.c.e8 .info p { color: #bbb; padding: 10px 5px; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255, 255, 255, 0.5); } .ih.c.e8 a:hover .img-container { pointer-events: none; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); } .ih.c.e8 a:hover .img-container .img { opacity: 0; pointer-events: none; } .ih.c.e8 a:hover .info-container { opacity: 1; } .ih.c.e8 a:hover .info-container .info { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .ih.c.e8.left_to_right .img-container .img { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .ih.c.e8.left_to_right .info-container { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } .ih.c.e8.left_to_right a:hover .img-container .img { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } .ih.c.e8.left_to_right a:hover .info-container { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .ih.c.e8.right_to_left .img-container .img { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .ih.c.e8.right_to_left .info-container { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } .ih.c.e8.right_to_left a:hover .img-container .img { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } .ih.c.e8.right_to_left a:hover .info-container { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .ih.c.e8.top_to_bottom .img-container .img { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .ih.c.e8.top_to_bottom .info-container { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } .ih.c.e8.top_to_bottom a:hover .img-container .img { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } .ih.c.e8.top_to_bottom a:hover .info-container { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .ih.c.e8.bottom_to_top .img-container .img { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .ih.c.e8.bottom_to_top .info-container { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } .ih.c.e8.bottom_to_top a:hover .img-container .img { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } .ih.c.e8.bottom_to_top a:hover .info-container { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .ih.c.e9 .img { opacity: 1; -webkit-transition: all 0.35s ease-out; -moz-transition: all 0.35s ease-out; transition: all 0.35s ease-out; } .ih.c.e9.colored .info { background: #1a4a72; } .ih.c.e9 .info { background: #333333; opacity: 0; visibility: hidden; pointer-events: none; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); -webkit-transition: all 0.35s ease 0.2s; -moz-transition: all 0.35s ease 0.2s; transition: all 0.35s ease 0.2s; } .ih.c.e9 .info h3 { color: #fff; text-transform: uppercase; position: relative; letter-spacing: 2px; font-size: 22px; margin: 0 30px; padding: 55px 0 0 0; height: 110px; text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3); } .ih.c.e9 .info p { color: #bbb; padding: 10px 5px; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255, 255, 255, 0.5); } .ih.c.e9 a:hover .img { opacity: 0; pointer-events: none; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); } .ih.c.e9 a:hover .info { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .ih.c.e9.left_to_right .img { -webkit-transform: translateX(0) rotate(0); -moz-transform: translateX(0) rotate(0); -ms-transform: translateX(0) rotate(0); -o-transform: translateX(0) rotate(0); transform: translateX(0) rotate(0); } .ih.c.e9.left_to_right a:hover .img { -webkit-transform: translateX(100%) rotate(180deg); -moz-transform: translateX(100%) rotate(180deg); -ms-transform: translateX(100%) rotate(180deg); -o-transform: translateX(100%) rotate(180deg); transform: translateX(100%) rotate(180deg); } .ih.c.e9.right_to_left .img { -webkit-transform: translateX(0) rotate(0); -moz-transform: translateX(0) rotate(0); -ms-transform: translateX(0) rotate(0); -o-transform: translateX(0) rotate(0); transform: translateX(0) rotate(0); } .ih.c.e9.right_to_left a:hover .img { -webkit-transform: translateX(-100%) rotate(-180deg); -moz-transform: translateX(-100%) rotate(-180deg); -ms-transform: translateX(-100%) rotate(-180deg); -o-transform: translateX(-100%) rotate(-180deg); transform: translateX(-100%) rotate(-180deg); } .ih.c.e9.top_to_bottom .img { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .ih.c.e9.top_to_bottom a:hover .img { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } .ih.c.e9.bottom_to_top .img { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .ih.c.e9.bottom_to_top a:hover .img { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } .ih.c.e10 .img { z-index: 11; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .ih.c.e10.colored .info { background: #1a4a72; } .ih.c.e10 .info { background: #333333; opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .ih.c.e10 .info h3 { color: #fff; text-transform: uppercase; position: relative; letter-spacing: 2px; font-size: 22px; text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3); } .ih.c.e10 .info p { color: #bbb; font-style: italic; font-size: 12px; border-top: 1px solid rgba(255, 255, 255, 0.5); } .ih.c.e10 a:hover .info { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .ih.c.e10.top_to_bottom .info h3 { margin: 0 30px; padding: 25px 0 0 0; height: 78px; } .ih.c.e10.top_to_bottom .info p { margin: 0 30px; padding: 5px; } .ih.c.e10.top_to_bottom a:hover .img { -webkit-transform: translateY(50px) scale(0.5); -moz-transform: translateY(50px) scale(0.5); -ms-transform: translateY(50px) scale(0.5); -o-transform: translateY(50px) scale(0.5); transform: translateY(50px) scale(0.5); } .ih.c.e10.bottom_to_top .info h3 { margin: 95px 30px 0; padding: 25px 0 0 0; height: 78px; } .ih.c.e10.bottom_to_top .info p { margin: 0 30px; padding: 5px; } .ih.c.e10.bottom_to_top a:hover .img { -webkit-transform: translateY(-50px) scale(0.5); -moz-transform: translateY(-50px) scale(0.5); -ms-transform: translateY(-50px) scale(0.5); -o-transform: translateY(-50px) scale(0.5); transform: translateY(-50px) scale(0.5); } .ih.c.e11 { -webkit-perspective: 900px; -moz-perspective: 900px; perspective: 900px; } .ih.c.e11 .img { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .ih.c.e11.colored .info { background: #1a4a72; } .ih.c.e11 .info { background: #333333; opacity: 0; visibility: hidden; -webkit-transition: all 0.35s ease 0.35s; -moz-transition: all 0.35s ease 0.35s; transition: all 0.35s ease 0.35s; } .ih.c.e11 .info h3 { color: #fff; text-transform: uppercase; position: relative; letter-spacing: 2px; font-size: 22px; margin: 0 30px; padding: 55px 0 0 0; height: 110px; text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3); } .ih.c.e11 .info p { color: #bbb; padding: 10px 5px; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255, 255, 255, 0.5); } .ih.c.e11 a:hover .img { opacity: 0; } .ih.c.e11 a:hover .info { visibility: visible; opacity: 1; } .ih.c.e11.left_to_right .img { -webkit-transform: translateZ(0) rotateY(0); -moz-transform: translateZ(0) rotateY(0); -ms-transform: translateZ(0) rotateY(0); -o-transform: translateZ(0) rotateY(0); transform: translateZ(0) rotateY(0); } .ih.c.e11.left_to_right .info { -webkit-transform: translateZ(-1000px) rotateY(-90deg); -moz-transform: translateZ(-1000px) rotateY(-90deg); -ms-transform: translateZ(-1000px) rotateY(-90deg); -o-transform: translateZ(-1000px) rotateY(-90deg); transform: translateZ(-1000px) rotateY(-90deg); } .ih.c.e11.left_to_right a:hover .img { -webkit-transform: translateZ(-1000px) rotateY(90deg); -moz-transform: translateZ(-1000px) rotateY(90deg); -ms-transform: translateZ(-1000px) rotateY(90deg); -o-transform: translateZ(-1000px) rotateY(90deg); transform: translateZ(-1000px) rotateY(90deg); } .ih.c.e11.left_to_right a:hover .info { -webkit-transform: translateZ(0) rotateY(0); -moz-transform: translateZ(0) rotateY(0); -ms-transform: translateZ(0) rotateY(0); -o-transform: translateZ(0) rotateY(0); transform: translateZ(0) rotateY(0); } .ih.c.e11.right_to_left .img { -webkit-transform: translateZ(0) rotateY(0); -moz-transform: translateZ(0) rotateY(0); -ms-transform: translateZ(0) rotateY(0); -o-transform: translateZ(0) rotateY(0); transform: translateZ(0) rotateY(0); } .ih.c.e11.right_to_left .info { -webkit-transform: translateZ(-1000px) rotateY(90deg); -moz-transform: translateZ(-1000px) rotateY(90deg); -ms-transform: translateZ(-1000px) rotateY(90deg); -o-transform: translateZ(-1000px) rotateY(90deg); transform: translateZ(-1000px) rotateY(90deg); } .ih.c.e11.right_to_left a:hover .img { -webkit-transform: translateZ(-1000px) rotateY(-90deg); -moz-transform: translateZ(-1000px) rotateY(-90deg); -ms-transform: translateZ(-1000px) rotateY(-90deg); -o-transform: translateZ(-1000px) rotateY(-90deg); transform: translateZ(-1000px) rotateY(-90deg); } .ih.c.e11.right_to_left a:hover .info { -webkit-transform: translateZ(0) rotateY(0); -moz-transform: translateZ(0) rotateY(0); -ms-transform: translateZ(0) rotateY(0); -o-transform: translateZ(0) rotateY(0); transform: translateZ(0) rotateY(0); } .ih.c.e11.top_to_bottom .img { -webkit-transform: translateZ(0) rotateX(0); -moz-transform: translateZ(0) rotateX(0); -ms-transform: translateZ(0) rotateX(0); -o-transform: translateZ(0) rotateX(0); transform: translateZ(0) rotateX(0); } .ih.c.e11.top_to_bottom .info { -webkit-transform: translateZ(-1000px) rotateX(90deg); -moz-transform: translateZ(-1000px) rotateX(90deg); -ms-transform: translateZ(-1000px) rotateX(90deg); -o-transform: translateZ(-1000px) rotateX(90deg); transform: translateZ(-1000px) rotateX(90deg); } .ih.c.e11.top_to_bottom a:hover .img { -webkit-transform: translateZ(-1000px) rotateX(-90deg); -moz-transform: translateZ(-1000px) rotateX(-90deg); -ms-transform: translateZ(-1000px) rotateX(-90deg); -o-transform: translateZ(-1000px) rotateX(-90deg); transform: translateZ(-1000px) rotateX(-90deg); } .ih.c.e11.top_to_bottom a:hover .info { -webkit-transform: translateZ(0) rotateX(0); -moz-transform: translateZ(0) rotateX(0); -ms-transform: translateZ(0) rotateX(0); -o-transform: translateZ(0) rotateX(0); transform: translateZ(0) rotateX(0); } .ih.c.e11.bottom_to_top .img { -webkit-transform: translateZ(0) rotateX(0); -moz-transform: translateZ(0) rotateX(0); -ms-transform: translateZ(0) rotateX(0); -o-transform: translateZ(0) rotateX(0); transform: translateZ(0) rotateX(0); } .ih.c.e11.bottom_to_top .info { -webkit-transform: translateZ(-1000px) rotateX(-90deg); -moz-transform: translateZ(-1000px) rotateX(-90deg); -ms-transform: translateZ(-1000px) rotateX(-90deg); -o-transform: translateZ(-1000px) rotateX(-90deg); transform: translateZ(-1000px) rotateX(-90deg); } .ih.c.e11.bottom_to_top a:hover .img { -webkit-transform: translateZ(-1000px) rotateX(90deg); -moz-transform: translateZ(-1000px) rotateX(90deg); -ms-transform: translateZ(-1000px) rotateX(90deg); -o-transform: translateZ(-1000px) rotateX(90deg); transform: translateZ(-1000px) rotateX(90deg); } .ih.c.e11.bottom_to_top a:hover .info { -webkit-transform: translateZ(0) rotateX(0); -moz-transform: translateZ(0) rotateX(0); -ms-transform: translateZ(0) rotateX(0); -o-transform: translateZ(0) rotateX(0); transform: translateZ(0) rotateX(0); } .ih.c.e12 .img { opacity: 1; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .ih.c.e12.colored .info { background: #1a4a72; } .ih.c.e12 .info { background: #333333; opacity: 0; visibility: hidden; pointer-events: none; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .ih.c.e12 .info h3 { color: #fff; text-transform: uppercase; position: relative; letter-spacing: 2px; font-size: 22px; margin: 0 30px; padding: 55px 0 0 0; height: 110px; text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3); } .ih.c.e12 .info p { color: #bbb; padding: 10px 5px; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255, 255, 255, 0.5); } .ih.c.e12 a:hover .img { opacity: 0; pointer-events: none; } .ih.c.e12 a:hover .info { opacity: 1; visibility: visible; } .ih.c.e12.left_to_right .img { -webkit-transform: translateX(0) rotate(0); -moz-transform: translateX(0) rotate(0); -ms-transform: translateX(0) rotate(0); -o-transform: translateX(0) rotate(0); transform: translateX(0) rotate(0); } .ih.c.e12.left_to_right .info { -webkit-transform: translateX(100%) rotate(180deg); -moz-transform: translateX(100%) rotate(180deg); -ms-transform: translateX(100%) rotate(180deg); -o-transform: translateX(100%) rotate(180deg); transform: translateX(100%) rotate(180deg); } .ih.c.e12.left_to_right a:hover .img { -webkit-transform: translateX(100%) rotate(180deg); -moz-transform: translateX(100%) rotate(180deg); -ms-transform: translateX(100%) rotate(180deg); -o-transform: translateX(100%) rotate(180deg); transform: translateX(100%) rotate(180deg); } .ih.c.e12.left_to_right a:hover .info { -webkit-transform: translateX(0) rotate(0); -moz-transform: translateX(0) rotate(0); -ms-transform: translateX(0) rotate(0); -o-transform: translateX(0) rotate(0); transform: translateX(0) rotate(0); -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; transition-delay: 0.4s; } .ih.c.e12.right_to_left .img { -webkit-transform: translateX(0) rotate(0); -moz-transform: translateX(0) rotate(0); -ms-transform: translateX(0) rotate(0); -o-transform: translateX(0) rotate(0); transform: translateX(0) rotate(0); } .ih.c.e12.right_to_left .info { -webkit-transform: translateX(-100%) rotate(-180deg); -moz-transform: translateX(-100%) rotate(-180deg); -ms-transform: translateX(-100%) rotate(-180deg); -o-transform: translateX(-100%) rotate(-180deg); transform: translateX(-100%) rotate(-180deg); } .ih.c.e12.right_to_left a:hover .img { -webkit-transform: translateX(-100%) rotate(-180deg); -moz-transform: translateX(-100%) rotate(-180deg); -ms-transform: translateX(-100%) rotate(-180deg); -o-transform: translateX(-100%) rotate(-180deg); transform: translateX(-100%) rotate(-180deg); } .ih.c.e12.right_to_left a:hover .info { -webkit-transform: translateX(0) rotate(0); -moz-transform: translateX(0) rotate(0); -ms-transform: translateX(0) rotate(0); -o-transform: translateX(0) rotate(0); transform: translateX(0) rotate(0); -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; transition-delay: 0.4s; } .ih.c.e12.top_to_bottom .img { -webkit-transform: translateY(0) rotate(0); -moz-transform: translateY(0) rotate(0); -ms-transform: translateY(0) rotate(0); -o-transform: translateY(0) rotate(0); transform: translateY(0) rotate(0); } .ih.c.e12.top_to_bottom .info { -webkit-transform: translateY(-100%) rotate(-180deg); -moz-transform: translateY(-100%) rotate(-180deg); -ms-transform: translateY(-100%) rotate(-180deg); -o-transform: translateY(-100%) rotate(-180deg); transform: translateY(-100%) rotate(-180deg); } .ih.c.e12.top_to_bottom a:hover .img { -webkit-transform: translateY(-100%) rotate(-180deg); -moz-transform: translateY(-100%) rotate(-180deg); -ms-transform: translateY(-100%) rotate(-180deg); -o-transform: translateY(-100%) rotate(-180deg); transform: translateY(-100%) rotate(-180deg); } .ih.c.e12.top_to_bottom a:hover .info { -webkit-transform: translateY(0) rotate(0); -moz-transform: translateY(0) rotate(0); -ms-transform: translateY(0) rotate(0); -o-transform: translateY(0) rotate(0); transform: translateY(0) rotate(0); -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; transition-delay: 0.4s; } .ih.c.e12.bottom_to_top .img { -webkit-transform: translateY(0) rotate(0); -moz-transform: translateY(0) rotate(0); -ms-transform: translateY(0) rotate(0); -o-transform: translateY(0) rotate(0); transform: translateY(0) rotate(0); } .ih.c.e12.bottom_to_top .info { -webkit-transform: translateY(100%) rotate(180deg); -moz-transform: translateY(100%) rotate(180deg); -ms-transform: translateY(100%) rotate(180deg); -o-transform: translateY(100%) rotate(180deg); transform: translateY(100%) rotate(180deg); } .ih.c.e12.bottom_to_top a:hover .img { -webkit-transform: translateY(100%) rotate(180deg); -moz-transform: translateY(100%) rotate(180deg); -ms-transform: translateY(100%) rotate(180deg); -o-transform: translateY(100%) rotate(180deg); transform: translateY(100%) rotate(180deg); } .ih.c.e12.bottom_to_top a:hover .info { -webkit-transform: translateY(0) rotate(0); -moz-transform: translateY(0) rotate(0); -ms-transform: translateY(0) rotate(0); -o-transform: translateY(0) rotate(0); transform: translateY(0) rotate(0); -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; transition-delay: 0.4s; } .ih.c.e13.colored .info { background: #1a4a72; background: rgba(26, 74, 114, 0.6); } .ih.c.e13 .info { background: #333333; background: rgba(0, 0, 0, 0.6); opacity: 0; pointer-events: none; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .ih.c.e13 .info h3 { visibility: hidden; color: #fff; text-transform: uppercase; position: relative; letter-spacing: 2px; font-size: 22px; margin: 0 30px; padding: 55px 0 0 0; height: 110px; text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3); -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .ih.c.e13 .info p { visibility: hidden; color: #bbb; padding: 10px 5px; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255, 255, 255, 0.5); -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .ih.c.e13 a:hover .info { opacity: 1; } .ih.c.e13 a:hover h3 { visibility: visible; } .ih.c.e13 a:hover p { visibility: visible; } .ih.c.e13.from_left_and_right .info h3 { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } .ih.c.e13.from_left_and_right .info p { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } .ih.c.e13.from_left_and_right a:hover h3 { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .ih.c.e13.from_left_and_right a:hover p { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .ih.c.e13.top_to_bottom .info h3 { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } .ih.c.e13.top_to_bottom .info p { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } .ih.c.e13.top_to_bottom a:hover h3 { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .ih.c.e13.top_to_bottom a:hover p { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .ih.c.e13.bottom_to_top .info h3 { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } .ih.c.e13.bottom_to_top .info p { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } .ih.c.e13.bottom_to_top a:hover h3 { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .ih.c.e13.bottom_to_top a:hover p { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .ih.c.e14 { -webkit-perspective: 900px; -moz-perspective: 900px; perspective: 900px; } .ih.c.e14 .img { visibility: visible; opacity: 1; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .ih.c.e14.colored .info { background: #1a4a72; } .ih.c.e14 .info { background: #333333; opacity: 0; visibility: hidden; -webkit-transition: all 0.35s ease-in-out 0.3s; -moz-transition: all 0.35s ease-in-out 0.3s; transition: all 0.35s ease-in-out 0.3s; } .ih.c.e14 .info h3 { color: #fff; text-transform: uppercase; position: relative; letter-spacing: 2px; font-size: 22px; margin: 0 30px; padding: 55px 0 0 0; height: 110px; text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3); } .ih.c.e14 .info p { color: #bbb; padding: 10px 5px; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255, 255, 255, 0.5); } .ih.c.e14 a:hover .img { opacity: 0; visibility: hidden; } .ih.c.e14 a:hover .info { visibility: visible; opacity: 1; } .ih.c.e14.left_to_right .img { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); -ms-transform: rotateY(0); -o-transform: rotateY(0); transform: rotateY(0); -webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50%; } .ih.c.e14.left_to_right .info { -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; } .ih.c.e14.left_to_right a:hover .img { -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); transform: rotateY(-90deg); } .ih.c.e14.left_to_right a:hover .info { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); -ms-transform: rotateY(0); -o-transform: rotateY(0); transform: rotateY(0); } .ih.c.e14.right_to_left .img { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); -ms-transform: rotateY(0); -o-transform: rotateY(0); transform: rotateY(0); -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; } .ih.c.e14.right_to_left .info { -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); transform: rotateY(-90deg); -webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50%; } .ih.c.e14.right_to_left a:hover .img { -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); } .ih.c.e14.right_to_left a:hover .info { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); -ms-transform: rotateY(0); -o-transform: rotateY(0); transform: rotateY(0); } .ih.c.e14.top_to_bottom .img { -webkit-transform: rotateX(0); -moz-transform: rotateX(0); -ms-transform: rotateX(0); -o-transform: rotateX(0); transform: rotateX(0); -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; } .ih.c.e14.top_to_bottom .info { -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; -ms-transform-origin: 50% 0; -o-transform-origin: 50% 0; transform-origin: 50% 0; } .ih.c.e14.top_to_bottom a:hover .img { -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); -o-transform: rotateX(90deg); transform: rotateX(90deg); } .ih.c.e14.top_to_bottom a:hover .info { -webkit-transform: rotateX(0); -moz-transform: rotateX(0); -ms-transform: rotateX(0); -o-transform: rotateX(0); transform: rotateX(0); } .ih.c.e14.bottom_to_top .img { -webkit-transform: rotateX(0); -moz-transform: rotateX(0); -ms-transform: rotateX(0); -o-transform: rotateX(0); transform: rotateX(0); -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; -ms-transform-origin: 50% 0; -o-transform-origin: 50% 0; transform-origin: 50% 0; } .ih.c.e14.bottom_to_top .info { -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); -o-transform: rotateX(90deg); transform: rotateX(90deg); -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; } .ih.c.e14.bottom_to_top a:hover .img { -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg); } .ih.c.e14.bottom_to_top a:hover .info { -webkit-transform: rotateX(0); -moz-transform: rotateX(0); -ms-transform: rotateX(0); -o-transform: rotateX(0); transform: rotateX(0); } .ih.c.e15 .img { opacity: 1; visibility: visible; -webkit-transform: scale(1) rotate(0); -moz-transform: scale(1) rotate(0); -ms-transform: scale(1) rotate(0); -o-transform: scale(1) rotate(0); transform: scale(1) rotate(0); -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .ih.c.e15.colored .info { background: #1a4a72; } .ih.c.e15 .info { background: #333333; opacity: 0; visibility: hidden; -webkit-transform: scale(0.5) rotate(-720deg); -moz-transform: scale(0.5) rotate(-720deg); -ms-transform: scale(0.5) rotate(-720deg); -o-transform: scale(0.5) rotate(-720deg); transform: scale(0.5) rotate(-720deg); -webkit-transition: all 0.35s ease-in-out 0.3s; -moz-transition: all 0.35s ease-in-out 0.3s; transition: all 0.35s ease-in-out 0.3s; } .ih.c.e15 .info h3 { color: #fff; text-transform: uppercase; position: relative; letter-spacing: 2px; font-size: 22px; margin: 0 30px; padding: 55px 0 0 0; height: 110px; text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3); } .ih.c.e15 .info p { color: #bbb; padding: 10px 5px; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255, 255, 255, 0.5); } .ih.c.e15 a:hover .img { opacity: 0; visibility: hidden; -webkit-transform: scale(0.5) rotate(720deg); -moz-transform: scale(0.5) rotate(720deg); -ms-transform: scale(0.5) rotate(720deg); -o-transform: scale(0.5) rotate(720deg); transform: scale(0.5) rotate(720deg); } .ih.c.e15 a:hover .info { opacity: 1; visibility: visible; -webkit-transform: scale(1) rotate(0); -moz-transform: scale(1) rotate(0); -ms-transform: scale(1) rotate(0); -o-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } .ih.c.e16 .img { z-index: 11; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .ih.c.e16.colored .info { background: #1a4a72; } .ih.c.e16 .info { background: #333333; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .ih.c.e16 .info h3 { color: #fff; text-transform: uppercase; position: relative; letter-spacing: 2px; font-size: 22px; margin: 0 30px; padding: 55px 0 0 0; height: 110px; text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3); } .ih.c.e16 .info p { color: #bbb; padding: 10px 5px; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255, 255, 255, 0.5); -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .ih.c.e16.left_to_right .img { -webkit-transform-origin: 95% 40%; -moz-transform-origin: 95% 40%; -ms-transform-origin: 95% 40%; -o-transform-origin: 95% 40%; transform-origin: 95% 40%; } .ih.c.e16.left_to_right .img:after { content: ''; width: 8px; height: 8px; position: absolute; border-radius: 50%; top: 40%; left: 95%; margin: -4px 0 0 -4px; background: rgba(0, 0, 0, 0.8); box-shadow: 0 0 1px rgba(255, 255, 255, 0.9); } .ih.c.e16.left_to_right a:hover .img { -webkit-transform: rotate(-120deg); -moz-transform: rotate(-120deg); -ms-transform: rotate(-120deg); -o-transform: rotate(-120deg); transform: rotate(-120deg); } .ih.c.e16.right_to_left .img { -webkit-transform-origin: 5% 40%; -moz-transform-origin: 5% 40%; -ms-transform-origin: 5% 40%; -o-transform-origin: 5% 40%; transform-origin: 5% 40%; } .ih.c.e16.right_to_left .img:after { content: ''; width: 8px; height: 8px; position: absolute; border-radius: 50%; top: 40%; left: 5%; margin: -4px 0 0 -4px; background: rgba(0, 0, 0, 0.8); box-shadow: 0 0 1px rgba(255, 255, 255, 0.9); } .ih.c.e16.right_to_left a:hover .img { -webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); -ms-transform: rotate(120deg); -o-transform: rotate(120deg); transform: rotate(120deg); } .ih.c.e17 .info { opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .ih.c.e17 .info h3 { color: #fff; text-transform: uppercase; position: relative; letter-spacing: 2px; font-size: 22px; margin: 0 30px; padding: 55px 0 0 0; height: 110px; text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3); } .ih.c.e17 .info p { color: #bbb; padding: 10px 5px; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255, 255, 255, 0.5); opacity: 0; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .ih.c.e17 a:hover .img:before { box-shadow: inset 0 0 0 110px #333333, inset 0 0 0 16px rgba(255, 255, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 0 0 110px rgba(0, 0, 0, 0.6), inset 0 0 0 16px rgba(255, 255, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.1); } .ih.c.e17 a:hover .info { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .ih.c.e17 a:hover .info p { opacity: 1; } .ih.c.e17.colored a:hover .img:before { box-shadow: inset 0 0 0 110px #1a4a72, inset 0 0 0 16px rgba(255, 255, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 0 0 110px rgba(26, 74, 114, 0.6), inset 0 0 0 16px rgba(255, 255, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.1); } .ih.c.e18 { -webkit-perspective: 900px; -moz-perspective: 900px; perspective: 900px; } .ih.c.e18 .img { z-index: 11; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .ih.c.e18.colored .info .info-back { background: #1a4a72; } .ih.c.e18 .info { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .ih.c.e18 .info .info-back { opacity: 1; border-radius: 50%; width: 100%; height: 100%; background: #333333; } .ih.c.e18 .info h3 { color: #fff; text-transform: uppercase; position: relative; letter-spacing: 2px; font-size: 22px; margin: 0 30px; padding: 55px 0 0 0; height: 110px; text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3); } .ih.c.e18 .info p { color: #bbb; padding: 10px 5px; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255, 255, 255, 0.5); } .ih.c.e18.bottom_to_top .img { -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; -ms-transform-origin: 50% 0; -o-transform-origin: 50% 0; transform-origin: 50% 0; } .ih.c.e18.bottom_to_top a:hover .img { -webkit-transform: rotate3d(1, 0, 0, 180deg); -moz-transform: rotate3d(1, 0, 0, 180deg); -ms-transform: rotate3d(1, 0, 0, 180deg); -o-transform: rotate3d(1, 0, 0, 180deg); transform: rotate3d(1, 0, 0, 180deg); } .ih.c.e18.top_to_bottom .img { -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; } .ih.c.e18.top_to_bottom a:hover .img { -webkit-transform: rotate3d(1, 0, 0, -180deg); -moz-transform: rotate3d(1, 0, 0, -180deg); -ms-transform: rotate3d(1, 0, 0, -180deg); -o-transform: rotate3d(1, 0, 0, -180deg); transform: rotate3d(1, 0, 0, -180deg); } .ih.c.e18.left_to_right .img { -webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50%; } .ih.c.e18.left_to_right a:hover .img { -webkit-transform: rotate3d(0, 1, 0, 180deg); -moz-transform: rotate3d(0, 1, 0, 180deg); -ms-transform: rotate3d(0, 1, 0, 180deg); -o-transform: rotate3d(0, 1, 0, 180deg); transform: rotate3d(0, 1, 0, 180deg); } .ih.c.e18.right_to_left .img { -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; } .ih.c.e18.right_to_left a:hover .img { -webkit-transform: rotate3d(0, 1, 0, -180deg); -moz-transform: rotate3d(0, 1, 0, -180deg); -ms-transform: rotate3d(0, 1, 0, -180deg); -o-transform: rotate3d(0, 1, 0, -180deg); transform: rotate3d(0, 1, 0, -180deg); } .ih.c.e19.colored .info { background: #1a4a72; background: rgba(26, 74, 114, 0.6); } .ih.c.e19 .info { background: #333333; background: rgba(0, 0, 0, 0.6); opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .ih.c.e19 .info h3 { color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 22px; margin: 0 30px; padding: 45px 0 0 0; height: 140px; text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3); } .ih.c.e19 .info p { color: #bbb; padding: 10px 5px; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255, 255, 255, 0.5); } .ih.c.e19 a:hover .info { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .ih.c.e20 { -webkit-perspective: 900px; -moz-perspective: 900px; perspective: 900px; } .ih.c.e20 .img { -webkit-transition: all 0.35s linear; -moz-transition: all 0.35s linear; transition: all 0.35s linear; -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; } .ih.c.e20.colored .info .info-back { background: #1a4a72; } .ih.c.e20 .info { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .ih.c.e20 .info .info-back { opacity: 1; visibility: hidden; border-radius: 50%; width: 100%; height: 100%; background: #333333; -webkit-transition: all 0.35s linear; -moz-transition: all 0.35s linear; transition: all 0.35s linear; -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .ih.c.e20 .info h3 { color: #fff; text-transform: uppercase; position: relative; letter-spacing: 2px; font-size: 22px; margin: 0 30px; padding: 55px 0 0 0; height: 110px; text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3); } .ih.c.e20 .info p { color: #bbb; padding: 10px 5px; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255, 255, 255, 0.5); } .ih.c.e20 a:hover .img { opacity: 0; } .ih.c.e20 a:hover .info .info-back { opacity: 1; visibility: visible; } .ih.c.e20.top_to_bottom .info .info-back { -webkit-transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg); -moz-transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg); -ms-transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg); -o-transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg); transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg); } .ih.c.e20.top_to_bottom a:hover .img { -webkit-transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg); -moz-transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg); -ms-transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg); -o-transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg); transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg); } .ih.c.e20.top_to_bottom a:hover .info .info-back { -webkit-transform: rotate3d(1, 0, 0, 0deg); -moz-transform: rotate3d(1, 0, 0, 0deg); -ms-transform: rotate3d(1, 0, 0, 0deg); -o-transform: rotate3d(1, 0, 0, 0deg); transform: rotate3d(1, 0, 0, 0deg); } .ih.c.e20.bottom_to_top .info .info-back { -webkit-transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg); -moz-transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg); -ms-transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg); -o-transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg); transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg); } .ih.c.e20.bottom_to_top a:hover .img { -webkit-transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg); -moz-transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg); -ms-transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg); -o-transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg); transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg); } .ih.c.e20.bottom_to_top a:hover .info .info-back { -webkit-transform: rotate3d(1, 0, 0, 0deg); -moz-transform: rotate3d(1, 0, 0, 0deg); -ms-transform: rotate3d(1, 0, 0, 0deg); -o-transform: rotate3d(1, 0, 0, 0deg); transform: rotate3d(1, 0, 0, 0deg); } .ih.s { position: relative; width: 316px; height: 216px; border: 8px solid #fff; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); } .ih.s .info { position: absolute; top: 0; bottom: 0; left: 0; right: 0; text-align: center; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .ih.s.e1 { overflow: hidden; } .ih.s.e1.colored .info { background: #1a4a72; } .ih.s.e1 .img { z-index: 11; position: absolute; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .ih.s.e1 .info { background: #333333; visibility: hidden; opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .ih.s.e1 a:hover .info { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .ih.s.e1.left_and_right .info h3 { position: absolute; top: 12px; left: 12px; text-transform: uppercase; color: #fff; text-align: center; font-size: 17px; margin: 0; } .ih.s.e1.left_and_right .info p { position: absolute; right: 12px; bottom: 12px; margin: 0; font-style: italic; font-size: 12px; color: #bbb; } .ih.s.e1.left_and_right a:hover .img { -webkit-transform: scale(0.6); -moz-transform: scale(0.6); -ms-transform: scale(0.6); -o-transform: scale(0.6); transform: scale(0.6); } .ih.s.e1.top_to_bottom .info h3 { text-transform: uppercase; color: #fff; text-align: center; font-size: 17px; padding: 10px 10px 0 4px; margin: 10px 0 0 0; } .ih.s.e1.top_to_bottom .info p { font-style: italic; font-size: 12px; color: #bbb; padding: 5px; text-align: center; } .ih.s.e1.top_to_bottom a:hover .img { -webkit-transform: translateY(30px) scale(0.6); -moz-transform: translateY(30px) scale(0.6); -ms-transform: translateY(30px) scale(0.6); -o-transform: translateY(30px) scale(0.6); transform: translateY(30px) scale(0.6); } .ih.s.e1.bottom_to_top .info h3 { text-transform: uppercase; color: #fff; text-align: center; font-size: 17px; padding: 10px 10px 0 4px; margin: 134px 0 0 0; } .ih.s.e1.bottom_to_top .info p { font-style: italic; font-size: 12px; color: #bbb; padding: 5px; text-align: center; } .ih.s.e1.bottom_to_top a:hover .img { -webkit-transform: translateY(-30px) scale(0.6); -moz-transform: translateY(-30px) scale(0.6); -ms-transform: translateY(-30px) scale(0.6); -o-transform: translateY(-30px) scale(0.6); transform: translateY(-30px) scale(0.6); } .ih.s.e2 { overflow: hidden; } .ih.s.e2.colored .info { background: #1a4a72; } .ih.s.e2.colored .info h3 { background: rgba(12, 34, 52, 0.6); } .ih.s.e2 .img { opacity: 1; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -webkit-transform: rotate(0deg) scale(1); -moz-transform: rotate(0deg) scale(1); -ms-transform: rotate(0deg) scale(1); -o-transform: rotate(0deg) scale(1); transform: rotate(0deg) scale(1); } .ih.s.e2 .info { background: #333333; visibility: hidden; -webkit-transition: all 0.35s 0.3s ease-in-out; -moz-transition: all 0.35s 0.3s ease-in-out; transition: all 0.35s 0.3s ease-in-out; } .ih.s.e2 .info h3 { text-transform: uppercase; color: #fff; text-align: center; font-size: 17px; padding: 10px; background: #111111; margin: 30px 0 0 0; -webkit-transform: translateY(-200px); -moz-transform: translateY(-200px); -ms-transform: translateY(-200px); -o-transform: translateY(-200px); transform: translateY(-200px); -webkit-transition: all 0.35s 0.6s ease-in-out; -moz-transition: all 0.35s 0.6s ease-in-out; transition: all 0.35s 0.6s ease-in-out; } .ih.s.e2 .info p { font-style: italic; font-size: 12px; position: relative; color: #bbb; padding: 20px 20px 20px; text-align: center; -webkit-transform: translateY(-200px); -moz-transform: translateY(-200px); -ms-transform: translateY(-200px); -o-transform: translateY(-200px); transform: translateY(-200px); -webkit-transition: all 0.35s 0.5s linear; -moz-transition: all 0.35s 0.5s linear; transition: all 0.35s 0.5s linear; } .ih.s.e2 a:hover .img { -webkit-transform: rotate(720deg) scale(0); -moz-transform: rotate(720deg) scale(0); -ms-transform: rotate(720deg) scale(0); -o-transform: rotate(720deg) scale(0); transform: rotate(720deg) scale(0); opacity: 0; } .ih.s.e2 a:hover .info { visibility: visible; } .ih.s.e2 a:hover .info h3, .ih.s.e2 a:hover .info p { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .ih.s.e3 { overflow: hidden; } .ih.s.e3.colored .info { background: #1a4a72; } .ih.s.e3 .img { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .ih.s.e3 .info { height: 65px; background: #333333; opacity: 0; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .ih.s.e3 .info h3 { text-transform: uppercase; color: #fff; text-align: center; font-size: 17px; padding: 10px 10px 0 4px; margin: 4px 0 0 0; } .ih.s.e3 .info p { font-style: italic; font-size: 12px; position: relative; color: #bbb; padding: 5px; text-align: center; } .ih.s.e3 a:hover .info { visibility: visible; opacity: 1; } .ih.s.e3.bottom_to_top .info { top: auto; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } .ih.s.e3.bottom_to_top a:hover .img { -webkit-transform: translateY(-50px); -moz-transform: translateY(-50px); -ms-transform: translateY(-50px); -o-transform: translateY(-50px); transform: translateY(-50px); } .ih.s.e3.bottom_to_top a:hover .info { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .ih.s.e3.top_to_bottom .info { bottom: auto; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } .ih.s.e3.top_to_bottom a:hover .img { -webkit-transform: translateY(50px); -moz-transform: translateY(50px); -ms-transform: translateY(50px); -o-transform: translateY(50px); transform: translateY(50px); } .ih.s.e3.top_to_bottom a:hover .info { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .ih.s.e4 { overflow: hidden; position: relative; } .ih.s.e4.colored .info { background: rgba(12, 34, 52, 0.6); } .ih.s.e4.colored .mask1, .ih.s.e4.colored .mask2 { background: #1a4a72; background: rgba(26, 74, 114, 0.6); } .ih.s.e4 .img { -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .ih.s.e4 .mask1, .ih.s.e4 .mask2 { position: absolute; background: #333333; background: rgba(0, 0, 0, 0.6); height: 361px; width: 361px; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .ih.s.e4 .mask1 { left: auto; right: 0; top: 0; -webkit-transform: rotate(56.5deg) translateX(-180px); -moz-transform: rotate(56.5deg) translateX(-180px); -ms-transform: rotate(56.5deg) translateX(-180px); -o-transform: rotate(56.5deg) translateX(-180px); transform: rotate(56.5deg) translateX(-180px); -webkit-transform-origin: 100% 0%; -moz-transform-origin: 100% 0%; -ms-transform-origin: 100% 0%; -o-transform-origin: 100% 0%; transform-origin: 100% 0%; } .ih.s.e4 .mask2 { top: auto; bottom: 0; left: 0; -webkit-transform: rotate(56.5deg) translateX(180px); -moz-transform: rotate(56.5deg) translateX(180px); -ms-transform: rotate(56.5deg) translateX(180px); -o-transform: rotate(56.5deg) translateX(180px); transform: rotate(56.5deg) translateX(180px); -webkit-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; -o-transform-origin: 0% 100%; transform-origin: 0% 100%; } .ih.s.e4 .info { background: #111111; height: 0; visibility: hidden; width: 361px; -webkit-transform: rotate(-33.5deg) translate(-112px, 166px); -moz-transform: rotate(-33.5deg) translate(-112px, 166px); -ms-transform: rotate(-33.5deg) translate(-112px, 166px); -o-transform: rotate(-33.5deg) translate(-112px, 166px); transform: rotate(-33.5deg) translate(-112px, 166px); -webkit-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; -o-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transition: all 0.35s ease-in-out 0.35s; -moz-transition: all 0.35s ease-in-out 0.35s; transition: all 0.35s ease-in-out 0.35s; } .ih.s.e4 .info h3 { text-transform: uppercase; color: #fff; text-align: center; font-size: 17px; padding: 10px; background: transparent; margin-top: 5px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); opacity: 0; -webkit-transition: all 0.35s ease-in-out 0.35s; -moz-transition: all 0.35s ease-in-out 0.35s; transition: all 0.35s ease-in-out 0.35s; } .ih.s.e4 .info p { font-style: italic; font-size: 12px; position: relative; color: #bbb; padding: 20px 20px 20px; text-align: center; opacity: 0; -webkit-transition: all 0.35s ease-in-out 0.35s; -moz-transition: all 0.35s ease-in-out 0.35s; transition: all 0.35s ease-in-out 0.35s; } .ih.s.e4 a:hover .mask1 { -webkit-transform: rotate(56.5deg) translateX(1px); -moz-transform: rotate(56.5deg) translateX(1px); -ms-transform: rotate(56.5deg) translateX(1px); -o-transform: rotate(56.5deg) translateX(1px); transform: rotate(56.5deg) translateX(1px); } .ih.s.e4 a:hover .mask2 { -webkit-transform: rotate(56.5deg) translateX(-1px); -moz-transform: rotate(56.5deg) translateX(-1px); -ms-transform: rotate(56.5deg) translateX(-1px); -o-transform: rotate(56.5deg) translateX(-1px); transform: rotate(56.5deg) translateX(-1px); } .ih.s.e4 a:hover .info { width: 300px; height: 120px; visibility: visible; top: 40px; -webkit-transform: rotate(0deg) translate(0, 0); -moz-transform: rotate(0deg) translate(0, 0); -ms-transform: rotate(0deg) translate(0, 0); -o-transform: rotate(0deg) translate(0, 0); transform: rotate(0deg) translate(0, 0); } .ih.s.e4 a:hover .info h3, .ih.s.e4 a:hover .info p { opacity: 1; } .ih.s.e5.colored .info { background: #1a4a72; } .ih.s.e5.colored .info h3 { background: rgba(12, 34, 52, 0.6); } .ih.s.e5 .img { -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .ih.s.e5 .info { background: #333333; opacity: 0; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .ih.s.e5 .info h3 { text-transform: uppercase; color: #fff; text-align: center; font-size: 17px; padding: 10px; background: #111111; margin: 30px 0 0 0; } .ih.s.e5 .info p { font-style: italic; font-size: 12px; position: relative; color: #bbb; padding: 20px 20px 20px; text-align: center; } .ih.s.e5 a:hover .img { -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transition-delay: 0; -moz-transition-delay: 0; transition-delay: 0; } .ih.s.e5 a:hover .info { visibility: visible; opacity: 1; -webkit-transform: scale(1) rotate(0deg); -moz-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; transition-delay: 0.3s; } .ih.s.e5.left_to_right .info { -webkit-transform: scale(0) rotate(-180deg); -moz-transform: scale(0) rotate(-180deg); -ms-transform: scale(0) rotate(-180deg); -o-transform: scale(0) rotate(-180deg); transform: scale(0) rotate(-180deg); } .ih.s.e5.right_to_left .info { -webkit-transform: scale(0) rotate(180deg); -moz-transform: scale(0) rotate(180deg); -ms-transform: scale(0) rotate(180deg); -o-transform: scale(0) rotate(180deg); transform: scale(0) rotate(180deg); } .ih.s.e6 { overflow: hidden; } .ih.s.e6.colored .info { background: #1a4a72; background: rgba(26, 74, 114, 0.6); } .ih.s.e6.colored .info h3 { background: rgba(12, 34, 52, 0.6); } .ih.s.e6 .img { -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .ih.s.e6 .info { background: #333333; background: rgba(0, 0, 0, 0.6); visibility: hidden; opacity: 0; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .ih.s.e6 .info h3 { text-transform: uppercase; color: #fff; text-align: center; font-size: 17px; padding: 10px; background: #111111; margin: 30px 0 0 0; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .ih.s.e6 .info p { font-style: italic; font-size: 12px; position: relative; color: #bbb; padding: 20px 20px 20px; text-align: center; -webkit-transition: all 0.35s 0.1s linear; -moz-transition: all 0.35s 0.1s linear; transition: all 0.35s 0.1s linear; } .ih.s.e6 a:hover .img { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } .ih.s.e6 a:hover .info { visibility: visible; opacity: 1; } .ih.s.e6.from_top_and_bottom .info h3 { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } .ih.s.e6.from_top_and_bottom .info p { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } .ih.s.e6.from_top_and_bottom a:hover .info h3, .ih.s.e6.from_top_and_bottom a:hover .info p { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .ih.s.e6.from_left_and_right .info h3 { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } .ih.s.e6.from_left_and_right .info p { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } .ih.s.e6.from_left_and_right a:hover .info h3, .ih.s.e6.from_left_and_right a:hover .info p { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .ih.s.e6.top_to_bottom .info h3 { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } .ih.s.e6.top_to_bottom .info p { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } .ih.s.e6.top_to_bottom a:hover .info h3, .ih.s.e6.top_to_bottom a:hover .info p { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .ih.s.e6.bottom_to_top .info h3 { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } .ih.s.e6.bottom_to_top .info p { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } .ih.s.e6.bottom_to_top a:hover .info h3, .ih.s.e6.bottom_to_top a:hover .info p { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .ih.s.e7 { overflow: hidden; } .ih.s.e7.colored .info { background: #1a4a72; background: rgba(26, 74, 114, 0.6); } .ih.s.e7.colored .info h3 { background: rgba(12, 34, 52, 0.6); } .ih.s.e7 .img { -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .ih.s.e7 .info { background: #333333; background: rgba(0, 0, 0, 0.6); visibility: hidden; opacity: 0; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .ih.s.e7 .info h3 { text-transform: uppercase; color: #fff; text-align: center; font-size: 17px; padding: 10px; background: #111111; margin: 30px 0 0 0; -webkit-transform: scale(4); -moz-transform: scale(4); -ms-transform: scale(4); -o-transform: scale(4); transform: scale(4); -webkit-transition: all 0.35s 0.1s ease-in-out; -moz-transition: all 0.35s 0.1s ease-in-out; transition: all 0.35s 0.1s ease-in-out; } .ih.s.e7 .info p { font-style: italic; font-size: 12px; position: relative; color: #bbb; padding: 20px 20px 20px; text-align: center; -webkit-transform: scale(5); -moz-transform: scale(5); -ms-transform: scale(5); -o-transform: scale(5); transform: scale(5); -webkit-transition: all 0.35s 0.3s linear; -moz-transition: all 0.35s 0.3s linear; transition: all 0.35s 0.3s linear; } .ih.s.e7 a:hover .img { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } .ih.s.e7 a:hover .info { visibility: visible; opacity: 1; } .ih.s.e7 a:hover .info h3, .ih.s.e7 a:hover .info p { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .ih.s.e8 { overflow: hidden; } .ih.s.e8.colored .info { background: #1a4a72; } .ih.s.e8.colored .info h3 { background: rgba(12, 34, 52, 0.6); } .ih.s.e8 .img { opacity: 1; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .ih.s.e8 .info { background: #333333; visibility: hidden; opacity: 0; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .ih.s.e8 .info h3 { text-transform: uppercase; color: #fff; text-align: center; font-size: 17px; padding: 10px; background: #111111; margin: 30px 0 0 0; -webkit-transition: all 0.35s 0.1s ease-in-out; -moz-transition: all 0.35s 0.1s ease-in-out; transition: all 0.35s 0.1s ease-in-out; } .ih.s.e8 .info p { font-style: italic; font-size: 12px; position: relative; color: #bbb; padding: 20px 20px 20px; text-align: center; -webkit-transition: all 0.35s 0.15s linear; -moz-transition: all 0.35s 0.15s linear; transition: all 0.35s 0.15s linear; } .ih.s.e8 a:hover .img { opacity: 0; } .ih.s.e8 a:hover .info { visibility: visible; opacity: 1; } .ih.s.e8.scale_up .img { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .ih.s.e8.scale_up .info { -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); } .ih.s.e8.scale_up .info h3, .ih.s.e8.scale_up .info p { -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); } .ih.s.e8.scale_up a:hover .img { -webkit-transform: scale(5); -moz-transform: scale(5); -ms-transform: scale(5); -o-transform: scale(5); transform: scale(5); } .ih.s.e8.scale_up a:hover .info { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .ih.s.e8.scale_up a:hover .info h3, .ih.s.e8.scale_up a:hover .info p { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .ih.s.e8.scale_down .img { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .ih.s.e8.scale_down .info { -webkit-transform: scale(5); -moz-transform: scale(5); -ms-transform: scale(5); -o-transform: scale(5); transform: scale(5); } .ih.s.e8.scale_down .info h3, .ih.s.e8.scale_down .info p { -webkit-transform: scale(5); -moz-transform: scale(5); -ms-transform: scale(5); -o-transform: scale(5); transform: scale(5); } .ih.s.e8.scale_down a:hover .img { -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); } .ih.s.e8.scale_down a:hover .info { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .ih.s.e8.scale_down a:hover .info h3, .ih.s.e8.scale_down a:hover .info p { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .ih.s.e9 { -webkit-perspective: 900px; -moz-perspective: 900px; perspective: 900px; } .ih.s.e9.colored .info .info-back { background: #1a4a72; } .ih.s.e9.colored .info h3 { background: rgba(12, 34, 52, 0.6); } .ih.s.e9 .img { position: relative; z-index: 11; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .ih.s.e9 .info { z-index: 0; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .ih.s.e9 .info .info-back { opacity: 1; width: 100%; height: 100%; padding-top: 30px; background: #333333; } .ih.s.e9 .info h3 { text-transform: uppercase; color: #fff; text-align: center; font-size: 17px; padding: 10px; background: #111111; margin: 0; } .ih.s.e9 .info p { font-style: italic; font-size: 12px; position: relative; color: #bbb; padding: 20px 20px 20px; text-align: center; } .ih.s.e9.left_to_right .img { -webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50%; } .ih.s.e9.left_to_right a:hover .img { -webkit-transform: rotate3d(0, 1, 0, 180deg); -moz-transform: rotate3d(0, 1, 0, 180deg); -ms-transform: rotate3d(0, 1, 0, 180deg); -o-transform: rotate3d(0, 1, 0, 180deg); transform: rotate3d(0, 1, 0, 180deg); } .ih.s.e9.right_to_left .img { -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; } .ih.s.e9.right_to_left a:hover .img { -webkit-transform: rotate3d(0, 1, 0, -180deg); -moz-transform: rotate3d(0, 1, 0, -180deg); -ms-transform: rotate3d(0, 1, 0, -180deg); -o-transform: rotate3d(0, 1, 0, -180deg); transform: rotate3d(0, 1, 0, -180deg); } .ih.s.e9.top_to_bottom .img { -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; } .ih.s.e9.top_to_bottom a:hover .img { -webkit-transform: rotate3d(1, 0, 0, -180deg); -moz-transform: rotate3d(1, 0, 0, -180deg); -ms-transform: rotate3d(1, 0, 0, -180deg); -o-transform: rotate3d(1, 0, 0, -180deg); transform: rotate3d(1, 0, 0, -180deg); } .ih.s.e9.bottom_to_top .img { -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; -ms-transform-origin: 50% 0; -o-transform-origin: 50% 0; transform-origin: 50% 0; } .ih.s.e9.bottom_to_top a:hover .img { -webkit-transform: rotate3d(1, 0, 0, 180deg); -moz-transform: rotate3d(1, 0, 0, 180deg); -ms-transform: rotate3d(1, 0, 0, 180deg); -o-transform: rotate3d(1, 0, 0, 180deg); transform: rotate3d(1, 0, 0, 180deg); } .ih.s.e10 { overflow: hidden; } .ih.s.e10.colored .info { background: #1a4a72; } .ih.s.e10.colored .info h3 { background: rgba(12, 34, 52, 0.6); } .ih.s.e10 .img { -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .ih.s.e10 .info { background: #333333; visibility: hidden; opacity: 0; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .ih.s.e10 .info h3 { text-transform: uppercase; color: #fff; text-align: center; font-size: 17px; padding: 10px; background: #111111; margin: 30px 0 0 0; } .ih.s.e10 .info p { font-style: italic; font-size: 12px; position: relative; color: #bbb; padding: 20px 20px 20px; text-align: center; } .ih.s.e10 a:hover .info { visibility: visible; opacity: 1; } .ih.s.e10.left_to_right .img { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .ih.s.e10.left_to_right .info { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } .ih.s.e10.left_to_right a:hover .img { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } .ih.s.e10.left_to_right a:hover .info { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .ih.s.e10.right_to_left .img { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .ih.s.e10.right_to_left .info { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } .ih.s.e10.right_to_left a:hover .img { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } .ih.s.e10.right_to_left a:hover .info { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .ih.s.e10.top_to_bottom .img { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .ih.s.e10.top_to_bottom .info { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } .ih.s.e10.top_to_bottom a:hover .img { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } .ih.s.e10.top_to_bottom a:hover .info { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .ih.s.e10.bottom_to_top .img { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .ih.s.e10.bottom_to_top .info { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } .ih.s.e10.bottom_to_top a:hover .img { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } .ih.s.e10.bottom_to_top a:hover .info { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .ih.s.e11 { overflow: hidden; } .ih.s.e11.colored .info { background: #1a4a72; } .ih.s.e11.colored .info h3 { background: rgba(12, 34, 52, 0.6); } .ih.s.e11 .img { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .ih.s.e11 .info { background: #333333; visibility: hidden; opacity: 0; -webkit-transition: all 0.35s ease 0.2s; -moz-transition: all 0.35s ease 0.2s; transition: all 0.35s ease 0.2s; } .ih.s.e11 .info h3 { text-transform: uppercase; color: #fff; text-align: center; font-size: 17px; padding: 10px; background: #111111; margin: 30px 0 0 0; } .ih.s.e11 .info p { font-style: italic; font-size: 12px; position: relative; color: #bbb; padding: 20px 20px 20px; text-align: center; } .ih.s.e11 a:hover .img { opacity: 0; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); } .ih.s.e11 a:hover .info { visibility: visible; opacity: 1; } .ih.s.e11.left_to_right .info { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } .ih.s.e11.left_to_right a:hover .info { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .ih.s.e11.right_to_left .info { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } .ih.s.e11.right_to_left a:hover .info { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .ih.s.e11.top_to_bottom .info { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } .ih.s.e11.top_to_bottom a:hover .info { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .ih.s.e11.bottom_to_top .info { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } .ih.s.e11.bottom_to_top a:hover .info { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .ih.s.e12 { overflow: hidden; } .ih.s.e12.colored .info { background: #1a4a72; background: rgba(26, 74, 114, 0.6); } .ih.s.e12.colored .info h3 { background: rgba(12, 34, 52, 0.6); } .ih.s.e12 .img { -webkit-transition: all 0.35s ease-in; -moz-transition: all 0.35s ease-in; transition: all 0.35s ease-in; } .ih.s.e12 .info { background: #333333; background: rgba(0, 0, 0, 0.6); visibility: hidden; opacity: 0; -webkit-transition: all 0.35s ease-in; -moz-transition: all 0.35s ease-in; transition: all 0.35s ease-in; } .ih.s.e12 .info h3 { text-transform: uppercase; color: #fff; text-align: center; font-size: 17px; padding: 10px; background: #111111; margin: 30px 0 0 0; -webkit-transition: all 0.35s ease-in; -moz-transition: all 0.35s ease-in; transition: all 0.35s ease-in; } .ih.s.e12 .info p { font-style: italic; font-size: 12px; position: relative; color: #bbb; padding: 20px 20px 20px; text-align: center; -webkit-transition: all 0.35s ease-in; -moz-transition: all 0.35s ease-in; transition: all 0.35s ease-in; } .ih.s.e12 a:hover .info { visibility: visible; opacity: 1; -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; transition-delay: 0.2s; } .ih.s.e12 a:hover .info h3 { -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; transition-delay: 0.3s; } .ih.s.e12 a:hover .info p { -webkit-transition-delay: 0.25s; -moz-transition-delay: 0.25s; transition-delay: 0.25s; } .ih.s.e12.left_to_right .info { -webkit-transform: translate(-460px, -100px) rotate(-180deg); -moz-transform: translate(-460px, -100px) rotate(-180deg); -ms-transform: translate(-460px, -100px) rotate(-180deg); -o-transform: translate(-460px, -100px) rotate(-180deg); transform: translate(-460px, -100px) rotate(-180deg); } .ih.s.e12.left_to_right .info h3 { -webkit-transform: translateY(-100px); -moz-transform: translateY(-100px); -ms-transform: translateY(-100px); -o-transform: translateY(-100px); transform: translateY(-100px); } .ih.s.e12.left_to_right .info p { -webkit-transform: translateX(-300px) rotate(-90deg); -moz-transform: translateX(-300px) rotate(-90deg); -ms-transform: translateX(-300px) rotate(-90deg); -o-transform: translateX(-300px) rotate(-90deg); transform: translateX(-300px) rotate(-90deg); } .ih.s.e12.left_to_right a:hover .info { -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); transform: translate(0px, 0px); } .ih.s.e12.left_to_right a:hover .info h3 { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } .ih.s.e12.left_to_right a:hover .info p { -webkit-transform: translateX(0px) rotate(0deg); -moz-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); -o-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } .ih.s.e12.right_to_left .info { -webkit-transform: translate(460px, -100px) rotate(180deg); -moz-transform: translate(460px, -100px) rotate(180deg); -ms-transform: translate(460px, -100px) rotate(180deg); -o-transform: translate(460px, -100px) rotate(180deg); transform: translate(460px, -100px) rotate(180deg); } .ih.s.e12.right_to_left .info h3 { -webkit-transform: translateY(-100px); -moz-transform: translateY(-100px); -ms-transform: translateY(-100px); -o-transform: translateY(-100px); transform: translateY(-100px); } .ih.s.e12.right_to_left .info p { -webkit-transform: translateX(300px) rotate(90deg); -moz-transform: translateX(300px) rotate(90deg); -ms-transform: translateX(300px) rotate(90deg); -o-transform: translateX(300px) rotate(90deg); transform: translateX(300px) rotate(90deg); } .ih.s.e12.right_to_left a:hover .info { -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); transform: translate(0px, 0px); } .ih.s.e12.right_to_left a:hover .info h3 { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } .ih.s.e12.right_to_left a:hover .info p { -webkit-transform: translateX(0px) rotate(0deg); -moz-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); -o-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } .ih.s.e12.top_to_bottom .info { -webkit-transform: translate(-265px, -145px) rotate(-45deg); -moz-transform: translate(-265px, -145px) rotate(-45deg); -ms-transform: translate(-265px, -145px) rotate(-45deg); -o-transform: translate(-265px, -145px) rotate(-45deg); transform: translate(-265px, -145px) rotate(-45deg); } .ih.s.e12.top_to_bottom .info h3 { -webkit-transform: translate(200px, -200px); -moz-transform: translate(200px, -200px); -ms-transform: translate(200px, -200px); -o-transform: translate(200px, -200px); transform: translate(200px, -200px); } .ih.s.e12.top_to_bottom .info p { -webkit-transform: translate(200px, -200px); -moz-transform: translate(200px, -200px); -ms-transform: translate(200px, -200px); -o-transform: translate(200px, -200px); transform: translate(200px, -200px); } .ih.s.e12.top_to_bottom a:hover .info { -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); transform: translate(0px, 0px); -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; transition-delay: 0.2s; } .ih.s.e12.top_to_bottom a:hover .info h3 { -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); transform: translate(0px, 0px); -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; transition-delay: 0.3s; } .ih.s.e12.top_to_bottom a:hover .info p { -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); transform: translate(0px, 0px); -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; transition-delay: 0.4s; } .ih.s.e12.bottom_to_top .info { -webkit-transform: translate(265px, 145px) rotate(45deg); -moz-transform: translate(265px, 145px) rotate(45deg); -ms-transform: translate(265px, 145px) rotate(45deg); -o-transform: translate(265px, 145px) rotate(45deg); transform: translate(265px, 145px) rotate(45deg); } .ih.s.e12.bottom_to_top .info h3 { -webkit-transform: translate(200px, -200px); -moz-transform: translate(200px, -200px); -ms-transform: translate(200px, -200px); -o-transform: translate(200px, -200px); transform: translate(200px, -200px); } .ih.s.e12.bottom_to_top .info p { -webkit-transform: translate(-200px, 200px); -moz-transform: translate(-200px, 200px); -ms-transform: translate(-200px, 200px); -o-transform: translate(-200px, 200px); transform: translate(-200px, 200px); } .ih.s.e12.bottom_to_top a:hover .info { -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); transform: translate(0px, 0px); -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; transition-delay: 0.2s; } .ih.s.e12.bottom_to_top a:hover .info h3 { -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); transform: translate(0px, 0px); -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; transition-delay: 0.3s; } .ih.s.e12.bottom_to_top a:hover .info p { -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); transform: translate(0px, 0px); -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; transition-delay: 0.4s; } .ih.s.e13 { overflow: hidden; } .ih.s.e13.colored .info { background: #1a4a72; background: rgba(26, 74, 114, 0.6); } .ih.s.e13.colored .info h3 { background: rgba(12, 34, 52, 0.6); } .ih.s.e13 .img { -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .ih.s.e13 .info { background: #333333; background: rgba(0, 0, 0, 0.6); visibility: hidden; opacity: 0; pointer-events: none; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .ih.s.e13 .info h3 { text-transform: uppercase; color: #fff; text-align: center; font-size: 17px; padding: 10px; background: #111111; margin: 30px 0 0 0; } .ih.s.e13 .info p { font-style: italic; font-size: 12px; position: relative; color: #bbb; padding: 20px 20px 20px; text-align: center; } .ih.s.e13 a:hover .img { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } .ih.s.e13 a:hover .info { visibility: visible; opacity: 1; } .ih.s.e13.left_to_right .info { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } .ih.s.e13.left_to_right a:hover .info { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .ih.s.e13.right_to_left .info { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } .ih.s.e13.right_to_left a:hover .info { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .ih.s.e13.top_to_bottom .info { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } .ih.s.e13.top_to_bottom a:hover .info { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .ih.s.e13.bottom_to_top .info { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } .ih.s.e13.bottom_to_top a:hover .info { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .ih.s.e14.colored .info { background: #1a4a72; } .ih.s.e14.colored .info h3 { background: rgba(12, 34, 52, 0.6); } .ih.s.e14 .img { opacity: 1; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .ih.s.e14 .info { background: #333333; visibility: hidden; opacity: 0; pointer-events: none; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); -webkit-transition: all 0.35s ease 0.2s; -moz-transition: all 0.35s ease 0.2s; transition: all 0.35s ease 0.2s; } .ih.s.e14 .info h3 { text-transform: uppercase; color: #fff; text-align: center; font-size: 17px; padding: 10px; background: #111111; margin: 30px 0 0 0; } .ih.s.e14 .info p { font-style: italic; font-size: 12px; position: relative; color: #bbb; padding: 20px 20px 20px; text-align: center; } .ih.s.e14 a:hover .img { opacity: 0; pointer-events: none; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); } .ih.s.e14 a:hover .info { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .ih.s.e14.left_to_right .img { -webkit-transform: translateX(0) rotate(0); -moz-transform: translateX(0) rotate(0); -ms-transform: translateX(0) rotate(0); -o-transform: translateX(0) rotate(0); transform: translateX(0) rotate(0); } .ih.s.e14.left_to_right a:hover .img { -webkit-transform: translateX(100%) rotate(180deg); -moz-transform: translateX(100%) rotate(180deg); -ms-transform: translateX(100%) rotate(180deg); -o-transform: translateX(100%) rotate(180deg); transform: translateX(100%) rotate(180deg); } .ih.s.e14.right_to_left .img { -webkit-transform: translateX(0) rotate(0); -moz-transform: translateX(0) rotate(0); -ms-transform: translateX(0) rotate(0); -o-transform: translateX(0) rotate(0); transform: translateX(0) rotate(0); } .ih.s.e14.right_to_left a:hover .img { -webkit-transform: translateX(-100%) rotate(-180deg); -moz-transform: translateX(-100%) rotate(-180deg); -ms-transform: translateX(-100%) rotate(-180deg); -o-transform: translateX(-100%) rotate(-180deg); transform: translateX(-100%) rotate(-180deg); } .ih.s.e14.top_to_bottom .img { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .ih.s.e14.top_to_bottom a:hover .img { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } .ih.s.e14.bottom_to_top .img { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .ih.s.e14.bottom_to_top a:hover .img { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } .ih.s.e15 { overflow: hidden; -webkit-perspective: 900px; -moz-perspective: 900px; perspective: 900px; } .ih.s.e15.colored .info { background: #1a4a72; } .ih.s.e15 .img { opacity: 1; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .ih.s.e15 .info { background: #333333; opacity: 0; -webkit-transition: all 0.35s ease-in-out 0.3s; -moz-transition: all 0.35s ease-in-out 0.3s; transition: all 0.35s ease-in-out 0.3s; } .ih.s.e15 .info h3 { text-transform: uppercase; color: #fff; text-align: center; font-size: 17px; padding: 10px; background: #111111; margin: 30px 0 0 0; } .ih.s.e15 .info p { font-style: italic; font-size: 12px; position: relative; color: #bbb; padding: 20px 20px 20px; text-align: center; } .ih.s.e15 a:hover .img { opacity: 0; visibility: hidden; } .ih.s.e15 a:hover .info { visibility: visible; opacity: 1; } .ih.s.e15.left_to_right .img { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); -ms-transform: rotateY(0); -o-transform: rotateY(0); transform: rotateY(0); -webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50%; } .ih.s.e15.left_to_right .info { -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; } .ih.s.e15.left_to_right a:hover .img { -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); transform: rotateY(-90deg); } .ih.s.e15.left_to_right a:hover .info { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); -ms-transform: rotateY(0); -o-transform: rotateY(0); transform: rotateY(0); } .ih.s.e15.right_to_left .img { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); -ms-transform: rotateY(0); -o-transform: rotateY(0); transform: rotateY(0); -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; } .ih.s.e15.right_to_left .info { -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); transform: rotateY(-90deg); -webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50%; } .ih.s.e15.right_to_left a:hover .img { -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); } .ih.s.e15.right_to_left a:hover .info { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); -ms-transform: rotateY(0); -o-transform: rotateY(0); transform: rotateY(0); } .ih.s.e15.top_to_bottom .img { -webkit-transform: rotateX(0); -moz-transform: rotateX(0); -ms-transform: rotateX(0); -o-transform: rotateX(0); transform: rotateX(0); -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; } .ih.s.e15.top_to_bottom .info { -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; -ms-transform-origin: 50% 0; -o-transform-origin: 50% 0; transform-origin: 50% 0; } .ih.s.e15.top_to_bottom a:hover .img { -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); -o-transform: rotateX(90deg); transform: rotateX(90deg); } .ih.s.e15.top_to_bottom a:hover .info { -webkit-transform: rotateX(0); -moz-transform: rotateX(0); -ms-transform: rotateX(0); -o-transform: rotateX(0); transform: rotateX(0); } .ih.s.e15.bottom_to_top .img { -webkit-transform: rotateX(0); -moz-transform: rotateX(0); -ms-transform: rotateX(0); -o-transform: rotateX(0); transform: rotateX(0); -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; -ms-transform-origin: 50% 0; -o-transform-origin: 50% 0; transform-origin: 50% 0; } .ih.s.e15.bottom_to_top .info { -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); -o-transform: rotateX(90deg); transform: rotateX(90deg); -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; } .ih.s.e15.bottom_to_top a:hover .img { -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg); } .ih.s.e15.bottom_to_top a:hover .info { -webkit-transform: rotateX(0); -moz-transform: rotateX(0); -ms-transform: rotateX(0); -o-transform: rotateX(0); transform: rotateX(0); }