/* ----------------------------------------------
 * 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: translateZ(800px) rotateY(90deg);
            transform: translateZ(800px) rotateY(90deg);
    opacity: 0;
  }
  /*
  54% {
    -webkit-transform: translateZ(-160px) rotateY(87deg);
            transform: translateZ(-160px) rotateY(87deg);
    opacity: 1;
  }
  */
  100% {
    -webkit-transform: translateZ(0) rotateY(0);
            transform: translateZ(0) rotateY(0);
            opacity: 1;
  }
}
@keyframes slit-in-vertical {
  0% {
    -webkit-transform: translateZ(800px) rotateY(90deg);
            transform: translateZ(800px) rotateY(90deg);
    opacity: 0;
  }
  /*
  54% {
    -webkit-transform: translateZ(-160px) rotateY(87deg);
            transform: translateZ(-160px) rotateY(87deg);
    opacity: 1;
  }
  */
  100% {
    -webkit-transform: translateZ(0) rotateY(0);
            transform: translateZ(0) 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: 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-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%;
        }
        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-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;
        }
      }