.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}