magic.css

body { -webkit-backface-visibility: hidden; backface-visibility: hidden; }

.magictime {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}

@-webkit-keyframes magic {
0% { opacity: 1; -webkit-transform-origin: 100% 200%; -webkit-transform: scale(1.0,1.0) rotate(0deg); }
100% { opacity: 0; -webkit-transform-origin: 200% 500%; -webkit-transform: scale(0.0,0.0) rotate(270deg); }
}

@-moz-keyframes magic {
0% { opacity: 1; -moz-transform-origin: 100% 200%; -moz-transform: scale(1.0,1.0) rotate(0deg); }
100% { opacity: 0; -moz-transform-origin: 200% 500%; -moz-transform: scale(0.0,0.0) rotate(270deg); }
}

@-o-keyframes magic {
0% { opacity: 1; -o-transform-origin: 100% 200%; -o-transform: scale(1.0,1.0) rotate(0deg); }
100% { opacity: 0; -o-transform-origin: 200% 500%; -o-transform: scale(0.0,0.0) rotate(270deg); }
}

@keyframes magic {
0% { opacity: 1; transform-origin: 100% 200%; transform: scale(1.0,1.0) rotate(0deg); }
100% { opacity: 0; transform-origin: 200% 500%; transform: scale(0.0,0.0) rotate(270deg); }
}

.magic {
-webkit-animation-name: magic;
-moz-animation-name: magic;
-o-animation-name: magic;
animation-name: magic;
}

@-webkit-keyframes openDownLeft {
0% { -webkit-transform-origin: bottom left; -webkit-transform: rotate(0deg); -webkit-animation-timing-function: ease-out; }
100% { -webkit-transform-origin: bottom left; -webkit-transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; }
}

@-moz-keyframes openDownLeft {
0% { -moz-transform-origin: bottom left; -moz-transform: rotate(0deg); -moz-animation-timing-function: ease-out; }
100% { -moz-transform-origin: bottom left; -moz-transform: rotate(-110deg); -moz-animation-timing-function: ease-in-out; }
}

@-o-keyframes openDownLeft {
0% { -o-transform-origin: bottom left; -o-transform: rotate(0deg); -o-animation-timing-function: ease-out; }
100% { -o-transform-origin: bottom left; -o-transform: rotate(-110deg); -o-animation-timing-function: ease-in-out; }
}

@keyframes openDownLeft {
0% { transform-origin: bottom left; transform: rotate(0deg); animation-timing-function: ease-out; }
100% { transform-origin: bottom left; transform: rotate(-110deg); animation-timing-function: ease-in-out; }
}

.openDownLeft {
-webkit-animation-name: openDownLeft;
-moz-animation-name: openDownLeft;
-o-animation-name: openDownLeft;
animation-name: openDownLeft;
}

@-webkit-keyframes openDownRight {
0% { -webkit-transform-origin: bottom right; -webkit-transform: rotate(0deg); -webkit-animation-timing-function: ease-out; }
100% { -webkit-transform-origin: bottom right; -webkit-transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; }
}

@-moz-keyframes openDownRight {
0% { -moz-transform-origin: bottom right; -moz-transform: rotate(0deg); -moz-animation-timing-function: ease-out; }
100% { -moz-transform-origin: bottom right; -moz-transform: rotate(110deg); -moz-animation-timing-function: ease-in-out; }
}

@-o-keyframes openDownRight {
0% { -o-transform-origin: bottom right; -o-transform: rotate(0deg); -o-animation-timing-function: ease-out; }
100% { -o-transform-origin: bottom right; -o-transform: rotate(110deg); -o-animation-timing-function: ease-in-out; }
}

@keyframes openDownRight {
0% { transform-origin: bottom right; transform: rotate(0deg); animation-timing-function: ease-out; }
100% { transform-origin: bottom right; transform: rotate(110deg); animation-timing-function: ease-in-out; }
}

.openDownRight {
-webkit-animation-name: openDownRight;
-moz-animation-name: openDownRight;
-o-animation-name: openDownRight;
animation-name: openDownRight;
}

@-webkit-keyframes openUpLeft {
0% { -webkit-transform-origin: top left; -webkit-transform: rotate(0deg); -webkit-animation-timing-function: ease-out; }
100% { -webkit-transform-origin: top left; -webkit-transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; }
}

@-moz-keyframes openUpLeft {
0% { -moz-transform-origin: top left; -moz-transform: rotate(0deg); -moz-animation-timing-function: ease-out; }
100% { -moz-transform-origin: top left; -moz-transform: rotate(110deg); -moz-animation-timing-function: ease-in-out; }
}

@-o-keyframes openUpLeft {
0% { -o-transform-origin: top left; -o-transform: rotate(0deg); -o-animation-timing-function: ease-out; }
100% { -o-transform-origin: top left; -o-transform: rotate(110deg); -o-animation-timing-function: ease-in-out; }
}

@keyframes openUpLeft {
0% { transform-origin: top left; transform: rotate(0deg); animation-timing-function: ease-out; }
100% { transform-origin: top left; transform: rotate(110deg); animation-timing-function: ease-in-out; }
}

.openUpLeft {
-webkit-animation-name: openUpLeft;
-moz-animation-name: openUpLeft;
-o-animation-name: openUpLeft;
animation-name: openUpLeft;
}

@-webkit-keyframes openUpRight {
0% { -webkit-transform-origin: top right; -webkit-transform: rotate(0deg); -webkit-animation-timing-function: ease-out; }
100% { -webkit-transform-origin: top right; -webkit-transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; }
}

@-moz-keyframes openUpRight {
0% { -moz-transform-origin: top right; -moz-transform: rotate(0deg); -moz-animation-timing-function: ease-out; }
100% { -moz-transform-origin: top right; -moz-transform: rotate(-110deg); -moz-animation-timing-function: ease-in-out; }
}

@-o-keyframes openUpRight {
0% { -o-transform-origin: top right; -o-transform: rotate(0deg); -o-animation-timing-function: ease-out; }
100% { -o-transform-origin: top right; -o-transform: rotate(-110deg); -o-animation-timing-function: ease-in-out; }
}

@keyframes openUpRight {
0% { transform-origin: top right; transform: rotate(0deg); animation-timing-function: ease-out; }
100% { transform-origin: top right; transform: rotate(-110deg); animation-timing-function: ease-in-out; }
}

.openUpRight {
-webkit-animation-name: openUpRight;
-moz-animation-name: openUpRight;
-o-animation-name: openUpRight;
animation-name: openUpRight;
}

@-webkit-keyframes openDownLeftRetourn {
0% { -webkit-transform-origin: bottom left; -webkit-transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; }
100% { -webkit-transform-origin: bottom left; -webkit-transform: rotate(0deg); -webkit-animation-timing-function: ease-out; }
}

@-moz-keyframes openDownLeftRetourn {
0% { -moz-transform-origin: bottom left; -moz-transform: rotate(-110deg); -moz-animation-timing-function: ease-in-out; }
100% { -moz-transform-origin: bottom left; -moz-transform: rotate(0deg); -moz-animation-timing-function: ease-out; }
}

@-o-keyframes openDownLeftRetourn {
0% { -o-transform-origin: bottom left; -o-transform: rotate(-110deg); -o-animation-timing-function: ease-in-out; }
100% { -o-transform-origin: bottom left; -o-transform: rotate(0deg); -o-animation-timing-function: ease-out; }
}

@keyframes openDownLeftRetourn {
0% { transform-origin: bottom left; transform: rotate(-110deg); animation-timing-function: ease-in-out; }
100% { transform-origin: bottom left; transform: rotate(0deg); animation-timing-function: ease-out; }
}

.openDownLeftRetourn {
-webkit-animation-name: openDownLeftRetourn;
-moz-animation-name: openDownLeftRetourn;
-o-animation-name: openDownLeftRetourn;
animation-name: openDownLeftRetourn;
}

@-webkit-keyframes openDownRightRetourn {
0% { -webkit-transform-origin: bottom right; -webkit-transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; }
100% { -webkit-transform-origin: bottom right; -webkit-transform: rotate(0deg); -webkit-animation-timing-function: ease-out; }
}

@-moz-keyframes openDownRightRetourn {
0% { -moz-transform-origin: bottom right; -moz-transform: rotate(110deg); -moz-animation-timing-function: ease-in-out; }
100% { -moz-transform-origin: bottom right; -moz-transform: rotate(0deg); -moz-animation-timing-function: ease-out; }
}

@-o-keyframes openDownRightRetourn {
0% { -o-transform-origin: bottom right; -o-transform: rotate(110deg); -o-animation-timing-function: ease-in-out; }
100% { -o-transform-origin: bottom right; -o-transform: rotate(0deg); -o-animation-timing-function: ease-out; }
}

@keyframes openDownRightRetourn {
0% { transform-origin: bottom right; transform: rotate(110deg); animation-timing-function: ease-in-out; }
100% { transform-origin: bottom right; transform: rotate(0deg); animation-timing-function: ease-out; }
}

.openDownRightRetourn {
-webkit-animation-name: openDownRightRetourn;
-moz-animation-name: openDownRightRetourn;
-o-animation-name: openDownRightRetourn;
animation-name: openDownRightRetourn;
}

@-webkit-keyframes openUpLeftRetourn {
0% { -webkit-transform-origin: top left; -webkit-transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; }
100% { -webkit-transform-origin: top left; -webkit-transform: rotate(0deg); -webkit-animation-timing-function: ease-out; }
}

@-moz-keyframes openUpLeftRetourn {
0% { -moz-transform-origin: top left; -moz-transform: rotate(110deg); -moz-animation-timing-function: ease-in-out; }
100% { -moz-transform-origin: top left; -moz-transform: rotate(0deg); -moz-animation-timing-function: ease-out; }
}

@-o-keyframes openUpLeftRetourn {
0% { -o-transform-origin: top left; -o-transform: rotate(110deg); -o-animation-timing-function: ease-in-out; }
100% { -o-transform-origin: top left; -o-transform: rotate(0deg); -o-animation-timing-function: ease-out; }
}

@keyframes openUpLeftRetourn {
0% { transform-origin: top left; transform: rotate(110deg); animation-timing-function: ease-in-out; }
100% { transform-origin: top left; transform: rotate(0deg); animation-timing-function: ease-out; }
}

.openUpLeftRetourn {
-webkit-animation-name: openUpLeftRetourn;
-moz-animation-name: openUpLeftRetourn;
-o-animation-name: openUpLeftRetourn;
animation-name: openUpLeftRetourn;
}

@-webkit-keyframes openUpRightRetourn {
0% { -webkit-transform-origin: top right; -webkit-transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; }
100% { -webkit-transform-origin: top right; -webkit-transform: rotate(0deg); -webkit-animation-timing-function: ease-out; }
}

@-moz-keyframes openUpRightRetourn {
0% { -moz-transform-origin: top right; -moz-transform: rotate(-110deg); -moz-animation-timing-function: ease-in-out; }
100% { -moz-transform-origin: top right; -moz-transform: rotate(0deg); -moz-animation-timing-function: ease-out; }
}

@-o-keyframes openUpRightRetourn {
0% { -o-transform-origin: top right; -o-transform: rotate(-110deg); -o-animation-timing-function: ease-in-out; }
100% { -o-transform-origin: top right; -o-transform: rotate(0deg); -o-animation-timing-function: ease-out; }
}

@keyframes openUpRightRetourn {
0% { transform-origin: top right; transform: rotate(-110deg); animation-timing-function: ease-in-out; }
100% { transform-origin: top right; transform: rotate(0deg); animation-timing-function: ease-out; }

}

.openUpRightRetourn {
-webkit-animation-name: openUpRightRetourn;
-moz-animation-name: openUpRightRetourn;
-o-animation-name: openUpRightRetourn;
animation-name: openUpRightRetourn;
}

@-webkit-keyframes openDownLeftOut {
0% { opacity: 1; -webkit-transform-origin: bottom left; -webkit-transform: rotate(0deg); -webkit-animation-timing-function: ease-out; }
100% { opacity: 0; -webkit-transform-origin: bottom left; -webkit-transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; }
}

@-moz-keyframes openDownLeftOut {
0% { opacity: 1; -moz-transform-origin: bottom left; -moz-transform: rotate(0deg); -moz-animation-timing-function: ease-out; }
100% { opacity: 0; -moz-transform-origin: bottom left; -moz-transform: rotate(-110deg); -moz-animation-timing-function: ease-in-out; }
}

@-o-keyframes openDownLeftOut {
0% { opacity: 1; -o-transform-origin: bottom left; -o-transform: rotate(0deg); -o-animation-timing-function: ease-out; }
100% { opacity: 0; -o-transform-origin: bottom left; -o-transform: rotate(-110deg); -o-animation-timing-function: ease-in-out }
}

@keyframes openDownLeftOut {
0% { opacity: 1; transform-origin: bottom left; transform: rotate(0deg); animation-timing-function: ease-out; }
100% { opacity: 0; transform-origin: bottom left; transform: rotate(-110deg); animation-timing-function: ease-in-out }
}

.openDownLeftOut {
-webkit-animation-name: openDownLeftOut;
-moz-animation-name: openDownLeftOut;
-o-animation-name: openDownLeftOut;
animation-name: openDownLeftOut;
}

@-webkit-keyframes openDownRightOut { 
0% { opacity: 1; -webkit-transform-origin: bottom right; -webkit-transform: rotate(0deg); -webkit-animation-timing-function: ease-out; }
100% { opacity: 0; -webkit-transform-origin: bottom right; -webkit-transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; }
}

@-moz-keyframes openDownRightOut {
0% { opacity: 1; -moz-transform-origin: bottom right; -moz-transform: rotate(0deg); -moz-animation-timing-function: ease-out; }
100% { opacity: 0; -moz-transform-origin: bottom right; -moz-transform: rotate(110deg); -moz-animation-timing-function: ease-in-out; }
}

@-o-keyframes openDownRightOut { 
0% { opacity: 1; -o-transform-origin: bottom right; -o-transform: rotate(0deg); -o-animation-timing-function: ease-out; }
100% { opacity: 0; -o-transform-origin: bottom right; -o-transform: rotate(110deg); -o-animation-timing-function: ease-in-out }
}

@keyframes openDownRightOut { 
0% { opacity: 1; transform-origin: bottom right; transform: rotate(0deg); animation-timing-function: ease-out; }
100% { opacity: 0; transform-origin: bottom right; transform: rotate(110deg); animation-timing-function: ease-in-out }
}

.openDownRightOut {
-webkit-animation-name: openDownRightOut;
-moz-animation-name: openDownRightOut;
-o-animation-name: openDownRightOut;
animation-name: openDownRightOut;
}

@-webkit-keyframes openUpLeftOut { 
0% { opacity: 1; -webkit-transform-origin: top left; -webkit-transform: rotate(0deg); -webkit-animation-timing-function: ease-out; }
100% { opacity: 0; -webkit-transform-origin: top left; -webkit-transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; }
}

@-moz-keyframes openUpLeftOut {
0% { opacity: 1; -moz-transform-origin: top left; -moz-transform: rotate(0deg); -moz-animation-timing-function: ease-out; }
100% { opacity: 0; -moz-transform-origin: top left; -moz-transform: rotate(110deg); -moz-animation-timing-function: ease-in-out; }
}

@-o-keyframes openUpLeftOut { 
0% { opacity: 1; -o-transform-origin: top left; -o-transform: rotate(0deg); -o-animation-timing-function: ease-out; }
100% { opacity: 0; -o-transform-origin: top left; -o-transform: rotate(110deg); -o-animation-timing-function: ease-in-out }
}

@keyframes openUpLeftOut { 
0% { opacity: 1; transform-origin: top left; transform: rotate(0deg); animation-timing-function: ease-out; }
100% { opacity: 0; transform-origin: top left; transform: rotate(110deg); animation-timing-function: ease-in-out }
}

.openUpLeftOut {
-webkit-animation-name: openUpLeftOut;
-moz-animation-name: openUpLeftOut;
-o-animation-name: openUpLeftOut;
animation-name: openUpLeftOut;
}

@-webkit-keyframes openUpRightOut { 
0% { opacity: 1; -webkit-transform-origin: top right; -webkit-transform: rotate(0deg); -webkit-animation-timing-function: ease-out; }
100% { opacity: 0; -webkit-transform-origin: top right; -webkit-transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; }
}

@-moz-keyframes openUpRightOut {
0% { opacity: 1; -moz-transform-origin: top right; -moz-transform: rotate(0deg); -moz-animation-timing-function: ease-out; }
100% { opacity: 0; -moz-transform-origin: top right; -moz-transform: rotate(-110deg); -moz-animation-timing-function: ease-in-out; }
}

@-o-keyframes openUpRightOut { 
0% { opacity: 1; -o-transform-origin: top right; -o-transform: rotate(0deg); -o-animation-timing-function: ease-out; }
100% { opacity: 0; -o-transform-origin: top right; -o-transform: rotate(-110deg); -o-animation-timing-function: ease-in-out }
}

@keyframes openUpRightOut { 
0% { opacity: 1; transform-origin: top right; transform: rotate(0deg); animation-timing-function: ease-out; }
100% { opacity: 0; transform-origin: top right; transform: rotate(-110deg); animation-timing-function: ease-in-out }
}

.openUpRightOut {
-webkit-animation-name: openUpRightOut;
-moz-animation-name: openUpRightOut;
-o-animation-name: openUpRightOut;
animation-name: openUpRightOut;
}

@-webkit-keyframes perspectiveDown { 
0% { -webkit-transform-origin: 0 100%; -webkit-transform: perspective(800px) rotateX(0deg); }
100% { -webkit-transform-origin: 0 100%; -webkit-transform: perspective(800px) rotateX(-180deg); }
}

@-moz-keyframes perspectiveDown {
0% { -moz-transform-origin: 0 100%; -moz-transform: perspective(800px) rotateX(0deg); }
100% { -moz-transform-origin: 0 100%; -moz-transform: perspective(800px) rotateX(-180deg); }
}

@-o-keyframes perspectiveDown { 
0% { -o-transform-origin: 0 100%; -o-transform: perspective(800px) rotateX(0deg); }
100% { -o-transform-origin: 0 100%; -o-transform: perspective(800px) rotateX(-180deg); }
}

@keyframes perspectiveDown { 
0% { transform-origin: 0 100%; transform: perspective(800px) rotateX(0deg); }
100% { transform-origin: 0 100%; transform: perspective(800px) rotateX(-180deg); }
}

.perspectiveDown {
-webkit-backface-visibility: visible !important;
-moz-backface-visibility: visible !important;
-o-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: perspectiveDown;
-moz-animation-name: perspectiveDown;
-o-animation-name: perspectiveDown;
animation-name: perspectiveDown;
}

@-webkit-keyframes perspectiveLeft { 
0% { -webkit-transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(0deg); }
100% { -webkit-transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(-180deg); }
}

@-moz-keyframes perspectiveLeft {
0% { -moz-transform-origin: 0 0; -moz-transform: perspective(800px) rotateY(0deg); }
100% { -moz-transform-origin: 0 0; -moz-transform: perspective(800px) rotateY(-180deg); }
}

@-o-keyframes perspectiveLeft { 
0% { -o-transform-origin: 0 0; -o-transform: perspective(800px) rotateY(0deg); }
100% { -o-transform-origin: 0 0; -o-transform: perspective(800px) rotateY(-180deg); }
}

@keyframes perspectiveLeft { 
0% { transform-origin: 0 0; transform: perspective(800px) rotateY(0deg); }
100% { transform-origin: 0 0; transform: perspective(800px) rotateY(-180deg); }
}

.perspectiveLeft {
-webkit-backface-visibility: visible !important;
-moz-backface-visibility: visible !important;
-o-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: perspectiveLeft;
-moz-animation-name: perspectiveLeft;
-o-animation-name: perspectiveLeft;
animation-name: perspectiveLeft;
}

@-webkit-keyframes perspectiveRight { 
0% { -webkit-transform-origin: 100% 0; -webkit-transform: perspective(800px) rotateY(0deg); }
100% { -webkit-transform-origin: 100% 0; -webkit-transform: perspective(800px) rotateY(180deg); }
}

@-moz-keyframes perspectiveRight {
0% { -moz-transform-origin: 100% 0; -moz-transform: perspective(800px) rotateY(0deg); }
100% { -moz-transform-origin: 100% 0; -moz-transform: perspective(800px) rotateY(180deg); }
}

@-o-keyframes perspectiveRight { 
0% { -o-transform-origin: 100% 0; -o-transform: perspective(800px) rotateY(0deg); }
100% { -o-transform-origin: 100% 0; -o-transform: perspective(800px) rotateY(180deg); }
}

@keyframes perspectiveRight { 
0% { transform-origin: 100% 0; transform: perspective(800px) rotateY(0deg); }
100% { transform-origin: 100% 0; transform: perspective(800px) rotateY(180deg); }
}

.perspectiveRight {
-webkit-backface-visibility: visible !important;
-moz-backface-visibility: visible !important;
-o-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: perspectiveRight;
-moz-animation-name: perspectiveRight;
-o-animation-name: perspectiveRight;
animation-name: perspectiveRight;
}

@-webkit-keyframes perspectiveUp { 
0% { -webkit-transform-origin: 0 0; -webkit-transform: perspective(800px) rotateX(0deg); }
100% { -webkit-transform-origin: 0 0; -webkit-transform: perspective(800px) rotateX(180deg); }
}

@-moz-keyframes perspectiveUp {
0% { -moz-transform-origin: 0 0; -moz-transform: perspective(800px) rotateX(0deg); }
100% { -moz-transform-origin: 0 0; -moz-transform: perspective(800px) rotateX(180deg); }
}

@-o-keyframes perspectiveUp { 
0% { -o-transform-origin: 0 0; -o-transform: perspective(800px) rotateX(0deg); }
100% { -o-transform-origin: 0 0; -o-transform: perspective(800px) rotateX(180deg); }
}

@keyframes perspectiveUp { 
0% { transform-origin: 0 0; transform: perspective(800px) rotateX(0deg); }
100% { transform-origin: 0 0; transform: perspective(800px) rotateX(180deg); }
}

.perspectiveUp {
-webkit-backface-visibility: visible !important;
-moz-backface-visibility: visible !important;
-o-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: perspectiveUp;
-moz-animation-name: perspectiveUp;
-o-animation-name: perspectiveUp;
animation-name: perspectiveUp;
}

@-webkit-keyframes perspectiveDownRetourn {
0% { -webkit-transform-origin: 0 100%; -webkit-transform: perspective(800px) rotateX(-180deg); }
100% { -webkit-transform-origin: 0 100%; -webkit-transform: perspective(800px) rotateX(0deg); }
}

@-moz-keyframes perspectiveDownRetourn {
0% { -moz-transform-origin: 0 100%; -moz-transform: perspective(800px) rotateX(-180deg); }
100% { -moz-transform-origin: 0 100%; -moz-transform: perspective(800px) rotateX(0deg); }
}

@-o-keyframes perspectiveDownRetourn {
0% { -o-transform-origin: 0 100%; -o-transform: perspective(800px) rotateX(-180deg); }
100% { -o-transform-origin: 0 100%; -o-transform: perspective(800px) rotateX(0deg); }
}

@keyframes perspectiveDownRetourn {
0% { transform-origin: 0 100%; transform: perspective(800px) rotateX(-180deg); }
100% { transform-origin: 0 100%; transform: perspective(800px) rotateX(0deg); }
}

.perspectiveDownRetourn {
-webkit-backface-visibility: visible !important;
-moz-backface-visibility: visible !important;
-o-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: perspectiveDownRetourn;
-moz-animation-name: perspectiveDownRetourn;
-o-animation-name: perspectiveDownRetourn;
animation-name: perspectiveDownRetourn;
}

@-webkit-keyframes perspectiveLeftRetourn {
0% { -webkit-transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(-180deg); }
100% { -webkit-transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(0deg); }
}

@-moz-keyframes perspectiveLeftRetourn {
0% { -moz-transform-origin: 0 0; -moz-transform: perspective(800px) rotateY(-180deg); }
100% { -moz-transform-origin: 0 0; -moz-transform: perspective(800px) rotateY(0deg); }
}

@-o-keyframes perspectiveLeftRetourn {
0% { -o-transform-origin: 0 0; -o-transform: perspective(800px) rotateY(-180deg); }
100% { -o-transform-origin: 0 0; -o-transform: perspective(800px) rotateY(0deg); }
}

@keyframes perspectiveLeftRetourn {
0% { transform-origin: 0 0; transform: perspective(800px) rotateY(-180deg); }
100% { transform-origin: 0 0; transform: perspective(800px) rotateY(0deg); }
}

.perspectiveLeftRetourn {
-webkit-backface-visibility: visible !important;
-moz-backface-visibility: visible !important;
-o-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: perspectiveLeftRetourn;
-moz-animation-name: perspectiveLeftRetourn;
-o-animation-name: perspectiveLeftRetourn;
animation-name: perspectiveLeftRetourn;
}

@-webkit-keyframes perspectiveRightRetourn {
0% { -webkit-transform-origin: 100% 0; -webkit-transform: perspective(800px) rotateY(180deg); }
100% { -webkit-transform-origin: 100% 0; -webkit-transform: perspective(800px) rotateY(0deg); }
}

@-moz-keyframes perspectiveRightRetourn {
0% { -moz-transform-origin: 100% 0; -moz-transform: perspective(800px) rotateY(180deg); }
100% { -moz-transform-origin: 100% 0; -moz-transform: perspective(800px) rotateY(0deg); }
}

@-o-keyframes perspectiveRightRetourn {
0% { -o-transform-origin: 100% 0; -o-transform: perspective(800px) rotateY(180deg); }
100% { -o-transform-origin: 100% 0; -o-transform: perspective(800px) rotateY(0deg); }
}

@keyframes perspectiveRightRetourn {
0% { transform-origin: 100% 0; transform: perspective(800px) rotateY(180deg); }
100% { transform-origin: 100% 0; transform: perspective(800px) rotateY(0deg); }
}

.perspectiveRightRetourn {
-webkit-backface-visibility: visible !important;
-moz-backface-visibility: visible !important;
-o-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: perspectiveRightRetourn;
-moz-animation-name: perspectiveRightRetourn;
-o-animation-name: perspectiveRightRetourn;
animation-name: perspectiveRightRetourn;
}

@-webkit-keyframes perspectiveUpRetourn {
0% { -webkit-transform-origin: 0 0; -webkit-transform: perspective(800px) rotateX(180deg); }
100% { -webkit-transform-origin: 0 0; -webkit-transform: perspective(800px) rotateX(0deg); }
}

@-moz-keyframes perspectiveUpRetourn {
0% { -moz-transform-origin: 0 0; -moz-transform: perspective(800px) rotateX(180deg); }
100% { -moz-transform-origin: 0 0; -moz-transform: perspective(800px) rotateX(0deg); }
}

@-o-keyframes perspectiveUpRetourn {
0% { -o-transform-origin: 0 0; -o-transform: perspective(800px) rotateX(180deg); }
100% { -o-transform-origin: 0 0; -o-transform: perspective(800px) rotateX(0deg); }
}

@keyframes perspectiveUpRetourn {
0% { transform-origin: 0 0; transform: perspective(800px) rotateX(180deg); }
100% { transform-origin: 0 0; transform: perspective(800px) rotateX(0deg); }
}

.perspectiveUpRetourn {
-webkit-backface-visibility: visible !important;
-moz-backface-visibility: visible !important;
-o-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: perspectiveUpRetourn;
-moz-animation-name: perspectiveUpRetourn;
-o-animation-name: perspectiveUpRetourn;
animation-name: perspectiveUpRetourn;
}

@-webkit-keyframes puffIn {
0% { opacity: 0; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(2.0,2.0); -webkit-filter: blur(2px); }
100% { opacity: 1; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(1.0,1.0); }
}

@-moz-keyframes puffIn {
0% { opacity: 0; -moz-transform-origin: 50% 50%; -moz-transform: scale(2.0,2.0); -moz-filter: blur(2px); }
100% { opacity: 1; -moz-transform-origin: 50% 50%; -moz-transform: scale(1.0,1.0); }
}

@-o-keyframes puffIn {
0% { opacity: 0; -o-transform-origin: 50% 50%; -o-transform: scale(2.0,2.0); -o-filter: blur(2px); }
100% { opacity: 1; -o-transform-origin: 50% 50%; -o-transform: scale(1.0,1.0); }
}

@keyframes puffIn {
0% { opacity: 0; transform-origin: 50% 50%; transform: scale(2.0,2.0); filter: blur(2px); }
100% { opacity: 1; transform-origin: 50% 50%; transform: scale(1.0,1.0); }
}

.puffIn { 
-webkit-animation-name: puffIn;
-moz-animation-name: puffIn;
-o-animation-name: puffIn;
animation-name: puffIn;
}

@-webkit-keyframes puffOut { 
0% { opacity: 1; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(1.0,1.0); }
100% { opacity: 0; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(2.0,2.0); -webkit-filter: blur(2px); }
}

@-moz-keyframes puffOut {
0% { opacity: 1; -moz-transform-origin: 50% 50%; -moz-transform: scale(1.0,1.0); }
100% { opacity: 0; -moz-transform-origin: 50% 50%; -moz-transform: scale(2.0,2.0); filter: blur(2px); }
}

@-o-keyframes puffOut { 
0% { opacity: 1; -o-transform-origin: 50% 50%; -o-transform: scale(1.0,1.0); }
100% { opacity: 0; -o-transform-origin: 50% 50%; -o-transform: scale(2.0,2.0); }
}

@keyframes puffOut { 
0% { opacity: 1; transform-origin: 50% 50%; transform: scale(1.0,1.0); }
100% { opacity: 0; transform-origin: 50% 50%; transform: scale(2.0,2.0); filter: blur(2px); }
}

.puffOut { 
-webkit-animation-name: puffOut;
-moz-animation-name: puffOut;
-o-animation-name: puffOut;
animation-name: puffOut;
}

@-webkit-keyframes rotateDown { 
0% { -webkit-transform-origin: 0 0; -webkit-transform: perspective(800px) rotateX(0deg) translate3d(0,0,0); }
100% { opacity: 0; -webkit-transform-origin: 50% 100%; -webkit-transform: perspective(800px) rotateX(-180deg) translate3d(0,0,300px); }
}

@-moz-keyframes rotateDown {
0% { -moz-transform-origin: 0 0; -moz-transform: perspective(800px) rotateX(0deg) translateZ(0px); }
100% { opacity: 0; -moz-transform-origin: 50% 100%; -moz-transform: perspective(800px) rotateX(-180deg) translateZ(300px); }
}

@-o-keyframes rotateDown { 
0% { -o-transform-origin: 0 0; -o-transform: perspective(800px) rotateX(0deg) translateZ(0px); }
100% { opacity: 0; -o-transform-origin: 50% 100%; -o-transform: perspective(800px) rotateX(-180deg) translateZ(300px); }
}

@keyframes rotateDown { 
0% { transform-origin: 0 0; transform: perspective(800px) rotateX(0deg) translateZ(0px); }
100% { opacity: 0; transform-origin: 50% 100%; transform: perspective(800px) rotateX(-180deg) translateZ(300px); }
}

.rotateDown {
-webkit-backface-visibility: visible !important;
-moz-backface-visibility: visible !important;
-o-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: rotateDown;
-moz-animation-name: rotateDown;
-o-animation-name: rotateDown;
animation-name: rotateDown;
}

@-webkit-keyframes rotateLeft { 
0% { -webkit-transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(0deg) translate3d(0,0,0); }
100% { opacity: 0; -webkit-transform-origin: 50% 0; -webkit-transform: perspective(800px) rotateY(180deg) translate3d(0,0,300px); }
}

@-moz-keyframes rotateLeft {
0% { -moz-transform-origin: 0 0; -moz-transform: perspective(800px) rotateY(0deg) translateZ(0px); }
100% { opacity: 0; -moz-transform-origin: 50% 0; -moz-transform: perspective(800px) rotateY(180deg) translateZ(300px); }
}

@-o-keyframes rotateLeft { 
0% { -o-transform-origin: 0 0; -o-transform: perspective(800px) rotateY(0deg) translateZ(0px); }
100% { opacity: 0; -o-transform-origin: 50% 0; -o-transform: perspective(800px) rotateY(180deg) translateZ(300px); }
}

@keyframes rotateLeft { 
0% { transform-origin: 0 0; transform: perspective(800px) rotateY(0deg) translateZ(0px); }
100% { opacity: 0; transform-origin: 50% 0; transform: perspective(800px) rotateY(180deg) translateZ(300px); }
}

.rotateLeft {
-webkit-backface-visibility: visible !important;
-moz-backface-visibility: visible !important;
-o-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: rotateLeft;
-moz-animation-name: rotateLeft;
-o-animation-name: rotateLeft;
animation-name: rotateLeft;
}

@-webkit-keyframes rotateRight { 
0% { -webkit-transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(0deg) translate3d(0,0,0); }
100% { opacity: 0; -webkit-transform-origin: 50% 0; -webkit-transform: perspective(800px) rotateY(-180deg) translate3d(0,0,150px); }
}

@-moz-keyframes rotateRight {
0% { -moz-transform-origin: 0 0; -moz-transform: perspective(800px) rotateY(0deg) translateZ(0px); }
100% { opacity: 0; -moz-transform-origin: 50% 0; -moz-transform: perspective(800px) rotateY(-180deg) translateZ(150px); }
}

@-o-keyframes rotateRight { 
0% { -o-transform-origin: 0 0; -o-transform: perspective(800px) rotateY(0deg) translate3d(0px); }
100% { opacity: 0; -o-transform-origin: 50% 0; -o-transform: perspective(800px) rotateY(-180deg) translateZ(150px); }
}

@keyframes rotateRight { 
0% { transform-origin: 0 0; transform: perspective(800px) rotateY(0deg) translate3d(0px); }
100% { opacity: 0; transform-origin: 50% 0; transform: perspective(800px) rotateY(-180deg) translateZ(150px); }
}

.rotateRight {
-webkit-backface-visibility: visible !important;
-moz-backface-visibility: visible !important;
-o-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: rotateRight;
-moz-animation-name: rotateRight;
-o-animation-name: rotateRight;
animation-name: rotateRight;
}

@-webkit-keyframes rotateUp { 
0% { -webkit-transform-origin: 0 0; -webkit-transform: perspective(800px) rotateX(0deg) translate3d(0,0,0); }
100% { opacity: 0; -webkit-transform-origin: 50% 0; -webkit-transform: perspective(800px) rotateX(180deg) translate3d(0,0,100px); }
}

@-moz-keyframes rotateUp {
0% { -moz-transform-origin: 0 0; -moz-transform: perspective(800px) rotateX(0deg) translateZ(0px); }
100% { opacity: 0; -moz-transform-origin: 50% 0; -moz-transform: perspective(800px) rotateX(180deg) translateZ(100px); }
}

@-o-keyframes rotateUp { 
0% { -o-transform-origin: 0 0; -o-transform: perspective(800px) rotateX(0deg) translateZ(0px); }
100% { opacity: 0; -o-transform-origin: 50% 0; -o-transform: perspective(800px) rotateX(180deg) translateZ(100px); }
}

@keyframes rotateUp { 
0% { transform-origin: 0 0; transform: perspective(800px) rotateX(0deg) translateZ(0px); }
100% { opacity: 0; transform-origin: 50% 0; transform: perspective(800px) rotateX(180deg) translateZ(100px); }
}

.rotateUp {
-webkit-backface-visibility: visible !important;
-moz-backface-visibility: visible !important;
-o-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: rotateUp;
-moz-animation-name: rotateUp;
-o-animation-name: rotateUp;
animation-name: rotateUp;
}

@-webkit-keyframes slideDown { 
0% { -webkit-transform-origin: 0 0; -webkit-transform: translateY(0%); }
100% { -webkit-transform-origin: 0 0; -webkit-transform: translateY(100%); }
}

@-moz-keyframes slideDown {
0% { -moz-transform-origin: 0 0; -moz-transform: translateY(0%); }
100% { -moz-transform-origin: 0 0; -moz-transform: translateY(100%); }
}

@-o-keyframes slideDown { 
0% { -o-transform-origin: 0 0; -o-transform: translateY(0%); }
100% { -o-transform-origin: 0 0; -o-transform: translateY(100%); }
}

@-ms-keyframes slideDown {
0% { -ms-transform-origin: 0 0; -ms-transform: translateY(0%); }
100% { -ms-transform-origin: 0 0; -ms-transform: translateY(100%); }
}

@keyframes slideDown { 
0% { transform-origin: 0 0; transform: translateY(0%); }
100% { transform-origin: 0 0; transform: translateY(100%); }
}

.slideDown {
-webkit-animation-name: slideDown;
-moz-animation-name: slideDown;
-o-animation-name: slideDown;
animation-name: slideDown;
}

@-webkit-keyframes slideLeft { 
0% { -webkit-transform-origin: 0 0; -webkit-transform: translateX(0%); }
100% { -webkit-transform-origin: 0 0; -webkit-transform: translateX(-100%); }
}

@-moz-keyframes slideLeft {
0% { -moz-transform-origin: 0 0; -moz-transform: translateX(0%); }
100% { -moz-transform-origin: 0 0; -moz-transform: translateX(-100%); }
}

@-o-keyframes slideLeft { 
0% { -o-transform-origin: 0 0; -o-transform: translateX(0%); }
100% { -o-transform-origin: 0 0; -o-transform: translateX(-100%); }
}

@-ms-keyframes slideLeft {
0% { -ms-transform-origin: 0 0; -ms-transform: translateX(0%); }
100% { -ms-transform-origin: 0 0; -ms-transform: translateX(-100%); }
}

@keyframes slideLeft { 
0% { transform-origin: 0 0; transform: translateX(0%); }
100% { transform-origin: 0 0; transform: translateX(-100%); }
}

.slideLeft {
-webkit-animation-name: slideLeft;
-moz-animation-name: slideLeft;
-o-animation-name: slideLeft;
animation-name: slideLeft;
}

@-webkit-keyframes slideRight { 
0% { -webkit-transform-origin: 0 0; -webkit-transform: translateX(0%); }
100% { -webkit-transform-origin: 0 0; -webkit-transform: translateX(100%); }
}

@-moz-keyframes slideRight {
0% { -moz-transform-origin: 0 0; -moz-transform: translateX(0%); }
100% { -moz-transform-origin: 0 0; -moz-transform: translateX(100%); }
}

@-o-keyframes slideRight { 
0% { -o-transform-origin: 0 0; -o-transform: translateX(0%); }
100% { -o-transform-origin: 0 0; -o-transform: translateX(100%); }
}

@-ms-keyframes slideRight {
0% { -ms-transform-origin: 0 0; -ms-transform: translateX(0%); }
100% { -ms-transform-origin: 0 0; -ms-transform: translateX(100%); }
}

@keyframes slideRight { 
0% { transform-origin: 0 0; transform: translateX(0%); }
100% { transform-origin: 0 0; transform: translateX(100%); }
}

.slideRight {
-webkit-animation-name: slideRight;
-moz-animation-name: slideRight;
-o-animation-name: slideRight;
animation-name: slideRight;
}

@-webkit-keyframes slideUp { 
0% { -webkit-transform-origin: 0 0; -webkit-transform: translateY(0%); }
100% { -webkit-transform-origin: 0 0; -webkit-transform: translateY(-100%); }
}

@-moz-keyframes slideUp {
0% { -moz-transform-origin: 0 0; -moz-transform: translateY(0%); }
100% { -moz-transform-origin: 0 0; -moz-transform: translateY(-100%); }
}

@-o-keyframes slideUp { 
0% { -o-transform-origin: 0 0; -o-transform: translateY(0%); }
100% { -o-transform-origin: 0 0; -o-transform: translateY(-100%); }
}

@-ms-keyframes slideUp {
0% { -ms-transform-origin: 0 0; -ms-transform: translateY(0%); }
100% { -ms-transform-origin: 0 0; -ms-transform: translateY(-100%); }
}

@keyframes slideUp { 
0% { transform-origin: 0 0; transform: translateY(0%); }
100% { transform-origin: 0 0; transform: translateY(-100%); }
}

.slideUp {
-webkit-animation-name: slideUp;
-moz-animation-name: slideUp;
-o-animation-name: slideUp;
animation-name: slideUp;
}

@-webkit-keyframes slideDownRetourn {
0% { -webkit-transform-origin: 0 0; -webkit-transform: translateY(100%); }
100% { -webkit-transform-origin: 0 0; -webkit-transform: translateY(0%); }
}

@-moz-keyframes slideDownRetourn {
0% { -moz-transform-origin: 0 0; -moz-transform: translateY(100%); }
100% { -moz-transform-origin: 0 0; -moz-transform: translateY(0%); }
}

@-o-keyframes slideDownRetourn {
0% { -o-transform-origin: 0 0; -o-transform: translateY(100%); }
100% { -o-transform-origin: 0 0; -o-transform: translateY(0%); }
}

@-ms-keyframes slideDownRetourn {
0% { -ms-transform-origin: 0 0; -ms-transform: translateY(100%); }
100% { -ms-transform-origin: 0 0; -ms-transform: translateY(0%); }
}

@keyframes slideDownRetourn {
0% { transform-origin: 0 0; transform: translateY(100%); }
100% { transform-origin: 0 0; transform: translateY(0%); }
}

.slideDownRetourn {
-webkit-animation-name: slideDownRetourn;
-moz-animation-name: slideDownRetourn;
-o-animation-name: slideDownRetourn;
animation-name: slideDownRetourn;
}

@-webkit-keyframes slideLeftRetourn {
0% { -webkit-transform-origin: 0 0; -webkit-transform: translateX(-100%); }
100% { -webkit-transform-origin: 0 0; -webkit-transform: translateX(0%); }
}

@-moz-keyframes slideLeftRetourn {
0% { -moz-transform-origin: 0 0; -moz-transform: translateX(-100%); }
100% { -moz-transform-origin: 0 0; -moz-transform: translateX(0%); }
}

@-o-keyframes slideLeftRetourn {
0% { -o-transform-origin: 0 0; -o-transform: translateX(-100%); }
100% { -o-transform-origin: 0 0; -o-transform: translateX(0%); }
}

@-ms-keyframes slideLeftRetourn {
0% { -ms-transform-origin: 0 0; -ms-transform: translateX(-100%); }
100% { -ms-transform-origin: 0 0; -ms-transform: translateX(0%); }
}

@keyframes slideLeftRetourn {
0% { transform-origin: 0 0; transform: translateX(-100%); }
100% { transform-origin: 0 0; transform: translateX(0%); }
}

.slideLeftRetourn {
-webkit-animation-name: slideLeftRetourn;
-moz-animation-name: slideLeftRetourn;
-o-animation-name: slideLeftRetourn;
animation-name: slideLeftRetourn;
}

@-webkit-keyframes slideRightRetourn {
0% { -webkit-transform-origin: 0 0; -webkit-transform: translateX(100%); }
100% { -webkit-transform-origin: 0 0; -webkit-transform: translateX(0%); }
}

@-moz-keyframes slideRightRetourn {
0% { -moz-transform-origin: 0 0; -moz-transform: translateX(100%); }
100% { -moz-transform-origin: 0 0; -moz-transform: translateX(0%); }
}

@-o-keyframes slideRightRetourn {
0% { -o-transform-origin: 0 0; -o-transform: translateX(100%); }
100% { -o-transform-origin: 0 0; -o-transform: translateX(0%); }
}

@-ms-keyframes slideRightRetourn {
0% { -ms-transform-origin: 0 0; -ms-transform: translateX(100%); }
100% { -ms-transform-origin: 0 0; -ms-transform: translateX(0%); }
}

@keyframes slideRightRetourn {
0% { transform-origin: 0 0; transform: translateX(100%); }
100% { transform-origin: 0 0; transform: translateX(0%); }
}

.slideRightRetourn {
-webkit-animation-name: slideRightRetourn;
-moz-animation-name: slideRightRetourn;
-o-animation-name: slideRightRetourn;
animation-name: slideRightRetourn;
}

@-webkit-keyframes slideUpRetourn {
0% { -webkit-transform-origin: 0 0; -webkit-transform: translateY(-100%); }
100% { -webkit-transform-origin: 0 0; -webkit-transform: translateY(0%); }
}

@-moz-keyframes slideUpRetourn {
0% { -moz-transform-origin: 0 0; -moz-transform: translateY(-100%); }
100% { -moz-transform-origin: 0 0; -moz-transform: translateY(0%); }
}

@-o-keyframes slideUpRetourn {
0% { -o-transform-origin: 0 0; -o-transform: translateY(-100%); }
100% { -o-transform-origin: 0 0; -o-transform: translateY(0%); }
}

@-ms-keyframes slideUpRetourn {
0% { -ms-transform-origin: 0 0; -ms-transform: translateY(-100%); }
100% { -ms-transform-origin: 0 0; -ms-transform: translateY(0%); }
}

@keyframes slideUpRetourn {
0% { transform-origin: 0 0; transform: translateY(-100%); }
100% { transform-origin: 0 0; transform: translateY(0%); }
}

.slideUpRetourn {
-webkit-animation-name: slideUpRetourn;
-moz-animation-name: slideUpRetourn;
-o-animation-name: slideUpRetourn;
animation-name: slideUpRetourn;
}

@-webkit-keyframes swap { 
0% { opacity: 0; -webkit-transform-origin: 0 100%; -webkit-transform: scale(0.0,0.0) translate(-700px,0px); }
100% { opacity: 1; -webkit-transform-origin: 100% 100%; -webkit-transform: scale(1.0,1.0) translate(0px,0px); }
}

@-moz-keyframes swap {
0% { opacity: 0; -moz-transform-origin: 0 100%; -moz-transform: scale(0.0,0.0) translate(-700px,0px); }
100% { opacity: 1; -moz-transform-origin: 100% 100%; -moz-transform: scale(1.0,1.0) translate(0px,0px); }
}

@-o-keyframes swap { 
0% { opacity: 0; -o-transform-origin: 0 100%; -o-transform: scale(0.0,0.0) translate(-700px,0px); }
100% { opacity: 1; -o-transform-origin: 100% 100%; -o-transform: scale(1.0,1.0) translate(0px,0px); }
}

@keyframes swap { 
0% { opacity: 0; transform-origin: 0 100%; transform: scale(0.0,0.0) translate(-700px,0px); }
100% { opacity: 1; transform-origin: 100% 100%; transform: scale(1.0,1.0) translate(0px,0px); }
}

.swap { 
-webkit-animation-name: swap;
-moz-animation-name: swap;
-o-animation-name: swap;
animation-name: swap;
}

@-webkit-keyframes twisterInDown { 
0% { opacity: 0; -webkit-transform-origin: 0 100%; -webkit-transform: scale(0.0,0.0) rotate(360deg) translateY(-100%); }
30% { -webkit-transform-origin: 0 100%; -webkit-transform: scale(0.0,0.0) rotate(360deg) translateY(-100%); }
100% { opacity: 1; -webkit-transform-origin: 100% 100%; -webkit-transform: scale(1.0,1.0) rotate(0deg) translateY(0%); }
}

@-moz-keyframes twisterInDown {
0% { opacity: 0; -moz-transform-origin: 0 100%; -moz-transform: scale(0.0,0.0) rotate(360deg) translateY(-100%); }
30% { -moz-transform-origin: 0 100%; -moz-transform: scale(0.0,0.0) rotate(360deg) translateY(-100%); }
100% { opacity: 1; -moz-transform-origin: 100% 100%; -moz-transform: scale(1.0,1.0) rotate(0deg) translateY(0%); }
}

@-o-keyframes twisterInDown { 
0% { opacity: 0; -o-transform-origin: 0 100%; -o-transform: scale(0.0,0.0) rotate(360deg) translateY(-100%); }
30% { -o-transform-origin: 0 100%; -o-transform: scale(0.0,0.0) rotate(360deg) translateY(-100%); }
100% { opacity: 1; -o-transform-origin: 100% 100%; -o-transform: scale(1.0,1.0) rotate(0deg) translateY(0%); }
}

@keyframes twisterInDown { 
0% { opacity: 0; transform-origin: 0 100%; transform: scale(0.0,0.0) rotate(360deg) translateY(-100%); }
30% { transform-origin: 0 100%; transform: scale(0.0,0.0) rotate(360deg) translateY(-100%); }
100% { opacity: 1; transform-origin: 100% 100%; transform: scale(1.0,1.0) rotate(0deg) translateY(0%); }
}

.twisterInDown { 
-webkit-animation-name: twisterInDown;
-moz-animation-name: twisterInDown;
-o-animation-name: twisterInDown;
animation-name: twisterInDown;
}

@-webkit-keyframes twisterInUp { 
0% { opacity: 0; -webkit-transform-origin: 100% 0; -webkit-transform: scale(0.0,0.0) rotate(360deg) translateY(100%); }
30% { -webkit-transform-origin: 100% 0; -webkit-transform: scale(0.0,0.0) rotate(360deg) translateY(100%); }
100% { opacity: 1; -webkit-transform-origin: 0 0; -webkit-transform: scale(1.0,1.0) rotate(0deg) translateY(0%); }
}

@-moz-keyframes twisterInUp {
0% { opacity: 0; -moz-transform-origin: 100% 0; -moz-transform: scale(0.0,0.0) rotate(360deg) translateY(100%); }
30% { -moz-transform-origin: 100% 0; -moz-transform: scale(0.0,0.0) rotate(360deg) translateY(100%); }
100% { opacity: 1; -moz-transform-origin: 0 0; -moz-transform: scale(1.0,1.0) rotate(0deg) translateY(0); }
}

@-o-keyframes twisterInUp { 
0% { opacity: 0; -o-transform-origin: 100% 0; -o-transform: scale(0.0,0.0) rotate(360deg) translateY(100%); }
30% { -o-transform-origin: 100% 0; -o-transform: scale(0.0,0.0) rotate(360deg) translateY(100%); }
100% { opacity: 1; -o-transform-origin: 0 0; -o-transform: scale(1.0,1.0) rotate(0deg) translateY(0); }
}

@keyframes twisterInUp { 
0% { opacity: 0; transform-origin: 100% 0; transform: scale(0.0,0.0) rotate(360deg) translateY(100%); }
30% { transform-origin: 100% 0; transform: scale(0.0,0.0) rotate(360deg) translateY(100%); }
100% { opacity: 1; transform-origin: 0 0; transform: scale(1.0,1.0) rotate(0deg) translateY(0); }
}

.twisterInUp { 
-webkit-animation-name: twisterInUp;
-moz-animation-name: twisterInUp;
-o-animation-name: twisterInUp;
animation-name: twisterInUp;
}

@-webkit-keyframes vanishIn {
0% { opacity: 0; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(2.0,2.0); -webkit-filter: blur(90px); }
100% { opacity: 1; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(1.0,1.0); }
}

@-moz-keyframes vanishIn {
0% { opacity: 0; -moz-transform-origin: 50% 50%; -moz-transform: scale(2.0,2.0); filter: blur(90px); }
100% { opacity: 1; -moz-transform-origin: 50% 50%; -moz-transform: scale(1.0,1.0); }
}

@-o-keyframes vanishIn {
0% { opacity: 0; -o-transform-origin: 50% 50%; -o-transform: scale(2.0,2.0); -o-filter: blur(90px); }
100% { opacity: 1; -o-transform-origin: 50% 50%; -o-transform: scale(1.0,1.0); }
}

@keyframes vanishIn {
0% { opacity: 0; transform-origin: 50% 50%; transform: scale(2.0,2.0); filter: blur(90px); }
100% { opacity: 1; transform-origin: 50% 50%; transform: scale(1.0,1.0); }
}

.vanishIn { 
-webkit-animation-name: vanishIn;
-moz-animation-name: vanishIn;
-o-animation-name: vanishIn;
animation-name: vanishIn;
}

@-webkit-keyframes vanishOut { 
0% { opacity: 1; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(1.0,1.0); }
100% { opacity: 0; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(2.0,2.0); -webkit-filter: blur(20px); }
}

@-moz-keyframes vanishOut {
0% { opacity: 1; -moz-transform-origin: 50% 50%; -moz-transform: scale(1.0,1.0); }
100% { opacity: 0; -moz-transform-origin: 50% 50%; -moz-transform: scale(2.0,2.0); filter: blur(20px); }
}

@-o-keyframes vanishOut { 
0% { opacity: 1; -o-transform-origin: 50% 50%; -o-transform: scale(1.0,1.0); }
100% { opacity: 0; -o-transform-origin: 50% 50%; -o-transform: scale(2.0,2.0); -o-filter: blur(20px); }
}

@keyframes vanishOut { 
0% { opacity: 1; transform-origin: 50% 50%; transform: scale(1.0,1.0); }
100% { opacity: 0; transform-origin: 50% 50%; transform: scale(2.0,2.0); filter: blur(20px); }
}

.vanishOut { 
-webkit-animation-name: vanishOut;
-moz-animation-name: vanishOut;
-o-animation-name: vanishOut;
animation-name: vanishOut;
}


@-webkit-keyframes swashOut { 
0% { opacity: 1; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(1.0,1.0); }
80% { opacity: 1; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(0.9,0.9); }
100% { opacity: 0; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(0.0,0.0); }
}

@-moz-keyframes swashOut {
0% { opacity: 1; -moz-transform-origin: 50% 50%; -moz-transform: scale(1.0,1.0); }
80% { opacity: 1; -moz-transform-origin: 50% 50%; -moz-transform: scale(0.9,0.9); }
100% { opacity: 0; -moz-transform-origin: 50% 50%; -moz-transform: scale(0.0,0.0); }
}

@-o-keyframes swashOut { 
0% { opacity: 1; -o-transform-origin: 50% 50%; -o-transform: scale(1.0,1.0); }
80% { opacity: 1; -o-transform-origin: 50% 50%; -o-transform: scale(0.9,0.9); }
100% { opacity: 0; -o-transform-origin: 50% 50%; -o-transform: scale(0.0,0.0); }
}

@keyframes swashOut { 
0% { opacity: 1; transform-origin: 50% 50%; transform: scale(1.0,1.0); }
80% { opacity: 1; transform-origin: 50% 50%; transform: scale(0.9,0.9); }
100% { opacity: 0; transform-origin: 50% 50%; transform: scale(0.0,0.0); }
}

.swashOut {
-webkit-animation-name: swashOut;
-moz-animation-name: swashOut;
-o-animation-name: swashOut;
animation-name: swashOut;
}

@-webkit-keyframes swashIn { 
0% { opacity: 0; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(0.0,0.0); }
90% { opacity: 1; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(0.9,0.9); }
100% { -webkit-transform-origin: 50% 50%; -webkit-transform: scale(1.0,1.0); }
}

@-moz-keyframes swashIn {
0% { opacity: 0; -moz-transform-origin: 50% 50%; -moz-transform: scale(0.0,0.0); }
90% { opacity: 1; -moz-transform-origin: 50% 50%; -moz-transform: scale(0.9,0.9); }
100% { -moz-transform-origin: 50% 50%; -moz-transform: scale(1.0,1.0); }
}

@-o-keyframes swashIn { 
0% { opacity: 0; -o-transform-origin: 50% 50%; -o-transform: scale(0.0,0.0); }
90% { opacity: 1; -o-transform-origin: 50% 50%; -o-transform: scale(0.9,0.9); }
100% { -o-transform-origin: 50% 50%; -o-transform: scale(1.0,1.0); }
}

@keyframes swashIn { 
0% { opacity: 0; transform-origin: 50% 50%; transform: scale(0.0,0.0); }
90% { opacity: 1; transform-origin: 50% 50%; transform: scale(0.9,0.9); }
100% { transform-origin: 50% 50%; transform: scale(1.0,1.0); }
}

.swashIn {
-webkit-animation-name: swashIn;
-moz-animation-name: swashIn;
-o-animation-name: swashIn;
animation-name: swashIn;
}

@-webkit-keyframes foolishOut { 
0% { opacity: 1; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(1.0,1.0) rotate(360deg); }
20% { opacity: 1; -webkit-transform-origin: 0% 0%; -webkit-transform: scale(0.5,0.5) rotate(0deg); }
40% { opacity: 1; -webkit-transform-origin: 100% 0%; -webkit-transform: scale(0.5,0.5) rotate(0deg); }
60% { opacity: 1; -webkit-transform-origin: 100%% 100%; -webkit-transform: scale(0.5,0.5) rotate(0deg); }
80% { opacity: 1; -webkit-transform-origin: 0% 100%; -webkit-transform: scale(0.5,0.5) rotate(0deg); }
100% { opacity: 0; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(0.0,0.0) rotate(0deg); }
}

@-moz-keyframes foolishOut {
0% { opacity: 1; -moz-transform-origin: 50% 50%; -moz-transform: scale(1.0,1.0) rotate(360deg); }
20% { opacity: 1; -moz-transform-origin: 0% 0%; -moz-transform: scale(0.5,0.5) rotate(0deg); }
40% { opacity: 1; -moz-transform-origin: 100% 0%; -moz-transform: scale(0.5,0.5) rotate(0deg); }
60% { opacity: 1; -moz-transform-origin: 100%% 100%; -moz-transform: scale(0.5,0.5) rotate(0deg); }
80% { opacity: 1; -moz-transform-origin: 0% 100%; -moz-transform: scale(0.5,0.5) rotate(0deg); }
100% { opacity: 0; -moz-transform-origin: 50% 50%; -moz-transform: scale(0.0,0.0) rotate(0deg); }
}

@-o-keyframes foolishOut { 
0% { opacity: 1; -o-transform-origin: 50% 50%; -o-transform: scale(1.0,1.0) rotate(360deg); }
20% { opacity: 1; -o-transform-origin: 0% 0%; -o-transform: scale(0.5,0.5) rotate(0deg); }
40% { opacity: 1; -o-transform-origin: 100% 0%; -o-transform: scale(0.5,0.5) rotate(0deg); }
60% { opacity: 1; -o-transform-origin: 100%% 100%; -o-transform: scale(0.5,0.5) rotate(0deg); }
80% { opacity: 1; -o-transform-origin: 0% 100%; -o-transform: scale(0.5,0.5) rotate(0deg); }
100% { opacity: 0; -o-transform-origin: 50% 50%; -o-transform: scale(0.0,0.0) rotate(0deg); }
}

@keyframes foolishOut { 
0% { opacity: 1; transform-origin: 50% 50%; transform: scale(1.0,1.0) rotate(360deg); }
20% { opacity: 1; transform-origin: 0% 0%; transform: scale(0.5,0.5) rotate(0deg); }
40% { opacity: 1; transform-origin: 100% 0%; transform: scale(0.5,0.5) rotate(0deg); }
60% { opacity: 1; transform-origin: 100%% 100%; transform: scale(0.5,0.5) rotate(0deg); }
80% { opacity: 1; transform-origin: 0% 100%; transform: scale(0.5,0.5) rotate(0deg); }
100% { opacity: 0; transform-origin: 50% 50%; transform: scale(0.0,0.0) rotate(0deg); }
}

.foolishOut {
-webkit-animation-name: foolishOut;
-moz-animation-name: foolishOut;
-o-animation-name: foolishOut;
animation-name: foolishOut;
}

@-webkit-keyframes foolishIn { 
0% { opacity: 0; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(0.0,0.0) rotate(360deg); }
20% { opacity: 1; -webkit-transform-origin: 0% 100%; -webkit-transform: scale(0.5,0.5) rotate(0deg); }
40% { opacity: 1; -webkit-transform-origin: 100% 100%; -webkit-transform: scale(0.5,0.5) rotate(0deg); }
60% { opacity: 1; -webkit-transform-origin: 100%% 0%; -webkit-transform: scale(0.5,0.5) rotate(0deg); }
80% { opacity: 1; -webkit-transform-origin: 0% 0%; -webkit-transform: scale(0.5,0.5) rotate(0deg); }
100% { opacity: 1; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(1.0,1.0) rotate(0deg); }
}

@-moz-keyframes foolishIn {
0% { opacity: 0; -moz-transform-origin: 50% 50%; -moz-transform: scale(0.0,0.0) rotate(360deg); }
20% { opacity: 1; -moz-transform-origin: 0% 100%; -moz-transform: scale(0.5,0.5) rotate(0deg); }
40% { opacity: 1; -moz-transform-origin: 100% 100%; -moz-transform: scale(0.5,0.5) rotate(0deg); }
60% { opacity: 1; -moz-transform-origin: 100%% 0%; -moz-transform: scale(0.5,0.5) rotate(0deg); }
80% { opacity: 1; -moz-transform-origin: 0% 0%; -moz-transform: scale(0.5,0.5) rotate(0deg); }
100% { opacity: 1; -moz-transform-origin: 50% 50%; -moz-transform: scale(1.0,1.0) rotate(0deg); }
}

@-o-keyframes foolishIn { 
0% { opacity: 0; -o-transform-origin: 50% 50%; -o-transform: scale(0.0,0.0) rotate(360deg); }
20% { opacity: 1; -o-transform-origin: 0% 100%; -o-transform: scale(0.5,0.5) rotate(0deg); }
40% { opacity: 1; -o-transform-origin: 100% 100%; -o-transform: scale(0.5,0.5) rotate(0deg); }
60% { opacity: 1; -o-transform-origin: 100%% 0%; -o-transform: scale(0.5,0.5) rotate(0deg); }
80% { opacity: 1; -o-transform-origin: 0% 0%; -o-transform: scale(0.5,0.5) rotate(0deg); }
100% { opacity: 1; -o-transform-origin: 50% 50%; -o-transform: scale(1.0,1.0) rotate(0deg); }
}

@keyframes foolishIn { 
0% { opacity: 0; transform-origin: 50% 50%; transform: scale(0.0,0.0) rotate(360deg); }
20% { opacity: 1; transform-origin: 0% 100%; transform: scale(0.5,0.5) rotate(0deg); }
40% { opacity: 1; transform-origin: 100% 100%; transform: scale(0.5,0.5) rotate(0deg); }
60% { opacity: 1; transform-origin: 100%% 0%; transform: scale(0.5,0.5) rotate(0deg); }
80% { opacity: 1; transform-origin: 0% 0%; transform: scale(0.5,0.5) rotate(0deg); }
100% { opacity: 1; transform-origin: 50% 50%; transform: scale(1.0,1.0) rotate(0deg); }
}

.foolishIn {
-webkit-animation-name: foolishIn;
-moz-animation-name: foolishIn;
-o-animation-name: foolishIn;
animation-name: foolishIn;
}

@-webkit-keyframes holeOut { 
0% { opacity: 1; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(1.0,1.0) rotateY(0deg); }
100% { opacity: 0; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(0.0,0.0) rotateY(180deg); }
}

@-moz-keyframes holeOut {
0% { opacity: 1; -moz-transform-origin: 50% 50%; -moz-transform: scale(1.0,1.0) rotateY(0deg); }
100% { opacity: 0; -moz-transform-origin: 50% 50%; -moz-transform: scale(0.0,0.0) rotateY(180deg); }
}

@-o-keyframes holeOut { 
0% { opacity: 1; -o-transform-origin: 50% 50%; -o-transform: scale(1.0,1.0) rotateY(0deg); }
100% { opacity: 0; -o-transform-origin: 50% 50%; -o-transform: scale(0.0,0.0) rotateY(180deg); }
}

@keyframes holeOut { 
0% { opacity: 1; transform-origin: 50% 50%; transform: scale(1.0,1.0) rotateY(0deg); }
100% { opacity: 0; transform-origin: 50% 50%; transform: scale(0.0,0.0) rotateY(180deg); }
}

.holeOut {
-webkit-animation-name: holeOut;
-moz-animation-name: holeOut;
-o-animation-name: holeOut;
animation-name: holeOut;
}

@-webkit-keyframes tinRightOut { 
0%, 20%, 40%, 50% { opacity: 1; -webkit-transform: scale(1.0,1.0) translateX(0); }
10%, 30% { opacity: 1; -webkit-transform: scale(1.1,1.1) translateX(0); }
100% { opacity: 0; -webkit-transform: scale(1.0,1.0) translateX(900%); }
}

@-moz-keyframes tinRightOut {
0%, 20%, 40%, 50% { opacity: 1; -moz-transform: scale(1.0,1.0) translateX(0); }
10%, 30% { opacity: 1; -moz-transform: scale(1.1,1.1) translateX(0); }
100% { opacity: 0; -moz-transform: scale(1.0,1.0) translateX(900%); }
}

@-o-keyframes tinRightOut { 
0%, 20%, 40%, 50% { opacity: 1; -o-transform: scale(1.0,1.0) translateX(0); }
10%, 30% { opacity: 1; -o-transform: scale(1.1,1.1) translateX(0); }
100% { opacity: 0; -o-transform: scale(1.0,1.0) translateX(900%); }
}

@keyframes tinRightOut { 
0%, 20%, 40%, 50% { opacity: 1; transform: scale(1.0,1.0) translateX(0); }
10%, 30% { opacity: 1; transform: scale(1.1,1.1) translateX(0); }
100% { opacity: 0; transform: scale(1.0,1.0) translateX(900%); }
}

.tinRightOut {
-webkit-animation-name: tinRightOut;
-moz-animation-name: tinRightOut;
-o-animation-name: tinRightOut;
animation-name: tinRightOut;
}

@-webkit-keyframes tinLeftOut { 
0%, 20%, 40%, 50% { opacity: 1; -webkit-transform: scale(1.0,1.0) translateX(0); }
10%, 30% { opacity: 1; -webkit-transform: scale(1.1,1.1) translateX(0); }
100% { opacity: 0; -webkit-transform: scale(1.0,1.0) translateX(-900%); }
}

@-moz-keyframes tinLeftOut {
0%, 20%, 40%, 50% { opacity: 1; -moz-transform: scale(1.0,1.0) translateX(0); }
10%, 30% { opacity: 1; -moz-transform: scale(1.1,1.1) translateX(0); }
100% { opacity: 0; -moz-transform: scale(1.0,1.0) translateX(-900%); }
}

@-o-keyframes tinLeftOut { 
0%, 20%, 40%, 50% { opacity: 1; -o-transform: scale(1.0,1.0) translateX(0); }
10%, 30% { opacity: 1; -o-transform: scale(1.1,1.1) translateX(0); }
100% { opacity: 0; -o-transform: scale(1.0,1.0) translateX(-900%); }
}

@keyframes tinLeftOut { 
0%, 20%, 40%, 50% { opacity: 1; transform: scale(1.0,1.0) translateX(0); }
10%, 30% { opacity: 1; transform: scale(1.1,1.1) translateX(0); }
100% { opacity: 0; transform: scale(1.0,1.0) translateX(-900%); }
}

.tinLeftOut {
-webkit-animation-name: tinLeftOut;
-moz-animation-name: tinLeftOut;
-o-animation-name: tinLeftOut;
animation-name: tinLeftOut;
}

@-webkit-keyframes tinUpOut { 
0%, 20%, 40%, 50% { opacity: 1; -webkit-transform: scale(1.0,1.0) translateY(0); }
10%, 30% { opacity: 1; -webkit-transform: scale(1.1,1.1) translateY(0); }
100% { opacity: 0; -webkit-transform: scale(1.0,1.0) translateY(-900%); }
}

@-moz-keyframes tinUpOut {
0%, 20%, 40%, 50% { opacity: 1; -moz-transform: scale(1.0,1.0) translateY(0); }
10%, 30% { opacity: 1; -moz-transform: scale(1.1,1.1) translateY(0); }
100% { opacity: 0; -moz-transform: scale(1.0,1.0) translateY(-900%); }
}

@-o-keyframes tinUpOut { 
0%, 20%, 40%, 50% { opacity: 1; -o-transform: scale(1.0,1.0) translateY(0); }
10%, 30% { opacity: 1; -o-transform: scale(1.1,1.1) translateY(0); }
100% { opacity: 0; -o-transform: scale(1.0,1.0) translateY(-900%); }
}

@keyframes tinUpOut { 
0%, 20%, 40%, 50% { opacity: 1; transform: scale(1.0,1.0) translateY(0); }
10%, 30% { opacity: 1; transform: scale(1.1,1.1) translateY(0); }
100% { opacity: 0; transform: scale(1.0,1.0) translateY(-900%); }
}

.tinUpOut {
-webkit-animation-name: tinUpOut;
-moz-animation-name: tinUpOut;
-o-animation-name: tinUpOut;
animation-name: tinUpOut;
}

@-webkit-keyframes tinDownOut { 
0%, 20%, 40%, 50% { opacity: 1; -webkit-transform: scale(1.0,1.0) translateY(0); }
10%, 30% { opacity: 1; -webkit-transform: scale(1.1,1.1) translateY(0); }
100% { opacity: 0; -webkit-transform: scale(1.0,1.0) translateY(900%); }
}

@-moz-keyframes tinDownOut {
0%, 20%, 40%, 50% { opacity: 1; -moz-transform: scale(1.0,1.0) translateY(0); }
10%, 30% { opacity: 1; -moz-transform: scale(1.1,1.1) translateY(0); }
100% { opacity: 0; -moz-transform: scale(1.0,1.0) translateY(900%); }
}

@-o-keyframes tinDownOut { 
0%, 20%, 40%, 50% { opacity: 1; -o-transform: scale(1.0,1.0) translateY(0); }
10%, 30% { opacity: 1; -o-transform: scale(1.1,1.1) translateY(0); }
100% { opacity: 0; -o-transform: scale(1.0,1.0) translateY(900%); }
}

@keyframes tinDownOut { 
0%, 20%, 40%, 50% { opacity: 1; transform: scale(1.0,1.0) translateY(0); }
10%, 30% { opacity: 1; transform: scale(1.1,1.1) translateY(0); }
100% { opacity: 0; transform: scale(1.0,1.0) translateY(900%); }
}

.tinDownOut {
-webkit-animation-name: tinDownOut;
-moz-animation-name: tinDownOut;
-o-animation-name: tinDownOut;
animation-name: tinDownOut;
}

@-webkit-keyframes tinRightIn {
0% { opacity: 0; -webkit-transform: scale(1.0,1.0) translateX(900%); }
50%, 70%, 90% { opacity: 1; -webkit-transform: scale(1.1,1.1) translateX(0); }
60%, 80%, 100% { opacity: 1; -webkit-transform: scale(1.0,1.0) translateX(0); }
}

@-moz-keyframes tinRightIn {
0% { opacity: 0; -moz-transform: scale(1.0,1.0) translateX(900%); }
50%, 70%, 90% { opacity: 1; -moz-transform: scale(1.1,1.1) translateX(0); }
60%, 80%, 100% { opacity: 1; -moz-transform: scale(1.0,1.0) translateX(0); }
}

@-o-keyframes tinRightIn { 
0% { opacity: 0; -o-transform: scale(1.0,1.0) translateX(900%); }
50%, 70%, 90% { opacity: 1; -o-transform: scale(1.1,1.1) translateX(0); }
60%, 80%, 100% { opacity: 1; -o-transform: scale(1.0,1.0) translateX(0); }
}

@keyframes tinRightIn { 
0% { opacity: 0; transform: scale(1.0,1.0) translateX(900%); }
50%, 70%, 90% { opacity: 1; transform: scale(1.1,1.1) translateX(0); }
60%, 80%, 100% { opacity: 1; transform: scale(1.0,1.0) translateX(0); }
}

.tinRightIn {
-webkit-animation-name: tinRightIn;
-moz-animation-name: tinRightIn;
-o-animation-name: tinRightIn;
animation-name: tinRightIn;
}

@-webkit-keyframes tinLeftIn {
0% { opacity: 0; -webkit-transform: scale(1.0,1.0) translateX(-900%); }
50%, 70%, 90% { opacity: 1; -webkit-transform: scale(1.1,1.1) translateX(0); }
60%, 80%, 100% { opacity: 1; -webkit-transform: scale(1.0,1.0) translateX(0); }
}

@-moz-keyframes tinLeftIn {
0% { opacity: 0; -moz-transform: scale(1.0,1.0) translateX(-900%); }
50%, 70%, 90% { opacity: 1; -moz-transform: scale(1.1,1.1) translateX(0); }
60%, 80%, 100% { opacity: 1; -moz-transform: scale(1.0,1.0) translateX(0); }
}

@-o-keyframes tinLeftIn { 
0% { opacity: 0; -o-transform: scale(1.0,1.0) translateX(-900%); }
50%, 70%, 90% { opacity: 1; -o-transform: scale(1.1,1.1) translateX(0); }
60%, 80%, 100% { opacity: 1; -o-transform: scale(1.0,1.0) translateX(0); }
}

@keyframes tinLeftIn { 
0% { opacity: 0; transform: scale(1.0,1.0) translateX(-900%); }
50%, 70%, 90% { opacity: 1; transform: scale(1.1,1.1) translateX(0); }
60%, 80%, 100% { opacity: 1; transform: scale(1.0,1.0) translateX(0); }
}

.tinLeftIn {
-webkit-animation-name: tinLeftIn;
-moz-animation-name: tinLeftIn;
-o-animation-name: tinLeftIn;
animation-name: tinLeftIn;
}

@-webkit-keyframes tinUpIn {
0% { opacity: 0; -webkit-transform: scale(1.0,1.0) translateY(-900%); }
50%, 70%, 90% { opacity: 1; -webkit-transform: scale(1.1,1.1) translateY(0); }
60%, 80%, 100% { opacity: 1; -webkit-transform: scale(1.0,1.0) translateY(0); }
}

@-moz-keyframes tinUpIn {
0% { opacity: 0; -moz-transform: scale(1.0,1.0) translateY(-900%); }
50%, 70%, 90% { opacity: 1; -moz-transform: scale(1.1,1.1) translateY(0); }
60%, 80%, 100% { opacity: 1; -moz-transform: scale(1.0,1.0) translateY(0); }
}

@-o-keyframes tinUpIn { 
0% { opacity: 0; -o-transform: scale(1.0,1.0) translateY(-900%); }
50%, 70%, 90% { opacity: 1; -o-transform: scale(1.1,1.1) translateY(0); }
60%, 80%, 100% { opacity: 1; -o-transform: scale(1.0,1.0) translateY(0); }
}

@keyframes tinUpIn { 
0% { opacity: 0; transform: scale(1.0,1.0) translateY(-900%); }
50%, 70%, 90% { opacity: 1; transform: scale(1.1,1.1) translateY(0); }
60%, 80%, 100% { opacity: 1; transform: scale(1.0,1.0) translateY(0); }
}

.tinUpIn {
-webkit-animation-name: tinUpIn;
-moz-animation-name: tinUpIn;
-o-animation-name: tinUpIn;
animation-name: tinUpIn;
}

@-webkit-keyframes tinDownIn {
0% { opacity: 0; -webkit-transform: scale(1.0,1.0) translateY(900%); }
50%, 70%, 90% { opacity: 1; -webkit-transform: scale(1.1,1.1) translateY(0); }
60%, 80%, 100% { opacity: 1; -webkit-transform: scale(1.0,1.0) translateY(0); }
}

@-moz-keyframes tinDownIn {
0% { opacity: 0; -moz-transform: scale(1.0,1.0) translateY(900%); }
50%, 70%, 90% { opacity: 1; -moz-transform: scale(1.1,1.1) translateY(0); }
60%, 80%, 100% { opacity: 1; -moz-transform: scale(1.0,1.0) translateY(0); }
}

@-o-keyframes tinDownIn { 
0% { opacity: 0; -o-transform: scale(1.0,1.0) translateY(900%); }
50%, 70%, 90% { opacity: 1; -o-transform: scale(1.1,1.1) translateY(0); }
60%, 80%, 100% { opacity: 1; -o-transform: scale(1.0,1.0) translateY(0); }
}

@keyframes tinDownIn { 
0% { opacity: 0; transform: scale(1.0,1.0) translateY(900%); }
50%, 70%, 90% { opacity: 1; transform: scale(1.1,1.1) translateY(0); }
60%, 80%, 100% { opacity: 1; transform: scale(1.0,1.0) translateY(0); }
}

.tinDownIn {
-webkit-animation-name: tinDownIn;
-moz-animation-name: tinDownIn;
-o-animation-name: tinDownIn;
animation-name: tinDownIn;
}

@-webkit-keyframes bombRightOut { 
0% { opacity: 1; -webkit-transform-origin: 50% 50%; -webkit-transform: rotate(0deg); -webkit-filter: blur(0px); }
50% { opacity: 1; -webkit-transform-origin: 200% 50%; -webkit-transform: rotate(160deg); -webkit-filter: blur(0px); }
100% { opacity: 0; -webkit-transform-origin: 200% 50%; -webkit-transform: rotate(160deg); -webkit-filter: blur(20px); }
}

@-moz-keyframes bombRightOut {
0% { opacity: 1; -moz-transform-origin: 50% 50%; -moz-transform: rotate(0deg); filter: blur(0px); }
50% { opacity: 1; -moz-transform-origin: 200% 50%; -moz-transform: rotate(160deg); filter: blur(0px); }
100% { opacity: 0; -moz-transform-origin: 200% 50%; -moz-transform: rotate(160deg); filter: blur(20px); }
}

@-o-keyframes bombRightOut { 
0% { opacity: 1; -o-transform-origin: 50% 50%; -o-transform: rotate(0deg); -o-filter: blur(0px); }
50% { opacity: 1; -o-transform-origin: 200% 50%; -o-transform: rotate(160deg); -o-filter: blur(0px); }
100% { opacity: 0; -o-transform-origin: 200% 50%; -o-transform: rotate(160deg); -o-filter: blur(20px); }
}

@keyframes bombRightOut { 
0% { opacity: 1; transform-origin: 50% 50%; transform: rotate(0deg); filter: blur(0px); }
50% { opacity: 1; transform-origin: 200% 50%; transform: rotate(160deg); filter: blur(0px); }
100% { opacity: 0; transform-origin: 200% 50%; transform: rotate(160deg); filter: blur(20px); }
}

.bombRightOut { 
-webkit-animation-name: bombRightOut;
-moz-animation-name: bombRightOut;
-o-animation-name: bombRightOut;
animation-name: bombRightOut;
}

@-webkit-keyframes bombLeftOut { 
0% { opacity: 1; -webkit-transform-origin: 50% 50%; -webkit-transform: rotate(0deg); -webkit-filter: blur(0px); }
50% { opacity: 1; -webkit-transform-origin: -100% 50%; -webkit-transform: rotate(-160deg); -webkit-filter: blur(0px); }
100% { opacity: 0; -webkit-transform-origin: -100% 50%; -webkit-transform: rotate(-160deg); -webkit-filter: blur(20px); }
}

@-moz-keyframes bombLeftOut {
0% { opacity: 1; -moz-transform-origin: 50% 50%; -moz-transform: rotate(0deg); filter: blur(0px); }
50% { opacity: 1; -moz-transform-origin: -100% 50%; -moz-transform: rotate(-160deg); filter: blur(0px); }
100% { opacity: 0; -moz-transform-origin: -100% 50%; -moz-transform: rotate(-160deg); filter: blur(20px); }
}

@-o-keyframes bombLeftOut { 
0% { opacity: 1; -o-transform-origin: 50% 50%; -o-transform: rotate(0deg); -o-filter: blur(0px); }
50% { opacity: 1; -o-transform-origin: -100% 50%; -o-transform: rotate(-160deg); -o-filter: blur(0px); }
100% { opacity: 0; -o-transform-origin: -100% 50%; -o-transform: rotate(-160deg); -o-filter: blur(20px); }
}

@keyframes bombLeftOut { 
0% { opacity: 1; transform-origin: 50% 50%; transform: rotate(0deg); filter: blur(0px); }
50% { opacity: 1; transform-origin: -100% 50%; transform: rotate(-160deg); filter: blur(0px); }
100% { opacity: 0; transform-origin: -100% 50%; transform: rotate(-160deg); filter: blur(20px); }
}

.bombLeftOut {
-webkit-animation-name: bombLeftOut;
-moz-animation-name: bombLeftOut;
-o-animation-name: bombLeftOut;
animation-name: bombLeftOut;
}