.ani-swoopInTop {
  -webkit-animation-name: swoopInTop;
          animation-name: swoopInTop;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
}
.ani-swoopOutTop {
  -webkit-animation-name: swoopOutTop;
          animation-name: swoopOutTop;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
}
@-webkit-keyframes swoopInTop {
  0% {
    opacity: 0;
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: scaleY(1.5) translate3d(0, -400px, 0);
            transform: scaleY(1.5) translate3d(0, -400px, 0);
  }
  40% {
    opacity: 1;
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
            animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    -webkit-transform: scaleY(1.2) translate3d(0, 0, 0);
            transform: scaleY(1.2) translate3d(0, 0, 0);
  }
  65% {
    -webkit-transform: scaleY(1) translate3d(0, 20px, 0);
            transform: scaleY(1) translate3d(0, 20px, 0);
  }
  100% {
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
            animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    -webkit-transform: scaleY(1) translate3d(0, 0, 0);
            transform: scaleY(1) translate3d(0, 0, 0);
  }
}
@keyframes swoopInTop {
  0% {
    opacity: 0;
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: scaleY(1.5) translate3d(0, -400px, 0);
            transform: scaleY(1.5) translate3d(0, -400px, 0);
  }
  40% {
    opacity: 1;
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
            animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    -webkit-transform: scaleY(1.2) translate3d(0, 0, 0);
            transform: scaleY(1.2) translate3d(0, 0, 0);
  }
  65% {
    -webkit-transform: scaleY(1) translate3d(0, 20px, 0);
            transform: scaleY(1) translate3d(0, 20px, 0);
  }
  100% {
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
            animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    -webkit-transform: scaleY(1) translate3d(0, 0, 0);
            transform: scaleY(1) translate3d(0, 0, 0);
  }
}
@-webkit-keyframes swoopOutTop {
  0% {
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
            animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    -webkit-transform: scaleY(1) translate3d(0, 0, 0);
            transform: scaleY(1) translate3d(0, 0, 0);
  }
  40% {
    opacity: 1;
    -webkit-transform: scaleY(1) translate3d(0, 20px, 0);
            transform: scaleY(1) translate3d(0, 20px, 0);
  }
  60% {
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
            animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    -webkit-transform: scaleY(1.2) translate3d(0, 0, 0);
            transform: scaleY(1.2) translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: scaleY(1.5) translate3d(0, -400px, 0);
            transform: scaleY(1.5) translate3d(0, -400px, 0);
  }
}
@keyframes swoopOutTop {
  0% {
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
            animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    -webkit-transform: scaleY(1) translate3d(0, 0, 0);
            transform: scaleY(1) translate3d(0, 0, 0);
  }
  40% {
    opacity: 1;
    -webkit-transform: scaleY(1) translate3d(0, 20px, 0);
            transform: scaleY(1) translate3d(0, 20px, 0);
  }
  60% {
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
            animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    -webkit-transform: scaleY(1.2) translate3d(0, 0, 0);
            transform: scaleY(1.2) translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: scaleY(1.5) translate3d(0, -400px, 0);
            transform: scaleY(1.5) translate3d(0, -400px, 0);
  }
}
.ani-rollInLeft {
  -webkit-animation-name: rollInLeft;
          animation-name: rollInLeft;
  -webkit-animation-duration: .5s;
          animation-duration: .5s;
}
@-webkit-keyframes rollInLeft {
  0% {
    -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
            animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transform: translateX(-400px) rotate(445deg);
            transform: translateX(-400px) rotate(445deg);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  50% {
    -webkit-transform: translateX(20px) rotate(20deg);
            transform: translateX(20px) rotate(20deg);
  }
  100% {
    -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
            animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -webkit-transform: translateX(0) rotate(0deg);
            transform: translateX(0) rotate(0deg);
  }
}
@keyframes rollInLeft {
  0% {
    -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
            animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transform: translateX(-400px) rotate(445deg);
            transform: translateX(-400px) rotate(445deg);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  50% {
    -webkit-transform: translateX(20px) rotate(20deg);
            transform: translateX(20px) rotate(20deg);
  }
  100% {
    -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
            animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -webkit-transform: translateX(0) rotate(0deg);
            transform: translateX(0) rotate(0deg);
  }
}
.ani-rollOutRight {
  -webkit-animation-name: rollOutRight;
          animation-name: rollOutRight;
  -webkit-animation-duration: .5s;
          animation-duration: .5s;
}
@-webkit-keyframes rollOutRight {
  0% {
    opacity: 1;
    -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
            animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -webkit-transform: translateX(0) rotate(0deg);
            transform: translateX(0) rotate(0deg);
  }
  40% {
    opacity: 1;
    -webkit-transform: translateX(-20px) rotate(20deg);
            transform: translateX(-20px) rotate(20deg);
  }
  100% {
    opacity: 0;
    -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
            animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transform: translateX(400px) rotate(445deg);
            transform: translateX(400px) rotate(445deg);
  }
}
@keyframes rollOutRight {
  0% {
    opacity: 1;
    -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
            animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -webkit-transform: translateX(0) rotate(0deg);
            transform: translateX(0) rotate(0deg);
  }
  40% {
    opacity: 1;
    -webkit-transform: translateX(-20px) rotate(20deg);
            transform: translateX(-20px) rotate(20deg);
  }
  100% {
    opacity: 0;
    -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
            animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transform: translateX(400px) rotate(445deg);
            transform: translateX(400px) rotate(445deg);
  }
}