Difference between revisions of "Template:Team:NUS Singapore/CSS"
Chloroplast (Talk | contribs) |
Chloroplast (Talk | contribs) (Undo revision 163944 by Chloroplast (talk)) |
||
| Line 1: | Line 1: | ||
| − | + | <html> | |
| − | + | <style> | |
| − | < | + | @charset "UTF-8"; |
| − | < | + | /* |
| − | + | Animate.css - http://daneden.me/animate | |
| − | + | Licensed under the ☺ license (http://licence.visualidiot.com/) | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| + | Copyright (c) 2012 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. | |
| − | + | */ | |
| − | + | body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ | |
| − | + | -webkit-backface-visibility: hidden; | |
| − | + | } | |
| − | + | .animated { | |
| − | + | -webkit-animation-duration: 1s; | |
| + | -moz-animation-duration: 1s; | ||
| + | -o-animation-duration: 1s; | ||
| + | animation-duration: 1s; | ||
| + | -webkit-animation-fill-mode: both; | ||
| + | -moz-animation-fill-mode: both; | ||
| + | -o-animation-fill-mode: both; | ||
| + | animation-fill-mode: both; | ||
| + | } | ||
| − | + | .animated.hinge { | |
| − | + | -webkit-animation-duration: 2s; | |
| − | + | -moz-animation-duration: 2s; | |
| − | + | -o-animation-duration: 2s; | |
| − | + | animation-duration: 2s; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | @-webkit-keyframes flash { | |
| − | + | 0%, 50%, 100% {opacity: 1;} | |
| − | + | 25%, 75% {opacity: 0;} | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | @-moz-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; | |
| + | -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);} | |
| − | + | } | |
| − | + | ||
| − | + | @-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; | |
| − | + | -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);} | ||
| + | } | ||
| − | + | @-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; | ||
| + | -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);} | ||
| + | } | ||
| − | + | @-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; | |
| − | + | -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); } | |
| − | + | } | |
| − | + | @-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; | |
| − | + | -o-transform-origin: top center; | |
| − | + | transform-origin: top center; | |
| + | -webkit-animation-name: swing; | ||
| + | -moz-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%); } | ||
| + | } | ||
| − | + | @-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; | ||
| + | -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); } | ||
| + | } | ||
| + | @-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; | |
| − | + | -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; | ||
| + | } | ||
| + | } | ||
| + | @-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; | ||
| + | -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; | ||
| + | } | ||
| + | } | ||
| + | @-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; | ||
| + | -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; | ||
| + | } | ||
| + | } | ||
| − | + | @-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; | |
| − | + | -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; | ||
| + | } | ||
| + | } | ||
| + | @-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; | |
| − | + | -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; | ||
| + | } | ||
| + | } | ||
| + | @-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; | ||
| + | -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;} | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| + | @-o-keyframes fadeIn { | ||
| + | 0% {opacity: 0;} | ||
| + | 100% {opacity: 1;} | ||
| + | } | ||
| − | + | @keyframes fadeIn { | |
| − | + | 0% {opacity: 0;} | |
| − | + | 100% {opacity: 1;} | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| + | .fadeIn { | ||
| + | -webkit-animation-name: fadeIn; | ||
| + | -moz-animation-name: fadeIn; | ||
| + | -o-animation-name: fadeIn; | ||
| + | animation-name: fadeIn; | ||
| + | } | ||
| + | @-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); | |
| + | } | ||
| + | } | ||
| − | + | @-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; | |
| − | + | -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); | |
| − | + | } | |
| − | + | } | |
| − | + | @-o-keyframes fadeInDown { | |
| − | + | 0% { | |
| − | + | opacity: 0; | |
| − | + | -o-transform: translateY(-20px); | |
| − | + | } | |
| − | + | ||
| − | + | 100% { | |
| − | + | opacity: 1; | |
| − | + | -o-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; | |
| − | </ | + | -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); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @-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; | ||
| + | -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); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @-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; | ||
| + | -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); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @-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; | ||
| + | -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); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @-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; | ||
| + | -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); | ||
| + | } | ||
| + | } | ||
| + | @-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; | ||
| + | -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); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @-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; | ||
| + | -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;} | ||
| + | } | ||
| + | |||
| + | @-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; | ||
| + | -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); | ||
| + | } | ||
| + | } | ||
| + | @-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; | ||
| + | -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); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @-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; | ||
| + | -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); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @-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; | ||
| + | -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); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @-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; | ||
| + | -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); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @-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; | ||
| + | -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); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @-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; | ||
| + | -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); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @-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; | ||
| + | -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); | ||
| + | } | ||
| + | } | ||
| + | @-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; | ||
| + | -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); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @-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; | ||
| + | -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); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @-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; | ||
| + | -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); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @-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; | ||
| + | -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); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @-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; | ||
| + | -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); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @-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; | ||
| + | -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); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @-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; | ||
| + | -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); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @-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; | ||
| + | -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); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @-o-keyframes bounceOutDown { | ||
| + | 0% { | ||
| + | -o-transform: translateY(0); | ||
| + | } | ||
| + | |||
| + | 20% { | ||
| + | opacity: 1; | ||
| + | -o-transform: translateY(-20px); | ||
| + | } | ||
| + | |||
| + | 100% { | ||
| + | opacity: 0; | ||
| + | -o-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; | ||
| + | -o-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); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @-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; | ||
| + | -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); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @-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; | ||
| + | -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; | ||
| + | } | ||
| + | } | ||
| + | @-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; | ||
| + | -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; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @-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; | ||
| + | -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; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @-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; | ||
| + | -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; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @-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; | ||
| + | -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; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @-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; | ||
| + | -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; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @-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; | ||
| + | -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; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @-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; | ||
| + | -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; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @-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; | ||
| + | -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; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @-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; | ||
| + | -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; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @-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; | ||
| + | -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; } | ||
| + | } | ||
| + | |||
| + | @-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; | ||
| + | -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); } | ||
| + | } | ||
| + | |||
| + | @-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; | ||
| + | -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); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @-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; | ||
| + | -o-animation-name: rollOut; | ||
| + | animation-name: rollOut; | ||
| + | } | ||
| + | |||
| + | /* originally authored by Angelo Rohit - https://github.com/angelorohit */ | ||
| + | |||
| + | @-webkit-keyframes lightSpeedIn { | ||
| + | 0% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; } | ||
| + | 60% { -webkit-transform: translateX(-20%) skewX(30deg); opacity: 1; } | ||
| + | 80% { -webkit-transform: translateX(0%) skewX(-15deg); opacity: 1; } | ||
| + | 100% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; } | ||
| + | } | ||
| + | |||
| + | @-moz-keyframes lightSpeedIn { | ||
| + | 0% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; } | ||
| + | 60% { -moz-transform: translateX(-20%) skewX(30deg); opacity: 1; } | ||
| + | 80% { -moz-transform: translateX(0%) skewX(-15deg); opacity: 1; } | ||
| + | 100% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; } | ||
| + | } | ||
| + | |||
| + | @-o-keyframes lightSpeedIn { | ||
| + | 0% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; } | ||
| + | 60% { -o-transform: translateX(-20%) skewX(30deg); opacity: 1; } | ||
| + | 80% { -o-transform: translateX(0%) skewX(-15deg); opacity: 1; } | ||
| + | 100% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; } | ||
| + | } | ||
| + | |||
| + | @keyframes lightSpeedIn { | ||
| + | 0% { transform: translateX(100%) skewX(-30deg); opacity: 0; } | ||
| + | 60% { transform: translateX(-20%) skewX(30deg); opacity: 1; } | ||
| + | 80% { transform: translateX(0%) skewX(-15deg); opacity: 1; } | ||
| + | 100% { transform: translateX(0%) skewX(0deg); opacity: 1; } | ||
| + | } | ||
| + | |||
| + | .lightSpeedIn { | ||
| + | -webkit-animation-name: lightSpeedIn; | ||
| + | -moz-animation-name: lightSpeedIn; | ||
| + | -o-animation-name: lightSpeedIn; | ||
| + | animation-name: lightSpeedIn; | ||
| + | |||
| + | -webkit-animation-timing-function: ease-out; | ||
| + | -moz-animation-timing-function: ease-out; | ||
| + | -o-animation-timing-function: ease-out; | ||
| + | animation-timing-function: ease-out; | ||
| + | } | ||
| + | |||
| + | .animated.lightSpeedIn { | ||
| + | -webkit-animation-duration: 0.5s; | ||
| + | -moz-animation-duration: 0.5s; | ||
| + | -o-animation-duration: 0.5s; | ||
| + | animation-duration: 0.5s; | ||
| + | } | ||
| + | |||
| + | /* originally authored by Angelo Rohit - https://github.com/angelorohit */ | ||
| + | |||
| + | @-webkit-keyframes lightSpeedOut { | ||
| + | 0% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; } | ||
| + | 100% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; } | ||
| + | } | ||
| + | |||
| + | @-moz-keyframes lightSpeedOut { | ||
| + | 0% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; } | ||
| + | 100% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; } | ||
| + | } | ||
| + | |||
| + | @-o-keyframes lightSpeedOut { | ||
| + | 0% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; } | ||
| + | 100% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; } | ||
| + | } | ||
| + | |||
| + | @keyframes lightSpeedOut { | ||
| + | 0% { transform: translateX(0%) skewX(0deg); opacity: 1; } | ||
| + | 100% { transform: translateX(100%) skewX(-30deg); opacity: 0; } | ||
| + | } | ||
| + | |||
| + | .lightSpeedOut { | ||
| + | -webkit-animation-name: lightSpeedOut; | ||
| + | -moz-animation-name: lightSpeedOut; | ||
| + | -o-animation-name: lightSpeedOut; | ||
| + | animation-name: lightSpeedOut; | ||
| + | |||
| + | -webkit-animation-timing-function: ease-in; | ||
| + | -moz-animation-timing-function: ease-in; | ||
| + | -o-animation-timing-function: ease-in; | ||
| + | animation-timing-function: ease-in; | ||
| + | } | ||
| + | |||
| + | .animated.lightSpeedOut { | ||
| + | -webkit-animation-duration: 0.25s; | ||
| + | -moz-animation-duration: 0.25s; | ||
| + | -o-animation-duration: 0.25s; | ||
| + | animation-duration: 0.25s; | ||
| + | } | ||
| + | |||
| + | /* originally authored by Angelo Rohit - https://github.com/angelorohit */ | ||
| + | |||
| + | @-webkit-keyframes wiggle { | ||
| + | 0% { -webkit-transform: skewX(9deg); } | ||
| + | 10% { -webkit-transform: skewX(-8deg); } | ||
| + | 20% { -webkit-transform: skewX(7deg); } | ||
| + | 30% { -webkit-transform: skewX(-6deg); } | ||
| + | 40% { -webkit-transform: skewX(5deg); } | ||
| + | 50% { -webkit-transform: skewX(-4deg); } | ||
| + | 60% { -webkit-transform: skewX(3deg); } | ||
| + | 70% { -webkit-transform: skewX(-2deg); } | ||
| + | 80% { -webkit-transform: skewX(1deg); } | ||
| + | 90% { -webkit-transform: skewX(0deg); } | ||
| + | 100% { -webkit-transform: skewX(0deg); } | ||
| + | } | ||
| + | |||
| + | @-moz-keyframes wiggle { | ||
| + | 0% { -moz-transform: skewX(9deg); } | ||
| + | 10% { -moz-transform: skewX(-8deg); } | ||
| + | 20% { -moz-transform: skewX(7deg); } | ||
| + | 30% { -moz-transform: skewX(-6deg); } | ||
| + | 40% { -moz-transform: skewX(5deg); } | ||
| + | 50% { -moz-transform: skewX(-4deg); } | ||
| + | 60% { -moz-transform: skewX(3deg); } | ||
| + | 70% { -moz-transform: skewX(-2deg); } | ||
| + | 80% { -moz-transform: skewX(1deg); } | ||
| + | 90% { -moz-transform: skewX(0deg); } | ||
| + | 100% { -moz-transform: skewX(0deg); } | ||
| + | } | ||
| + | |||
| + | @-o-keyframes wiggle { | ||
| + | 0% { -o-transform: skewX(9deg); } | ||
| + | 10% { -o-transform: skewX(-8deg); } | ||
| + | 20% { -o-transform: skewX(7deg); } | ||
| + | 30% { -o-transform: skewX(-6deg); } | ||
| + | 40% { -o-transform: skewX(5deg); } | ||
| + | 50% { -o-transform: skewX(-4deg); } | ||
| + | 60% { -o-transform: skewX(3deg); } | ||
| + | 70% { -o-transform: skewX(-2deg); } | ||
| + | 80% { -o-transform: skewX(1deg); } | ||
| + | 90% { -o-transform: skewX(0deg); } | ||
| + | 100% { -o-transform: skewX(0deg); } | ||
| + | } | ||
| + | |||
| + | @keyframes wiggle { | ||
| + | 0% { transform: skewX(9deg); } | ||
| + | 10% { transform: skewX(-8deg); } | ||
| + | 20% { transform: skewX(7deg); } | ||
| + | 30% { transform: skewX(-6deg); } | ||
| + | 40% { transform: skewX(5deg); } | ||
| + | 50% { transform: skewX(-4deg); } | ||
| + | 60% { transform: skewX(3deg); } | ||
| + | 70% { transform: skewX(-2deg); } | ||
| + | 80% { transform: skewX(1deg); } | ||
| + | 90% { transform: skewX(0deg); } | ||
| + | 100% { transform: skewX(0deg); } | ||
| + | } | ||
| + | |||
| + | .wiggle { | ||
| + | -webkit-animation-name: wiggle; | ||
| + | -moz-animation-name: wiggle; | ||
| + | -o-animation-name: wiggle; | ||
| + | animation-name: wiggle; | ||
| + | |||
| + | -webkit-animation-timing-function: ease-in; | ||
| + | -moz-animation-timing-function: ease-in; | ||
| + | -o-animation-timing-function: ease-in; | ||
| + | animation-timing-function: ease-in; | ||
| + | } | ||
| + | |||
| + | .animated.wiggle { | ||
| + | -webkit-animation-duration: 0.75s; | ||
| + | -moz-animation-duration: 0.75s; | ||
| + | -o-animation-duration: 0.75s; | ||
| + | animation-duration: 0.75s; | ||
| + | } | ||
| + | /* Collapse.css*/ | ||
| + | .grow input:checked{color:red;} | ||
| + | |||
| + | .grow { | ||
| + | -moz-transition: height .5s; | ||
| + | -ms-transition: height .5s; | ||
| + | -o-transition: height .5s; | ||
| + | -webkit-transition: height .5s; | ||
| + | transition: height .5s; | ||
| + | height: 0; | ||
| + | overflow: hidden; | ||
| + | } | ||
| + | |||
| + | .focus{ | ||
| + | background: rgba(0, 0, 0, 0.2); | ||
| + | box-shadow: inset 0 -1px rgba(0, 0, 0, 0); | ||
| + | color: #fff; | ||
| + | } | ||
| + | |||
| + | /*googleleapis1.css*/ | ||
| + | /* latin-ext */ | ||
| + | @font-face { | ||
| + | font-family: 'Source Serif Pro'; | ||
| + | font-style: normal; | ||
| + | font-weight: 400; | ||
| + | src: local('Source Serif Pro'), local('SourceSerifPro-Regular'), url(https://fonts.gstatic.com/s/sourceserifpro/v4/CeUM4np2c42DV49nanp55Q_BUM40eMa9-jBVStC9wY0.woff2) format('woff2'); | ||
| + | unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; | ||
| + | } | ||
| + | /* latin */ | ||
| + | @font-face { | ||
| + | font-family: 'Source Serif Pro'; | ||
| + | font-style: normal; | ||
| + | font-weight: 400; | ||
| + | src: local('Source Serif Pro'), local('SourceSerifPro-Regular'), url(https://fonts.gstatic.com/s/sourceserifpro/v4/CeUM4np2c42DV49nanp55fETq2ZMMnErnN6OL83eMrU.woff2) format('woff2'); | ||
| + | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; | ||
| + | } | ||
| + | /* latin-ext */ | ||
| + | @font-face { | ||
| + | font-family: 'Source Serif Pro'; | ||
| + | font-style: normal; | ||
| + | font-weight: 700; | ||
| + | src: local('Source Serif Pro Bold'), local('SourceSerifPro-Bold'), url(https://fonts.gstatic.com/s/sourceserifpro/v4/yd5lDMt8Sva2PE17yiLarKwVIEQt96q_HGoOJQzfwxw.woff2) format('woff2'); | ||
| + | unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; | ||
| + | } | ||
| + | /* latin */ | ||
| + | @font-face { | ||
| + | font-family: 'Source Serif Pro'; | ||
| + | font-style: normal; | ||
| + | font-weight: 700; | ||
| + | src: local('Source Serif Pro Bold'), local('SourceSerifPro-Bold'), url(https://fonts.gstatic.com/s/sourceserifpro/v4/yd5lDMt8Sva2PE17yiLarPgHLTi6vdOOFgNDwEC6JgI.woff2) format('woff2'); | ||
| + | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; | ||
| + | } | ||
| + | |||
| + | /*oogleleapis2.css*/ | ||
| + | /* latin-ext */ | ||
| + | @font-face { | ||
| + | font-family: 'Lato'; | ||
| + | font-style: normal; | ||
| + | font-weight: 300; | ||
| + | src: local('Lato Light'), local('Lato-Light'), url(http://fonts.gstatic.com/s/lato/v11/dPJ5r9gl3kK6ijoeP1IRsvY6323mHUZFJMgTvxaG2iE.woff2) format('woff2'); | ||
| + | unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; | ||
| + | } | ||
| + | /* latin */ | ||
| + | @font-face { | ||
| + | font-family: 'Lato'; | ||
| + | font-style: normal; | ||
| + | font-weight: 300; | ||
| + | src: local('Lato Light'), local('Lato-Light'), url(http://fonts.gstatic.com/s/lato/v11/EsvMC5un3kjyUhB9ZEPPwg.woff2) format('woff2'); | ||
| + | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; | ||
| + | } | ||
| + | /* latin-ext */ | ||
| + | @font-face { | ||
| + | font-family: 'Lato'; | ||
| + | font-style: normal; | ||
| + | font-weight: 400; | ||
| + | src: local('Lato Regular'), local('Lato-Regular'), url(http://fonts.gstatic.com/s/lato/v11/UyBMtLsHKBKXelqf4x7VRQ.woff2) format('woff2'); | ||
| + | unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; | ||
| + | } | ||
| + | /* latin */ | ||
| + | @font-face { | ||
| + | font-family: 'Lato'; | ||
| + | font-style: normal; | ||
| + | font-weight: 400; | ||
| + | src: local('Lato Regular'), local('Lato-Regular'), url(http://fonts.gstatic.com/s/lato/v11/1YwB1sO8YE1Lyjf12WNiUA.woff2) format('woff2'); | ||
| + | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; | ||
| + | } | ||
| + | /* latin-ext */ | ||
| + | @font-face { | ||
| + | font-family: 'Lato'; | ||
| + | font-style: normal; | ||
| + | font-weight: 700; | ||
| + | src: local('Lato Bold'), local('Lato-Bold'), url(http://fonts.gstatic.com/s/lato/v11/ObQr5XYcoH0WBoUxiaYK3_Y6323mHUZFJMgTvxaG2iE.woff2) format('woff2'); | ||
| + | unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; | ||
| + | } | ||
| + | /* latin */ | ||
| + | @font-face { | ||
| + | font-family: 'Lato'; | ||
| + | font-style: normal; | ||
| + | font-weight: 700; | ||
| + | src: local('Lato Bold'), local('Lato-Bold'), url(http://fonts.gstatic.com/s/lato/v11/H2DMvhDLycM56KNuAtbJYA.woff2) format('woff2'); | ||
| + | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; | ||
| + | } | ||
| + | |||
| + | /*normalize.css*/ | ||
| + | article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;} | ||
| + | |||
| + | /*demo.css*/ | ||
| + | *, *::after, *::before { -webkit-box-sizing: border-box; box-sizing: border-box; } | ||
| + | |||
| + | body { | ||
| + | font-family: 'Avenir Next', Avenir, 'Helvetica Neue', Helvetica, Arial, sans-serif; | ||
| + | color: #fff; | ||
| + | background: #34343d; | ||
| + | -webkit-font-smoothing: antialiased; | ||
| + | -moz-osx-font-smoothing: grayscale; | ||
| + | text-align: center; | ||
| + | } | ||
| + | |||
| + | a { | ||
| + | outline: none; | ||
| + | color: #60B8B9; | ||
| + | text-decoration: none; | ||
| + | } | ||
| + | |||
| + | a:hover, a:focus { | ||
| + | color: #fff; | ||
| + | } | ||
| + | |||
| + | .hidden { | ||
| + | position: absolute; | ||
| + | overflow: hidden; | ||
| + | width: 0; | ||
| + | height: 0; | ||
| + | pointer-events: none; | ||
| + | } | ||
| + | |||
| + | .message { | ||
| + | font-weight: bold; | ||
| + | color: #914a58; | ||
| + | background: #f0d4d8; | ||
| + | font-size: 0.85em; | ||
| + | margin: 0; | ||
| + | padding: 1em; | ||
| + | display: none; | ||
| + | } | ||
| + | |||
| + | /* Icons */ | ||
| + | .icon-link { | ||
| + | padding: 0 0.5em; | ||
| + | margin: 0 0 0 auto; | ||
| + | font-size: 0.85em; | ||
| + | white-space: nowrap; | ||
| + | } | ||
| + | |||
| + | .icon { | ||
| + | display: inline-block; | ||
| + | vertical-align: middle; | ||
| + | width: 1.5em; | ||
| + | height: 1.5em; | ||
| + | margin: 0 auto; | ||
| + | fill: currentColor; | ||
| + | } | ||
| + | |||
| + | .icon-text { | ||
| + | line-height: 1; | ||
| + | vertical-align: middle; | ||
| + | padding: 0.35em; | ||
| + | font-weight: bold; | ||
| + | display: inline-block; | ||
| + | } | ||
| + | |||
| + | main { | ||
| + | max-width: 1885px; | ||
| + | display: inline-block; | ||
| + | margin: 0 auto; | ||
| + | position: relative; | ||
| + | text-align: left; | ||
| + | } | ||
| + | |||
| + | /* Header */ | ||
| + | .codrops-header { | ||
| + | position: relative; | ||
| + | padding: 1em; | ||
| + | width: 100%; | ||
| + | display: -webkit-box; | ||
| + | display: -ms-flexbox; | ||
| + | display: -webkit-flex; | ||
| + | display: flex; | ||
| + | -webkit-box-orient: horizontal; | ||
| + | -webkit-box-direction: normal; | ||
| + | -ms-flex-direction: row; | ||
| + | -webkit-flex-direction: row; | ||
| + | flex-direction: row; | ||
| + | -webkit-align-items: center; | ||
| + | align-items: center; | ||
| + | z-index: 10; | ||
| + | background: #28282f; | ||
| + | } | ||
| + | |||
| + | .codrops-header__title { | ||
| + | margin: 0; | ||
| + | letter-spacing: -1px; | ||
| + | font-size: 1.65em; | ||
| + | white-space: nowrap; | ||
| + | line-height: 1; | ||
| + | font-family: 'Source Serif Pro', serif; | ||
| + | } | ||
| + | |||
| + | .codrops-header__tagline { | ||
| + | margin: 0 0 0 1.5em; | ||
| + | color: #495050; | ||
| + | font-weight: bold; | ||
| + | } | ||
| + | |||
| + | /* Top Navigation Style */ | ||
| + | .codrops-links { | ||
| + | position: relative; | ||
| + | display: inline-block; | ||
| + | text-align: center; | ||
| + | white-space: nowrap; | ||
| + | font-size: 0.8em; | ||
| + | margin: 0 1em 0 0; | ||
| + | } | ||
| + | |||
| + | .codrops-links::after { | ||
| + | position: absolute; | ||
| + | top: 15%; | ||
| + | left: 50%; | ||
| + | width: 1px; | ||
| + | height: 70%; | ||
| + | background: currentColor; | ||
| + | opacity: 0.2; | ||
| + | content: ''; | ||
| + | -webkit-transform: rotate3d(0,0,1,22.5deg); | ||
| + | transform: rotate3d(0,0,1,22.5deg); | ||
| + | } | ||
| + | |||
| + | .codrops-icon { | ||
| + | display: inline-block; | ||
| + | margin: 0.5em; | ||
| + | padding: 0.5em; | ||
| + | } | ||
| + | |||
| + | /* Demo links */ | ||
| + | .codrops-demos { | ||
| + | margin: 0 0 0 auto; | ||
| + | text-align: right; | ||
| + | } | ||
| + | |||
| + | .codrops-demos a { | ||
| + | display: inline-block; | ||
| + | margin: 0 0.5em; | ||
| + | font-weight: bold; | ||
| + | } | ||
| + | |||
| + | .codrops-demos a.current-demo { | ||
| + | color: #28282f; | ||
| + | } | ||
| + | |||
| + | /* Content */ | ||
| + | .content { | ||
| + | background: #28282f; | ||
| + | } | ||
| + | |||
| + | .content__inner { | ||
| + | max-width: 1000px; | ||
| + | margin: 0 auto; | ||
| + | padding: 13% 10% 18%; | ||
| + | } | ||
| + | |||
| + | .content__title, | ||
| + | .content__subtitle { | ||
| + | font-family: 'Source Serif Pro', serif; | ||
| + | } | ||
| + | |||
| + | .content__title { | ||
| + | font-size: 3em; | ||
| + | margin: 0; | ||
| + | } | ||
| + | |||
| + | .content__subtitle { | ||
| + | font-size: 2em; | ||
| + | font-weight: normal; | ||
| + | margin: 0.25em 0 0; | ||
| + | color: #9f9da7; | ||
| + | } | ||
| + | |||
| + | .content p { | ||
| + | font-size: 1.175em; | ||
| + | line-height: 1.6; | ||
| + | margin: 1.5em 0; | ||
| + | } | ||
| + | |||
| + | p.margin-paragraph { | ||
| + | margin: 8em 0 1.5em; | ||
| + | } | ||
| + | |||
| + | /* Related demos */ | ||
| + | .content--related { | ||
| + | padding: 4em 1em; | ||
| + | text-align: center; | ||
| + | font-weight: bold; | ||
| + | background: #1c1c21; | ||
| + | color: #495050; | ||
| + | } | ||
| + | |||
| + | .content--related a:hover, | ||
| + | .content--related a:focus { | ||
| + | color: #fff; | ||
| + | } | ||
| + | |||
| + | .media-item { | ||
| + | display: inline-block; | ||
| + | padding: 1em; | ||
| + | vertical-align: top; | ||
| + | -webkit-transition: color 0.3s; | ||
| + | transition: color 0.3s; | ||
| + | } | ||
| + | |||
| + | .media-item__img { | ||
| + | max-width: 100%; | ||
| + | opacity: 0.3; | ||
| + | -webkit-transition: opacity 0.3s; | ||
| + | transition: opacity 0.3s; | ||
| + | } | ||
| + | |||
| + | .media-item:hover .media-item__img, | ||
| + | .media-item:focus .media-item__img { | ||
| + | opacity: 1; | ||
| + | } | ||
| + | |||
| + | .media-item__title { | ||
| + | margin: 0; | ||
| + | padding: 0.5em; | ||
| + | font-size: 1em; | ||
| + | } | ||
| + | |||
| + | /* Sponsor */ | ||
| + | .pater { | ||
| + | display: none; | ||
| + | position: relative; | ||
| + | background: rgba(96,184,185,0.6); | ||
| + | padding: 2.5em 1em 2.5em; | ||
| + | width: 100%; | ||
| + | pointer-events: auto; | ||
| + | } | ||
| + | |||
| + | .pater:focus { | ||
| + | outline: none; | ||
| + | } | ||
| + | |||
| + | .pater::after { | ||
| + | content: 'Sponsored by'; | ||
| + | position: absolute; | ||
| + | top: 20px; | ||
| + | left: 20px; | ||
| + | color: #408283; | ||
| + | font-size: 0.65em; | ||
| + | font-weight: bold; | ||
| + | } | ||
| + | |||
| + | .pater__img { | ||
| + | max-width: 100%; | ||
| + | } | ||
| + | |||
| + | .pater__title { | ||
| + | font-size: 1em; | ||
| + | color: #fff; | ||
| + | margin: 0 0 0.25em 10px; | ||
| + | } | ||
| + | |||
| + | .pater__description { | ||
| + | color: #1a2638; | ||
| + | font-size: 0.85em; | ||
| + | font-weight: 600; | ||
| + | margin: 0 0 0 10px; | ||
| + | } | ||
| + | |||
| + | .pater__description strong { | ||
| + | color: #ffe38e; | ||
| + | } | ||
| + | |||
| + | .pater--responsive { | ||
| + | display: block; | ||
| + | } | ||
| + | |||
| + | @media screen and (min-width: 52.375em) { | ||
| + | .pater { | ||
| + | display: block; | ||
| + | position: absolute; | ||
| + | bottom: 0; | ||
| + | right: 0; | ||
| + | width: 400px; | ||
| + | padding: 2.5em 1em 1em; | ||
| + | -webkit-transform: translate3d(0,3.5em,0); | ||
| + | transform: translate3d(0,3.5em,0); | ||
| + | -webkit-transition: background 0.3s, -webkit-transform 0.3s; | ||
| + | transition: background 0.3s, transform 0.3s; | ||
| + | } | ||
| + | .points-content--open ~ .pater { | ||
| + | pointer-events: none; | ||
| + | -webkit-transform: translate3d(0,100%,0); | ||
| + | transform: translate3d(0,100%,0); | ||
| + | } | ||
| + | .pater:focus, | ||
| + | .pater:hover { | ||
| + | background: rgba(96,184,185,1); | ||
| + | -webkit-transform: translate3d(0,0,0); | ||
| + | transform: translate3d(0,0,0); | ||
| + | } | ||
| + | .pater__img { | ||
| + | -webkit-transform-origin: 0% 50%; | ||
| + | transform-origin: 0% 50%; | ||
| + | -webkit-transform: scale(1.5); | ||
| + | transform: scale(1.5); | ||
| + | -webkit-transition: -webkit-transform 0.3s; | ||
| + | transition: transform 0.3s; | ||
| + | } | ||
| + | .pater:focus .pater__img, | ||
| + | .pater:hover .pater__img { | ||
| + | -webkit-transform: scale(1); | ||
| + | transform: scale(1); | ||
| + | } | ||
| + | .pater__description { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translate3d(0,1em,0); | ||
| + | transform: translate3d(0,1em,0); | ||
| + | -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; | ||
| + | transition: opacity 0.3s, transform 0.3s; | ||
| + | } | ||
| + | |||
| + | .pater:focus .pater__description, | ||
| + | .pater:hover .pater__description { | ||
| + | -webkit-transform: translate3d(0,0,0); | ||
| + | transform: translate3d(0,0,0); | ||
| + | opacity: 1; | ||
| + | } | ||
| + | .pater--responsive { | ||
| + | display: none; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @media screen and (max-width: 52.375em) { | ||
| + | .codrops-header { | ||
| + | padding: 0.25em; | ||
| + | font-size: 0.65em; | ||
| + | } | ||
| + | .codrops-header__tagline { | ||
| + | display: none; | ||
| + | } | ||
| + | .content { | ||
| + | font-size: 0.75em; | ||
| + | } | ||
| + | .message { | ||
| + | display: block; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | /*component.css*/ | ||
| + | .interactive-points { | ||
| + | position: relative; | ||
| + | display: inline-block; | ||
| + | overflow: hidden; | ||
| + | width: 100%; | ||
| + | margin-bottom: -0.4em; | ||
| + | background: #cfced7; | ||
| + | } | ||
| + | |||
| + | .interactive-points:focus { | ||
| + | outline: none; | ||
| + | } | ||
| + | |||
| + | .backgrounds, | ||
| + | .background__element { | ||
| + | position: relative; | ||
| + | width: 100%; | ||
| + | } | ||
| + | |||
| + | .background__element { | ||
| + | height: 50vh; | ||
| + | background-repeat: no-repeat; | ||
| + | background-position: 50% 50%; | ||
| + | background-size: cover; | ||
| + | } | ||
| + | |||
| + | .static { | ||
| + | position: relative; | ||
| + | display: block; | ||
| + | margin: 0 auto; | ||
| + | opacity: 0.5; | ||
| + | } | ||
| + | |||
| + | .points { | ||
| + | position: absolute; | ||
| + | top: 0; | ||
| + | left: 0; | ||
| + | display: none; | ||
| + | } | ||
| + | |||
| + | .static, | ||
| + | .points { | ||
| + | width: 100%; | ||
| + | height: auto; | ||
| + | } | ||
| + | |||
| + | @media screen and (min-aspect-ratio: 1885/1000) { | ||
| + | .static, | ||
| + | .points { | ||
| + | width: auto; | ||
| + | height: calc(100vh - 6em); | ||
| + | min-height: 500px; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .points { | ||
| + | left: 50%; | ||
| + | -webkit-transform: translate3d(-50%,0,0); | ||
| + | transform: translate3d(-50%,0,0); | ||
| + | } | ||
| + | |||
| + | .point { | ||
| + | cursor: pointer; | ||
| + | fill: #28282f; | ||
| + | -webkit-transition: opacity 0.3s, -webkit-transform 0.3s, fill 0.3s; | ||
| + | transition: opacity 0.3s, transform 0.3s, fill 0.3s; | ||
| + | -webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1); | ||
| + | transition-timing-function: cubic-bezier(0.2,1,0.3,1); | ||
| + | } | ||
| + | |||
| + | .point--active { | ||
| + | fill: #408283; | ||
| + | -webkit-transform: scale3d(2,2,1); | ||
| + | transform: scale3d(2,2,1); | ||
| + | } | ||
| + | |||
| + | .point--hide { | ||
| + | opacity: 0; | ||
| + | pointer-events: none; | ||
| + | -webkit-transform: translate3d(0,10px,0); | ||
| + | transform: translate3d(0,10px,0); | ||
| + | } | ||
| + | |||
| + | .points-tooltips, | ||
| + | .points-content { | ||
| + | position: absolute; | ||
| + | bottom: 0; | ||
| + | left: 0; | ||
| + | width: 100%; | ||
| + | height: 100%; | ||
| + | pointer-events: none; | ||
| + | } | ||
| + | |||
| + | .points-tooltips { | ||
| + | display: -webkit-box; | ||
| + | display: -ms-flexbox; | ||
| + | display: flex; | ||
| + | -webkit-box-orient: vertical; | ||
| + | -webkit-box-direction: normal; | ||
| + | -ms-flex-direction: column; | ||
| + | flex-direction: column; | ||
| + | -webkit-box-pack: end; | ||
| + | -ms-flex-pack: end; | ||
| + | justify-content: flex-end; | ||
| + | } | ||
| + | |||
| + | .point-tooltip { | ||
| + | height: 50vh; | ||
| + | } | ||
| + | |||
| + | .point-tooltip__title { | ||
| + | font-family: 'Source Serif Pro', serif; | ||
| + | font-size: 1.5em; | ||
| + | line-height: 1; | ||
| + | margin: 0 0 0.15em; | ||
| + | display: inline-block; | ||
| + | background: #28282f; | ||
| + | padding: 5px; | ||
| + | } | ||
| + | |||
| + | .point-tooltip__description { | ||
| + | font-size: 0.85em; | ||
| + | font-weight: 500; | ||
| + | margin: 0; | ||
| + | line-height: 1; | ||
| + | display: inline-block; | ||
| + | background: #28282f; | ||
| + | padding: 5px; | ||
| + | } | ||
| + | |||
| + | .points-content { | ||
| + | -webkit-transition: background 0.1s; | ||
| + | transition: background 0.1s; | ||
| + | } | ||
| + | |||
| + | .points-content--open { | ||
| + | cursor: url(img/close.cur), pointer; | ||
| + | pointer-events: auto; | ||
| + | background: rgba(50,49,59,0.6); | ||
| + | } | ||
| + | |||
| + | @supports (cursor: zoom-in) { | ||
| + | .points-content--open { | ||
| + | cursor: url(https://static.igem.org/mediawiki/2016/d/df/T--NUS_Singapore--close.png) 12 6, pointer; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .point-content { | ||
| + | font-size: 1.25em; | ||
| + | position: absolute; | ||
| + | bottom: 0; | ||
| + | left: 0; | ||
| + | width: 100%; | ||
| + | min-width: 300px; | ||
| + | padding: 0 0 3em 3em; | ||
| + | opacity: 0; | ||
| + | } | ||
| + | |||
| + | .point-content--current { | ||
| + | pointer-events: auto; | ||
| + | opacity: 1; | ||
| + | } | ||
| + | |||
| + | .point-content__title { | ||
| + | font-family: 'Source Serif Pro', serif; | ||
| + | font-size: 2.25em; | ||
| + | margin: 0; | ||
| + | text-shadow: 0 1px 5px rgba(0,0,0,0.2); | ||
| + | } | ||
| + | |||
| + | .point-content__subtitle { | ||
| + | font-family: 'Source Serif Pro', serif; | ||
| + | font-weight: bold; | ||
| + | margin: 0.25em 0 0; | ||
| + | display: inline-block; | ||
| + | background: #408283; | ||
| + | color: #28282f; | ||
| + | padding: 0 10px; | ||
| + | line-height: 1.5; | ||
| + | } | ||
| + | |||
| + | .point-content__text { | ||
| + | font-weight: 500; | ||
| + | margin: 1em 0 0 0; | ||
| + | } | ||
| + | |||
| + | .point-content > * { | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translate3d(0,-40px,0); | ||
| + | transform: translate3d(0,-40px,0); | ||
| + | -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; | ||
| + | transition: opacity 0.3s, transform 0.3s; | ||
| + | } | ||
| + | |||
| + | .point-content--current > * { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: translate3d(0,0,0); | ||
| + | transform: translate3d(0,0,0); | ||
| + | } | ||
| + | |||
| + | .point-content--current > *:first-child { | ||
| + | -webkit-transition-delay: 0.1s; | ||
| + | transition-delay: 0.1s; | ||
| + | } | ||
| + | |||
| + | .point-content--current > *:nth-child(2) { | ||
| + | -webkit-transition-delay: 0.05s; | ||
| + | transition-delay: 0.05s; | ||
| + | } | ||
| + | |||
| + | /* Second example */ | ||
| + | .interactive-points--alter .point-content { | ||
| + | text-align: right; | ||
| + | left: auto; | ||
| + | right: 0; | ||
| + | padding: 0 3em 3em; | ||
| + | } | ||
| + | |||
| + | @media screen and (min-width: 52.375em) { | ||
| + | .point-content { | ||
| + | width: 50%; | ||
| + | } | ||
| + | .js .points { | ||
| + | display: block; | ||
| + | } | ||
| + | .js .backgrounds, | ||
| + | .js .background__element { | ||
| + | position: absolute; | ||
| + | top: 0; | ||
| + | left: 0; | ||
| + | width: 100%; | ||
| + | height: 100%; | ||
| + | } | ||
| + | .js .background__element { | ||
| + | opacity: 0; | ||
| + | -webkit-transition: opacity 0.1s; | ||
| + | transition: opacity 0.1s; | ||
| + | } | ||
| + | .js .points-tooltip { | ||
| + | display: block; | ||
| + | } | ||
| + | .js .point-tooltip { | ||
| + | position: absolute; | ||
| + | margin: 0.75em 0 0 0.25em; | ||
| + | opacity: 0; | ||
| + | -webkit-transform: translate3d(0,10px,0); | ||
| + | transform: translate3d(0,10px,0); | ||
| + | -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; | ||
| + | transition: opacity 0.3s, transform 0.3s; | ||
| + | } | ||
| + | .js .point-tooltip--current { | ||
| + | opacity: 1; | ||
| + | -webkit-transform: translate3d(0,0,0); | ||
| + | transform: translate3d(0,0,0); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | /*sidebar_transitions_normalize.css*/ | ||
| + | article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;} | ||
| + | |||
| + | /*sidebar_transitions_demo.css*/ | ||
| + | body { | ||
| + | background: #444; | ||
| + | color: #48a770; | ||
| + | font-weight: 300; | ||
| + | font-family: 'Lato', Calibri, Arial, sans-serif; | ||
| + | } | ||
| + | |||
| + | a { | ||
| + | text-decoration: none; | ||
| + | color: #48a770; | ||
| + | outline: none; | ||
| + | } | ||
| + | |||
| + | a:hover, a:focus { | ||
| + | color: #2c774b; | ||
| + | outline: none; | ||
| + | } | ||
| + | |||
| + | /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ | ||
| + | .clearfix:before, | ||
| + | .clearfix:after { | ||
| + | display: table; | ||
| + | content: " "; | ||
| + | } | ||
| + | |||
| + | .clearfix:after { | ||
| + | clear: both; | ||
| + | } | ||
| + | |||
| + | .codrops-header, | ||
| + | .codrops-top { | ||
| + | font-family: 'Lato', Arial, sans-serif; | ||
| + | } | ||
| + | |||
| + | .codrops-header { | ||
| + | margin: 0 auto 3em; | ||
| + | padding: 3em; | ||
| + | text-align: center; | ||
| + | } | ||
| + | |||
| + | .codrops-header h1 { | ||
| + | margin: 0; | ||
| + | font-weight: 300; | ||
| + | font-size: 2.625em; | ||
| + | line-height: 1.3; | ||
| + | } | ||
| + | |||
| + | .codrops-header span { | ||
| + | display: block; | ||
| + | padding: 0 0 0.6em 0.1em; | ||
| + | font-size: 60%; | ||
| + | color: #aca89a; | ||
| + | } | ||
| + | |||
| + | /* To Navigation Style */ | ||
| + | .codrops-top { | ||
| + | width: 100%; | ||
| + | text-transform: uppercase; | ||
| + | font-size: 0.69em; | ||
| + | line-height: 2.2; | ||
| + | font-weight: 400; | ||
| + | background: rgba(255,255,255,0.3); | ||
| + | } | ||
| + | |||
| + | .codrops-top a { | ||
| + | display: inline-block; | ||
| + | padding: 0 1em; | ||
| + | text-decoration: none; | ||
| + | letter-spacing: 0.1em; | ||
| + | } | ||
| + | |||
| + | .codrops-top a:hover { | ||
| + | background: rgba(255,255,255,0.4); | ||
| + | color: #333; | ||
| + | } | ||
| + | |||
| + | .codrops-top span.right { | ||
| + | float: right; | ||
| + | } | ||
| + | |||
| + | .codrops-top span.right a { | ||
| + | display: block; | ||
| + | float: left; | ||
| + | } | ||
| + | |||
| + | .codrops-icon:before { | ||
| + | margin: 0 4px; | ||
| + | text-transform: none; | ||
| + | font-weight: normal; | ||
| + | font-style: normal; | ||
| + | font-variant: normal; | ||
| + | font-family: 'codropsicons'; | ||
| + | line-height: 1; | ||
| + | speak: none; | ||
| + | -webkit-font-smoothing: antialiased; | ||
| + | -ms-font-smoothing: scale(1.1) translate(70px); /* IE 9 */ | ||
| + | } | ||
| + | |||
| + | .codrops-icon-drop:before { | ||
| + | content: "\e001"; | ||
| + | } | ||
| + | |||
| + | .codrops-icon-prev:before { | ||
| + | content: "\e004"; | ||
| + | } | ||
| + | |||
| + | .main { | ||
| + | max-width: 69em; | ||
| + | margin: 0 auto; | ||
| + | } | ||
| + | |||
| + | .column { | ||
| + | float: left; | ||
| + | width: 50%; | ||
| + | padding: 0 2em; | ||
| + | min-height: 300px; | ||
| + | position: relative; | ||
| + | text-align: right; | ||
| + | } | ||
| + | |||
| + | .column:nth-child(2) { | ||
| + | box-shadow: -1px 0 0 rgba(0,0,0,0.1); | ||
| + | text-align: left; | ||
| + | } | ||
| + | |||
| + | .column p { | ||
| + | font-weight: 300; | ||
| + | font-size: 2em; | ||
| + | padding: 0 0 0.5em; | ||
| + | margin: 0; | ||
| + | line-height: 1.5; | ||
| + | } | ||
| + | |||
| + | button { | ||
| + | border: none; | ||
| + | padding: 0.6em 1.2em; | ||
| + | background: #388a5a; | ||
| + | color: #fff; | ||
| + | font-family: 'Lato', Calibri, Arial, sans-serif; | ||
| + | font-size: 1em; | ||
| + | letter-spacing: 1px; | ||
| + | text-transform: uppercase; | ||
| + | cursor: pointer; | ||
| + | display: inline-block; | ||
| + | margin: 3px 2px; | ||
| + | border-radius: 2px; | ||
| + | -webkit-transition: all .2s ease-in-out; | ||
| + | transition: all .2s ease-in-out; | ||
| + | } | ||
| + | |||
| + | button:hover { | ||
| + | background-color: rgba(0,0,0,.5); | ||
| + | color: rgba(255,255,255,1); | ||
| + | -ms-transform: scale(1.7) translate(40px); /* IE 9 */ | ||
| + | -webkit-transform: scale(1.7) translate(40px); /* Safari */ | ||
| + | transform: scale(1.7) translate(40px); /* Standard syntax */ | ||
| + | outline: none; | ||
| + | } | ||
| + | |||
| + | .info { | ||
| + | text-align: center; | ||
| + | font-size: 1.5em; | ||
| + | margin-top: 3em; | ||
| + | clear: both; | ||
| + | padding: 3em 0; | ||
| + | opacity: 0.7; | ||
| + | color: #aca89a; | ||
| + | } | ||
| + | |||
| + | .info a { | ||
| + | font-weight: 700; | ||
| + | font-size: 0.9em; | ||
| + | } | ||
| + | |||
| + | @media screen and (max-width: 46.0625em) { | ||
| + | .column { | ||
| + | width: 100%; | ||
| + | min-width: auto; | ||
| + | min-height: auto; | ||
| + | padding: 2em; | ||
| + | text-align: center; | ||
| + | } | ||
| + | |||
| + | .column p { | ||
| + | font-size: 1.5em; | ||
| + | } | ||
| + | |||
| + | .column:nth-child(2) { | ||
| + | text-align: center; | ||
| + | box-shadow: 0 -1px 0 rgba(0,0,0,0.1); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @media screen and (max-width: 25em) { | ||
| + | |||
| + | .codrops-header { | ||
| + | font-size: 80%; | ||
| + | } | ||
| + | |||
| + | .codrops-top { | ||
| + | font-size: 120%; | ||
| + | } | ||
| + | |||
| + | .codrops-icon span { | ||
| + | display: none; | ||
| + | } | ||
| + | |||
| + | } | ||
| + | |||
| + | |||
| + | /*sidebar_transitions_icons.css*/ | ||
| + | @font-face { | ||
| + | font-family: 'linecons'; | ||
| + | src:url('../fonts/linecons/linecons.eot'); | ||
| + | src:url('../fonts/linecons/linecons.eot?#iefix') format('embedded-opentype'), | ||
| + | url('../fonts/linecons/linecons.woff') format('woff'), | ||
| + | url('../fonts/linecons/linecons.ttf') format('truetype'), | ||
| + | url('../fonts/linecons/linecons.svg#linecons') format('svg'); | ||
| + | font-weight: normal; | ||
| + | font-style: normal; | ||
| + | } | ||
| + | |||
| + | .icon:before { | ||
| + | font-family: 'linecons'; | ||
| + | speak: none; | ||
| + | font-style: normal; | ||
| + | font-weight: normal; | ||
| + | font-variant: normal; | ||
| + | text-transform: none; | ||
| + | line-height: 1; | ||
| + | display: inline-block; | ||
| + | vertical-align: bottom; | ||
| + | margin-right: 0.8em; | ||
| + | font-size: 1.2em; | ||
| + | -webkit-font-smoothing: antialiased; | ||
| + | height: 20px; | ||
| + | width: 20px; | ||
| + | background-size: 20px 20px; | ||
| + | display: inline-block; | ||
| + | content:""; | ||
| + | } | ||
| + | |||
| + | .icon-home:before { | ||
| + | background-image: url('https://static.igem.org/mediawiki/2016/5/54/T--NUS_Singapore--home.png'); | ||
| + | } | ||
| + | |||
| + | .icon-project:before { | ||
| + | background-image: url('https://static.igem.org/mediawiki/2016/e/e5/T--NUS_Singapore--project.png'); | ||
| + | } | ||
| + | |||
| + | .icon-notebook:before { | ||
| + | background-image: url('https://static.igem.org/mediawiki/2016/2/24/T--NUS_Singapore--notebook.png'); | ||
| + | } | ||
| + | |||
| + | .icon-team:before { | ||
| + | background-image: url('https://static.igem.org/mediawiki/2016/b/b5/T--NUS_Singapore--team.png'); | ||
| + | } | ||
| + | |||
| + | .icon-collaboration:before { | ||
| + | background-image: url('https://static.igem.org/mediawiki/2016/e/e5/T--NUS_Singapore--collaboration.png'); | ||
| + | } | ||
| + | |||
| + | .icon-practice:before { | ||
| + | background-image: url('https://static.igem.org/mediawiki/2016/1/1e/T--NUS_Singapore--practice.png'); | ||
| + | } | ||
| + | |||
| + | .icon-safety:before { | ||
| + | background-image: url('https://static.igem.org/mediawiki/2016/4/47/T--NUS_Singapore--safety.png'); | ||
| + | } | ||
| + | |||
| + | .icon-acknowledgement:before { | ||
| + | background-image: url('https://static.igem.org/mediawiki/2016/2/2b/T--NUS_Singapore--acknowledgement.png'); | ||
| + | } | ||
| + | |||
| + | .icon-female:before { | ||
| + | content: "\f182"; | ||
| + | } | ||
| + | .icon-male:before { | ||
| + | content: "\f183"; | ||
| + | } | ||
| + | .icon-arrow-left:before { | ||
| + | content: "\e032"; | ||
| + | } | ||
| + | .icon-arrow-left-2:before { | ||
| + | content: "\e034"; | ||
| + | } | ||
| + | .icon-arrow-left-3:before { | ||
| + | content: "\e036"; | ||
| + | } | ||
| + | .icon-arrow-left-4:before { | ||
| + | content: "\e038"; | ||
| + | } | ||
| + | .icon-arrow-right:before { | ||
| + | content: "\e035"; | ||
| + | } | ||
| + | .icon-arrow-right-2:before { | ||
| + | content: "\e037"; | ||
| + | } | ||
| + | .icon-arrow-right-3:before { | ||
| + | content: "\e039"; | ||
| + | } | ||
| + | .icon-arrow-right-4:before { | ||
| + | content: "\e033"; | ||
| + | } | ||
| + | |||
| + | .icon-phone:before { | ||
| + | content: "\e000"; | ||
| + | } | ||
| + | .icon-news:before { | ||
| + | content: "\e001"; | ||
| + | } | ||
| + | .icon-photo:before { | ||
| + | content: "\e002"; | ||
| + | } | ||
| + | .icon-shop:before { | ||
| + | content: "\e003"; | ||
| + | } | ||
| + | .icon-wallet:before { | ||
| + | content: "\e004"; | ||
| + | } | ||
| + | .icon-t-shirt:before { | ||
| + | content: "\e005"; | ||
| + | } | ||
| + | .icon-heart:before { | ||
| + | content: "\e006"; | ||
| + | } | ||
| + | .icon-cloud:before { | ||
| + | content: "\e007"; | ||
| + | } | ||
| + | .icon-display:before { | ||
| + | content: "\e008"; | ||
| + | } | ||
| + | .icon-diamond:before { | ||
| + | content: "\e009"; | ||
| + | } | ||
| + | .icon-banknote:before { | ||
| + | content: "\e00a"; | ||
| + | } | ||
| + | .icon-data:before { | ||
| + | content: "\e00b"; | ||
| + | } | ||
| + | .icon-music:before { | ||
| + | content: "\e00c"; | ||
| + | } | ||
| + | .icon-location:before { | ||
| + | content: "\e00d"; | ||
| + | } | ||
| + | .icon-star:before { | ||
| + | content: "\e00e"; | ||
| + | } | ||
| + | .icon-tv:before { | ||
| + | content: "\e00f"; | ||
| + | } | ||
| + | .icon-eye:before { | ||
| + | content: "\e010"; | ||
| + | } | ||
| + | .icon-megaphone:before { | ||
| + | content: "\e011"; | ||
| + | } | ||
| + | .icon-study:before { | ||
| + | content: "\e012"; | ||
| + | } | ||
| + | .icon-bubble:before { | ||
| + | content: "\e013"; | ||
| + | } | ||
| + | .icon-sound:before { | ||
| + | content: "\e014"; | ||
| + | } | ||
| + | .icon-video:before { | ||
| + | content: "\e015"; | ||
| + | } | ||
| + | .icon-stack:before { | ||
| + | content: "\e016"; | ||
| + | } | ||
| + | .icon-lab:before { | ||
| + | content: "\e017"; | ||
| + | } | ||
| + | .icon-food:before { | ||
| + | content: "\e018"; | ||
| + | } | ||
| + | .icon-cup:before { | ||
| + | content: "\e019"; | ||
| + | } | ||
| + | .icon-trash:before { | ||
| + | content: "\e01a"; | ||
| + | } | ||
| + | .icon-user:before { | ||
| + | content: "\e01b"; | ||
| + | } | ||
| + | .icon-key:before { | ||
| + | content: "\e01c"; | ||
| + | } | ||
| + | .icon-fire:before { | ||
| + | content: "\e01d"; | ||
| + | } | ||
| + | .icon-clip:before { | ||
| + | content: "\e01e"; | ||
| + | } | ||
| + | .icon-mail:before { | ||
| + | content: "\e01f"; | ||
| + | } | ||
| + | .icon-search:before { | ||
| + | content: "\e020"; | ||
| + | } | ||
| + | .icon-settings:before { | ||
| + | content: "\e021"; | ||
| + | } | ||
| + | .icon-like:before { | ||
| + | content: "\e022"; | ||
| + | } | ||
| + | .icon-calendar:before { | ||
| + | content: "\e023"; | ||
| + | } | ||
| + | .icon-camera:before { | ||
| + | content: "\e024"; | ||
| + | } | ||
| + | .icon-tag:before { | ||
| + | content: "\e025"; | ||
| + | } | ||
| + | .icon-note:before { | ||
| + | content: "\e026"; | ||
| + | } | ||
| + | .icon-clock:before { | ||
| + | content: "\e027"; | ||
| + | } | ||
| + | .icon-lock:before { | ||
| + | content: "\e028"; | ||
| + | } | ||
| + | .icon-vynil:before { | ||
| + | content: "\e029"; | ||
| + | } | ||
| + | .icon-truck:before { | ||
| + | content: "\e02a"; | ||
| + | } | ||
| + | .icon-paperplane:before { | ||
| + | content: "\e02b"; | ||
| + | } | ||
| + | .icon-bulb:before { | ||
| + | content: "\e02c"; | ||
| + | } | ||
| + | .icon-pen:before { | ||
| + | content: "\e02d"; | ||
| + | } | ||
| + | .icon-params:before { | ||
| + | content: "\e02e"; | ||
| + | } | ||
| + | .icon-world:before { | ||
| + | content: "\e02f"; | ||
| + | } | ||
| + | |||
| + | /*sidebar_transitions_component.css*/ | ||
| + | *, | ||
| + | *:after, | ||
| + | *::before { | ||
| + | -moz-box-sizing: border-box; | ||
| + | box-sizing: border-box; | ||
| + | } | ||
| + | |||
| + | html, | ||
| + | body, | ||
| + | .st-container, | ||
| + | .st-pusher, | ||
| + | .st-content { | ||
| + | height: 100%; | ||
| + | } | ||
| + | |||
| + | .st-content { | ||
| + | overflow-y: scroll; | ||
| + | background: #f3efe0; | ||
| + | } | ||
| + | |||
| + | .st-content, | ||
| + | .st-content-inner { | ||
| + | position: relative; | ||
| + | } | ||
| + | |||
| + | .st-container { | ||
| + | position: relative; | ||
| + | overflow: hidden; | ||
| + | } | ||
| + | |||
| + | .st-pusher { | ||
| + | position: relative; | ||
| + | left: 0; | ||
| + | z-index: 99; | ||
| + | height: 100%; | ||
| + | -webkit-transition: -webkit-transform 0.5s; | ||
| + | transition: transform 0.5s; | ||
| + | } | ||
| + | |||
| + | .st-pusher::after { | ||
| + | position: absolute; | ||
| + | top: 0; | ||
| + | right: 0; | ||
| + | width: 0; | ||
| + | height: 0; | ||
| + | background: rgba(0,0,0,0.2); | ||
| + | content: ''; | ||
| + | opacity: 0; | ||
| + | -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s; | ||
| + | transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s; | ||
| + | } | ||
| + | |||
| + | .st-menu-open .st-pusher::after { | ||
| + | width: 100%; | ||
| + | height: 100%; | ||
| + | opacity: 1; | ||
| + | -webkit-transition: opacity 0.5s; | ||
| + | transition: opacity 0.5s; | ||
| + | } | ||
| + | |||
| + | .st-menu { | ||
| + | position: fixed; | ||
| + | top: 0; | ||
| + | left: 0; | ||
| + | z-index: 100; | ||
| + | visibility: hidden; | ||
| + | width: 300px; | ||
| + | height: 100%; | ||
| + | background: #48a770; | ||
| + | -webkit-transition: all 0.5s; | ||
| + | transition: all 0.5s; | ||
| + | } | ||
| + | |||
| + | .st-menu::after { | ||
| + | position: absolute; | ||
| + | top: 0; | ||
| + | right: 0; | ||
| + | width: 100%; | ||
| + | height: 100%; | ||
| + | background: rgba(0,0,0,0.2); | ||
| + | content: ''; | ||
| + | opacity: 1; | ||
| + | -webkit-transition: opacity 0.5s; | ||
| + | transition: opacity 0.5s; | ||
| + | } | ||
| + | |||
| + | .st-menu-open .st-menu::after { | ||
| + | width: 0; | ||
| + | height: 0; | ||
| + | opacity: 0; | ||
| + | -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s; | ||
| + | transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s; | ||
| + | } | ||
| + | |||
| + | /* content style */ | ||
| + | |||
| + | .st-menu ul { | ||
| + | margin-top: 20%; | ||
| + | padding: 0; | ||
| + | list-style: none; | ||
| + | } | ||
| + | |||
| + | .st-menu h2 { | ||
| + | margin: 0; | ||
| + | padding: 1em; | ||
| + | color: rgba(0,0,0,0.4); | ||
| + | text-shadow: 0 0 1px rgba(0,0,0,0.1); | ||
| + | font-weight: 300; | ||
| + | font-size: 2em; | ||
| + | } | ||
| + | |||
| + | .st-menu ul li a { | ||
| + | display: block; | ||
| + | padding: 1em 1em 1em 1.2em; | ||
| + | width: 100%; | ||
| + | height: 20%; | ||
| + | outline: none; | ||
| + | box-shadow: inset 0 -1px rgba(0,0,0,0.2); | ||
| + | color: #f3efe0; | ||
| + | text-transform: uppercase; | ||
| + | text-shadow: 0 0 1px rgba(255,255,255,0.1); | ||
| + | letter-spacing: 1px; | ||
| + | font-weight: 400; | ||
| + | -webkit-transition: background 0.3s, box-shadow 0.3s; | ||
| + | transition: background 0.3s, box-shadow 0.3s; | ||
| + | } | ||
| + | |||
| + | .st-menu ul li:first-child a { | ||
| + | box-shadow: inset 0 -1px rgba(0,0,0,0.2), inset 0 1px rgba(0,0,0,0.2); | ||
| + | } | ||
| + | |||
| + | .st-menu ul li a:hover { | ||
| + | background: rgba(0,0,0,0.2); | ||
| + | box-shadow: inset 0 -1px rgba(0,0,0,0); | ||
| + | color: #fff; | ||
| + | } | ||
| + | |||
| + | /* Individual effects */ | ||
| + | |||
| + | /* Effect 1: Slide in on top */ | ||
| + | .st-effect-1.st-menu { | ||
| + | visibility: visible; | ||
| + | -webkit-transform: translate3d(-100%, 0, 0); | ||
| + | transform: translate3d(-100%, 0, 0); | ||
| + | } | ||
| + | |||
| + | .st-effect-1.st-menu-open .st-effect-1.st-menu { | ||
| + | visibility: visible; | ||
| + | -webkit-transform: translate3d(0, 0, 0); | ||
| + | transform: translate3d(0, 0, 0); | ||
| + | } | ||
| + | |||
| + | .st-effect-1.st-menu::after { | ||
| + | display: none; | ||
| + | } | ||
| + | |||
| + | /* Fallback example for browsers that don't support 3D transforms (and no JS fallback) */ | ||
| + | .no-csstransforms3d .st-pusher, | ||
| + | .no-js .st-pusher { | ||
| + | padding-left: 300px; | ||
| + | } | ||
| + | |||
| + | /*button.css*/ | ||
| + | /* Common button styles */ | ||
| + | .button { | ||
| + | float: left; | ||
| + | width: 100px; | ||
| + | height: 100px; | ||
| + | border-radius: 50%; | ||
| + | display: block; | ||
| + | margin: 1em; | ||
| + | padding: 1em 2em; | ||
| + | border: none; | ||
| + | background-color: rgba(0,0,0,.3); | ||
| + | vertical-align: middle; | ||
| + | position: fixed; | ||
| + | top: 40%; | ||
| + | left: -45px; | ||
| + | z-index: 1; | ||
| + | -webkit-backface-visibility: hidden; | ||
| + | -moz-osx-font-smoothing: grayscale; | ||
| + | -ms-backface-visibility: hidden; | ||
| + | } | ||
| + | .button:focus { | ||
| + | outline: none; | ||
| + | } | ||
| + | .button > span { | ||
| + | vertical-align: middle; | ||
| + | } | ||
| + | |||
| + | .button > span > img { | ||
| + | -ms-transform: rotate(-90deg); | ||
| + | -webkit-transform: rotate(-90deg); | ||
| + | transform: rotate(-90deg); | ||
| + | height: 50%; | ||
| + | width: 50%; | ||
| + | } | ||
| + | |||
| + | |||
| + | /* Borders */ | ||
| + | .button--border{ | ||
| + | border: none; | ||
| + | outline: none; | ||
| + | } | ||
| + | |||
| + | /* Rayen */ | ||
| + | .button--rayen { | ||
| + | overflow: hidden; | ||
| + | padding: 0; | ||
| + | } | ||
| + | .button--rayen.button--inverted { | ||
| + | color: #fff; | ||
| + | } | ||
| + | .button--rayen::before { | ||
| + | content: attr(data-text); | ||
| + | position: absolute; | ||
| + | font-size: 200%; | ||
| + | top: 0; | ||
| + | left: 0; | ||
| + | width: 100%; | ||
| + | height: 100%; | ||
| + | border-radius: 50%; | ||
| + | background-color: rgba(0,0,0,.5); | ||
| + | color: rgba(255,255,255,1); | ||
| + | line-height: 100px; | ||
| + | text-align: center; | ||
| + | -webkit-transform: translate3d(-100%, 0, 0); | ||
| + | transform: translate3d(-100%, 0, 0); | ||
| + | -ms-transform: translate3d(-100%, 0, 0); | ||
| + | } | ||
| + | .button--rayen.button--inverted::before { | ||
| + | background: #fff; | ||
| + | color: #37474f; | ||
| + | } | ||
| + | .button--rayen > span { | ||
| + | display: block; | ||
| + | } | ||
| + | .button--rayen::before, | ||
| + | .button--rayen > span { | ||
| + | -ms-transition: -webkit-transform 0.3s; | ||
| + | -webkit-transition: -webkit-transform 0.3s; | ||
| + | transition: transform 0.3s; | ||
| + | -ms-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); | ||
| + | -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); | ||
| + | transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); | ||
| + | } | ||
| + | .button--rayen:hover::before { | ||
| + | -ms-transform: translate3d(0, 0, 0); | ||
| + | -webkit-transform: translate3d(0, 0, 0); | ||
| + | transform: translate3d(0, 0, 0); | ||
| + | } | ||
| + | .button--rayen:hover > span { | ||
| + | -ms-transform: translate3d(0, 150%, 0); | ||
| + | -webkit-transform: translate3d(0, 150%, 0); | ||
| + | transform: translate3d(0, 150%, 0); | ||
| + | } | ||
| + | |||
| + | /*header_component.css*/ | ||
| + | |||
| + | *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } | ||
| + | |||
| + | /* Content style */ | ||
| + | |||
| + | .scroll { | ||
| + | position: fixed; | ||
| + | top: 50%; | ||
| + | left: 50%; | ||
| + | -webkit-transform: translateX(-50%) translateY(-50%); | ||
| + | -moz-transform: translateX(-50%) translateY(-50%); | ||
| + | transform: translateX(-50%) translateY(-50%); | ||
| + | letter-spacing: 1px; | ||
| + | font-weight: 700; | ||
| + | font-size: 2em; | ||
| + | line-height: 2; | ||
| + | width: 10em; | ||
| + | text-align: center; | ||
| + | height: 2em; | ||
| + | color: #e74c3c; | ||
| + | background: #fff; | ||
| + | font-style: normal; | ||
| + | text-transform: uppercase; | ||
| + | opacity: 0.8; | ||
| + | } | ||
| + | |||
| + | .scroll::after { | ||
| + | display: block; | ||
| + | content: '\2193'; | ||
| + | color: #fff; | ||
| + | font-size: 3em; | ||
| + | line-height: 1; | ||
| + | } | ||
| + | |||
| + | /* Header styles and animations */ | ||
| + | |||
| + | .ha-header { | ||
| + | position: fixed; | ||
| + | top: 0; | ||
| + | left: 0; | ||
| + | width: 100%; | ||
| + | padding: 0; | ||
| + | z-index: 50; | ||
| + | font-family: 'Lato', Arial, sans-serif; | ||
| + | -webkit-transform: translateY(0%); | ||
| + | -moz-transform: translateY(0%); | ||
| + | transform: translateY(0%); | ||
| + | -webkit-transition: all 0.5s; | ||
| + | -moz-transition: all 0.5s; | ||
| + | transition: all 0.5s; | ||
| + | } | ||
| + | |||
| + | .ha-header-perspective { | ||
| + | width: 100%; | ||
| + | height: 100%; | ||
| + | position: relative; | ||
| + | -webkit-perspective: 1100px; | ||
| + | -moz-perspective: 1100px; | ||
| + | perspective: 1100px; | ||
| + | -webkit-perspective-origin: 50% 0; | ||
| + | -moz-perspective-origin: 50% 0; | ||
| + | perspective-origin: 50% 0; | ||
| + | } | ||
| + | |||
| + | .ha-header-perspective > div { | ||
| + | background: #fff; | ||
| + | text-align: left; | ||
| + | padding: 0 7%; | ||
| + | height: 50%; | ||
| + | width: 100%; | ||
| + | margin: 0 auto; | ||
| + | position: relative; | ||
| + | text-align: justify; | ||
| + | -webkit-backface-visibility: hidden; | ||
| + | -moz-backface-visibility: hidden; | ||
| + | backface-visibility: hidden; | ||
| + | -webkit-transition: all 0.5s; | ||
| + | -moz-transition: all 0.5s; | ||
| + | transition: all 0.5s; | ||
| + | overflow: hidden; | ||
| + | } | ||
| + | |||
| + | .ha-header-front { | ||
| + | z-index: 2; | ||
| + | -webkit-transform-origin: 50% 100%; | ||
| + | -moz-transform-origin: 50% 100%; | ||
| + | transform-origin: 50% 100%; | ||
| + | } | ||
| + | |||
| + | .ha-header-perspective .ha-header-bottom { | ||
| + | background: #ddd; | ||
| + | -webkit-transform-origin: 50% 0%; | ||
| + | -moz-transform-origin: 50% 0%; | ||
| + | transform-origin: 50% 0%; | ||
| + | z-index: 1; | ||
| + | -webkit-transform: rotateX(-90deg); | ||
| + | -moz-transform: rotateX(-90deg); | ||
| + | transform: rotateX(-90deg); | ||
| + | -webkit-transition: top 0.5s; | ||
| + | -moz-transition: top 0.5s; | ||
| + | transition: top 0.5s; | ||
| + | position: absolute; | ||
| + | top: 0; | ||
| + | } | ||
| + | |||
| + | /* Justify inline-block elements (h1 on left side, nav on right) */ | ||
| + | .ha-header-perspective > div::after { | ||
| + | content: ''; | ||
| + | display: inline-block; | ||
| + | width: 100%; | ||
| + | } | ||
| + | |||
| + | /* Text styling */ | ||
| + | .ha-header h1, | ||
| + | .ha-header h1::before, | ||
| + | .ha-header h1 span, | ||
| + | .ha-header nav, | ||
| + | .ha-header nav::before { | ||
| + | display: inline-block; | ||
| + | vertical-align: middle; | ||
| + | text-align: left; | ||
| + | } | ||
| + | |||
| + | .ha-header h1 { | ||
| + | font-weight: 300; | ||
| + | margin: 0; | ||
| + | padding: 0 1em 0 0; | ||
| + | color: #2d383f; | ||
| + | cursor: default; | ||
| + | height: 100%; | ||
| + | z-index: 1; | ||
| + | -webkit-transition: all 0.5s; | ||
| + | -moz-transition: all 0.5s; | ||
| + | transition: all 0.5s; | ||
| + | } | ||
| + | |||
| + | .ha-header h1::before, | ||
| + | .ha-header nav::before { | ||
| + | content: ''; | ||
| + | height: 100%; | ||
| + | } | ||
| + | |||
| + | .ha-header h1::after { | ||
| + | content: ''; | ||
| + | width: 100px; | ||
| + | height: 96px; | ||
| + | background: #fff; | ||
| + | position: absolute; | ||
| + | z-index: 100; | ||
| + | top: 0; | ||
| + | left: 0; | ||
| + | cursor: pointer; | ||
| + | box-shadow: inset 0 8px #2d383f, inset 0 16px #fff, inset 0 24px #2d383f, inset 0 32px #fff, inset 0 40px #2d383f, inset 0 48px #fff, inset 0 56px #2d383f; | ||
| + | opacity: 0; | ||
| + | border: 20px solid #fff; | ||
| + | -webkit-transition: opacity 0.5s; | ||
| + | -moz-transition: opacity 0.5s; | ||
| + | transition: opacity 0.5s; | ||
| + | } | ||
| + | |||
| + | .ha-header nav { | ||
| + | height: 100%; | ||
| + | } | ||
| + | |||
| + | .ha-header nav a { | ||
| + | display: inline-block; | ||
| + | text-transform: uppercase; | ||
| + | letter-spacing: 1px; | ||
| + | font-weight: 700; | ||
| + | padding: 0.2em 0.4em; | ||
| + | margin: 0 0.4em 0; | ||
| + | font-size: 0.8em; | ||
| + | cursor: pointer; | ||
| + | color: #e74c3c; | ||
| + | outline: none; | ||
| + | text-decoration: none; | ||
| + | } | ||
| + | |||
| + | .ha-header nav a:hover { | ||
| + | color: #bc3c2f; | ||
| + | } | ||
| + | |||
| + | .ha-header nav a:last-child { | ||
| + | margin-right: 0; | ||
| + | } | ||
| + | |||
| + | .ha-header .ha-header-front nav a:first-child, | ||
| + | .ha-header .ha-header-front nav a:last-child { | ||
| + | border: 2px solid #e74c3c; | ||
| + | } | ||
| + | |||
| + | .ha-header .ha-header-front nav a:first-child:hover, | ||
| + | .ha-header .ha-header-front nav a:last-child:hover { | ||
| + | border: 2px solid #bc3c2f; | ||
| + | } | ||
| + | |||
| + | /* Individual states */ | ||
| + | .ha-header-rotate { | ||
| + | height: 15%; | ||
| + | } | ||
| + | |||
| + | .ha-header-rotate .ha-header-front { | ||
| + | -webkit-transform: translateY(-100%) rotateX(90deg); | ||
| + | -moz-transform: translateY(-100%) rotateX(90deg); | ||
| + | transform: translateY(-100%) rotateX(90deg); | ||
| + | } | ||
| + | |||
| + | .ha-header-rotate .ha-header-bottom { | ||
| + | top: 50%; | ||
| + | -webkit-transition: -webkit-transform 0.5s; | ||
| + | -moz-transition: -moz-transform 0.5s; | ||
| + | transition: transform 0.5s; | ||
| + | -webkit-transform: rotateX(0deg) translateY(-100%); | ||
| + | -moz-transform: rotateX(0deg) translateY(-100%); | ||
| + | transform: rotateX(0deg) translateY(-100%); | ||
| + | } | ||
| + | |||
| + | .ha-header-rotateBack { | ||
| + | height: 23%; | ||
| + | } | ||
| + | |||
| + | .ha-header-rotateBack .ha-header-front { | ||
| + | -webkit-transform: translateY(0%) rotateX(0deg); | ||
| + | -moz-transform: translateY(0%) rotateX(0deg); | ||
| + | transform: translateY(0%) rotateX(0deg); | ||
| + | } | ||
| + | |||
| + | .ha-header-rotateBack .ha-header-bottom { | ||
| + | top: 50%; | ||
| + | -webkit-transition: -webkit-transform 0.5s; | ||
| + | -moz-transition: -moz-transform 0.5s; | ||
| + | transition: transform 0.5s; | ||
| + | -webkit-transform: rotateX(-90deg); | ||
| + | -moz-transform: rotateX(-90deg); | ||
| + | transform: rotateX(-90deg); | ||
| + | } | ||
| + | |||
| + | /*Adjustment*/ | ||
| + | .content p{ | ||
| + | color: #48a770; | ||
| + | } | ||
| + | |||
| + | #bodyContent h1, h2, #bodyContent h3, #bodyContent h4, #bodyContent h5{ | ||
| + | color: #48a770; | ||
| + | } | ||
| + | |||
| + | main{ | ||
| + | padding-left: 24px; | ||
| + | } | ||
| + | |||
| + | #ha-header{ | ||
| + | padding-top: 15px; | ||
| + | } | ||
| + | </style> | ||
</html> | </html> | ||
| − | |||
Revision as of 10:39, 4 October 2016
