/* Animate.css - http://daneden.me/animate LICENSED UNDER THE MIT LICENSE (MIT) Copyright (c) 2011 Dan Eden Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ .animated { -webkit-animation: 1s ease; -moz-animation: 1s ease; -ms-animation: 1s ease; -o-animation: 1s ease; animation: 1s ease; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; } .animated.hinge { -webkit-animation: 2s ease; -moz-animation: 2s ease; -ms-animation: 2s ease; -o-animation: 2s ease; animation: 2s ease; } @-webkit-keyframes flash { 0%, 50%, 100% {opacity: 1;} 25%, 75% {opacity: 0;} } @-moz-keyframes flash { 0%, 50%, 100% {opacity: 1;} 25%, 75% {opacity: 0;} } @-ms-keyframes flash { 0%, 50%, 100% {opacity: 1;} 25%, 75% {opacity: 0;} } @-o-keyframes flash { 0%, 50%, 100% {opacity: 1;} 25%, 75% {opacity: 0;} } @keyframes flash { 0%, 50%, 100% {opacity: 1;} 25%, 75% {opacity: 0;} } .flash { -webkit-animation-name: flash; -moz-animation-name: flash; -ms-animation-name: flash; -o-animation-name: flash; animation-name: flash; } @-webkit-keyframes shake { 0%, 100% {-webkit-transform: translateX(0);} 10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);} 20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);} } @-moz-keyframes shake { 0%, 100% {-moz-transform: translateX(0);} 10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);} 20%, 40%, 60%, 80% {-moz-transform: translateX(10px);} } @-ms-keyframes shake { 0%, 100% {-ms-transform: translateX(0);} 10%, 30%, 50%, 70%, 90% {-ms-transform: translateX(-10px);} 20%, 40%, 60%, 80% {-ms-transform: translateX(10px);} } @-o-keyframes shake { 0%, 100% {-o-transform: translateX(0);} 10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-10px);} 20%, 40%, 60%, 80% {-o-transform: translateX(10px);} } @keyframes shake { 0%, 100% {transform: translateX(0);} 10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);} 20%, 40%, 60%, 80% {transform: translateX(10px);} } .shake { -webkit-animation-name: shake; -moz-animation-name: shake; -ms-animation-name: shake; -o-animation-name: shake; animation-name: shake; } @-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 40% {-webkit-transform: translateY(-30px);} 60% {-webkit-transform: translateY(-15px);} } @-moz-keyframes bounce { 0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);} 40% {-moz-transform: translateY(-30px);} 60% {-moz-transform: translateY(-15px);} } @-ms-keyframes bounce { 0%, 20%, 50%, 80%, 100% {-ms-transform: translateY(0);} 40% {-ms-transform: translateY(-30px);} 60% {-ms-transform: translateY(-15px);} } @-o-keyframes bounce { 0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);} 40% {-o-transform: translateY(-30px);} 60% {-o-transform: translateY(-15px);} } @keyframes bounce { 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 40% {transform: translateY(-30px);} 60% {transform: translateY(-15px);} } .bounce { -webkit-animation-name: bounce; -moz-animation-name: bounce; -ms-animation-name: bounce; -o-animation-name: bounce; animation-name: bounce; } @-webkit-keyframes tada { 0% {-webkit-transform: scale(1);} 10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);} 30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);} 40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);} 100% {-webkit-transform: scale(1) rotate(0);} } @-moz-keyframes tada { 0% {-moz-transform: scale(1);} 10%, 20% {-moz-transform: scale(0.9) rotate(-3deg);} 30%, 50%, 70%, 90% {-moz-transform: scale(1.1) rotate(3deg);} 40%, 60%, 80% {-moz-transform: scale(1.1) rotate(-3deg);} 100% {-moz-transform: scale(1) rotate(0);} } @-ms-keyframes tada { 0% {-ms-transform: scale(1);} 10%, 20% {-ms-transform: scale(0.9) rotate(-3deg);} 30%, 50%, 70%, 90% {-ms-transform: scale(1.1) rotate(3deg);} 40%, 60%, 80% {-ms-transform: scale(1.1) rotate(-3deg);} 100% {-ms-transform: scale(1) rotate(0);} } @-o-keyframes tada { 0% {-o-transform: scale(1);} 10%, 20% {-o-transform: scale(0.9) rotate(-3deg);} 30%, 50%, 70%, 90% {-o-transform: scale(1.1) rotate(3deg);} 40%, 60%, 80% {-o-transform: scale(1.1) rotate(-3deg);} 100% {-o-transform: scale(1) rotate(0);} } @keyframes tada { 0% {transform: scale(1);} 10%, 20% {transform: scale(0.9) rotate(-3deg);} 30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);} 40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);} 100% {transform: scale(1) rotate(0);} } .tada { -webkit-animation-name: tada; -moz-animation-name: tada; -ms-animation-name: tada; -o-animation-name: tada; animation-name: tada; } @-webkit-keyframes swing { 20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; } 20% { -webkit-transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); } } @-moz-keyframes swing { 20% { -moz-transform: rotate(15deg); } 40% { -moz-transform: rotate(-10deg); } 60% { -moz-transform: rotate(5deg); } 80% { -moz-transform: rotate(-5deg); } 100% { -moz-transform: rotate(0deg); } } @-ms-keyframes swing { 20% { -ms-transform: rotate(15deg); } 40% { -ms-transform: rotate(-10deg); } 60% { -ms-transform: rotate(5deg); } 80% { -ms-transform: rotate(-5deg); } 100% { -ms-transform: rotate(0deg); } } @-o-keyframes swing { 20% { -o-transform: rotate(15deg); } 40% { -o-transform: rotate(-10deg); } 60% { -o-transform: rotate(5deg); } 80% { -o-transform: rotate(-5deg); } 100% { -o-transform: rotate(0deg); } } @keyframes swing { 20% { transform: rotate(15deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(5deg); } 80% { transform: rotate(-5deg); } 100% { transform: rotate(0deg); } } .swing { -webkit-transform-origin: top center; -moz-transform-origin: top center; -ms-transform-origin: top center; -o-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; -moz-animation-name: swing; -ms-animation-name: swing; -o-animation-name: swing; animation-name: swing; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes wobble { 0% { -webkit-transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); } } @-moz-keyframes wobble { 0% { -moz-transform: translateX(0%); } 15% { -moz-transform: translateX(-25%) rotate(-5deg); } 30% { -moz-transform: translateX(20%) rotate(3deg); } 45% { -moz-transform: translateX(-15%) rotate(-3deg); } 60% { -moz-transform: translateX(10%) rotate(2deg); } 75% { -moz-transform: translateX(-5%) rotate(-1deg); } 100% { -moz-transform: translateX(0%); } } @-ms-keyframes wobble { 0% { -ms-transform: translateX(0%); } 15% { -ms-transform: translateX(-25%) rotate(-5deg); } 30% { -ms-transform: translateX(20%) rotate(3deg); } 45% { -ms-transform: translateX(-15%) rotate(-3deg); } 60% { -ms-transform: translateX(10%) rotate(2deg); } 75% { -ms-transform: translateX(-5%) rotate(-1deg); } 100% { -ms-transform: translateX(0%); } } @-o-keyframes wobble { 0% { -o-transform: translateX(0%); } 15% { -o-transform: translateX(-25%) rotate(-5deg); } 30% { -o-transform: translateX(20%) rotate(3deg); } 45% { -o-transform: translateX(-15%) rotate(-3deg); } 60% { -o-transform: translateX(10%) rotate(2deg); } 75% { -o-transform: translateX(-5%) rotate(-1deg); } 100% { -o-transform: translateX(0%); } } @keyframes wobble { 0% { transform: translateX(0%); } 15% { transform: translateX(-25%) rotate(-5deg); } 30% { transform: translateX(20%) rotate(3deg); } 45% { transform: translateX(-15%) rotate(-3deg); } 60% { transform: translateX(10%) rotate(2deg); } 75% { transform: translateX(-5%) rotate(-1deg); } 100% { transform: translateX(0%); } } .wobble { -webkit-animation-name: wobble; -moz-animation-name: wobble; -ms-animation-name: wobble; -o-animation-name: wobble; animation-name: wobble; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); } 50% { -webkit-transform: scale(1.1); } 100% { -webkit-transform: scale(1); } } @-moz-keyframes pulse { 0% { -moz-transform: scale(1); } 50% { -moz-transform: scale(1.1); } 100% { -moz-transform: scale(1); } } @-ms-keyframes pulse { 0% { -ms-transform: scale(1); } 50% { -ms-transform: scale(1.1); } 100% { -ms-transform: scale(1); } } @-o-keyframes pulse { 0% { -o-transform: scale(1); } 50% { -o-transform: scale(1.1); } 100% { -o-transform: scale(1); } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } .pulse { -webkit-animation-name: pulse; -moz-animation-name: pulse; -ms-animation-name: pulse; -o-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) rotateY(0); -webkit-animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg); -webkit-animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) rotateY(360deg) scale(.95); -webkit-animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) scale(1); -webkit-animation-timing-function: ease-in; } } @-moz-keyframes flip { 0% { -moz-transform: perspective(400px) rotateY(0); -moz-animation-timing-function: ease-out; } 40% { -moz-transform: perspective(400px) translateZ(150px) rotateY(170deg); -moz-animation-timing-function: ease-out; } 50% { -moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -moz-animation-timing-function: ease-in; } 80% { -moz-transform: perspective(400px) rotateY(360deg) scale(.95); -moz-animation-timing-function: ease-in; } 100% { -moz-transform: perspective(400px) scale(1); -moz-animation-timing-function: ease-in; } } @-ms-keyframes flip { 0% { -ms-transform: perspective(400px) rotateY(0); -ms-animation-timing-function: ease-out; } 40% { -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg); -ms-animation-timing-function: ease-out; } 50% { -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -ms-animation-timing-function: ease-in; } 80% { -ms-transform: perspective(400px) rotateY(360deg) scale(.95); -ms-animation-timing-function: ease-in; } 100% { -ms-transform: perspective(400px) scale(1); -ms-animation-timing-function: ease-in; } } @-o-keyframes flip { 0% { -o-transform: perspective(400px) rotateY(0); -o-animation-timing-function: ease-out; } 40% { -o-transform: perspective(400px) translateZ(150px) rotateY(170deg); -o-animation-timing-function: ease-out; } 50% { -o-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -o-animation-timing-function: ease-in; } 80% { -o-transform: perspective(400px) rotateY(360deg) scale(.95); -o-animation-timing-function: ease-in; } 100% { -o-transform: perspective(400px) scale(1); -o-animation-timing-function: ease-in; } } @keyframes flip { 0% { transform: perspective(400px) rotateY(0); animation-timing-function: ease-out; } 40% { transform: perspective(400px) translateZ(150px) rotateY(170deg); animation-timing-function: ease-out; } 50% { transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); animation-timing-function: ease-in; } 80% { transform: perspective(400px) rotateY(360deg) scale(.95); animation-timing-function: ease-in; } 100% { transform: perspective(400px) scale(1); animation-timing-function: ease-in; } } .flip { -webkit-backface-visibility: visible !important; -webkit-animation-name: flip; -moz-backface-visibility: visible !important; -moz-animation-name: flip; -ms-backface-visibility: visible !important; -ms-animation-name: flip; -o-backface-visibility: visible !important; -o-animation-name: flip; backface-visibility: visible !important; animation-name: flip; } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @-moz-keyframes flipInX { 0% { -moz-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -moz-transform: perspective(400px) rotateX(-10deg); } 70% { -moz-transform: perspective(400px) rotateX(10deg); } 100% { -moz-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @-ms-keyframes flipInX { 0% { -ms-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -ms-transform: perspective(400px) rotateX(-10deg); } 70% { -ms-transform: perspective(400px) rotateX(10deg); } 100% { -ms-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @-o-keyframes flipInX { 0% { -o-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -o-transform: perspective(400px) rotateX(-10deg); } 70% { -o-transform: perspective(400px) rotateX(10deg); } 100% { -o-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @keyframes flipInX { 0% { transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { transform: perspective(400px) rotateX(-10deg); } 70% { transform: perspective(400px) rotateX(10deg); } 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; -ms-backface-visibility: visible !important; -ms-animation-name: flipInX; -o-backface-visibility: visible !important; -o-animation-name: flipInX; backface-visibility: visible !important; animation-name: flipInX; } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); opacity: 0; } } @-moz-keyframes flipOutX { 0% { -moz-transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -moz-transform: perspective(400px) rotateX(90deg); opacity: 0; } } @-ms-keyframes flipOutX { 0% { -ms-transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -ms-transform: perspective(400px) rotateX(90deg); opacity: 0; } } @-o-keyframes flipOutX { 0% { -o-transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -o-transform: perspective(400px) rotateX(90deg); opacity: 0; } } @keyframes flipOutX { 0% { transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { transform: perspective(400px) rotateX(90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; -webkit-backface-visibility: visible !important; -moz-animation-name: flipOutX; -moz-backface-visibility: visible !important; -ms-animation-name: flipOutX; -ms-backface-visibility: visible !important; -o-animation-name: flipOutX; -o-backface-visibility: visible !important; animation-name: flipOutX; backface-visibility: visible !important; } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); opacity: 1; } } @-moz-keyframes flipInY { 0% { -moz-transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -moz-transform: perspective(400px) rotateY(-10deg); } 70% { -moz-transform: perspective(400px) rotateY(10deg); } 100% { -moz-transform: perspective(400px) rotateY(0deg); opacity: 1; } } @-ms-keyframes flipInY { 0% { -ms-transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -ms-transform: perspective(400px) rotateY(-10deg); } 70% { -ms-transform: perspective(400px) rotateY(10deg); } 100% { -ms-transform: perspective(400px) rotateY(0deg); opacity: 1; } } @-o-keyframes flipInY { 0% { -o-transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -o-transform: perspective(400px) rotateY(-10deg); } 70% { -o-transform: perspective(400px) rotateY(10deg); } 100% { -o-transform: perspective(400px) rotateY(0deg); opacity: 1; } } @keyframes flipInY { 0% { transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { transform: perspective(400px) rotateY(-10deg); } 70% { transform: perspective(400px) rotateY(10deg); } 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; -ms-backface-visibility: visible !important; -ms-animation-name: flipInY; -o-backface-visibility: visible !important; -o-animation-name: flipInY; backface-visibility: visible !important; animation-name: flipInY; } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateY(90deg); opacity: 0; } } @-moz-keyframes flipOutY { 0% { -moz-transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -moz-transform: perspective(400px) rotateY(90deg); opacity: 0; } } @-ms-keyframes flipOutY { 0% { -ms-transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -ms-transform: perspective(400px) rotateY(90deg); opacity: 0; } } @-o-keyframes flipOutY { 0% { -o-transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -o-transform: perspective(400px) rotateY(90deg); opacity: 0; } } @keyframes flipOutY { 0% { transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { transform: perspective(400px) rotateY(90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; -webkit-animation-name: flipOutY; -moz-backface-visibility: visible !important; -moz-animation-name: flipOutY; -ms-backface-visibility: visible !important; -ms-animation-name: flipOutY; -o-backface-visibility: visible !important; -o-animation-name: flipOutY; backface-visibility: visible !important; animation-name: flipOutY; } @-webkit-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } @-moz-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } @-ms-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; -ms-animation-name: fadeIn; -o-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translateY(20px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-ms-keyframes fadeInUp { 0% { opacity: 0; -ms-transform: translateY(20px); } 100% { opacity: 1; -ms-transform: translateY(0); } } @-o-keyframes fadeInUp { 0% { opacity: 0; -o-transform: translateY(20px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } .fadeInUp { -webkit-animation-name: fadeInUp; -moz-animation-name: fadeInUp; -ms-animation-name: fadeInUp; -o-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translateY(-20px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-ms-keyframes fadeInDown { 0% { opacity: 0; -ms-transform: translateY(-20px); } 100% { opacity: 1; -ms-transform: translateY(0); } } @-o-keyframes fadeInDown { 0% { opacity: 0; -ms-transform: translateY(-20px); } 100% { opacity: 1; -ms-transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } .fadeInDown { -webkit-animation-name: fadeInDown; -moz-animation-name: fadeInDown; -ms-animation-name: fadeInDown; -o-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInLeft { 0% { opacity: 0; -moz-transform: translateX(-20px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-ms-keyframes fadeInLeft { 0% { opacity: 0; -ms-transform: translateX(-20px); } 100% { opacity: 1; -ms-transform: translateX(0); } } @-o-keyframes fadeInLeft { 0% { opacity: 0; -o-transform: translateX(-20px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: translateX(0); } } .fadeInLeft { -webkit-animation-name: fadeInLeft; -moz-animation-name: fadeInLeft; -ms-animation-name: fadeInLeft; -o-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInRight { 0% { opacity: 0; -moz-transform: translateX(20px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-ms-keyframes fadeInRight { 0% { opacity: 0; -ms-transform: translateX(20px); } 100% { opacity: 1; -ms-transform: translateX(0); } } @-o-keyframes fadeInRight { 0% { opacity: 0; -o-transform: translateX(20px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInRight { 0% { opacity: 0; transform: translateX(20px); } 100% { opacity: 1; transform: translateX(0); } } .fadeInRight { -webkit-animation-name: fadeInRight; -moz-animation-name: fadeInRight; -ms-animation-name: fadeInRight; -o-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInUpBig { 0% { opacity: 0; -moz-transform: translateY(2000px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-ms-keyframes fadeInUpBig { 0% { opacity: 0; -ms-transform: translateY(2000px); } 100% { opacity: 1; -ms-transform: translateY(0); } } @-o-keyframes fadeInUpBig { 0% { opacity: 0; -o-transform: translateY(2000px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeInUpBig { 0% { opacity: 0; transform: translateY(2000px); } 100% { opacity: 1; transform: translateY(0); } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; -moz-animation-name: fadeInUpBig; -ms-animation-name: fadeInUpBig; -o-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInDownBig { 0% { opacity: 0; -moz-transform: translateY(-2000px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-ms-keyframes fadeInDownBig { 0% { opacity: 0; -ms-transform: translateY(-2000px); } 100% { opacity: 1; -ms-transform: translateY(0); } } @-o-keyframes fadeInDownBig { 0% { opacity: 0; -o-transform: translateY(-2000px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeInDownBig { 0% { opacity: 0; transform: translateY(-2000px); } 100% { opacity: 1; transform: translateY(0); } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; -moz-animation-name: fadeInDownBig; -ms-animation-name: fadeInDownBig; -o-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInLeftBig { 0% { opacity: 0; -moz-transform: translateX(-2000px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-ms-keyframes fadeInLeftBig { 0% { opacity: 0; -ms-transform: translateX(-2000px); } 100% { opacity: 1; -ms-transform: translateX(0); } } @-o-keyframes fadeInLeftBig { 0% { opacity: 0; -o-transform: translateX(-2000px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInLeftBig { 0% { opacity: 0; transform: translateX(-2000px); } 100% { opacity: 1; transform: translateX(0); } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; -moz-animation-name: fadeInLeftBig; -ms-animation-name: fadeInLeftBig; -o-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInRightBig { 0% { opacity: 0; -moz-transform: translateX(2000px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-ms-keyframes fadeInRightBig { 0% { opacity: 0; -ms-transform: translateX(2000px); } 100% { opacity: 1; -ms-transform: translateX(0); } } @-o-keyframes fadeInRightBig { 0% { opacity: 0; -o-transform: translateX(2000px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInRightBig { 0% { opacity: 0; transform: translateX(2000px); } 100% { opacity: 1; transform: translateX(0); } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; -moz-animation-name: fadeInRightBig; -ms-animation-name: fadeInRightBig; -o-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeOut { 0% {opacity: 1;} 100% {opacity: 0;} } @-moz-keyframes fadeOut { 0% {opacity: 1;} 100% {opacity: 0;} } @-ms-keyframes fadeOut { 0% {opacity: 1;} 100% {opacity: 0;} } @-o-keyframes fadeOut { 0% {opacity: 1;} 100% {opacity: 0;} } @keyframes fadeOut { 0% {opacity: 1;} 100% {opacity: 0;} } .fadeOut { -webkit-animation-name: fadeOut; -moz-animation-name: fadeOut; -ms-animation-name: fadeOut; -o-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); } } @-moz-keyframes fadeOutUp { 0% { opacity: 1; -moz-transform: translateY(0); } 100% { opacity: 0; -moz-transform: translateY(-20px); } } @-ms-keyframes fadeOutUp { 0% { opacity: 1; -ms-transform: translateY(0); } 100% { opacity: 0; -ms-transform: translateY(-20px); } } @-o-keyframes fadeOutUp { 0% { opacity: 1; -o-transform: translateY(0); } 100% { opacity: 0; -o-transform: translateY(-20px); } } @keyframes fadeOutUp { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-20px); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; -moz-animation-name: fadeOutUp; -ms-animation-name: fadeOutUp; -o-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); } } @-moz-keyframes fadeOutDown { 0% { opacity: 1; -moz-transform: translateY(0); } 100% { opacity: 0; -moz-transform: translateY(20px); } } @-ms-keyframes fadeOutDown { 0% { opacity: 1; -ms-transform: translateY(0); } 100% { opacity: 0; -ms-transform: translateY(20px); } } @-o-keyframes fadeOutDown { 0% { opacity: 1; -o-transform: translateY(0); } 100% { opacity: 0; -o-transform: translateY(20px); } } @keyframes fadeOutDown { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(20px); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; -moz-animation-name: fadeOutDown; -ms-animation-name: fadeOutDown; -o-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); } } @-moz-keyframes fadeOutLeft { 0% { opacity: 1; -moz-transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(-20px); } } @-ms-keyframes fadeOutLeft { 0% { opacity: 1; -ms-transform: translateX(0); } 100% { opacity: 0; -ms-transform: translateX(-20px); } } @-o-keyframes fadeOutLeft { 0% { opacity: 1; -o-transform: translateX(0); } 100% { opacity: 0; -o-transform: translateX(-20px); } } @keyframes fadeOutLeft { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-20px); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; -moz-animation-name: fadeOutLeft; -ms-animation-name: fadeOutLeft; -o-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); } } @-moz-keyframes fadeOutRight { 0% { opacity: 1; -moz-transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(20px); } } @-ms-keyframes fadeOutRight { 0% { opacity: 1; -ms-transform: translateX(0); } 100% { opacity: 0; -ms-transform: translateX(20px); } } @-o-keyframes fadeOutRight { 0% { opacity: 1; -o-transform: translateX(0); } 100% { opacity: 0; -o-transform: translateX(20px); } } @keyframes fadeOutRight { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(20px); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; -moz-animation-name: fadeOutRight; -ms-animation-name: fadeOutRight; -o-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); } } @-moz-keyframes fadeOutUpBig { 0% { opacity: 1; -moz-transform: translateY(0); } 100% { opacity: 0; -moz-transform: translateY(-2000px); } } @-ms-keyframes fadeOutUpBig { 0% { opacity: 1; -ms-transform: translateY(0); } 100% { opacity: 0; -ms-transform: translateY(-2000px); } } @-o-keyframes fadeOutUpBig { 0% { opacity: 1; -o-transform: translateY(0); } 100% { opacity: 0; -o-transform: translateY(-2000px); } } @keyframes fadeOutUpBig { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-2000px); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; -moz-animation-name: fadeOutUpBig; -ms-animation-name: fadeOutUpBig; -o-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); } } @-moz-keyframes fadeOutDownBig { 0% { opacity: 1; -moz-transform: translateY(0); } 100% { opacity: 0; -moz-transform: translateY(2000px); } } @-ms-keyframes fadeOutDownBig { 0% { opacity: 1; -ms-transform: translateY(0); } 100% { opacity: 0; -ms-transform: translateY(2000px); } } @-o-keyframes fadeOutDownBig { 0% { opacity: 1; -o-transform: translateY(0); } 100% { opacity: 0; -o-transform: translateY(2000px); } } @keyframes fadeOutDownBig { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(2000px); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; -moz-animation-name: fadeOutDownBig; -ms-animation-name: fadeOutDownBig; -o-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); } } @-moz-keyframes fadeOutLeftBig { 0% { opacity: 1; -moz-transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(-2000px); } } @-ms-keyframes fadeOutLeftBig { 0% { opacity: 1; -ms-transform: translateX(0); } 100% { opacity: 0; -ms-transform: translateX(-2000px); } } @-o-keyframes fadeOutLeftBig { 0% { opacity: 1; -o-transform: translateX(0); } 100% { opacity: 0; -o-transform: translateX(-2000px); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-2000px); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; -moz-animation-name: fadeOutLeftBig; -ms-animation-name: fadeOutLeftBig; -o-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); } } @-moz-keyframes fadeOutRightBig { 0% { opacity: 1; -moz-transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(2000px); } } @-ms-keyframes fadeOutRightBig { 0% { opacity: 1; -ms-transform: translateX(0); } 100% { opacity: 0; -ms-transform: translateX(2000px); } } @-o-keyframes fadeOutRightBig { 0% { opacity: 1; -o-transform: translateX(0); } 100% { opacity: 0; -o-transform: translateX(2000px); } } @keyframes fadeOutRightBig { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(2000px); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; -moz-animation-name: fadeOutRightBig; -ms-animation-name: fadeOutRightBig; -o-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); } 70% { -webkit-transform: scale(.9); } 100% { -webkit-transform: scale(1); } } @-moz-keyframes bounceIn { 0% { opacity: 0; -moz-transform: scale(.3); } 50% { opacity: 1; -moz-transform: scale(1.05); } 70% { -moz-transform: scale(.9); } 100% { -moz-transform: scale(1); } } @-ms-keyframes bounceIn { 0% { opacity: 0; -ms-transform: scale(.3); } 50% { opacity: 1; -ms-transform: scale(1.05); } 70% { -ms-transform: scale(.9); } 100% { -ms-transform: scale(1); } } @-o-keyframes bounceIn { 0% { opacity: 0; -o-transform: scale(.3); } 50% { opacity: 1; -o-transform: scale(1.05); } 70% { -o-transform: scale(.9); } 100% { -o-transform: scale(1); } } @keyframes bounceIn { 0% { opacity: 0; transform: scale(.3); } 50% { opacity: 1; transform: scale(1.05); } 70% { transform: scale(.9); } 100% { transform: scale(1); } } .bounceIn { -webkit-animation-name: bounceIn; -moz-animation-name: bounceIn; -ms-animation-name: bounceIn; -o-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); } 100% { -webkit-transform: translateY(0); } } @-moz-keyframes bounceInUp { 0% { opacity: 0; -moz-transform: translateY(2000px); } 60% { opacity: 1; -moz-transform: translateY(-30px); } 80% { -moz-transform: translateY(10px); } 100% { -moz-transform: translateY(0); } } @-ms-keyframes bounceInUp { 0% { opacity: 0; -ms-transform: translateY(2000px); } 60% { opacity: 1; -ms-transform: translateY(-30px); } 80% { -ms-transform: translateY(10px); } 100% { -ms-transform: translateY(0); } } @-o-keyframes bounceInUp { 0% { opacity: 0; -o-transform: translateY(2000px); } 60% { opacity: 1; -o-transform: translateY(-30px); } 80% { -o-transform: translateY(10px); } 100% { -o-transform: translateY(0); } } @keyframes bounceInUp { 0% { opacity: 0; transform: translateY(2000px); } 60% { opacity: 1; transform: translateY(-30px); } 80% { transform: translateY(10px); } 100% { transform: translateY(0); } } .bounceInUp { -webkit-animation-name: bounceInUp; -moz-animation-name: bounceInUp; -ms-animation-name: bounceInUp; -o-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); } } @-moz-keyframes bounceInDown { 0% { opacity: 0; -moz-transform: translateY(-2000px); } 60% { opacity: 1; -moz-transform: translateY(30px); } 80% { -moz-transform: translateY(-10px); } 100% { -moz-transform: translateY(0); } } @-ms-keyframes bounceInDown { 0% { opacity: 0; -ms-transform: translateY(-2000px); } 60% { opacity: 1; -ms-transform: translateY(30px); } 80% { -ms-transform: translateY(-10px); } 100% { -ms-transform: translateY(0); } } @-o-keyframes bounceInDown { 0% { opacity: 0; -o-transform: translateY(-2000px); } 60% { opacity: 1; -o-transform: translateY(30px); } 80% { -o-transform: translateY(-10px); } 100% { -o-transform: translateY(0); } } @keyframes bounceInDown { 0% { opacity: 0; transform: translateY(-2000px); } 60% { opacity: 1; transform: translateY(30px); } 80% { transform: translateY(-10px); } 100% { transform: translateY(0); } } .bounceInDown { -webkit-animation-name: bounceInDown; -moz-animation-name: bounceInDown; -ms-animation-name: bounceInDown; -o-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); } } @-moz-keyframes bounceInLeft { 0% { opacity: 0; -moz-transform: translateX(-2000px); } 60% { opacity: 1; -moz-transform: translateX(30px); } 80% { -moz-transform: translateX(-10px); } 100% { -moz-transform: translateX(0); } } @-ms-keyframes bounceInLeft { 0% { opacity: 0; -ms-transform: translateX(-2000px); } 60% { opacity: 1; -ms-transform: translateX(30px); } 80% { -ms-transform: translateX(-10px); } 100% { -ms-transform: translateX(0); } } @-o-keyframes bounceInLeft { 0% { opacity: 0; -o-transform: translateX(-2000px); } 60% { opacity: 1; -o-transform: translateX(30px); } 80% { -o-transform: translateX(-10px); } 100% { -o-transform: translateX(0); } } @keyframes bounceInLeft { 0% { opacity: 0; transform: translateX(-2000px); } 60% { opacity: 1; transform: translateX(30px); } 80% { transform: translateX(-10px); } 100% { transform: translateX(0); } } .bounceInLeft { -webkit-animation-name: bounceInLeft; -moz-animation-name: bounceInLeft; -ms-animation-name: bounceInLeft; -o-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); } 100% { -webkit-transform: translateX(0); } } @-moz-keyframes bounceInRight { 0% { opacity: 0; -moz-transform: translateX(2000px); } 60% { opacity: 1; -moz-transform: translateX(-30px); } 80% { -moz-transform: translateX(10px); } 100% { -moz-transform: translateX(0); } } @-ms-keyframes bounceInRight { 0% { opacity: 0; -ms-transform: translateX(2000px); } 60% { opacity: 1; -ms-transform: translateX(-30px); } 80% { -ms-transform: translateX(10px); } 100% { -ms-transform: translateX(0); } } @-o-keyframes bounceInRight { 0% { opacity: 0; -o-transform: translateX(2000px); } 60% { opacity: 1; -o-transform: translateX(-30px); } 80% { -o-transform: translateX(10px); } 100% { -o-transform: translateX(0); } } @keyframes bounceInRight { 0% { opacity: 0; transform: translateX(2000px); } 60% { opacity: 1; transform: translateX(-30px); } 80% { transform: translateX(10px); } 100% { transform: translateX(0); } } .bounceInRight { -webkit-animation-name: bounceInRight; -moz-animation-name: bounceInRight; -ms-animation-name: bounceInRight; -o-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceOut { 0% { -webkit-transform: scale(1); } 25% { -webkit-transform: scale(.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(.3); } } @-moz-keyframes bounceOut { 0% { -moz-transform: scale(1); } 25% { -moz-transform: scale(.95); } 50% { opacity: 1; -moz-transform: scale(1.1); } 100% { opacity: 0; -moz-transform: scale(.3); } } @-ms-keyframes bounceOut { 0% { -ms-transform: scale(1); } 25% { -ms-transform: scale(.95); } 50% { opacity: 1; -ms-transform: scale(1.1); } 100% { opacity: 0; -ms-transform: scale(.3); } } @-o-keyframes bounceOut { 0% { -o-transform: scale(1); } 25% { -o-transform: scale(.95); } 50% { opacity: 1; -o-transform: scale(1.1); } 100% { opacity: 0; -o-transform: scale(.3); } } @keyframes bounceOut { 0% { transform: scale(1); } 25% { transform: scale(.95); } 50% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(.3); } } .bounceOut { -webkit-animation-name: bounceOut; -moz-animation-name: bounceOut; -ms-animation-name: bounceOut; -o-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); } } @-moz-keyframes bounceOutUp { 0% { -moz-transform: translateY(0); } 20% { opacity: 1; -moz-transform: translateY(20px); } 100% { opacity: 0; -moz-transform: translateY(-2000px); } } @-ms-keyframes bounceOutUp { 0% { -ms-transform: translateY(0); } 20% { opacity: 1; -ms-transform: translateY(20px); } 100% { opacity: 0; -ms-transform: translateY(-2000px); } } @-o-keyframes bounceOutUp { 0% { -o-transform: translateY(0); } 20% { opacity: 1; -o-transform: translateY(20px); } 100% { opacity: 0; -o-transform: translateY(-2000px); } } @keyframes bounceOutUp { 0% { transform: translateY(0); } 20% { opacity: 1; transform: translateY(20px); } 100% { opacity: 0; transform: translateY(-2000px); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; -moz-animation-name: bounceOutUp; -ms-animation-name: bounceOutUp; -o-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); } } @-moz-keyframes bounceOutDown { 0% { -moz-transform: translateY(0); } 20% { opacity: 1; -moz-transform: translateY(-20px); } 100% { opacity: 0; -moz-transform: translateY(2000px); } } @-ms-keyframes bounceOutDown { 0% { -ms-transform: translateY(0); } 20% { opacity: 1; -ms-transform: translateY(-20px); } 100% { opacity: 0; -ms-transform: translateY(2000px); } } @keyframes bounceOutDown { 0% { transform: translateY(0); } 20% { opacity: 1; transform: translateY(-20px); } 100% { opacity: 0; transform: translateY(2000px); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; -moz-animation-name: bounceOutDown; -ms-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); } } @-moz-keyframes bounceOutLeft { 0% { -moz-transform: translateX(0); } 20% { opacity: 1; -moz-transform: translateX(20px); } 100% { opacity: 0; -moz-transform: translateX(-2000px); } } @-ms-keyframes bounceOutLeft { 0% { -ms-transform: translateX(0); } 20% { opacity: 1; -ms-transform: translateX(20px); } 100% { opacity: 0; -ms-transform: translateX(-2000px); } } @-o-keyframes bounceOutLeft { 0% { -o-transform: translateX(0); } 20% { opacity: 1; -o-transform: translateX(20px); } 100% { opacity: 0; -o-transform: translateX(-2000px); } } @keyframes bounceOutLeft { 0% { transform: translateX(0); } 20% { opacity: 1; transform: translateX(20px); } 100% { opacity: 0; transform: translateX(-2000px); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; -moz-animation-name: bounceOutLeft; -ms-animation-name: bounceOutLeft; -o-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); } } @-moz-keyframes bounceOutRight { 0% { -moz-transform: translateX(0); } 20% { opacity: 1; -moz-transform: translateX(-20px); } 100% { opacity: 0; -moz-transform: translateX(2000px); } } @-ms-keyframes bounceOutRight { 0% { -ms-transform: translateX(0); } 20% { opacity: 1; -ms-transform: translateX(-20px); } 100% { opacity: 0; -ms-transform: translateX(2000px); } } @-o-keyframes bounceOutRight { 0% { -o-transform: translateX(0); } 20% { opacity: 1; -o-transform: translateX(-20px); } 100% { opacity: 0; -o-transform: translateX(2000px); } } @keyframes bounceOutRight { 0% { transform: translateX(0); } 20% { opacity: 1; transform: translateX(-20px); } 100% { opacity: 0; transform: translateX(2000px); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; -moz-animation-name: bounceOutRight; -ms-animation-name: bounceOutRight; -o-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center center; -webkit-transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin: center center; -webkit-transform: rotate(0); opacity: 1; } } @-moz-keyframes rotateIn { 0% { -moz-transform-origin: center center; -moz-transform: rotate(-200deg); opacity: 0; } 100% { -moz-transform-origin: center center; -moz-transform: rotate(0); opacity: 1; } } @-ms-keyframes rotateIn { 0% { -ms-transform-origin: center center; -ms-transform: rotate(-200deg); opacity: 0; } 100% { -ms-transform-origin: center center; -ms-transform: rotate(0); opacity: 1; } } @-o-keyframes rotateIn { 0% { -o-transform-origin: center center; -o-transform: rotate(-200deg); opacity: 0; } 100% { -o-transform-origin: center center; -o-transform: rotate(0); opacity: 1; } } @keyframes rotateIn { 0% { transform-origin: center center; transform: rotate(-200deg); opacity: 0; } 100% { transform-origin: center center; transform: rotate(0); opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; -moz-animation-name: rotateIn; -ms-animation-name: rotateIn; -o-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; } } @-moz-keyframes rotateInUpLeft { 0% { -moz-transform-origin: left bottom; -moz-transform: rotate(90deg); opacity: 0; } 100% { -moz-transform-origin: left bottom; -moz-transform: rotate(0); opacity: 1; } } @-ms-keyframes rotateInUpLeft { 0% { -ms-transform-origin: left bottom; -ms-transform: rotate(90deg); opacity: 0; } 100% { -ms-transform-origin: left bottom; -ms-transform: rotate(0); opacity: 1; } } @-o-keyframes rotateInUpLeft { 0% { -o-transform-origin: left bottom; -o-transform: rotate(90deg); opacity: 0; } 100% { -o-transform-origin: left bottom; -o-transform: rotate(0); opacity: 1; } } @keyframes rotateInUpLeft { 0% { transform-origin: left bottom; transform: rotate(90deg); opacity: 0; } 100% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; -moz-animation-name: rotateInUpLeft; -ms-animation-name: rotateInUpLeft; -o-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; } } @-moz-keyframes rotateInDownLeft { 0% { -moz-transform-origin: left bottom; -moz-transform: rotate(-90deg); opacity: 0; } 100% { -moz-transform-origin: left bottom; -moz-transform: rotate(0); opacity: 1; } } @-ms-keyframes rotateInDownLeft { 0% { -ms-transform-origin: left bottom; -ms-transform: rotate(-90deg); opacity: 0; } 100% { -ms-transform-origin: left bottom; -ms-transform: rotate(0); opacity: 1; } } @-o-keyframes rotateInDownLeft { 0% { -o-transform-origin: left bottom; -o-transform: rotate(-90deg); opacity: 0; } 100% { -o-transform-origin: left bottom; -o-transform: rotate(0); opacity: 1; } } @keyframes rotateInDownLeft { 0% { transform-origin: left bottom; transform: rotate(-90deg); opacity: 0; } 100% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; -moz-animation-name: rotateInDownLeft; -ms-animation-name: rotateInDownLeft; -o-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1; } } @-moz-keyframes rotateInUpRight { 0% { -moz-transform-origin: right bottom; -moz-transform: rotate(-90deg); opacity: 0; } 100% { -moz-transform-origin: right bottom; -moz-transform: rotate(0); opacity: 1; } } @-ms-keyframes rotateInUpRight { 0% { -ms-transform-origin: right bottom; -ms-transform: rotate(-90deg); opacity: 0; } 100% { -ms-transform-origin: right bottom; -ms-transform: rotate(0); opacity: 1; } } @-o-keyframes rotateInUpRight { 0% { -o-transform-origin: right bottom; -o-transform: rotate(-90deg); opacity: 0; } 100% { -o-transform-origin: right bottom; -o-transform: rotate(0); opacity: 1; } } @keyframes rotateInUpRight { 0% { transform-origin: right bottom; transform: rotate(-90deg); opacity: 0; } 100% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; -moz-animation-name: rotateInUpRight; -ms-animation-name: rotateInUpRight; -o-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1; } } @-moz-keyframes rotateInDownRight { 0% { -moz-transform-origin: right bottom; -moz-transform: rotate(90deg); opacity: 0; } 100% { -moz-transform-origin: right bottom; -moz-transform: rotate(0); opacity: 1; } } @-ms-keyframes rotateInDownRight { 0% { -ms-transform-origin: right bottom; -ms-transform: rotate(90deg); opacity: 0; } 100% { -ms-transform-origin: right bottom; -ms-transform: rotate(0); opacity: 1; } } @-o-keyframes rotateInDownRight { 0% { -o-transform-origin: right bottom; -o-transform: rotate(90deg); opacity: 0; } 100% { -o-transform-origin: right bottom; -o-transform: rotate(0); opacity: 1; } } @keyframes rotateInDownRight { 0% { transform-origin: right bottom; transform: rotate(90deg); opacity: 0; } 100% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; -moz-animation-name: rotateInDownRight; -ms-animation-name: rotateInDownRight; -o-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes rotateOut { 0% { -webkit-transform-origin: center center; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: center center; -webkit-transform: rotate(200deg); opacity: 0; } } @-moz-keyframes rotateOut { 0% { -moz-transform-origin: center center; -moz-transform: rotate(0); opacity: 1; } 100% { -moz-transform-origin: center center; -moz-transform: rotate(200deg); opacity: 0; } } @-ms-keyframes rotateOut { 0% { -ms-transform-origin: center center; -ms-transform: rotate(0); opacity: 1; } 100% { -ms-transform-origin: center center; -ms-transform: rotate(200deg); opacity: 0; } } @-o-keyframes rotateOut { 0% { -o-transform-origin: center center; -o-transform: rotate(0); opacity: 1; } 100% { -o-transform-origin: center center; -o-transform: rotate(200deg); opacity: 0; } } @keyframes rotateOut { 0% { transform-origin: center center; transform: rotate(0); opacity: 1; } 100% { transform-origin: center center; transform: rotate(200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; -moz-animation-name: rotateOut; -ms-animation-name: rotateOut; -o-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(-90deg); opacity: 0; } } @-moz-keyframes rotateOutUpLeft { 0% { -moz-transform-origin: left bottom; -moz-transform: rotate(0); opacity: 1; } 100% { -moz-transform-origin: left bottom; -moz-transform: rotate(-90deg); opacity: 0; } } @-ms-keyframes rotateOutUpLeft { 0% { -ms-transform-origin: left bottom; -ms-transform: rotate(0); opacity: 1; } 100% { -ms-transform-origin: left bottom; -ms-transform: rotate(-90deg); opacity: 0; } } @-o-keyframes rotateOutUpLeft { 0% { -o-transform-origin: left bottom; -o-transform: rotate(0); opacity: 1; } 100% { -o-transform-origin: left bottom; -o-transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutUpLeft { 0% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } 100% { -transform-origin: left bottom; -transform: rotate(-90deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; -moz-animation-name: rotateOutUpLeft; -ms-animation-name: rotateOutUpLeft; -o-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(90deg); opacity: 0; } } @-moz-keyframes rotateOutDownLeft { 0% { -moz-transform-origin: left bottom; -moz-transform: rotate(0); opacity: 1; } 100% { -moz-transform-origin: left bottom; -moz-transform: rotate(90deg); opacity: 0; } } @-ms-keyframes rotateOutDownLeft { 0% { -ms-transform-origin: left bottom; -ms-transform: rotate(0); opacity: 1; } 100% { -ms-transform-origin: left bottom; -ms-transform: rotate(90deg); opacity: 0; } } @-o-keyframes rotateOutDownLeft { 0% { -o-transform-origin: left bottom; -o-transform: rotate(0); opacity: 1; } 100% { -o-transform-origin: left bottom; -o-transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutDownLeft { 0% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } 100% { transform-origin: left bottom; transform: rotate(90deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; -moz-animation-name: rotateOutDownLeft; -ms-animation-name: rotateOutDownLeft; -o-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(90deg); opacity: 0; } } @-moz-keyframes rotateOutUpRight { 0% { -moz-transform-origin: right bottom; -moz-transform: rotate(0); opacity: 1; } 100% { -moz-transform-origin: right bottom; -moz-transform: rotate(90deg); opacity: 0; } } @-ms-keyframes rotateOutUpRight { 0% { -ms-transform-origin: right bottom; -ms-transform: rotate(0); opacity: 1; } 100% { -ms-transform-origin: right bottom; -ms-transform: rotate(90deg); opacity: 0; } } @-o-keyframes rotateOutUpRight { 0% { -o-transform-origin: right bottom; -o-transform: rotate(0); opacity: 1; } 100% { -o-transform-origin: right bottom; -o-transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutUpRight { 0% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } 100% { transform-origin: right bottom; transform: rotate(90deg); opacity: 0; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; -moz-animation-name: rotateOutUpRight; -ms-animation-name: rotateOutUpRight; -o-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @-webkit-keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(-90deg); opacity: 0; } } @-moz-keyframes rotateOutDownRight { 0% { -moz-transform-origin: right bottom; -moz-transform: rotate(0); opacity: 1; } 100% { -moz-transform-origin: right bottom; -moz-transform: rotate(-90deg); opacity: 0; } } @-ms-keyframes rotateOutDownRight { 0% { -ms-transform-origin: right bottom; -ms-transform: rotate(0); opacity: 1; } 100% { -ms-transform-origin: right bottom; -ms-transform: rotate(-90deg); opacity: 0; } } @-o-keyframes rotateOutDownRight { 0% { -o-transform-origin: right bottom; -o-transform: rotate(0); opacity: 1; } 100% { -o-transform-origin: right bottom; -o-transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutDownRight { 0% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } 100% { transform-origin: right bottom; transform: rotate(-90deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; -moz-animation-name: rotateOutDownRight; -ms-animation-name: rotateOutDownRight; -o-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-webkit-keyframes hinge { 0% { -webkit-transform: rotate(0); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 40% { -webkit-transform: rotate(60deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 80% { -webkit-transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 100% { -webkit-transform: translateY(700px); opacity: 0; } } @-moz-keyframes hinge { 0% { -moz-transform: rotate(0); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } 20%, 60% { -moz-transform: rotate(80deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } 40% { -moz-transform: rotate(60deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } 80% { -moz-transform: rotate(60deg) translateY(0); opacity: 1; -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } 100% { -moz-transform: translateY(700px); opacity: 0; } } @-ms-keyframes hinge { 0% { -ms-transform: rotate(0); -ms-transform-origin: top left; -ms-animation-timing-function: ease-in-out; } 20%, 60% { -ms-transform: rotate(80deg); -ms-transform-origin: top left; -ms-animation-timing-function: ease-in-out; } 40% { -ms-transform: rotate(60deg); -ms-transform-origin: top left; -ms-animation-timing-function: ease-in-out; } 80% { -ms-transform: rotate(60deg) translateY(0); opacity: 1; -ms-transform-origin: top left; -ms-animation-timing-function: ease-in-out; } 100% { -ms-transform: translateY(700px); opacity: 0; } } @-o-keyframes hinge { 0% { -o-transform: rotate(0); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } 20%, 60% { -o-transform: rotate(80deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } 40% { -o-transform: rotate(60deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } 80% { -o-transform: rotate(60deg) translateY(0); opacity: 1; -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } 100% { -o-transform: translateY(700px); opacity: 0; } } @keyframes hinge { 0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; } 20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; } 40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; } 80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; } 100% { transform: translateY(700px); opacity: 0; } } .hinge { -webkit-animation-name: hinge; -moz-animation-name: hinge; -ms-animation-name: hinge; -o-animation-name: hinge; animation-name: hinge; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); } } @-moz-keyframes rollIn { 0% { opacity: 0; -moz-transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg); } } @-ms-keyframes rollIn { 0% { opacity: 0; -ms-transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -ms-transform: translateX(0px) rotate(0deg); } } @-o-keyframes rollIn { 0% { opacity: 0; -o-transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -o-transform: translateX(0px) rotate(0deg); } } @keyframes rollIn { 0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; transform: translateX(0px) rotate(0deg); } } .rollIn { -webkit-animation-name: rollIn; -moz-animation-name: rollIn; -ms-animation-name: rollIn; -o-animation-name: rollIn; animation-name: rollIn; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); } } @-moz-keyframes rollOut { 0% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -moz-transform: translateX(100%) rotate(120deg); } } @-ms-keyframes rollOut { 0% { opacity: 1; -ms-transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -ms-transform: translateX(100%) rotate(120deg); } } @-o-keyframes rollOut { 0% { opacity: 1; -o-transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -o-transform: translateX(100%) rotate(120deg); } } @keyframes rollOut { 0% { opacity: 1; transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; transform: translateX(100%) rotate(120deg); } } .rollOut { -webkit-animation-name: rollOut; -moz-animation-name: rollOut; -ms-animation-name: rollOut; -o-animation-name: rollOut; animation-name: rollOut; } /* AnythingSlider v1.8+ Default theme By Chris Coyier: http://css-tricks.com with major improvements by Doug Neiner: http://pixelgraphics.us/ based on work by Remy Sharp: http://jqueryfordesigners.com/ */ /***************************** SET DEFAULT DIMENSIONS HERE *****************************/ /* change the ID & dimensions to match your slider */ #slider { width: 700px; height: 390px; list-style: none; /* Prevent FOUC (see FAQ page) and keep things readable if javascript is disabled */ overflow-y: auto; overflow-x: hidden; } /****************** SET STYLING HERE ****************** ================================= Default state (no keyboard focus) ==================================*/ /* Overall Wrapper */ .anythingSlider-default { /*margin: 0 auto;*/ /* 45px right & left padding for the arrows, 28px @ bottom for navigation */ padding: 0 0px 28px 0px; } /* slider window - top & bottom borders, default state */ .anythingSlider-default .anythingWindow { border-top: 3px solid #777; border-bottom: 3px solid #777; } /* Navigation buttons + start/stop button, default state */ .anythingSlider-default .anythingControls a { /* top shadow */ background: #777 url(../images/default.png) center -288px repeat-x; color: #000; border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; } /* Make sure navigation text is visible */ .anythingSlider-default .anythingControls a span { visibility: visible; } /* Navigation current button, default state */ .anythingSlider-default .anythingControls a.cur { background: #888; color: #000; } /* start-stop button, stopped, default state */ .anythingSlider-default .anythingControls a.start-stop { background-color: #040; color: #ddd; } /* start-stop button, playing, default state */ .anythingSlider-default .anythingControls a.start-stop.playing { background-color: #800; } /* start-stop button, default hovered text color (when visible) */ /* hide nav/start-stop background image shadow on hover - makes the button appear to come forward */ .anythingSlider-default .anythingControls a.start-stop:hover, .anythingSlider-default .anythingControls a.start-stop.hover, .anythingSlider-default .anythingControls a.start-stop .anythingControls ul a:hover { background-image: none; color: #ddd; } /* ================================= Active State (has keyboard focus) ================================= */ /* slider window - top & bottom borders, active state */ .anythingSlider-default.activeSlider .anythingWindow { border-color: #93877E; } /* Navigation buttons, active state */ .anythingSlider-default.activeSlider .anythingControls a { /* background image = top shadow */ background-color: #F1AA00; } /* Navigation current & hovered button, active state */ .anythingSlider-default.activeSlider .anythingControls a.cur, .anythingSlider-default.activeSlider .anythingControls a:hover { /* background image removed */ background: #F1E000; } /* start-stop button, stopped, active state */ .anythingSlider-default.activeSlider .anythingControls a.start-stop { background-color: #9CC13E; color: #fff; } /* start-stop button, playing, active state */ .anythingSlider-default.activeSlider .anythingControls a.start-stop.playing { background-color: #CC2127; color: #fff; } /* start-stop button, active slider hovered text color (when visible) */ .anythingSlider-default.activeSlider .start-stop:hover, .anythingSlider-default.activeSlider .start-stop.hover { color: #fff; } /************************ NAVIGATION POSITIONING ************************/ /* Navigation Arrows */ .anythingSlider-default .arrow { top: 50%; position: absolute; display: block; } .anythingSlider-default .arrow a { display: block; width: 45px; height: 140px; margin: -70px 0 0 0; /* half height of image */ text-align: center; outline: 0; background: url(../images/default.png) no-repeat; } /* back arrow */ .anythingSlider-default .back { left: 0; } .anythingSlider-default .back a { background-position: left top; } .anythingSlider-default .back a:hover, .anythingSlider-default .back a.hover { background-position: left -140px; } /* forward arrow */ .anythingSlider-default .forward { right: 0; } .anythingSlider-default .forward a { background-position: right top; } .anythingSlider-default .forward a:hover, .anythingSlider-default .forward a.hover { background-position: right -140px; } /* Navigation Links */ .anythingSlider-default .anythingControls { outline: 0; display: none; } .anythingSlider-default .anythingControls ul { margin: 0; padding: 0; float: left; } .anythingSlider-default .anythingControls ul li { display: inline; } .anythingSlider-default .anythingControls ul a { font: 11px/18px Georgia, Serif; display: inline-block; text-decoration: none; padding: 2px 8px; height: 18px; margin: 0 5px 0 0; text-align: center; outline: 0; } /* navigationSize window */ .anythingSlider-default .anythingControls .anythingNavWindow { overflow: hidden; float: left; } /* Autoplay Start/Stop button */ .anythingSlider-default .anythingControls .start-stop { padding: 2px 5px; width: 40px; text-align: center; text-decoration: none; float: right; z-index: 100; outline: 0; } /*********************** IE8 AND OLDER STYLING ***********************/ /* Navigation Arrows */ .as-oldie .anythingSlider-default .arrow { top: 30%; } .as-oldie .anythingSlider-default .arrow a { margin: 0; } /* margin between nav buttons just looks better */ .as-oldie .anythingSlider-default .anythingControls li { margin-left: 3px; } /* When using the navigationSize option, the side margins need to be zero None of the navigation panels look good in IE7 now =( */ .as-oldie .anythingSlider-default .anythingControls a { margin: 0; } .as-oldie .anythingSlider-default .anythingNavWindow { margin: 0 2px; } .as-oldie .anythingSlider-default .anythingNavWindow li { padding: 3px 0 0 0; } /*********************** COMMON SLIDER STYLING ***********************/ /* Overall Wrapper */ .anythingSlider { display: block; overflow: visible !important; position: relative; } /* anythingSlider viewport window */ .anythingSlider .anythingWindow { overflow: hidden; position: relative; width: 100%; height: 100%; } /* anythingSlider base (original element) */ .anythingSlider .anythingBase { background: transparent; list-style: none; position: absolute; overflow: visible !important; top: 0; left: 0; margin: 0; padding: 0; } /* Navigation arrow text; indent moved to span inside "a", for IE7; apparently, a negative text-indent on an "a" link moves the link as well as the text */ .anythingSlider .arrow span { display: block; visibility: hidden; } /* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */ .anythingSlider .arrow.disabled { display: none; } /* all panels inside the slider; horizontal mode */ .anythingSlider .panel { background: transparent; display: block; overflow: hidden; float: left; padding: 0; margin: 0; } /* vertical mode */ .anythingSlider .vertical .panel { float: none; } /* fade mode */ .anythingSlider .fade .panel { float: none; position: absolute; top: 0; left: 0; z-index: 0; } /* fade mode active page - visible & on top */ .anythingSlider .fade .activePage { z-index: 1; } /*********************** RTL STYLING ***********************/ /* slider autoplay right-to-left, reverse order of nav links to look better */ .anythingSlider.rtl .anythingWindow { direction: ltr; unicode-bidi: bidi-override; } .anythingSlider.rtl .anythingControls ul { float: left; } /* move nav link group to left */ .anythingSlider.rtl .anythingControls ul a { float: right; } /* reverse order of nav links */ .anythingSlider.rtl .start-stop { /* float: right; */ } /* move start/stop button - in case you want to switch sides */ /* probably not necessary, but added just in case */ .anythingSlider, .anythingSlider .anythingWindow, .anythingSlider .anythingControls ul a, .anythingSlider .arrow a, .anythingSlider .start-stop { transition-duration: 0s; -o-transition-duration: 0s; -moz-transition-duration: 0s; -webkit-transition-duration: 0s; } /* AnythingSlider v1.8+ Construction theme By Rob Garrison */ /***************************** SET DEFAULT DIMENSIONS HERE *****************************/ /* change the ID & dimensions to match your slider */ #slider { width: 700px; height: 390px; list-style: none; /* Prevent FOUC (see FAQ page) and keep things readable if javascript is disabled */ overflow-y: auto; overflow-x: hidden; } /****************** SET STYLING HERE ****************** ================================= Default state (no keyboard focus) =================================*/ /* Overall Wrapper */ .anythingSlider-construction { margin: 0 auto; /* 45px right & left padding for the navigation arrows */ padding: 0 45px; } /* slider window - top & bottom borders, default state */ .anythingSlider-construction .anythingWindow { border-top: 3px solid #333; border-bottom: 3px solid #333; } /* Navigation buttons + start/stop button, default state */ .anythingSlider-construction .anythingControls a { background: transparent url(../images/construction.gif) -52px top no-repeat; color: #fff; } /* Navigation current button, default state */ .anythingSlider-construction .anythingControls a.cur, .anythingSlider-construction .anythingControls a:hover { background-position: -52px -18px; color: #000; } /* start-stop button, stopped, default state */ .anythingSlider-construction .anythingControls a.start-stop { background-position: -52px -35px; } /* start-stop button, playing, default state */ .anythingSlider-construction .anythingControls a.start-stop.playing { background-position: -52px -52px; } /* start-stop button, default hovered text color (when visible) */ /* hide nav/start-stop background image shadow on hover - makes the button appear to come forward */ .anythingSlider-construction .anythingControls a.start-stop:hover, .anythingSlider-construction .anythingControls a.start-stop.hover, .anythingSlider-construction .anythingControls a.start-stop .anythingControls ul a:hover { background-position: -52px -18px; } /* ================================= Active State (has keyboard focus) ================================= */ /* slider window - top & bottom borders, active state */ .anythingSlider-construction.activeSlider .anythingWindow { border-color: #d0aa0d; } /************************ NAVIGATION POSITIONING ************************/ /* Navigation Arrows */ .anythingSlider-construction .arrow { top: 50%; position: absolute; display: block; } .anythingSlider-construction .arrow a { display: block; width: 45px; height: 200px; margin: -100px 0 0 0; /* half height of image */ text-align: center; outline: 0; background: url(../images/construction.gif) no-repeat; } /* back arrow */ .anythingSlider-construction .back { left: 0; } .anythingSlider-construction .back a { background-position: left center; border-radius: 5px 0 0 5px; -moz-border-radius: 5px 0 0 5px; -webkit-border-radius: 5px 0 0 5px; } .anythingSlider-construction .back a:hover, .anythingSlider-construction .back a.hover { background-position: -5px center; } /* forward arrow */ .anythingSlider-construction .forward { right: 0; } .anythingSlider-construction .forward a { background-position: right center; border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; -webkit-border-radius: 0 5px 5px 0; } .anythingSlider-construction .forward a:hover, .anythingSlider-construction .forward a.hover { background-position: -67px center; } /* Navigation Links */ .anythingSlider-construction .anythingControls { height: 22px; /* limit height, needed for IE9 of all things */ outline: 0; display: none; float: right; position: absolute; bottom: 5px; right: 20px; margin: 0 45px; /* needed for IE */ z-index: 100; opacity: 0.90; filter: alpha(opacity=90); } .anythingSlider-construction .anythingControls ul { margin: 0; padding: 0; float: left; } .anythingSlider-construction .anythingControls ul li { list-style: none; float: left; margin: 0; padding: 0; } .anythingSlider-construction .anythingControls ul a { display: inline-block; width: 15px; height: 15px; margin: 3px; padding: 0; text-decoration: none; text-align: center; outline: 0; } .anythingSlider-construction .anythingControls span { display: block; visibility: hidden; /* needed for IE8, instead of text-indent: -9999px */ } /* navigationSize window */ .anythingSlider-construction .anythingControls .anythingNavWindow { overflow: hidden; float: left; } /* navigationSize arrows */ .anythingSlider-construction .anythingControls li.next a, .anythingSlider-construction .anythingControls li.prev a { width: 14px; height: 14px; margin: 4px; } /* navigationSize nav arrow positioning */ .anythingSlider-construction .anythingControls li.next a { background-position: -92px -143px; } .anythingSlider-construction .anythingControls li.next a:hover { background-position: -90px -143px; } .anythingSlider-construction .anythingControls li.prev a { background-position: -11px -143px; } .anythingSlider-construction .anythingControls li.prev a:hover { background-position: -13px -143px; } /* Autoplay Start/Stop button */ .anythingSlider-construction .anythingControls .start-stop { display: inline-block; width: 15px; height: 15px; margin: 3px; padding: 0; text-decoration: none; z-index: 100; outline: 0; } /*********************** IE8 AND OLDER STYLING ***********************/ /* Navigation Arrows */ .as-oldie .anythingSlider-construction .arrow { top: 14%; } .as-oldie .anythingSlider-construction .arrow a { margin: 0; } /*********************** COMMON SLIDER STYLING ***********************/ /* Overall Wrapper */ .anythingSlider { display: block; overflow: visible !important; position: relative; } /* anythingSlider viewport window */ .anythingSlider .anythingWindow { overflow: hidden; position: relative; width: 100%; height: 100%; } /* anythingSlider base (original element) */ .anythingSlider .anythingBase { background: transparent; list-style: none; position: absolute; overflow: visible !important; top: 0; left: 0; margin: 0; padding: 0; } /* Navigation arrow text; indent moved to span inside "a", for IE7; apparently, a negative text-indent on an "a" link moves the link as well as the text */ .anythingSlider .arrow span { display: block; visibility: hidden; } /* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */ .anythingSlider .arrow.disabled { display: none; } /* all panels inside the slider; horizontal mode */ .anythingSlider .panel { background: transparent; display: block; overflow: hidden; float: left; padding: 0; margin: 0; } /* vertical mode */ .anythingSlider .vertical .panel { float: none; } /* fade mode */ .anythingSlider .fade .panel { float: none; position: absolute; top: 0; left: 0; z-index: 0; } /* fade mode active page - visible & on top */ .anythingSlider .fade .activePage { z-index: 1; } /*********************** RTL STYLING ***********************/ /* slider autoplay right-to-left, reverse order of nav links to look better */ .anythingSlider.rtl .anythingWindow { direction: ltr; unicode-bidi: bidi-override; } .anythingSlider.rtl .anythingControls ul { float: left; } /* move nav link group to left */ .anythingSlider.rtl .anythingControls ul a { float: right; } /* reverse order of nav links */ .anythingSlider.rtl .start-stop { /* float: right; */ } /* move start/stop button - in case you want to switch sides */ /* probably not necessary, but added just in case */ .anythingSlider .anythingWindow, .anythingSlider .anythingControls ul a, .anythingSlider .arrow a, .anythingSlider .start-stop { transition-duration: 0s; -o-transition-duration: 0s; -moz-transition-duration: 0s; -webkit-transition-duration: 0s; } /* AnythingSlider v1.8+ cs-portfolio theme By Curtis Scott (http://www.curtisscott.com/portfolio.html) *** Note: the nav-cs-portfolio.png used for navigation and slideshow buttons uses a semi-transparent png, through which the background color is seen... so colors set will turn out darker than normal ***/ /***************************** SET DEFAULT DIMENSIONS HERE *****************************/ /* change the ID & dimensions to match your slider */ #slider { width: 700px; height: 390px; list-style: none; /* Prevent FOUC (see FAQ page) and keep things readable if javascript is disabled */ overflow-y: auto; overflow-x: hidden; } /****************** SET STYLING HERE ****************** ================================= Default state (no keyboard focus) ==================================*/ /* Overall Wrapper */ .anythingSlider-cs-portfolio { margin: 0 auto 50px auto; /* added 50px to bottom to accomodate controls */ padding: 0; } /* slider window - top & bottom borders, default state */ .anythingSlider-cs-portfolio .anythingWindow { border: 0; } /* Navigation buttons + start/stop button, default state */ .anythingSlider-cs-portfolio .anythingControls a { background: #fff url(../images/cs-portfolio.png) right -20px no-repeat; color: #000; } /* Navigation current button, default state */ .anythingSlider-cs-portfolio .anythingControls a.cur, .anythingSlider-cs-portfolio .anythingControls a:hover { background-color: #0d5c9f; color: #000; } /* start-stop button, stopped, default state */ .anythingSlider-cs-portfolio .anythingControls a.start-stop { background-color: #080; background-position: right top; color: #ddd; } /* start-stop button, default hovered text color (when visible) */ .anythingSlider-cs-portfolio .anythingControls a.start-stop:hover, .anythingSlider-cs-portfolio .anythingControls a.start-stop.hover { background-color: #0f0; color: #fff; } /* start-stop button, playing, default state */ .anythingSlider-cs-portfolio .anythingControls a.start-stop.playing { background-color: #800; } .anythingSlider-cs-portfolio .anythingControls a.start-stop.playing:hover { background-color: #f00; } /************************ NAVIGATION POSITIONING ************************/ /* Navigation Arrows */ .anythingSlider-cs-portfolio .arrow { display: block; position: absolute; bottom: -38px; z-index: 100; } .anythingSlider-cs-portfolio .arrow a { display: block; width: 26px; height: 27px; text-align: center; outline: 0; background: url(../images/cs-portfolio.png) no-repeat; } /* back arrow */ .anythingSlider-cs-portfolio .back { left: 20px; } .anythingSlider-cs-portfolio .back a { background-position: left top; } .anythingSlider-cs-portfolio .back a:hover, .anythingSlider-cs-portfolio .back a.hover { background-position: left -27px; } /* forward arrow */ .anythingSlider-cs-portfolio .forward { right: 20px; } .anythingSlider-cs-portfolio .forward a { background-position: -24px top; } .anythingSlider-cs-portfolio .forward a:hover, .anythingSlider-cs-portfolio .forward a.hover { background-position: -24px -27px; } /* Navigation Links */ .anythingSlider-cs-portfolio .anythingControls { position: relative; background: url(../images/cs-portfolio.png) repeat-x bottom center; height: 49px; margin: 0 auto; padding-left: 75px; text-align: center; } .anythingSlider-cs-portfolio .anythingControls ul { margin: 0; padding: 0; z-index: 100; } .anythingSlider-cs-portfolio .anythingControls ul.thumbNav { padding-top: 18px; } .anythingSlider-cs-portfolio .anythingControls ul li { margin: 0; padding: 0; display: inline; } .anythingSlider-cs-portfolio .anythingControls ul a { font: 11px/18px Georgia, Serif; width: 17px; height: 17px; margin: 0 5px 0 0; padding: 0; float: left; text-decoration: none; text-align: center; outline: 0; border: 0; } /* navigationSize window */ .anythingSlider-cs-portfolio .anythingControls .anythingNavWindow { margin: 0 5px 0 0; overflow: hidden; float: left; } .anythingSlider-cs-portfolio .anythingControls li.next a, .anythingSlider-cs-portfolio .anythingControls li.prev a { margin: 19px 5px 0 5px; width: 16px; height: 15px; background: url(../images/cs-portfolio.png) -25px -54px no-repeat; } .anythingSlider-cs-portfolio .anythingControls li.prev a { background-position: -9px -54px; } .anythingSlider-cs-portfolio .anythingControls li.next a:hover { background-position: -56px -54px; } .anythingSlider-cs-portfolio .anythingControls li.prev a:hover { background-position: -41px -54px; } /* Autoplay Start/Stop button */ .anythingSlider-cs-portfolio .anythingControls .start-stop { right: 60px; top: 15px; margin: 0; padding: 0; position: absolute; text-align: center; width: 20px; height: 20px; z-index: 100; border: 0; } /*********************** IE8 AND OLDER STYLING ***********************/ /* Navigation Arrows */ .as-oldie .anythingSlider-cs-portfolio .anythingControls a span { line-height: 1px; /* needed for IE7 */ } /* IE7 png fix*/ .as-oldie .anythingSlider-cs-portfolio .arrow a, .as-oldie .anythingSlider-cs-portfolio .anythingControls, .as-oldie .anythingSlider-cs-portfolio .anythingControls a { _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/cs-portfolio.png',sizingMethod='crop'); } /*********************** COMMON SLIDER STYLING ***********************/ /* Overall Wrapper */ .anythingSlider { display: block; overflow: visible !important; position: relative; } /* anythingSlider viewport window */ .anythingSlider .anythingWindow { overflow: hidden; position: relative; width: 100%; height: 100%; } /* anythingSlider base (original element) */ .anythingSlider .anythingBase { background: transparent; list-style: none; position: absolute; overflow: visible !important; top: 0; left: 0; margin: 0; padding: 0; } /* Navigation arrow text; indent moved to span inside "a", for IE7; apparently, a negative text-indent on an "a" link moves the link as well as the text */ .anythingSlider .arrow span, .anythingSlider .anythingControls span { display: block; visibility: hidden; } /* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */ .anythingSlider .arrow.disabled { display: none; } /* all panels inside the slider; horizontal mode */ .anythingSlider .panel { background: transparent; display: block; overflow: hidden; float: left; padding: 0; margin: 0; } /* vertical mode */ .anythingSlider .vertical .panel { float: none; } /* fade mode */ .anythingSlider .fade .panel { float: none; position: absolute; top: 0; left: 0; z-index: 0; } /* fade mode active page - visible & on top */ .anythingSlider .fade .activePage { z-index: 1; } /*********************** RTL STYLING ***********************/ /* slider autoplay right-to-left, reverse order of nav links to look better */ .anythingSlider.rtl .anythingWindow { direction: ltr; unicode-bidi: bidi-override; } .anythingSlider.rtl .anythingControls ul { float: left; } /* move nav link group to left */ .anythingSlider.rtl .anythingControls ul a { float: right; } /* reverse order of nav links */ .anythingSlider.rtl .start-stop { /* float: right; */ } /* move start/stop button - in case you want to switch sides */ /* probably not necessary, but added just in case */ .anythingSlider, .anythingSlider .anythingWindow, .anythingSlider .anythingControls ul a, .anythingSlider .arrow a, .anythingSlider .start-stop { transition-duration: 0s; -o-transition-duration: 0s; -moz-transition-duration: 0s; -webkit-transition-duration: 0s; } /* AnythingSlider v1.8+ Metallic theme By Rob Garrison */ /***************************** SET DEFAULT DIMENSIONS HERE *****************************/ /* change the ID & dimensions to match your slider */ #slider { width: 700px; height: 390px; list-style: none; /* Prevent FOUC (see FAQ page) and keep things readable if javascript is disabled */ overflow-y: auto; overflow-x: hidden; } /****************** SET STYLING HERE ****************** ================================= Default state (no keyboard focus) ==================================*/ /* Overall Wrapper */ .anythingSlider-metallic { margin: 0 auto; /* 23px right & left padding for the navigation arrows */ padding: 0 23px; } /* slider window - top & bottom borders, default state */ .anythingSlider-metallic .anythingWindow { border-top: 3px solid #333; border-bottom: 3px solid #333; } /* Navigation buttons + start/stop button, default state */ .anythingSlider-metallic .anythingControls a { background: transparent url(../images/arrows-metallic.png) -68px -40px repeat-x; color: #000; border: #000 1px solid; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } /* Navigation current button, default state */ .anythingSlider-metallic .anythingControls a.cur, .anythingSlider-metallic .anythingControls a:hover { background-position: -70px -137px; background-color: #888; color: #000; } /* start-stop button, stopped, default state */ .anythingSlider-metallic .anythingControls a.start-stop { background: #040; color: #ddd; /* top shadow */ -moz-box-shadow: inset 1px 2px 5px rgba(0, 0, 0, 0.5); -webkit-box-shadow: inset 1px 2px 5px rgba(0, 0, 0, 0.5); box-shadow: inset 1px 2px 5px rgba(0, 0, 0, 0.5); } /* start-stop button, playing, default state */ .anythingSlider-metallic .anythingControls a.start-stop.playing { background-color: #800; } /* start-stop button, default hovered text color (when visible) */ /* hide nav/start-stop background image shadow on hover - makes the button appear to come forward */ .anythingSlider-metallic .anythingControls a.start-stop:hover, .anythingSlider-metallic .anythingControls a.start-stop.hover, .anythingSlider-metallic .anythingControls a.start-stop .anythingControls ul a:hover { color: #fff; /* clear top shadow */ -moz-box-shadow: inset 0 0 0 #000000; -webkit-box-shadow: inset 0 0 0 #000000; box-shadow: inset 0 0 0 #000000; } /* ================================= Active State (has keyboard focus) ================================= */ /* slider window - top & bottom borders, active state */ .anythingSlider-metallic.activeSlider .anythingWindow { border-color: #0355a3; } /* Navigation buttons, active state */ .anythingSlider-metallic.activeSlider .anythingControls a { background-color: transparent; } /* Navigation current button, active state */ .anythingSlider-metallic.activeSlider .anythingControls a.cur, .anythingSlider-metallic.activeSlider .anythingControls a:hover { background-position: -76px -57px; background-color: #ccc; } /* start-stop button, stopped, active state */ .anythingSlider-metallic.activeSlider .anythingControls a.start-stop { background: #080; color: #fff; } /* start-stop button, playing, active state */ .anythingSlider-metallic.activeSlider .anythingControls a.start-stop.playing { color: #fff; background: #d00; } /* start-stop button, active slider hovered text color (when visible) */ .anythingSlider-metallic.activeSlider .start-stop:hover, .anythingSlider-metallic.activeSlider .start-stop.hover { color: #fff; } /************************ NAVIGATION POSITIONING ************************/ /* Navigation Arrows */ .anythingSlider-metallic .arrow { top: 50%; position: absolute; display: block; z-index: 100; } .anythingSlider-metallic .arrow a { display: block; width: 45px; height: 95px; margin: -47.5px 0 0 0; /* half height of image */ text-align: center; outline: 0; background: url(../images/arrows-metallic.png) no-repeat; } /* back arrow */ .anythingSlider-metallic .back { left: 0; } .anythingSlider-metallic .back a { background-position: left bottom; } .anythingSlider-metallic .back a:hover, .anythingSlider-metallic .back a.hover { background-position: left top; } /* forward arrow */ .anythingSlider-metallic .forward { right: 0; } .anythingSlider-metallic .forward a { background-position: right bottom; } .anythingSlider-metallic .forward a:hover, .anythingSlider-metallic .forward a.hover { background-position: right top; } /* Navigation Links */ .anythingSlider-metallic .anythingControls { height: 15px; /* limit height, needed for IE9 of all things */ outline: 0; display: none; float: right; position: absolute; bottom: 5px; right: 20px; margin: 0 45px; z-index: 100; opacity: 0.90; filter: alpha(opacity=90); } .anythingSlider-metallic .anythingControls ul { margin: 0; padding: 0; float: left; } .anythingSlider-metallic .anythingControls ul li { list-style: none; float: left; margin: 0; padding: 0; } .anythingSlider-metallic .anythingControls ul a { display: inline-block; width: 10px; height: 10px; margin: 3px; padding: 0; text-decoration: none; text-align: center; outline: 0; } .anythingSlider-metallic .anythingControls span { display: block; visibility: hidden; } /* navigationSize window */ .anythingSlider-metallic .anythingControls .anythingNavWindow { overflow: hidden; float: left; } /* navigationSize nav arrow positioning */ .anythingSlider-metallic .anythingControls li.prev a span, .anythingSlider-metallic .anythingControls li.next a span { visibility: visible; position: relative; top: -6px; /* bring navigationSize text arrows into view */ color: #fff; } /* Autoplay Start/Stop button */ .anythingSlider-metallic .anythingControls .start-stop { display: inline-block; width: 10px; height: 10px; margin: 3px; padding: 0; text-align: center; text-decoration: none; z-index: 100; outline: 0; } /*********************** IE8 AND OLDER STYLING ***********************/ /* Navigation Arrows */ .as-oldie .anythingSlider-metallic .arrow { top: 40%; } .as-oldie .anythingSlider-metallic .arrow a { margin: 0; } /*********************** COMMON SLIDER STYLING ***********************/ /* Overall Wrapper */ .anythingSlider { display: block; overflow: visible !important; position: relative; } /* anythingSlider viewport window */ .anythingSlider .anythingWindow { overflow: hidden; position: relative; width: 100%; height: 100%; } /* anythingSlider base (original element) */ .anythingSlider .anythingBase { background: transparent; list-style: none; position: absolute; overflow: visible !important; top: 0; left: 0; margin: 0; padding: 0; } /* Navigation arrow text; indent moved to span inside "a", for IE7; apparently, a negative text-indent on an "a" link moves the link as well as the text */ .anythingSlider .arrow span { display: block; visibility: hidden; } /* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */ .anythingSlider .arrow.disabled { display: none; } /* all panels inside the slider; horizontal mode */ .anythingSlider .panel { background: transparent; display: block; overflow: hidden; float: left; padding: 0; margin: 0; } /* vertical mode */ .anythingSlider .vertical .panel { float: none; } /* fade mode */ .anythingSlider .fade .panel { float: none; position: absolute; top: 0; left: 0; z-index: 0; } /* fade mode active page - visible & on top */ .anythingSlider .fade .activePage { z-index: 1; } /*********************** RTL STYLING ***********************/ /* slider autoplay right-to-left, reverse order of nav links to look better */ .anythingSlider.rtl .anythingWindow { direction: ltr; unicode-bidi: bidi-override; } .anythingSlider.rtl .anythingControls ul { float: left; } /* move nav link group to left */ .anythingSlider.rtl .anythingControls ul a { float: right; } /* reverse order of nav links */ .anythingSlider.rtl .start-stop { /* float: right; */ } /* move start/stop button - in case you want to switch sides */ /* probably not necessary, but added just in case */ .anythingSlider .anythingWindow, .anythingSlider .anythingControls ul a, .anythingSlider .arrow a, .anythingSlider .start-stop { transition-duration: 0s; -o-transition-duration: 0s; -moz-transition-duration: 0s; -webkit-transition-duration: 0s; } /* AnythingSlider v1.8+ Minimalist Round theme By Rob Garrison */ /***************************** SET DEFAULT DIMENSIONS HERE *****************************/ /* change the ID & dimensions to match your slider */ #slider { width: 700px; height: 390px; list-style: none; /* Prevent FOUC (see FAQ page) and keep things readable if javascript is disabled */ overflow-y: auto; overflow-x: hidden; } /****************** SET STYLING HERE ****************** ================================= Default state (no keyboard focus) ==================================*/ /* Overall Wrapper */ .anythingSlider-minimalist-round { margin: 0 auto; /* 30px right & left padding for the navigation arrows */ padding: 0 30px; } /* slider window - top & bottom borders, default state */ .anythingSlider-minimalist-round .anythingWindow { border-top: 3px solid #333; border-bottom: 3px solid #333; } /* Navigation buttons + start/stop button, default state */ .anythingSlider-minimalist-round .anythingControls a { background-color: #333; color: #fff; border: #000 1px solid; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } /* Navigation current button, default state */ .anythingSlider-minimalist-round .anythingControls a.cur, .anythingSlider-minimalist-round .anythingControls a:hover { background-color: #777; color: #000; } /* start-stop button, stopped, default state */ .anythingSlider-minimalist-round .anythingControls a.start-stop { background: #040; color: #ddd; /* top shadow */ -moz-box-shadow: inset 1px 2px 5px rgba(0, 0, 0, 0.5); -webkit-box-shadow: inset 1px 2px 5px rgba(0, 0, 0, 0.5); box-shadow: inset 1px 2px 5px rgba(0, 0, 0, 0.5); } /* start-stop button, playing, default state */ .anythingSlider-minimalist-round .anythingControls a.start-stop.playing { background-color: #800; } /* start-stop button, default hovered text color (when visible) */ /* hide nav/start-stop background image shadow on hover - makes the button appear to come forward */ .anythingSlider-minimalist-round .anythingControls a.start-stop:hover, .anythingSlider-minimalist-round .anythingControls a.start-stop.hover, .anythingSlider-minimalist-round .anythingControls a.start-stop .anythingControls ul a:hover { color: #fff; /* clear top shadow */ -moz-box-shadow: inset 0 0 0 #000000; -webkit-box-shadow: inset 0 0 0 #000000; box-shadow: inset 0 0 0 #000000; } /* ================================= Active State (has keyboard focus) ================================= */ /* slider window - top & bottom borders, active state */ .anythingSlider-minimalist-round.activeSlider .anythingWindow { border-color: #164054; } /* Navigation buttons, active state */ .anythingSlider-minimalist-round.activeSlider .anythingControls a { background-color: #164054; color: #fff; } /* Navigation current button, active state */ .anythingSlider-minimalist-round.activeSlider .anythingControls a.cur, .anythingSlider-minimalist-round.activeSlider .anythingControls a:hover { background-color: #fff; color: #000; } /* start-stop button, stopped, active state */ .anythingSlider-minimalist-round.activeSlider .anythingControls a.start-stop { background: #080; color: #fff; } /* start-stop button, playing, active state */ .anythingSlider-minimalist-round.activeSlider .anythingControls a.start-stop.playing { color: #fff; background: #f00; } /* start-stop button, active slider hovered text color (when visible) */ .anythingSlider-minimalist-round.activeSlider .start-stop:hover, .anythingSlider-minimalist-round.activeSlider .start-stop.hover { color: #fff; } /************************ NAVIGATION POSITIONING ************************/ /* Navigation Arrows */ .anythingSlider-minimalist-round .arrow { top: 50%; position: absolute; display: block; } .anythingSlider-minimalist-round .arrow a { display: block; width: 30px; height: 40px; margin: -20px 0 0 0; /* half height of image */ text-align: center; outline: 0; background: url(../images/arrows-minimalist.png) no-repeat; } /* back arrow */ .anythingSlider-minimalist-round .back { left: 0; } .anythingSlider-minimalist-round .back a { background-position: left bottom; } .anythingSlider-minimalist-round .back a:hover, .anythingSlider-minimalist-round .back a.hover { background-position: left top; } /* forward arrow */ .anythingSlider-minimalist-round .forward { right: 0; } .anythingSlider-minimalist-round .forward a { background-position: right bottom; } .anythingSlider-minimalist-round .forward a:hover, .anythingSlider-minimalist-round .forward a.hover { background-position: right top; } /* Navigation Links */ .anythingSlider-minimalist-round .anythingControls { height: 15px; /* limit height, needed for IE9 of all things */ outline: 0; display: none; float: right; position: absolute; bottom: 5px; right: 20px; margin: 0 45px; z-index: 100; opacity: 0.90; filter: alpha(opacity=90); } .anythingSlider-minimalist-round .anythingControls ul { margin: 0; padding: 0; float: left; } .anythingSlider-minimalist-round .anythingControls ul li { list-style: none; float: left; margin: 0; padding: 0; } .anythingSlider-minimalist-round .anythingControls ul a { display: inline-block; width: 10px; height: 10px; margin: 3px; padding: 0; text-decoration: none; text-align: center; outline: 0; } .anythingSlider-minimalist-round .anythingControls span { display: block; visibility: hidden; } /* navigationSize window */ .anythingSlider-minimalist-round .anythingControls .anythingNavWindow { overflow: hidden; float: left; } /* navigationSize nav arrow positioning */ .anythingSlider-minimalist-round .anythingControls li.prev span, .anythingSlider-minimalist-round .anythingControls li.next span { visibility: visible; position: relative; top: -6px; /* bring navigationSize text arrows into view */ } /* Autoplay Start/Stop button */ .anythingSlider-minimalist-round .anythingControls .start-stop { display: inline-block; width: 10px; height: 10px; margin: 3px; padding: 0; text-align: center; text-decoration: none; z-index: 100; outline: 0; } /*********************** IE8 AND OLDER STYLING ***********************/ /* Navigation Arrows */ .as-oldie .anythingSlider-minimalist-round .arrow { top: 45%; } .as-oldie .anythingSlider-minimalist-round .arrow a { margin: 0; } /*********************** COMMON SLIDER STYLING ***********************/ /* Overall Wrapper */ .anythingSlider { display: block; overflow: visible !important; position: relative; } /* anythingSlider viewport window */ .anythingSlider .anythingWindow { overflow: hidden; position: relative; width: 100%; height: 100%; } /* anythingSlider base (original element) */ .anythingSlider .anythingBase { background: transparent; list-style: none; position: absolute; overflow: visible !important; top: 0; left: 0; margin: 0; padding: 0; } /* Navigation arrow text; indent moved to span inside "a", for IE7; apparently, a negative text-indent on an "a" link moves the link as well as the text */ .anythingSlider .arrow span { display: block; visibility: hidden; } /* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */ .anythingSlider .arrow.disabled { display: none; } /* all panels inside the slider; horizontal mode */ .anythingSlider .panel { background: transparent; display: block; overflow: hidden; float: left; padding: 0; margin: 0; } /* vertical mode */ .anythingSlider .vertical .panel { float: none; } /* fade mode */ .anythingSlider .fade .panel { float: none; position: absolute; top: 0; left: 0; z-index: 0; } /* fade mode active page - visible & on top */ .anythingSlider .fade .activePage { z-index: 1; } /*********************** RTL STYLING ***********************/ /* slider autoplay right-to-left, reverse order of nav links to look better */ .anythingSlider.rtl .anythingWindow { direction: ltr; unicode-bidi: bidi-override; } .anythingSlider.rtl .anythingControls ul { float: left; } /* move nav link group to left */ .anythingSlider.rtl .anythingControls ul a { float: right; } /* reverse order of nav links */ .anythingSlider.rtl .start-stop { /* float: right; */ } /* move start/stop button - in case you want to switch sides */ /* probably not necessary, but added just in case */ .anythingSlider .anythingWindow, .anythingSlider .anythingControls ul a, .anythingSlider .arrow a, .anythingSlider .start-stop { transition-duration: 0s; -o-transition-duration: 0s; -moz-transition-duration: 0s; -webkit-transition-duration: 0s; } /* AnythingSlider v1.8+ Minimalist Square theme By Rob Garrison */ /***************************** SET DEFAULT DIMENSIONS HERE *****************************/ /* change the ID & dimensions to match your slider */ #slider { width: 700px; height: 390px; list-style: none; /* Prevent FOUC (see FAQ page) and keep things readable if javascript is disabled */ overflow-y: auto; overflow-x: hidden; } /****************** SET STYLING HERE ****************** ================================= Default state (no keyboard focus) ==================================*/ /* Overall Wrapper */ .anythingSlider-minimalist-square { margin: 0 auto; /* 30px right & left padding for the navigation arrows */ padding: 0 30px; } /* slider window - top & bottom borders, default state */ .anythingSlider-minimalist-square .anythingWindow { border-top: 3px solid #333; border-bottom: 3px solid #333; } /* Navigation buttons + start/stop button, default state */ .anythingSlider-minimalist-square .anythingControls a { background-color: #333; color: #fff; border: #000 1px solid; } /* Navigation current button, default state */ .anythingSlider-minimalist-square .anythingControls a.cur, .anythingSlider-minimalist-square .anythingControls a:hover { background-color: #777; color: #000; } /* start-stop button, stopped, default state */ .anythingSlider-minimalist-square .anythingControls a.start-stop { background: #040; color: #ddd; /* top shadow */ -moz-box-shadow: inset 1px 2px 5px rgba(0, 0, 0, 0.5); -webkit-box-shadow: inset 1px 2px 5px rgba(0, 0, 0, 0.5); box-shadow: inset 1px 2px 5px rgba(0, 0, 0, 0.5); } /* start-stop button, playing, default state */ .anythingSlider-minimalist-square .anythingControls a.start-stop.playing { background-color: #800; } /* start-stop button, default hovered text color (when visible) */ /* hide nav/start-stop background image shadow on hover - makes the button appear to come forward */ .anythingSlider-minimalist-square .anythingControls a.start-stop:hover, .anythingSlider-minimalist-square .anythingControls a.start-stop.hover, .anythingSlider-minimalist-square .anythingControls a.start-stop .anythingControls ul a:hover { color: #fff; /* clear top shadow */ -moz-box-shadow: inset 0 0 0 #000000; -webkit-box-shadow: inset 0 0 0 #000000; box-shadow: inset 0 0 0 #000000; } /* ================================= Active State (has keyboard focus) ================================= */ /* slider window - top & bottom borders, active state */ .anythingSlider-minimalist-square.activeSlider .anythingWindow { border-color: #164054; } /* Navigation buttons, active state */ .anythingSlider-minimalist-square.activeSlider .anythingControls a { background-color: #164054; color: #fff; } /* Navigation current button, active state */ .anythingSlider-minimalist-square.activeSlider .anythingControls a.cur, .anythingSlider-minimalist-square.activeSlider .anythingControls a:hover { background-color: #fff; color: #000; } /* start-stop button, stopped, active state */ .anythingSlider-minimalist-square.activeSlider .anythingControls a.start-stop { background: #080; color: #fff; } /* start-stop button, playing, active state */ .anythingSlider-minimalist-square.activeSlider .anythingControls a.start-stop.playing { color: #fff; background: #f00; } /* start-stop button, active slider hovered text color (when visible) */ .anythingSlider-minimalist-square.activeSlider .start-stop:hover, .anythingSlider-minimalist-square.activeSlider .start-stop.hover { color: #fff; } /************************ NAVIGATION POSITIONING ************************/ /* Navigation Arrows */ .anythingSlider-minimalist-square .arrow { top: 50%; position: absolute; display: block; } .anythingSlider-minimalist-square .arrow a { display: block; width: 30px; height: 40px; margin: -20px 0 0 0; /* half height of image */ text-align: center; outline: 0; background: url(../images/arrows-minimalist.png) no-repeat; } /* back arrow */ .anythingSlider-minimalist-square .back { left: 0; } .anythingSlider-minimalist-square .back a { background-position: left bottom; } .anythingSlider-minimalist-square .back a:hover, .anythingSlider-minimalist-square .back a.hover { background-position: left top; } /* forward arrow */ .anythingSlider-minimalist-square .forward { right: 0; } .anythingSlider-minimalist-square .forward a { background-position: right bottom; } .anythingSlider-minimalist-square .forward a:hover, .anythingSlider-minimalist-square .forward a.hover { background-position: right top; } /* Navigation Links */ .anythingSlider-minimalist-square .anythingControls { height: 15px; /* limit height, needed for IE9 of all things */ outline: 0; display: none; float: right; position: absolute; bottom: 5px; right: 20px; margin: 0 45px; z-index: 100; opacity: 0.90; filter: alpha(opacity=90); } .anythingSlider-minimalist-square .anythingControls ul { margin: 0; padding: 0; float: left; } .anythingSlider-minimalist-square .anythingControls ul li { list-style: none; float: left; margin: 0; padding: 0; } .anythingSlider-minimalist-square .anythingControls ul a { display: inline-block; width: 10px; height: 10px; margin: 3px; padding: 0; text-decoration: none; text-align: center; outline: 0; } .anythingSlider-minimalist-square .anythingControls span { display: block; visibility: hidden; } /* navigationSize window */ .anythingSlider-minimalist-square .anythingControls .anythingNavWindow { overflow: hidden; float: left; } /* navigationSize nav arrow positioning */ .anythingSlider-minimalist-square .anythingControls li.prev span, .anythingSlider-minimalist-square .anythingControls li.next span { visibility: visible; position: relative; top: -6px; /* bring navigationSize text arrows into view */ } /* Autoplay Start/Stop button */ .anythingSlider-minimalist-square .anythingControls .start-stop { margin: 3px; padding: 0; display: inline-block; width: 10px; height: 10px; text-align: center; text-decoration: none; z-index: 100; outline: 0; } /*********************** IE8 AND OLDER STYLING ***********************/ /* Navigation Arrows */ .as-oldie .anythingSlider-minimalist-square .arrow { top: 45%; } .as-oldie .anythingSlider-minimalist-square .arrow a { margin: 0; } /*********************** COMMON SLIDER STYLING ***********************/ /* Overall Wrapper */ .anythingSlider { display: block; overflow: visible !important; position: relative; } /* anythingSlider viewport window */ .anythingSlider .anythingWindow { overflow: hidden; position: relative; width: 100%; height: 100%; } /* anythingSlider base (original element) */ .anythingSlider .anythingBase { background: transparent; list-style: none; position: absolute; overflow: visible !important; top: 0; left: 0; margin: 0; padding: 0; } /* Navigation arrow text; indent moved to span inside "a", for IE7; apparently, a negative text-indent on an "a" link moves the link as well as the text */ .anythingSlider .arrow span { display: block; visibility: hidden; } /* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */ .anythingSlider .arrow.disabled { display: none; } /* all panels inside the slider; horizontal mode */ .anythingSlider .panel { background: transparent; display: block; overflow: hidden; float: left; padding: 0; margin: 0; } /* vertical mode */ .anythingSlider .vertical .panel { float: none; } /* fade mode */ .anythingSlider .fade .panel { float: none; position: absolute; top: 0; left: 0; z-index: 0; } /* fade mode active page - visible & on top */ .anythingSlider .fade .activePage { z-index: 1; } /*********************** RTL STYLING ***********************/ /* slider autoplay right-to-left, reverse order of nav links to look better */ .anythingSlider.rtl .anythingWindow { direction: ltr; unicode-bidi: bidi-override; } .anythingSlider.rtl .anythingControls ul { float: left; } /* move nav link group to left */ .anythingSlider.rtl .anythingControls ul a { float: right; } /* reverse order of nav links */ .anythingSlider.rtl .start-stop { /* float: right; */ } /* move start/stop button - in case you want to switch sides */ /* probably not necessary, but added just in case */ .anythingSlider .anythingWindow, .anythingSlider .anythingControls ul a, .anythingSlider .arrow a, .anythingSlider .start-stop { transition-duration: 0s; -o-transition-duration: 0s; -moz-transition-duration: 0s; -webkit-transition-duration: 0s; } body { background-color:#434d53; margin:0; width:100%; height: 100%; } body * { padding:0; margin:0; border:0; font-size:14px; font-family:"Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif; } div.content-wrapper { min-height:400px; } a { text-decoration:none; cursor:pointer; } ul { list-style:none; } .clearfix { clear:both; display:block; width:0; height:0; float:none; } .hidden { display:none; } .error-message { display:block; } .error-message, .error-message * { color:#ff0000 !important; } .wrapper { max-width:1000px; margin:0 auto; } .wrapper header, .wrapper section, .wrapper footer { min-width:275px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } header { background-color:#0e8d94; } header .logo { display:inline-block; padding:5px 5px 0; } ul.lang-desktop { float:right; line-height:60px; margin-right:20px; } ul.lang-desktop li { display:inline-block; color:#fefeeb; } ul.lang-desktop li a { display:inline-block; color:#fefeeb; padding:0 3px; } ul.lang-desktop li:before { content:'| ' } ul.lang-desktop li:first-child:before { content:''; } nav { background-color:#72ad75; } nav div.mobile { display:none; } nav ul { margin-left:50px; } nav ul li { display:inline-block; color:#fefeeb; } nav ul li a { display:inline-block; color:#fefeeb; font-size:16px; padding:10px; } nav ul li:before { content:'- ' } nav ul li:first-child:before { content:''; } nav ul.lang { display:none; } form[data-section="home"] li[data-section="home"] a, form[data-section="features"] li[data-section="features"] a, form[data-section="subscription"] li[data-section="subscription"] a, form[data-section="contacts"] li[data-section="contacts"] a, form[data-section="blog"] li[data-section="blog"] a { color:#fbaa19; } section.intro { display:block; background:#eee9dd url(images/intro-background.jpg) no-repeat top left; min-height:359px; width:100%; padding:30px; } section.intro * { color:#434d53; } section.intro h2 { font-size:36px; font-weight:normal; } section.intro em { display:block; font-size:20px; padding:7px 0; } section.intro em:nth-child(1) { margin-left:6%; } section.intro em:nth-child(2) { margin-left:12%; } section.intro em:nth-child(3) { margin-left:8%; } section.intro em:nth-child(4) { margin-left:15%; } section.intro em:nth-child(5) { margin-left:10%; } section.intro em:nth-child(6) { margin-left:7%; } section.slogan { background-color:#e9d558; text-align:center; padding:20px; line-height:1.5; } section.slogan h1 { color:#434d53; font-weight:normal; font-size:26px; } input[type="text"], input[type="password"] { padding:2px 5px; width:150px; color:#434d53; font-size:14px; } .check { display:inline-block; vertical-align:baseline; } .check label { padding:0 3px; color:#fefeeb; } .register-account-info { color: #00FF00; } div.home-account { border-width:0 1px; border-style:solid; border-color:#fefeeb; } section.account { background-color:#434d53; } section.account a { color:#fefeeb; } section.account > div { width:50%; float:left; padding:15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } section.account input[type="text"], section.account input[type="password"], section.account input[type="submit"] { margin:0px 10px 7px 0; color:#434d53; } section.account a.account-alternative { margin-top:10px; display:block; text-decoration:underline; } section.account a { color:#fefeeb; } section.account p.info { margin:0 0 10px; color:#fefeeb; } section.account .account-button { color:#fbaa19; font-size:16px; display:block; text-transform:uppercase; margin:7px 0; text-decoration:none; } section.account .account-button span { font-size:16px; color:#fefeeb; } section.account .account-button p { font-size:14px; margin:10px 0 0; text-transform:initial; color:#fefeeb; } div.inner .account { border-width:0 1px 1px; border-style:solid; border-color:#fefeeb; } section.learn-how { background-color:#fefeeb; padding:30px 15px; } section.learn-how h2 { color:#434d53; font-size:26px; font-weight:normal; margin-bottom:30px; } section.learn-how iframe { width:90%; height:225px; } section.learn-how div.gallery [data-placeholder="slider"] { height:275px; } section.learn-how div.gallery [data-placeholder="slider"] li { float:left; width:33%; } section.learn-how div.gallery [data-placeholder="slider"] li span { display:block; margin-top:15px; font-size:18px; } section.usage { background-color:#72ad75; padding:15px 15px 25px; } section.usage div { float:left; width:25%; text-align:center; } section.usage div { color:#fefeeb; font-size:48px; } section.usage div span { color:#434d53; font-size:26px; display:block; margin-top:-10px } section.support { background:#ddd7d7 url(images/support-background.jpg) no-repeat right top; width:100%; min-height:348px; } section.support * { color:#434d53; font-size:24px; } section.support div { float:right; padding:30px 75px 45px 0; } section.support h2 { font-size:36px; font-weight:normal; } section.support ul { margin:30px 0; } section.support ul li:before { content: '-' } section.support ul li label { display:inline-block; min-width:190px; padding:0 10px; } section.support ul li a { color:#fbaa19; } section.subscription { background-color:#fefeeb; } section.subscription > div { width:50%; float:left; } section.subscription > div div { background-color:#e9d558; } section.subscription h2 { color:#434d53; font-size:30px; padding:25px 0 15px; font-weight:normal; } section.subscription h2 span { display:block; color:#fefeeb; font-size:24px; } section.subscription > div h2, section.subscription > div ul { position:relative; left:25%; width:75%; } section.subscription > div ul { padding:20px 0; } section.subscription ul li { color:#434d53; font-size:24px; text-align:left; } footer { padding:50px; } footer > ul { width:100%; padding-bottom:30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } footer > ul > li { width:33%; display:block; float:left; vertical-align:top; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; min-width:175px; } footer > ul > li.middle { width:34%; } footer > ul li ul { width:100%; } footer > ul li ul li a { display:block; color:#fefeeb; font-size:18px; width:100%; margin:7px 0; } footer > ul strong { color:#72ad75; text-transform:uppercase; font-size:18px; font-weight:normal; } section.social { float:right; width:33%; } section.social li { display:inline-block; } section.social li a { display:block; width:32px; height:33px; background:url(images/social.png) no-repeat center left; margin:0 2px; } section.social li a.twitter { background-position: -32px center; } section.social li a.linkedin { background-position: -64px center; } section.social li a.google { background-position: -96px center; } footer span.copyright { float:left; line-height:33px; color:#fefeeb; } section.connect { clear:both; } section.connect > div { float:left; margin-right:10px; } h2.section-title { padding:15px 15px 15px 25px; color:#434d53; font-size:30px; font-weight:normal; background-color:#e9d558; } h3 { color:#434d53; font-size:24px; font-weight:normal; margin:25px 0 5px; } h3.top { margin-top:0; } div.gallery .slider-nav { text-align:center; margin-bottom:5px; } div.gallery .slider-nav li { display:inline-block; padding:0; margin:0 5px; text-align:center; color:transparent; } div.gallery .slider-nav li a { border:2px solid #434d53; color:transparent; display:block; width:15px; height:15px; } div.gallery .slider-nav li a.cur { background:#fbaa19; } div.gallery .slider li { text-align:center; width:100%; } div.gallery .slider li img { max-width:100%; max-height:450px; } div.gallery .slider li span { display:block; margin-top:15px; font-size:18px; text-align:left; } .anythingSlider-default { padding:0px; margin:0px; } .anythingSlider-default .anythingWindow { border:0px; } /* INNER */ div.inner { background-color:#fefeeb; } .inner section > div { padding:25px; } section a { color:#434d53; text-decoration:underline; } input[type="submit"] { padding:4px 2px; background:#434d53; color:#fff; cursor:pointer; } .validate {color:#FE2E2E; display:block; } .underline { text-decoration:underline; } .go { margin:0 auto; } .go th { background-color:#ddd7d7; text-align:left; color:#434d53; } .go th, .go td { padding:10px; min-width:150px; border-bottom:1px solid #434d53; } section.features { padding:0px 15px 25px; } section.features li { float:left; width:50%; position:relative; margin:25px auto 0; padding-left:90px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } section.features li.patient-profile { background:url(images/manage-patients.profiles.png) left center no-repeat; } section.features li.patient-schedule { background:url(images/manage-patients-schedule.png) left center no-repeat; } section.features li.practitioner { background:url(images/manage-practitioers.png) left center no-repeat; } section.features li.export { background:url(images/export-schedule-data.png) left center no-repeat; } section.features li em { display:block; font-style:normal; font-size:16px; margin:2px 0; text-align:left; } section.pricing-options ul { padding:25px 15px; max-width:750px; margin: 0 auto; } section.pricing-options li { width:100%; display:block; border-bottom:1px solid #ddd7d7; } section.pricing-options li div { font-size:16px; float:left; width:25%; padding:7px; text-align:center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } section.pricing-options li div:first-child { width:50%; text-align:left; } section.pricing-options .header { background-color:#fbaa19; color:#fff; } section.pricing-options .emphasis { color:#fbaa19; font-size:18px; } section.pricing-options .unlimited { color:#fbaa19; font-size:14px; font-weight:bold; } section.pricing-options div span { font-size:24px; } section.pricing-options a { display:block; padding-top:5px; text-transform:lowercase; } section.pricing-options .tick { display:block; background:url(images/tick.png) center no-repeat; width:17px; height:15px; margin:2px auto; } section.pricing-options strong { font-weight:normal; } section.pricing-options input[type="submit"] { width:90%; } section.pricing-options .dialog { width:100%; text-align:left; border-width:0 1px; border-style:solid; border-color:#ddd7d7; display:none; } section.pricing-options .dialog h3 { padding:14px; } section.pricing-options .dialog label { margin:7px 15px; font-size:16px; display:inline-block; } section.pricing-options .dialog label input { margin-right:7px; } section.pricing-options .dialog div.pricing { width:100%; clear:both; padding:0; display:none; } section.pricing-options .dialog div.pricing > div { float:left; width:25%; color:#434d53; font-size:14px; text-align:center; border-bottom:1px solid #434d53; } section.pricing-options .dialog div.pricing > div.strike { text-decoration:line-through; } section.pricing-options .dialog div.pricing.header { background-color:#ddd7d7; display:block; } section.pricing-options .dialog div.pricing.header > div { font-weight:bold; border:0; } section.contact-form { max-width:750px; margin: 0 auto; } section.contact-form input[type="text"], section.contact-form textarea { display:block; width:100%; border:1px solid #434d53; color:#434d53; padding:5px; margin:7px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } section.contact-form input[type="submit"] { width:25%; } section.contact-form p { font-size:16px; } section.contact-form p.alternative { margin-top:25px; } section.video iframe { width:100%; max-width:800px; height:450px; } section.terms ol { padding:10px 45px; } section.terms ol li { padding:5px 10px; } section.terms p { margin:3px 0; } section.terms ul { padding:10px 15px; } section.terms ul li { padding:5px 10px; } section.terms ul li:before { content:'- ' } .blog p { margin:10px 0; } @media screen and (max-width: 770px) { ul.lang-desktop { float:left; margin:0 0 20px 58px; line-height:normal; } footer { padding:30px; } footer > ul > li, footer > ul > li.middle { width:50%; } section.social, footer span.copyright { width:50%; line-height:normal; } footer span.copyright span { display:block; } section.learn-how div.demo [data-placeholder="slider"] { width:auto; max-height:275px; } section.support div { float:left; padding:30px 0 30px 60px; } section.subscription > div h2, section.subscription > div ul { left:7%; width:93%; } section.learn-how iframe { width:100%; } section.video iframe { width:100%; max-width:800px; height:300px; } } @media screen and (max-width: 640px) { ul.lang-desktop { display:none; } nav div.mobile { display:block; } nav div.mobile { padding:5px 15px 3px; } nav div.mobile .menu-handle { float:left; } nav div.mobile .menu-handle img { margin-right:15px; } nav div.mobile .selected-nav { vertical-align:top; font-size:16px; color:#fefeeb; } nav div.mobile .lang-handle { float:right; } nav div.mobile .selected-lang { vertical-align:top; font-size:16px; color:#fefeeb; } nav ul { display:none; } nav ul li { display:block; } nav ul li:before { content:''; } nav ul.lang { float:right; margin-right:15px; } nav ul.lang li { text-align:right; } footer > ul > li, footer > ul > li.middle { width:100%; } section.social { text-align:center; width:100%; margin-bottom:30px; } footer span.copyright { text-align:center; width:100%; } section.intro { display:none; } section.slogan h1 { font-size:18px; } section.account > div { width:100%; } section.account > div h2 { width:100%; } section.account > div p { width:100%; } section.usage { padding:15px 5px 25px; } section.usage div { width:50%; } section.learn-how h2 { font-size:24px; } section.support div { padding:20px 0 30px 30px; } section.support div * { font-size:20px; } section.support h2 { font-size:24px; } section.support ul { margin:20px 0; } section.support ul li:before { content: ''; } section.support ul li { padding:12px 0; } section.support ul li label { display:block; padding-left:0; } section.subscription > div { width:100%; } section.features li { width:100%; } section.pricing-options ul { padding:25px 0; min-width:300px; } section.pricing-options li:not(.dialog) .empty { display:none; } section.pricing-options li:not(.dialog) div { width:50%; } section.pricing-options li:not(.dialog) div:first-child { width:100%; float:none; border-bottom:1px solid #ddd7d7; } section.pricing-options li:not(.dialog) div:first-child strong { font-size:18px; font-style:italic } section.contact-form input[type="submit"] { width:100%; } section.video iframe { width:100%; max-width:800px; height:225px; } section.connect { padding-top:15px; } section.connect > div { padding:5px 0; } }