|
|
Line 1: |
Line 1: |
| <html> | | <html> |
| <style> | | <style> |
− | @charset "UTF-8";
| + | /* Collapse.css*/ |
− | /* | + | |
− | 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;
| + | |
− | }
| + | |
− | /* 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);
| + | |
− | }
| + | |
| .grow input:checked{color:red;} | | .grow input:checked{color:red;} |
| | | |
Line 3,374: |
Line 19: |
| color: #fff; | | color: #fff; |
| } | | } |
− | .interactive-points {
| |
− | position: relative;
| |
− | display: inline-block;
| |
− | overflow: hidden;
| |
− | width: 100%;
| |
− | margin-bottom: -0.4em;
| |
− | background: #cfced7;
| |
− | }
| |
| | | |
− | .interactive-points:focus { | + | /*googleleapis1.css*/ |
− | outline: none;
| + | /* 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 */ |
− | .backgrounds,
| + | @font-face { |
− | .background__element {
| + | font-family: 'Source Serif Pro'; |
− | position: relative;
| + | font-style: normal; |
− | width: 100%;
| + | 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 */ |
− | .background__element {
| + | @font-face { |
− | height: 50vh;
| + | font-family: 'Source Serif Pro'; |
− | background-repeat: no-repeat;
| + | font-style: normal; |
− | background-position: 50% 50%;
| + | font-weight: 700; |
− | background-size: cover;
| + | 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 */ |
− | .static {
| + | @font-face { |
− | position: relative;
| + | font-family: 'Source Serif Pro'; |
− | display: block;
| + | font-style: normal; |
− | margin: 0 auto;
| + | font-weight: 700; |
− | opacity: 0.5;
| + | 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; |
| } | | } |
| | | |
− | .points { | + | /*oogleleapis2.css*/ |
− | position: absolute;
| + | /* latin-ext */ |
− | top: 0;
| + | @font-face { |
− | left: 0;
| + | font-family: 'Lato'; |
− | display: none;
| + | 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 */ |
− | .static,
| + | @font-face { |
− | .points {
| + | font-family: 'Lato'; |
− | width: 100%;
| + | font-style: normal; |
− | height: auto;
| + | 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 */ |
− | @media screen and (min-aspect-ratio: 1885/1000) { | + | @font-face { |
− | .static,
| + | font-family: 'Lato'; |
− | .points {
| + | font-style: normal; |
− | width: auto;
| + | font-weight: 400; |
− | height: calc(100vh - 6em);
| + | src: local('Lato Regular'), local('Lato-Regular'), url(http://fonts.gstatic.com/s/lato/v11/UyBMtLsHKBKXelqf4x7VRQ.woff2) format('woff2'); |
− | min-height: 500px;
| + | unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; |
− | }
| + | |
| } | | } |
− | | + | /* latin */ |
− | .points {
| + | @font-face { |
− | left: 50%;
| + | font-family: 'Lato'; |
− | -webkit-transform: translate3d(-50%,0,0);
| + | font-style: normal; |
− | transform: translate3d(-50%,0,0);
| + | 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 */ |
− | .point {
| + | @font-face { |
− | cursor: pointer;
| + | font-family: 'Lato'; |
− | fill: #28282f;
| + | font-style: normal; |
− | -webkit-transition: opacity 0.3s, -webkit-transform 0.3s, fill 0.3s;
| + | font-weight: 700; |
− | transition: opacity 0.3s, transform 0.3s, fill 0.3s;
| + | src: local('Lato Bold'), local('Lato-Bold'), url(http://fonts.gstatic.com/s/lato/v11/ObQr5XYcoH0WBoUxiaYK3_Y6323mHUZFJMgTvxaG2iE.woff2) format('woff2'); |
− | -webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1);
| + | unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; |
− | transition-timing-function: cubic-bezier(0.2,1,0.3,1);
| + | |
| } | | } |
− | | + | /* latin */ |
− | .point--active {
| + | @font-face { |
− | fill: #408283;
| + | font-family: 'Lato'; |
− | -webkit-transform: scale3d(2,2,1);
| + | font-style: normal; |
− | transform: scale3d(2,2,1);
| + | 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; |
| } | | } |
| | | |
− | .point--hide { | + | /*normalize.css*/ |
− | opacity: 0;
| + | 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;} |
− | pointer-events: none;
| + | /*demo.css*/ |
− | -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(../img/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);
| + | |
− | }
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
| *, *::after, *::before { -webkit-box-sizing: border-box; box-sizing: border-box; } | | *, *::after, *::before { -webkit-box-sizing: border-box; box-sizing: border-box; } |
| | | |
Line 3,985: |
Line 458: |
| } | | } |
| | | |
− | /* latin-ext */ | + | |
− | @font-face {
| + | /*component.css*/ |
− | font-family: 'Source Serif Pro';
| + | .interactive-points { |
− | font-style: normal;
| + | position: relative; |
− | font-weight: 400;
| + | display: inline-block; |
− | src: local('Source Serif Pro'), local('SourceSerifPro-Regular'), url(https://fonts.gstatic.com/s/sourceserifpro/v4/CeUM4np2c42DV49nanp55Q_BUM40eMa9-jBVStC9wY0.woff2) format('woff2');
| + | overflow: hidden; |
− | unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
| + | width: 100%; |
| + | margin-bottom: -0.4em; |
| + | background: #cfced7; |
| } | | } |
− | /* latin */
| + | |
− | @font-face {
| + | .interactive-points:focus { |
− | font-family: 'Source Serif Pro';
| + | outline: none; |
− | 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 {
| + | .backgrounds, |
− | font-family: 'Source Serif Pro';
| + | .background__element { |
− | font-style: normal;
| + | position: relative; |
− | font-weight: 700;
| + | width: 100%; |
− | 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 {
| + | .background__element { |
− | font-family: 'Source Serif Pro';
| + | height: 50vh; |
− | font-style: normal;
| + | background-repeat: no-repeat; |
− | font-weight: 700;
| + | background-position: 50% 50%; |
− | src: local('Source Serif Pro Bold'), local('SourceSerifPro-Bold'), url(https://fonts.gstatic.com/s/sourceserifpro/v4/yd5lDMt8Sva2PE17yiLarPgHLTi6vdOOFgNDwEC6JgI.woff2) format('woff2');
| + | background-size: cover; |
− | 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 {
| + | .static { |
− | font-family: 'Lato';
| + | position: relative; |
− | font-style: normal;
| + | display: block; |
− | font-weight: 300;
| + | margin: 0 auto; |
− | src: local('Lato Light'), local('Lato-Light'), url(http://fonts.gstatic.com/s/lato/v11/dPJ5r9gl3kK6ijoeP1IRsvY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
| + | opacity: 0.5; |
− | unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
| + | |
| } | | } |
− | /* latin */
| + | |
− | @font-face {
| + | .points { |
− | font-family: 'Lato';
| + | position: absolute; |
− | font-style: normal;
| + | top: 0; |
− | font-weight: 300;
| + | left: 0; |
− | src: local('Lato Light'), local('Lato-Light'), url(http://fonts.gstatic.com/s/lato/v11/EsvMC5un3kjyUhB9ZEPPwg.woff2) format('woff2');
| + | display: none; |
− | 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 {
| + | .static, |
− | font-family: 'Lato';
| + | .points { |
− | font-style: normal;
| + | width: 100%; |
− | font-weight: 400;
| + | height: auto; |
− | 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 { | + | @media screen and (min-aspect-ratio: 1885/1000) { |
− | font-family: 'Lato';
| + | .static, |
− | font-style: normal;
| + | .points { |
− | font-weight: 400;
| + | width: auto; |
− | src: local('Lato Regular'), local('Lato-Regular'), url(http://fonts.gstatic.com/s/lato/v11/1YwB1sO8YE1Lyjf12WNiUA.woff2) format('woff2');
| + | height: calc(100vh - 6em); |
− | 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;
| + | min-height: 500px; |
− | }
| + | } |
− | /* 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;
| + | |
| } | | } |
| | | |
− | *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
| + | .points { |
− | | + | |
− | /* Content style */
| + | |
− | | + | |
− | .scroll { | + | |
− | position: fixed;
| + | |
− | top: 50%;
| + | |
| left: 50%; | | left: 50%; |
− | -webkit-transform: translateX(-50%) translateY(-50%); | + | -webkit-transform: translate3d(-50%,0,0); |
− | -moz-transform: translateX(-50%) translateY(-50%); | + | transform: translate3d(-50%,0,0); |
− | 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 { | + | .point { |
− | display: block; | + | cursor: pointer; |
− | content: '\2193'; | + | fill: #28282f; |
− | color: #fff; | + | -webkit-transition: opacity 0.3s, -webkit-transform 0.3s, fill 0.3s; |
− | font-size: 3em; | + | transition: opacity 0.3s, transform 0.3s, fill 0.3s; |
− | line-height: 1; | + | -webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1); |
| + | transition-timing-function: cubic-bezier(0.2,1,0.3,1); |
| } | | } |
| | | |
− | /* Header styles and animations */
| + | .point--active { |
| + | fill: #408283; |
| + | -webkit-transform: scale3d(2,2,1); |
| + | transform: scale3d(2,2,1); |
| + | } |
| | | |
− | .ha-header { | + | .point--hide { |
− | position: fixed; | + | opacity: 0; |
− | top: 0;
| + | pointer-events: none; |
− | left: 0; | + | -webkit-transform: translate3d(0,10px,0); |
− | width: 100%;
| + | transform: translate3d(0,10px,0); |
− | 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 { | + | .points-tooltips, |
| + | .points-content { |
| + | position: absolute; |
| + | bottom: 0; |
| + | left: 0; |
| width: 100%; | | width: 100%; |
| height: 100%; | | height: 100%; |
− | position: relative; | + | pointer-events: none; |
− | -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 { | + | .points-tooltips { |
− | background: #fff; | + | display: -webkit-box; |
− | text-align: left;
| + | display: -ms-flexbox; |
− | padding: 0 7%; | + | display: flex; |
− | height: 50%; | + | -webkit-box-orient: vertical; |
− | width: 100%; | + | -webkit-box-direction: normal; |
− | margin: 0 auto;
| + | -ms-flex-direction: column; |
− | position: relative;
| + | flex-direction: column; |
− | text-align: justify;
| + | -webkit-box-pack: end; |
− | -webkit-backface-visibility: hidden; | + | -ms-flex-pack: end; |
− | -moz-backface-visibility: hidden; | + | justify-content: flex-end; |
− | backface-visibility: hidden; | + | |
− | -webkit-transition: all 0.5s; | + | |
− | -moz-transition: all 0.5s; | + | |
− | transition: all 0.5s; | + | |
− | overflow: hidden;
| + | |
| } | | } |
| | | |
− | .ha-header-front { | + | .point-tooltip { |
− | z-index: 2; | + | height: 50vh; |
− | -webkit-transform-origin: 50% 100%;
| + | |
− | -moz-transform-origin: 50% 100%;
| + | |
− | transform-origin: 50% 100%;
| + | |
| } | | } |
| | | |
− | .ha-header-perspective .ha-header-bottom { | + | .point-tooltip__title { |
− | background: #ddd; | + | font-family: 'Source Serif Pro', serif; |
− | -webkit-transform-origin: 50% 0%;
| + | font-size: 1.5em; |
− | -moz-transform-origin: 50% 0%; | + | line-height: 1; |
− | transform-origin: 50% 0%; | + | margin: 0 0 0.15em; |
− | z-index: 1;
| + | display: inline-block; |
− | -webkit-transform: rotateX(-90deg); | + | background: #28282f; |
− | -moz-transform: rotateX(-90deg);
| + | padding: 5px; |
− | 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) */
| + | .point-tooltip__description { |
− | .ha-header-perspective > div::after { | + | font-size: 0.85em; |
− | content: '';
| + | font-weight: 500; |
− | display: inline-block;
| + | margin: 0; |
− | width: 100%;
| + | line-height: 1; |
| + | display: inline-block; |
| + | background: #28282f; |
| + | padding: 5px; |
| } | | } |
| | | |
− | /* Text styling */
| + | .points-content { |
− | .ha-header h1, | + | -webkit-transition: background 0.1s; |
− | .ha-header h1::before,
| + | transition: background 0.1s; |
− | .ha-header h1 span,
| + | |
− | .ha-header nav,
| + | |
− | .ha-header nav::before {
| + | |
− | display: inline-block; | + | |
− | vertical-align: middle;
| + | |
− | text-align: left; | + | |
| } | | } |
| | | |
− | .ha-header h1 { | + | .points-content--open { |
− | font-weight: 300;
| + | cursor: url(img/close.cur), pointer; |
− | margin: 0;
| + | pointer-events: auto; |
− | padding: 0 1em 0 0;
| + | background: rgba(50,49,59,0.6); |
− | 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,
| + | @supports (cursor: zoom-in) { |
− | .ha-header nav::before { | + | .points-content--open { |
− | content: '';
| + | cursor: url(../img/close.png) 12 6, pointer; |
− | height: 100%; | + | } |
| } | | } |
| | | |
− | .ha-header h1::after { | + | .point-content { |
− | content: ''; | + | font-size: 1.25em; |
− | width: 100px;
| + | |
− | height: 96px;
| + | |
− | background: #fff;
| + | |
| position: absolute; | | position: absolute; |
− | z-index: 100; | + | bottom: 0; |
− | top: 0;
| + | |
| left: 0; | | left: 0; |
− | cursor: pointer; | + | width: 100%; |
− | 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; | + | min-width: 300px; |
| + | padding: 0 0 3em 3em; |
| opacity: 0; | | opacity: 0; |
− | border: 20px solid #fff;
| |
− | -webkit-transition: opacity 0.5s;
| |
− | -moz-transition: opacity 0.5s;
| |
− | transition: opacity 0.5s;
| |
| } | | } |
| | | |
− | .ha-header nav { | + | .point-content--current { |
− | height: 100%; | + | pointer-events: auto; |
| + | opacity: 1; |
| } | | } |
| | | |
− | .ha-header nav a { | + | .point-content__title { |
− | display: inline-block; | + | font-family: 'Source Serif Pro', serif; |
− | text-transform: uppercase; | + | font-size: 2.25em; |
− | letter-spacing: 1px; | + | margin: 0; |
− | font-weight: 700; | + | text-shadow: 0 1px 5px rgba(0,0,0,0.2); |
− | 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 { | + | .point-content__subtitle { |
− | color: #bc3c2f; | + | 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; |
| } | | } |
| | | |
− | .ha-header nav a:last-child { | + | .point-content__text { |
− | margin-right: 0;
| + | font-weight: 500; |
| + | margin: 1em 0 0 0; |
| } | | } |
| | | |
− | .ha-header .ha-header-front nav a:first-child, | + | .point-content > * { |
− | .ha-header .ha-header-front nav a:last-child {
| + | opacity: 0; |
− | border: 2px solid #e74c3c; | + | -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; |
| } | | } |
| | | |
− | .ha-header .ha-header-front nav a:first-child:hover, | + | .point-content--current > * { |
− | .ha-header .ha-header-front nav a:last-child:hover {
| + | opacity: 1; |
− | border: 2px solid #bc3c2f; | + | -webkit-transform: translate3d(0,0,0); |
| + | transform: translate3d(0,0,0); |
| } | | } |
| | | |
− | /* Individual states */
| + | .point-content--current > *:first-child { |
− | .ha-header-rotate { | + | -webkit-transition-delay: 0.1s; |
− | height: 15%; | + | transition-delay: 0.1s; |
| } | | } |
| | | |
− | .ha-header-rotate .ha-header-front { | + | .point-content--current > *:nth-child(2) { |
− | -webkit-transform: translateY(-100%) rotateX(90deg); | + | -webkit-transition-delay: 0.05s; |
− | -moz-transform: translateY(-100%) rotateX(90deg); | + | transition-delay: 0.05s; |
− | transform: translateY(-100%) rotateX(90deg);
| + | |
| } | | } |
| | | |
− | .ha-header-rotate .ha-header-bottom { | + | /* Second example */ |
− | top: 50%; | + | .interactive-points--alter .point-content { |
− | -webkit-transition: -webkit-transform 0.5s; | + | text-align: right; |
− | -moz-transition: -moz-transform 0.5s; | + | left: auto; |
− | transition: transform 0.5s; | + | right: 0; |
− | -webkit-transform: rotateX(0deg) translateY(-100%);
| + | padding: 0 3em 3em; |
− | -moz-transform: rotateX(0deg) translateY(-100%);
| + | |
− | transform: rotateX(0deg) translateY(-100%);
| + | |
| } | | } |
| | | |
− | .ha-header-rotateBack {
| + | @media screen and (min-width: 52.375em) { |
− | height: 23%; | + | .point-content { |
− | } | + | width: 50%; |
− | | + | } |
− | .ha-header-rotateBack .ha-header-front { | + | .js .points { |
− | -webkit-transform: translateY(0%) rotateX(0deg); | + | display: block; |
− | -moz-transform: translateY(0%) rotateX(0deg); | + | } |
− | transform: translateY(0%) rotateX(0deg);
| + | .js .backgrounds, |
− | } | + | .js .background__element { |
− | | + | position: absolute; |
− | .ha-header-rotateBack .ha-header-bottom { | + | top: 0; |
− | top: 50%;
| + | left: 0; |
− | -webkit-transition: -webkit-transform 0.5s; | + | width: 100%; |
− | -moz-transition: -moz-transform 0.5s;
| + | height: 100%; |
− | transition: transform 0.5s;
| + | } |
− | -webkit-transform: rotateX(-90deg); | + | .js .background__element { |
− | -moz-transform: rotateX(-90deg);
| + | opacity: 0; |
− | transform: rotateX(-90deg);
| + | -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;} | | 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*/ |
| *, | | *, |
| *:after, | | *:after, |
Line 4,466: |
Line 883: |
| } | | } |
| | | |
− | @import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
| |
− | @font-face {
| |
− | font-weight: normal;
| |
− | font-style: normal;
| |
− | font-family: 'codropsicons';
| |
− | src:url('../fonts/codropsicons/codropsicons.eot');
| |
− | src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
| |
− | url('../fonts/codropsicons/codropsicons.woff') format('woff'),
| |
− | url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
| |
− | url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
| |
− | }
| |
| | | |
− | body {
| |
− | background: #444;
| |
− | color: #48a770;
| |
− | font-weight: 300;
| |
− | font-family: 'Lato', Calibri, Arial, sans-serif;
| |
− | }
| |
| | | |
− | a {
| + | /*sidebar_transitions_icons.css*/ |
− | 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;
| + | |
− | }
| + | |
− | | + | |
− | }
| + | |
| @font-face { | | @font-face { |
| font-family: 'linecons'; | | font-family: 'linecons'; |
Line 4,925: |
Line 1,125: |
| } | | } |
| | | |
− | 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_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*/ | | /*Adjustment*/ |
| .content p{ | | .content p{ |
Line 4,942: |
Line 1,639: |
| padding-top: 15px; | | padding-top: 15px; |
| } | | } |
− | </html>
| |
| </style> | | </style> |
| + | </html> |