@charset "UTF-8";
 .magictime{animation-duration:1s;animation-fill-mode:both;}
.puffIn{animation-name:puffIn;}
@keyframes puffIn {
0%{opacity:0;transform-origin:50% 50%;transform:scale(2,2);}
100%{opacity:1;transform-origin:50% 50%;transform:scale(1,1);}
}
.puffOut{animation-name:puffOut;}
@keyframes puffOut {
0%{opacity:1;transform-origin:50% 50%;transform:scale(1,1);filter:blur(0px);}
100%{opacity:0;transform-origin:50% 50%;transform:scale(2,2);filter:blur(2px);}
}
.vanishIn{animation-name:vanishIn;}
@keyframes vanishIn {
0%{opacity:0;transform-origin:50% 50%;transform:scale(2, 2);filter:blur(90px);}
100%{opacity:1;transform-origin:50% 50%;transform:scale(1, 1);filter:blur(0px);}
}
.vanishOut{animation-name:vanishOut;}
@keyframes vanishOut {
0%{opacity:1;transform-origin:50% 50%;transform:scale(1, 1);filter:blur(0px);}
100%{opacity:0;transform-origin:50% 50%;transform:scale(2, 2);filter:blur(20px);}
}
.boingInUp{animation-name:boingInUp;}
@keyframes boingInUp {
0%{opacity:0;transform-origin:50% 0%;transform:perspective(800px) rotateX(-90deg);}
50%{opacity:1;transform-origin:50% 0%;transform:perspective(800px) rotateX(50deg);}
100%{opacity:1;transform-origin:50% 0%;transform:perspective(800px) rotateX(0deg);}
}
.boingOutDown{animation-name:boingOutDown;}
@keyframes boingOutDown {
0%{opacity:1;transform-origin:100% 100%;transform:perspective(800px) rotateX(0deg) rotateY(0deg);}
20%{opacity:1;transform-origin:100% 100%;transform:perspective(800px) rotateX(0deg) rotateY(10deg);}
30%{opacity:1;transform-origin:0% 100%;transform:perspective(800px) rotateX(0deg) rotateY(0deg);}
40%{opacity:1;transform-origin:0% 100%;transform:perspective(800px) rotateX(10deg) rotateY(10deg);}
100%{opacity:0;transform-origin:100% 100%;transform:perspective(800px) rotateX(90deg) rotateY(0deg);}
}
.bombLeftOut{animation-name:bombLeftOut;}
@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);}
}
.bombRightOut{animation-name:bombRightOut;}
@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);}
}
.magic{animation-name:magic;}
@keyframes magic {
0%{opacity:1;transform-origin:100% 200%;transform:scale(1, 1) rotate(0deg);}
100%{opacity:0;transform-origin:200% 500%;transform:scale(0, 0) rotate(270deg);}
}
.swap{animation-name:swap;}
@keyframes swap {
0%{opacity:0;transform-origin:0 100%;transform:scale(0, 0) translate(-700px, 0px);}
100%{opacity:1;transform-origin:100% 100%;transform:scale(1, 1) translate(0px, 0px);}
}
.twisterInDown{animation-name:twisterInDown;}
@keyframes twisterInDown {
0%{opacity:0;transform-origin:0 100%;transform:scale(0, 0) rotate(360deg) translateY(-100%);}
30%{transform-origin:0 100%;transform:scale(0, 0) rotate(360deg) translateY(-100%);}
100%{opacity:1;transform-origin:100% 100%;transform:scale(1, 1) rotate(0deg) translateY(0%);}
}
.twisterInUp{animation-name:twisterInUp;}
@keyframes twisterInUp {
0%{opacity:0;transform-origin:100% 0;transform:scale(0, 0) rotate(360deg) translateY(100%);}
30%{transform-origin:100% 0;transform:scale(0, 0) rotate(360deg) translateY(100%);}
100%{opacity:1;transform-origin:0 0;transform:scale(1, 1) rotate(0deg) translateY(0);}
}
.foolishIn{animation-name:foolishIn;}
@keyframes foolishIn {
0%{opacity:0;transform-origin:50% 50%;transform:scale(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: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, 1) rotate(0deg);}
}
.foolishOut{animation-name:foolishOut;}
@keyframes foolishOut {
0%{opacity:1;transform-origin:50% 50%;transform:scale(1, 1) 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:0%;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) rotate(0deg);}
}
.holeOut{animation-name:holeOut;}
@keyframes holeOut {
0%{opacity:1;transform-origin:50% 50%;transform:scale(1, 1) rotateY(0deg);}
100%{opacity:0;transform-origin:50% 50%;transform:scale(0, 0) rotateY(180deg);}
}
.swashIn{animation-name:swashIn;}
@keyframes swashIn {
0%{opacity:0;transform-origin:50% 50%;transform:scale(0, 0);}
100%{opacity:1;transform-origin:50% 50%;transform:scale(1, 1);}
}
.swashOut{animation-name:swashOut;}
@keyframes swashOut {
0%{opacity:1;transform-origin:50% 50%;transform:scale(1, 1);}
80%{opacity:1;transform-origin:50% 50%;transform:scale(0.9, 0.9);}
100%{opacity:0;transform-origin:50% 50%;transform:scale(0, 0);}
}
.spaceInDown{animation-name:spaceInDown;}
@keyframes spaceInDown {
0%{opacity:0;transform-origin:50% 100%;transform:scale(.2) translate(0%, 200%);}
100%{opacity:1;transform-origin:50% 100%;transform:scale(1) translate(0%, 0%);}
}
.spaceInLeft{animation-name:spaceInLeft;}
@keyframes spaceInLeft {
0%{opacity:0;transform-origin:0% 50%;transform:scale(.2) translate(-200%, 0%);}
100%{opacity:1;transform-origin:0% 50%;transform:scale(1) translate(0%, 0%);}
}
.spaceInRight{animation-name:spaceInRight;}
@keyframes spaceInRight {
0%{opacity:0;transform-origin:100% 50%;transform:scale(.2) translate(200%, 0%);}
100%{opacity:1;transform-origin:100% 50%;transform:scale(1) translate(0%, 0%);}
}
.spaceInUp{animation-name:spaceInUp;}
@keyframes spaceInUp {
0%{opacity:0;transform-origin:50% 0%;transform:scale(.2) translate(0%, -200%);}
100%{opacity:1;transform-origin:50% 0%;transform:scale(1) translate(0%, 0%);}
}
.spaceOutDown{animation-name:spaceOutDown;}
@keyframes spaceOutDown {
0%{opacity:1;transform-origin:50% 100%;transform:scale(1) translate(0%, 0%);}
100%{opacity:0;transform-origin:50% 100%;transform:scale(.2) translate(0%, 200%);}
}
.spaceOutLeft{animation-name:spaceOutLeft;}
@keyframes spaceOutLeft {
0%{opacity:1;transform-origin:0% 50%;transform:scale(1) translate(0%, 0%);}
100%{opacity:0;transform-origin:0% 50%;transform:scale(.2) translate(-200%, 0%);}
}
.spaceOutRight{animation-name:spaceOutRight;}
@keyframes spaceOutRight {
0%{opacity:1;transform-origin:100% 50%;transform:scale(1) translate(0%, 0%);}
100%{opacity:0;transform-origin:100% 50%;transform:scale(.2) translate(200%, 0%);}
}
.spaceOutUp{animation-name:spaceOutUp;}
@keyframes spaceOutUp {
0%{opacity:1;transform-origin:50% 0%;transform:scale(1) translate(0%, 0%);}
100%{opacity:0;transform-origin:50% 0%;transform:scale(.2) translate(0%, -200%);}
}
.perspectiveDown{animation-name:perspectiveDown;}
@keyframes perspectiveDown {
0%{transform-origin:0 100%;transform:perspective(800px) rotateX(0deg);}
100%{transform-origin:0 100%;transform:perspective(800px) rotateX(-180deg);}
}
.perspectiveDownReturn{animation-name:perspectiveDownReturn;}
@keyframes perspectiveDownReturn {
0%{transform-origin:0 100%;transform:perspective(800px) rotateX(-180deg);}
100%{transform-origin:0 100%;transform:perspective(800px) rotateX(0deg);}
}
.perspectiveLeft{animation-name:perspectiveLeft;}
@keyframes perspectiveLeft {
0%{transform-origin:0 0;transform:perspective(800px) rotateY(0deg);}
100%{transform-origin:0 0;transform:perspective(800px) rotateY(-180deg);}
}
.perspectiveLeftReturn{animation-name:perspectiveLeftReturn;}
@keyframes perspectiveLeftReturn {
0%{transform-origin:0 0;transform:perspective(800px) rotateY(-180deg);}
100%{transform-origin:0 0;transform:perspective(800px) rotateY(0deg);}
}
.perspectiveRight{animation-name:perspectiveRight;}
@keyframes perspectiveRight {
0%{transform-origin:100% 0;transform:perspective(800px) rotateY(0deg);}
100%{transform-origin:100% 0;transform:perspective(800px) rotateY(180deg);}
}
.perspectiveRightReturn{animation-name:perspectiveRightReturn;}
@keyframes perspectiveRightReturn {
0%{transform-origin:100% 0;transform:perspective(800px) rotateY(180deg);}
100%{transform-origin:100% 0;transform:perspective(800px) rotateY(0deg);}
}
.perspectiveUp{animation-name:perspectiveUp;}
@keyframes perspectiveUp {
0%{transform-origin:0 0;transform:perspective(800px) rotateX(0deg);}
100%{transform-origin:0 0;transform:perspective(800px) rotateX(180deg);}
}
.perspectiveUpReturn{animation-name:perspectiveUpReturn;}
@keyframes perspectiveUpReturn {
0%{transform-origin:0 0;transform:perspective(800px) rotateX(180deg);}
100%{transform-origin:0 0;transform:perspective(800px) rotateX(0deg);}
}
.rotateDown{animation-name:rotateDown;}
@keyframes rotateDown {
0%{opacity:1;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);}
}
.rotateLeft{animation-name:rotateLeft;}
@keyframes rotateLeft {
0%{opacity:1;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);}
}
.rotateRight{animation-name:rotateRight;}
@keyframes rotateRight {
0%{opacity:1;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);}
}
.rotateUp{animation-name:rotateUp;}
@keyframes rotateUp {
0%{opacity:1;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);}
}
.slideDown{animation-name:slideDown;}
@keyframes slideDown {
0%{transform-origin:0 0;transform:translateY(0%);}
100%{transform-origin:0 0;transform:translateY(100%);}
}
.slideDownReturn{animation-name:slideDownReturn;}
@keyframes slideDownReturn {
0%{transform-origin:0 0;transform:translateY(100%);}
100%{transform-origin:0 0;transform:translateY(0%);}
}
.slideLeft{animation-name:slideLeft;}
@keyframes slideLeft {
0%{transform-origin:0 0;transform:translateX(0%);}
100%{transform-origin:0 0;transform:translateX(-100%);}
}
.slideLeftReturn{animation-name:slideLeftReturn;}
@keyframes slideLeftReturn {
0%{transform-origin:0 0;transform:translateX(-100%);}
100%{transform-origin:0 0;transform:translateX(0%);}
}
.slideRight{animation-name:slideRight;}
@keyframes slideRight {
0%{transform-origin:0 0;transform:translateX(0%);}
100%{transform-origin:0 0;transform:translateX(100%);}
}
.slideRightReturn{animation-name:slideRightReturn;}
@keyframes slideRightReturn {
0%{transform-origin:0 0;transform:translateX(100%);}
100%{transform-origin:0 0;transform:translateX(0%);}
}
.slideUp{animation-name:slideUp;}
@keyframes slideUp {
0%{transform-origin:0 0;transform:translateY(0%);}
100%{transform-origin:0 0;transform:translateY(-100%);}
}
.slideUpReturn{animation-name:slideUpReturn;}
@keyframes slideUpReturn {
0%{transform-origin:0 0;transform:translateY(-100%);}
100%{transform-origin:0 0;transform:translateY(0%);}
}
.openDownLeft{animation-name:openDownLeft;}
@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;}
}
.openDownLeftReturn{animation-name:openDownLeftReturn;}
@keyframes openDownLeftReturn {
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;}
}
.openDownRight{animation-name:openDownRight;}
@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;}
}
.openDownRightReturn{animation-name:openDownRightReturn;}
@keyframes openDownRightReturn {
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;}
}
.openUpLeft{animation-name:openUpLeft;}
@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;}
}
.openUpLeftReturn{animation-name:openUpLeftReturn;}
@keyframes openUpLeftReturn {
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;}
}
.openUpRight{animation-name:openUpRight;}
@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;}
}
.openUpRightReturn{animation-name:openUpRightReturn;}
@keyframes openUpRightReturn {
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;}
}
.openDownLeftOut{animation-name:openDownLeftOut;}
@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;}
}
.openDownRightOut{animation-name:openDownRightOut;}
@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;}
}
.openUpLeftOut{animation-name:openUpLeftOut;}
@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;}
}
.openUpRightOut{animation-name:openUpRightOut;}
@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;}
}
.tinDownIn{animation-name:tinDownIn;}
@keyframes tinDownIn {
0%{opacity:0;transform:scale(1, 1) translateY(900%);}
50%, 70%, 90%{opacity:1;transform:scale(1.1, 1.1) translateY(0);}
60%, 80%, 100%{opacity:1;transform:scale(1, 1) translateY(0);}
}
.tinDownOut{animation-name:tinDownOut;}
@keyframes tinDownOut {
0%, 20%, 40%, 50%{opacity:1;transform:scale(1, 1) translateY(0);}
10%, 30%{opacity:1;transform:scale(1.1, 1.1) translateY(0);}
100%{opacity:0;transform:scale(1, 1) translateY(900%);}
}
.tinLeftIn{animation-name:tinLeftIn;}
@keyframes tinLeftIn {
0%{opacity:0;transform:scale(1, 1) translateX(-900%);}
50%, 70%, 90%{opacity:1;transform:scale(1.1, 1.1) translateX(0);}
60%, 80%, 100%{opacity:1;transform:scale(1, 1) translateX(0);}
}
.tinLeftOut{animation-name:tinLeftOut;}
@keyframes tinLeftOut {
0%, 20%, 40%, 50%{opacity:1;transform:scale(1, 1) translateX(0);}
10%, 30%{opacity:1;transform:scale(1.1, 1.1) translateX(0);}
100%{opacity:0;transform:scale(1, 1) translateX(-900%);}
}
.tinRightIn{animation-name:tinRightIn;}
@keyframes tinRightIn {
0%{opacity:0;transform:scale(1, 1) translateX(900%);}
50%, 70%, 90%{opacity:1;transform:scale(1.1, 1.1) translateX(0);}
60%, 80%, 100%{opacity:1;transform:scale(1, 1) translateX(0);}
}
.tinRightOut{animation-name:tinRightOut;}
@keyframes tinRightOut {
0%, 20%, 40%, 50%{opacity:1;transform:scale(1, 1) translateX(0);}
10%, 30%{opacity:1;transform:scale(1.1, 1.1) translateX(0);}
100%{opacity:0;transform:scale(1, 1) translateX(900%);}
}
.tinUpIn{animation-name:tinUpIn;}
@keyframes tinUpIn {
0%{opacity:0;transform:scale(1, 1) translateY(-900%);}
50%, 70%, 90%{opacity:1;transform:scale(1.1, 1.1) translateY(0);}
60%, 80%, 100%{opacity:1;transform:scale(1, 1) translateY(0);}
}
.tinUpOut{animation-name:tinUpOut;}
@keyframes tinUpOut {
0%, 20%, 40%, 50%{opacity:1;transform:scale(1, 1) translateY(0);}
10%, 30%{opacity:1;transform:scale(1.1, 1.1) translateY(0);}
100%{opacity:0;transform:scale(1, 1) translateY(-900%);}
}
.animated[class*="slide"]{opacity:1 !important;}
.imageAnimation{animation-name:imageAnimation;}
@-webkit-keyframes imageAnimation {
0%{opacity:0;-webkit-animation-timing-function:ease-in}
8%{opacity:1;-webkit-transform:scale(1.05);-webkit-animation-timing-function:ease-out}
17%{opacity:1;-webkit-transform:scale(1.1)}
25%{opacity:0;-webkit-transform:scale(1.1)}
100%{opacity:0}
}
@-moz-keyframes imageAnimation {
0%{opacity:0;-moz-animation-timing-function:ease-in}
8%{opacity:1;-moz-transform:scale(1.05);-moz-animation-timing-function:ease-out}
17%{opacity:1;-moz-transform:scale(1.1)}
25%{opacity:0;-moz-transform:scale(1.1)}
100%{opacity:0}
}
@-o-keyframes imageAnimation {
0%{opacity:0;-o-animation-timing-function:ease-in}
8%{opacity:1;-o-transform:scale(1.05);-o-animation-timing-function:ease-out}
17%{opacity:1;-o-transform:scale(1.1)}
25%{opacity:0;-o-transform:scale(1.1)}
100%{opacity:0}
}
@-ms-keyframes imageAnimation {
17%,
8%{opacity:1}
17%,
25%{-ms-transform:scale(1.1)}
0%,
100%,
25%{opacity:0}
0%{-ms-animation-timing-function:ease-in}
8%{-ms-transform:scale(1.05);-ms-animation-timing-function:ease-out}
}
@keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in
}
8% {
opacity: 1;
transform: scale(1.05);
animation-timing-function: ease-out
}
17% {
opacity: 1;
transform: scale(1.1)
}
25% {
opacity: 0;
transform: scale(1.1)
}
100% {
opacity: 0
}
}