/* ----------------------------------------------
 * Generated by Animista on 2021-8-31 14:4:1
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation kenburns-right
 * ----------------------------------------
 */

@-webkit-keyframes kenburns-right-left {
  0% {
    -webkit-transform: scale(1.1) translateX(20px);
    transform: scale(1.1) translateX(20px);
    -webkit-transform-origin: right;
    transform-origin: right;
  }
  100% {
    -webkit-transform: scale(1.1) translate(-20px, 15px);
    transform: scale(1.1) translate(-20px, 15px);
    -webkit-transform-origin: left;
    transform-origin: left;
  }
}
@keyframes kenburns-right-left {
  0% {
    -webkit-transform: scale(1.1) translateX(20px);
    transform: scale(1.1) translateX(20px);
    -webkit-transform-origin: right;
    transform-origin: right;
  }
  100% {
    -webkit-transform: scale(1.1) translate(-20px, 15px);
    transform: scale(1.1) translate(-20px, 15px);
    -webkit-transform-origin: left;
    transform-origin: left;
  }
}

@-webkit-keyframes kenburns-left-right {
  0% {
    -webkit-transform: scale(1.1) translate(-20px, 15px);
    transform: scale(1.1) translate(-20px, 15px);
    -webkit-transform-origin: left;
    transform-origin: left;
  }
  100% {
    -webkit-transform: scale(1.1) translateX(20px);
    transform: scale(1.1) translateX(20px);
    -webkit-transform-origin: right;
    transform-origin: right;
  }
}
@keyframes kenburns-left-right {
  0% {
    -webkit-transform: scale(1.1) translate(-20px, 15px);
    transform: scale(1.1) translate(-20px, 15px);
    -webkit-transform-origin: left;
    transform-origin: left;
  }
  100% {
    -webkit-transform: scale(1.1) translateX(20px);
    transform: scale(1.1) translateX(20px);
    -webkit-transform-origin: right;
    transform-origin: right;
  }
}

@-webkit-keyframes kenburns-right {
  0% {
    -webkit-transform: scale(1) translate(0, 0);
    transform: scale(1) translate(0, 0);
    -webkit-transform-origin: 84% 50%;
    transform-origin: 84% 50%;
  }
  100% {
    -webkit-transform: scale(1.1) translateX(20px);
    transform: scale(1.1) translateX(20px);
    -webkit-transform-origin: right;
    transform-origin: right;
  }
}
@keyframes kenburns-right {
  0% {
    -webkit-transform: scale(1) translate(0, 0);
    transform: scale(1) translate(0, 0);
    -webkit-transform-origin: 84% 50%;
    transform-origin: 84% 50%;
  }
  100% {
    -webkit-transform: scale(1.1) translateX(20px);
    transform: scale(1.1) translateX(20px);
    -webkit-transform-origin: right;
    transform-origin: right;
  }
}

@-webkit-keyframes kenburns-right-ret {
  0% {
    -webkit-transform: scale(1.1) translateX(20px);
    transform: scale(1.1) translateX(20px);
    -webkit-transform-origin: right;
    transform-origin: right;
  }
  100% {
    -webkit-transform: scale(1) translate(0, 0);
    transform: scale(1) translate(0, 0);
    -webkit-transform-origin: 84% 50%;
    transform-origin: 84% 50%;
  }
}
@keyframes kenburns-right-ret {
  0% {
    -webkit-transform: scale(1.1) translateX(20px);
    transform: scale(1.1) translateX(20px);
    -webkit-transform-origin: right;
    transform-origin: right;
  }
  100% {
    -webkit-transform: scale(1) translate(0, 0);
    transform: scale(1) translate(0, 0);
    -webkit-transform-origin: 84% 50%;
    transform-origin: 84% 50%;
  }
}

/**
* ----------------------------------------
* animation kenburns-left
* ----------------------------------------
*/
@-webkit-keyframes kenburns-left {
  0% {
    -webkit-transform: scale(1) translate(0, 0);
    transform: scale(1) translate(0, 0);
    -webkit-transform-origin: 16% 50%;
    transform-origin: 16% 50%;
  }
  100% {
    -webkit-transform: scale(1.1) translate(-20px, 15px);
    transform: scale(1.1) translate(-20px, 15px);
    -webkit-transform-origin: left;
    transform-origin: left;
  }
}
@keyframes kenburns-left {
  0% {
    -webkit-transform: scale(1) translate(0, 0);
    transform: scale(1) translate(0, 0);
    -webkit-transform-origin: 16% 50%;
    transform-origin: 16% 50%;
  }
  100% {
    -webkit-transform: scale(1.1) translate(-20px, 15px);
    transform: scale(1.1) translate(-20px, 15px);
    -webkit-transform-origin: left;
    transform-origin: left;
  }
}

@-webkit-keyframes kenburns-left-ret {
  0% {
    -webkit-transform: scale(1.1) translate(-20px, 15px);
    transform: scale(1.1) translate(-20px, 15px);
    -webkit-transform-origin: left;
    transform-origin: left;
  }
  100% {
    -webkit-transform: scale(1) translate(0, 0);
    transform: scale(1) translate(0, 0);
    -webkit-transform-origin: 16% 50%;
    transform-origin: 16% 50%;
  }
}
@keyframes kenburns-left-ret {
  0% {
    -webkit-transform: scale(1.1) translate(-20px, 15px);
    transform: scale(1.1) translate(-20px, 15px);
    -webkit-transform-origin: left;
    transform-origin: left;
  }
  100% {
    -webkit-transform: scale(1) translate(0, 0);
    transform: scale(1) translate(0, 0);
    -webkit-transform-origin: 16% 50%;
    transform-origin: 16% 50%;
  }
}

/**
* ----------------------------------------
* animation swing-out-left-bck
* ----------------------------------------
*/
@-webkit-keyframes swing-out-left-bck {
  0% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
    -webkit-transform-origin: left;
    transform-origin: left;
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotateY(100deg);
    transform: rotateY(100deg);
    -webkit-transform-origin: left;
    transform-origin: left;
    opacity: 0;
  }
}
@keyframes swing-out-left-bck {
  0% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
    -webkit-transform-origin: left;
    transform-origin: left;
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotateY(100deg);
    transform: rotateY(100deg);
    -webkit-transform-origin: left;
    transform-origin: left;
    opacity: 0;
  }
}

/**
* ----------------------------------------
* animation swing-out-right-bck
* ----------------------------------------
*/
@-webkit-keyframes swing-out-right-bck {
  0% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
    -webkit-transform-origin: right;
    transform-origin: right;
    opacity: 1;
  }
  100% {
    -webkit-transform: rotateY(-100deg);
    transform: rotateY(-100deg);
    -webkit-transform-origin: right;
    transform-origin: right;
    opacity: 0;
  }
}
@keyframes swing-out-right-bck {
  0% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
    -webkit-transform-origin: right;
    transform-origin: right;
    opacity: 1;
  }
  100% {
    -webkit-transform: rotateY(-100deg);
    transform: rotateY(-100deg);
    -webkit-transform-origin: right;
    transform-origin: right;
    opacity: 0;
  }
}

/**
* ----------------------------------------
* animation swing-out-top-bck
* ----------------------------------------
*/
@-webkit-keyframes swing-out-top-bck {
  0% {
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
    -webkit-transform-origin: top;
    transform-origin: top;
    opacity: 1;
  }
  100% {
    -webkit-transform: rotateX(-100deg);
    transform: rotateX(-100deg);
    -webkit-transform-origin: top;
    transform-origin: top;
    opacity: 0;
  }
}
@keyframes swing-out-top-bck {
  0% {
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
    -webkit-transform-origin: top;
    transform-origin: top;
    opacity: 1;
  }
  100% {
    -webkit-transform: rotateX(-100deg);
    transform: rotateX(-100deg);
    -webkit-transform-origin: top;
    transform-origin: top;
    opacity: 0;
  }
}

/**
* ----------------------------------------
* animation swing-out-bottom-bck
* ----------------------------------------
*/
@-webkit-keyframes swing-out-bottom-bck {
  0% {
    -webkit-transform: rotateX(0);
    transform: rotateX(0);
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    opacity: 1;
  }
  100% {
    -webkit-transform: rotateX(100deg);
    transform: rotateX(100deg);
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    opacity: 0;
  }
}
@keyframes swing-out-bottom-bck {
  0% {
    -webkit-transform: rotateX(0);
    transform: rotateX(0);
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    opacity: 1;
  }
  100% {
    -webkit-transform: rotateX(100deg);
    transform: rotateX(100deg);
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    opacity: 0;
  }
}

/**
* ----------------------------------------
* animation swing-in-top-fwd
* ----------------------------------------
*/
@-webkit-keyframes swing-in-top-fwd {
  0% {
    -webkit-transform: rotateX(-100deg);
    transform: rotateX(-100deg);
    -webkit-transform-origin: top;
    transform-origin: top;
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
    -webkit-transform-origin: top;
    transform-origin: top;
    opacity: 1;
  }
}
@keyframes swing-in-top-fwd {
  0% {
    -webkit-transform: rotateX(-100deg);
    transform: rotateX(-100deg);
    -webkit-transform-origin: top;
    transform-origin: top;
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
    -webkit-transform-origin: top;
    transform-origin: top;
    opacity: 1;
  }
}

/**
* ----------------------------------------
* animation swing-in-left-fwd
* ----------------------------------------
*/
@-webkit-keyframes swing-in-left-fwd {
  0% {
    -webkit-transform: rotateY(100deg);
    transform: rotateY(100deg);
    -webkit-transform-origin: left;
    transform-origin: left;
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
    -webkit-transform-origin: left;
    transform-origin: left;
    opacity: 1;
  }
}
@keyframes swing-in-left-fwd {
  0% {
    -webkit-transform: rotateY(100deg);
    transform: rotateY(100deg);
    -webkit-transform-origin: left;
    transform-origin: left;
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
    -webkit-transform-origin: left;
    transform-origin: left;
    opacity: 1;
  }
}

/**
* ----------------------------------------
* animation swing-in-top-bck
* ----------------------------------------
*/
@-webkit-keyframes swing-in-top-bck {
  0% {
    -webkit-transform: rotateX(70deg);
    transform: rotateX(70deg);
    -webkit-transform-origin: top;
    transform-origin: top;
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
    -webkit-transform-origin: top;
    transform-origin: top;
    opacity: 1;
  }
}
@keyframes swing-in-top-bck {
  0% {
    -webkit-transform: rotateX(70deg);
    transform: rotateX(70deg);
    -webkit-transform-origin: top;
    transform-origin: top;
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
    -webkit-transform-origin: top;
    transform-origin: top;
    opacity: 1;
  }
}

/**
* ----------------------------------------
* animation swing-in-left-bck
* ----------------------------------------
*/
@-webkit-keyframes swing-in-left-bck {
  0% {
    -webkit-transform: rotateY(-70deg);
    transform: rotateY(-70deg);
    -webkit-transform-origin: left;
    transform-origin: left;
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
    -webkit-transform-origin: left;
    transform-origin: left;
    opacity: 1;
  }
}
@keyframes swing-in-left-bck {
  0% {
    -webkit-transform: rotateY(-70deg);
    transform: rotateY(-70deg);
    -webkit-transform-origin: left;
    transform-origin: left;
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
    -webkit-transform-origin: left;
    transform-origin: left;
    opacity: 1;
  }
}

/**
* ----------------------------------------
* animation puff-in-center
* ----------------------------------------
*/
@-webkit-keyframes puff-in-center {
  0% {
    -webkit-transform: scale(2);
    transform: scale(2);
    /*
-webkit-filter: blur(5px);
        filter: blur(5px);
        */
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    /*
-webkit-filter: blur(0px);
        filter: blur(0px);
        */
    opacity: 1;
  }
}
@keyframes puff-in-center {
  0% {
    -webkit-transform: scale(2);
    transform: scale(2);
    /*
-webkit-filter: blur(5px);
        filter: blur(5px);
        */
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    /*
-webkit-filter: blur(0px);
        filter: blur(0px);
        */
    opacity: 1;
  }
}

/**
* ----------------------------------------
* animation slit-in-vertical
* ----------------------------------------
*/
@-webkit-keyframes slit-in-vertical {
  0% {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    opacity: 0;
  }
  /*
54% {
-webkit-transform: translateZ(-160px) rotateY(87deg);
        transform: translateZ(-160px) rotateY(87deg);
opacity: 1;
}
*/
  100% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
    opacity: 1;
  }
}
@keyframes slit-in-vertical {
  0% {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    opacity: 0;
  }
  /*
54% {
-webkit-transform: translateZ(-160px) rotateY(87deg);
        transform: translateZ(-160px) rotateY(87deg);
opacity: 1;
}
*/
  100% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
    opacity: 1;
  }
}

/**
* ----------------------------------------
* animation slit-in-horizontal
* ----------------------------------------
*/
@-webkit-keyframes slit-in-horizontal {
  0% {
    -webkit-transform: translateZ(-1600px) rotateX(90deg);
    transform: translateZ(-1600px) rotateX(90deg);
    opacity: 0;
  }

  54% {
    -webkit-transform: translateZ(-500px) rotateX(87deg);
    transform: translateZ(-500px) rotateX(87deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateZ(0) rotateX(0);
    transform: translateZ(0) rotateX(0);
    opacity: 1;
  }
}
@keyframes slit-in-horizontal {
  0% {
    -webkit-transform: translateZ(-1600px) rotateX(90deg);
    transform: translateZ(-1600px) rotateX(90deg);
    opacity: 0;
  }

  54% {
    -webkit-transform: translateZ(-500px) rotateX(87deg);
    transform: translateZ(-500px) rotateX(87deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateZ(0) rotateX(0);
    transform: translateZ(0) rotateX(0);
    opacity: 1;
  }
}

/**
* ----------------------------------------
* animation tracking-in-expand
* ----------------------------------------
*/
@-webkit-keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
@keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}

/**
* ----------------------------------------
* animation tracking-out-contract
* ----------------------------------------
*/
@-webkit-keyframes tracking-out-contract {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
}
@keyframes tracking-out-contract {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
}

/**
* ----------------------------------------
* animation rotate-90-cw
* ----------------------------------------
*/
@-webkit-keyframes rotate-90-cw {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}
@keyframes rotate-90-cw {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}

/**
* ----------------------------------------
* animation rotate-90-right-cw
* ----------------------------------------
*/
@-webkit-keyframes rotate-90-right-cw {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
    -webkit-transform-origin: right;
    transform-origin: right;
  }
  100% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transform-origin: right;
    transform-origin: right;
  }
}
@keyframes rotate-90-right-cw {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
    -webkit-transform-origin: right;
    transform-origin: right;
  }
  100% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transform-origin: right;
    transform-origin: right;
  }
}

/**
* ----------------------------------------
* animation rotate-90-ccw
* ----------------------------------------
*/
@-webkit-keyframes rotate-90-ccw {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
}
@keyframes rotate-90-ccw {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
}

/**
* ----------------------------------------
* animation rotate-90-top-cw
* ----------------------------------------
*/
@-webkit-keyframes rotate-90-top-cw {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
    -webkit-transform-origin: top;
    transform-origin: top;
  }
  100% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transform-origin: top;
    transform-origin: top;
  }
}
@keyframes rotate-90-top-cw {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
    -webkit-transform-origin: top;
    transform-origin: top;
  }
  100% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transform-origin: top;
    transform-origin: top;
  }
}

@-webkit-keyframes slide-out-fwd-center {
  0% {
    -webkit-transform: translateZ(1);
    transform: translateZ(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(600px);
    transform: translateZ(600px);
    opacity: 0;
  }
}
@keyframes slide-out-fwd-center {
  0% {
    -webkit-transform: translateZ(1);
    transform: translateZ(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(600px);
    transform: translateZ(600px);
    opacity: 0;
  }
}

/* ----------------------------------------------
* Generated by Animista on 2021-9-3 17:45:46
* Licensed under FreeBSD License.
* See http://animista.net/license for more info. 
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */

/**
* ----------------------------------------
* animation flip-scale-2-hor-top
* ----------------------------------------
*/
@-webkit-keyframes flip-scale-2-hor-top {
  0% {
    -webkit-transform: translateY(0) rotateX(0) scale(1);
    transform: translateY(0) rotateX(0) scale(1);
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
  }
  50% {
    -webkit-transform: translateY(-50%) rotateX(-90deg) scale(2);
    transform: translateY(-50%) rotateX(-90deg) scale(2);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
  }
  100% {
    -webkit-transform: translateY(-100%) rotateX(-180deg) scale(1);
    transform: translateY(-100%) rotateX(-180deg) scale(1);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
  }
}
@keyframes flip-scale-2-hor-top {
  0% {
    -webkit-transform: translateY(0) rotateX(0) scale(1);
    transform: translateY(0) rotateX(0) scale(1);
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
  }
  50% {
    -webkit-transform: translateY(-50%) rotateX(-90deg) scale(2);
    transform: translateY(-50%) rotateX(-90deg) scale(2);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
  }
  100% {
    -webkit-transform: translateY(-100%) rotateX(-180deg) scale(1);
    transform: translateY(-100%) rotateX(-180deg) scale(1);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
  }
}

/* ----------------------------------------------
* Generated by Animista on 2021-9-3 17:56:16
* Licensed under FreeBSD License.
* See http://animista.net/license for more info. 
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */

/**
* ----------------------------------------
* animation flip-scale-2-ver-left
* ----------------------------------------
*/
@-webkit-keyframes flip-scale-2-ver-left {
  0% {
    -webkit-transform: translateX(0) rotateY(0) scale(1);
    transform: translateX(0) rotateY(0) scale(1);
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
  }
  50% {
    -webkit-transform: translateX(-50%) rotateY(90deg) scale(2);
    transform: translateX(-50%) rotateY(90deg) scale(2);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
  }
  100% {
    -webkit-transform: translateX(-100%) rotateY(180deg) scale(1);
    transform: translateX(-100%) rotateY(180deg) scale(1);
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
  }
}
@keyframes flip-scale-2-ver-left {
  0% {
    -webkit-transform: translateX(0) rotateY(0) scale(1);
    transform: translateX(0) rotateY(0) scale(1);
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
  }
  50% {
    -webkit-transform: translateX(-50%) rotateY(90deg) scale(2);
    transform: translateX(-50%) rotateY(90deg) scale(2);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
  }
  100% {
    -webkit-transform: translateX(-100%) rotateY(180deg) scale(1);
    transform: translateX(-100%) rotateY(180deg) scale(1);
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
  }
}

@-webkit-keyframes flip-scale-2-ver-right {
  0% {
    -webkit-transform: translateX(0) rotateY(0) scale(1);
    transform: translateX(0) rotateY(0) scale(1);
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    opacity:1;
  }
  /*
  50% {
    -webkit-transform: translateX(-50%) rotateY(-90deg) scale(2);
    transform: translateX(-50%) rotateY(-90deg) scale(2);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
  }
  */
  100% {
    -webkit-transform: translateX(-100%) rotateY(-180deg) scale(1);
    transform: translateX(-100%) rotateY(-180deg) scale(1);
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    opacity:0;
  }
}
@keyframes flip-scale-2-ver-right {
  0% {
    -webkit-transform: translateX(0) rotateY(0) scale(1);
    transform: translateX(0) rotateY(0) scale(1);
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    opacity:1;
  }
  /*
  50% {
    -webkit-transform: translateX(-50%) rotateY(-90deg) scale(2);
    transform: translateX(-50%) rotateY(-90deg) scale(2);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
  }
  */
  100% {
    -webkit-transform: translateX(-100%) rotateY(-180deg) scale(1);
    transform: translateX(-100%) rotateY(-180deg) scale(1);
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    opacity:0;
  }
}

@-webkit-keyframes flip-scale-2-hor-bottom {
  0% {
    -webkit-transform: translateY(0) rotateX(0) scale(1);
    transform: translateY(0) rotateX(0) scale(1);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
  }
  50% {
    -webkit-transform: translateY(50%) rotateX(90deg) scale(2);
    transform: translateY(50%) rotateX(90deg) scale(2);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
  }
  100% {
    -webkit-transform: translateY(100%) rotateX(180deg) scale(1);
    transform: translateY(100%) rotateX(180deg) scale(1);
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
  }
}
@keyframes flip-scale-2-hor-bottom {
  0% {
    -webkit-transform: translateY(0) rotateX(0) scale(1);
    transform: translateY(0) rotateX(0) scale(1);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
  }
  50% {
    -webkit-transform: translateY(50%) rotateX(90deg) scale(2);
    transform: translateY(50%) rotateX(90deg) scale(2);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
  }
  100% {
    -webkit-transform: translateY(100%) rotateX(180deg) scale(1);
    transform: translateY(100%) rotateX(180deg) scale(1);
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
  }
}

@-webkit-keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(1000px);
    transform: translateY(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(1000px);
    transform: translateY(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@-webkit-keyframes slide-in-top {
  0% {
    -webkit-transform: translateY(-1000px);
    transform: translateY(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-in-top {
  0% {
    -webkit-transform: translateY(-1000px);
    transform: translateY(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

/**
* ----------------------------------------
* animation slit-out-vertical
* ----------------------------------------
*/
@-webkit-keyframes slit-out-vertical {
  0% {
    -webkit-transform: translateZ(0) rotateY(0);
    transform: translateZ(0) rotateY(0);
    opacity: 1;
  }
  54% {
    -webkit-transform: translateZ(-160px) rotateY(87deg);
    transform: translateZ(-160px) rotateY(87deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(-800px) rotateY(90deg);
    transform: translateZ(-800px) rotateY(90deg);
    opacity: 0;
  }
}
@keyframes slit-out-vertical {
  0% {
    -webkit-transform: translateZ(0) rotateY(0);
    transform: translateZ(0) rotateY(0);
    opacity: 1;
  }
  54% {
    -webkit-transform: translateZ(-160px) rotateY(87deg);
    transform: translateZ(-160px) rotateY(87deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(-800px) rotateY(90deg);
    transform: translateZ(-800px) rotateY(90deg);
    opacity: 0;
  }
}

/**
* ----------------------------------------
* animation slide-out-fwd-center
* ----------------------------------------
*/
@-webkit-keyframes slide-out-fwd-center {
  0% {
    -webkit-transform: translateZ(1px);
    transform: translateZ(1px);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(600px);
    transform: translateZ(600px);
    opacity: 0;
  }
}
@keyframes slide-out-fwd-center {
  0% {
    -webkit-transform: translateZ(1px);
    transform: translateZ(1px);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(600px);
    transform: translateZ(600px);
    opacity: 0;
  }
}

/**
 * ----------------------------------------
 * animation scale-in-center
 * ----------------------------------------
 */
 @-webkit-keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0.7;
  }
}
@keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0.7;
  }
}


/**
 * ----------------------------------------
 * animation scale-out-center
 * ----------------------------------------
 */
 @-webkit-keyframes scale-out-center {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
}
@keyframes scale-out-center {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation scale-out-bl
 * ----------------------------------------
 */
 @-webkit-keyframes scale-out-bl {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    opacity: 0.7;
  }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    opacity: 1;
  }
}
@keyframes scale-out-bl {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    opacity: 0.7;
  }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    opacity: 1;
  }
}



/**
 * ----------------------------------------
 * animation scale-in-tr
 * ----------------------------------------
 */
 @-webkit-keyframes scale-in-tr {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    opacity: 0.7;
  }
}
@keyframes scale-in-tr {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    opacity: 0.7;
  }
}


/**
 * ----------------------------------------
 * animation scale-in-tl
 * ----------------------------------------
 */
 @-webkit-keyframes scale-in-tl {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    opacity: 0.7;
  }
}
@keyframes scale-in-tl {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    opacity: 0.7;
  }
}

/**
 * ----------------------------------------
 * @animation scale-out-br
 * ----------------------------------------
 */
 @-webkit-keyframes scale-out-br {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    opacity: 0.7;
  }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    opacity: 1;
  }
}
@keyframes scale-out-br {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    opacity: 0.7;
  }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    opacity: 1;
  }
}


/**
 * ----------------------------------------
 * animation tracking-in-expand
 * ----------------------------------------
 */
 @-webkit-keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
@keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}