/* ============================================== viseta de las animaciones ============================================== www.justinaguilar.com/animations/ http://www.minimamente.com/magic-css3-animations/ Questions, comments, concerns, love letters: justin@justinaguilar.com ============================================== */ .slideDown{ animation-name: slideDown; -webkit-animation-name: slideDown; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes slideDown { 0% { transform: translateY(-100%); } 50%{ transform: translateY(8%); } 65%{ transform: translateY(-4%); } 80%{ transform: translateY(4%); } 95%{ transform: translateY(-2%); } 100% { transform: translateY(0%); } } @-webkit-keyframes slideDown { 0% { -webkit-transform: translateY(-100%); } 50%{ -webkit-transform: translateY(8%); } 65%{ -webkit-transform: translateY(-4%); } 80%{ -webkit-transform: translateY(4%); } 95%{ -webkit-transform: translateY(-2%); } 100% { -webkit-transform: translateY(0%); } } /* ============================================== slideUp ============================================== */ .slideUp{ animation-name: slideUp; -webkit-animation-name: slideUp; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes slideUp { 0% { transform: translateY(100%); } 50%{ transform: translateY(-8%); } 65%{ transform: translateY(4%); } 80%{ transform: translateY(-4%); } 95%{ transform: translateY(2%); } 100% { transform: translateY(0%); } } @-webkit-keyframes slideUp { 0% { -webkit-transform: translateY(100%); } 50%{ -webkit-transform: translateY(-8%); } 65%{ -webkit-transform: translateY(4%); } 80%{ -webkit-transform: translateY(-4%); } 95%{ -webkit-transform: translateY(2%); } 100% { -webkit-transform: translateY(0%); } } /* ============================================== slideLeft ============================================== */ .slideLeft{ animation-name: slideLeft; -webkit-animation-name: slideLeft; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes slideLeft { 0% { transform: translateX(150%); } 50%{ transform: translateX(-8%); } 65%{ transform: translateX(4%); } 80%{ transform: translateX(-4%); } 95%{ transform: translateX(2%); } 100% { transform: translateX(0%); } } @-webkit-keyframes slideLeft { 0% { -webkit-transform: translateX(150%); } 50%{ -webkit-transform: translateX(-8%); } 65%{ -webkit-transform: translateX(4%); } 80%{ -webkit-transform: translateX(-4%); } 95%{ -webkit-transform: translateX(2%); } 100% { -webkit-transform: translateX(0%); } } /* ============================================== slideRight ============================================== */ .slideRight{ animation-name: slideRight; -webkit-animation-name: slideRight; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes slideRight { 0% { transform: translateX(-150%); } 50%{ transform: translateX(8%); } 65%{ transform: translateX(-4%); } 80%{ transform: translateX(4%); } 95%{ transform: translateX(-2%); } 100% { transform: translateX(0%); } } @-webkit-keyframes slideRight { 0% { -webkit-transform: translateX(-150%); } 50%{ -webkit-transform: translateX(8%); } 65%{ -webkit-transform: translateX(-4%); } 80%{ -webkit-transform: translateX(4%); } 95%{ -webkit-transform: translateX(-2%); } 100% { -webkit-transform: translateX(0%); } } /* ============================================== slideExpandUp ============================================== */ .slideExpandUp{ animation-name: slideExpandUp; -webkit-animation-name: slideExpandUp; animation-duration: 1.6s; -webkit-animation-duration: 1.6s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease -out; visibility: visible !important; } @keyframes slideExpandUp { 0% { transform: translateY(100%) scaleX(0.5); } 30%{ transform: translateY(-8%) scaleX(0.5); } 40%{ transform: translateY(2%) scaleX(0.5); } 50%{ transform: translateY(0%) scaleX(1.1); } 60%{ transform: translateY(0%) scaleX(0.9); } 70% { transform: translateY(0%) scaleX(1.05); } 80%{ transform: translateY(0%) scaleX(0.95); } 90% { transform: translateY(0%) scaleX(1.02); } 100%{ transform: translateY(0%) scaleX(1); } } @-webkit-keyframes slideExpandUp { 0% { -webkit-transform: translateY(100%) scaleX(0.5); } 30%{ -webkit-transform: translateY(-8%) scaleX(0.5); } 40%{ -webkit-transform: translateY(2%) scaleX(0.5); } 50%{ -webkit-transform: translateY(0%) scaleX(1.1); } 60%{ -webkit-transform: translateY(0%) scaleX(0.9); } 70% { -webkit-transform: translateY(0%) scaleX(1.05); } 80%{ -webkit-transform: translateY(0%) scaleX(0.95); } 90% { -webkit-transform: translateY(0%) scaleX(1.02); } 100%{ -webkit-transform: translateY(0%) scaleX(1); } } /* ============================================== expandUp ============================================== */ .expandUp{ animation-name: expandUp; -webkit-animation-name: expandUp; animation-duration: 0.7s; -webkit-animation-duration: 0.7s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes expandUp { 0% { transform: translateY(100%) scale(0.6) scaleY(0.5); } 60%{ transform: translateY(-7%) scaleY(1.12); } 75%{ transform: translateY(3%); } 100% { transform: translateY(0%) scale(1) scaleY(1); } } @-webkit-keyframes expandUp { 0% { -webkit-transform: translateY(100%) scale(0.6) scaleY(0.5); } 60%{ -webkit-transform: translateY(-7%) scaleY(1.12); } 75%{ -webkit-transform: translateY(3%); } 100% { -webkit-transform: translateY(0%) scale(1) scaleY(1); } } /* ============================================== fadeIn ============================================== */ .fadeIn{ animation-name: fadeIn; -webkit-animation-name: fadeIn; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes fadeIn { 0% { transform: scale(0); opacity: 0.0; } 60% { transform: scale(1.1); } 80% { transform: scale(0.9); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @-webkit-keyframes fadeIn { 0% { -webkit-transform: scale(0); opacity: 0.0; } 60% { -webkit-transform: scale(1.1); } 80% { -webkit-transform: scale(0.9); opacity: 1; } 100% { -webkit-transform: scale(1); opacity: 1; } } /* ============================================== expandOpen ============================================== */ .expandOpen{ animation-name: expandOpen; -webkit-animation-name: expandOpen; animation-duration: 1.2s; -webkit-animation-duration: 1.2s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; visibility: visible !important; } @keyframes expandOpen { 0% { transform: scale(1.8); } 50% { transform: scale(0.95); } 80% { transform: scale(1.05); } 90% { transform: scale(0.98); } 100% { transform: scale(1); } } @-webkit-keyframes expandOpen { 0% { -webkit-transform: scale(1.8); } 50% { -webkit-transform: scale(0.95); } 80% { -webkit-transform: scale(1.05); } 90% { -webkit-transform: scale(0.98); } 100% { -webkit-transform: scale(1); } } /* ============================================== bigEntrance ============================================== */ .bigEntrance{ animation-name: bigEntrance; -webkit-animation-name: bigEntrance; animation-duration: 1.6s; -webkit-animation-duration: 1.6s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; visibility: visible !important; } @keyframes bigEntrance { 0% { transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%); opacity: 0.2; } 30% { transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%); opacity: 1; } 45% { transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 60% { transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%); opacity: 1; } 75% { transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 90% { transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } 100% { transform: scale(1) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } } @-webkit-keyframes bigEntrance { 0% { -webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%); opacity: 0.2; } 30% { -webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%); opacity: 1; } 45% { -webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 60% { -webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%); opacity: 1; } 75% { -webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 90% { -webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } 100% { -webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } } /* ============================================== hatch ============================================== */ .hatch{ animation-name: hatch; -webkit-animation-name: hatch; animation-duration: 2s; -webkit-animation-duration: 2s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; visibility: visible !important; } .hatch2{ animation-name: hatch; -webkit-animation-name: hatch; animation-duration: 2s; -webkit-animation-duration: 2s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; visibility: visible !important; } @keyframes hatch { 0% { transform: rotate(0deg); } 20% { transform: rotate(-2deg); } 35% { transform: rotate(2deg); } 50% { transform: rotate(-2deg); } 65% { transform: rotate(1deg); } 80% { transform: rotate(-1deg); } 100% { transform: rotate(0deg); } } @-webkit-keyframes hatch { 0% { -webkit-transform: rotate(0deg); } 20% { -webkit-transform: rotate(-2deg); } 35% { -webkit-transform: rotate(2deg); } 50% { -webkit-transform: rotate(-2deg); } 65% { -webkit-transform: rotate(1deg); } 80% { -webkit-transform: rotate(-1deg); } 100% { -webkit-transform: rotate(0deg); } } /* ============================================== bounce ============================================== */ .bounce{ animation-name: bounce; -webkit-animation-name: bounce; animation-duration: 1.6s; -webkit-animation-duration: 1.6s; animation-timing-function: ease; -webkit-animation-timing-function: ease; transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; } @keyframes bounce { 0% { transform: translateY(0%) scaleY(0.6); } 60%{ transform: translateY(-100%) scaleY(1.1); } 70%{ transform: translateY(0%) scaleY(0.95) scaleX(1.05); } 80%{ transform: translateY(0%) scaleY(1.05) scaleX(1); } 90%{ transform: translateY(0%) scaleY(0.95) scaleX(1); } 100%{ transform: translateY(0%) scaleY(1) scaleX(1); } } @-webkit-keyframes bounce { 0% { -webkit-transform: translateY(0%) scaleY(0.6); } 60%{ -webkit-transform: translateY(-100%) scaleY(1.1); } 70%{ -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05); } 80%{ -webkit-transform: translateY(0%) scaleY(1.05) scaleX(1); } 90%{ -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1); } 100%{ -webkit-transform: translateY(0%) scaleY(1) scaleX(1); } } /* ============================================== pulse ============================================== */ .pulse{ animation-name: pulse; -webkit-animation-name: pulse; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes pulse { 0% { transform: scale(0.9); opacity: 0.7; } 50% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.9); opacity: 0.7; } } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(0.95); opacity: 0.7; } 50% { -webkit-transform: scale(1); opacity: 1; } 100% { -webkit-transform: scale(0.95); opacity: 0.7; } } /* ============================================== floating ============================================== */ .floating{ animation-name: floating; -webkit-animation-name: floating; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes floating { 0% { transform: translateY(0%); } 50% { transform: translateY(8%); } 100% { transform: translateY(0%); } } @-webkit-keyframes floating { 0% { -webkit-transform: translateY(0%); } 50% { -webkit-transform: translateY(8%); } 100% { -webkit-transform: translateY(0%); } } /* ============================================== tossing ============================================== */ .tossing{ animation-name: tossing; -webkit-animation-name: tossing; animation-duration: 2.5s; -webkit-animation-duration: 2.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes tossing { 0% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } 100% { transform: rotate(-4deg); } } @-webkit-keyframes tossing { 0% { -webkit-transform: rotate(-4deg); } 50% { -webkit-transform: rotate(4deg); } 100% { -webkit-transform: rotate(-4deg); } } /* ============================================== pullUp ============================================== */ .pullUp{ animation-name: pullUp; -webkit-animation-name: pullUp; animation-duration: 1.1s; -webkit-animation-duration: 1.1s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; } @keyframes pullUp { 0% { transform: scaleY(0.1); } 40% { transform: scaleY(1.02); } 60% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(1); } } @-webkit-keyframes pullUp { 0% { -webkit-transform: scaleY(0.1); } 40% { -webkit-transform: scaleY(1.02); } 60% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(1); } } /* ============================================== pullDown ============================================== */ .pullDown{ animation-name: pullDown; -webkit-animation-name: pullDown; animation-duration: 1.1s; -webkit-animation-duration: 1.1s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -webkit-transform-origin: 50% 0%; visibility: visible !important; } @keyframes pullDown { 0% { transform: scaleY(1.01); } 50% { transform: scaleY(1.2); } 100% { -webkit-transform: scaleY(1.01); } } @-webkit-keyframes pullDown { 0% { -webkit-transform: scaleY(1.01); } 50% { -webkit-transform: scaleY(1.2); } 100% { -webkit-transform: scaleY(1.01); } } /* ============================================== stretchLeft ============================================== */ .stretchLeft{ animation-name: stretchLeft; -webkit-animation-name: stretchLeft; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 100% 0%; -ms-transform-origin: 100% 0%; -webkit-transform-origin: 100% 0%; visibility: visible !important; } @keyframes stretchLeft { 0% { transform: scaleX(0.3); } 40% { transform: scaleX(1.02); } 60% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(1); } } @-webkit-keyframes stretchLeft { 0% { -webkit-transform: scaleX(0.3); } 40% { -webkit-transform: scaleX(1.02); } 60% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(1); } } /* ============================================== stretchRight ============================================== */ .stretchRight{ animation-name: stretchRight; -webkit-animation-name: stretchRight; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; } @keyframes stretchRight { 0% { transform: scaleX(0.3); } 40% { transform: scaleX(1.02); } 60% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(1); } } @-webkit-keyframes stretchRight { 0% { -webkit-transform: scaleX(0.3); } 40% { -webkit-transform: scaleX(1.02); } 60% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(1); } } .magictime { -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; } .magic { -webkit-animation-name: magic; -moz-animation-name: magic; -ms-animation-name: magic; -o-animation-name: magic; animation-name: magic; } .openDownLeft { -webkit-animation-name: openDownLeft; -moz-animation-name: openDownLeft; -ms-animation-name: openDownLeft; -o-animation-name: openDownLeft; animation-name: openDownLeft; } .openDownRight { -webkit-animation-name: openDownRight; -moz-animation-name: openDownRight; -ms-animation-name: openDownRight; -o-animation-name: openDownRight; animation-name: openDownRight; } .openUpLeft { -webkit-animation-name: openUpLeft; -moz-animation-name: openUpLeft; -ms-animation-name: openUpLeft; -o-animation-name: openUpLeft; animation-name: openUpLeft; } .openUpRight { -webkit-animation-name: openUpRight; -moz-animation-name: openUpRight; -ms-animation-name: openUpRight; -o-animation-name: openUpRight; animation-name: openUpRight; } .openDownLeftRetourn { -webkit-animation-name: openDownLeftRetourn; -moz-animation-name: openDownLeftRetourn; -ms-animation-name: openDownLeftRetourn; -o-animation-name: openDownLeftRetourn; animation-name: openDownLeftRetourn; } .openDownRightRetourn { -webkit-animation-name: openDownRightRetourn; -moz-animation-name: openDownRightRetourn; -ms-animation-name: openDownRightRetourn; -o-animation-name: openDownRightRetourn; animation-name: openDownRightRetourn; } .openUpLeftRetourn { -webkit-animation-name: openUpLeftRetourn; -moz-animation-name: openUpLeftRetourn; -ms-animation-name: openUpLeftRetourn; -o-animation-name: openUpLeftRetourn; animation-name: openUpLeftRetourn; } .openUpRightRetourn { -webkit-animation-name: openUpRightRetourn; -moz-animation-name: openUpRightRetourn; -ms-animation-name: openUpRightRetourn; -o-animation-name: openUpRightRetourn; animation-name: openUpRightRetourn; } .openDownLeftOut { -webkit-animation-name: openDownLeftOut; -moz-animation-name: openDownLeftOut; -ms-animation-name: openDownLeftOut; -o-animation-name: openDownLeftOut; animation-name: openDownLeftOut; } .openDownRightOut { -webkit-animation-name: openDownRightOut; -moz-animation-name: openDownRightOut; -ms-animation-name: openDownRightOut; -o-animation-name: openDownRightOut; animation-name: openDownRightOut; } .openUpLeftOut { -webkit-animation-name: openUpLeftOut; -moz-animation-name: openUpLeftOut; -ms-animation-name: openUpLeftOut; -o-animation-name: openUpLeftOut; animation-name: openUpLeftOut; } .openUpRightOut { -webkit-animation-name: openUpRightOut; -moz-animation-name: openUpRightOut; -ms-animation-name: openUpRightOut; -o-animation-name: openUpRightOut; animation-name: openUpRightOut; } .perspectiveDown { -webkit-backface-visibility: visible !important; -moz-backface-visibility: visible !important; -ms-backface-visibility: visible !important; -o-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: perspectiveDown; -moz-animation-name: perspectiveDown; -ms-animation-name: perspectiveDown; -o-animation-name: perspectiveDown; animation-name: perspectiveDown; } .perspectiveLeft { -webkit-backface-visibility: visible !important; -moz-backface-visibility: visible !important; -ms-backface-visibility: visible !important; -o-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: perspectiveLeft; -moz-animation-name: perspectiveLeft; -ms-animation-name: perspectiveLeft; -o-animation-name: perspectiveLeft; animation-name: perspectiveLeft; } .perspectiveRight { -webkit-backface-visibility: visible !important; -moz-backface-visibility: visible !important; -ms-backface-visibility: visible !important; -o-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: perspectiveRight; -moz-animation-name: perspectiveRight; -ms-animation-name: perspectiveRight; -o-animation-name: perspectiveRight; animation-name: perspectiveRight; } .perspectiveUp { -webkit-backface-visibility: visible !important; -moz-backface-visibility: visible !important; -ms-backface-visibility: visible !important; -o-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: perspectiveUp; -moz-animation-name: perspectiveUp; -ms-animation-name: perspectiveUp; -o-animation-name: perspectiveUp; animation-name: perspectiveUp; } .perspectiveDownRetourn { -webkit-backface-visibility: visible !important; -moz-backface-visibility: visible !important; -ms-backface-visibility: visible !important; -o-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: perspectiveDownRetourn; -moz-animation-name: perspectiveDownRetourn; -ms-animation-name: perspectiveDownRetourn; -o-animation-name: perspectiveDownRetourn; animation-name: perspectiveDownRetourn; } .perspectiveLeftRetourn { -webkit-backface-visibility: visible !important; -moz-backface-visibility: visible !important; -ms-backface-visibility: visible !important; -o-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: perspectiveLeftRetourn; -moz-animation-name: perspectiveLeftRetourn; -ms-animation-name: perspectiveLeftRetourn; -o-animation-name: perspectiveLeftRetourn; animation-name: perspectiveLeftRetourn; } .perspectiveRightRetourn { -webkit-backface-visibility: visible !important; -moz-backface-visibility: visible !important; -ms-backface-visibility: visible !important; -o-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: perspectiveRightRetourn; -moz-animation-name: perspectiveRightRetourn; -ms-animation-name: perspectiveRightRetourn; -o-animation-name: perspectiveRightRetourn; animation-name: perspectiveRightRetourn; } .perspectiveUpRetourn backface-visibility: visible { -webkit-animation-name: perspectiveUpRetourn; -moz-animation-name: perspectiveUpRetourn; -ms-animation-name: perspectiveUpRetourn; -o-animation-name: perspectiveUpRetourn; animation-name: perspectiveUpRetourn; } .puffIn { -webkit-animation-name: puffIn; -moz-animation-name: puffIn; -ms-animation-name: puffIn; -o-animation-name: puffIn; animation-name: puffIn; } .puffOut { -webkit-animation-name: puffOut; -moz-animation-name: puffOut; -ms-animation-name: puffOut; -o-animation-name: puffOut; animation-name: puffOut; } .rotateDown { animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-timing-function: ease; -webkit-animation-timing-function: ease; animation-iteration-count:1; animation-fill-mode:both; -webkit-animation-fill-mode:both; -webkit-animation-fill-mode: backwards; -webkit-animation-name: rotateDown; -moz-animation-name: rotateDown; -ms-animation-name: rotateDown; -o-animation-name: rotateDown; animation-name: rotateDown; } .rotateLeft { -webkit-backface-visibility: visible !important; -moz-backface-visibility: visible !important; -ms-backface-visibility: visible !important; -o-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: rotateLeft; -moz-animation-name: rotateLeft; -ms-animation-name: rotateLeft; -o-animation-name: rotateLeft; animation-name: rotateLeft; } .rotateRight { -webkit-backface-visibility: visible !important; -moz-backface-visibility: visible !important; -ms-backface-visibility: visible !important; -o-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: rotateRight; -moz-animation-name: rotateRight; -ms-animation-name: rotateRight; -o-animation-name: rotateRight; animation-name: rotateRight; } .rotateUp { -webkit-backface-visibility: visible !important; -moz-backface-visibility: visible !important; -ms-backface-visibility: visible !important; -o-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: rotateUp; -moz-animation-name: rotateUp; -ms-animation-name: rotateUp; -o-animation-name: rotateUp; animation-name: rotateUp; } .slideDown { -webkit-animation-name: slideDown; -moz-animation-name: slideDown; -ms-animation-name: slideDown; -o-animation-name: slideDown; animation-name: slideDown; } .slideLeft { -webkit-animation-name: slideLeft; -moz-animation-name: slideLeft; -ms-animation-name: slideLeft; -o-animation-name: slideLeft; animation-name: slideLeft; } .slideRight { -webkit-animation-name: slideRight; -moz-animation-name: slideRight; -ms-animation-name: slideRight; -o-animation-name: slideRight; animation-name: slideRight; } .slideUp { -webkit-animation-name: slideUp; -moz-animation-name: slideUp; -ms-animation-name: slideUp; -o-animation-name: slideUp; animation-name: slideUp; } .slideDownRetourn { -webkit-animation-name: slideDownRetourn; -moz-animation-name: slideDownRetourn; -ms-animation-name: slideDownRetourn; -o-animation-name: slideDownRetourn; animation-name: slideDownRetourn; } .slideLeftRetourn { -webkit-animation-name: slideLeftRetourn; -moz-animation-name: slideLeftRetourn; -ms-animation-name: slideLeftRetourn; -o-animation-name: slideLeftRetourn; animation-name: slideLeftRetourn; } .slideRightRetourn { -webkit-animation-name: slideRightRetourn; -moz-animation-name: slideRightRetourn; -ms-animation-name: slideRightRetourn; -o-animation-name: slideRightRetourn; animation-name: slideRightRetourn; } .slideUpRetourn { -webkit-animation-name: slideUpRetourn; -moz-animation-name: slideUpRetourn; -ms-animation-name: slideUpRetourn; -o-animation-name: slideUpRetourn; animation-name: slideUpRetourn; } .swap { -webkit-animation-name: swap; -moz-animation-name: swap; -ms-animation-name: swap; -o-animation-name: swap; animation-name: swap; } .twisterInDown { -webkit-animation-name: twisterInDown; -moz-animation-name: twisterInDown; -ms-animation-name: twisterInDown; -o-animation-name: twisterInDown; animation-name: twisterInDown; } .twisterInUp { -webkit-animation-name: twisterInUp; -moz-animation-name: twisterInUp; -ms-animation-name: twisterInUp; -o-animation-name: twisterInUp; animation-name: twisterInUp; } .vanishIn { -webkit-animation-name: vanishIn; -moz-animation-name: vanishIn; -ms-animation-name: vanishIn; -o-animation-name: vanishIn; animation-name: vanishIn; } .vanishOut { -webkit-animation-name: vanishOut; -moz-animation-name: vanishOut; -ms-animation-name: vanishOut; -o-animation-name: vanishOut; animation-name: vanishOut; } .swashOut { -webkit-animation-name: swashOut; -moz-animation-name: swashOut; -ms-animation-name: swashOut; -o-animation-name: swashOut; animation-name: swashOut; } .swashIn { -webkit-animation-name: swashIn; -moz-animation-name: swashIn; -ms-animation-name: swashIn; -o-animation-name: swashIn; animation-name: swashIn; } .foolishOut { -webkit-animation-name: foolishOut; -moz-animation-name: foolishOut; -ms-animation-name: foolishOut; -o-animation-name: foolishOut; animation-name: foolishOut; } .foolishIn { -webkit-animation-name: foolishIn; -moz-animation-name: foolishIn; -ms-animation-name: foolishIn; -o-animation-name: foolishIn; animation-name: foolishIn; } .holeOut { -webkit-animation-name: holeOut; -moz-animation-name: holeOut; -ms-animation-name: holeOut; -o-animation-name: holeOut; animation-name: holeOut; } .tinRightOut { -webkit-animation-name: tinRightOut; -moz-animation-name: tinRightOut; -ms-animation-name: tinRightOut; -o-animation-name: tinRightOut; animation-name: tinRightOut; } .tinLeftOut { -webkit-animation-name: tinLeftOut; -moz-animation-name: tinLeftOut; -ms-animation-name: tinLeftOut; -o-animation-name: tinLeftOut; animation-name: tinLeftOut; } .tinUpOut { -webkit-animation-name: tinUpOut; -moz-animation-name: tinUpOut; -ms-animation-name: tinUpOut; -o-animation-name: tinUpOut; animation-name: tinUpOut; } .tinDownOut { -webkit-animation-name: tinDownOut; -moz-animation-name: tinDownOut; -ms-animation-name: tinDownOut; -o-animation-name: tinDownOut; animation-name: tinDownOut; } .tinRightIn { -webkit-animation-name: tinRightIn; -moz-animation-name: tinRightIn; -ms-animation-name: tinRightIn; -o-animation-name: tinRightIn; animation-name: tinRightIn; } .tinLeftIn { -webkit-animation-name: tinLeftIn; -moz-animation-name: tinLeftIn; -ms-animation-name: tinLeftIn; -o-animation-name: tinLeftIn; animation-name: tinLeftIn; } .tinUpIn { -webkit-animation-name: tinUpIn; -moz-animation-name: tinUpIn; -ms-animation-name: tinUpIn; -o-animation-name: tinUpIn; animation-name: tinUpIn; } .tinDownIn { -webkit-animation-name: tinDownIn; -moz-animation-name: tinDownIn; -ms-animation-name: tinDownIn; -o-animation-name: tinDownIn; animation-name: tinDownIn; } .bombRightOut { -webkit-animation-name: bombRightOut; -moz-animation-name: bombRightOut; -ms-animation-name: bombRightOut; -o-animation-name: bombRightOut; animation-name: bombRightOut; } .bombLeftOut { -webkit-animation-name: bombLeftOut; -moz-animation-name: bombLeftOut; -ms-animation-name: bombLeftOut; -o-animation-name: bombLeftOut; animation-name: bombLeftOut; } @-moz-keyframes magic { 0% { opacity: 1; -webkit-transform-origin: 100% 200%; -moz-transform-origin: 100% 200%; -ms-transform-origin: 100% 200%; -o-transform-origin: 100% 200%; transform-origin: 100% 200%; -webkit-transform: scale(1, 1) rotate(0deg); -moz-transform: scale(1, 1) rotate(0deg); -ms-transform: scale(1, 1) rotate(0deg); -o-transform: scale(1, 1) rotate(0deg); transform: scale(1, 1) rotate(0deg); } 100% { opacity: 0; -webkit-transform-origin: 200% 500%; -moz-transform-origin: 200% 500%; -ms-transform-origin: 200% 500%; -o-transform-origin: 200% 500%; transform-origin: 200% 500%; -webkit-transform: scale(0, 0) rotate(270deg); -moz-transform: scale(0, 0) rotate(270deg); -ms-transform: scale(0, 0) rotate(270deg); -o-transform: scale(0, 0) rotate(270deg); transform: scale(0, 0) rotate(270deg); } } @-webkit-keyframes magic { 0% { opacity: 1; -webkit-transform-origin: 100% 200%; -moz-transform-origin: 100% 200%; -ms-transform-origin: 100% 200%; -o-transform-origin: 100% 200%; transform-origin: 100% 200%; -webkit-transform: scale(1, 1) rotate(0deg); -moz-transform: scale(1, 1) rotate(0deg); -ms-transform: scale(1, 1) rotate(0deg); -o-transform: scale(1, 1) rotate(0deg); transform: scale(1, 1) rotate(0deg); } 100% { opacity: 0; -webkit-transform-origin: 200% 500%; -moz-transform-origin: 200% 500%; -ms-transform-origin: 200% 500%; -o-transform-origin: 200% 500%; transform-origin: 200% 500%; -webkit-transform: scale(0, 0) rotate(270deg); -moz-transform: scale(0, 0) rotate(270deg); -ms-transform: scale(0, 0) rotate(270deg); -o-transform: scale(0, 0) rotate(270deg); transform: scale(0, 0) rotate(270deg); } } @-o-keyframes magic { 0% { opacity: 1; -webkit-transform-origin: 100% 200%; -moz-transform-origin: 100% 200%; -ms-transform-origin: 100% 200%; -o-transform-origin: 100% 200%; transform-origin: 100% 200%; -webkit-transform: scale(1, 1) rotate(0deg); -moz-transform: scale(1, 1) rotate(0deg); -ms-transform: scale(1, 1) rotate(0deg); -o-transform: scale(1, 1) rotate(0deg); transform: scale(1, 1) rotate(0deg); } 100% { opacity: 0; -webkit-transform-origin: 200% 500%; -moz-transform-origin: 200% 500%; -ms-transform-origin: 200% 500%; -o-transform-origin: 200% 500%; transform-origin: 200% 500%; -webkit-transform: scale(0, 0) rotate(270deg); -moz-transform: scale(0, 0) rotate(270deg); -ms-transform: scale(0, 0) rotate(270deg); -o-transform: scale(0, 0) rotate(270deg); transform: scale(0, 0) rotate(270deg); } } @-ms-keyframes magic { 0% { opacity: 1; -webkit-transform-origin: 100% 200%; -moz-transform-origin: 100% 200%; -ms-transform-origin: 100% 200%; -o-transform-origin: 100% 200%; transform-origin: 100% 200%; -webkit-transform: scale(1, 1) rotate(0deg); -moz-transform: scale(1, 1) rotate(0deg); -ms-transform: scale(1, 1) rotate(0deg); -o-transform: scale(1, 1) rotate(0deg); transform: scale(1, 1) rotate(0deg); } 100% { opacity: 0; -webkit-transform-origin: 200% 500%; -moz-transform-origin: 200% 500%; -ms-transform-origin: 200% 500%; -o-transform-origin: 200% 500%; transform-origin: 200% 500%; -webkit-transform: scale(0, 0) rotate(270deg); -moz-transform: scale(0, 0) rotate(270deg); -ms-transform: scale(0, 0) rotate(270deg); -o-transform: scale(0, 0) rotate(270deg); transform: scale(0, 0) rotate(270deg); } } @keyframes magic { 0% { opacity: 1; -webkit-transform-origin: 100% 200%; -moz-transform-origin: 100% 200%; -ms-transform-origin: 100% 200%; -o-transform-origin: 100% 200%; transform-origin: 100% 200%; -webkit-transform: scale(1, 1) rotate(0deg); -moz-transform: scale(1, 1) rotate(0deg); -ms-transform: scale(1, 1) rotate(0deg); -o-transform: scale(1, 1) rotate(0deg); transform: scale(1, 1) rotate(0deg); } 100% { opacity: 0; -webkit-transform-origin: 200% 500%; -moz-transform-origin: 200% 500%; -ms-transform-origin: 200% 500%; -o-transform-origin: 200% 500%; transform-origin: 200% 500%; -webkit-transform: scale(0, 0) rotate(270deg); -moz-transform: scale(0, 0) rotate(270deg); -ms-transform: scale(0, 0) rotate(270deg); -o-transform: scale(0, 0) rotate(270deg); transform: scale(0, 0) rotate(270deg); } } @-moz-keyframes openDownLeft { 0% { -webkit-transform-origin: bottom left; -moz-transform-origin: bottom left; -ms-transform-origin: bottom left; -o-transform-origin: bottom left; transform-origin: bottom left; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { -webkit-transform-origin: bottom left; -moz-transform-origin: bottom left; -ms-transform-origin: bottom left; -o-transform-origin: bottom left; transform-origin: bottom left; -webkit-transform: rotate(-110deg); -moz-transform: rotate(-110deg); -ms-transform: rotate(-110deg); -o-transform: rotate(-110deg); transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } } @-webkit-keyframes openDownLeft { 0% { -webkit-transform-origin: bottom left; -moz-transform-origin: bottom left; -ms-transform-origin: bottom left; -o-transform-origin: bottom left; transform-origin: bottom left; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { -webkit-transform-origin: bottom left; -moz-transform-origin: bottom left; -ms-transform-origin: bottom left; -o-transform-origin: bottom left; transform-origin: bottom left; -webkit-transform: rotate(-110deg); -moz-transform: rotate(-110deg); -ms-transform: rotate(-110deg); -o-transform: rotate(-110deg); transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } } @-o-keyframes openDownLeft { 0% { -webkit-transform-origin: bottom left; -moz-transform-origin: bottom left; -ms-transform-origin: bottom left; -o-transform-origin: bottom left; transform-origin: bottom left; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { -webkit-transform-origin: bottom left; -moz-transform-origin: bottom left; -ms-transform-origin: bottom left; -o-transform-origin: bottom left; transform-origin: bottom left; -webkit-transform: rotate(-110deg); -moz-transform: rotate(-110deg); -ms-transform: rotate(-110deg); -o-transform: rotate(-110deg); transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } } @-ms-keyframes openDownLeft { 0% { -webkit-transform-origin: bottom left; -moz-transform-origin: bottom left; -ms-transform-origin: bottom left; -o-transform-origin: bottom left; transform-origin: bottom left; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { -webkit-transform-origin: bottom left; -moz-transform-origin: bottom left; -ms-transform-origin: bottom left; -o-transform-origin: bottom left; transform-origin: bottom left; -webkit-transform: rotate(-110deg); -moz-transform: rotate(-110deg); -ms-transform: rotate(-110deg); -o-transform: rotate(-110deg); transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } } @keyframes openDownLeft { 0% { -webkit-transform-origin: bottom left; -moz-transform-origin: bottom left; -ms-transform-origin: bottom left; -o-transform-origin: bottom left; transform-origin: bottom left; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { -webkit-transform-origin: bottom left; -moz-transform-origin: bottom left; -ms-transform-origin: bottom left; -o-transform-origin: bottom left; transform-origin: bottom left; -webkit-transform: rotate(-110deg); -moz-transform: rotate(-110deg); -ms-transform: rotate(-110deg); -o-transform: rotate(-110deg); transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } } @-moz-keyframes openDownRight { 0% { -webkit-transform-origin: bottom right; -moz-transform-origin: bottom right; -ms-transform-origin: bottom right; -o-transform-origin: bottom right; transform-origin: bottom right; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { -webkit-transform-origin: bottom right; -moz-transform-origin: bottom right; -ms-transform-origin: bottom right; -o-transform-origin: bottom right; transform-origin: bottom right; -webkit-transform: rotate(110deg); -moz-transform: rotate(110deg); -ms-transform: rotate(110deg); -o-transform: rotate(110deg); transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } } @-webkit-keyframes openDownRight { 0% { -webkit-transform-origin: bottom right; -moz-transform-origin: bottom right; -ms-transform-origin: bottom right; -o-transform-origin: bottom right; transform-origin: bottom right; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { -webkit-transform-origin: bottom right; -moz-transform-origin: bottom right; -ms-transform-origin: bottom right; -o-transform-origin: bottom right; transform-origin: bottom right; -webkit-transform: rotate(110deg); -moz-transform: rotate(110deg); -ms-transform: rotate(110deg); -o-transform: rotate(110deg); transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } } @-o-keyframes openDownRight { 0% { -webkit-transform-origin: bottom right; -moz-transform-origin: bottom right; -ms-transform-origin: bottom right; -o-transform-origin: bottom right; transform-origin: bottom right; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { -webkit-transform-origin: bottom right; -moz-transform-origin: bottom right; -ms-transform-origin: bottom right; -o-transform-origin: bottom right; transform-origin: bottom right; -webkit-transform: rotate(110deg); -moz-transform: rotate(110deg); -ms-transform: rotate(110deg); -o-transform: rotate(110deg); transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } } @-ms-keyframes openDownRight { 0% { -webkit-transform-origin: bottom right; -moz-transform-origin: bottom right; -ms-transform-origin: bottom right; -o-transform-origin: bottom right; transform-origin: bottom right; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { -webkit-transform-origin: bottom right; -moz-transform-origin: bottom right; -ms-transform-origin: bottom right; -o-transform-origin: bottom right; transform-origin: bottom right; -webkit-transform: rotate(110deg); -moz-transform: rotate(110deg); -ms-transform: rotate(110deg); -o-transform: rotate(110deg); transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } } @keyframes openDownRight { 0% { -webkit-transform-origin: bottom right; -moz-transform-origin: bottom right; -ms-transform-origin: bottom right; -o-transform-origin: bottom right; transform-origin: bottom right; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { -webkit-transform-origin: bottom right; -moz-transform-origin: bottom right; -ms-transform-origin: bottom right; -o-transform-origin: bottom right; transform-origin: bottom right; -webkit-transform: rotate(110deg); -moz-transform: rotate(110deg); -ms-transform: rotate(110deg); -o-transform: rotate(110deg); transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } } @-moz-keyframes openUpLeft { 0% { -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; -webkit-transform: rotate(110deg); -moz-transform: rotate(110deg); -ms-transform: rotate(110deg); -o-transform: rotate(110deg); transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } } @-webkit-keyframes openUpLeft { 0% { -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; -webkit-transform: rotate(110deg); -moz-transform: rotate(110deg); -ms-transform: rotate(110deg); -o-transform: rotate(110deg); transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } } @-o-keyframes openUpLeft { 0% { -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; -webkit-transform: rotate(110deg); -moz-transform: rotate(110deg); -ms-transform: rotate(110deg); -o-transform: rotate(110deg); transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } } @-ms-keyframes openUpLeft { 0% { -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; -webkit-transform: rotate(110deg); -moz-transform: rotate(110deg); -ms-transform: rotate(110deg); -o-transform: rotate(110deg); transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } } @keyframes openUpLeft { 0% { -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; -webkit-transform: rotate(110deg); -moz-transform: rotate(110deg); -ms-transform: rotate(110deg); -o-transform: rotate(110deg); transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } } @-moz-keyframes openUpRight { 0% { -webkit-transform-origin: top right; -moz-transform-origin: top right; -ms-transform-origin: top right; -o-transform-origin: top right; transform-origin: top right; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { -webkit-transform-origin: top right; -moz-transform-origin: top right; -ms-transform-origin: top right; -o-transform-origin: top right; transform-origin: top right; -webkit-transform: rotate(-110deg); -moz-transform: rotate(-110deg); -ms-transform: rotate(-110deg); -o-transform: rotate(-110deg); transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } } @-webkit-keyframes openUpRight { 0% { -webkit-transform-origin: top right; -moz-transform-origin: top right; -ms-transform-origin: top right; -o-transform-origin: top right; transform-origin: top right; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { -webkit-transform-origin: top right; -moz-transform-origin: top right; -ms-transform-origin: top right; -o-transform-origin: top right; transform-origin: top right; -webkit-transform: rotate(-110deg); -moz-transform: rotate(-110deg); -ms-transform: rotate(-110deg); -o-transform: rotate(-110deg); transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } } @-o-keyframes openUpRight { 0% { -webkit-transform-origin: top right; -moz-transform-origin: top right; -ms-transform-origin: top right; -o-transform-origin: top right; transform-origin: top right; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { -webkit-transform-origin: top right; -moz-transform-origin: top right; -ms-transform-origin: top right; -o-transform-origin: top right; transform-origin: top right; -webkit-transform: rotate(-110deg); -moz-transform: rotate(-110deg); -ms-transform: rotate(-110deg); -o-transform: rotate(-110deg); transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } } @-ms-keyframes openUpRight { 0% { -webkit-transform-origin: top right; -moz-transform-origin: top right; -ms-transform-origin: top right; -o-transform-origin: top right; transform-origin: top right; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { -webkit-transform-origin: top right; -moz-transform-origin: top right; -ms-transform-origin: top right; -o-transform-origin: top right; transform-origin: top right; -webkit-transform: rotate(-110deg); -moz-transform: rotate(-110deg); -ms-transform: rotate(-110deg); -o-transform: rotate(-110deg); transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } } @keyframes openUpRight { 0% { -webkit-transform-origin: top right; -moz-transform-origin: top right; -ms-transform-origin: top right; -o-transform-origin: top right; transform-origin: top right; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { -webkit-transform-origin: top right; -moz-transform-origin: top right; -ms-transform-origin: top right; -o-transform-origin: top right; transform-origin: top right; -webkit-transform: rotate(-110deg); -moz-transform: rotate(-110deg); -ms-transform: rotate(-110deg); -o-transform: rotate(-110deg); transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } } @-moz-keyframes openDownLeftRetourn { 0% { -webkit-transform-origin: bottom left; -moz-transform-origin: bottom left; -ms-transform-origin: bottom left; -o-transform-origin: bottom left; transform-origin: bottom left; -webkit-transform: rotate(-110deg); -moz-transform: rotate(-110deg); -ms-transform: rotate(-110deg); -o-transform: rotate(-110deg); transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { -webkit-transform-origin: bottom left; -moz-transform-origin: bottom left; -ms-transform-origin: bottom left; -o-transform-origin: bottom left; transform-origin: bottom left; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-webkit-keyframes openDownLeftRetourn { 0% { -webkit-transform-origin: bottom left; -moz-transform-origin: bottom left; -ms-transform-origin: bottom left; -o-transform-origin: bottom left; transform-origin: bottom left; -webkit-transform: rotate(-110deg); -moz-transform: rotate(-110deg); -ms-transform: rotate(-110deg); -o-transform: rotate(-110deg); transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { -webkit-transform-origin: bottom left; -moz-transform-origin: bottom left; -ms-transform-origin: bottom left; -o-transform-origin: bottom left; transform-origin: bottom left; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-o-keyframes openDownLeftRetourn { 0% { -webkit-transform-origin: bottom left; -moz-transform-origin: bottom left; -ms-transform-origin: bottom left; -o-transform-origin: bottom left; transform-origin: bottom left; -webkit-transform: rotate(-110deg); -moz-transform: rotate(-110deg); -ms-transform: rotate(-110deg); -o-transform: rotate(-110deg); transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { -webkit-transform-origin: bottom left; -moz-transform-origin: bottom left; -ms-transform-origin: bottom left; -o-transform-origin: bottom left; transform-origin: bottom left; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-ms-keyframes openDownLeftRetourn { 0% { -webkit-transform-origin: bottom left; -moz-transform-origin: bottom left; -ms-transform-origin: bottom left; -o-transform-origin: bottom left; transform-origin: bottom left; -webkit-transform: rotate(-110deg); -moz-transform: rotate(-110deg); -ms-transform: rotate(-110deg); -o-transform: rotate(-110deg); transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { -webkit-transform-origin: bottom left; -moz-transform-origin: bottom left; -ms-transform-origin: bottom left; -o-transform-origin: bottom left; transform-origin: bottom left; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes openDownLeftRetourn { 0% { -webkit-transform-origin: bottom left; -moz-transform-origin: bottom left; -ms-transform-origin: bottom left; -o-transform-origin: bottom left; transform-origin: bottom left; -webkit-transform: rotate(-110deg); -moz-transform: rotate(-110deg); -ms-transform: rotate(-110deg); -o-transform: rotate(-110deg); transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { -webkit-transform-origin: bottom left; -moz-transform-origin: bottom left; -ms-transform-origin: bottom left; -o-transform-origin: bottom left; transform-origin: bottom left; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-moz-keyframes openDownRightRetourn { 0% { -webkit-transform-origin: bottom right; -moz-transform-origin: bottom right; -ms-transform-origin: bottom right; -o-transform-origin: bottom right; transform-origin: bottom right; -webkit-transform: rotate(110deg); -moz-transform: rotate(110deg); -ms-transform: rotate(110deg); -o-transform: rotate(110deg); transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { -webkit-transform-origin: bottom right; -moz-transform-origin: bottom right; -ms-transform-origin: bottom right; -o-transform-origin: bottom right; transform-origin: bottom right; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-webkit-keyframes openDownRightRetourn { 0% { -webkit-transform-origin: bottom right; -moz-transform-origin: bottom right; -ms-transform-origin: bottom right; -o-transform-origin: bottom right; transform-origin: bottom right; -webkit-transform: rotate(110deg); -moz-transform: rotate(110deg); -ms-transform: rotate(110deg); -o-transform: rotate(110deg); transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { -webkit-transform-origin: bottom right; -moz-transform-origin: bottom right; -ms-transform-origin: bottom right; -o-transform-origin: bottom right; transform-origin: bottom right; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-o-keyframes openDownRightRetourn { 0% { -webkit-transform-origin: bottom right; -moz-transform-origin: bottom right; -ms-transform-origin: bottom right; -o-transform-origin: bottom right; transform-origin: bottom right; -webkit-transform: rotate(110deg); -moz-transform: rotate(110deg); -ms-transform: rotate(110deg); -o-transform: rotate(110deg); transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { -webkit-transform-origin: bottom right; -moz-transform-origin: bottom right; -ms-transform-origin: bottom right; -o-transform-origin: bottom right; transform-origin: bottom right; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-ms-keyframes openDownRightRetourn { 0% { -webkit-transform-origin: bottom right; -moz-transform-origin: bottom right; -ms-transform-origin: bottom right; -o-transform-origin: bottom right; transform-origin: bottom right; -webkit-transform: rotate(110deg); -moz-transform: rotate(110deg); -ms-transform: rotate(110deg); -o-transform: rotate(110deg); transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { -webkit-transform-origin: bottom right; -moz-transform-origin: bottom right; -ms-transform-origin: bottom right; -o-transform-origin: bottom right; transform-origin: bottom right; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes openDownRightRetourn { 0% { -webkit-transform-origin: bottom right; -moz-transform-origin: bottom right; -ms-transform-origin: bottom right; -o-transform-origin: bottom right; transform-origin: bottom right; -webkit-transform: rotate(110deg); -moz-transform: rotate(110deg); -ms-transform: rotate(110deg); -o-transform: rotate(110deg); transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { -webkit-transform-origin: bottom right; -moz-transform-origin: bottom right; -ms-transform-origin: bottom right; -o-transform-origin: bottom right; transform-origin: bottom right; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-moz-keyframes openUpLeftRetourn { 0% { -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; -webkit-transform: rotate(110deg); -moz-transform: rotate(110deg); -ms-transform: rotate(110deg); -o-transform: rotate(110deg); transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-webkit-keyframes openUpLeftRetourn { 0% { -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; -webkit-transform: rotate(110deg); -moz-transform: rotate(110deg); -ms-transform: rotate(110deg); -o-transform: rotate(110deg); transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-o-keyframes openUpLeftRetourn { 0% { -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; -webkit-transform: rotate(110deg); -moz-transform: rotate(110deg); -ms-transform: rotate(110deg); -o-transform: rotate(110deg); transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-ms-keyframes openUpLeftRetourn { 0% { -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; -webkit-transform: rotate(110deg); -moz-transform: rotate(110deg); -ms-transform: rotate(110deg); -o-transform: rotate(110deg); transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes openUpLeftRetourn { 0% { -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; -webkit-transform: rotate(110deg); -moz-transform: rotate(110deg); -ms-transform: rotate(110deg); -o-transform: rotate(110deg); transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-moz-keyframes openUpRightRetourn { 0% { -webkit-transform-origin: top right; -moz-transform-origin: top right; -ms-transform-origin: top right; -o-transform-origin: top right; transform-origin: top right; -webkit-transform: rotate(-110deg); -moz-transform: rotate(-110deg); -ms-transform: rotate(-110deg); -o-transform: rotate(-110deg); transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { -webkit-transform-origin: top right; -moz-transform-origin: top right; -ms-transform-origin: top right; -o-transform-origin: top right; transform-origin: top right; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-webkit-keyframes openUpRightRetourn { 0% { -webkit-transform-origin: top right; -moz-transform-origin: top right; -ms-transform-origin: top right; -o-transform-origin: top right; transform-origin: top right; -webkit-transform: rotate(-110deg); -moz-transform: rotate(-110deg); -ms-transform: rotate(-110deg); -o-transform: rotate(-110deg); transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { -webkit-transform-origin: top right; -moz-transform-origin: top right; -ms-transform-origin: top right; -o-transform-origin: top right; transform-origin: top right; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-o-keyframes openUpRightRetourn { 0% { -webkit-transform-origin: top right; -moz-transform-origin: top right; -ms-transform-origin: top right; -o-transform-origin: top right; transform-origin: top right; -webkit-transform: rotate(-110deg); -moz-transform: rotate(-110deg); -ms-transform: rotate(-110deg); -o-transform: rotate(-110deg); transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { -webkit-transform-origin: top right; -moz-transform-origin: top right; -ms-transform-origin: top right; -o-transform-origin: top right; transform-origin: top right; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-ms-keyframes openUpRightRetourn { 0% { -webkit-transform-origin: top right; -moz-transform-origin: top right; -ms-transform-origin: top right; -o-transform-origin: top right; transform-origin: top right; -webkit-transform: rotate(-110deg); -moz-transform: rotate(-110deg); -ms-transform: rotate(-110deg); -o-transform: rotate(-110deg); transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { -webkit-transform-origin: top right; -moz-transform-origin: top right; -ms-transform-origin: top right; -o-transform-origin: top right; transform-origin: top right; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes openUpRightRetourn { 0% { -webkit-transform-origin: top right; -moz-transform-origin: top right; -ms-transform-origin: top right; -o-transform-origin: top right; transform-origin: top right; -webkit-transform: rotate(-110deg); -moz-transform: rotate(-110deg); -ms-transform: rotate(-110deg); -o-transform: rotate(-110deg); transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { -webkit-transform-origin: top right; -moz-transform-origin: top right; -ms-transform-origin: top right; -o-transform-origin: top right; transform-origin: top right; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-moz-keyframes openDownLeftOut { 0% { opacity: 1; -webkit-transform-origin: bottom left; -moz-transform-origin: bottom left; -ms-transform-origin: bottom left; -o-transform-origin: bottom left; transform-origin: bottom left; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { opacity: 0; -webkit-transform-origin: bottom left; -moz-transform-origin: bottom left; -ms-transform-origin: bottom left; -o-transform-origin: bottom left; transform-origin: bottom left; -webkit-transform: rotate(-110deg); -moz-transform: rotate(-110deg); -ms-transform: rotate(-110deg); -o-transform: rotate(-110deg); transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-o; -moz-animation-timing-function: ease-in-o; -ms-animation-timing-function: ease-in-o; -o-animation-timing-function: ease-in-o; animation-timing-function: ease-in-o; } } @-webkit-keyframes openDownLeftOut { 0% { opacity: 1; -webkit-transform-origin: bottom left; -moz-transform-origin: bottom left; -ms-transform-origin: bottom left; -o-transform-origin: bottom left; transform-origin: bottom left; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { opacity: 0; -webkit-transform-origin: bottom left; -moz-transform-origin: bottom left; -ms-transform-origin: bottom left; -o-transform-origin: bottom left; transform-origin: bottom left; -webkit-transform: rotate(-110deg); -moz-transform: rotate(-110deg); -ms-transform: rotate(-110deg); -o-transform: rotate(-110deg); transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-o; -moz-animation-timing-function: ease-in-o; -ms-animation-timing-function: ease-in-o; -o-animation-timing-function: ease-in-o; animation-timing-function: ease-in-o; } } @-o-keyframes openDownLeftOut { 0% { opacity: 1; -webkit-transform-origin: bottom left; -moz-transform-origin: bottom left; -ms-transform-origin: bottom left; -o-transform-origin: bottom left; transform-origin: bottom left; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { opacity: 0; -webkit-transform-origin: bottom left; -moz-transform-origin: bottom left; -ms-transform-origin: bottom left; -o-transform-origin: bottom left; transform-origin: bottom left; -webkit-transform: rotate(-110deg); -moz-transform: rotate(-110deg); -ms-transform: rotate(-110deg); -o-transform: rotate(-110deg); transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-o; -moz-animation-timing-function: ease-in-o; -ms-animation-timing-function: ease-in-o; -o-animation-timing-function: ease-in-o; animation-timing-function: ease-in-o; } } @-ms-keyframes openDownLeftOut { 0% { opacity: 1; -webkit-transform-origin: bottom left; -moz-transform-origin: bottom left; -ms-transform-origin: bottom left; -o-transform-origin: bottom left; transform-origin: bottom left; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { opacity: 0; -webkit-transform-origin: bottom left; -moz-transform-origin: bottom left; -ms-transform-origin: bottom left; -o-transform-origin: bottom left; transform-origin: bottom left; -webkit-transform: rotate(-110deg); -moz-transform: rotate(-110deg); -ms-transform: rotate(-110deg); -o-transform: rotate(-110deg); transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-o; -moz-animation-timing-function: ease-in-o; -ms-animation-timing-function: ease-in-o; -o-animation-timing-function: ease-in-o; animation-timing-function: ease-in-o; } } @keyframes openDownLeftOut { 0% { opacity: 1; -webkit-transform-origin: bottom left; -moz-transform-origin: bottom left; -ms-transform-origin: bottom left; -o-transform-origin: bottom left; transform-origin: bottom left; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { opacity: 0; -webkit-transform-origin: bottom left; -moz-transform-origin: bottom left; -ms-transform-origin: bottom left; -o-transform-origin: bottom left; transform-origin: bottom left; -webkit-transform: rotate(-110deg); -moz-transform: rotate(-110deg); -ms-transform: rotate(-110deg); -o-transform: rotate(-110deg); transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-o; -moz-animation-timing-function: ease-in-o; -ms-animation-timing-function: ease-in-o; -o-animation-timing-function: ease-in-o; animation-timing-function: ease-in-o; } } @-moz-keyframes openDownRightOut { 0% { opacity: 1; -webkit-transform-origin: bottom right; -moz-transform-origin: bottom right; -ms-transform-origin: bottom right; -o-transform-origin: bottom right; transform-origin: bottom right; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { opacity: 0; -webkit-transform-origin: bottom right; -moz-transform-origin: bottom right; -ms-transform-origin: bottom right; -o-transform-origin: bottom right; transform-origin: bottom right; -webkit-transform: rotate(110deg); -moz-transform: rotate(110deg); -ms-transform: rotate(110deg); -o-transform: rotate(110deg); transform: rotate(110deg); -webkit-animation-timing-function: ease-in-o; -moz-animation-timing-function: ease-in-o; -ms-animation-timing-function: ease-in-o; -o-animation-timing-function: ease-in-o; animation-timing-function: ease-in-o; } } @-webkit-keyframes openDownRightOut { 0% { opacity: 1; -webkit-transform-origin: bottom right; -moz-transform-origin: bottom right; -ms-transform-origin: bottom right; -o-transform-origin: bottom right; transform-origin: bottom right; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { opacity: 0; -webkit-transform-origin: bottom right; -moz-transform-origin: bottom right; -ms-transform-origin: bottom right; -o-transform-origin: bottom right; transform-origin: bottom right; -webkit-transform: rotate(110deg); -moz-transform: rotate(110deg); -ms-transform: rotate(110deg); -o-transform: rotate(110deg); transform: rotate(110deg); -webkit-animation-timing-function: ease-in-o; -moz-animation-timing-function: ease-in-o; -ms-animation-timing-function: ease-in-o; -o-animation-timing-function: ease-in-o; animation-timing-function: ease-in-o; } } @-o-keyframes openDownRightOut { 0% { opacity: 1; -webkit-transform-origin: bottom right; -moz-transform-origin: bottom right; -ms-transform-origin: bottom right; -o-transform-origin: bottom right; transform-origin: bottom right; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { opacity: 0; -webkit-transform-origin: bottom right; -moz-transform-origin: bottom right; -ms-transform-origin: bottom right; -o-transform-origin: bottom right; transform-origin: bottom right; -webkit-transform: rotate(110deg); -moz-transform: rotate(110deg); -ms-transform: rotate(110deg); -o-transform: rotate(110deg); transform: rotate(110deg); -webkit-animation-timing-function: ease-in-o; -moz-animation-timing-function: ease-in-o; -ms-animation-timing-function: ease-in-o; -o-animation-timing-function: ease-in-o; animation-timing-function: ease-in-o; } } @-ms-keyframes openDownRightOut { 0% { opacity: 1; -webkit-transform-origin: bottom right; -moz-transform-origin: bottom right; -ms-transform-origin: bottom right; -o-transform-origin: bottom right; transform-origin: bottom right; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { opacity: 0; -webkit-transform-origin: bottom right; -moz-transform-origin: bottom right; -ms-transform-origin: bottom right; -o-transform-origin: bottom right; transform-origin: bottom right; -webkit-transform: rotate(110deg); -moz-transform: rotate(110deg); -ms-transform: rotate(110deg); -o-transform: rotate(110deg); transform: rotate(110deg); -webkit-animation-timing-function: ease-in-o; -moz-animation-timing-function: ease-in-o; -ms-animation-timing-function: ease-in-o; -o-animation-timing-function: ease-in-o; animation-timing-function: ease-in-o; } } @keyframes openDownRightOut { 0% { opacity: 1; -webkit-transform-origin: bottom right; -moz-transform-origin: bottom right; -ms-transform-origin: bottom right; -o-transform-origin: bottom right; transform-origin: bottom right; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { opacity: 0; -webkit-transform-origin: bottom right; -moz-transform-origin: bottom right; -ms-transform-origin: bottom right; -o-transform-origin: bottom right; transform-origin: bottom right; -webkit-transform: rotate(110deg); -moz-transform: rotate(110deg); -ms-transform: rotate(110deg); -o-transform: rotate(110deg); transform: rotate(110deg); -webkit-animation-timing-function: ease-in-o; -moz-animation-timing-function: ease-in-o; -ms-animation-timing-function: ease-in-o; -o-animation-timing-function: ease-in-o; animation-timing-function: ease-in-o; } } @-moz-keyframes openUpLeftOut { 0% { opacity: 1; -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { opacity: 0; -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; -webkit-transform: rotate(110deg); -moz-transform: rotate(110deg); -ms-transform: rotate(110deg); -o-transform: rotate(110deg); transform: rotate(110deg); -webkit-animation-timing-function: ease-in-o; -moz-animation-timing-function: ease-in-o; -ms-animation-timing-function: ease-in-o; -o-animation-timing-function: ease-in-o; animation-timing-function: ease-in-o; } } @-webkit-keyframes openUpLeftOut { 0% { opacity: 1; -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { opacity: 0; -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; -webkit-transform: rotate(110deg); -moz-transform: rotate(110deg); -ms-transform: rotate(110deg); -o-transform: rotate(110deg); transform: rotate(110deg); -webkit-animation-timing-function: ease-in-o; -moz-animation-timing-function: ease-in-o; -ms-animation-timing-function: ease-in-o; -o-animation-timing-function: ease-in-o; animation-timing-function: ease-in-o; } } @-o-keyframes openUpLeftOut { 0% { opacity: 1; -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { opacity: 0; -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; -webkit-transform: rotate(110deg); -moz-transform: rotate(110deg); -ms-transform: rotate(110deg); -o-transform: rotate(110deg); transform: rotate(110deg); -webkit-animation-timing-function: ease-in-o; -moz-animation-timing-function: ease-in-o; -ms-animation-timing-function: ease-in-o; -o-animation-timing-function: ease-in-o; animation-timing-function: ease-in-o; } } @-ms-keyframes openUpLeftOut { 0% { opacity: 1; -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { opacity: 0; -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; -webkit-transform: rotate(110deg); -moz-transform: rotate(110deg); -ms-transform: rotate(110deg); -o-transform: rotate(110deg); transform: rotate(110deg); -webkit-animation-timing-function: ease-in-o; -moz-animation-timing-function: ease-in-o; -ms-animation-timing-function: ease-in-o; -o-animation-timing-function: ease-in-o; animation-timing-function: ease-in-o; } } @keyframes openUpLeftOut { 0% { opacity: 1; -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { opacity: 0; -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; -webkit-transform: rotate(110deg); -moz-transform: rotate(110deg); -ms-transform: rotate(110deg); -o-transform: rotate(110deg); transform: rotate(110deg); -webkit-animation-timing-function: ease-in-o; -moz-animation-timing-function: ease-in-o; -ms-animation-timing-function: ease-in-o; -o-animation-timing-function: ease-in-o; animation-timing-function: ease-in-o; } } @-moz-keyframes openUpRightOut { 0% { opacity: 1; -webkit-transform-origin: top right; -moz-transform-origin: top right; -ms-transform-origin: top right; -o-transform-origin: top right; transform-origin: top right; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { opacity: 0; -webkit-transform-origin: top right; -moz-transform-origin: top right; -ms-transform-origin: top right; -o-transform-origin: top right; transform-origin: top right; -webkit-transform: rotate(-110deg); -moz-transform: rotate(-110deg); -ms-transform: rotate(-110deg); -o-transform: rotate(-110deg); transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-o; -moz-animation-timing-function: ease-in-o; -ms-animation-timing-function: ease-in-o; -o-animation-timing-function: ease-in-o; animation-timing-function: ease-in-o; } } @-webkit-keyframes openUpRightOut { 0% { opacity: 1; -webkit-transform-origin: top right; -moz-transform-origin: top right; -ms-transform-origin: top right; -o-transform-origin: top right; transform-origin: top right; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { opacity: 0; -webkit-transform-origin: top right; -moz-transform-origin: top right; -ms-transform-origin: top right; -o-transform-origin: top right; transform-origin: top right; -webkit-transform: rotate(-110deg); -moz-transform: rotate(-110deg); -ms-transform: rotate(-110deg); -o-transform: rotate(-110deg); transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-o; -moz-animation-timing-function: ease-in-o; -ms-animation-timing-function: ease-in-o; -o-animation-timing-function: ease-in-o; animation-timing-function: ease-in-o; } } @-o-keyframes openUpRightOut { 0% { opacity: 1; -webkit-transform-origin: top right; -moz-transform-origin: top right; -ms-transform-origin: top right; -o-transform-origin: top right; transform-origin: top right; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { opacity: 0; -webkit-transform-origin: top right; -moz-transform-origin: top right; -ms-transform-origin: top right; -o-transform-origin: top right; transform-origin: top right; -webkit-transform: rotate(-110deg); -moz-transform: rotate(-110deg); -ms-transform: rotate(-110deg); -o-transform: rotate(-110deg); transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-o; -moz-animation-timing-function: ease-in-o; -ms-animation-timing-function: ease-in-o; -o-animation-timing-function: ease-in-o; animation-timing-function: ease-in-o; } } @-ms-keyframes openUpRightOut { 0% { opacity: 1; -webkit-transform-origin: top right; -moz-transform-origin: top right; -ms-transform-origin: top right; -o-transform-origin: top right; transform-origin: top right; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { opacity: 0; -webkit-transform-origin: top right; -moz-transform-origin: top right; -ms-transform-origin: top right; -o-transform-origin: top right; transform-origin: top right; -webkit-transform: rotate(-110deg); -moz-transform: rotate(-110deg); -ms-transform: rotate(-110deg); -o-transform: rotate(-110deg); transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-o; -moz-animation-timing-function: ease-in-o; -ms-animation-timing-function: ease-in-o; -o-animation-timing-function: ease-in-o; animation-timing-function: ease-in-o; } } @keyframes openUpRightOut { 0% { opacity: 1; -webkit-transform-origin: top right; -moz-transform-origin: top right; -ms-transform-origin: top right; -o-transform-origin: top right; transform-origin: top right; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { opacity: 0; -webkit-transform-origin: top right; -moz-transform-origin: top right; -ms-transform-origin: top right; -o-transform-origin: top right; transform-origin: top right; -webkit-transform: rotate(-110deg); -moz-transform: rotate(-110deg); -ms-transform: rotate(-110deg); -o-transform: rotate(-110deg); transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-o; -moz-animation-timing-function: ease-in-o; -ms-animation-timing-function: ease-in-o; -o-animation-timing-function: ease-in-o; animation-timing-function: ease-in-o; } } @-moz-keyframes perspectiveDown { 0% { -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: perspective(800px) rotateX(0deg); -moz-transform: perspective(800px) rotateX(0deg); -ms-transform: perspective(800px) rotateX(0deg); -o-transform: perspective(800px) rotateX(0deg); transform: perspective(800px) rotateX(0deg); } 100% { -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: perspective(800px) rotateX(-180deg); -moz-transform: perspective(800px) rotateX(-180deg); -ms-transform: perspective(800px) rotateX(-180deg); -o-transform: perspective(800px) rotateX(-180deg); transform: perspective(800px) rotateX(-180deg); } } @-webkit-keyframes perspectiveDown { 0% { -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: perspective(800px) rotateX(0deg); -moz-transform: perspective(800px) rotateX(0deg); -ms-transform: perspective(800px) rotateX(0deg); -o-transform: perspective(800px) rotateX(0deg); transform: perspective(800px) rotateX(0deg); } 100% { -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: perspective(800px) rotateX(-180deg); -moz-transform: perspective(800px) rotateX(-180deg); -ms-transform: perspective(800px) rotateX(-180deg); -o-transform: perspective(800px) rotateX(-180deg); transform: perspective(800px) rotateX(-180deg); } } @-o-keyframes perspectiveDown { 0% { -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: perspective(800px) rotateX(0deg); -moz-transform: perspective(800px) rotateX(0deg); -ms-transform: perspective(800px) rotateX(0deg); -o-transform: perspective(800px) rotateX(0deg); transform: perspective(800px) rotateX(0deg); } 100% { -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: perspective(800px) rotateX(-180deg); -moz-transform: perspective(800px) rotateX(-180deg); -ms-transform: perspective(800px) rotateX(-180deg); -o-transform: perspective(800px) rotateX(-180deg); transform: perspective(800px) rotateX(-180deg); } } @-ms-keyframes perspectiveDown { 0% { -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: perspective(800px) rotateX(0deg); -moz-transform: perspective(800px) rotateX(0deg); -ms-transform: perspective(800px) rotateX(0deg); -o-transform: perspective(800px) rotateX(0deg); transform: perspective(800px) rotateX(0deg); } 100% { -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: perspective(800px) rotateX(-180deg); -moz-transform: perspective(800px) rotateX(-180deg); -ms-transform: perspective(800px) rotateX(-180deg); -o-transform: perspective(800px) rotateX(-180deg); transform: perspective(800px) rotateX(-180deg); } } @keyframes perspectiveDown { 0% { -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: perspective(800px) rotateX(0deg); -moz-transform: perspective(800px) rotateX(0deg); -ms-transform: perspective(800px) rotateX(0deg); -o-transform: perspective(800px) rotateX(0deg); transform: perspective(800px) rotateX(0deg); } 100% { -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: perspective(800px) rotateX(-180deg); -moz-transform: perspective(800px) rotateX(-180deg); -ms-transform: perspective(800px) rotateX(-180deg); -o-transform: perspective(800px) rotateX(-180deg); transform: perspective(800px) rotateX(-180deg); } } @-moz-keyframes perspectiveLeft { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(0deg); -moz-transform: perspective(800px) rotateY(0deg); -ms-transform: perspective(800px) rotateY(0deg); -o-transform: perspective(800px) rotateY(0deg); transform: perspective(800px) rotateY(0deg); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(-180deg); -moz-transform: perspective(800px) rotateY(-180deg); -ms-transform: perspective(800px) rotateY(-180deg); -o-transform: perspective(800px) rotateY(-180deg); transform: perspective(800px) rotateY(-180deg); } } @-webkit-keyframes perspectiveLeft { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(0deg); -moz-transform: perspective(800px) rotateY(0deg); -ms-transform: perspective(800px) rotateY(0deg); -o-transform: perspective(800px) rotateY(0deg); transform: perspective(800px) rotateY(0deg); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(-180deg); -moz-transform: perspective(800px) rotateY(-180deg); -ms-transform: perspective(800px) rotateY(-180deg); -o-transform: perspective(800px) rotateY(-180deg); transform: perspective(800px) rotateY(-180deg); } } @-o-keyframes perspectiveLeft { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(0deg); -moz-transform: perspective(800px) rotateY(0deg); -ms-transform: perspective(800px) rotateY(0deg); -o-transform: perspective(800px) rotateY(0deg); transform: perspective(800px) rotateY(0deg); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(-180deg); -moz-transform: perspective(800px) rotateY(-180deg); -ms-transform: perspective(800px) rotateY(-180deg); -o-transform: perspective(800px) rotateY(-180deg); transform: perspective(800px) rotateY(-180deg); } } @-ms-keyframes perspectiveLeft { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(0deg); -moz-transform: perspective(800px) rotateY(0deg); -ms-transform: perspective(800px) rotateY(0deg); -o-transform: perspective(800px) rotateY(0deg); transform: perspective(800px) rotateY(0deg); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(-180deg); -moz-transform: perspective(800px) rotateY(-180deg); -ms-transform: perspective(800px) rotateY(-180deg); -o-transform: perspective(800px) rotateY(-180deg); transform: perspective(800px) rotateY(-180deg); } } @keyframes perspectiveLeft { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(0deg); -moz-transform: perspective(800px) rotateY(0deg); -ms-transform: perspective(800px) rotateY(0deg); -o-transform: perspective(800px) rotateY(0deg); transform: perspective(800px) rotateY(0deg); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(-180deg); -moz-transform: perspective(800px) rotateY(-180deg); -ms-transform: perspective(800px) rotateY(-180deg); -o-transform: perspective(800px) rotateY(-180deg); transform: perspective(800px) rotateY(-180deg); } } @-moz-keyframes perspectiveRight { 0% { -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -ms-transform-origin: 100% 0; -o-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: perspective(800px) rotateY(0deg); -moz-transform: perspective(800px) rotateY(0deg); -ms-transform: perspective(800px) rotateY(0deg); -o-transform: perspective(800px) rotateY(0deg); transform: perspective(800px) rotateY(0deg); } 100% { -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -ms-transform-origin: 100% 0; -o-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: perspective(800px) rotateY(180deg); -moz-transform: perspective(800px) rotateY(180deg); -ms-transform: perspective(800px) rotateY(180deg); -o-transform: perspective(800px) rotateY(180deg); transform: perspective(800px) rotateY(180deg); } } @-webkit-keyframes perspectiveRight { 0% { -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -ms-transform-origin: 100% 0; -o-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: perspective(800px) rotateY(0deg); -moz-transform: perspective(800px) rotateY(0deg); -ms-transform: perspective(800px) rotateY(0deg); -o-transform: perspective(800px) rotateY(0deg); transform: perspective(800px) rotateY(0deg); } 100% { -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -ms-transform-origin: 100% 0; -o-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: perspective(800px) rotateY(180deg); -moz-transform: perspective(800px) rotateY(180deg); -ms-transform: perspective(800px) rotateY(180deg); -o-transform: perspective(800px) rotateY(180deg); transform: perspective(800px) rotateY(180deg); } } @-o-keyframes perspectiveRight { 0% { -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -ms-transform-origin: 100% 0; -o-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: perspective(800px) rotateY(0deg); -moz-transform: perspective(800px) rotateY(0deg); -ms-transform: perspective(800px) rotateY(0deg); -o-transform: perspective(800px) rotateY(0deg); transform: perspective(800px) rotateY(0deg); } 100% { -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -ms-transform-origin: 100% 0; -o-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: perspective(800px) rotateY(180deg); -moz-transform: perspective(800px) rotateY(180deg); -ms-transform: perspective(800px) rotateY(180deg); -o-transform: perspective(800px) rotateY(180deg); transform: perspective(800px) rotateY(180deg); } } @-ms-keyframes perspectiveRight { 0% { -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -ms-transform-origin: 100% 0; -o-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: perspective(800px) rotateY(0deg); -moz-transform: perspective(800px) rotateY(0deg); -ms-transform: perspective(800px) rotateY(0deg); -o-transform: perspective(800px) rotateY(0deg); transform: perspective(800px) rotateY(0deg); } 100% { -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -ms-transform-origin: 100% 0; -o-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: perspective(800px) rotateY(180deg); -moz-transform: perspective(800px) rotateY(180deg); -ms-transform: perspective(800px) rotateY(180deg); -o-transform: perspective(800px) rotateY(180deg); transform: perspective(800px) rotateY(180deg); } } @keyframes perspectiveRight { 0% { -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -ms-transform-origin: 100% 0; -o-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: perspective(800px) rotateY(0deg); -moz-transform: perspective(800px) rotateY(0deg); -ms-transform: perspective(800px) rotateY(0deg); -o-transform: perspective(800px) rotateY(0deg); transform: perspective(800px) rotateY(0deg); } 100% { -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -ms-transform-origin: 100% 0; -o-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: perspective(800px) rotateY(180deg); -moz-transform: perspective(800px) rotateY(180deg); -ms-transform: perspective(800px) rotateY(180deg); -o-transform: perspective(800px) rotateY(180deg); transform: perspective(800px) rotateY(180deg); } } @-moz-keyframes perspectiveUp { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateX(0deg); -moz-transform: perspective(800px) rotateX(0deg); -ms-transform: perspective(800px) rotateX(0deg); -o-transform: perspective(800px) rotateX(0deg); transform: perspective(800px) rotateX(0deg); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateX(180deg); -moz-transform: perspective(800px) rotateX(180deg); -ms-transform: perspective(800px) rotateX(180deg); -o-transform: perspective(800px) rotateX(180deg); transform: perspective(800px) rotateX(180deg); } } @-webkit-keyframes perspectiveUp { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateX(0deg); -moz-transform: perspective(800px) rotateX(0deg); -ms-transform: perspective(800px) rotateX(0deg); -o-transform: perspective(800px) rotateX(0deg); transform: perspective(800px) rotateX(0deg); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateX(180deg); -moz-transform: perspective(800px) rotateX(180deg); -ms-transform: perspective(800px) rotateX(180deg); -o-transform: perspective(800px) rotateX(180deg); transform: perspective(800px) rotateX(180deg); } } @-o-keyframes perspectiveUp { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateX(0deg); -moz-transform: perspective(800px) rotateX(0deg); -ms-transform: perspective(800px) rotateX(0deg); -o-transform: perspective(800px) rotateX(0deg); transform: perspective(800px) rotateX(0deg); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateX(180deg); -moz-transform: perspective(800px) rotateX(180deg); -ms-transform: perspective(800px) rotateX(180deg); -o-transform: perspective(800px) rotateX(180deg); transform: perspective(800px) rotateX(180deg); } } @-ms-keyframes perspectiveUp { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateX(0deg); -moz-transform: perspective(800px) rotateX(0deg); -ms-transform: perspective(800px) rotateX(0deg); -o-transform: perspective(800px) rotateX(0deg); transform: perspective(800px) rotateX(0deg); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateX(180deg); -moz-transform: perspective(800px) rotateX(180deg); -ms-transform: perspective(800px) rotateX(180deg); -o-transform: perspective(800px) rotateX(180deg); transform: perspective(800px) rotateX(180deg); } } @keyframes perspectiveUp { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateX(0deg); -moz-transform: perspective(800px) rotateX(0deg); -ms-transform: perspective(800px) rotateX(0deg); -o-transform: perspective(800px) rotateX(0deg); transform: perspective(800px) rotateX(0deg); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateX(180deg); -moz-transform: perspective(800px) rotateX(180deg); -ms-transform: perspective(800px) rotateX(180deg); -o-transform: perspective(800px) rotateX(180deg); transform: perspective(800px) rotateX(180deg); } } @-moz-keyframes perspectiveDownRetourn { 0% { -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: perspective(800px) rotateX(-180deg); -moz-transform: perspective(800px) rotateX(-180deg); -ms-transform: perspective(800px) rotateX(-180deg); -o-transform: perspective(800px) rotateX(-180deg); transform: perspective(800px) rotateX(-180deg); } 100% { -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: perspective(800px) rotateX(0deg); -moz-transform: perspective(800px) rotateX(0deg); -ms-transform: perspective(800px) rotateX(0deg); -o-transform: perspective(800px) rotateX(0deg); transform: perspective(800px) rotateX(0deg); } } @-webkit-keyframes perspectiveDownRetourn { 0% { -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: perspective(800px) rotateX(-180deg); -moz-transform: perspective(800px) rotateX(-180deg); -ms-transform: perspective(800px) rotateX(-180deg); -o-transform: perspective(800px) rotateX(-180deg); transform: perspective(800px) rotateX(-180deg); } 100% { -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: perspective(800px) rotateX(0deg); -moz-transform: perspective(800px) rotateX(0deg); -ms-transform: perspective(800px) rotateX(0deg); -o-transform: perspective(800px) rotateX(0deg); transform: perspective(800px) rotateX(0deg); } } @-o-keyframes perspectiveDownRetourn { 0% { -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: perspective(800px) rotateX(-180deg); -moz-transform: perspective(800px) rotateX(-180deg); -ms-transform: perspective(800px) rotateX(-180deg); -o-transform: perspective(800px) rotateX(-180deg); transform: perspective(800px) rotateX(-180deg); } 100% { -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: perspective(800px) rotateX(0deg); -moz-transform: perspective(800px) rotateX(0deg); -ms-transform: perspective(800px) rotateX(0deg); -o-transform: perspective(800px) rotateX(0deg); transform: perspective(800px) rotateX(0deg); } } @-ms-keyframes perspectiveDownRetourn { 0% { -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: perspective(800px) rotateX(-180deg); -moz-transform: perspective(800px) rotateX(-180deg); -ms-transform: perspective(800px) rotateX(-180deg); -o-transform: perspective(800px) rotateX(-180deg); transform: perspective(800px) rotateX(-180deg); } 100% { -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: perspective(800px) rotateX(0deg); -moz-transform: perspective(800px) rotateX(0deg); -ms-transform: perspective(800px) rotateX(0deg); -o-transform: perspective(800px) rotateX(0deg); transform: perspective(800px) rotateX(0deg); } } @keyframes perspectiveDownRetourn { 0% { -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: perspective(800px) rotateX(-180deg); -moz-transform: perspective(800px) rotateX(-180deg); -ms-transform: perspective(800px) rotateX(-180deg); -o-transform: perspective(800px) rotateX(-180deg); transform: perspective(800px) rotateX(-180deg); } 100% { -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: perspective(800px) rotateX(0deg); -moz-transform: perspective(800px) rotateX(0deg); -ms-transform: perspective(800px) rotateX(0deg); -o-transform: perspective(800px) rotateX(0deg); transform: perspective(800px) rotateX(0deg); } } @-moz-keyframes perspectiveLeftRetourn { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(-180deg); -moz-transform: perspective(800px) rotateY(-180deg); -ms-transform: perspective(800px) rotateY(-180deg); -o-transform: perspective(800px) rotateY(-180deg); transform: perspective(800px) rotateY(-180deg); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(0deg); -moz-transform: perspective(800px) rotateY(0deg); -ms-transform: perspective(800px) rotateY(0deg); -o-transform: perspective(800px) rotateY(0deg); transform: perspective(800px) rotateY(0deg); } } @-webkit-keyframes perspectiveLeftRetourn { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(-180deg); -moz-transform: perspective(800px) rotateY(-180deg); -ms-transform: perspective(800px) rotateY(-180deg); -o-transform: perspective(800px) rotateY(-180deg); transform: perspective(800px) rotateY(-180deg); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(0deg); -moz-transform: perspective(800px) rotateY(0deg); -ms-transform: perspective(800px) rotateY(0deg); -o-transform: perspective(800px) rotateY(0deg); transform: perspective(800px) rotateY(0deg); } } @-o-keyframes perspectiveLeftRetourn { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(-180deg); -moz-transform: perspective(800px) rotateY(-180deg); -ms-transform: perspective(800px) rotateY(-180deg); -o-transform: perspective(800px) rotateY(-180deg); transform: perspective(800px) rotateY(-180deg); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(0deg); -moz-transform: perspective(800px) rotateY(0deg); -ms-transform: perspective(800px) rotateY(0deg); -o-transform: perspective(800px) rotateY(0deg); transform: perspective(800px) rotateY(0deg); } } @-ms-keyframes perspectiveLeftRetourn { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(-180deg); -moz-transform: perspective(800px) rotateY(-180deg); -ms-transform: perspective(800px) rotateY(-180deg); -o-transform: perspective(800px) rotateY(-180deg); transform: perspective(800px) rotateY(-180deg); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(0deg); -moz-transform: perspective(800px) rotateY(0deg); -ms-transform: perspective(800px) rotateY(0deg); -o-transform: perspective(800px) rotateY(0deg); transform: perspective(800px) rotateY(0deg); } } @keyframes perspectiveLeftRetourn { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(-180deg); -moz-transform: perspective(800px) rotateY(-180deg); -ms-transform: perspective(800px) rotateY(-180deg); -o-transform: perspective(800px) rotateY(-180deg); transform: perspective(800px) rotateY(-180deg); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(0deg); -moz-transform: perspective(800px) rotateY(0deg); -ms-transform: perspective(800px) rotateY(0deg); -o-transform: perspective(800px) rotateY(0deg); transform: perspective(800px) rotateY(0deg); } } @-moz-keyframes perspectiveRightRetourn { 0% { -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -ms-transform-origin: 100% 0; -o-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: perspective(800px) rotateY(180deg); -moz-transform: perspective(800px) rotateY(180deg); -ms-transform: perspective(800px) rotateY(180deg); -o-transform: perspective(800px) rotateY(180deg); transform: perspective(800px) rotateY(180deg); } 100% { -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -ms-transform-origin: 100% 0; -o-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: perspective(800px) rotateY(0deg); -moz-transform: perspective(800px) rotateY(0deg); -ms-transform: perspective(800px) rotateY(0deg); -o-transform: perspective(800px) rotateY(0deg); transform: perspective(800px) rotateY(0deg); } } @-webkit-keyframes perspectiveRightRetourn { 0% { -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -ms-transform-origin: 100% 0; -o-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: perspective(800px) rotateY(180deg); -moz-transform: perspective(800px) rotateY(180deg); -ms-transform: perspective(800px) rotateY(180deg); -o-transform: perspective(800px) rotateY(180deg); transform: perspective(800px) rotateY(180deg); } 100% { -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -ms-transform-origin: 100% 0; -o-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: perspective(800px) rotateY(0deg); -moz-transform: perspective(800px) rotateY(0deg); -ms-transform: perspective(800px) rotateY(0deg); -o-transform: perspective(800px) rotateY(0deg); transform: perspective(800px) rotateY(0deg); } } @-o-keyframes perspectiveRightRetourn { 0% { -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -ms-transform-origin: 100% 0; -o-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: perspective(800px) rotateY(180deg); -moz-transform: perspective(800px) rotateY(180deg); -ms-transform: perspective(800px) rotateY(180deg); -o-transform: perspective(800px) rotateY(180deg); transform: perspective(800px) rotateY(180deg); } 100% { -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -ms-transform-origin: 100% 0; -o-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: perspective(800px) rotateY(0deg); -moz-transform: perspective(800px) rotateY(0deg); -ms-transform: perspective(800px) rotateY(0deg); -o-transform: perspective(800px) rotateY(0deg); transform: perspective(800px) rotateY(0deg); } } @-ms-keyframes perspectiveRightRetourn { 0% { -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -ms-transform-origin: 100% 0; -o-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: perspective(800px) rotateY(180deg); -moz-transform: perspective(800px) rotateY(180deg); -ms-transform: perspective(800px) rotateY(180deg); -o-transform: perspective(800px) rotateY(180deg); transform: perspective(800px) rotateY(180deg); } 100% { -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -ms-transform-origin: 100% 0; -o-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: perspective(800px) rotateY(0deg); -moz-transform: perspective(800px) rotateY(0deg); -ms-transform: perspective(800px) rotateY(0deg); -o-transform: perspective(800px) rotateY(0deg); transform: perspective(800px) rotateY(0deg); } } @keyframes perspectiveRightRetourn { 0% { -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -ms-transform-origin: 100% 0; -o-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: perspective(800px) rotateY(180deg); -moz-transform: perspective(800px) rotateY(180deg); -ms-transform: perspective(800px) rotateY(180deg); -o-transform: perspective(800px) rotateY(180deg); transform: perspective(800px) rotateY(180deg); } 100% { -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -ms-transform-origin: 100% 0; -o-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: perspective(800px) rotateY(0deg); -moz-transform: perspective(800px) rotateY(0deg); -ms-transform: perspective(800px) rotateY(0deg); -o-transform: perspective(800px) rotateY(0deg); transform: perspective(800px) rotateY(0deg); } } @-moz-keyframes perspectiveUpRetourn { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateX(180deg); -moz-transform: perspective(800px) rotateX(180deg); -ms-transform: perspective(800px) rotateX(180deg); -o-transform: perspective(800px) rotateX(180deg); transform: perspective(800px) rotateX(180deg); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateX(0deg); -moz-transform: perspective(800px) rotateX(0deg); -ms-transform: perspective(800px) rotateX(0deg); -o-transform: perspective(800px) rotateX(0deg); transform: perspective(800px) rotateX(0deg); } } @-webkit-keyframes perspectiveUpRetourn { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateX(180deg); -moz-transform: perspective(800px) rotateX(180deg); -ms-transform: perspective(800px) rotateX(180deg); -o-transform: perspective(800px) rotateX(180deg); transform: perspective(800px) rotateX(180deg); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateX(0deg); -moz-transform: perspective(800px) rotateX(0deg); -ms-transform: perspective(800px) rotateX(0deg); -o-transform: perspective(800px) rotateX(0deg); transform: perspective(800px) rotateX(0deg); } } @-o-keyframes perspectiveUpRetourn { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateX(180deg); -moz-transform: perspective(800px) rotateX(180deg); -ms-transform: perspective(800px) rotateX(180deg); -o-transform: perspective(800px) rotateX(180deg); transform: perspective(800px) rotateX(180deg); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateX(0deg); -moz-transform: perspective(800px) rotateX(0deg); -ms-transform: perspective(800px) rotateX(0deg); -o-transform: perspective(800px) rotateX(0deg); transform: perspective(800px) rotateX(0deg); } } @-ms-keyframes perspectiveUpRetourn { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateX(180deg); -moz-transform: perspective(800px) rotateX(180deg); -ms-transform: perspective(800px) rotateX(180deg); -o-transform: perspective(800px) rotateX(180deg); transform: perspective(800px) rotateX(180deg); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateX(0deg); -moz-transform: perspective(800px) rotateX(0deg); -ms-transform: perspective(800px) rotateX(0deg); -o-transform: perspective(800px) rotateX(0deg); transform: perspective(800px) rotateX(0deg); } } @keyframes perspectiveUpRetourn { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateX(180deg); -moz-transform: perspective(800px) rotateX(180deg); -ms-transform: perspective(800px) rotateX(180deg); -o-transform: perspective(800px) rotateX(180deg); transform: perspective(800px) rotateX(180deg); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateX(0deg); -moz-transform: perspective(800px) rotateX(0deg); -ms-transform: perspective(800px) rotateX(0deg); -o-transform: perspective(800px) rotateX(0deg); transform: perspective(800px) rotateX(0deg); } } @-moz-keyframes puffIn { 0% { opacity: 0; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(2, 2); -moz-transform: scale(2, 2); -ms-transform: scale(2, 2); -o-transform: scale(2, 2); transform: scale(2, 2); -webkit-filter: blur(2px); } 100% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } } @-webkit-keyframes puffIn { 0% { opacity: 0; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(2, 2); -moz-transform: scale(2, 2); -ms-transform: scale(2, 2); -o-transform: scale(2, 2); transform: scale(2, 2); -webkit-filter: blur(2px); } 100% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } } @-o-keyframes puffIn { 0% { opacity: 0; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(2, 2); -moz-transform: scale(2, 2); -ms-transform: scale(2, 2); -o-transform: scale(2, 2); transform: scale(2, 2); -webkit-filter: blur(2px); } 100% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } } @-ms-keyframes puffIn { 0% { opacity: 0; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(2, 2); -moz-transform: scale(2, 2); -ms-transform: scale(2, 2); -o-transform: scale(2, 2); transform: scale(2, 2); -webkit-filter: blur(2px); } 100% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } } @keyframes puffIn { 0% { opacity: 0; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(2, 2); -moz-transform: scale(2, 2); -ms-transform: scale(2, 2); -o-transform: scale(2, 2); transform: scale(2, 2); -webkit-filter: blur(2px); } 100% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } } @-moz-keyframes puffOut { 0% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } 100% { opacity: 0; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(2, 2); -moz-transform: scale(2, 2); -ms-transform: scale(2, 2); -o-transform: scale(2, 2); transform: scale(2, 2); -webkit-filter: blur(2px); } } @-webkit-keyframes puffOut { 0% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } 100% { opacity: 0; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(2, 2); -moz-transform: scale(2, 2); -ms-transform: scale(2, 2); -o-transform: scale(2, 2); transform: scale(2, 2); -webkit-filter: blur(2px); } } @-o-keyframes puffOut { 0% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } 100% { opacity: 0; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(2, 2); -moz-transform: scale(2, 2); -ms-transform: scale(2, 2); -o-transform: scale(2, 2); transform: scale(2, 2); -webkit-filter: blur(2px); } } @-ms-keyframes puffOut { 0% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } 100% { opacity: 0; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(2, 2); -moz-transform: scale(2, 2); -ms-transform: scale(2, 2); -o-transform: scale(2, 2); transform: scale(2, 2); -webkit-filter: blur(2px); } } @keyframes puffOut { 0% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } 100% { opacity: 0; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(2, 2); -moz-transform: scale(2, 2); -ms-transform: scale(2, 2); -o-transform: scale(2, 2); transform: scale(2, 2); -webkit-filter: blur(2px); } } @-moz-keyframes rotateDown { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateX(0deg) translateZ(0px); -moz-transform: perspective(800px) rotateX(0deg) translateZ(0px); -ms-transform: perspective(800px) rotateX(0deg) translateZ(0px); -o-transform: perspective(800px) rotateX(0deg) translateZ(0px); transform: perspective(800px) rotateX(0deg) translateZ(0px); opacity:1; } 100% { opacity: 0; display:none; -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: perspective(800px) rotateX(-180deg) translateZ(300px); -moz-transform: perspective(800px) rotateX(-180deg) translateZ(300px); -ms-transform: perspective(800px) rotateX(-180deg) translateZ(300px); -o-transform: perspective(800px) rotateX(-180deg) translateZ(300px); transform: perspective(800px) rotateX(-180deg) translateZ(300px); } } @-webkit-keyframes rotateDown { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateX(0deg) translateZ(0px); -moz-transform: perspective(800px) rotateX(0deg) translateZ(0px); -ms-transform: perspective(800px) rotateX(0deg) translateZ(0px); -o-transform: perspective(800px) rotateX(0deg) translateZ(0px); transform: perspective(800px) rotateX(0deg) translateZ(0px); opacity:1; } 100% { opacity: 0; -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: perspective(800px) rotateX(-180deg) translateZ(300px); -moz-transform: perspective(800px) rotateX(-180deg) translateZ(300px); -ms-transform: perspective(800px) rotateX(-180deg) translateZ(300px); -o-transform: perspective(800px) rotateX(-180deg) translateZ(300px); transform: perspective(800px) rotateX(-180deg) translateZ(300px); visibility:hidden; display:none; } } @-o-keyframes rotateDown { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateX(0deg) translateZ(0px); -moz-transform: perspective(800px) rotateX(0deg) translateZ(0px); -ms-transform: perspective(800px) rotateX(0deg) translateZ(0px); -o-transform: perspective(800px) rotateX(0deg) translateZ(0px); transform: perspective(800px) rotateX(0deg) translateZ(0px); opacity:1; } 100% { opacity: 0; -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: perspective(800px) rotateX(-180deg) translateZ(300px); -moz-transform: perspective(800px) rotateX(-180deg) translateZ(300px); -ms-transform: perspective(800px) rotateX(-180deg) translateZ(300px); -o-transform: perspective(800px) rotateX(-180deg) translateZ(300px); transform: perspective(800px) rotateX(-180deg) translateZ(300px); visibility:hidden; display:none; } } @-ms-keyframes rotateDown { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateX(0deg) translateZ(0px); -moz-transform: perspective(800px) rotateX(0deg) translateZ(0px); -ms-transform: perspective(800px) rotateX(0deg) translateZ(0px); -o-transform: perspective(800px) rotateX(0deg) translateZ(0px); transform: perspective(800px) rotateX(0deg) translateZ(0px); opacity:1; } 100% { opacity: 0; -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: perspective(800px) rotateX(-180deg) translateZ(300px); -moz-transform: perspective(800px) rotateX(-180deg) translateZ(300px); -ms-transform: perspective(800px) rotateX(-180deg) translateZ(300px); -o-transform: perspective(800px) rotateX(-180deg) translateZ(300px); transform: perspective(800px) rotateX(-180deg) translateZ(300px); visibility:hidden; display:none; } } @keyframes rotateDown { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateX(0deg) translateZ(0px); -moz-transform: perspective(800px) rotateX(0deg) translateZ(0px); -ms-transform: perspective(800px) rotateX(0deg) translateZ(0px); -o-transform: perspective(800px) rotateX(0deg) translateZ(0px); transform: perspective(800px) rotateX(0deg) translateZ(0px); opacity:1; } 100% { opacity: 0; -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: perspective(800px) rotateX(-180deg) translateZ(300px); -moz-transform: perspective(800px) rotateX(-180deg) translateZ(300px); -ms-transform: perspective(800px) rotateX(-180deg) translateZ(300px); -o-transform: perspective(800px) rotateX(-180deg) translateZ(300px); transform: perspective(800px) rotateX(-180deg) translateZ(300px); visibility:hidden; display:none; } } @-moz-keyframes rotateLeft { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(0deg) translateZ(0px); -moz-transform: perspective(800px) rotateY(0deg) translateZ(0px); -ms-transform: perspective(800px) rotateY(0deg) translateZ(0px); -o-transform: perspective(800px) rotateY(0deg) translateZ(0px); transform: perspective(800px) rotateY(0deg) translateZ(0px); } 100% { opacity: 0; -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; -ms-transform-origin: 50% 0; -o-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform: perspective(800px) rotateY(180deg) translateZ(300px); -moz-transform: perspective(800px) rotateY(180deg) translateZ(300px); -ms-transform: perspective(800px) rotateY(180deg) translateZ(300px); -o-transform: perspective(800px) rotateY(180deg) translateZ(300px); transform: perspective(800px) rotateY(180deg) translateZ(300px); } } @-webkit-keyframes rotateLeft { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(0deg) translateZ(0px); -moz-transform: perspective(800px) rotateY(0deg) translateZ(0px); -ms-transform: perspective(800px) rotateY(0deg) translateZ(0px); -o-transform: perspective(800px) rotateY(0deg) translateZ(0px); transform: perspective(800px) rotateY(0deg) translateZ(0px); } 100% { opacity: 0; -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; -ms-transform-origin: 50% 0; -o-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform: perspective(800px) rotateY(180deg) translateZ(300px); -moz-transform: perspective(800px) rotateY(180deg) translateZ(300px); -ms-transform: perspective(800px) rotateY(180deg) translateZ(300px); -o-transform: perspective(800px) rotateY(180deg) translateZ(300px); transform: perspective(800px) rotateY(180deg) translateZ(300px); } } @-o-keyframes rotateLeft { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(0deg) translateZ(0px); -moz-transform: perspective(800px) rotateY(0deg) translateZ(0px); -ms-transform: perspective(800px) rotateY(0deg) translateZ(0px); -o-transform: perspective(800px) rotateY(0deg) translateZ(0px); transform: perspective(800px) rotateY(0deg) translateZ(0px); } 100% { opacity: 0; -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; -ms-transform-origin: 50% 0; -o-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform: perspective(800px) rotateY(180deg) translateZ(300px); -moz-transform: perspective(800px) rotateY(180deg) translateZ(300px); -ms-transform: perspective(800px) rotateY(180deg) translateZ(300px); -o-transform: perspective(800px) rotateY(180deg) translateZ(300px); transform: perspective(800px) rotateY(180deg) translateZ(300px); } } @-ms-keyframes rotateLeft { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(0deg) translateZ(0px); -moz-transform: perspective(800px) rotateY(0deg) translateZ(0px); -ms-transform: perspective(800px) rotateY(0deg) translateZ(0px); -o-transform: perspective(800px) rotateY(0deg) translateZ(0px); transform: perspective(800px) rotateY(0deg) translateZ(0px); } 100% { opacity: 0; -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; -ms-transform-origin: 50% 0; -o-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform: perspective(800px) rotateY(180deg) translateZ(300px); -moz-transform: perspective(800px) rotateY(180deg) translateZ(300px); -ms-transform: perspective(800px) rotateY(180deg) translateZ(300px); -o-transform: perspective(800px) rotateY(180deg) translateZ(300px); transform: perspective(800px) rotateY(180deg) translateZ(300px); } } @keyframes rotateLeft { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(0deg) translateZ(0px); -moz-transform: perspective(800px) rotateY(0deg) translateZ(0px); -ms-transform: perspective(800px) rotateY(0deg) translateZ(0px); -o-transform: perspective(800px) rotateY(0deg) translateZ(0px); transform: perspective(800px) rotateY(0deg) translateZ(0px); } 100% { opacity: 0; -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; -ms-transform-origin: 50% 0; -o-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform: perspective(800px) rotateY(180deg) translateZ(300px); -moz-transform: perspective(800px) rotateY(180deg) translateZ(300px); -ms-transform: perspective(800px) rotateY(180deg) translateZ(300px); -o-transform: perspective(800px) rotateY(180deg) translateZ(300px); transform: perspective(800px) rotateY(180deg) translateZ(300px); } } @-moz-keyframes rotateRight { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(0deg) translate3d(0px); -moz-transform: perspective(800px) rotateY(0deg) translate3d(0px); -ms-transform: perspective(800px) rotateY(0deg) translate3d(0px); -o-transform: perspective(800px) rotateY(0deg) translate3d(0px); transform: perspective(800px) rotateY(0deg) translate3d(0px); } 100% { opacity: 0; -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; -ms-transform-origin: 50% 0; -o-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform: perspective(800px) rotateY(-180deg) translateZ(150px); -moz-transform: perspective(800px) rotateY(-180deg) translateZ(150px); -ms-transform: perspective(800px) rotateY(-180deg) translateZ(150px); -o-transform: perspective(800px) rotateY(-180deg) translateZ(150px); transform: perspective(800px) rotateY(-180deg) translateZ(150px); } } @-webkit-keyframes rotateRight { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(0deg) translate3d(0px); -moz-transform: perspective(800px) rotateY(0deg) translate3d(0px); -ms-transform: perspective(800px) rotateY(0deg) translate3d(0px); -o-transform: perspective(800px) rotateY(0deg) translate3d(0px); transform: perspective(800px) rotateY(0deg) translate3d(0px); } 100% { opacity: 0; -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; -ms-transform-origin: 50% 0; -o-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform: perspective(800px) rotateY(-180deg) translateZ(150px); -moz-transform: perspective(800px) rotateY(-180deg) translateZ(150px); -ms-transform: perspective(800px) rotateY(-180deg) translateZ(150px); -o-transform: perspective(800px) rotateY(-180deg) translateZ(150px); transform: perspective(800px) rotateY(-180deg) translateZ(150px); } } @-o-keyframes rotateRight { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(0deg) translate3d(0px); -moz-transform: perspective(800px) rotateY(0deg) translate3d(0px); -ms-transform: perspective(800px) rotateY(0deg) translate3d(0px); -o-transform: perspective(800px) rotateY(0deg) translate3d(0px); transform: perspective(800px) rotateY(0deg) translate3d(0px); } 100% { opacity: 0; -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; -ms-transform-origin: 50% 0; -o-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform: perspective(800px) rotateY(-180deg) translateZ(150px); -moz-transform: perspective(800px) rotateY(-180deg) translateZ(150px); -ms-transform: perspective(800px) rotateY(-180deg) translateZ(150px); -o-transform: perspective(800px) rotateY(-180deg) translateZ(150px); transform: perspective(800px) rotateY(-180deg) translateZ(150px); } } @-ms-keyframes rotateRight { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(0deg) translate3d(0px); -moz-transform: perspective(800px) rotateY(0deg) translate3d(0px); -ms-transform: perspective(800px) rotateY(0deg) translate3d(0px); -o-transform: perspective(800px) rotateY(0deg) translate3d(0px); transform: perspective(800px) rotateY(0deg) translate3d(0px); } 100% { opacity: 0; -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; -ms-transform-origin: 50% 0; -o-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform: perspective(800px) rotateY(-180deg) translateZ(150px); -moz-transform: perspective(800px) rotateY(-180deg) translateZ(150px); -ms-transform: perspective(800px) rotateY(-180deg) translateZ(150px); -o-transform: perspective(800px) rotateY(-180deg) translateZ(150px); transform: perspective(800px) rotateY(-180deg) translateZ(150px); } } @keyframes rotateRight { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(0deg) translate3d(0px); -moz-transform: perspective(800px) rotateY(0deg) translate3d(0px); -ms-transform: perspective(800px) rotateY(0deg) translate3d(0px); -o-transform: perspective(800px) rotateY(0deg) translate3d(0px); transform: perspective(800px) rotateY(0deg) translate3d(0px); } 100% { opacity: 0; -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; -ms-transform-origin: 50% 0; -o-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform: perspective(800px) rotateY(-180deg) translateZ(150px); -moz-transform: perspective(800px) rotateY(-180deg) translateZ(150px); -ms-transform: perspective(800px) rotateY(-180deg) translateZ(150px); -o-transform: perspective(800px) rotateY(-180deg) translateZ(150px); transform: perspective(800px) rotateY(-180deg) translateZ(150px); } } @-moz-keyframes rotateUp { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateX(0deg) translateZ(0px); -moz-transform: perspective(800px) rotateX(0deg) translateZ(0px); -ms-transform: perspective(800px) rotateX(0deg) translateZ(0px); -o-transform: perspective(800px) rotateX(0deg) translateZ(0px); transform: perspective(800px) rotateX(0deg) translateZ(0px); } 100% { opacity: 0; -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; -ms-transform-origin: 50% 0; -o-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform: perspective(800px) rotateX(180deg) translateZ(100px); -moz-transform: perspective(800px) rotateX(180deg) translateZ(100px); -ms-transform: perspective(800px) rotateX(180deg) translateZ(100px); -o-transform: perspective(800px) rotateX(180deg) translateZ(100px); transform: perspective(800px) rotateX(180deg) translateZ(100px); } } @-webkit-keyframes rotateUp { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateX(0deg) translateZ(0px); -moz-transform: perspective(800px) rotateX(0deg) translateZ(0px); -ms-transform: perspective(800px) rotateX(0deg) translateZ(0px); -o-transform: perspective(800px) rotateX(0deg) translateZ(0px); transform: perspective(800px) rotateX(0deg) translateZ(0px); } 100% { opacity: 0; -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; -ms-transform-origin: 50% 0; -o-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform: perspective(800px) rotateX(180deg) translateZ(100px); -moz-transform: perspective(800px) rotateX(180deg) translateZ(100px); -ms-transform: perspective(800px) rotateX(180deg) translateZ(100px); -o-transform: perspective(800px) rotateX(180deg) translateZ(100px); transform: perspective(800px) rotateX(180deg) translateZ(100px); } } @-o-keyframes rotateUp { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateX(0deg) translateZ(0px); -moz-transform: perspective(800px) rotateX(0deg) translateZ(0px); -ms-transform: perspective(800px) rotateX(0deg) translateZ(0px); -o-transform: perspective(800px) rotateX(0deg) translateZ(0px); transform: perspective(800px) rotateX(0deg) translateZ(0px); } 100% { opacity: 0; -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; -ms-transform-origin: 50% 0; -o-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform: perspective(800px) rotateX(180deg) translateZ(100px); -moz-transform: perspective(800px) rotateX(180deg) translateZ(100px); -ms-transform: perspective(800px) rotateX(180deg) translateZ(100px); -o-transform: perspective(800px) rotateX(180deg) translateZ(100px); transform: perspective(800px) rotateX(180deg) translateZ(100px); } } @-ms-keyframes rotateUp { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateX(0deg) translateZ(0px); -moz-transform: perspective(800px) rotateX(0deg) translateZ(0px); -ms-transform: perspective(800px) rotateX(0deg) translateZ(0px); -o-transform: perspective(800px) rotateX(0deg) translateZ(0px); transform: perspective(800px) rotateX(0deg) translateZ(0px); } 100% { opacity: 0; -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; -ms-transform-origin: 50% 0; -o-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform: perspective(800px) rotateX(180deg) translateZ(100px); -moz-transform: perspective(800px) rotateX(180deg) translateZ(100px); -ms-transform: perspective(800px) rotateX(180deg) translateZ(100px); -o-transform: perspective(800px) rotateX(180deg) translateZ(100px); transform: perspective(800px) rotateX(180deg) translateZ(100px); } } @keyframes rotateUp { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: perspective(800px) rotateX(0deg) translateZ(0px); -moz-transform: perspective(800px) rotateX(0deg) translateZ(0px); -ms-transform: perspective(800px) rotateX(0deg) translateZ(0px); -o-transform: perspective(800px) rotateX(0deg) translateZ(0px); transform: perspective(800px) rotateX(0deg) translateZ(0px); } 100% { opacity: 0; -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; -ms-transform-origin: 50% 0; -o-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform: perspective(800px) rotateX(180deg) translateZ(100px); -moz-transform: perspective(800px) rotateX(180deg) translateZ(100px); -ms-transform: perspective(800px) rotateX(180deg) translateZ(100px); -o-transform: perspective(800px) rotateX(180deg) translateZ(100px); transform: perspective(800px) rotateX(180deg) translateZ(100px); } } @-moz-keyframes slideDown { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } } @-webkit-keyframes slideDown { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } } @-o-keyframes slideDown { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } } @-ms-keyframes slideDown { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } } @keyframes slideDown { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } } @-moz-keyframes slideLeft { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } } @-webkit-keyframes slideLeft { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } } @-o-keyframes slideLeft { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } } @-ms-keyframes slideLeft { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } } @keyframes slideLeft { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } } @-moz-keyframes slideRight { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } } @-webkit-keyframes slideRight { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } } @-o-keyframes slideRight { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } } @-ms-keyframes slideRight { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } } @keyframes slideRight { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } } @-moz-keyframes slideUp { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } } @-webkit-keyframes slideUp { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } } @-o-keyframes slideUp { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } } @-ms-keyframes slideUp { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } } @keyframes slideUp { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } } @-moz-keyframes slideDownRetourn { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } } @-webkit-keyframes slideDownRetourn { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } } @-o-keyframes slideDownRetourn { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } } @-ms-keyframes slideDownRetourn { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } } @keyframes slideDownRetourn { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } } @-moz-keyframes slideLeftRetourn { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } } @-webkit-keyframes slideLeftRetourn { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } } @-o-keyframes slideLeftRetourn { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } } @-ms-keyframes slideLeftRetourn { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } } @keyframes slideLeftRetourn { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } } @-moz-keyframes slideRightRetourn { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } } @-webkit-keyframes slideRightRetourn { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } } @-o-keyframes slideRightRetourn { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } } @-ms-keyframes slideRightRetourn { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } } @keyframes slideRightRetourn { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } } @-moz-keyframes slideUpRetourn { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } } @-webkit-keyframes slideUpRetourn { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } } @-o-keyframes slideUpRetourn { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } } @-ms-keyframes slideUpRetourn { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } } @keyframes slideUpRetourn { 0% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } 100% { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } } @-moz-keyframes swap { 0% { opacity: 0; -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: scale(0, 0) translate(-700px, 0px); -moz-transform: scale(0, 0) translate(-700px, 0px); -ms-transform: scale(0, 0) translate(-700px, 0px); -o-transform: scale(0, 0) translate(-700px, 0px); transform: scale(0, 0) translate(-700px, 0px); } 100% { opacity: 1; -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: scale(1, 1) translate(0px, 0px); -moz-transform: scale(1, 1) translate(0px, 0px); -ms-transform: scale(1, 1) translate(0px, 0px); -o-transform: scale(1, 1) translate(0px, 0px); transform: scale(1, 1) translate(0px, 0px); } } @-webkit-keyframes swap { 0% { opacity: 0; -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: scale(0, 0) translate(-700px, 0px); -moz-transform: scale(0, 0) translate(-700px, 0px); -ms-transform: scale(0, 0) translate(-700px, 0px); -o-transform: scale(0, 0) translate(-700px, 0px); transform: scale(0, 0) translate(-700px, 0px); } 100% { opacity: 1; -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: scale(1, 1) translate(0px, 0px); -moz-transform: scale(1, 1) translate(0px, 0px); -ms-transform: scale(1, 1) translate(0px, 0px); -o-transform: scale(1, 1) translate(0px, 0px); transform: scale(1, 1) translate(0px, 0px); } } @-o-keyframes swap { 0% { opacity: 0; -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: scale(0, 0) translate(-700px, 0px); -moz-transform: scale(0, 0) translate(-700px, 0px); -ms-transform: scale(0, 0) translate(-700px, 0px); -o-transform: scale(0, 0) translate(-700px, 0px); transform: scale(0, 0) translate(-700px, 0px); } 100% { opacity: 1; -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: scale(1, 1) translate(0px, 0px); -moz-transform: scale(1, 1) translate(0px, 0px); -ms-transform: scale(1, 1) translate(0px, 0px); -o-transform: scale(1, 1) translate(0px, 0px); transform: scale(1, 1) translate(0px, 0px); } } @-ms-keyframes swap { 0% { opacity: 0; -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: scale(0, 0) translate(-700px, 0px); -moz-transform: scale(0, 0) translate(-700px, 0px); -ms-transform: scale(0, 0) translate(-700px, 0px); -o-transform: scale(0, 0) translate(-700px, 0px); transform: scale(0, 0) translate(-700px, 0px); } 100% { opacity: 1; -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: scale(1, 1) translate(0px, 0px); -moz-transform: scale(1, 1) translate(0px, 0px); -ms-transform: scale(1, 1) translate(0px, 0px); -o-transform: scale(1, 1) translate(0px, 0px); transform: scale(1, 1) translate(0px, 0px); } } @keyframes swap { 0% { opacity: 0; -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: scale(0, 0) translate(-700px, 0px); -moz-transform: scale(0, 0) translate(-700px, 0px); -ms-transform: scale(0, 0) translate(-700px, 0px); -o-transform: scale(0, 0) translate(-700px, 0px); transform: scale(0, 0) translate(-700px, 0px); } 100% { opacity: 1; -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: scale(1, 1) translate(0px, 0px); -moz-transform: scale(1, 1) translate(0px, 0px); -ms-transform: scale(1, 1) translate(0px, 0px); -o-transform: scale(1, 1) translate(0px, 0px); transform: scale(1, 1) translate(0px, 0px); } } @-moz-keyframes twisterInDown { 0% { opacity: 0; -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: scale(0, 0) rotate(360deg) translateY(-100%); -moz-transform: scale(0, 0) rotate(360deg) translateY(-100%); -ms-transform: scale(0, 0) rotate(360deg) translateY(-100%); -o-transform: scale(0, 0) rotate(360deg) translateY(-100%); transform: scale(0, 0) rotate(360deg) translateY(-100%); } 30% { -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: scale(0, 0) rotate(360deg) translateY(-100%); -moz-transform: scale(0, 0) rotate(360deg) translateY(-100%); -ms-transform: scale(0, 0) rotate(360deg) translateY(-100%); -o-transform: scale(0, 0) rotate(360deg) translateY(-100%); transform: scale(0, 0) rotate(360deg) translateY(-100%); } 100% { opacity: 1; -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: scale(1, 1) rotate(0deg) translateY(0%); -moz-transform: scale(1, 1) rotate(0deg) translateY(0%); -ms-transform: scale(1, 1) rotate(0deg) translateY(0%); -o-transform: scale(1, 1) rotate(0deg) translateY(0%); transform: scale(1, 1) rotate(0deg) translateY(0%); } } @-webkit-keyframes twisterInDown { 0% { opacity: 0; -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: scale(0, 0) rotate(360deg) translateY(-100%); -moz-transform: scale(0, 0) rotate(360deg) translateY(-100%); -ms-transform: scale(0, 0) rotate(360deg) translateY(-100%); -o-transform: scale(0, 0) rotate(360deg) translateY(-100%); transform: scale(0, 0) rotate(360deg) translateY(-100%); } 30% { -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: scale(0, 0) rotate(360deg) translateY(-100%); -moz-transform: scale(0, 0) rotate(360deg) translateY(-100%); -ms-transform: scale(0, 0) rotate(360deg) translateY(-100%); -o-transform: scale(0, 0) rotate(360deg) translateY(-100%); transform: scale(0, 0) rotate(360deg) translateY(-100%); } 100% { opacity: 1; -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: scale(1, 1) rotate(0deg) translateY(0%); -moz-transform: scale(1, 1) rotate(0deg) translateY(0%); -ms-transform: scale(1, 1) rotate(0deg) translateY(0%); -o-transform: scale(1, 1) rotate(0deg) translateY(0%); transform: scale(1, 1) rotate(0deg) translateY(0%); } } @-o-keyframes twisterInDown { 0% { opacity: 0; -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: scale(0, 0) rotate(360deg) translateY(-100%); -moz-transform: scale(0, 0) rotate(360deg) translateY(-100%); -ms-transform: scale(0, 0) rotate(360deg) translateY(-100%); -o-transform: scale(0, 0) rotate(360deg) translateY(-100%); transform: scale(0, 0) rotate(360deg) translateY(-100%); } 30% { -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: scale(0, 0) rotate(360deg) translateY(-100%); -moz-transform: scale(0, 0) rotate(360deg) translateY(-100%); -ms-transform: scale(0, 0) rotate(360deg) translateY(-100%); -o-transform: scale(0, 0) rotate(360deg) translateY(-100%); transform: scale(0, 0) rotate(360deg) translateY(-100%); } 100% { opacity: 1; -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: scale(1, 1) rotate(0deg) translateY(0%); -moz-transform: scale(1, 1) rotate(0deg) translateY(0%); -ms-transform: scale(1, 1) rotate(0deg) translateY(0%); -o-transform: scale(1, 1) rotate(0deg) translateY(0%); transform: scale(1, 1) rotate(0deg) translateY(0%); } } @-ms-keyframes twisterInDown { 0% { opacity: 0; -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: scale(0, 0) rotate(360deg) translateY(-100%); -moz-transform: scale(0, 0) rotate(360deg) translateY(-100%); -ms-transform: scale(0, 0) rotate(360deg) translateY(-100%); -o-transform: scale(0, 0) rotate(360deg) translateY(-100%); transform: scale(0, 0) rotate(360deg) translateY(-100%); } 30% { -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: scale(0, 0) rotate(360deg) translateY(-100%); -moz-transform: scale(0, 0) rotate(360deg) translateY(-100%); -ms-transform: scale(0, 0) rotate(360deg) translateY(-100%); -o-transform: scale(0, 0) rotate(360deg) translateY(-100%); transform: scale(0, 0) rotate(360deg) translateY(-100%); } 100% { opacity: 1; -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: scale(1, 1) rotate(0deg) translateY(0%); -moz-transform: scale(1, 1) rotate(0deg) translateY(0%); -ms-transform: scale(1, 1) rotate(0deg) translateY(0%); -o-transform: scale(1, 1) rotate(0deg) translateY(0%); transform: scale(1, 1) rotate(0deg) translateY(0%); } } @keyframes twisterInDown { 0% { opacity: 0; -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: scale(0, 0) rotate(360deg) translateY(-100%); -moz-transform: scale(0, 0) rotate(360deg) translateY(-100%); -ms-transform: scale(0, 0) rotate(360deg) translateY(-100%); -o-transform: scale(0, 0) rotate(360deg) translateY(-100%); transform: scale(0, 0) rotate(360deg) translateY(-100%); } 30% { -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: scale(0, 0) rotate(360deg) translateY(-100%); -moz-transform: scale(0, 0) rotate(360deg) translateY(-100%); -ms-transform: scale(0, 0) rotate(360deg) translateY(-100%); -o-transform: scale(0, 0) rotate(360deg) translateY(-100%); transform: scale(0, 0) rotate(360deg) translateY(-100%); } 100% { opacity: 1; -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: scale(1, 1) rotate(0deg) translateY(0%); -moz-transform: scale(1, 1) rotate(0deg) translateY(0%); -ms-transform: scale(1, 1) rotate(0deg) translateY(0%); -o-transform: scale(1, 1) rotate(0deg) translateY(0%); transform: scale(1, 1) rotate(0deg) translateY(0%); } } @-moz-keyframes twisterInUp { 0% { opacity: 0; -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -ms-transform-origin: 100% 0; -o-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: scale(0, 0) rotate(360deg) translateY(100%); -moz-transform: scale(0, 0) rotate(360deg) translateY(100%); -ms-transform: scale(0, 0) rotate(360deg) translateY(100%); -o-transform: scale(0, 0) rotate(360deg) translateY(100%); transform: scale(0, 0) rotate(360deg) translateY(100%); } 30% { -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -ms-transform-origin: 100% 0; -o-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: scale(0, 0) rotate(360deg) translateY(100%); -moz-transform: scale(0, 0) rotate(360deg) translateY(100%); -ms-transform: scale(0, 0) rotate(360deg) translateY(100%); -o-transform: scale(0, 0) rotate(360deg) translateY(100%); transform: scale(0, 0) rotate(360deg) translateY(100%); } 100% { opacity: 1; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scale(1, 1) rotate(0deg) translateY(0); -moz-transform: scale(1, 1) rotate(0deg) translateY(0); -ms-transform: scale(1, 1) rotate(0deg) translateY(0); -o-transform: scale(1, 1) rotate(0deg) translateY(0); transform: scale(1, 1) rotate(0deg) translateY(0); } } @-webkit-keyframes twisterInUp { 0% { opacity: 0; -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -ms-transform-origin: 100% 0; -o-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: scale(0, 0) rotate(360deg) translateY(100%); -moz-transform: scale(0, 0) rotate(360deg) translateY(100%); -ms-transform: scale(0, 0) rotate(360deg) translateY(100%); -o-transform: scale(0, 0) rotate(360deg) translateY(100%); transform: scale(0, 0) rotate(360deg) translateY(100%); } 30% { -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -ms-transform-origin: 100% 0; -o-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: scale(0, 0) rotate(360deg) translateY(100%); -moz-transform: scale(0, 0) rotate(360deg) translateY(100%); -ms-transform: scale(0, 0) rotate(360deg) translateY(100%); -o-transform: scale(0, 0) rotate(360deg) translateY(100%); transform: scale(0, 0) rotate(360deg) translateY(100%); } 100% { opacity: 1; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scale(1, 1) rotate(0deg) translateY(0); -moz-transform: scale(1, 1) rotate(0deg) translateY(0); -ms-transform: scale(1, 1) rotate(0deg) translateY(0); -o-transform: scale(1, 1) rotate(0deg) translateY(0); transform: scale(1, 1) rotate(0deg) translateY(0); } } @-o-keyframes twisterInUp { 0% { opacity: 0; -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -ms-transform-origin: 100% 0; -o-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: scale(0, 0) rotate(360deg) translateY(100%); -moz-transform: scale(0, 0) rotate(360deg) translateY(100%); -ms-transform: scale(0, 0) rotate(360deg) translateY(100%); -o-transform: scale(0, 0) rotate(360deg) translateY(100%); transform: scale(0, 0) rotate(360deg) translateY(100%); } 30% { -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -ms-transform-origin: 100% 0; -o-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: scale(0, 0) rotate(360deg) translateY(100%); -moz-transform: scale(0, 0) rotate(360deg) translateY(100%); -ms-transform: scale(0, 0) rotate(360deg) translateY(100%); -o-transform: scale(0, 0) rotate(360deg) translateY(100%); transform: scale(0, 0) rotate(360deg) translateY(100%); } 100% { opacity: 1; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scale(1, 1) rotate(0deg) translateY(0); -moz-transform: scale(1, 1) rotate(0deg) translateY(0); -ms-transform: scale(1, 1) rotate(0deg) translateY(0); -o-transform: scale(1, 1) rotate(0deg) translateY(0); transform: scale(1, 1) rotate(0deg) translateY(0); } } @-ms-keyframes twisterInUp { 0% { opacity: 0; -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -ms-transform-origin: 100% 0; -o-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: scale(0, 0) rotate(360deg) translateY(100%); -moz-transform: scale(0, 0) rotate(360deg) translateY(100%); -ms-transform: scale(0, 0) rotate(360deg) translateY(100%); -o-transform: scale(0, 0) rotate(360deg) translateY(100%); transform: scale(0, 0) rotate(360deg) translateY(100%); } 30% { -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -ms-transform-origin: 100% 0; -o-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: scale(0, 0) rotate(360deg) translateY(100%); -moz-transform: scale(0, 0) rotate(360deg) translateY(100%); -ms-transform: scale(0, 0) rotate(360deg) translateY(100%); -o-transform: scale(0, 0) rotate(360deg) translateY(100%); transform: scale(0, 0) rotate(360deg) translateY(100%); } 100% { opacity: 1; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scale(1, 1) rotate(0deg) translateY(0); -moz-transform: scale(1, 1) rotate(0deg) translateY(0); -ms-transform: scale(1, 1) rotate(0deg) translateY(0); -o-transform: scale(1, 1) rotate(0deg) translateY(0); transform: scale(1, 1) rotate(0deg) translateY(0); } } @keyframes twisterInUp { 0% { opacity: 0; -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -ms-transform-origin: 100% 0; -o-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: scale(0, 0) rotate(360deg) translateY(100%); -moz-transform: scale(0, 0) rotate(360deg) translateY(100%); -ms-transform: scale(0, 0) rotate(360deg) translateY(100%); -o-transform: scale(0, 0) rotate(360deg) translateY(100%); transform: scale(0, 0) rotate(360deg) translateY(100%); } 30% { -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -ms-transform-origin: 100% 0; -o-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: scale(0, 0) rotate(360deg) translateY(100%); -moz-transform: scale(0, 0) rotate(360deg) translateY(100%); -ms-transform: scale(0, 0) rotate(360deg) translateY(100%); -o-transform: scale(0, 0) rotate(360deg) translateY(100%); transform: scale(0, 0) rotate(360deg) translateY(100%); } 100% { opacity: 1; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scale(1, 1) rotate(0deg) translateY(0); -moz-transform: scale(1, 1) rotate(0deg) translateY(0); -ms-transform: scale(1, 1) rotate(0deg) translateY(0); -o-transform: scale(1, 1) rotate(0deg) translateY(0); transform: scale(1, 1) rotate(0deg) translateY(0); } } @-moz-keyframes vanishIn { 0% { opacity: 0; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(2, 2); -moz-transform: scale(2, 2); -ms-transform: scale(2, 2); -o-transform: scale(2, 2); transform: scale(2, 2); -webkit-filter: blur(90px); } 100% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } } @-webkit-keyframes vanishIn { 0% { opacity: 0; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(2, 2); -moz-transform: scale(2, 2); -ms-transform: scale(2, 2); -o-transform: scale(2, 2); transform: scale(2, 2); -webkit-filter: blur(90px); } 100% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } } @-o-keyframes vanishIn { 0% { opacity: 0; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(2, 2); -moz-transform: scale(2, 2); -ms-transform: scale(2, 2); -o-transform: scale(2, 2); transform: scale(2, 2); -webkit-filter: blur(90px); } 100% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } } @-ms-keyframes vanishIn { 0% { opacity: 0; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(2, 2); -moz-transform: scale(2, 2); -ms-transform: scale(2, 2); -o-transform: scale(2, 2); transform: scale(2, 2); -webkit-filter: blur(90px); } 100% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } } @keyframes vanishIn { 0% { opacity: 0; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(2, 2); -moz-transform: scale(2, 2); -ms-transform: scale(2, 2); -o-transform: scale(2, 2); transform: scale(2, 2); -webkit-filter: blur(90px); } 100% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } } @-moz-keyframes vanishOut { 0% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } 100% { opacity: 0; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(2, 2); -moz-transform: scale(2, 2); -ms-transform: scale(2, 2); -o-transform: scale(2, 2); transform: scale(2, 2); -webkit-filter: blur(20px); } } @-webkit-keyframes vanishOut { 0% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } 100% { opacity: 0; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(2, 2); -moz-transform: scale(2, 2); -ms-transform: scale(2, 2); -o-transform: scale(2, 2); transform: scale(2, 2); -webkit-filter: blur(20px); } } @-o-keyframes vanishOut { 0% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } 100% { opacity: 0; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(2, 2); -moz-transform: scale(2, 2); -ms-transform: scale(2, 2); -o-transform: scale(2, 2); transform: scale(2, 2); -webkit-filter: blur(20px); } } @-ms-keyframes vanishOut { 0% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } 100% { opacity: 0; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(2, 2); -moz-transform: scale(2, 2); -ms-transform: scale(2, 2); -o-transform: scale(2, 2); transform: scale(2, 2); -webkit-filter: blur(20px); } } @keyframes vanishOut { 0% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } 100% { opacity: 0; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(2, 2); -moz-transform: scale(2, 2); -ms-transform: scale(2, 2); -o-transform: scale(2, 2); transform: scale(2, 2); -webkit-filter: blur(20px); } } @-moz-keyframes swashOut { 0% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } 80% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0.9, 0.9); -moz-transform: scale(0.9, 0.9); -ms-transform: scale(0.9, 0.9); -o-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9); } 100% { opacity: 0; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0, 0); -moz-transform: scale(0, 0); -ms-transform: scale(0, 0); -o-transform: scale(0, 0); transform: scale(0, 0); } } @-webkit-keyframes swashOut { 0% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } 80% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0.9, 0.9); -moz-transform: scale(0.9, 0.9); -ms-transform: scale(0.9, 0.9); -o-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9); } 100% { opacity: 0; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0, 0); -moz-transform: scale(0, 0); -ms-transform: scale(0, 0); -o-transform: scale(0, 0); transform: scale(0, 0); } } @-o-keyframes swashOut { 0% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } 80% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0.9, 0.9); -moz-transform: scale(0.9, 0.9); -ms-transform: scale(0.9, 0.9); -o-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9); } 100% { opacity: 0; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0, 0); -moz-transform: scale(0, 0); -ms-transform: scale(0, 0); -o-transform: scale(0, 0); transform: scale(0, 0); } } @-ms-keyframes swashOut { 0% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } 80% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0.9, 0.9); -moz-transform: scale(0.9, 0.9); -ms-transform: scale(0.9, 0.9); -o-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9); } 100% { opacity: 0; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0, 0); -moz-transform: scale(0, 0); -ms-transform: scale(0, 0); -o-transform: scale(0, 0); transform: scale(0, 0); } } @keyframes swashOut { 0% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } 80% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0.9, 0.9); -moz-transform: scale(0.9, 0.9); -ms-transform: scale(0.9, 0.9); -o-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9); } 100% { opacity: 0; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0, 0); -moz-transform: scale(0, 0); -ms-transform: scale(0, 0); -o-transform: scale(0, 0); transform: scale(0, 0); } } @-moz-keyframes swashIn { 0% { opacity: 0; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0, 0); -moz-transform: scale(0, 0); -ms-transform: scale(0, 0); -o-transform: scale(0, 0); transform: scale(0, 0); } 90% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0.9, 0.9); -moz-transform: scale(0.9, 0.9); -ms-transform: scale(0.9, 0.9); -o-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9); } 100% { -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } } @-webkit-keyframes swashIn { 0% { opacity: 0; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0, 0); -moz-transform: scale(0, 0); -ms-transform: scale(0, 0); -o-transform: scale(0, 0); transform: scale(0, 0); } 90% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0.9, 0.9); -moz-transform: scale(0.9, 0.9); -ms-transform: scale(0.9, 0.9); -o-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9); } 100% { -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } } @-o-keyframes swashIn { 0% { opacity: 0; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0, 0); -moz-transform: scale(0, 0); -ms-transform: scale(0, 0); -o-transform: scale(0, 0); transform: scale(0, 0); } 90% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0.9, 0.9); -moz-transform: scale(0.9, 0.9); -ms-transform: scale(0.9, 0.9); -o-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9); } 100% { -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } } @-ms-keyframes swashIn { 0% { opacity: 0; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0, 0); -moz-transform: scale(0, 0); -ms-transform: scale(0, 0); -o-transform: scale(0, 0); transform: scale(0, 0); } 90% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0.9, 0.9); -moz-transform: scale(0.9, 0.9); -ms-transform: scale(0.9, 0.9); -o-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9); } 100% { -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } } @keyframes swashIn { 0% { opacity: 0; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0, 0); -moz-transform: scale(0, 0); -ms-transform: scale(0, 0); -o-transform: scale(0, 0); transform: scale(0, 0); } 90% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0.9, 0.9); -moz-transform: scale(0.9, 0.9); -ms-transform: scale(0.9, 0.9); -o-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9); } 100% { -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } } @-moz-keyframes foolishOut { 0% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1) rotate(360deg); -moz-transform: scale(1, 1) rotate(360deg); -ms-transform: scale(1, 1) rotate(360deg); -o-transform: scale(1, 1) rotate(360deg); transform: scale(1, 1) rotate(360deg); } 20% { opacity: 1; -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); -moz-transform: scale(0.5, 0.5) rotate(0deg); -ms-transform: scale(0.5, 0.5) rotate(0deg); -o-transform: scale(0.5, 0.5) rotate(0deg); transform: scale(0.5, 0.5) rotate(0deg); } 40% { opacity: 1; -webkit-transform-origin: 100% 0%; -moz-transform-origin: 100% 0%; -ms-transform-origin: 100% 0%; -o-transform-origin: 100% 0%; transform-origin: 100% 0%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); -moz-transform: scale(0.5, 0.5) rotate(0deg); -ms-transform: scale(0.5, 0.5) rotate(0deg); -o-transform: scale(0.5, 0.5) rotate(0deg); transform: scale(0.5, 0.5) rotate(0deg); } 60% { opacity: 1; -webkit-transform-origin: 0%; -moz-transform-origin: 0%; -ms-transform-origin: 0%; -o-transform-origin: 0%; transform-origin: 0%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); -moz-transform: scale(0.5, 0.5) rotate(0deg); -ms-transform: scale(0.5, 0.5) rotate(0deg); -o-transform: scale(0.5, 0.5) rotate(0deg); transform: scale(0.5, 0.5) rotate(0deg); } 80% { opacity: 1; -webkit-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; -o-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); -moz-transform: scale(0.5, 0.5) rotate(0deg); -ms-transform: scale(0.5, 0.5) rotate(0deg); -o-transform: scale(0.5, 0.5) rotate(0deg); transform: scale(0.5, 0.5) rotate(0deg); } 100% { opacity: 0; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0, 0) rotate(0deg); -moz-transform: scale(0, 0) rotate(0deg); -ms-transform: scale(0, 0) rotate(0deg); -o-transform: scale(0, 0) rotate(0deg); transform: scale(0, 0) rotate(0deg); } } @-webkit-keyframes foolishOut { 0% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1) rotate(360deg); -moz-transform: scale(1, 1) rotate(360deg); -ms-transform: scale(1, 1) rotate(360deg); -o-transform: scale(1, 1) rotate(360deg); transform: scale(1, 1) rotate(360deg); } 20% { opacity: 1; -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); -moz-transform: scale(0.5, 0.5) rotate(0deg); -ms-transform: scale(0.5, 0.5) rotate(0deg); -o-transform: scale(0.5, 0.5) rotate(0deg); transform: scale(0.5, 0.5) rotate(0deg); } 40% { opacity: 1; -webkit-transform-origin: 100% 0%; -moz-transform-origin: 100% 0%; -ms-transform-origin: 100% 0%; -o-transform-origin: 100% 0%; transform-origin: 100% 0%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); -moz-transform: scale(0.5, 0.5) rotate(0deg); -ms-transform: scale(0.5, 0.5) rotate(0deg); -o-transform: scale(0.5, 0.5) rotate(0deg); transform: scale(0.5, 0.5) rotate(0deg); } 60% { opacity: 1; -webkit-transform-origin: 0%; -moz-transform-origin: 0%; -ms-transform-origin: 0%; -o-transform-origin: 0%; transform-origin: 0%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); -moz-transform: scale(0.5, 0.5) rotate(0deg); -ms-transform: scale(0.5, 0.5) rotate(0deg); -o-transform: scale(0.5, 0.5) rotate(0deg); transform: scale(0.5, 0.5) rotate(0deg); } 80% { opacity: 1; -webkit-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; -o-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); -moz-transform: scale(0.5, 0.5) rotate(0deg); -ms-transform: scale(0.5, 0.5) rotate(0deg); -o-transform: scale(0.5, 0.5) rotate(0deg); transform: scale(0.5, 0.5) rotate(0deg); } 100% { opacity: 0; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0, 0) rotate(0deg); -moz-transform: scale(0, 0) rotate(0deg); -ms-transform: scale(0, 0) rotate(0deg); -o-transform: scale(0, 0) rotate(0deg); transform: scale(0, 0) rotate(0deg); } } @-o-keyframes foolishOut { 0% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1) rotate(360deg); -moz-transform: scale(1, 1) rotate(360deg); -ms-transform: scale(1, 1) rotate(360deg); -o-transform: scale(1, 1) rotate(360deg); transform: scale(1, 1) rotate(360deg); } 20% { opacity: 1; -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); -moz-transform: scale(0.5, 0.5) rotate(0deg); -ms-transform: scale(0.5, 0.5) rotate(0deg); -o-transform: scale(0.5, 0.5) rotate(0deg); transform: scale(0.5, 0.5) rotate(0deg); } 40% { opacity: 1; -webkit-transform-origin: 100% 0%; -moz-transform-origin: 100% 0%; -ms-transform-origin: 100% 0%; -o-transform-origin: 100% 0%; transform-origin: 100% 0%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); -moz-transform: scale(0.5, 0.5) rotate(0deg); -ms-transform: scale(0.5, 0.5) rotate(0deg); -o-transform: scale(0.5, 0.5) rotate(0deg); transform: scale(0.5, 0.5) rotate(0deg); } 60% { opacity: 1; -webkit-transform-origin: 0%; -moz-transform-origin: 0%; -ms-transform-origin: 0%; -o-transform-origin: 0%; transform-origin: 0%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); -moz-transform: scale(0.5, 0.5) rotate(0deg); -ms-transform: scale(0.5, 0.5) rotate(0deg); -o-transform: scale(0.5, 0.5) rotate(0deg); transform: scale(0.5, 0.5) rotate(0deg); } 80% { opacity: 1; -webkit-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; -o-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); -moz-transform: scale(0.5, 0.5) rotate(0deg); -ms-transform: scale(0.5, 0.5) rotate(0deg); -o-transform: scale(0.5, 0.5) rotate(0deg); transform: scale(0.5, 0.5) rotate(0deg); } 100% { opacity: 0; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0, 0) rotate(0deg); -moz-transform: scale(0, 0) rotate(0deg); -ms-transform: scale(0, 0) rotate(0deg); -o-transform: scale(0, 0) rotate(0deg); transform: scale(0, 0) rotate(0deg); } } @-ms-keyframes foolishOut { 0% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1) rotate(360deg); -moz-transform: scale(1, 1) rotate(360deg); -ms-transform: scale(1, 1) rotate(360deg); -o-transform: scale(1, 1) rotate(360deg); transform: scale(1, 1) rotate(360deg); } 20% { opacity: 1; -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); -moz-transform: scale(0.5, 0.5) rotate(0deg); -ms-transform: scale(0.5, 0.5) rotate(0deg); -o-transform: scale(0.5, 0.5) rotate(0deg); transform: scale(0.5, 0.5) rotate(0deg); } 40% { opacity: 1; -webkit-transform-origin: 100% 0%; -moz-transform-origin: 100% 0%; -ms-transform-origin: 100% 0%; -o-transform-origin: 100% 0%; transform-origin: 100% 0%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); -moz-transform: scale(0.5, 0.5) rotate(0deg); -ms-transform: scale(0.5, 0.5) rotate(0deg); -o-transform: scale(0.5, 0.5) rotate(0deg); transform: scale(0.5, 0.5) rotate(0deg); } 60% { opacity: 1; -webkit-transform-origin: 0%; -moz-transform-origin: 0%; -ms-transform-origin: 0%; -o-transform-origin: 0%; transform-origin: 0%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); -moz-transform: scale(0.5, 0.5) rotate(0deg); -ms-transform: scale(0.5, 0.5) rotate(0deg); -o-transform: scale(0.5, 0.5) rotate(0deg); transform: scale(0.5, 0.5) rotate(0deg); } 80% { opacity: 1; -webkit-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; -o-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); -moz-transform: scale(0.5, 0.5) rotate(0deg); -ms-transform: scale(0.5, 0.5) rotate(0deg); -o-transform: scale(0.5, 0.5) rotate(0deg); transform: scale(0.5, 0.5) rotate(0deg); } 100% { opacity: 0; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0, 0) rotate(0deg); -moz-transform: scale(0, 0) rotate(0deg); -ms-transform: scale(0, 0) rotate(0deg); -o-transform: scale(0, 0) rotate(0deg); transform: scale(0, 0) rotate(0deg); } } @keyframes foolishOut { 0% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1) rotate(360deg); -moz-transform: scale(1, 1) rotate(360deg); -ms-transform: scale(1, 1) rotate(360deg); -o-transform: scale(1, 1) rotate(360deg); transform: scale(1, 1) rotate(360deg); } 20% { opacity: 1; -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); -moz-transform: scale(0.5, 0.5) rotate(0deg); -ms-transform: scale(0.5, 0.5) rotate(0deg); -o-transform: scale(0.5, 0.5) rotate(0deg); transform: scale(0.5, 0.5) rotate(0deg); } 40% { opacity: 1; -webkit-transform-origin: 100% 0%; -moz-transform-origin: 100% 0%; -ms-transform-origin: 100% 0%; -o-transform-origin: 100% 0%; transform-origin: 100% 0%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); -moz-transform: scale(0.5, 0.5) rotate(0deg); -ms-transform: scale(0.5, 0.5) rotate(0deg); -o-transform: scale(0.5, 0.5) rotate(0deg); transform: scale(0.5, 0.5) rotate(0deg); } 60% { opacity: 1; -webkit-transform-origin: 0%; -moz-transform-origin: 0%; -ms-transform-origin: 0%; -o-transform-origin: 0%; transform-origin: 0%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); -moz-transform: scale(0.5, 0.5) rotate(0deg); -ms-transform: scale(0.5, 0.5) rotate(0deg); -o-transform: scale(0.5, 0.5) rotate(0deg); transform: scale(0.5, 0.5) rotate(0deg); } 80% { opacity: 1; -webkit-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; -o-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); -moz-transform: scale(0.5, 0.5) rotate(0deg); -ms-transform: scale(0.5, 0.5) rotate(0deg); -o-transform: scale(0.5, 0.5) rotate(0deg); transform: scale(0.5, 0.5) rotate(0deg); } 100% { opacity: 0; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0, 0) rotate(0deg); -moz-transform: scale(0, 0) rotate(0deg); -ms-transform: scale(0, 0) rotate(0deg); -o-transform: scale(0, 0) rotate(0deg); transform: scale(0, 0) rotate(0deg); } } @-moz-keyframes foolishIn { 0% { opacity: 0; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0, 0) rotate(360deg); -moz-transform: scale(0, 0) rotate(360deg); -ms-transform: scale(0, 0) rotate(360deg); -o-transform: scale(0, 0) rotate(360deg); transform: scale(0, 0) rotate(360deg); } 20% { opacity: 1; -webkit-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; -o-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); -moz-transform: scale(0.5, 0.5) rotate(0deg); -ms-transform: scale(0.5, 0.5) rotate(0deg); -o-transform: scale(0.5, 0.5) rotate(0deg); transform: scale(0.5, 0.5) rotate(0deg); } 40% { opacity: 1; -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); -moz-transform: scale(0.5, 0.5) rotate(0deg); -ms-transform: scale(0.5, 0.5) rotate(0deg); -o-transform: scale(0.5, 0.5) rotate(0deg); transform: scale(0.5, 0.5) rotate(0deg); } 60% { opacity: 1; -webkit-transform-origin: 0%; -moz-transform-origin: 0%; -ms-transform-origin: 0%; -o-transform-origin: 0%; transform-origin: 0%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); -moz-transform: scale(0.5, 0.5) rotate(0deg); -ms-transform: scale(0.5, 0.5) rotate(0deg); -o-transform: scale(0.5, 0.5) rotate(0deg); transform: scale(0.5, 0.5) rotate(0deg); } 80% { opacity: 1; -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); -moz-transform: scale(0.5, 0.5) rotate(0deg); -ms-transform: scale(0.5, 0.5) rotate(0deg); -o-transform: scale(0.5, 0.5) rotate(0deg); transform: scale(0.5, 0.5) rotate(0deg); } 100% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1) rotate(0deg); -moz-transform: scale(1, 1) rotate(0deg); -ms-transform: scale(1, 1) rotate(0deg); -o-transform: scale(1, 1) rotate(0deg); transform: scale(1, 1) rotate(0deg); } } @-webkit-keyframes foolishIn { 0% { opacity: 0; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0, 0) rotate(360deg); -moz-transform: scale(0, 0) rotate(360deg); -ms-transform: scale(0, 0) rotate(360deg); -o-transform: scale(0, 0) rotate(360deg); transform: scale(0, 0) rotate(360deg); } 20% { opacity: 1; -webkit-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; -o-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); -moz-transform: scale(0.5, 0.5) rotate(0deg); -ms-transform: scale(0.5, 0.5) rotate(0deg); -o-transform: scale(0.5, 0.5) rotate(0deg); transform: scale(0.5, 0.5) rotate(0deg); } 40% { opacity: 1; -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); -moz-transform: scale(0.5, 0.5) rotate(0deg); -ms-transform: scale(0.5, 0.5) rotate(0deg); -o-transform: scale(0.5, 0.5) rotate(0deg); transform: scale(0.5, 0.5) rotate(0deg); } 60% { opacity: 1; -webkit-transform-origin: 0%; -moz-transform-origin: 0%; -ms-transform-origin: 0%; -o-transform-origin: 0%; transform-origin: 0%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); -moz-transform: scale(0.5, 0.5) rotate(0deg); -ms-transform: scale(0.5, 0.5) rotate(0deg); -o-transform: scale(0.5, 0.5) rotate(0deg); transform: scale(0.5, 0.5) rotate(0deg); } 80% { opacity: 1; -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); -moz-transform: scale(0.5, 0.5) rotate(0deg); -ms-transform: scale(0.5, 0.5) rotate(0deg); -o-transform: scale(0.5, 0.5) rotate(0deg); transform: scale(0.5, 0.5) rotate(0deg); } 100% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1) rotate(0deg); -moz-transform: scale(1, 1) rotate(0deg); -ms-transform: scale(1, 1) rotate(0deg); -o-transform: scale(1, 1) rotate(0deg); transform: scale(1, 1) rotate(0deg); } } @-o-keyframes foolishIn { 0% { opacity: 0; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0, 0) rotate(360deg); -moz-transform: scale(0, 0) rotate(360deg); -ms-transform: scale(0, 0) rotate(360deg); -o-transform: scale(0, 0) rotate(360deg); transform: scale(0, 0) rotate(360deg); } 20% { opacity: 1; -webkit-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; -o-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); -moz-transform: scale(0.5, 0.5) rotate(0deg); -ms-transform: scale(0.5, 0.5) rotate(0deg); -o-transform: scale(0.5, 0.5) rotate(0deg); transform: scale(0.5, 0.5) rotate(0deg); } 40% { opacity: 1; -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); -moz-transform: scale(0.5, 0.5) rotate(0deg); -ms-transform: scale(0.5, 0.5) rotate(0deg); -o-transform: scale(0.5, 0.5) rotate(0deg); transform: scale(0.5, 0.5) rotate(0deg); } 60% { opacity: 1; -webkit-transform-origin: 0%; -moz-transform-origin: 0%; -ms-transform-origin: 0%; -o-transform-origin: 0%; transform-origin: 0%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); -moz-transform: scale(0.5, 0.5) rotate(0deg); -ms-transform: scale(0.5, 0.5) rotate(0deg); -o-transform: scale(0.5, 0.5) rotate(0deg); transform: scale(0.5, 0.5) rotate(0deg); } 80% { opacity: 1; -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); -moz-transform: scale(0.5, 0.5) rotate(0deg); -ms-transform: scale(0.5, 0.5) rotate(0deg); -o-transform: scale(0.5, 0.5) rotate(0deg); transform: scale(0.5, 0.5) rotate(0deg); } 100% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1) rotate(0deg); -moz-transform: scale(1, 1) rotate(0deg); -ms-transform: scale(1, 1) rotate(0deg); -o-transform: scale(1, 1) rotate(0deg); transform: scale(1, 1) rotate(0deg); } } @-ms-keyframes foolishIn { 0% { opacity: 0; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0, 0) rotate(360deg); -moz-transform: scale(0, 0) rotate(360deg); -ms-transform: scale(0, 0) rotate(360deg); -o-transform: scale(0, 0) rotate(360deg); transform: scale(0, 0) rotate(360deg); } 20% { opacity: 1; -webkit-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; -o-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); -moz-transform: scale(0.5, 0.5) rotate(0deg); -ms-transform: scale(0.5, 0.5) rotate(0deg); -o-transform: scale(0.5, 0.5) rotate(0deg); transform: scale(0.5, 0.5) rotate(0deg); } 40% { opacity: 1; -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); -moz-transform: scale(0.5, 0.5) rotate(0deg); -ms-transform: scale(0.5, 0.5) rotate(0deg); -o-transform: scale(0.5, 0.5) rotate(0deg); transform: scale(0.5, 0.5) rotate(0deg); } 60% { opacity: 1; -webkit-transform-origin: 0%; -moz-transform-origin: 0%; -ms-transform-origin: 0%; -o-transform-origin: 0%; transform-origin: 0%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); -moz-transform: scale(0.5, 0.5) rotate(0deg); -ms-transform: scale(0.5, 0.5) rotate(0deg); -o-transform: scale(0.5, 0.5) rotate(0deg); transform: scale(0.5, 0.5) rotate(0deg); } 80% { opacity: 1; -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); -moz-transform: scale(0.5, 0.5) rotate(0deg); -ms-transform: scale(0.5, 0.5) rotate(0deg); -o-transform: scale(0.5, 0.5) rotate(0deg); transform: scale(0.5, 0.5) rotate(0deg); } 100% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1) rotate(0deg); -moz-transform: scale(1, 1) rotate(0deg); -ms-transform: scale(1, 1) rotate(0deg); -o-transform: scale(1, 1) rotate(0deg); transform: scale(1, 1) rotate(0deg); } } @keyframes foolishIn { 0% { opacity: 0; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0, 0) rotate(360deg); -moz-transform: scale(0, 0) rotate(360deg); -ms-transform: scale(0, 0) rotate(360deg); -o-transform: scale(0, 0) rotate(360deg); transform: scale(0, 0) rotate(360deg); } 20% { opacity: 1; -webkit-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; -o-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); -moz-transform: scale(0.5, 0.5) rotate(0deg); -ms-transform: scale(0.5, 0.5) rotate(0deg); -o-transform: scale(0.5, 0.5) rotate(0deg); transform: scale(0.5, 0.5) rotate(0deg); } 40% { opacity: 1; -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); -moz-transform: scale(0.5, 0.5) rotate(0deg); -ms-transform: scale(0.5, 0.5) rotate(0deg); -o-transform: scale(0.5, 0.5) rotate(0deg); transform: scale(0.5, 0.5) rotate(0deg); } 60% { opacity: 1; -webkit-transform-origin: 0%; -moz-transform-origin: 0%; -ms-transform-origin: 0%; -o-transform-origin: 0%; transform-origin: 0%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); -moz-transform: scale(0.5, 0.5) rotate(0deg); -ms-transform: scale(0.5, 0.5) rotate(0deg); -o-transform: scale(0.5, 0.5) rotate(0deg); transform: scale(0.5, 0.5) rotate(0deg); } 80% { opacity: 1; -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); -moz-transform: scale(0.5, 0.5) rotate(0deg); -ms-transform: scale(0.5, 0.5) rotate(0deg); -o-transform: scale(0.5, 0.5) rotate(0deg); transform: scale(0.5, 0.5) rotate(0deg); } 100% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1) rotate(0deg); -moz-transform: scale(1, 1) rotate(0deg); -ms-transform: scale(1, 1) rotate(0deg); -o-transform: scale(1, 1) rotate(0deg); transform: scale(1, 1) rotate(0deg); } } @-moz-keyframes holeOut { 0% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1) rotateY(0deg); -moz-transform: scale(1, 1) rotateY(0deg); -ms-transform: scale(1, 1) rotateY(0deg); -o-transform: scale(1, 1) rotateY(0deg); transform: scale(1, 1) rotateY(0deg); } 100% { opacity: 0; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0, 0) rotateY(180deg); -moz-transform: scale(0, 0) rotateY(180deg); -ms-transform: scale(0, 0) rotateY(180deg); -o-transform: scale(0, 0) rotateY(180deg); transform: scale(0, 0) rotateY(180deg); } } @-webkit-keyframes holeOut { 0% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1) rotateY(0deg); -moz-transform: scale(1, 1) rotateY(0deg); -ms-transform: scale(1, 1) rotateY(0deg); -o-transform: scale(1, 1) rotateY(0deg); transform: scale(1, 1) rotateY(0deg); } 100% { opacity: 0; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0, 0) rotateY(180deg); -moz-transform: scale(0, 0) rotateY(180deg); -ms-transform: scale(0, 0) rotateY(180deg); -o-transform: scale(0, 0) rotateY(180deg); transform: scale(0, 0) rotateY(180deg); } } @-o-keyframes holeOut { 0% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1) rotateY(0deg); -moz-transform: scale(1, 1) rotateY(0deg); -ms-transform: scale(1, 1) rotateY(0deg); -o-transform: scale(1, 1) rotateY(0deg); transform: scale(1, 1) rotateY(0deg); } 100% { opacity: 0; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0, 0) rotateY(180deg); -moz-transform: scale(0, 0) rotateY(180deg); -ms-transform: scale(0, 0) rotateY(180deg); -o-transform: scale(0, 0) rotateY(180deg); transform: scale(0, 0) rotateY(180deg); } } @-ms-keyframes holeOut { 0% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1) rotateY(0deg); -moz-transform: scale(1, 1) rotateY(0deg); -ms-transform: scale(1, 1) rotateY(0deg); -o-transform: scale(1, 1) rotateY(0deg); transform: scale(1, 1) rotateY(0deg); } 100% { opacity: 0; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0, 0) rotateY(180deg); -moz-transform: scale(0, 0) rotateY(180deg); -ms-transform: scale(0, 0) rotateY(180deg); -o-transform: scale(0, 0) rotateY(180deg); transform: scale(0, 0) rotateY(180deg); } } @keyframes holeOut { 0% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1) rotateY(0deg); -moz-transform: scale(1, 1) rotateY(0deg); -ms-transform: scale(1, 1) rotateY(0deg); -o-transform: scale(1, 1) rotateY(0deg); transform: scale(1, 1) rotateY(0deg); } 100% { opacity: 0; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0, 0) rotateY(180deg); -moz-transform: scale(0, 0) rotateY(180deg); -ms-transform: scale(0, 0) rotateY(180deg); -o-transform: scale(0, 0) rotateY(180deg); transform: scale(0, 0) rotateY(180deg); } } @-moz-keyframes tinRightOut { 0%, 20%, 40%, 50% { opacity: 1; -webkit-transform: scale(1, 1) translateX(0); -moz-transform: scale(1, 1) translateX(0); -ms-transform: scale(1, 1) translateX(0); -o-transform: scale(1, 1) translateX(0); transform: scale(1, 1) translateX(0); } 10%, 30% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateX(0); -moz-transform: scale(1.1, 1.1) translateX(0); -ms-transform: scale(1.1, 1.1) translateX(0); -o-transform: scale(1.1, 1.1) translateX(0); transform: scale(1.1, 1.1) translateX(0); } 100% { opacity: 0; -webkit-transform: scale(1, 1) translateX(900%); -moz-transform: scale(1, 1) translateX(900%); -ms-transform: scale(1, 1) translateX(900%); -o-transform: scale(1, 1) translateX(900%); transform: scale(1, 1) translateX(900%); } } @-webkit-keyframes tinRightOut { 0%, 20%, 40%, 50% { opacity: 1; -webkit-transform: scale(1, 1) translateX(0); -moz-transform: scale(1, 1) translateX(0); -ms-transform: scale(1, 1) translateX(0); -o-transform: scale(1, 1) translateX(0); transform: scale(1, 1) translateX(0); } 10%, 30% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateX(0); -moz-transform: scale(1.1, 1.1) translateX(0); -ms-transform: scale(1.1, 1.1) translateX(0); -o-transform: scale(1.1, 1.1) translateX(0); transform: scale(1.1, 1.1) translateX(0); } 100% { opacity: 0; -webkit-transform: scale(1, 1) translateX(900%); -moz-transform: scale(1, 1) translateX(900%); -ms-transform: scale(1, 1) translateX(900%); -o-transform: scale(1, 1) translateX(900%); transform: scale(1, 1) translateX(900%); } } @-o-keyframes tinRightOut { 0%, 20%, 40%, 50% { opacity: 1; -webkit-transform: scale(1, 1) translateX(0); -moz-transform: scale(1, 1) translateX(0); -ms-transform: scale(1, 1) translateX(0); -o-transform: scale(1, 1) translateX(0); transform: scale(1, 1) translateX(0); } 10%, 30% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateX(0); -moz-transform: scale(1.1, 1.1) translateX(0); -ms-transform: scale(1.1, 1.1) translateX(0); -o-transform: scale(1.1, 1.1) translateX(0); transform: scale(1.1, 1.1) translateX(0); } 100% { opacity: 0; -webkit-transform: scale(1, 1) translateX(900%); -moz-transform: scale(1, 1) translateX(900%); -ms-transform: scale(1, 1) translateX(900%); -o-transform: scale(1, 1) translateX(900%); transform: scale(1, 1) translateX(900%); } } @-ms-keyframes tinRightOut { 0%, 20%, 40%, 50% { opacity: 1; -webkit-transform: scale(1, 1) translateX(0); -moz-transform: scale(1, 1) translateX(0); -ms-transform: scale(1, 1) translateX(0); -o-transform: scale(1, 1) translateX(0); transform: scale(1, 1) translateX(0); } 10%, 30% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateX(0); -moz-transform: scale(1.1, 1.1) translateX(0); -ms-transform: scale(1.1, 1.1) translateX(0); -o-transform: scale(1.1, 1.1) translateX(0); transform: scale(1.1, 1.1) translateX(0); } 100% { opacity: 0; -webkit-transform: scale(1, 1) translateX(900%); -moz-transform: scale(1, 1) translateX(900%); -ms-transform: scale(1, 1) translateX(900%); -o-transform: scale(1, 1) translateX(900%); transform: scale(1, 1) translateX(900%); } } @keyframes tinRightOut { 0%, 20%, 40%, 50% { opacity: 1; -webkit-transform: scale(1, 1) translateX(0); -moz-transform: scale(1, 1) translateX(0); -ms-transform: scale(1, 1) translateX(0); -o-transform: scale(1, 1) translateX(0); transform: scale(1, 1) translateX(0); } 10%, 30% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateX(0); -moz-transform: scale(1.1, 1.1) translateX(0); -ms-transform: scale(1.1, 1.1) translateX(0); -o-transform: scale(1.1, 1.1) translateX(0); transform: scale(1.1, 1.1) translateX(0); } 100% { opacity: 0; -webkit-transform: scale(1, 1) translateX(900%); -moz-transform: scale(1, 1) translateX(900%); -ms-transform: scale(1, 1) translateX(900%); -o-transform: scale(1, 1) translateX(900%); transform: scale(1, 1) translateX(900%); } } @-moz-keyframes tinLeftOut { 0%, 20%, 40%, 50% { opacity: 1; -webkit-transform: scale(1, 1) translateX(0); -moz-transform: scale(1, 1) translateX(0); -ms-transform: scale(1, 1) translateX(0); -o-transform: scale(1, 1) translateX(0); transform: scale(1, 1) translateX(0); } 10%, 30% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateX(0); -moz-transform: scale(1.1, 1.1) translateX(0); -ms-transform: scale(1.1, 1.1) translateX(0); -o-transform: scale(1.1, 1.1) translateX(0); transform: scale(1.1, 1.1) translateX(0); } 100% { opacity: 0; -webkit-transform: scale(1, 1) translateX(-900%); -moz-transform: scale(1, 1) translateX(-900%); -ms-transform: scale(1, 1) translateX(-900%); -o-transform: scale(1, 1) translateX(-900%); transform: scale(1, 1) translateX(-900%); } } @-webkit-keyframes tinLeftOut { 0%, 20%, 40%, 50% { opacity: 1; -webkit-transform: scale(1, 1) translateX(0); -moz-transform: scale(1, 1) translateX(0); -ms-transform: scale(1, 1) translateX(0); -o-transform: scale(1, 1) translateX(0); transform: scale(1, 1) translateX(0); } 10%, 30% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateX(0); -moz-transform: scale(1.1, 1.1) translateX(0); -ms-transform: scale(1.1, 1.1) translateX(0); -o-transform: scale(1.1, 1.1) translateX(0); transform: scale(1.1, 1.1) translateX(0); } 100% { opacity: 0; -webkit-transform: scale(1, 1) translateX(-900%); -moz-transform: scale(1, 1) translateX(-900%); -ms-transform: scale(1, 1) translateX(-900%); -o-transform: scale(1, 1) translateX(-900%); transform: scale(1, 1) translateX(-900%); } } @-o-keyframes tinLeftOut { 0%, 20%, 40%, 50% { opacity: 1; -webkit-transform: scale(1, 1) translateX(0); -moz-transform: scale(1, 1) translateX(0); -ms-transform: scale(1, 1) translateX(0); -o-transform: scale(1, 1) translateX(0); transform: scale(1, 1) translateX(0); } 10%, 30% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateX(0); -moz-transform: scale(1.1, 1.1) translateX(0); -ms-transform: scale(1.1, 1.1) translateX(0); -o-transform: scale(1.1, 1.1) translateX(0); transform: scale(1.1, 1.1) translateX(0); } 100% { opacity: 0; -webkit-transform: scale(1, 1) translateX(-900%); -moz-transform: scale(1, 1) translateX(-900%); -ms-transform: scale(1, 1) translateX(-900%); -o-transform: scale(1, 1) translateX(-900%); transform: scale(1, 1) translateX(-900%); } } @-ms-keyframes tinLeftOut { 0%, 20%, 40%, 50% { opacity: 1; -webkit-transform: scale(1, 1) translateX(0); -moz-transform: scale(1, 1) translateX(0); -ms-transform: scale(1, 1) translateX(0); -o-transform: scale(1, 1) translateX(0); transform: scale(1, 1) translateX(0); } 10%, 30% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateX(0); -moz-transform: scale(1.1, 1.1) translateX(0); -ms-transform: scale(1.1, 1.1) translateX(0); -o-transform: scale(1.1, 1.1) translateX(0); transform: scale(1.1, 1.1) translateX(0); } 100% { opacity: 0; -webkit-transform: scale(1, 1) translateX(-900%); -moz-transform: scale(1, 1) translateX(-900%); -ms-transform: scale(1, 1) translateX(-900%); -o-transform: scale(1, 1) translateX(-900%); transform: scale(1, 1) translateX(-900%); } } @keyframes tinLeftOut { 0%, 20%, 40%, 50% { opacity: 1; -webkit-transform: scale(1, 1) translateX(0); -moz-transform: scale(1, 1) translateX(0); -ms-transform: scale(1, 1) translateX(0); -o-transform: scale(1, 1) translateX(0); transform: scale(1, 1) translateX(0); } 10%, 30% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateX(0); -moz-transform: scale(1.1, 1.1) translateX(0); -ms-transform: scale(1.1, 1.1) translateX(0); -o-transform: scale(1.1, 1.1) translateX(0); transform: scale(1.1, 1.1) translateX(0); } 100% { opacity: 0; -webkit-transform: scale(1, 1) translateX(-900%); -moz-transform: scale(1, 1) translateX(-900%); -ms-transform: scale(1, 1) translateX(-900%); -o-transform: scale(1, 1) translateX(-900%); transform: scale(1, 1) translateX(-900%); } } @-moz-keyframes tinUpOut { 0%, 20%, 40%, 50% { opacity: 1; -webkit-transform: scale(1, 1) translateY(0); -moz-transform: scale(1, 1) translateY(0); -ms-transform: scale(1, 1) translateY(0); -o-transform: scale(1, 1) translateY(0); transform: scale(1, 1) translateY(0); } 10%, 30% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateY(0); -moz-transform: scale(1.1, 1.1) translateY(0); -ms-transform: scale(1.1, 1.1) translateY(0); -o-transform: scale(1.1, 1.1) translateY(0); transform: scale(1.1, 1.1) translateY(0); } 100% { opacity: 0; -webkit-transform: scale(1, 1) translateY(-900%); -moz-transform: scale(1, 1) translateY(-900%); -ms-transform: scale(1, 1) translateY(-900%); -o-transform: scale(1, 1) translateY(-900%); transform: scale(1, 1) translateY(-900%); } } @-webkit-keyframes tinUpOut { 0%, 20%, 40%, 50% { opacity: 1; -webkit-transform: scale(1, 1) translateY(0); -moz-transform: scale(1, 1) translateY(0); -ms-transform: scale(1, 1) translateY(0); -o-transform: scale(1, 1) translateY(0); transform: scale(1, 1) translateY(0); } 10%, 30% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateY(0); -moz-transform: scale(1.1, 1.1) translateY(0); -ms-transform: scale(1.1, 1.1) translateY(0); -o-transform: scale(1.1, 1.1) translateY(0); transform: scale(1.1, 1.1) translateY(0); } 100% { opacity: 0; -webkit-transform: scale(1, 1) translateY(-900%); -moz-transform: scale(1, 1) translateY(-900%); -ms-transform: scale(1, 1) translateY(-900%); -o-transform: scale(1, 1) translateY(-900%); transform: scale(1, 1) translateY(-900%); } } @-o-keyframes tinUpOut { 0%, 20%, 40%, 50% { opacity: 1; -webkit-transform: scale(1, 1) translateY(0); -moz-transform: scale(1, 1) translateY(0); -ms-transform: scale(1, 1) translateY(0); -o-transform: scale(1, 1) translateY(0); transform: scale(1, 1) translateY(0); } 10%, 30% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateY(0); -moz-transform: scale(1.1, 1.1) translateY(0); -ms-transform: scale(1.1, 1.1) translateY(0); -o-transform: scale(1.1, 1.1) translateY(0); transform: scale(1.1, 1.1) translateY(0); } 100% { opacity: 0; -webkit-transform: scale(1, 1) translateY(-900%); -moz-transform: scale(1, 1) translateY(-900%); -ms-transform: scale(1, 1) translateY(-900%); -o-transform: scale(1, 1) translateY(-900%); transform: scale(1, 1) translateY(-900%); } } @-ms-keyframes tinUpOut { 0%, 20%, 40%, 50% { opacity: 1; -webkit-transform: scale(1, 1) translateY(0); -moz-transform: scale(1, 1) translateY(0); -ms-transform: scale(1, 1) translateY(0); -o-transform: scale(1, 1) translateY(0); transform: scale(1, 1) translateY(0); } 10%, 30% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateY(0); -moz-transform: scale(1.1, 1.1) translateY(0); -ms-transform: scale(1.1, 1.1) translateY(0); -o-transform: scale(1.1, 1.1) translateY(0); transform: scale(1.1, 1.1) translateY(0); } 100% { opacity: 0; -webkit-transform: scale(1, 1) translateY(-900%); -moz-transform: scale(1, 1) translateY(-900%); -ms-transform: scale(1, 1) translateY(-900%); -o-transform: scale(1, 1) translateY(-900%); transform: scale(1, 1) translateY(-900%); } } @keyframes tinUpOut { 0%, 20%, 40%, 50% { opacity: 1; -webkit-transform: scale(1, 1) translateY(0); -moz-transform: scale(1, 1) translateY(0); -ms-transform: scale(1, 1) translateY(0); -o-transform: scale(1, 1) translateY(0); transform: scale(1, 1) translateY(0); } 10%, 30% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateY(0); -moz-transform: scale(1.1, 1.1) translateY(0); -ms-transform: scale(1.1, 1.1) translateY(0); -o-transform: scale(1.1, 1.1) translateY(0); transform: scale(1.1, 1.1) translateY(0); } 100% { opacity: 0; -webkit-transform: scale(1, 1) translateY(-900%); -moz-transform: scale(1, 1) translateY(-900%); -ms-transform: scale(1, 1) translateY(-900%); -o-transform: scale(1, 1) translateY(-900%); transform: scale(1, 1) translateY(-900%); } } @-moz-keyframes tinDownOut { 0%, 20%, 40%, 50% { opacity: 1; -webkit-transform: scale(1, 1) translateY(0); -moz-transform: scale(1, 1) translateY(0); -ms-transform: scale(1, 1) translateY(0); -o-transform: scale(1, 1) translateY(0); transform: scale(1, 1) translateY(0); } 10%, 30% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateY(0); -moz-transform: scale(1.1, 1.1) translateY(0); -ms-transform: scale(1.1, 1.1) translateY(0); -o-transform: scale(1.1, 1.1) translateY(0); transform: scale(1.1, 1.1) translateY(0); } 100% { opacity: 0; -webkit-transform: scale(1, 1) translateY(900%); -moz-transform: scale(1, 1) translateY(900%); -ms-transform: scale(1, 1) translateY(900%); -o-transform: scale(1, 1) translateY(900%); transform: scale(1, 1) translateY(900%); } } @-webkit-keyframes tinDownOut { 0%, 20%, 40%, 50% { opacity: 1; -webkit-transform: scale(1, 1) translateY(0); -moz-transform: scale(1, 1) translateY(0); -ms-transform: scale(1, 1) translateY(0); -o-transform: scale(1, 1) translateY(0); transform: scale(1, 1) translateY(0); } 10%, 30% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateY(0); -moz-transform: scale(1.1, 1.1) translateY(0); -ms-transform: scale(1.1, 1.1) translateY(0); -o-transform: scale(1.1, 1.1) translateY(0); transform: scale(1.1, 1.1) translateY(0); } 100% { opacity: 0; -webkit-transform: scale(1, 1) translateY(900%); -moz-transform: scale(1, 1) translateY(900%); -ms-transform: scale(1, 1) translateY(900%); -o-transform: scale(1, 1) translateY(900%); transform: scale(1, 1) translateY(900%); } } @-o-keyframes tinDownOut { 0%, 20%, 40%, 50% { opacity: 1; -webkit-transform: scale(1, 1) translateY(0); -moz-transform: scale(1, 1) translateY(0); -ms-transform: scale(1, 1) translateY(0); -o-transform: scale(1, 1) translateY(0); transform: scale(1, 1) translateY(0); } 10%, 30% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateY(0); -moz-transform: scale(1.1, 1.1) translateY(0); -ms-transform: scale(1.1, 1.1) translateY(0); -o-transform: scale(1.1, 1.1) translateY(0); transform: scale(1.1, 1.1) translateY(0); } 100% { opacity: 0; -webkit-transform: scale(1, 1) translateY(900%); -moz-transform: scale(1, 1) translateY(900%); -ms-transform: scale(1, 1) translateY(900%); -o-transform: scale(1, 1) translateY(900%); transform: scale(1, 1) translateY(900%); } } @-ms-keyframes tinDownOut { 0%, 20%, 40%, 50% { opacity: 1; -webkit-transform: scale(1, 1) translateY(0); -moz-transform: scale(1, 1) translateY(0); -ms-transform: scale(1, 1) translateY(0); -o-transform: scale(1, 1) translateY(0); transform: scale(1, 1) translateY(0); } 10%, 30% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateY(0); -moz-transform: scale(1.1, 1.1) translateY(0); -ms-transform: scale(1.1, 1.1) translateY(0); -o-transform: scale(1.1, 1.1) translateY(0); transform: scale(1.1, 1.1) translateY(0); } 100% { opacity: 0; -webkit-transform: scale(1, 1) translateY(900%); -moz-transform: scale(1, 1) translateY(900%); -ms-transform: scale(1, 1) translateY(900%); -o-transform: scale(1, 1) translateY(900%); transform: scale(1, 1) translateY(900%); } } @keyframes tinDownOut { 0%, 20%, 40%, 50% { opacity: 1; -webkit-transform: scale(1, 1) translateY(0); -moz-transform: scale(1, 1) translateY(0); -ms-transform: scale(1, 1) translateY(0); -o-transform: scale(1, 1) translateY(0); transform: scale(1, 1) translateY(0); } 10%, 30% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateY(0); -moz-transform: scale(1.1, 1.1) translateY(0); -ms-transform: scale(1.1, 1.1) translateY(0); -o-transform: scale(1.1, 1.1) translateY(0); transform: scale(1.1, 1.1) translateY(0); } 100% { opacity: 0; -webkit-transform: scale(1, 1) translateY(900%); -moz-transform: scale(1, 1) translateY(900%); -ms-transform: scale(1, 1) translateY(900%); -o-transform: scale(1, 1) translateY(900%); transform: scale(1, 1) translateY(900%); } } @-moz-keyframes tinRightIn { 0% { opacity: 0; -webkit-transform: scale(1, 1) translateX(900%); -moz-transform: scale(1, 1) translateX(900%); -ms-transform: scale(1, 1) translateX(900%); -o-transform: scale(1, 1) translateX(900%); transform: scale(1, 1) translateX(900%); } 50%, 70%, 90% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateX(0); -moz-transform: scale(1.1, 1.1) translateX(0); -ms-transform: scale(1.1, 1.1) translateX(0); -o-transform: scale(1.1, 1.1) translateX(0); transform: scale(1.1, 1.1) translateX(0); } 60%, 80%, 100% { opacity: 1; -webkit-transform: scale(1, 1) translateX(0); -moz-transform: scale(1, 1) translateX(0); -ms-transform: scale(1, 1) translateX(0); -o-transform: scale(1, 1) translateX(0); transform: scale(1, 1) translateX(0); } } @-webkit-keyframes tinRightIn { 0% { opacity: 0; -webkit-transform: scale(1, 1) translateX(900%); -moz-transform: scale(1, 1) translateX(900%); -ms-transform: scale(1, 1) translateX(900%); -o-transform: scale(1, 1) translateX(900%); transform: scale(1, 1) translateX(900%); } 50%, 70%, 90% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateX(0); -moz-transform: scale(1.1, 1.1) translateX(0); -ms-transform: scale(1.1, 1.1) translateX(0); -o-transform: scale(1.1, 1.1) translateX(0); transform: scale(1.1, 1.1) translateX(0); } 60%, 80%, 100% { opacity: 1; -webkit-transform: scale(1, 1) translateX(0); -moz-transform: scale(1, 1) translateX(0); -ms-transform: scale(1, 1) translateX(0); -o-transform: scale(1, 1) translateX(0); transform: scale(1, 1) translateX(0); } } @-o-keyframes tinRightIn { 0% { opacity: 0; -webkit-transform: scale(1, 1) translateX(900%); -moz-transform: scale(1, 1) translateX(900%); -ms-transform: scale(1, 1) translateX(900%); -o-transform: scale(1, 1) translateX(900%); transform: scale(1, 1) translateX(900%); } 50%, 70%, 90% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateX(0); -moz-transform: scale(1.1, 1.1) translateX(0); -ms-transform: scale(1.1, 1.1) translateX(0); -o-transform: scale(1.1, 1.1) translateX(0); transform: scale(1.1, 1.1) translateX(0); } 60%, 80%, 100% { opacity: 1; -webkit-transform: scale(1, 1) translateX(0); -moz-transform: scale(1, 1) translateX(0); -ms-transform: scale(1, 1) translateX(0); -o-transform: scale(1, 1) translateX(0); transform: scale(1, 1) translateX(0); } } @-ms-keyframes tinRightIn { 0% { opacity: 0; -webkit-transform: scale(1, 1) translateX(900%); -moz-transform: scale(1, 1) translateX(900%); -ms-transform: scale(1, 1) translateX(900%); -o-transform: scale(1, 1) translateX(900%); transform: scale(1, 1) translateX(900%); } 50%, 70%, 90% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateX(0); -moz-transform: scale(1.1, 1.1) translateX(0); -ms-transform: scale(1.1, 1.1) translateX(0); -o-transform: scale(1.1, 1.1) translateX(0); transform: scale(1.1, 1.1) translateX(0); } 60%, 80%, 100% { opacity: 1; -webkit-transform: scale(1, 1) translateX(0); -moz-transform: scale(1, 1) translateX(0); -ms-transform: scale(1, 1) translateX(0); -o-transform: scale(1, 1) translateX(0); transform: scale(1, 1) translateX(0); } } @keyframes tinRightIn { 0% { opacity: 0; -webkit-transform: scale(1, 1) translateX(900%); -moz-transform: scale(1, 1) translateX(900%); -ms-transform: scale(1, 1) translateX(900%); -o-transform: scale(1, 1) translateX(900%); transform: scale(1, 1) translateX(900%); } 50%, 70%, 90% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateX(0); -moz-transform: scale(1.1, 1.1) translateX(0); -ms-transform: scale(1.1, 1.1) translateX(0); -o-transform: scale(1.1, 1.1) translateX(0); transform: scale(1.1, 1.1) translateX(0); } 60%, 80%, 100% { opacity: 1; -webkit-transform: scale(1, 1) translateX(0); -moz-transform: scale(1, 1) translateX(0); -ms-transform: scale(1, 1) translateX(0); -o-transform: scale(1, 1) translateX(0); transform: scale(1, 1) translateX(0); } } @-moz-keyframes tinLeftIn { 0% { opacity: 0; -webkit-transform: scale(1, 1) translateX(-900%); -moz-transform: scale(1, 1) translateX(-900%); -ms-transform: scale(1, 1) translateX(-900%); -o-transform: scale(1, 1) translateX(-900%); transform: scale(1, 1) translateX(-900%); } 50%, 70%, 90% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateX(0); -moz-transform: scale(1.1, 1.1) translateX(0); -ms-transform: scale(1.1, 1.1) translateX(0); -o-transform: scale(1.1, 1.1) translateX(0); transform: scale(1.1, 1.1) translateX(0); } 60%, 80%, 100% { opacity: 1; -webkit-transform: scale(1, 1) translateX(0); -moz-transform: scale(1, 1) translateX(0); -ms-transform: scale(1, 1) translateX(0); -o-transform: scale(1, 1) translateX(0); transform: scale(1, 1) translateX(0); } } @-webkit-keyframes tinLeftIn { 0% { opacity: 0; -webkit-transform: scale(1, 1) translateX(-900%); -moz-transform: scale(1, 1) translateX(-900%); -ms-transform: scale(1, 1) translateX(-900%); -o-transform: scale(1, 1) translateX(-900%); transform: scale(1, 1) translateX(-900%); } 50%, 70%, 90% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateX(0); -moz-transform: scale(1.1, 1.1) translateX(0); -ms-transform: scale(1.1, 1.1) translateX(0); -o-transform: scale(1.1, 1.1) translateX(0); transform: scale(1.1, 1.1) translateX(0); } 60%, 80%, 100% { opacity: 1; -webkit-transform: scale(1, 1) translateX(0); -moz-transform: scale(1, 1) translateX(0); -ms-transform: scale(1, 1) translateX(0); -o-transform: scale(1, 1) translateX(0); transform: scale(1, 1) translateX(0); } } @-o-keyframes tinLeftIn { 0% { opacity: 0; -webkit-transform: scale(1, 1) translateX(-900%); -moz-transform: scale(1, 1) translateX(-900%); -ms-transform: scale(1, 1) translateX(-900%); -o-transform: scale(1, 1) translateX(-900%); transform: scale(1, 1) translateX(-900%); } 50%, 70%, 90% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateX(0); -moz-transform: scale(1.1, 1.1) translateX(0); -ms-transform: scale(1.1, 1.1) translateX(0); -o-transform: scale(1.1, 1.1) translateX(0); transform: scale(1.1, 1.1) translateX(0); } 60%, 80%, 100% { opacity: 1; -webkit-transform: scale(1, 1) translateX(0); -moz-transform: scale(1, 1) translateX(0); -ms-transform: scale(1, 1) translateX(0); -o-transform: scale(1, 1) translateX(0); transform: scale(1, 1) translateX(0); } } @-ms-keyframes tinLeftIn { 0% { opacity: 0; -webkit-transform: scale(1, 1) translateX(-900%); -moz-transform: scale(1, 1) translateX(-900%); -ms-transform: scale(1, 1) translateX(-900%); -o-transform: scale(1, 1) translateX(-900%); transform: scale(1, 1) translateX(-900%); } 50%, 70%, 90% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateX(0); -moz-transform: scale(1.1, 1.1) translateX(0); -ms-transform: scale(1.1, 1.1) translateX(0); -o-transform: scale(1.1, 1.1) translateX(0); transform: scale(1.1, 1.1) translateX(0); } 60%, 80%, 100% { opacity: 1; -webkit-transform: scale(1, 1) translateX(0); -moz-transform: scale(1, 1) translateX(0); -ms-transform: scale(1, 1) translateX(0); -o-transform: scale(1, 1) translateX(0); transform: scale(1, 1) translateX(0); } } @keyframes tinLeftIn { 0% { opacity: 0; -webkit-transform: scale(1, 1) translateX(-900%); -moz-transform: scale(1, 1) translateX(-900%); -ms-transform: scale(1, 1) translateX(-900%); -o-transform: scale(1, 1) translateX(-900%); transform: scale(1, 1) translateX(-900%); } 50%, 70%, 90% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateX(0); -moz-transform: scale(1.1, 1.1) translateX(0); -ms-transform: scale(1.1, 1.1) translateX(0); -o-transform: scale(1.1, 1.1) translateX(0); transform: scale(1.1, 1.1) translateX(0); } 60%, 80%, 100% { opacity: 1; -webkit-transform: scale(1, 1) translateX(0); -moz-transform: scale(1, 1) translateX(0); -ms-transform: scale(1, 1) translateX(0); -o-transform: scale(1, 1) translateX(0); transform: scale(1, 1) translateX(0); } } @-moz-keyframes tinUpIn { 0% { opacity: 0; -webkit-transform: scale(1, 1) translateY(-900%); -moz-transform: scale(1, 1) translateY(-900%); -ms-transform: scale(1, 1) translateY(-900%); -o-transform: scale(1, 1) translateY(-900%); transform: scale(1, 1) translateY(-900%); } 50%, 70%, 90% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateY(0); -moz-transform: scale(1.1, 1.1) translateY(0); -ms-transform: scale(1.1, 1.1) translateY(0); -o-transform: scale(1.1, 1.1) translateY(0); transform: scale(1.1, 1.1) translateY(0); } 60%, 80%, 100% { opacity: 1; -webkit-transform: scale(1, 1) translateY(0); -moz-transform: scale(1, 1) translateY(0); -ms-transform: scale(1, 1) translateY(0); -o-transform: scale(1, 1) translateY(0); transform: scale(1, 1) translateY(0); } } @-webkit-keyframes tinUpIn { 0% { opacity: 0; -webkit-transform: scale(1, 1) translateY(-900%); -moz-transform: scale(1, 1) translateY(-900%); -ms-transform: scale(1, 1) translateY(-900%); -o-transform: scale(1, 1) translateY(-900%); transform: scale(1, 1) translateY(-900%); } 50%, 70%, 90% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateY(0); -moz-transform: scale(1.1, 1.1) translateY(0); -ms-transform: scale(1.1, 1.1) translateY(0); -o-transform: scale(1.1, 1.1) translateY(0); transform: scale(1.1, 1.1) translateY(0); } 60%, 80%, 100% { opacity: 1; -webkit-transform: scale(1, 1) translateY(0); -moz-transform: scale(1, 1) translateY(0); -ms-transform: scale(1, 1) translateY(0); -o-transform: scale(1, 1) translateY(0); transform: scale(1, 1) translateY(0); } } @-o-keyframes tinUpIn { 0% { opacity: 0; -webkit-transform: scale(1, 1) translateY(-900%); -moz-transform: scale(1, 1) translateY(-900%); -ms-transform: scale(1, 1) translateY(-900%); -o-transform: scale(1, 1) translateY(-900%); transform: scale(1, 1) translateY(-900%); } 50%, 70%, 90% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateY(0); -moz-transform: scale(1.1, 1.1) translateY(0); -ms-transform: scale(1.1, 1.1) translateY(0); -o-transform: scale(1.1, 1.1) translateY(0); transform: scale(1.1, 1.1) translateY(0); } 60%, 80%, 100% { opacity: 1; -webkit-transform: scale(1, 1) translateY(0); -moz-transform: scale(1, 1) translateY(0); -ms-transform: scale(1, 1) translateY(0); -o-transform: scale(1, 1) translateY(0); transform: scale(1, 1) translateY(0); } } @-ms-keyframes tinUpIn { 0% { opacity: 0; -webkit-transform: scale(1, 1) translateY(-900%); -moz-transform: scale(1, 1) translateY(-900%); -ms-transform: scale(1, 1) translateY(-900%); -o-transform: scale(1, 1) translateY(-900%); transform: scale(1, 1) translateY(-900%); } 50%, 70%, 90% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateY(0); -moz-transform: scale(1.1, 1.1) translateY(0); -ms-transform: scale(1.1, 1.1) translateY(0); -o-transform: scale(1.1, 1.1) translateY(0); transform: scale(1.1, 1.1) translateY(0); } 60%, 80%, 100% { opacity: 1; -webkit-transform: scale(1, 1) translateY(0); -moz-transform: scale(1, 1) translateY(0); -ms-transform: scale(1, 1) translateY(0); -o-transform: scale(1, 1) translateY(0); transform: scale(1, 1) translateY(0); } } @keyframes tinUpIn { 0% { opacity: 0; -webkit-transform: scale(1, 1) translateY(-900%); -moz-transform: scale(1, 1) translateY(-900%); -ms-transform: scale(1, 1) translateY(-900%); -o-transform: scale(1, 1) translateY(-900%); transform: scale(1, 1) translateY(-900%); } 50%, 70%, 90% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateY(0); -moz-transform: scale(1.1, 1.1) translateY(0); -ms-transform: scale(1.1, 1.1) translateY(0); -o-transform: scale(1.1, 1.1) translateY(0); transform: scale(1.1, 1.1) translateY(0); } 60%, 80%, 100% { opacity: 1; -webkit-transform: scale(1, 1) translateY(0); -moz-transform: scale(1, 1) translateY(0); -ms-transform: scale(1, 1) translateY(0); -o-transform: scale(1, 1) translateY(0); transform: scale(1, 1) translateY(0); } } @-moz-keyframes tinDownIn { 0% { opacity: 0; -webkit-transform: scale(1, 1) translateY(900%); -moz-transform: scale(1, 1) translateY(900%); -ms-transform: scale(1, 1) translateY(900%); -o-transform: scale(1, 1) translateY(900%); transform: scale(1, 1) translateY(900%); } 50%, 70%, 90% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateY(0); -moz-transform: scale(1.1, 1.1) translateY(0); -ms-transform: scale(1.1, 1.1) translateY(0); -o-transform: scale(1.1, 1.1) translateY(0); transform: scale(1.1, 1.1) translateY(0); } 60%, 80%, 100% { opacity: 1; -webkit-transform: scale(1, 1) translateY(0); -moz-transform: scale(1, 1) translateY(0); -ms-transform: scale(1, 1) translateY(0); -o-transform: scale(1, 1) translateY(0); transform: scale(1, 1) translateY(0); } } @-webkit-keyframes tinDownIn { 0% { opacity: 0; -webkit-transform: scale(1, 1) translateY(900%); -moz-transform: scale(1, 1) translateY(900%); -ms-transform: scale(1, 1) translateY(900%); -o-transform: scale(1, 1) translateY(900%); transform: scale(1, 1) translateY(900%); } 50%, 70%, 90% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateY(0); -moz-transform: scale(1.1, 1.1) translateY(0); -ms-transform: scale(1.1, 1.1) translateY(0); -o-transform: scale(1.1, 1.1) translateY(0); transform: scale(1.1, 1.1) translateY(0); } 60%, 80%, 100% { opacity: 1; -webkit-transform: scale(1, 1) translateY(0); -moz-transform: scale(1, 1) translateY(0); -ms-transform: scale(1, 1) translateY(0); -o-transform: scale(1, 1) translateY(0); transform: scale(1, 1) translateY(0); } } @-o-keyframes tinDownIn { 0% { opacity: 0; -webkit-transform: scale(1, 1) translateY(900%); -moz-transform: scale(1, 1) translateY(900%); -ms-transform: scale(1, 1) translateY(900%); -o-transform: scale(1, 1) translateY(900%); transform: scale(1, 1) translateY(900%); } 50%, 70%, 90% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateY(0); -moz-transform: scale(1.1, 1.1) translateY(0); -ms-transform: scale(1.1, 1.1) translateY(0); -o-transform: scale(1.1, 1.1) translateY(0); transform: scale(1.1, 1.1) translateY(0); } 60%, 80%, 100% { opacity: 1; -webkit-transform: scale(1, 1) translateY(0); -moz-transform: scale(1, 1) translateY(0); -ms-transform: scale(1, 1) translateY(0); -o-transform: scale(1, 1) translateY(0); transform: scale(1, 1) translateY(0); } } @-ms-keyframes tinDownIn { 0% { opacity: 0; -webkit-transform: scale(1, 1) translateY(900%); -moz-transform: scale(1, 1) translateY(900%); -ms-transform: scale(1, 1) translateY(900%); -o-transform: scale(1, 1) translateY(900%); transform: scale(1, 1) translateY(900%); } 50%, 70%, 90% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateY(0); -moz-transform: scale(1.1, 1.1) translateY(0); -ms-transform: scale(1.1, 1.1) translateY(0); -o-transform: scale(1.1, 1.1) translateY(0); transform: scale(1.1, 1.1) translateY(0); } 60%, 80%, 100% { opacity: 1; -webkit-transform: scale(1, 1) translateY(0); -moz-transform: scale(1, 1) translateY(0); -ms-transform: scale(1, 1) translateY(0); -o-transform: scale(1, 1) translateY(0); transform: scale(1, 1) translateY(0); } } @keyframes tinDownIn { 0% { opacity: 0; -webkit-transform: scale(1, 1) translateY(900%); -moz-transform: scale(1, 1) translateY(900%); -ms-transform: scale(1, 1) translateY(900%); -o-transform: scale(1, 1) translateY(900%); transform: scale(1, 1) translateY(900%); } 50%, 70%, 90% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateY(0); -moz-transform: scale(1.1, 1.1) translateY(0); -ms-transform: scale(1.1, 1.1) translateY(0); -o-transform: scale(1.1, 1.1) translateY(0); transform: scale(1.1, 1.1) translateY(0); } 60%, 80%, 100% { opacity: 1; -webkit-transform: scale(1, 1) translateY(0); -moz-transform: scale(1, 1) translateY(0); -ms-transform: scale(1, 1) translateY(0); -o-transform: scale(1, 1) translateY(0); transform: scale(1, 1) translateY(0); } } @-moz-keyframes bombRightOut { 0% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-filter: blur(0px); } 50% { opacity: 1; -webkit-transform-origin: 200% 50%; -moz-transform-origin: 200% 50%; -ms-transform-origin: 200% 50%; -o-transform-origin: 200% 50%; transform-origin: 200% 50%; -webkit-transform: rotate(160deg); -moz-transform: rotate(160deg); -ms-transform: rotate(160deg); -o-transform: rotate(160deg); transform: rotate(160deg); -webkit-filter: blur(0px); } 100% { opacity: 0; -webkit-transform-origin: 200% 50%; -moz-transform-origin: 200% 50%; -ms-transform-origin: 200% 50%; -o-transform-origin: 200% 50%; transform-origin: 200% 50%; -webkit-transform: rotate(160deg); -moz-transform: rotate(160deg); -ms-transform: rotate(160deg); -o-transform: rotate(160deg); transform: rotate(160deg); -webkit-filter: blur(20px); } } @-webkit-keyframes bombRightOut { 0% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-filter: blur(0px); } 50% { opacity: 1; -webkit-transform-origin: 200% 50%; -moz-transform-origin: 200% 50%; -ms-transform-origin: 200% 50%; -o-transform-origin: 200% 50%; transform-origin: 200% 50%; -webkit-transform: rotate(160deg); -moz-transform: rotate(160deg); -ms-transform: rotate(160deg); -o-transform: rotate(160deg); transform: rotate(160deg); -webkit-filter: blur(0px); } 100% { opacity: 0; -webkit-transform-origin: 200% 50%; -moz-transform-origin: 200% 50%; -ms-transform-origin: 200% 50%; -o-transform-origin: 200% 50%; transform-origin: 200% 50%; -webkit-transform: rotate(160deg); -moz-transform: rotate(160deg); -ms-transform: rotate(160deg); -o-transform: rotate(160deg); transform: rotate(160deg); -webkit-filter: blur(20px); } } @-o-keyframes bombRightOut { 0% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-filter: blur(0px); } 50% { opacity: 1; -webkit-transform-origin: 200% 50%; -moz-transform-origin: 200% 50%; -ms-transform-origin: 200% 50%; -o-transform-origin: 200% 50%; transform-origin: 200% 50%; -webkit-transform: rotate(160deg); -moz-transform: rotate(160deg); -ms-transform: rotate(160deg); -o-transform: rotate(160deg); transform: rotate(160deg); -webkit-filter: blur(0px); } 100% { opacity: 0; -webkit-transform-origin: 200% 50%; -moz-transform-origin: 200% 50%; -ms-transform-origin: 200% 50%; -o-transform-origin: 200% 50%; transform-origin: 200% 50%; -webkit-transform: rotate(160deg); -moz-transform: rotate(160deg); -ms-transform: rotate(160deg); -o-transform: rotate(160deg); transform: rotate(160deg); -webkit-filter: blur(20px); } } @-ms-keyframes bombRightOut { 0% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-filter: blur(0px); } 50% { opacity: 1; -webkit-transform-origin: 200% 50%; -moz-transform-origin: 200% 50%; -ms-transform-origin: 200% 50%; -o-transform-origin: 200% 50%; transform-origin: 200% 50%; -webkit-transform: rotate(160deg); -moz-transform: rotate(160deg); -ms-transform: rotate(160deg); -o-transform: rotate(160deg); transform: rotate(160deg); -webkit-filter: blur(0px); } 100% { opacity: 0; -webkit-transform-origin: 200% 50%; -moz-transform-origin: 200% 50%; -ms-transform-origin: 200% 50%; -o-transform-origin: 200% 50%; transform-origin: 200% 50%; -webkit-transform: rotate(160deg); -moz-transform: rotate(160deg); -ms-transform: rotate(160deg); -o-transform: rotate(160deg); transform: rotate(160deg); -webkit-filter: blur(20px); } } @keyframes bombRightOut { 0% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-filter: blur(0px); } 50% { opacity: 1; -webkit-transform-origin: 200% 50%; -moz-transform-origin: 200% 50%; -ms-transform-origin: 200% 50%; -o-transform-origin: 200% 50%; transform-origin: 200% 50%; -webkit-transform: rotate(160deg); -moz-transform: rotate(160deg); -ms-transform: rotate(160deg); -o-transform: rotate(160deg); transform: rotate(160deg); -webkit-filter: blur(0px); } 100% { opacity: 0; -webkit-transform-origin: 200% 50%; -moz-transform-origin: 200% 50%; -ms-transform-origin: 200% 50%; -o-transform-origin: 200% 50%; transform-origin: 200% 50%; -webkit-transform: rotate(160deg); -moz-transform: rotate(160deg); -ms-transform: rotate(160deg); -o-transform: rotate(160deg); transform: rotate(160deg); -webkit-filter: blur(20px); } } @-moz-keyframes bombLeftOut { 0% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-filter: blur(0px); } 50% { opacity: 1; -webkit-transform-origin: -100% 50%; -moz-transform-origin: -100% 50%; -ms-transform-origin: -100% 50%; -o-transform-origin: -100% 50%; transform-origin: -100% 50%; -webkit-transform: rotate(-160deg); -moz-transform: rotate(-160deg); -ms-transform: rotate(-160deg); -o-transform: rotate(-160deg); transform: rotate(-160deg); -webkit-filter: blur(0px); } 100% { opacity: 0; -webkit-transform-origin: -100% 50%; -moz-transform-origin: -100% 50%; -ms-transform-origin: -100% 50%; -o-transform-origin: -100% 50%; transform-origin: -100% 50%; -webkit-transform: rotate(-160deg); -moz-transform: rotate(-160deg); -ms-transform: rotate(-160deg); -o-transform: rotate(-160deg); transform: rotate(-160deg); -webkit-filter: blur(20px); } } @-webkit-keyframes bombLeftOut { 0% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-filter: blur(0px); } 50% { opacity: 1; -webkit-transform-origin: -100% 50%; -moz-transform-origin: -100% 50%; -ms-transform-origin: -100% 50%; -o-transform-origin: -100% 50%; transform-origin: -100% 50%; -webkit-transform: rotate(-160deg); -moz-transform: rotate(-160deg); -ms-transform: rotate(-160deg); -o-transform: rotate(-160deg); transform: rotate(-160deg); -webkit-filter: blur(0px); } 100% { opacity: 0; -webkit-transform-origin: -100% 50%; -moz-transform-origin: -100% 50%; -ms-transform-origin: -100% 50%; -o-transform-origin: -100% 50%; transform-origin: -100% 50%; -webkit-transform: rotate(-160deg); -moz-transform: rotate(-160deg); -ms-transform: rotate(-160deg); -o-transform: rotate(-160deg); transform: rotate(-160deg); -webkit-filter: blur(20px); } } @-o-keyframes bombLeftOut { 0% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-filter: blur(0px); } 50% { opacity: 1; -webkit-transform-origin: -100% 50%; -moz-transform-origin: -100% 50%; -ms-transform-origin: -100% 50%; -o-transform-origin: -100% 50%; transform-origin: -100% 50%; -webkit-transform: rotate(-160deg); -moz-transform: rotate(-160deg); -ms-transform: rotate(-160deg); -o-transform: rotate(-160deg); transform: rotate(-160deg); -webkit-filter: blur(0px); } 100% { opacity: 0; -webkit-transform-origin: -100% 50%; -moz-transform-origin: -100% 50%; -ms-transform-origin: -100% 50%; -o-transform-origin: -100% 50%; transform-origin: -100% 50%; -webkit-transform: rotate(-160deg); -moz-transform: rotate(-160deg); -ms-transform: rotate(-160deg); -o-transform: rotate(-160deg); transform: rotate(-160deg); -webkit-filter: blur(20px); } } @-ms-keyframes bombLeftOut { 0% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-filter: blur(0px); } 50% { opacity: 1; -webkit-transform-origin: -100% 50%; -moz-transform-origin: -100% 50%; -ms-transform-origin: -100% 50%; -o-transform-origin: -100% 50%; transform-origin: -100% 50%; -webkit-transform: rotate(-160deg); -moz-transform: rotate(-160deg); -ms-transform: rotate(-160deg); -o-transform: rotate(-160deg); transform: rotate(-160deg); -webkit-filter: blur(0px); } 100% { opacity: 0; -webkit-transform-origin: -100% 50%; -moz-transform-origin: -100% 50%; -ms-transform-origin: -100% 50%; -o-transform-origin: -100% 50%; transform-origin: -100% 50%; -webkit-transform: rotate(-160deg); -moz-transform: rotate(-160deg); -ms-transform: rotate(-160deg); -o-transform: rotate(-160deg); transform: rotate(-160deg); -webkit-filter: blur(20px); } } @keyframes bombLeftOut { 0% { opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-filter: blur(0px); } 50% { opacity: 1; -webkit-transform-origin: -100% 50%; -moz-transform-origin: -100% 50%; -ms-transform-origin: -100% 50%; -o-transform-origin: -100% 50%; transform-origin: -100% 50%; -webkit-transform: rotate(-160deg); -moz-transform: rotate(-160deg); -ms-transform: rotate(-160deg); -o-transform: rotate(-160deg); transform: rotate(-160deg); -webkit-filter: blur(0px); } 100% { opacity: 0; -webkit-transform-origin: -100% 50%; -moz-transform-origin: -100% 50%; -ms-transform-origin: -100% 50%; -o-transform-origin: -100% 50%; transform-origin: -100% 50%; -webkit-transform: rotate(-160deg); -moz-transform: rotate(-160deg); -ms-transform: rotate(-160deg); -o-transform: rotate(-160deg); transform: rotate(-160deg); -webkit-filter: blur(20px); } }