magic.min.css

@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);filter:blur(2px)}100%{opacity:1;transform-origin:50% 50%;transform:scale(1,1);filter:blur(0)}}.puffOut{animation-name:puffOut}@keyframes puffOut{0%{opacity:1;transform-origin:50% 50%;transform:scale(1,1);filter:blur(0)}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(0)}}.vanishOut{animation-name:vanishOut}@keyframes vanishOut{0%{opacity:1;transform-origin:50% 50%;transform:scale(1,1);filter:blur(0)}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(0)}}.boingOutDown{animation-name:boingOutDown}@keyframes boingOutDown{0%{opacity:1;transform-origin:100% 100%;transform:perspective(800px) rotateX(0) rotateY(0)}20%{opacity:1;transform-origin:100% 100%;transform:perspective(800px) rotateX(0) rotateY(10deg)}30%{opacity:1;transform-origin:0 100%;transform:perspective(800px) rotateX(0) rotateY(0)}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(0)}}.bombLeftOut{animation-name:bombLeftOut}@keyframes bombLeftOut{0%{opacity:1;transform-origin:50% 50%;transform:rotate(0);filter:blur(0)}50%{opacity:1;transform-origin:-100% 50%;transform:rotate(-160deg);filter:blur(0)}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(0);filter:blur(0)}50%{opacity:1;transform-origin:200% 50%;transform:rotate(160deg);filter:blur(0)}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(0)}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,0)}100%{opacity:1;transform-origin:100% 100%;transform:scale(1,1) translate(0,0)}}.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(0) 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(0) 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(.5,.5) rotate(0)}40%{opacity:1;transform-origin:100% 100%;transform:scale(.5,.5) rotate(0)}60%{opacity:1;transform-origin:0;transform:scale(.5,.5) rotate(0)}80%{opacity:1;transform-origin:0 0;transform:scale(.5,.5) rotate(0)}100%{opacity:1;transform-origin:50% 50%;transform:scale(1,1) rotate(0)}}.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(.5,.5) rotate(0)}40%{opacity:1;transform-origin:100% 0;transform:scale(.5,.5) rotate(0)}60%{opacity:1;transform-origin:0;transform:scale(.5,.5) rotate(0)}80%{opacity:1;transform-origin:0 100%;transform:scale(.5,.5) rotate(0)}100%{opacity:0;transform-origin:50% 50%;transform:scale(0,0) rotate(0)}}.holeOut{animation-name:holeOut}@keyframes holeOut{0%{opacity:1;transform-origin:50% 50%;transform:scale(1,1) rotateY(0)}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)}90%{opacity:1;transform-origin:50% 50%;transform:scale(.9,.9)}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(.9,.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(0)}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(0)}}.perspectiveLeft{animation-name:perspectiveLeft}@keyframes perspectiveLeft{0%{transform-origin:0 0;transform:perspective(800px) rotateY(0)}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(0)}}.perspectiveRight{animation-name:perspectiveRight}@keyframes perspectiveRight{0%{transform-origin:100% 0;transform:perspective(800px) rotateY(0)}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(0)}}.perspectiveUp{animation-name:perspectiveUp}@keyframes perspectiveUp{0%{transform-origin:0 0;transform:perspective(800px) rotateX(0)}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(0)}}.rotateDown{animation-name:rotateDown}@keyframes rotateDown{0%{opacity:1;transform-origin:0 0;transform:perspective(800px) rotateX(0) translateZ(0)}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(0) translateZ(0)}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(0) translate3d(0)}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(0) translateZ(0)}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(0);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(0);animation-timing-function:ease-out}}.openDownRight{animation-name:openDownRight}@keyframes openDownRight{0%{transform-origin:bottom right;transform:rotate(0);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(0);animation-timing-function:ease-out}}.openUpLeft{animation-name:openUpLeft}@keyframes openUpLeft{0%{transform-origin:top left;transform:rotate(0);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(0);animation-timing-function:ease-out}}.openUpRight{animation-name:openUpRight}@keyframes openUpRight{0%{transform-origin:top right;transform:rotate(0);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(0);animation-timing-function:ease-out}}.openDownLeftOut{animation-name:openDownLeftOut}@keyframes openDownLeftOut{0%{opacity:1;transform-origin:bottom left;transform:rotate(0);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(0);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(0);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(0);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)}100%,60%,80%{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)}100%,60%,80%{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)}100%,60%,80%{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)}100%,60%,80%{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%)}}