/** * CSS3 FX */ /* FX Sorting */ .fx-sort { z-index: 2; } .fx-hidden.fx-sort { pointer-events:none; z-index:1; } .fx-sort { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; transition-duration: 0.8s; } .fx-sort { -webkit-transition-property: height, width; -moz-transition-property: height, width; transition-property: height, width; -webkit-transition-property:-webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; transition-property: transform, opacity; } /* Hpver Parent */ .fx-hover { position:relative; left: 0; top: 0; overflow: hidden; } /* Hover Content */ .fx-hover-content { text-align: center; position: absolute; left: 0; right: 0; top: 55%; display: block; width: 100%; opacity: 0; transform: scale(2, 2); -webkit-transform: scale(2, 2); transition: all 250ms; -webkit-transition: all 250ms; } .fx-hover-content h3 { font-size: 20px; margin-bottom: 5px; font-weight: 500; color: #ffffff !important; } .fx-hover-content .line { display: inline-block; height: 4px; margin: 0 auto 30px auto !important; width: 40px; } .fx-hover-content p { font-weight: 500; margin-bottom: 16px; color: #ffffff !important; } .fx-hover:hover .fx-hover-content { opacity: 1; transform: scale(1, 1); -webkit-transform: scale(1, 1); } /* Hover icon */ .fx-hover .fx-hover-icon { font-size: 16px; font-weight: 700; text-align: center; letter-spacing: -1px; position: absolute; left: 0; top: 45%; margin-top: -20px; display: block; width: 100%; opacity: 0; transform: scale(2, 2); -webkit-transform: scale(2, 2); transition: all 250ms; -webkit-transition: all 250ms; cursor: pointer; } .fx-hover .fx-hover-icon .icon-medium { width: 42px; height: 42px; } .fx-hover .fx-hover-icon a { border-radius: 2px; } .fx-hover .fx-hover-icon i { color: #ffffff !important; } .fx-hover .fx-hover-icon span { display: block; } .fx-hover:hover .fx-hover-icon { opacity: 0.999; transform: scale(1, 1); -webkit-transform: scale(1, 1); } .fx-uneven .fx-hover .fx-hover-icon { top: 40%; } .fx-uneven .fx-hover .fx-hover-content { top: 57%; } /* Hover Back */ .fx-hover .fx-hover-back { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: background-color 0.3s linear; -moz-transition: background-color 0.3s linear; -webkit-transition: background-color 0.3s linear; -o-transition:background-color 0.3s linear; } .fx-hover:hover .fx-hover-back { opacity: 0.7; } /* HTML User Agent */ html[data-useragent*='MSIE 10.0'] .fx-end, html[data-useragent*='Mozilla/5.0'] .fx-end, .fx-end { -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; -o-animation-delay: 0.1s; animation-delay: 0.1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; } /* FX trigger */ .fx-start { opacity: 0; } .fx-nofade { opacity: 1 !important; } /* FX Sequencer */ .fx > .fx-end:nth-of-type(0) { -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; } .fx > .fx-end:nth-of-type(1) { -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; -o-animation-delay: 0.1s; animation-delay: 0.1s; } .fx > .fx-end:nth-of-type(2) { -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; -o-animation-delay: 0.2s; animation-delay: 0.2s; } .fx > .fx-end:nth-of-type(3) { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; -o-animation-delay: 0.3s; animation-delay: 0.3s; } .fx > .fx-end:nth-of-type(4) { -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; -o-animation-delay: 0.4s; animation-delay: 0.4s; } .fx > .fx-end:nth-of-type(5) { -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; } .fx > .fx-end:nth-of-type(6) { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; } .fx > .fx-end:nth-of-type(7) { -webkit-animation-delay: 0.7s; -moz-animation-delay: 0.7s; -o-animation-delay: 0.7s; animation-delay: 0.7s; } .fx > .fx-end:nth-of-type(8) { -webkit-animation-delay: 0.8s; -moz-animation-delay: 0.8s; -o-animation-delay: 0.8s; animation-delay: 0.8s; } .fx > .fx-end:nth-of-type(9) { -webkit-animation-delay: 0.9s; -moz-animation-delay: 0.9s; -o-animation-delay: 0.9s; animation-delay: 0.9s; } .fx > .fx-end:nth-of-type(10) { -webkit-animation-delay: 1.0s; -moz-animation-delay: 1.0s; -o-animation-delay: 1.0s; animation-delay: 1.0s; } .fx > .fx-end:nth-of-type(11) { -webkit-animation-delay: 1.1s; -moz-animation-delay: 1.1s; -o-animation-delay: 1.1s; animation-delay: 1.1s; } .fx > .fx-end:nth-of-type(12) { -webkit-animation-delay: 1.2s; -moz-animation-delay: 1.2s; -o-animation-delay: 1.2s; animation-delay: 1.2s; } .fx > .fx-end:nth-of-type(13) { -webkit-animation-delay: 1.3s; -moz-animation-delay: 1.3s; -o-animation-delay: 1.3s; animation-delay: 1.3s; } .fx > .fx-end:nth-of-type(14) { -webkit-animation-delay: 1.4s; -moz-animation-delay: 1.4s; -o-animation-delay: 1.4s; animation-delay: 1.4s; } .fx > .fx-end:nth-of-type(15) { -webkit-animation-delay: 1.5s; -moz-animation-delay: 1.5s; -o-animation-delay: 1.5s; animation-delay: 1.5s; } .fx > .fx-end:nth-of-type(16) { -webkit-animation-delay: 1.6s; -moz-animation-delay: 1.6s; -o-animation-delay: 1.6s; animation-delay: 1.6s; } .fx > .fx-end:nth-of-type(17) { -webkit-animation-delay: 1.7s; -moz-animation-delay: 1.7s; -o-animation-delay: 1.7s; animation-delay: 1.7s; } .fx > .fx-end:nth-of-type(18) { -webkit-animation-delay: 1.8s; -moz-animation-delay: 1.8s; -o-animation-delay: 1.8s; animation-delay: 1.8s; } .fx > .fx-end:nth-of-type(19) { -webkit-animation-delay: 1.9s; -moz-animation-delay: 1.9s; -o-animation-delay: 1.9s; animation-delay: 1.9s; } .fx > .fx-end:nth-of-type(20) { -webkit-animation-delay: 2.0s; -moz-animation-delay: 2.0s; -o-animation-delay: 2.0s; animation-delay: 2.0s; } .fx > .fx-end:nth-of-type(21) { -webkit-animation-delay: 2.1s; -moz-animation-delay: 2.1s; -o-animation-delay: 2.1s; animation-delay: 2.1s; } .fx > .fx-end:nth-of-type(22) { -webkit-animation-delay: 2.2s; -moz-animation-delay: 2.2s; -o-animation-delay: 2.2s; animation-delay: 2.2s; } .fx > .fx-end:nth-of-type(23) { -webkit-animation-delay: 2.3s; -moz-animation-delay: 2.3s; -o-animation-delay: 2.3s; animation-delay: 2.3s; } /* Rotate From Left */ @-webkit-keyframes rotateFromLeft { 0% { -webkit-transform-origin: 50% 50%; -webkit-transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: 50% 50%; -webkit-transform: rotate(0deg); opacity: 1; } } @-moz-keyframes rotateFromLeft { 0% { -moz-transform-origin: 50% 50%; -moz-transform: rotate(90deg); opacity: 0; } 100% { -moz-transform-origin: 50% 50%; -moz-transform: rotate(0deg); opacity: 1; } } @-o-keyframes rotateFromLeft { 0% { -o-transform-origin: 50% 50%; -o-transform: rotate(90deg); opacity: 0; } 100% { -o-transform-origin: 50% 50%; -o-transform: rotate(0deg); opacity: 1; } } @keyframes rotateFromLeft { 0% { transform-origin: 50% 50%; transform: rotate(90deg); opacity: 0; } 100% { transform-origin: 50% 50%; transform: rotate(0deg); opacity: 1; } } .rotateFromLeft { -webkit-animation-name: rotateFromLeft; -moz-animation-name: rotateFromLeft; -o-animation-name: rotateFromLeft; animation-name: rotateFromLeft; } /* Rotate From Right */ @-webkit-keyframes rotateFromRight { 0% { -webkit-transform-origin: 50% 50%; -webkit-transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: 50% 50%; -webkit-transform: rotate(0deg); opacity: 1; } } @-moz-keyframes rotateFromRight { 0% { -moz-transform-origin: 50% 50%; -moz-transform: rotate(-90deg); opacity: 0; } 100% { -moz-transform-origin: 50% 50%; -moz-transform: rotate(0deg); opacity: 1; } } @-o-keyframes rotateFromRight { 0% { -o-transform-origin: 50% 50%; -o-transform: rotate(-90deg); opacity: 0; } 100% { -o-transform-origin: 50% 50%; -o-transform: rotate(0deg); opacity: 1; } } @keyframes rotateFromRight { 0% { transform-origin: 50% 50%; transform: rotate(-90deg); opacity: 0; } 100% { transform-origin: 50% 50%; transform: rotate(0deg); opacity: 1; } } .rotateFromRight { -webkit-animation-name: rotateFromRight; -moz-animation-name: rotateFromRight; -o-animation-name: rotateFromRight; animation-name: rotateFromRight; } /* Fade In Up */ @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(50px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translateY(50px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInUp { 0% { opacity: 0; -o-transform: translateY(50px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(50px); } 100% { opacity: 1; transform: translateY(0); } } .fadeInUp { -webkit-animation-name: fadeInUp; -moz-animation-name: fadeInUp; -o-animation-name: fadeInUp; animation-name: fadeInUp; } /* Fade In Down */ @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-50px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translateY(-50px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInDown { 0% { opacity: 0; -o-transform: translateY(-50px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-50px); } 100% { opacity: 1; transform: translateY(0); } } .fadeInDown { -webkit-animation-name: fadeInDown; -moz-animation-name: fadeInDown; -o-animation-name: fadeInDown; animation-name: fadeInDown; } /* Fade In Left */ @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-50px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInLeft { 0% { opacity: 0; -moz-transform: translateX(-50px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeInLeft { 0% { opacity: 0; -o-transform: translateX(-50px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-50px); } 100% { opacity: 1; transform: translateX(0); } } .fadeInLeft { -webkit-animation-name: fadeInLeft; -moz-animation-name: fadeInLeft; -o-animation-name: fadeInLeft; animation-name: fadeInLeft; } /* Fade In Right */ @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(50px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInRight { 0% { opacity: 0; -moz-transform: translateX(50px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeInRight { 0% { opacity: 0; -o-transform: translateX(50px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInRight { 0% { opacity: 0; transform: translateX(50px); } 100% { opacity: 1; transform: translateX(0); } } .fadeInRight { -webkit-animation-name: fadeInRight; -moz-animation-name: fadeInRight; -o-animation-name: fadeInRight; animation-name: fadeInRight; } /* Flip In X */ @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); opacity: 0; } 100% { -webkit-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @-moz-keyframes flipInX { 0% { -moz-transform: perspective(400px) rotateX(90deg); opacity: 0; } 100% { -moz-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @-o-keyframes flipInX { 0% { -o-transform: perspective(400px) rotateX(90deg); opacity: 0; } 100% { -o-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @keyframes flipInX { 0% { transform: perspective(400px) rotateX(90deg); opacity: 0; } 100% { transform: perspective(400px) rotateX(0deg); opacity: 1; } } .flipInX { -webkit-backface-visibility: visible !important; -webkit-animation-name: flipInX; -moz-backface-visibility: visible !important; -moz-animation-name: flipInX; -o-backface-visibility: visible !important; -o-animation-name: flipInX; backface-visibility: visible !important; animation-name: flipInX; } /* Flip Out X */ @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(-90deg); opacity: 0; } 100% { -webkit-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @-moz-keyframes flipOutX { 0% { -moz-transform: perspective(400px) rotateX(-90deg); opacity: 0; } 100% { -moz-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @-o-keyframes flipOutX { 0% { -o-transform: perspective(400px) rotateX(-90deg); opacity: 0; } 100% { -o-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @keyframes flipOutX { 0% { transform: perspective(400px) rotateX(-90deg); opacity: 0; } 100% { transform: perspective(400px) rotateX(0deg); opacity: 1; } } .flipOutX { -webkit-backface-visibility: visible !important; -webkit-animation-name: flipOutX; -moz-backface-visibility: visible !important; -moz-animation-name: flipOutX; -o-backface-visibility: visible !important; -o-animation-name: flipOutX; backface-visibility: visible !important; animation-name: flipOutX; } /* Flip In Y */ @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); opacity: 0; } 100% { -webkit-transform: perspective(400px) rotateY(0deg); opacity: 1; } } @-moz-keyframes flipInY { 0% { -moz-transform: perspective(400px) rotateY(90deg); opacity: 0; } 100% { -moz-transform: perspective(400px) rotateY(0deg); opacity: 1; } } @-o-keyframes flipInY { 0% { -o-transform: perspective(400px) rotateY(90deg); opacity: 0; } 100% { -o-transform: perspective(400px) rotateY(0deg); opacity: 1; } } @keyframes flipInY { 0% { transform: perspective(400px) rotateY(90deg); opacity: 0; } 100% { transform: perspective(400px) rotateY(0deg); opacity: 1; } } .flipInY { -webkit-backface-visibility: visible !important; -webkit-animation-name: flipInY; -moz-backface-visibility: visible !important; -moz-animation-name: flipInY; -o-backface-visibility: visible !important; -o-animation-name: flipInY; backface-visibility: visible !important; animation-name: flipInY; } /* Flip Out Y */ @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(-90deg); opacity: 0; } 100% { -webkit-transform: perspective(400px) rotateY(0deg); opacity: 1; } } @-moz-keyframes flipOutY { 0% { -moz-transform: perspective(400px) rotateY(-90deg); opacity: 0; } 100% { -moz-transform: perspective(400px) rotateY(0deg); opacity: 1; } } @-o-keyframes flipOutY { 0% { -o-transform: perspective(400px) rotateY(-90deg); opacity: 0; } 100% { -o-transform: perspective(400px) rotateY(0deg); opacity: 1; } } @keyframes flipOutY { 0% { transform: perspective(400px) rotateY(-90deg); opacity: 0; } 100% { transform: perspective(400px) rotateY(0deg); opacity: 1; } } .flipOutY { -webkit-backface-visibility: visible !important; -webkit-animation-name: flipOutY; -moz-backface-visibility: visible !important; -moz-animation-name: flipOutY; -o-backface-visibility: visible !important; -o-animation-name: flipOutY; backface-visibility: visible !important; animation-name: flipOutY; } /* Fade In */ @-webkit-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } @-moz-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } @-o-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } @keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } .fadeIn { -webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; -o-animation-name: fadeIn; animation-name: fadeIn; } /* Bounce In */ @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform:scale(1.5); } 100% { opacity: 1; -webkit-transform:scale(1); } } @-moz-keyframes bounceIn { 0% { opacity: 0; -moz-transform:scale(.3); } 100% { opacity: 1; -moz-transform:scale(1); } } @-o-keyframes bounceIn { 0% { opacity: 0; -o-transform:scale(.3); } 100% { opacity: 1; -o-transform:scale(1); } } @keyframes bounceIn { 0% { opacity: 0; transform:scale(.3); } 100% { opacity: 1; transform:scale(1); } } .bounceIn { -webkit-animation-name: bounceIn; -moz-animation-name: bounceIn; -o-animation-name: bounceIn; animation-name: bounceIn; } /* Bounce In Up */ @-webkit-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes bounceInUp { 0% { opacity: 0; -moz-transform: translateY(2000px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes bounceInUp { 0% { opacity: 0; -o-transform: translateY(2000px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes bounceInUp { 0% { opacity: 0; transform: translateY(2000px); } 60% { opacity: 1; transform: translateY(-30px); } 80% { transform: translateY(10px); opacity: 1; } 100% { transform: translateY(0); opacity: 1; } } .bounceInUp { -webkit-animation-name: bounceInUp; -moz-animation-name: bounceInUp; -o-animation-name: bounceInUp; animation-name: bounceInUp; } /* Bounce In Down */ @-webkit-keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); opacity: 1; } 100% { -webkit-transform: translateY(0); opacity: 1; } } @-moz-keyframes bounceInDown { 0% { opacity: 0; -moz-transform: translateY(-2000px); } 60% { opacity: 1; -moz-transform: translateY(30px); } 80% { -moz-transform: translateY(-10px); opacity: 1; } 100% { -moz-transform: translateY(0); opacity: 1; } } @-o-keyframes bounceInDown { 0% { opacity: 0; -o-transform: translateY(-2000px); } 60% { opacity: 1; -o-transform: translateY(30px); } 80% { -o-transform: translateY(-10px); opacity: 1; } 100% { -o-transform: translateY(0); opacity: 1; } } @keyframes bounceInDown { 0% { opacity: 0; transform: translateY(-2000px); } 60% { opacity: 1; transform: translateY(30px); } 80% { transform: translateY(-10px); opacity: 1; } 100% { transform: translateY(0); opacity: 1; } } .bounceInDown { -webkit-animation-name: bounceInDown; -moz-animation-name: bounceInDown; -o-animation-name: bounceInDown; animation-name: bounceInDown; } /* Bounce in left */ @-webkit-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); opacity: 1; } 100% { -webkit-transform: translateX(0); opacity: 1; } } @-moz-keyframes bounceInLeft { 0% { opacity: 0; -moz-transform: translateX(-2000px); } 60% { opacity: 1; -moz-transform: translateX(30px); } 80% { -moz-transform: translateX(-10px); opacity: 1; } 100% { -moz-transform: translateX(0); opacity: 1; } } @-o-keyframes bounceInLeft { 0% { opacity: 0; -o-transform: translateX(-2000px); } 60% { opacity: 1; -o-transform: translateX(30px); } 80% { -o-transform: translateX(-10px); opacity: 1; } 100% { -o-transform: translateX(0); opacity: 1; } } @keyframes bounceInLeft { 0% { opacity: 0; transform: translateX(-2000px); } 60% { opacity: 1; transform: translateX(30px); } 80% { transform: translateX(-10px); opacity: 1; } 100% { transform: translateX(0); opacity: 1; } } .bounceInLeft { -webkit-animation-name: bounceInLeft; -moz-animation-name: bounceInLeft; -o-animation-name: bounceInLeft; animation-name: bounceInLeft; } /* Bounce In Right */ @-webkit-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); opacity: 1; } 100% { -webkit-transform: translateX(0); opacity: 1; } } @-moz-keyframes bounceInRight { 0% { opacity: 0; -moz-transform: translateX(2000px); } 60% { opacity: 1; -moz-transform: translateX(-30px); } 80% { -moz-transform: translateX(10px); opacity: 1; } 100% { -moz-transform: translateX(0); opacity: 1; } } @-o-keyframes bounceInRight { 0% { opacity: 0; -o-transform: translateX(2000px); } 60% { opacity: 1; -o-transform: translateX(-30px); } 80% { -o-transform: translateX(10px); opacity: 1; } 100% { -o-transform: translateX(0); opacity: 1; } } @keyframes bounceInRight { 0% { opacity: 0; transform: translateX(2000px); } 60% { opacity: 1; transform: translateX(-30px); } 80% { transform: translateX(10px); opacity: 1; } 100% { transform: translateX(0); opacity: 1; } } .bounceInRight { -webkit-animation-name: bounceInRight; -moz-animation-name: bounceInRight; -o-animation-name: bounceInRight; animation-name: bounceInRight; }