/* Note:
    Thay doi ten:
        + scaleUpIn --> pullIn
        + scaleDownIn --> pushIn
        + scaleUpOut --> pushOut
        + scaleDownOut --> pullOut

        + slideUp --> slideOneUpOut
        + slideDown --> slideOneDownOut
        + slideLeft --> slideOneLeftOut
        + slideRight --> slideOneRightOut
        + slideUpReturn --> slideOneUpIn
        + slideDownReturn --> slideOneDownIn
        + slideLeftReturn --> slideOneLeftIn
        + slideRightReturn --> slideOneRightIn

        + slideInDown --> slideUpIn
        + slideInLeft --> slideLeftIn
        + slideInRight --> slideRightIn
        + slideOutLeft --> slideLeftOut
        + slideOutRight --> slideRightOut
        + slideOutUp --> slideUpOut

    Prefix support: -webkit-
    Browser support: chrome 1+, firefox 16+, IE 10+, safari 4+, ios safari 3.2+, opera 15+.
*/

/* Table of Effect issue-1 (62 effects)
    + bounce
    + flash
    + pulse
    + rubberBand
    + swing
    + tada
    + wobble
    
    
    + bounceIn
    + slideBounceDownIn
    + slideBounceLeftIn
    + slideBounceRightIn
    + slideBounceUpIn

    + bounceOut
    + slideBounceDownOut
    + slideBounceLeftOut
    + slideBounceRightOut
    + slideBounceUpOut

    + fadeIn
    + slideShortDownIn
    + slideFadeDownIn
    + slideShortLeftIn
    + slideFadeLeftIn
    + slideShortRightIn
    + slideFadeRightIn
    + slideShortUpIn
    + slideFadeUpIn

    + fadeOut
    + slideShortDownOut
    + slideFadeDownOut
    + slideShortLeftOut
    + slideFadeLeftOut
    + slideShortRightOut
    + slideFadeRightOut
    + slideShortUpOut
    + slideFadeUpOut

    + flip
    + flipXIn
    + flipYIn
    + flipXOut
    + flipYOut

    + lightSpeedIn
    + lightSpeedOut

    + rotateIn
    + roDownLeftIn
    + roDownRightIn
    + roUpLeftIn
    + roUpRightIn

    + rotateOut
    + roDownLeftOut
    + roDownRightOut
    + roUpLeftOut
    + roUpRightOut

    + slideLeftIn
    + slideRightIn
    + slideUpIn
    + slideDownIn
    + slideLeftOut
    + slideRightOut
    + slideUpOut
    + slideDownOut

    + hinge
    + rollIn
    + rollOut
============================================================== */

.code-animated {
    visibility: visible !important;

    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;

    -webkit-animation-duration: 1s;
            animation-duration: 1s;

    -webkit-backface-visibility: visible !important;
            backface-visibility: visible !important;
}


.bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce;
}
@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        -webkit-transform: translateY(0);
    }
    40% {
        -webkit-transform: translateY(-30px);
    }
    60% {
        -webkit-transform: translateY(-15px);
    }
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}



.flash {
    -webkit-animation-name: flash;
    animation-name: flash;
}
@-webkit-keyframes flash {
    0%, 50%, 100% { opacity: 1; }
    25%, 75%      { opacity: 0; }
}
@keyframes flash {
    0%, 50%, 100% { opacity: 1; }
    25%, 75%      { opacity: 0; }
}




/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
.pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse;
}
@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(1);
    }
    50% {
        -webkit-transform: scale(1.1);
    }
    100% {
        -webkit-transform: scale(1);
    }
}
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}



.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}
@-webkit-keyframes rubberBand {
  0% {
    -webkit-transform: scale(1);
  }
  30% {
    -webkit-transform: scaleX(1.25) scaleY(.75);
  }
  40% {
    -webkit-transform: scaleX(.75) scaleY(1.25);
  }
  60% {
    -webkit-transform: scaleX(1.15) scaleY(.85);
  }
  100% {
    -webkit-transform: scale(1);
  }
}
@keyframes rubberBand {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scaleX(1.25) scaleY(.75);
  }
  40% {
    transform: scaleX(.75) scaleY(1.25);
  }
  60% {
    transform: scaleX(1.15) scaleY(.85);
  }
  100% {
    transform: scale(1);
  }
}




.swing {
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing;
    animation-name: swing;
}
@-webkit-keyframes swing {
    20%  { -webkit-transform: rotate(15deg); }
    40%  { -webkit-transform: rotate(-10deg); }
    60%  { -webkit-transform: rotate(5deg); }
    80%  { -webkit-transform: rotate(-5deg); }
    100% { -webkit-transform: rotate(0); }
}
@keyframes swing {
    20%  { transform: rotate(15deg); }
    40%  { transform: rotate(-10deg); }
    60%  { transform: rotate(5deg); }
    80%  { transform: rotate(-5deg); }
    100% { transform: rotate(0); }
}



.tada {
    -webkit-animation-name: tada;
    animation-name: tada;
}
@-webkit-keyframes tada {
    0%                  { -webkit-transform: scale(1); }
    10%, 20%            { -webkit-transform: scale(.9) rotate(-3deg); }
    30%, 50%, 70%, 90%  { -webkit-transform: scale(1.1) rotate(3deg); }
    40%, 60%, 80%       { -webkit-transform: scale(1.1) rotate(-3deg); }
    100%                { -webkit-transform: scale(1) rotate(0); }
}
@keyframes tada {
    0%                  { transform: scale(1); }
    10%, 20%            { transform: scale(.9) rotate(-3deg); }
    30%, 50%, 70%, 90%  { transform: scale(1.1) rotate(3deg); }
    40%, 60%, 80%       { transform: scale(1.1) rotate(-3deg); }
    100%                { transform: scale(1) rotate(0); }
}




/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
.wobble {
    -webkit-animation-name: wobble;
    animation-name: wobble;
}
@-webkit-keyframes wobble {
    0%      { -webkit-transform: translateX(0); }
    15%     { -webkit-transform: translateX(-25%) rotate(-5deg); }
    30%     { -webkit-transform: translateX(20%) rotate(3deg); }
    45%     { -webkit-transform: translateX(-15%) rotate(-3deg); }
    60%     { -webkit-transform: translateX(10%) rotate(2deg); }
    75%     { -webkit-transform: translateX(-5%) rotate(-1deg); }
    100%    { -webkit-transform: translateX(0); }
}
@keyframes wobble {
    0%      { transform: translateX(0); }
    15%     { transform: translateX(-25%) rotate(-5deg); }
    30%     { transform: translateX(20%) rotate(3deg); }
    45%     { transform: translateX(-15%) rotate(-3deg); }
    60%     { transform: translateX(10%) rotate(2deg); }
    75%     { transform: translateX(-5%) rotate(-1deg); }
    100%    { transform: translateX(0); }
}



/* SLIDE BOUNCE effect
---------------------------------------------------------- */
.bounceIn {
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
}
@-webkit-keyframes bounceIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(.3);
    }
    50% {
        opacity: 1;
        -webkit-transform: scale(1.05);
    }
    70% {
        -webkit-transform: scale(.9);
    }
    100% {
        -webkit-transform: scale(1);
    }
}
@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(.9);
    }
    100% {
        transform: scale(1);
    }
}



.slideBounceDownIn {
    -webkit-animation-name: slideBounceDownIn;
    animation-name: slideBounceDownIn;
}
@-webkit-keyframes slideBounceDownIn {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
    }
    60% {
        opacity: 1;
        -webkit-transform: translateY(30px);
    }
    80% {
        -webkit-transform: translateY(-10px);
    }
    100% {
        -webkit-transform: translateY(0);
    }
}
@keyframes slideBounceDownIn {
    0% {
        opacity: 0;
        transform: translateY(-2000px);
    }
    60% {
        opacity: 1;
        transform: translateY(30px);
    }
    80% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}



.slideBounceLeftIn {
    -webkit-animation-name: slideBounceLeftIn;
    animation-name: slideBounceLeftIn;
}
@-webkit-keyframes slideBounceLeftIn {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
    }
    60% {
        opacity: 1;
        -webkit-transform: translateX(30px);
    }
    80% {
        -webkit-transform: translateX(-10px);
    }
    100% {
        -webkit-transform: translateX(0);
    }
}
@keyframes slideBounceLeftIn {
    0% {
        opacity: 0;
        transform: translateX(-2000px);
    }
    60% {
        opacity: 1;
        transform: translateX(30px);
    }
    80% {
        transform: translateX(-10px);
    }
    100% {
        transform: translateX(0);
    }
}



.slideBounceRightIn {
    -webkit-animation-name: slideBounceRightIn;
    animation-name: slideBounceRightIn;
}
@-webkit-keyframes slideBounceRightIn {
    0% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
    }
    60% {
        opacity: 1;
        -webkit-transform: translateX(-30px);
    }
    80% {
        -webkit-transform: translateX(10px);
    }
    100% {
        -webkit-transform: translateX(0);
    }
}
@keyframes slideBounceRightIn {
    0% {
        opacity: 0;
        transform: translateX(2000px);
    }
    60% {
        opacity: 1;
        transform: translateX(-30px);
    }
    80% {
        transform: translateX(10px);
    }
    100% {
        transform: translateX(0);
    }
}



.slideBounceUpIn {
    -webkit-animation-name: slideBounceUpIn;
    animation-name: slideBounceUpIn;
}
@-webkit-keyframes slideBounceUpIn {
    0% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
    }
    60% {
        opacity: 1;
        -webkit-transform: translateY(-30px);
    }
    80% {
        -webkit-transform: translateY(10px);
    }
    100% {
        -webkit-transform: translateY(0);
    }
}
@keyframes slideBounceUpIn {
    0% {
        opacity: 0;
        transform: translateY(2000px);
    }
    60% {
        opacity: 1;
        transform: translateY(-30px);
    }
    80% {
        transform: translateY(10px);
    }
    100% {
        transform: translateY(0);
    }
}



.bounceOut {
    -webkit-animation-name: bounceOut;
    animation-name: bounceOut;
}
@-webkit-keyframes bounceOut {
    0% {
        -webkit-transform: scale(1);
    }
    25% {
        -webkit-transform: scale(.95);
    }
    50% {
        opacity: 1;
        -webkit-transform: scale(1.1);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(.3);
    }
}
@keyframes bounceOut {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(.95);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
    100% {
        opacity: 0;
        transform: scale(.3);
    }
}



.slideBounceDownOut {
    -webkit-animation-name: slideBounceDownOut;
    animation-name: slideBounceDownOut;
}
@-webkit-keyframes slideBounceDownOut {
    0% {
        -webkit-transform: translateY(0);
    }
    20% {
        opacity: 1;
        -webkit-transform: translateY(-20px);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
    }
}
@keyframes slideBounceDownOut {
    0% {
        transform: translateY(0);
    }
    20% {
        opacity: 1;
        transform: translateY(-20px);
    }
    100% {
        opacity: 0;
        transform: translateY(2000px);
    }
}



.slideBounceLeftOut {
    -webkit-animation-name: slideBounceLeftOut;
    animation-name: slideBounceLeftOut;
}
@-webkit-keyframes slideBounceLeftOut {
    0% {
        -webkit-transform: translateX(0);
    }
    20% {
        opacity: 1;
        -webkit-transform: translateX(20px);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
    }
}
@keyframes slideBounceLeftOut {
    0% {
        transform: translateX(0);
    }
    20% {
        opacity: 1;
        transform: translateX(20px);
    }
    100% {
        opacity: 0;
        transform: translateX(-2000px);
    }
}



.slideBounceRightOut {
    -webkit-animation-name: slideBounceRightOut;
    animation-name: slideBounceRightOut;
}
@-webkit-keyframes slideBounceRightOut {
    0% {
        -webkit-transform: translateX(0);
    }
    20% {
        opacity: 1;
        -webkit-transform: translateX(-20px);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
    }
}
@keyframes slideBounceRightOut {
    0% {
        transform: translateX(0);
    }
    20% {
        opacity: 1;
        transform: translateX(-20px);
    }
    100% {
        opacity: 0;
        transform: translateX(2000px);
    }
}



.slideBounceUpOut {
    -webkit-animation-name: slideBounceUpOut;
    animation-name: slideBounceUpOut;
}
@-webkit-keyframes slideBounceUpOut {
    0% {
        -webkit-transform: translateY(0);
    }
    20% {
        opacity: 1;
        -webkit-transform: translateY(20px);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
    }
}
@keyframes slideBounceUpOut {
    0% {
        transform: translateY(0);
    }
    20% {
        opacity: 1;
        transform: translateY(20px);
    }
    100% {
        opacity: 0;
        transform: translateY(-2000px);
    }
}



/* SLIDE SHORT effect
---------------------------------------------------------- */
.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}
@-webkit-keyframes fadeIn {
    from { opacity: 0; }
}
@keyframes fadeIn {
    from { opacity: 0; }
}



.slideShortDownIn {
    -webkit-animation-name: slideShortDownIn;
    animation-name: slideShortDownIn;
}
@-webkit-keyframes slideShortDownIn {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}
@keyframes slideShortDownIn {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}



.slideFadeDownIn {
    -webkit-animation-name: slideFadeDownIn;
    animation-name: slideFadeDownIn;
}
@-webkit-keyframes slideFadeDownIn {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}
@keyframes slideFadeDownIn {
    0% {
        opacity: 0;
        transform: translateY(-2000px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}



.slideShortLeftIn {
    -webkit-animation-name: slideShortLeftIn;
    animation-name: slideShortLeftIn;
}
@-webkit-keyframes slideShortLeftIn {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}
@keyframes slideShortLeftIn {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}



.slideFadeLeftIn {
    -webkit-animation-name: slideFadeLeftIn;
    animation-name: slideFadeLeftIn;
}
@-webkit-keyframes slideFadeLeftIn {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}
@keyframes slideFadeLeftIn {
    0% {
        opacity: 0;
        transform: translateX(-2000px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}



.slideShortRightIn {
    -webkit-animation-name: slideShortRightIn;
    animation-name: slideShortRightIn;
}
@-webkit-keyframes slideShortRightIn {
    0% {
        opacity: 0;
        -webkit-transform: translateX(20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}
@keyframes slideShortRightIn {
    0% {
        opacity: 0;
        transform: translateX(20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}



.slideFadeRightIn {
    -webkit-animation-name: slideFadeRightIn;
    animation-name: slideFadeRightIn;
}
@-webkit-keyframes slideFadeRightIn {
    0% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}
@keyframes slideFadeRightIn {
    0% {
        opacity: 0;
        transform: translateX(2000px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}



.slideShortUpIn {
    -webkit-animation-name: slideShortUpIn;
    animation-name: slideShortUpIn;
}
@-webkit-keyframes slideShortUpIn {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}
@keyframes slideShortUpIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}



.slideFadeUpIn {
    -webkit-animation-name: slideFadeUpIn;
    animation-name: slideFadeUpIn;
}
@-webkit-keyframes slideFadeUpIn {
    0% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}
@keyframes slideFadeUpIn {
    0% {
        opacity: 0;
        transform: translateY(2000px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}



.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
}
@-webkit-keyframes fadeOut {
    to { opacity: 0; }
}
@keyframes fadeOut {
    to { opacity: 0; }
}



.slideShortDownOut {
    -webkit-animation-name: slideShortDownOut;
    animation-name: slideShortDownOut;
}
@-webkit-keyframes slideShortDownOut {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(20px);
    }
}
@keyframes slideShortDownOut {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(20px);
    }
}



.slideFadeDownOut {
    -webkit-animation-name: slideFadeDownOut;
    animation-name: slideFadeDownOut;
}
@-webkit-keyframes slideFadeDownOut {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
    }
}
@keyframes slideFadeDownOut {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(2000px);
    }
}



.slideShortLeftOut {
    -webkit-animation-name: slideShortLeftOut;
    animation-name: slideShortLeftOut;
}
@-webkit-keyframes slideShortLeftOut {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
    }
}
@keyframes slideShortLeftOut {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-20px);
    }
}



.slideFadeLeftOut {
    -webkit-animation-name: slideFadeLeftOut;
    animation-name: slideFadeLeftOut;
}
@-webkit-keyframes slideFadeLeftOut {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
    }
}
@keyframes slideFadeLeftOut {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-2000px);
    }
}



.slideShortRightOut {
    -webkit-animation-name: slideShortRightOut;
    animation-name: slideShortRightOut;
}
@-webkit-keyframes slideShortRightOut {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(20px);
    }
}
@keyframes slideShortRightOut {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(20px);
    }
}



.slideFadeRightOut {
    -webkit-animation-name: slideFadeRightOut;
    animation-name: slideFadeRightOut;
}
@-webkit-keyframes slideFadeRightOut {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
    }
}
@keyframes slideFadeRightOut {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(2000px);
    }
}



.slideShortUpOut {
    -webkit-animation-name: slideShortUpOut;
    animation-name: slideShortUpOut;
}
@-webkit-keyframes slideShortUpOut {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
    }
}
@keyframes slideShortUpOut {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-20px);
    }
}



.slideFadeUpOut {
    -webkit-animation-name: slideFadeUpOut;
    animation-name: slideFadeUpOut;
}
@-webkit-keyframes slideFadeUpOut {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
    }
}
@keyframes slideFadeUpOut {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-2000px);
    }
}



/* FLIP effect
---------------------------------------------------------- */
.code-animated.flip {
    -webkit-animation-name: flip;
    animation-name: flip;
}
@-webkit-keyframes flip {
    0% {
        -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
        -webkit-animation-timing-function: ease-out;
    }
    40% {
        -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
        -webkit-animation-timing-function: ease-out;
    }
    50% {
        -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        -webkit-animation-timing-function: ease-in;
    }
    80% {
        -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
        -webkit-animation-timing-function: ease-in;
    }
    100% {
        -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
        -webkit-animation-timing-function: ease-in;
    }
}
@keyframes flip {
    0% {
        transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
        animation-timing-function: ease-out;
    }
    40% {
        transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
        animation-timing-function: ease-out;
    }
    50% {
        transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        animation-timing-function: ease-in;
    }
    80% {
        transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
        animation-timing-function: ease-in;
    }
    100% {
        transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
        animation-timing-function: ease-in;
    }
}



.flipXIn {
    -webkit-animation-name: flipXIn;
    animation-name: flipXIn;
}
@-webkit-keyframes flipXIn {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    40% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
    }
    70% {
        -webkit-transform: perspective(400px) rotateX(10deg);
    }
    100% {
        -webkit-transform: perspective(400px) rotateX(0);
        opacity: 1;
    }
}
@keyframes flipXIn {
    0% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    40% {
        transform: perspective(400px) rotateX(-10deg);
    }
    70% {
        transform: perspective(400px) rotateX(10deg);
    }
    100% {
        transform: perspective(400px) rotateX(0);
        opacity: 1;
    }
}



.flipYIn {
    -webkit-animation-name: flipYIn;
    animation-name: flipYIn;
}
@-webkit-keyframes flipYIn {
    0% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
    40% {
        -webkit-transform: perspective(400px) rotateY(-10deg);
    }
    70% {
        -webkit-transform: perspective(400px) rotateY(10deg);
    }
    100% {
        -webkit-transform: perspective(400px) rotateY(0);
        opacity: 1;
    }
}
@keyframes flipYIn {
    0% {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
    40% {
        transform: perspective(400px) rotateY(-10deg);
    }
    70% {
        transform: perspective(400px) rotateY(10deg);
    }
    100% {
        transform: perspective(400px) rotateY(0);
        opacity: 1;
    }
}



.flipXOut {
    -webkit-animation-name: flipXOut;
    animation-name: flipXOut;
}
@-webkit-keyframes flipXOut {
    0% {
        -webkit-transform: perspective(400px) rotateX(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
}
@keyframes flipXOut {
    0% {
        transform: perspective(400px) rotateX(0);
        opacity: 1;
    }
    100% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
}



.flipYOut {
    -webkit-animation-name: flipYOut;
    animation-name: flipYOut;
}
@-webkit-keyframes flipYOut {
    0% {
        -webkit-transform: perspective(400px) rotateY(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
}
@keyframes flipYOut {
    0% {
        transform: perspective(400px) rotateY(0);
        opacity: 1;
    }
    100% {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
}



/* LIGHTSPEED effect
---------------------------------------------------------- */
.lightSpeedIn {
    -webkit-animation-name: lightSpeedIn;
    animation-name: lightSpeedIn;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}
@-webkit-keyframes lightSpeedIn {
    0% {
        -webkit-transform: translateX(100%) skewX(-30deg);
        opacity: 0;
    }
    40% {
        /*-webkit-transform: translateX(-20%) skewX(30deg);*/
        -webkit-transform: translateX(0) skewX(30deg);
        opacity: 1;
    }
    70% {
        -webkit-transform-origin: 0 100%;
        -webkit-transform: skewX(-15deg);
        opacity: 1;
    }
    100% {
        -webkit-transform-origin: 0 100%;
        -webkit-transform: skewX(0);
        opacity: 1;
    }
}
@keyframes lightSpeedIn {
    0% {
        transform: translateX(100%) skewX(-30deg);
        opacity: 0;
    }
    40% {
        /*transform: translateX(-20%) skewX(30deg);*/
        transform: translateX(0) skewX(30deg);*/
        opacity: 1;
    }
    70% {
        transform-origin: 0 100%;
        transform: skewX(-15deg);
        opacity: 1;
    }
    100% {
        transform-origin: 0 100%;
        transform: skewX(0);
        opacity: 1;
    }
}



.lightSpeedOut {
    -webkit-animation-name: lightSpeedOut;
    animation-name: lightSpeedOut;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
}
@-webkit-keyframes lightSpeedOut {
    0% {
        -webkit-transform: translateX(0) skewX(0);
        opacity: 1;
    }
    40% {
        -webkit-transform: translateX(100%) skewX(-30deg);
    }
    70% {
        -webkit-transform-origin: 100% 100%;
        -webkit-transform: translateX(100%) skewX(15deg);
    }
    100% {
        -webkit-transform-origin: 100% 100%;
        -webkit-transform: translateX(100%) skewX(-30deg);
        opacity: 0;
    }
}
@keyframes lightSpeedOut {
    0% {
        transform: translateX(0) skewX(0);
        opacity: 1;
    }
    40% {
        transform: translateX(100%) skewX(-30deg);
    }
    70% {
        transform-origin: 100% 100%;
        transform: translateX(100%) skewX(15deg);
    }
    100% {
        transform-origin: 100% 100%;
        transform: translateX(100%) skewX(-30deg);
        opacity: 0;
    }
}



/* ROTATE effect
---------------------------------------------------------- */
.rotateIn {
    -webkit-animation-name: rotateIn;
    animation-name: rotateIn;
}
@-webkit-keyframes rotateIn {
    from {
        -webkit-transform: rotate(-200deg);
        opacity: 0;
    }
}
@keyframes rotateIn {
    from {
        transform: rotate(-200deg);
        opacity: 0;
    }
}



.rotateOut {
    -webkit-animation-name: rotateOut;
    animation-name: rotateOut;
}
@-webkit-keyframes rotateOut {
    to {
        -webkit-transform: rotate(200deg);
        opacity: 0;
    }
}
@keyframes rotateOut {
    to {
        transform: rotate(200deg);
        opacity: 0;
    }
}



.roDownLeftIn {
    -webkit-animation-name: roDownLeftIn;
    animation-name: roDownLeftIn;
}
@-webkit-keyframes roDownLeftIn {
    0% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(-90deg);
        opacity: 0;
    }
    100% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(0);
        opacity: 1;
    }
}
@keyframes roDownLeftIn {
    0% {
        transform-origin: left bottom;
        transform: rotate(-90deg);
        opacity: 0;
    }
    100% {
        transform-origin: left bottom;
        transform: rotate(0);
        opacity: 1;
    }
}



.roDownRightIn {
    -webkit-animation-name: roDownRightIn;
    animation-name: roDownRightIn;
}
@-webkit-keyframes roDownRightIn {
    0% {
        -webkit-transform-origin: right bottom;
        -webkit-transform: rotate(90deg);
        opacity: 0;
    }
    100% {
        -webkit-transform-origin: right bottom;
        -webkit-transform: rotate(0);
        opacity: 1;
    }
}
@keyframes roDownRightIn {
    0% {
        transform-origin: right bottom;
        transform: rotate(90deg);
        opacity: 0;
    }
    100% {
        transform-origin: right bottom;
        transform: rotate(0);
        opacity: 1;
    }
}



.roUpLeftIn {
    -webkit-animation-name: roUpLeftIn;
    animation-name: roUpLeftIn;
}
@-webkit-keyframes roUpLeftIn {
    0% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(90deg);
        opacity: 0;
    }
    100% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(0);
        opacity: 1;
    }
}
@keyframes roUpLeftIn {
    0% {
        transform-origin: left bottom;
        transform: rotate(90deg);
        opacity: 0;
    }
    100% {
        transform-origin: left bottom;
        transform: rotate(0);
        opacity: 1;
    }
}



.roUpRightIn {
    -webkit-animation-name: roUpRightIn;
    animation-name: roUpRightIn;
}
@-webkit-keyframes roUpRightIn {
    0% {
        -webkit-transform-origin: right bottom;
        -webkit-transform: rotate(-90deg);
        opacity: 0;
    }
    100% {
        -webkit-transform-origin: right bottom;
        -webkit-transform: rotate(0);
        opacity: 1;
    }
}
@keyframes roUpRightIn {
    0% {
        transform-origin: right bottom;
        transform: rotate(-90deg);
        opacity: 0;
    }
    100% {
        transform-origin: right bottom;
        transform: rotate(0);
        opacity: 1;
    }
}



.roDownLeftOut {
    -webkit-animation-name: roDownLeftOut;
    animation-name: roDownLeftOut;
}
@-webkit-keyframes roDownLeftOut {
    0% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(0);
        opacity: 1;
    }
    100% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(90deg);
        opacity: 0;
    }
}
@keyframes roDownLeftOut {
    0% {
        transform-origin: left bottom;
        transform: rotate(0);
        opacity: 1;
    }
    100% {
        transform-origin: left bottom;
        transform: rotate(90deg);
        opacity: 0;
    }
}



.roDownRightOut {
    -webkit-animation-name: roDownRightOut;
    animation-name: roDownRightOut;
}
@-webkit-keyframes roDownRightOut {
    0% {
        -webkit-transform-origin: right bottom;
        -webkit-transform: rotate(0);
        opacity: 1;
    }
    100% {
        -webkit-transform-origin: right bottom;
        -webkit-transform: rotate(-90deg);
        opacity: 0;
    }
}
@keyframes roDownRightOut {
    0% {
        transform-origin: right bottom;
        transform: rotate(0);
        opacity: 1;
    }
    100% {
        transform-origin: right bottom;
        transform: rotate(-90deg);
        opacity: 0;
    }
}



.roUpLeftOut {
    -webkit-animation-name: roUpLeftOut;
    animation-name: roUpLeftOut;
}
@-webkit-keyframes roUpLeftOut {
    0% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(0);
        opacity: 1;
    }
    100% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(-90deg);
        opacity: 0;
    }
}
@keyframes roUpLeftOut {
    0% {
        transform-origin: left bottom;
        transform: rotate(0);
        opacity: 1;
    }
    100% {
        transform-origin: left bottom;
        transform: rotate(-90deg);
        opacity: 0;
    }
}



.roUpRightOut {
    -webkit-animation-name: roUpRightOut;
    animation-name: roUpRightOut;
}
@-webkit-keyframes roUpRightOut {
    0% {
        -webkit-transform-origin: right bottom;
        -webkit-transform: rotate(0);
        opacity: 1;
    }
    100% {
        -webkit-transform-origin: right bottom;
        -webkit-transform: rotate(90deg);
        opacity: 0;
    }
}
@keyframes roUpRightOut {
    0% {
        transform-origin: right bottom;
        transform: rotate(0);
        opacity: 1;
    }
    100% {
        transform-origin: right bottom;
        transform: rotate(90deg);
        opacity: 0;
    }
}



/* SLIDE effect
---------------------------------------------------------- */
/* SLIDE */
.slideLeftIn {
    -webkit-animation-name: slideLeftIn;
    animation-name: slideLeftIn;
}
@-webkit-keyframes slideLeftIn {
    from {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
    }
}
@keyframes slideLeftIn {
    from {
        opacity: 0;
        transform: translateX(-2000px);
    }
}

.slideRightIn {
    -webkit-animation-name: slideRightIn;
    animation-name: slideRightIn;
}
@-webkit-keyframes slideRightIn {
    from {
        opacity: 0;
        -webkit-transform: translateX(2000px);

    }
}
@keyframes slideRightIn {
    from {
        opacity: 0;
        transform: translateX(2000px);

    }
}

.slideDownIn {
    -webkit-animation-name: slideDownIn;
    animation-name: slideDownIn;
}
@-webkit-keyframes slideDownIn {
    from {
        opacity: 0;
        -webkit-transform: translateY(2000px);
    }
}
@keyframes slideDownIn {
    from {
        opacity: 0;
        transform: translateY(2000px);
    }
}

.slideUpIn {
    -webkit-animation-name: slideUpIn;
    animation-name: slideUpIn;
}
@-webkit-keyframes slideUpIn {
    from {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
    }
}
@keyframes slideUpIn {
    from {
        opacity: 0;
        transform: translateY(-2000px);
    }
}

.slideLeftOut {
    -webkit-animation-name: slideLeftOut;
    animation-name: slideLeftOut;
}
@-webkit-keyframes slideLeftOut {
    to {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
    }
}
@keyframes slideLeftOut {
    to {
        opacity: 0;
        transform: translateX(-2000px);
    }
}

.slideRightOut {
    -webkit-animation-name: slideRightOut;
    animation-name: slideRightOut;
}
@-webkit-keyframes slideRightOut {
    to {
        opacity: 0;
        -webkit-transform: translateX(2000px);
    }
}
@keyframes slideRightOut {
    to {
        opacity: 0;
        transform: translateX(2000px);
    }
}

.slideUpOut {
    -webkit-animation-name: slideUpOut;
    animation-name: slideUpOut;
}
@-webkit-keyframes slideUpOut {
    to {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
    }
}
@keyframes slideUpOut {
    to {
        opacity: 0;
        transform: translateY(-2000px);
    }
}

.slideDownOut {
    -webkit-animation-name: slideDownOut;
    animation-name: slideDownOut;
}
@-webkit-keyframes slideDownOut {
    to {
        opacity: 0;
        -webkit-transform: translateY(2000px);
    }
}
@keyframes slideDownOut {
    to {
        opacity: 0;
        transform: translateY(2000px);
    }
}


/* SLIDE SHAKE */
.slideShakeLeftOut {
    -webkit-animation-name: slideShakeLeftOut;
    animation-name: slideShakeLeftOut;
}
@-webkit-keyframes slideShakeLeftOut {
    25% {
        -webkit-transform: translateX(-50%) rotate(-7deg);
    }
    50% {
        opacity: .7;
        -webkit-transform: translateX(-100%) rotate(7deg);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-200%) rotate(0deg);
    }
}
@keyframes slideShakeLeftOut {
    25% {
        transform: translateX(-50%) rotate(-7deg);
    }
    50% {
        opacity: .7;
        transform: translateX(-100%) rotate(7deg);
    }
    100% {
        opacity: 0;
        transform: translateX(-200%) rotate(0deg);
    }
}

.slideShakeRightOut {
    -webkit-animation-name: slideShakeRightOut;
    animation-name: slideShakeRightOut;
}
@-webkit-keyframes slideShakeRightOut {
    25% {
        -webkit-transform: translateX(50%) rotate(7deg);
    }
    50% {
        opacity: .7;
        -webkit-transform: translateX(100%) rotate(-7deg);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(200%) rotate(0deg);
    }
}
@keyframes slideShakeRightOut {
    25% {
        transform: translateX(50%) rotate(7deg);
    }
    50% {
        opacity: .7;
        transform: translateX(100%) rotate(-7deg);
    }
    100% {
        opacity: 0;
        transform: translateX(200%) rotate(0deg);
    }
}

.slideShakeUpOut {
    -webkit-animation-name: slideShakeUpOut;
    animation-name: slideShakeUpOut;
}
@-webkit-keyframes slideShakeUpOut {
    25% {
        -webkit-transform: translateY(-50%) rotate(-7deg);
    }
    50% {
        opacity: .7;
        -webkit-transform: translateY(-100%) rotate(7deg);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-200%) rotate(0deg);
    }
}
@keyframes slideShakeUpOut {
    25% {
        transform: translateY(-50%) rotate(-7deg);
    }
    50% {
        opacity: .7;
        transform: translateY(-100%) rotate(7deg);
    }
    100% {
        opacity: 0;
        transform: translateY(-200%) rotate(0deg);
    }
}

.slideShakeDownOut {
    -webkit-animation-name: slideShakeDownOut;
    animation-name: slideShakeDownOut;
}
@-webkit-keyframes slideShakeDownOut {
    25% {
        -webkit-transform: translateY(50%) rotate(7deg);
    }
    50% {
        opacity: .7;
        -webkit-transform: translateY(100%) rotate(-7deg);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(200%) rotate(0deg);
    }
}
@keyframes slideShakeDownOut {
    25% {
        transform: translateY(50%) rotate(7deg);
    }
    50% {
        opacity: .7;
        transform: translateY(100%) rotate(-7deg);
    }
    100% {
        opacity: 0;
        transform: translateY(200%) rotate(0deg);
    }
}



.slideShakeLeftIn {
    -webkit-animation-name: slideShakeLeftIn;
    animation-name: slideShakeLeftIn;
}
@-webkit-keyframes slideShakeLeftIn {
    0% {
        -webkit-transform: translateX(-200%);
    }
    50% {
        opacity: .7;
        -webkit-transform: translateX(-100%) rotate(7deg);
    }
    75% {
        -webkit-transform: translateX(-50%) rotate(-7deg);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0) rotate(0deg);
    }
}
@keyframes slideShakeLeftIn {
    0% {
        transform: translateX(-200%);
    }
    50% {
        opacity: .7;
        transform: translateX(-100%) rotate(7deg);
    }
    75% {
        transform: translateX(-50%) rotate(-7deg);
    }
    100% {
        opacity: 1;
        transform: translateX(0) rotate(0deg);
    }
}

.slideShakeRightIn {
    -webkit-animation-name: slideShakeRightIn;
    animation-name: slideShakeRightIn;
}
@-webkit-keyframes slideShakeRightIn {
    0% {
        -webkit-transform: translateX(200%);
    }
    50% {
        opacity: 0.7;
        -webkit-transform: translateX(100%) rotate(-7deg);
    }
    75% {
        -webkit-transform: translateX(50%) rotate(7deg);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0) rotate(0deg);
    }
}
@keyframes slideShakeRightIn {
    0% {
        transform: translateX(200%);
    }
    50% {
        opacity: 0.7;
        transform: translateX(100%) rotate(-7deg);
    }
    75% {
        transform: translateX(50%) rotate(7deg);
    }
    100% {
        opacity: 1;
        transform: translateX(0) rotate(0deg);
    }
}

.slideShakeUpIn {
    -webkit-animation-name: slideShakeUpIn;
    animation-name: slideShakeUpIn;
}
@-webkit-keyframes slideShakeUpIn {
    0% {
        -webkit-transform: translateY(-200%);
    }
    50% {
        opacity: .7;
        -webkit-transform: translateY(-100%) rotate(7deg);
    }
    75% {
        -webkit-transform: translateY(-50%) rotate(-7deg);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0) rotate(0deg);
    }
}
@keyframes slideShakeUpIn {
    0% {
        transform: translateY(-200%);
    }
    50% {
        opacity: .7;
        transform: translateY(-100%) rotate(7deg);
    }
    75% {
        transform: translateY(-50%) rotate(-7deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotate(0deg);
    }
}

.slideShakeDownIn {
    -webkit-animation-name: slideShakeDownIn;
    animation-name: slideShakeDownIn;
}
@-webkit-keyframes slideShakeDownIn {
    0% {
        -webkit-transform: translateY(200%);
    }
    50% {
        opacity: 0.7;
        -webkit-transform: translateY(100%) rotate(-7deg);
    }
    75% {
        -webkit-transform: translateY(50%) rotate(7deg);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0) rotate(0deg);
    }
}
@keyframes slideShakeDownIn {
    0% {
        transform: translateY(200%);
    }
    50% {
        opacity: 0.7;
        transform: translateY(100%) rotate(-7deg);
    }
    75% {
        transform: translateY(50%) rotate(7deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotate(0deg);
    }
}



/* SLIDE SCALE IN */
.slideScaleLeftIn {
    -webkit-animation-name: slideScaleLeftIn;
    animation-name: slideScaleLeftIn;
}
@-webkit-keyframes slideScaleLeftIn{
    0% {
        opacity: 0;
        -webkit-transform: translateX(-2000px) scale(.1);
    }
    80% {
        opacity: 1;
        -webkit-transform: scale(.8);
    }
}
@keyframes slideScaleLeftIn{
    0% {
        opacity: 0;
        transform: translateX(-2000px) scale(.1);
    }
    80% {
        opacity: 1;
        transform: scale(.8);
    }
}

.slideScaleRightIn {
    -webkit-animation-name: slideScaleRightIn;
    animation-name: slideScaleRightIn;
}
@-webkit-keyframes slideScaleRightIn{
    0% {
        opacity: 0;
        -webkit-transform: translateX(2000px) scale(.1);
    }
    80% {
        opacity: 1;
        -webkit-transform: scale(.8);
    }
}
@keyframes slideScaleRightIn{
    0% {
        opacity: 0;
        transform: translateX(2000px) scale(.1);
    }
    80% {
        opacity: 1;
        transform: scale(.8);
    }
}

.slideScaleUpIn {
    -webkit-animation-name: slideScaleUpIn;
    animation-name: slideScaleUpIn;
}
@-webkit-keyframes slideScaleUpIn{
    0% {
        opacity: 0;
        -webkit-transform: translateY(-2000px) scale(.1);
    }
    80% {
        opacity: 1;
        -webkit-transform: scale(.8);
    }
}
@keyframes slideScaleUpIn{
    0% {
        opacity: 0;
        transform: translateY(-2000px) scale(.1);
    }
    80% {
        opacity: 1;
        transform: scale(.8);
    }
}

.slideScaleDownIn {
    -webkit-animation-name: slideScaleDownIn;
    animation-name: slideScaleDownIn;
}
@-webkit-keyframes slideScaleDownIn{
    0% {
        opacity: 0;
        -webkit-transform: translateY(2000px) scale(.1);
    }
    80% {
        opacity: 1;
        -webkit-transform: scale(.8);
    }
}
@keyframes slideScaleDownIn{
    0% {
        opacity: 0;
        transform: translateY(2000px) scale(.1);
    }
    80% {
        opacity: 1;
        transform: scale(.8);
    }
}



/* SLIDE SCALE OUT */
.slideScaleLeftOut {
    -webkit-animation-name: slideScaleLeftOut;
    animation-name: slideScaleLeftOut;
}
@-webkit-keyframes slideScaleLeftOut{
    30% {
        opacity: 1;
        -webkit-transform: scale(1.2);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-2000px) scale(.1);
    }
}
@keyframes slideScaleLeftOut{
    30% {
        opacity: 1;
        transform: scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translateX(-2000px) scale(.1);
    }
}

.slideScaleRightOut {
    -webkit-animation-name: slideScaleRightOut;
    animation-name: slideScaleRightOut;
}
@-webkit-keyframes slideScaleRightOut{
    30% {
        opacity: 1;
        -webkit-transform: scale(1.2);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(2000px) scale(.1);
    }
}
@keyframes slideScaleRightOut{
    30% {
        opacity: 1;
        transform: scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translateX(2000px) scale(.1);
    }
}

.slideScaleUpOut {
    -webkit-animation-name: slideScaleUpOut;
    animation-name: slideScaleUpOut;
}
@-webkit-keyframes slideScaleUpOut{
    30% {
        opacity: 1;
        -webkit-transform: scale(1.2);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-2000px) scale(.1);
    }
}
@keyframes slideScaleUpOut{
    30% {
        opacity: 1;
        transform: scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translateY(-2000px) scale(.1);
    }
}

.slideScaleDownOut {
    -webkit-animation-name: slideScaleDownOut;
    animation-name: slideScaleDownOut;
}
@-webkit-keyframes slideScaleDownOut{
    30% {
        opacity: 1;
        -webkit-transform: scale(1.2);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(2000px) scale(.1);
    }
}
@keyframes slideScaleDownOut{
    30% {
        opacity: 1;
        transform: scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translateY(2000px) scale(.1);
    }
}





/* SPECIAL effect
---------------------------------------------------------- */
.hinge {
    -webkit-animation-name: hinge;
    animation-name: hinge;
}
@-webkit-keyframes hinge {
    0% {
        -webkit-transform: rotate(0);
        -webkit-transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
    }
    20%, 60% {
        -webkit-transform: rotate(80deg);
        -webkit-transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
    }
    40% {
        -webkit-transform: rotate(60deg);
        -webkit-transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
    }
    80% {
        -webkit-transform: rotate(60deg) translateY(0);
        opacity: 1;
        -webkit-transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
    }
    100% {
        -webkit-transform: translateY(700px);
        transform: translateY(700px);
        opacity: 0;
    }
}
@keyframes hinge {
    0% {
        transform: rotate(0);
        transform-origin: top left;
        animation-timing-function: ease-in-out;
    }
    20%, 60% {
        transform: rotate(80deg);
        transform-origin: top left;
        animation-timing-function: ease-in-out;
    }
    40% {
        transform: rotate(60deg);
        transform-origin: top left;
        animation-timing-function: ease-in-out;
    }
    80% {
        transform: rotate(60deg) translateY(0);
        opacity: 1;
        transform-origin: top left;
        animation-timing-function: ease-in-out;
    }
    100% {
        transform: translateY(700px);
        opacity: 0;
    }
}




/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
.rollIn {
    -webkit-animation-name: rollIn;
    animation-name: rollIn;
}
@-webkit-keyframes rollIn {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100%) rotate(-120deg);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0) rotate(0);
    }
}
@keyframes rollIn {
    0% {
        opacity: 0;
        transform: translateX(-100%) rotate(-120deg);
    }
    100% {
        opacity: 1;
        transform: translateX(0) rotate(0);
    }
}




/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
.rollOut {
    -webkit-animation-name: rollOut;
    animation-name: rollOut;
}
@-webkit-keyframes rollOut {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0) rotate(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(100%) rotate(120deg);
    }
}
@keyframes rollOut {
    0% {
        opacity: 1;
        transform: translateX(0) rotate(0);
    }
    100% {
        opacity: 0;
        transform: translateX(100%) rotate(120deg);
    }
}





/* Table of Effect issue-2 (55 effects)
    + magic
    + swap
    + twistDownIn
    + twistUpIn

    + openDownLeft
    + openDownRight
    + openUpLeft
    + openUpRight

    + openDownLeftReturn
    + openDownRightReturn
    + openUpLeftReturn
    + openUpRightReturn

    + openDownLeftOut
    + openDownRightOut
    + openUpLeftOut
    + openUpRightOut

    + perspectiveDownOut
    + perspectiveLeftOut
    + perspectiveRightOut
    + perspectiveUpOut
    + perspectiveDownIn
    + perspectiveLeftIn
    + perspectiveRightIn
    + perspectiveUpIn

    + puffIn
    + puffOut
    + vanishIn
    + vanishOut
    
    + roLeftOut
    + roRightOut
    + roUpOut
    + roDownOut

    + roLeftIn      --> New Adding
    + roRightIn
    + roUpIn
    + roDownIn
    
    + slideOneLeftOut
    + slideOneRightOut
    + slideOneUpOut
    + slideOneDownOut
    + slideOneLeftIn
    + slideOneRightIn
    + slideOneUpIn
    + slideOneDownIn

    + swashOut
    + swashIn
    + foolishOut
    + foolishIn
    + holeOut

    + slideTinRightOut
    + slideTinLeftOut
    + slideTinUpOut
    + slideTinDownOut

    + slideTinRightIn
    + slideTinLeftIn
    + slideTinUpIn
    + slideTinDownIn

    + bombRightOut
    + bombLeftOut
============================================================== */
.magic {
    -webkit-animation-name: magic;
    animation-name: magic;
}

.swap {
    -webkit-animation-name: swap;
    animation-name: swap;
}

.twistDownIn {
    -webkit-animation-name: twistDownIn;
    animation-name: twistDownIn;
}

.twistUpIn {
    -webkit-animation-name: twistUpIn;
    animation-name: twistUpIn;
}



/* PERSPECTIVE effect
---------------------------------------------------------- */
.perspectiveDownOut {
    -webkit-animation-name: perspectiveDownOut;
    animation-name: perspectiveDownOut;
}

.perspectiveLeftOut {
    -webkit-animation-name: perspectiveLeftOut;
    animation-name: perspectiveLeftOut;
}

.perspectiveRightOut {
    -webkit-animation-name: perspectiveRightOut;
    animation-name: perspectiveRightOut;
}

.perspectiveUpOut {
    -webkit-animation-name: perspectiveUpOut;
    animation-name: perspectiveUpOut;
}

.perspectiveDownIn {
    -webkit-animation-name: perspectiveDownIn;
    animation-name: perspectiveDownIn;
}

.perspectiveLeftIn {
    -webkit-animation-name: perspectiveLeftIn;
    animation-name: perspectiveLeftIn;
}

.perspectiveRightIn {
    -webkit-animation-name: perspectiveRightIn;
    animation-name: perspectiveRightIn;
}

.perspectiveUpIn {
    -webkit-animation-name: perspectiveUpIn;
    animation-name: perspectiveUpIn;
}



/* PUFF effect
---------------------------------------------------------- */
.puffIn {
    -webkit-animation-name: puffIn;
    animation-name: puffIn;
}

.puffOut {
    -webkit-animation-name: puffOut;
    animation-name: puffOut;
}



/* ROTATE effect
---------------------------------------------------------- */
.roLeftOut {
    -webkit-animation-name: roLeftOut;
    animation-name: roLeftOut;
}

.roRightOut {
    -webkit-animation-name: roRightOut;
    animation-name: roRightOut;
}

.roUpOut {
    -webkit-animation-name: roUpOut;
    animation-name: roUpOut;
}
.roDownOut {
    -webkit-animation-name: roDownOut;
    animation-name: roDownOut;
}
.roLeftIn {
    -webkit-animation-name: roLeftIn;
    animation-name: roLeftIn;
}

.roRightIn {
    -webkit-animation-name: roRightIn;
    animation-name: roRightIn;
}

.roUpIn {
    -webkit-animation-name: roUpIn;
    animation-name: roUpIn;
}
.roDownIn {
    -webkit-animation-name: roDownIn;
    animation-name: roDownIn;
}



/* SLIDE ONE effect
---------------------------------------------------------- */
.slideOneLeftOut {
    -webkit-animation-name: slideOneLeftOut;
    animation-name: slideOneLeftOut;
}
.slideOneRightOut {
    -webkit-animation-name: slideOneRightOut;
    animation-name: slideOneRightOut;
}
.slideOneUpOut {
    -webkit-animation-name: slideOneUpOut;
    animation-name: slideOneUpOut;
}
.slideOneDownOut {
    -webkit-animation-name: slideOneDownOut;
    animation-name: slideDown;
}

.slideOneLeftIn {
    -webkit-animation-name: slideOneLeftIn;
    animation-name: slideOneLeftIn;
}
.slideOneRightIn {
    -webkit-animation-name: slideOneRightIn;
    animation-name: slideOneRightIn;
}
.slideOneUpIn {
    -webkit-animation-name: slideOneUpIn;
    animation-name: slideOneUpIn;
}
.slideOneDownIn {
    -webkit-animation-name: slideOneDownIn;
    animation-name: slideOneDownIn;
}



/* SPECIAL effect
---------------------------------------------------------- */
.vanishIn {
    -webkit-animation-name: vanishIn;
    animation-name: vanishIn;
}

.vanishOut {
    -webkit-animation-name: vanishOut;
    animation-name: vanishOut;
}

.swashOut {
    -webkit-animation-name: swashOut;
    animation-name: swashOut;
}

.swashIn {
    -webkit-animation-name: swashIn;
    animation-name: swashIn;
}

.foolishOut {
    -webkit-animation-name: foolishOut;
    animation-name: foolishOut;
}

.foolishIn {
    -webkit-animation-name: foolishIn;
    animation-name: foolishIn;
}

.holeOut {
    -webkit-animation-name: holeOut;
    animation-name: holeOut;
}



/* SLIDE TIN effect
---------------------------------------------------------- */
.slideTinRightOut {
    -webkit-animation-name: slideTinRightOut;
    animation-name: slideTinRightOut;
}

.slideTinLeftOut {
    -webkit-animation-name: slideTinLeftOut;
    animation-name: slideTinLeftOut;
}

.slideTinUpOut {
    -webkit-animation-name: slideTinUpOut;
    animation-name: slideTinUpOut;
}

.slideTinDownOut {
    -webkit-animation-name: slideTinDownOut;
    animation-name: slideTinDownOut;
}

.slideTinRightIn {
    -webkit-animation-name: slideTinRightIn;
        animation-name: slideTinRightIn;
}

.slideTinLeftIn {
    -webkit-animation-name: slideTinLeftIn;
    
    animation-name: slideTinLeftIn;
}

.slideTinUpIn {
    -webkit-animation-name: slideTinUpIn;
    animation-name: slideTinUpIn;
}

.slideTinDownIn {
    -webkit-animation-name: slideTinDownIn;
    animation-name: slideTinDownIn;
}



/* BOMB effect
---------------------------------------------------------- */
.bombRightOut {
    -webkit-animation-name: bombRightOut;
    animation-name: bombRightOut;
}

.bombLeftOut {
    -webkit-animation-name: bombLeftOut;
    animation-name: bombLeftOut;
}





@-webkit-keyframes magic {
    0% {
        opacity: 1;
        -webkit-transform-origin: 100% 200%;
        -webkit-transform: scale(1) rotate(0);
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: 200% 500%;
        -webkit-transform: scale(0) rotate(270deg);
    }
}
@keyframes magic {
    0% {
        opacity: 1;
        transform-origin: 100% 200%;
        transform: scale(1) rotate(0);
    }
    100% {
        opacity: 0;
        transform-origin: 200% 500%;
        transform: scale(0) rotate(270deg);
    }
}
@-webkit-keyframes perspectiveDownOut {
    0% {
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: perspective(800px) rotateX(0);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: perspective(800px) rotateX(-180deg);
    }
}
@keyframes perspectiveDownOut {
    0% {
        transform-origin: 50% 100%;
        transform: perspective(800px) rotateX(0);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform-origin: 50% 100%;
        transform: perspective(800px) rotateX(-180deg);
    }
}
@-webkit-keyframes perspectiveLeftOut {
    0% {
        -webkit-transform-origin: 0 50%;
        -webkit-transform: perspective(800px) rotateY(0);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: 0 50%;
        -webkit-transform: perspective(800px) rotateY(-180deg);
    }
}
@keyframes perspectiveLeftOut {
    0% {
        transform-origin: 0 50%;
        transform: perspective(800px) rotateY(0);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform-origin: 0 50%;
        transform: perspective(800px) rotateY(-180deg);
    }
}
@-webkit-keyframes perspectiveRightOut {
    0% {
        -webkit-transform-origin: 100% 50%;
        -webkit-transform: perspective(800px) rotateY(0);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: 100% 50%;
        -webkit-transform: perspective(800px) rotateY(180deg);
    }
}
@keyframes perspectiveRightOut {
    0% {
        transform-origin: 100% 50%;
        transform: perspective(800px) rotateY(0);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform-origin: 100% 50%;
        transform: perspective(800px) rotateY(180deg);
    }
}
@-webkit-keyframes perspectiveUpOut {
    0% {
        -webkit-transform-origin: 50% 0;
        -webkit-transform: perspective(800px) rotateX(0);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: 50% 0;
        -webkit-transform: perspective(800px) rotateX(180deg);
    }
}
@keyframes perspectiveUpOut {
    0% {
        transform-origin: 50% 0;
        transform: perspective(800px) rotateX(0);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform-origin: 50% 0;
        transform: perspective(800px) rotateX(180deg);
    }
}
@-webkit-keyframes perspectiveDownIn {
    0% {
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: perspective(800px) rotateX(-180deg);
    }
    100% {
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: perspective(800px) rotateX(0);
    }
}
@keyframes perspectiveDownIn {
    0% {
        transform-origin: 50% 100%;
        transform: perspective(800px) rotateX(-180deg);
    }
    100% {
        transform-origin: 50% 100%;
        transform: perspective(800px) rotateX(0);
    }
}
@-webkit-keyframes perspectiveLeftIn {
    0% {
        -webkit-transform-origin: 0 50%;
        -webkit-transform: perspective(800px) rotateY(-180deg);
    }
    100% {
        -webkit-transform-origin: 0 50%;
        -webkit-transform: perspective(800px) rotateY(0);
    }
}
@keyframes perspectiveLeftIn {
    0% {
        /*transform-origin: 0 0;  --> // defalut*/
        transform-origin: 0 50%;
        transform: perspective(800px) rotateY(-180deg);
    }
    100% {
        transform-origin: 0 50%;
        transform: perspective(800px) rotateY(0);
    }
}
@-webkit-keyframes perspectiveRightIn {
    0% {
        -webkit-transform-origin: 100% 50%;
        -webkit-transform: perspective(800px) rotateY(180deg);
    }
    100% {
        -webkit-transform-origin: 100% 50%;
        -webkit-transform: perspective(800px) rotateY(0);
    }
}
@keyframes perspectiveRightIn {
    0% {
        transform-origin: 100% 50%;
        transform: perspective(800px) rotateY(180deg);
    }
    100% {
        transform-origin: 100% 50%;
        transform: perspective(800px) rotateY(0);
    }
}
@-webkit-keyframes perspectiveUpIn {
  0% {
    -webkit-transform-origin: 50% 0;
    -webkit-transform: perspective(800px) rotateX(180deg);
  }

  100% {
    -webkit-transform-origin: 50% 0;
    -webkit-transform: perspective(800px) rotateX(0);
  }
}
@keyframes perspectiveUpIn {
    0% {
        transform-origin: 50% 0;
        transform: perspective(800px) rotateX(180deg);
    }
    100% {
        transform-origin: 50% 0;
        transform: perspective(800px) rotateX(0);
    }
}
@-webkit-keyframes puffIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(2);
        /*-webkit-filter: blur(2px);*/
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
    }
}
@keyframes puffIn {
    0% {
        opacity: 0;
        transform: scale(2);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
@-webkit-keyframes puffOut {
    0% {
        opacity: 1;
        -webkit-transform: scale(1);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(2);
        /*-webkit-filter: blur(2px);*/
    }
}
@keyframes puffOut {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(2);
    }
}



/* Rotate Out */
@-webkit-keyframes roLeftOut {
    0% {
        -webkit-transform-origin: 50% 50% -200px;
        -webkit-transform: perspective(800px) translateZ(-200px) rotateY(0);
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: 50% 50% -200px;
        -webkit-transform: perspective(800px) translateZ(-200px) rotateY(-180deg);
    }
}
@keyframes roLeftOut {
    0% {
        transform-origin: 50% 50% -200px;
        transform: perspective(800px) translateZ(-200px) rotateY(0);
    }
    100% {
        opacity: 0;
        transform-origin: 50% 50% -200px;
        transform: perspective(800px) translateZ(-200px) rotateY(-180deg);
    }
}

@-webkit-keyframes roRightOut {
    0% {
        -webkit-transform-origin: 50% 50% -200px;
        -webkit-transform: perspective(800px) translateZ(-200px) rotateY(0);
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: 50% 50% -200px;
        -webkit-transform: perspective(800px) translateZ(-200px) rotateY(180deg);
    }
}
@keyframes roRightOut {
    0% {
        transform-origin: 50% 50% -200px;
        transform: perspective(800px) translateZ(-200px) rotateY(0);
    }
    100% {
        opacity: 0;
        transform-origin: 50% 50% -200px;
        transform: perspective(800px) translateZ(-200px) rotateY(180deg);
    }
}

@-webkit-keyframes roUpOut {
    0% {
        -webkit-transform-origin: 50% 50% -150px;
        -webkit-transform: perspective(800px) translateZ(-150px) rotateX(0);
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: 50% 50% -150px;
        -webkit-transform: perspective(800px) translateZ(-150px) rotateX(180deg);
    }
}
@keyframes roUpOut {
    0% {
        transform-origin: 50% 50% -150px;
        transform: perspective(800px) translateZ(-150px) rotateX(0);
    }
    100% {
        opacity: 0;
        transform-origin: 50% 50% -150px;
        transform: perspective(800px) translateZ(-150px) rotateX(180deg);
    }
}

@-webkit-keyframes roDownOut {
    0% {
        -webkit-transform-origin: 50% 50% -150px;
        -webkit-transform: perspective(800px) translateZ(-150px) rotateX(0);
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: 50% 50% -150px;
        -webkit-transform: perspective(800px) translateZ(-150px) rotateX(-180deg);
    }
}
@keyframes roDownOut {
    0% {
        transform-origin: 50% 50% -150px;
        transform: perspective(800px) translateZ(-150px) rotateX(0);
    }
    100% {
        opacity: 0;
        transform-origin: 50% 50% -150px;
        transform: perspective(800px) translateZ(-150px) rotateX(-180deg);
    }
}


/* Rotate IN */
@-webkit-keyframes roLeftIn {
    0% {
        opacity: 0;
        -webkit-transform-origin: 50% 50% -200px;
        -webkit-transform: perspective(800px) translateZ(-200px) rotateY(-180deg);
    }
    100% {
        opacity: 1;
        -webkit-transform-origin: 50% 50% -200px;
        -webkit-transform: perspective(800px) translateZ(-200px) rotateY(0);
    }
}
@keyframes roLeftIn {
    0% {
        opacity: 0;
        transform-origin: 50% 50% -200px;
        transform: perspective(800px) translateZ(-200px) rotateY(-180deg);
    }
    100% {
        opacity: 1;
        transform-origin: 50% 50% -200px;
        transform: perspective(800px) translateZ(-200px) rotateY(0);
    }
}

@-webkit-keyframes roRightIn {
    0% {
        opacity: 0;
        -webkit-transform-origin: 50% 50% -200px;
        -webkit-transform: perspective(800px) translateZ(-200px) rotateY(180deg);
    }
    100% {
        opacity: 1;
        -webkit-transform-origin: 50% 50% -200px;
        -webkit-transform: perspective(800px) translateZ(-200px) rotateY(0);
    }
}
@keyframes roRightIn {
    0% {
        opacity: 0;
        transform-origin: 50% 50% -200px;
        transform: perspective(800px) translateZ(-200px) rotateY(180deg);
    }
    100% {
        opacity: 1;
        transform-origin: 50% 50% -200px;
        transform: perspective(800px) translateZ(-200px) rotateY(0);
    }
}

@-webkit-keyframes roUpIn {
    0% {
        opacity: 0;
        -webkit-transform-origin: 50% 50% -150px;
        -webkit-transform: perspective(800px) translateZ(-150px) rotateX(180deg);
    }
    100% {
        opacity: 1;
        -webkit-transform-origin: 50% 50% -150px;
        -webkit-transform: perspective(800px) translateZ(-150px) rotateX(0);
    }
}
@keyframes roUpIn {
    0% {
        opacity: 0;
        transform-origin: 50% 50% -150px;
        transform: perspective(800px) translateZ(-150px) rotateX(180deg);
    }
    100% {
        opacity: 1;
        transform-origin: 50% 50% -150px;
        transform: perspective(800px) translateZ(-150px) rotateX(0);
    }
}

@-webkit-keyframes roDownIn {
    0% {
        opacity: 0;
        -webkit-transform-origin: 50% 50% -150px;
        -webkit-transform: perspective(800px) translateZ(-150px) rotateX(-180deg);
    }
    100% {
        opacity: 1;
        -webkit-transform-origin: 50% 50% -150px;
        -webkit-transform: perspective(800px) translateZ(-150px) rotateX(0);
    }
}
@keyframes roDownIn {
    0% {
        opacity: 0;
        transform-origin: 50% 50% -150px;
        transform: perspective(800px) translateZ(-150px) rotateX(-180deg);
    }
    100% {
        opacity: 1;
        transform-origin: 50% 50% -150px;
        transform: perspective(800px) translateZ(-150px) rotateX(0);
    }
}



/* Notes: phai them from(0) hoac to(0) de fix loi easing trong chrome */
@-webkit-keyframes slideOneLeftOut {
    from { -webkit-transform: translateX(0); }
    to { -webkit-transform: translateX(-100%); }
}
@keyframes slideOneLeftOut {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

@-webkit-keyframes slideOneRightOut {
    from { -webkit-transform: translateX(0); }
    to { -webkit-transform: translateX(100%); }
}
@keyframes slideOneRightOut {
    from { transform: translateX(0); }
    to { transform: translateX(100%); }
}

@-webkit-keyframes slideOneUpOut {
    from { -webkit-transform: translateY(0); }
    to { -webkit-transform: translateY(-100%); }
}
@keyframes slideOneUpOut {
    from { transform: translateY(0); }
    to { transform: translateY(-100%); }
}

@-webkit-keyframes slideOneDownOut {
    from { -webkit-transform: translateY(0); }
    to { -webkit-transform: translateY(100%); }
}
@keyframes slideOneDownOut {
    from { transform: translateY(0); }
    to { transform: translateY(100%); }
}

@-webkit-keyframes slideOneLeftIn {
    from { -webkit-transform: translateX(-100%); }
    to { -webkit-transform: translateX(0); }
}
@keyframes slideOneLeftIn {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

@-webkit-keyframes slideOneRightIn {
    from { -webkit-transform: translateX(100%); }
    to { -webkit-transform: translateX(0); }
}
@keyframes slideOneRightIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

@-webkit-keyframes slideOneUpIn {
    from { -webkit-transform: translateY(-100%); }
    to { -webkit-transform: translateY(0); }
}
@keyframes slideOneUpIn {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

@-webkit-keyframes slideOneDownIn {
    from { -webkit-transform: translateY(100%); }
    to { -webkit-transform: translateY(0); }
}
@keyframes slideOneDownIn {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}





@-webkit-keyframes swap {
    0% {
        opacity: 0;
        -webkit-transform-origin: 0 100%;
        /*-webkit-transform: scale(0) translate(-700px, 0);*/
        -webkit-transform: scale(0) translate(-200%, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform-origin: 100% 100%;
        -webkit-transform: scale(1) translate(0, 0);
    }
}
@keyframes swap {
    0% {
        opacity: 0;
        transform-origin: 0 100%;
        /*transform: scale(0) translate(-700px, 0);*/
        transform: scale(0) translate(-200%, 0);
    }
    100% {
        opacity: 1;
        transform-origin: 100% 100%;
        transform: scale(1) translate(0, 0);
    }
}

@-webkit-keyframes twistDownIn {
    0% {
        opacity: 0;
        -webkit-transform-origin: 0 100%;
        -webkit-transform: scale(0) rotate(360deg) translateY(-100%);
    }
    30% {
        -webkit-transform-origin: 0 100%;
        -webkit-transform: scale(0) rotate(360deg) translateY(-100%);
    }
    100% {
        opacity: 1;
        -webkit-transform-origin: 100% 100%;
        -webkit-transform: scale(1) rotate(0) translateY(0);
    }
}
@keyframes twistDownIn {
    0% {
        opacity: 0;
        transform-origin: 0 100%;
        transform: scale(0) rotate(360deg) translateY(-100%);
    }
    30% {
        transform-origin: 0 100%;
        transform: scale(0) rotate(360deg) translateY(-100%);
    }
    100% {
        opacity: 1;
        transform-origin: 100% 100%;
        transform: scale(1) rotate(0) translateY(0);
    }
}
@-webkit-keyframes twistUpIn {
    0% {
        opacity: 0;
        -webkit-transform-origin: 100% 0;
        -webkit-transform: scale(0) rotate(360deg) translateY(100%);
    }
    30% {
        -webkit-transform-origin: 100% 0;
        -webkit-transform: scale(0) rotate(360deg) translateY(100%);
    }
    100% {
        opacity: 1;
        -webkit-transform-origin: 0 0;
        -webkit-transform: scale(1) rotate(0) translateY(0);
    }
}
@keyframes twistUpIn {
    0% {
        opacity: 0;
        transform-origin: 100% 0;
        transform: scale(0) rotate(360deg) translateY(100%);
    }
    30% {
        transform-origin: 100% 0;
        transform: scale(0) rotate(360deg) translateY(100%);
    }
    100% {
        opacity: 1;
        transform-origin: 0 0;
        transform: scale(1) rotate(0) translateY(0);
    }
}
@-webkit-keyframes vanishIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(2);
        -webkit-filter: blur(90px);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        -webkit-filter: blur(0);
    }
}
@keyframes vanishIn {
    0% {
        opacity: 0;
        transform: scale(2);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
@-webkit-keyframes vanishOut {
    0% {
        opacity: 1;
        -webkit-transform: scale(1);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(2);
        -webkit-filter: blur(20px);
    }
}
@keyframes vanishOut {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(2);
    }
}
@-webkit-keyframes swashOut {
    0% {
        opacity: 1;
        -webkit-transform: scale(1);
    }
    80% {
        opacity: 1;
        -webkit-transform: scale(.9);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(0);
    }
}
@keyframes swashOut {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    80% {
        opacity: 1;
        transform: scale(.9);
    }
    100% {
        opacity: 0;
        transform: scale(0);
    }
}
@-webkit-keyframes swashIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
    }
    90% {
        opacity: 1;
        -webkit-transform: scale(.9);
    }
    100% {
        -webkit-transform: scale(1);
    }
}
@keyframes swashIn {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    90% {
        opacity: 1;
        transform: scale(.9);
    }
    100% {
        transform: scale(1);
    }
}
@-webkit-keyframes foolishOut {
    0% {
        opacity: 1;
        -webkit-transform-origin: 50% 50%;
        -webkit-transform: scale(1) rotate(360deg);
    }
    20% {
        opacity: 1;
        -webkit-transform-origin: 0 0;
        -webkit-transform: scale(.5) rotate(0);
    }
    40% {
        opacity: 1;
        -webkit-transform-origin: 100% 0%;
        -webkit-transform: scale(.5) rotate(0);
    }
    60% {
        opacity: 1;
        -webkit-transform-origin: 0%;
        -webkit-transform: scale(.5) rotate(0);
    }
    80% {
        opacity: 1;
        -webkit-transform-origin: 0% 100%;
        -webkit-transform: scale(.5) rotate(0);
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: 50% 50%;
        -webkit-transform: scale(0) rotate(0);
    }
}
@keyframes foolishOut {
    0% {
        opacity: 1;
        transform-origin: 50% 50%;
        transform: scale(1) rotate(360deg);
    }
    20% {
        opacity: 1;
        transform-origin: 0 0;
        transform: scale(.5) rotate(0);
    }
    40% {
        opacity: 1;
        transform-origin: 100% 0%;
        transform: scale(.5) rotate(0);
    }
    60% {
        opacity: 1;
        transform-origin: 0%;
        transform: scale(.5) rotate(0);
    }
    80% {
        opacity: 1;
        transform-origin: 0% 100%;
        transform: scale(.5) rotate(0);
    }
    100% {
        opacity: 0;
        transform-origin: 50% 50%;
        transform: scale(0) rotate(0);
    }
}
@-webkit-keyframes foolishIn {
    0% {
        opacity: 0;
        -webkit-transform-origin: 50% 50%;
        -webkit-transform: scale(0) rotate(360deg);
    }
    20% {
        opacity: 1;
        -webkit-transform-origin: 0% 100%;
        -webkit-transform: scale(.5) rotate(0);
    }
    40% {
        opacity: 1;
        -webkit-transform-origin: 100% 100%;
        -webkit-transform: scale(.5) rotate(0);
    }
    60% {
        opacity: 1;
        -webkit-transform-origin: 0%;
        -webkit-transform: scale(.5) rotate(0);
    }
    80% {
        opacity: 1;
        -webkit-transform-origin: 0 0;
        -webkit-transform: scale(.5) rotate(0);
    }
    100% {
        opacity: 1;
        -webkit-transform-origin: 50% 50%;
        -webkit-transform: scale(1) rotate(0);
    }
}
@keyframes foolishIn {
    0% {
        opacity: 0;
        transform-origin: 50% 50%;
        transform: scale(0) rotate(360deg);
    }
    20% {
        opacity: 1;
        transform-origin: 0% 100%;
        transform: scale(.5) rotate(0);
    }
    40% {
        opacity: 1;
        transform-origin: 100% 100%;
        transform: scale(.5) rotate(0);
    }
    60% {
        opacity: 1;
        transform-origin: 0%;
        transform: scale(.5) rotate(0);
    }
    80% {
        opacity: 1;
        transform-origin: 0 0;
        transform: scale(.5) rotate(0);
    }
    100% {
        opacity: 1;
        transform-origin: 50% 50%;
        transform: scale(1) rotate(0);
    }
}
@-webkit-keyframes holeOut {
    0% {
        opacity: 1;
        -webkit-transform: scale(1) rotateY(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(0) rotateY(180deg);
    }
}
@keyframes holeOut {
    0% {
        opacity: 1;
        transform: scale(1) rotateY(0);
    }
    100% {
        opacity: 0;
        transform: scale(0) rotateY(180deg);
    }
}
@-webkit-keyframes slideTinRightOut {
    0%, 20%, 40%, 50% {
        opacity: 1;
        -webkit-transform: scale(1) translateX(0);
    }
    10%, 30% {
        opacity: 1;
        -webkit-transform: scale(1.1) translateX(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1) translateX(900%);
    }
}
@keyframes slideTinRightOut {
    0%, 20%, 40%, 50% {
        opacity: 1;
        transform: scale(1) translateX(0);
    }
    10%, 30% {
        opacity: 1;
        transform: scale(1.1) translateX(0);
    }
    100% {
        opacity: 0;
        transform: scale(1) translateX(900%);
    }
}
@-webkit-keyframes slideTinLeftOut {
    0%, 20%, 40%, 50% {
        opacity: 1;
        -webkit-transform: scale(1) translateX(0);
    }
    10%, 30% {
        opacity: 1;
        -webkit-transform: scale(1.1) translateX(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1) translateX(-900%);
    }
}
@keyframes slideTinLeftOut {
    0%, 20%, 40%, 50% {
        opacity: 1;
        transform: scale(1) translateX(0);
    }
    10%, 30% {
        opacity: 1;
        transform: scale(1.1) translateX(0);
    }
    100% {
        opacity: 0;
        transform: scale(1) translateX(-900%);
    }
}
@-webkit-keyframes slideTinUpOut {
    0%, 20%, 40%, 50% {
        opacity: 1;
        -webkit-transform: scale(1) translateY(0);
    }
    10%, 30% {
        opacity: 1;
        -webkit-transform: scale(1.1) translateY(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1) translateY(-900%);
    }
}
@keyframes slideTinUpOut {
    0%, 20%, 40%, 50% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    10%, 30% {
        opacity: 1;
        transform: scale(1.1) translateY(0);
    }
    100% {
        opacity: 0;
        transform: scale(1) translateY(-900%);
    }
}
@-webkit-keyframes slideTinDownOut {
    0%, 20%, 40%, 50% {
        opacity: 1;
        -webkit-transform: scale(1) translateY(0);
    }
    10%, 30% {
        opacity: 1;
        -webkit-transform: scale(1.1) translateY(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1) translateY(900%);
    }
}
@keyframes slideTinDownOut {
    0%, 20%, 40%, 50% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    10%, 30% {
        opacity: 1;
        transform: scale(1.1) translateY(0);
    }
    100% {
        opacity: 0;
        transform: scale(1) translateY(900%);
    }
}
@-webkit-keyframes slideTinRightIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(1) translateX(900%);
    }
    50%, 70%, 90% {
        opacity: 1;
        -webkit-transform: scale(1.1) translateX(0);
    }
    60%, 80%, 100% {
        opacity: 1;
        -webkit-transform: scale(1) translateX(0);
    }
}
@keyframes slideTinRightIn {
    0% {
        opacity: 0;
        transform: scale(1) translateX(900%);
    }
    50%, 70%, 90% {
        opacity: 1;
        transform: scale(1.1) translateX(0);
    }
    60%, 80%, 100% {
        opacity: 1;
        transform: scale(1) translateX(0);
    }
}
@-webkit-keyframes slideTinLeftIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(1) translateX(-900%);
    }
    50%, 70%, 90% {
        opacity: 1;
        -webkit-transform: scale(1.1) translateX(0);
    }
    60%, 80%, 100% {
        opacity: 1;
        -webkit-transform: scale(1) translateX(0);
    }
}
@keyframes slideTinLeftIn {
    0% {
        opacity: 0;
        transform: scale(1) translateX(-900%);
    }
    50%, 70%, 90% {
        opacity: 1;
        transform: scale(1.1) translateX(0);
    }
    60%, 80%, 100% {
        opacity: 1;
        transform: scale(1) translateX(0);
    }
}
@-webkit-keyframes slideTinUpIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(1) translateY(-900%);
    }
    50%, 70%, 90% {
        opacity: 1;
        -webkit-transform: scale(1.1) translateY(0);
    }
    60%, 80%, 100% {
        opacity: 1;
        -webkit-transform: scale(1) translateY(0);
    }
}
@keyframes slideTinUpIn {
    0% {
        opacity: 0;
        transform: scale(1) translateY(-900%);
    }
    50%, 70%, 90% {
        opacity: 1;
        transform: scale(1.1) translateY(0);
    }
    60%, 80%, 100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}
@-webkit-keyframes slideTinDownIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(1) translateY(900%);
    }
    50%, 70%, 90% {
        opacity: 1;
        -webkit-transform: scale(1.1) translateY(0);
    }
    60%, 80%, 100% {
        opacity: 1;
        -webkit-transform: scale(1) translateY(0);
    }
}
@keyframes slideTinDownIn {
    0% {
        opacity: 0;
        transform: scale(1) translateY(900%);
    }
    50%, 70%, 90% {
        opacity: 1;
        transform: scale(1.1) translateY(0);
    }
    60%, 80%, 100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}
@-webkit-keyframes bombRightOut {
    0% {
        opacity: 1;
        -webkit-transform: rotate(0);
    }
    50% {
        opacity: 1;
        -webkit-transform-origin: 200% 50%;
        -webkit-transform: rotate(160deg);
        -webkit-filter: blur(0);
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: 200% 50%;
        -webkit-transform: rotate(160deg);
        -webkit-filter: blur(20px);
    }
}
@keyframes bombRightOut {
    0% {
        opacity: 1;
        transform: rotate(0);
    }
    50% {
        opacity: 1;
        transform-origin: 200% 50%;
        transform: rotate(160deg);
    }
    100% {
        opacity: 0;
        transform-origin: 200% 50%;
        transform: rotate(160deg);
    }
}
@-webkit-keyframes bombLeftOut {
    0% {
        opacity: 1;
        -webkit-transform-origin: 50% 50%;
        -webkit-transform: rotate(0);
    }
    50% {
        opacity: 1;
        -webkit-transform-origin: -100% 50%;
        -webkit-transform: rotate(-160deg);
        -webkit-filter: blur(0);
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: -100% 50%;
        -webkit-transform: rotate(-160deg);
        -webkit-filter: blur(20px);
    }
}
@keyframes bombLeftOut {
    0% {
        opacity: 1;
        transform-origin: 50% 50%;
        transform: rotate(0);
    }
    50% {
        opacity: 1;
        transform-origin: -100% 50%;
        transform: rotate(-160deg);
    }
    100% {
        opacity: 0;
        transform-origin: -100% 50%;
        transform: rotate(-160deg);
    }
}





/* Table of Effect issue-3 (4 effects)
    + pullIn
    + pullOut
    + pushIn
    + pushOut
============================================================== */
/* PULL PUSH */
.pullIn {
    -webkit-animation-name: pullIn;
    animation-name: pullIn;
}
@-webkit-keyframes pullIn {
    from {
        -webkit-transform: scale(0);
        opacity: 0;
    }
}
@keyframes pullIn {
    from {
        transform: scale(0);
        opacity: 0;
    }
}

.pullOut {
    -webkit-animation-name: pullOut;
    animation-name: pullOut;
}
@-webkit-keyframes pullOut {
    to {
        -webkit-transform: scale(0);
        opacity: 0;
    }
}
@keyframes pullOut {
    to {
        transform: scale(0);
        opacity: 0;
    }
}

.pushIn {
    -webkit-animation-name: pushIn;
    animation-name: pushIn;
}
@-webkit-keyframes pushIn {
    from {
        -webkit-transform: scale(2);
        opacity: 0;
    }
}
@keyframes pushIn {
    from {
        transform: scale(2);
        opacity: 0;
    }
}

.pushOut {
    -webkit-animation-name: pushOut;
    animation-name: pushOut;
}
@-webkit-keyframes pushOut {
    to {
        -webkit-transform: scale(2);
        opacity: 0;
    }
}
@keyframes pushOut {
    to {
        transform: scale(2);
        opacity: 0;
    }
}



/* PULL BOUNCE */
.pullBounceIn {
    -webkit-animation-name: pullBounceIn;
    animation-name: pullBounceIn;
}
@-webkit-keyframes pullBounceIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
    }
    70% {
        opacity: 1;
        -webkit-transform: scale(1.2);
    }
}
@keyframes pullBounceIn {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    70% {
        opacity: 1;
        transform: scale(1.2);
    }
}

.pullBounceOut {
    -webkit-animation-name: pullBounceOut;
    animation-name: pullBounceOut;
}
@-webkit-keyframes pullBounceOut {
    30% {
        opacity: 1;
        -webkit-transform: scale(1.2);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(0);
    }
}
@keyframes pullBounceOut {
    30% {
        opacity: 1;
        transform: scale(1.2);
    }
    100% {
        opacity: 0;
        transform: scale(0);
    }
}


.pushBounceIn {
    -webkit-animation-name: pushBounceIn;
    animation-name: pushBounceIn;
}
@-webkit-keyframes pushBounceIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(2);
    }
    70% {
        opacity: 1;
        -webkit-transform: scale(.8);
    }
}
@keyframes pushBounceIn {
    0% {
        opacity: 0;
        transform: scale(2);
    }
    70% {
        opacity: 1;
        transform: scale(.8);
    }
}

.pushBounceOut {
    -webkit-animation-name: pushBounceOut;
    animation-name: pushBounceOut;
}
@-webkit-keyframes pushBounceOut {
    30% {
        -webkit-transform: scale(.8);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(2);
    }
}
@keyframes pushBounceOut {
    30% {
        transform: scale(.8);
    }
    100% {
        opacity: 0;
        transform: scale(2);
    }
}



/* PULL SOFT */
.pullSoftIn {
    -webkit-animation-name: pullSoftIn;
    animation-name: pullSoftIn;
}
@-webkit-keyframes pullSoftIn {
    from {
        -webkit-transform: scale(.9);
        opacity: 0;
    }
}
@keyframes pullSoftIn {
    from {
        transform: scale(.9);
        opacity: 0;
    }
}

.pullSoftOut {
    -webkit-animation-name: pullSoftOut;
    animation-name: pullSoftOut;
}
@-webkit-keyframes pullSoftOut {
    to {
        -webkit-transform: scale(.9);
        opacity: 0;
    }
}
@keyframes pullSoftOut {
    to {
        transform: scale(.9);
        opacity: 0;
    }
}

.pushSoftIn {
    -webkit-animation-name: pushSoftIn;
    animation-name: pushSoftIn;
}
@-webkit-keyframes pushSoftIn {
    from {
        -webkit-transform: scale(1.1);
        opacity: 0;
    }
}
@keyframes pushSoftIn {
    from {
        transform: scale(1.1);
        opacity: 0;
    }
}

.pushSoftOut {
    -webkit-animation-name: pushSoftOut;
    animation-name: pushSoftOut;
}
@-webkit-keyframes pushSoftOut {
    to {
        -webkit-transform: scale(1.1);
        opacity: 0;
    }
}
@keyframes pushSoftOut {
    to {
        transform: scale(1.1);
        opacity: 0;
    }
}






/* WAVE EFFECT */
.wave {
    -webkit-animation-name: wave;
       animation-name: wave;
}
.waveLoop {
   -webkit-animation-name: wave;
           animation-name: wave;
   -webkit-animation-iteration-count: infinite;
           animation-iteration-count: infinite;
}
@-webkit-keyframes wave {
    0%, 100% {
        -webkit-transform: perspective(800px) translateZ(0);
    }
    25%, 75% {
        -webkit-transform: perspective(800px) translateZ(-100px);
    }
    50% {
        -webkit-transform: perspective(800px) translateZ(100px);
    }
}

@keyframes wave {
    0%, 100% {
        transform: perspective(800px) translateZ(0);
    }
    25%, 75% {
        transform: perspective(800px) translateZ(-100px);
    }
    50% {
        transform: perspective(800px) translateZ(100px);
    }
}



/* BOB EFFECT */
.bobUp {
    -webkit-animation-name: bobUp;
        animation-name: bobUp;

    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
}
@-webkit-keyframes bobUp {
    0%, 100% {
        -webkit-transform: perspective(800px) rotateX(0);
    }
    25% {
        -webkit-transform: perspective(800px) rotateX(45deg);
    }
    50% {
        -webkit-transform: perspective(800px) rotateX(-30deg);
    }
    75% {
        -webkit-transform: perspective(800px) rotateX(30deg);
    }
}
@keyframes bobUp {
    0%, 100% {
        transform: perspective(800px) rotateX(0);
    }
    25% {
        transform: perspective(800px) rotateX(45deg);
    }
    50% {
        transform: perspective(800px) rotateX(-30deg);
    }
    75% {
        transform: perspective(800px) rotateX(30deg);
    }
}

.bobDown {
    -webkit-animation-name: bobDown;
        animation-name: bobDown;

    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}
@-webkit-keyframes bobDown {
    0%, 100% {
        -webkit-transform: perspective(800px) rotateX(0);
    }
    25% {
        -webkit-transform: perspective(800px) rotateX(-45deg);
    }
    50% {
        -webkit-transform: perspective(800px) rotateX(30deg);
    }
    75% {
        -webkit-transform: perspective(800px) rotateX(-30deg);
    }
}
@keyframes bobDown {
    0%, 100% {
        transform: perspective(800px) rotateX(0);
    }
    25% {
        transform: perspective(800px) rotateX(-45deg);
    }
    50% {
        transform: perspective(800px) rotateX(30deg);
    }
    75% {
        transform: perspective(800px) rotateX(-30deg);
    }
}


.bobLeft {
    -webkit-animation-name: bobLeft;
        animation-name: bobLeft;

    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
}
@-webkit-keyframes bobLeft {
    0%, 100% {
        -webkit-transform: perspective(800px) rotateY(0);
    }
    25% {
        -webkit-transform: perspective(800px) rotateY(-30deg);
    }
    50% {
        -webkit-transform: perspective(800px) rotateY(15deg);
    }
    75% {
        -webkit-transform: perspective(800px) rotateY(-15deg);
    }
}
@keyframes bobLeft {
    0%, 100% {
        transform: perspective(800px) rotateY(0);
    }
    25% {
        transform: perspective(800px) rotateY(-30deg);
    }
    50% {
        transform: perspective(800px) rotateY(15deg);
    }
    75% {
        transform: perspective(800px) rotateY(-15deg);
    }
}


.bobRight {
    -webkit-animation-name: bobRight;
    animation-name: bobRight;

    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
}
@-webkit-keyframes bobRight {
    0%, 100% {
        -webkit-transform: perspective(800px) rotateY(0);
    }
    25% {
        -webkit-transform: perspective(800px) rotateY(30deg);
    }
    50% {
        -webkit-transform: perspective(800px) rotateY(-15deg);
    }
    75% {
        -webkit-transform: perspective(800px) rotateY(15deg);
    }
}
@keyframes bobRight {
    0%, 100% {
        transform: perspective(800px) rotateY(0);
    }
    25% {
        transform: perspective(800px) rotateY(30deg);
    }
    50% {
        transform: perspective(800px) rotateY(-15deg);
    }
    75% {
        transform: perspective(800px) rotateY(15deg);
    }
}



/* JUGGLE EFFECT */
.juggle {
    -webkit-animation-name: juggle;
                   animation-name: juggle;
}
@-webkit-keyframes juggle {
    0%, 100% {
        -webkit-transform: perspective(800px) translateZ(0) rotateY(0);
    }
    65% {
        -webkit-transform: perspective(800px) translateZ(400px) rotateY(420deg);
    }
}
@keyframes juggle {
    0%, 100% {
        transform: perspective(800px) translateZ(0) rotateY(0);
    }
    65% {
        transform: perspective(800px) translateZ(400px) rotateY(420deg);
    }
}


/* Loai bo vi khong hoat dong duoc */
/*.rollRight {
    -webkit-animation-name: rollRight;
}
@-webkit-keyframes rollRight {
    0% {
        -webkit-transform-origin: 100% 100%;
        -webkit-transform: rotate(0);
    }
    25% {
        -webkit-transform-origin: 100% 100%;
        -webkit-transform: rotate(90deg);
    }
    50% {
        -webkit-transform-origin: 100% 0%;
        -webkit-transform: translateY(100%) rotate(180deg);
    }
    100% {
        -webkit-transform-origin: 100% 0%;
        -webkit-transform: translateX(100%) rotate(270deg);
    }
}*/


.flatten {
    -webkit-animation-name: flatten;
                   animation-name: flatten;
}
@-webkit-keyframes flatten {
    0% {
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: scaleX(1) skewX(0);
    }
    25% {
        -webkit-transform: scaleX(.8) skewX(45deg);
    }
    50% {
        -webkit-transform: scaleX(.5) skewX(-30deg);
    }
    75% {
        -webkit-transform: scaleX(.3) skewX(30deg);
    }
    100% {
        -webkit-transform: scaleX(0) skewX(0);
    }
}
@keyframes flatten {
    0% {
        transform-origin: 50% 100%;
        transform: scaleX(1) skewX(0);
    }
    25% {
        transform: scaleX(.8) skewX(45deg);
    }
    50% {
        transform: scaleX(.5) skewX(-30deg);
    }
    75% {
        transform: scaleX(.3) skewX(30deg);
    }
    100% {
        transform: scaleX(0) skewX(0);
    }
}


/* RING */
.ringLeft {
    -webkit-animation-name: ringLeft;
    animation-name: ringLeft;
}
@-webkit-keyframes ringLeft {
    0% {
        -webkit-transform-origin: 50% 50% -200px;
        -webkit-transform: perspective(800px) translateZ(-200px) rotateY(0);
    }
    100% {
        -webkit-transform-origin: 50% 50% -200px;
        -webkit-transform: perspective(800px) translateZ(-200px) rotateY(-360deg);
    }
}
@keyframes ringLeft {
    0% {
        transform-origin: 50% 50% -200px;
        transform: perspective(800px) translateZ(-200px) rotateY(0);
    }
    100% {
        transform-origin: 50% 50% -200px;
        transform: perspective(800px) translateZ(-200px) rotateY(-360deg);
    }
}

.ringRight {
    -webkit-animation-name: ringRight;
    animation-name: ringRight;
}
@-webkit-keyframes ringRight {
    0% {
        -webkit-transform-origin: 50% 50% -200px;
        -webkit-transform: perspective(800px) translateZ(-200px) rotateY(0);
    }
    100% {
        -webkit-transform-origin: 50% 50% -200px;
        -webkit-transform: perspective(800px) translateZ(-200px) rotateY(360deg);
    }
}
@keyframes ringRight {
    0% {
        transform-origin: 50% 50% -200px;
        transform: perspective(800px) translateZ(-200px) rotateY(0);
    }
    100% {
        transform-origin: 50% 50% -200px;
        transform: perspective(800px) translateZ(-200px) rotateY(360deg);
    }
}

.ringUp {
    -webkit-animation-name: ringUp;
    animation-name: ringUp;
}
@-webkit-keyframes ringUp {
    0% {
        -webkit-transform-origin: 50% 50% -200px;
        -webkit-transform: perspective(800px) translateZ(-200px) rotateX(0);
    }
    100% {
        -webkit-transform-origin: 50% 50% -200px;
        -webkit-transform: perspective(800px) translateZ(-200px) rotateX(360deg);
    }
}
@keyframes ringUp {
    0% {
        transform-origin: 50% 50% -200px;
        transform: perspective(800px) translateZ(-200px) rotateX(0);
    }
    100% {
        transform-origin: 50% 50% -200px;
        transform: perspective(800px) translateZ(-200px) rotateX(360deg);
    }
}

.ringDown {
    -webkit-animation-name: ringDown;
    animation-name: ringDown;
}
@-webkit-keyframes ringDown {
    0% {
        -webkit-transform-origin: 50% 50% -200px;
        -webkit-transform: perspective(800px) translateZ(-200px) rotateX(0);
    }
    100% {
        -webkit-transform-origin: 50% 50% -200px;
        -webkit-transform: perspective(800px) translateZ(-200px) rotateX(-360deg);
    }
}
@keyframes ringDown {
    0% {
        transform-origin: 50% 50% -200px;
        transform: perspective(800px) translateZ(-200px) rotateX(0);
    }
    100% {
        transform-origin: 50% 50% -200px;
        transform: perspective(800px) translateZ(-200px) rotateX(-360deg);
    }
}



/* ROTATE EDGE IN */
.roEdgeUpIn {
    -webkit-animation-name: roEdgeUpIn;
            animation-name: roEdgeUpIn;
}
@-webkit-keyframes roEdgeUpIn {
    0% {
        opacity: 0;
        -webkit-transform-origin: 50% 0;
        -webkit-transform: perspective(1200px) rotateX(-90deg);
    }
    100% {
        -webkit-transform-origin: 50% 0;
        -webkit-transform: perspective(1200px);
    }
}
@keyframes roEdgeUpIn {
    0% {
        opacity: 0;
        transform-origin: 50% 0;
        transform: perspective(1200px) rotateX(-90deg);
    }
    100% {
        transform-origin: 50% 0;
        transform: perspective(1200px);
    }
}

.roEdgeDownIn {
    -webkit-animation-name: roEdgeDownIn;
            animation-name: roEdgeDownIn;
}
@-webkit-keyframes roEdgeDownIn {
    0% {
        opacity: 0;
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: perspective(1200px) rotateX(90deg);
    }
    100% {
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: perspective(1200px);
    }
}
@keyframes roEdgeDownIn {
    0% {
        opacity: 0;
        transform-origin: 50% 100%;
        transform: perspective(1200px) rotateX(90deg);
    }
    100% {
        transform-origin: 50% 100%;
        transform: perspective(1200px);
    }
}

.roEdgeLeftIn {
    -webkit-animation-name: roEdgeLeftIn;
            animation-name: roEdgeLeftIn;
}
@-webkit-keyframes roEdgeLeftIn {
    0% {
        opacity: 0;
        -webkit-transform-origin: 0 50%;
        -webkit-transform: perspective(1200px) rotateY(90deg);
    }
    100% {
        -webkit-transform-origin: 0 50%;
        -webkit-transform: perspective(1200px);
    }
}
@keyframes roEdgeLeftIn {
    0% {
        opacity: 0;
        transform-origin: 0 50%;
        transform: perspective(1200px) rotateY(90deg);
    }
    100% {
        transform-origin: 0 50%;
        transform: perspective(1200px);
    }
}

.roEdgeRightIn {
    -webkit-animation-name: roEdgeRightIn;
            animation-name: roEdgeRightIn;
}
@-webkit-keyframes roEdgeRightIn {
    0% {
        opacity: 0;
        -webkit-transform-origin: 100% 50%;
        -webkit-transform: perspective(1200px) rotateY(-90deg);
    }
    100% {
        -webkit-transform-origin: 100% 50%;
        -webkit-transform: perspective(1200px);
    }
}
@keyframes roEdgeRightIn {
    0% {
        opacity: 0;
        transform-origin: 100% 50%;
        transform: perspective(1200px) rotateY(-90deg);
    }
    100% {
        transform-origin: 100% 50%;
        transform: perspective(1200px);
    }
}



/* ROTATE EDGE OUT */
.roEdgeUpOut {
    -webkit-animation-name: roEdgeUpOut;
            animation-name: roEdgeUpOut;
}
@-webkit-keyframes roEdgeUpOut {
    0% {
        -webkit-transform-origin: 50% 0;
        -webkit-transform: perspective(1200px);
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: 50% 0;
        -webkit-transform: perspective(1200px) rotateX(-90deg);
    }
}
@keyframes roEdgeUpOut {
    0% {
        transform-origin: 50% 0;
        transform: perspective(1200px);
    }
    100% {
        opacity: 0;
        transform-origin: 50% 0;
        transform: perspective(1200px) rotateX(-90deg);
    }
}


.roEdgeDownOut {
    -webkit-animation-name: roEdgeDownOut;
            animation-name: roEdgeDownOut;
}
@-webkit-keyframes roEdgeDownOut {
    0% {
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: perspective(1200px);
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: perspective(1200px) rotateX(90deg);
    }
}
@keyframes roEdgeDownOut {
    0% {
        transform-origin: 50% 100%;
        transform: perspective(1200px);
    }
    100% {
        opacity: 0;
        transform-origin: 50% 100%;
        transform: perspective(1200px) rotateX(90deg);
    }
}

.roEdgeLeftOut {
    -webkit-animation-name: roEdgeLeftOut;
            animation-name: roEdgeLeftOut;
}
@-webkit-keyframes roEdgeLeftOut {
    0% {
        -webkit-transform-origin: 0 50%;
        -webkit-transform: perspective(1200px);
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: 0 50%;
        -webkit-transform: perspective(1200px) rotateY(90deg);
    }
}
@keyframes roEdgeLeftOut {
    0% {
        transform-origin: 0 50%;
        transform: perspective(1200px);
    }
    100% {
        opacity: 0;
        transform-origin: 0 50%;
        transform: perspective(1200px) rotateY(90deg);
    }
}

.roEdgeRightOut {
    -webkit-animation-name: roEdgeRightOut;
            animation-name: roEdgeRightOut;
}
@-webkit-keyframes roEdgeRightOut {
    0% {
        -webkit-transform-origin: 100% 50%;
        -webkit-transform: perspective(1200px);
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: 100% 50%;
        -webkit-transform: perspective(1200px) rotateY(-90deg);
    }
}
@keyframes roEdgeRightOut {
    0% {
        transform-origin: 100% 50%;
        transform: perspective(1200px);
    }
    100% {
        opacity: 0;
        transform-origin: 100% 50%;
        transform: perspective(1200px) rotateY(-90deg);
    }
}



/* ROTATE EDGE SOFT OUT */
.roEdgeSoftUpOut {
    -webkit-animation-name: roEdgeSoftUpOut;
            animation-name: roEdgeSoftUpOut;
}
@-webkit-keyframes roEdgeSoftUpOut {
    0% {
        -webkit-transform-origin: 50% 0;
        -webkit-transform: perspective(1200px);
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: 50% 0;
        -webkit-transform: perspective(1200px) rotateX(-20deg);
    }
}
@keyframes roEdgeSoftUpOut {
    0% {
        transform-origin: 50% 0;
        transform: perspective(1200px);
    }
    100% {
        opacity: 0;
        transform-origin: 50% 0;
        transform: perspective(1200px) rotateX(-20deg);
    }
}


.roEdgeSoftDownOut {
    -webkit-animation-name: roEdgeSoftDownOut;
            animation-name: roEdgeSoftDownOut;
}
@-webkit-keyframes roEdgeSoftDownOut {
    0% {
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: perspective(1200px);
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: perspective(1200px) rotateX(20deg);
    }
}
@keyframes roEdgeSoftDownOut {
    0% {
        transform-origin: 50% 100%;
        transform: perspective(1200px);
    }
    100% {
        opacity: 0;
        transform-origin: 50% 100%;
        transform: perspective(1200px) rotateX(20deg);
    }
}

.roEdgeSoftLeftOut {
    -webkit-animation-name: roEdgeSoftLeftOut;
            animation-name: roEdgeSoftLeftOut;
}
@-webkit-keyframes roEdgeSoftLeftOut {
    0% {
        -webkit-transform-origin: 0 50%;
        -webkit-transform: perspective(1200px);
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: 0 50%;
        -webkit-transform: perspective(1200px) rotateY(20deg);
    }
}
@keyframes roEdgeSoftLeftOut {
    0% {
        transform-origin: 0 50%;
        transform: perspective(1200px);
    }
    100% {
        opacity: 0;
        transform-origin: 0 50%;
        transform: perspective(1200px) rotateY(20deg);
    }
}

.roEdgeSoftRightOut {
    -webkit-animation-name: roEdgeSoftRightOut;
            animation-name: roEdgeSoftRightOut;
}
@-webkit-keyframes roEdgeSoftRightOut {
    0% {
        -webkit-transform-origin: 100% 50%;
        -webkit-transform: perspective(1200px);
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: 100% 50%;
        -webkit-transform: perspective(1200px) rotateY(-20deg);
    }
}
@keyframes roEdgeSoftRightOut {
    0% {
        transform-origin: 100% 50%;
        transform: perspective(1200px);
    }
    100% {
        opacity: 0;
        transform-origin: 100% 50%;
        transform: perspective(1200px) rotateY(-20deg);
    }
}




/* ROTATE TWIST OUT */
.roTwistLeftOut {
    -webkit-animation-name: roTwistLeftOut;
            animation-name: roTwistLeftOut;
    
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
}
@-webkit-keyframes roTwistLeftOut {
    0% {
        opacity: 1;
        -webkit-transform-origin: 50% 50% -400px;
        -webkit-transform: perspective(800px) translate3d(0, 0, -400px) rotateX(0) scale(1);
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: 50% 50% -400px;
        -webkit-transform: perspective(800px) translate3d(-200%, 0, -400px) rotateX(-1080deg) scale(0);
    }
}
@keyframes roTwistLeftOut {
    0% {
        opacity: 1;
        transform-origin: 50% 50% -400px;
        transform: perspective(800px) translate3d(0, 0, -400px) rotateX(0) scale(1);
    }
    100% {
        opacity: 0;
        transform-origin: 50% 50% -400px;
        transform: perspective(800px) translate3d(-200%, 0, -400px) rotateX(-1080deg) scale(0);
    }
}

.roTwistRightOut {
    -webkit-animation-name: roTwistRightOut;
            animation-name: roTwistRightOut;
    
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
}
@-webkit-keyframes roTwistRightOut {
    0% {
        opacity: 1;
        -webkit-transform-origin: 50% 50% -400px;
        -webkit-transform: perspective(800px) translate3d(0, 0, -400px) rotateX(0) scale(1);
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: 50% 50% -400px;
        -webkit-transform: perspective(800px) translate3d(200%, 0, -400px) rotateX(-1080deg) scale(0);
    }
}
@keyframes roTwistRightOut {
    0% {
        opacity: 1;
        transform-origin: 50% 50% -400px;
        transform: perspective(800px) translate3d(0, 0, -400px) rotateX(0) scale(1);
    }
    100% {
        opacity: 0;
        transform-origin: 50% 50% -400px;
        transform: perspective(800px) translate3d(200%, 0, -400px) rotateX(-1080deg) scale(0);
    }
}

.roTwistUpOut {
    -webkit-animation-name: roTwistUpOut;
            animation-name: roTwistUpOut;
    
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
}
@-webkit-keyframes roTwistUpOut {
    0% {
        opacity: 1;
        -webkit-transform-origin: 50% 50% -800px;
        -webkit-transform: perspective(800px) translate3d(0, 0, -800px) rotateY(0) scale(1);
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: 50% 50% -800px;
        -webkit-transform: perspective(800px) translate3d(0, -200%, -800px) rotateY(1080deg) scale(0);
    }
}
@keyframes roTwistUpOut {
    0% {
        opacity: 1;
        transform-origin: 50% 50% -800px;
        transform: perspective(800px) translate3d(0, 0, -800px) rotateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform-origin: 50% 50% -800px;
        transform: perspective(800px) translate3d(0, -200%, -800px) rotateY(1080deg) scale(0);
    }
}

.roTwistDownOut {
    -webkit-animation-name: roTwistDownOut;
            animation-name: roTwistDownOut;
    
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
}
@-webkit-keyframes roTwistDownOut {
    0% {
        opacity: 1;
        -webkit-transform-origin: 50% 50% -800px;
        -webkit-transform: perspective(800px) translate3d(0, 0, -800px) rotateY(0) scale(1);
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: 50% 50% -800px;
        -webkit-transform: perspective(800px) translate3d(0, 200%, -800px) rotateY(1080deg) scale(0);
    }
}
@keyframes roTwistDownOut {
    0% {
        opacity: 1;
        transform-origin: 50% 50% -800px;
        transform: perspective(800px) translate3d(0, 0, -800px) rotateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform-origin: 50% 50% -800px;
        transform: perspective(800px) translate3d(0, 200%, -800px) rotateY(1080deg) scale(0);
    }
}


/* ROTATE TWIST IN */
.roTwistLeftIn {
    -webkit-animation-name: roTwistLeftIn;
            animation-name: roTwistLeftIn;
    
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
}
@-webkit-keyframes roTwistLeftIn {
    0% {
        opacity: 0;
        -webkit-transform-origin: 50% 50% -400px;
        -webkit-transform: perspective(800px) translate3d(-200%, 0, -400px) rotateX(1080deg) scale(0);
    }
    100% {
        opacity: 1;
        -webkit-transform-origin: 50% 50% -400px;
        -webkit-transform: perspective(800px) translate3d(0, 0, -400px) rotateX(0) scale(1);
    }
}
@keyframes roTwistLeftIn {
    0% {
        opacity: 0;
        transform-origin: 50% 50% -400px;
        transform: perspective(800px) translate3d(-200%, 0, -400px) rotateX(1080deg) scale(0);
    }
    100% {
        opacity: 1;
        transform-origin: 50% 50% -400px;
        transform: perspective(800px) translate3d(0, 0, -400px) rotateX(0) scale(1);
    }
}

.roTwistRightIn {
    -webkit-animation-name: roTwistRightIn;
            animation-name: roTwistRightIn;
    
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
}
@-webkit-keyframes roTwistRightIn {
    0% {
        opacity: 0;
        -webkit-transform-origin: 50% 50% -400px;
        -webkit-transform: perspective(800px) translate3d(200%, 0, -400px) rotateX(1080deg) scale(0);
    }
    100% {
        opacity: 1;
        -webkit-transform-origin: 50% 50% -400px;
        -webkit-transform: perspective(800px) translate3d(0, 0, -400px) rotateX(0) scale(1);
    }
}
@keyframes roTwistRightIn {
    0% {
        opacity: 0;
        transform-origin: 50% 50% -400px;
        transform: perspective(800px) translate3d(200%, 0, -400px) rotateX(1080deg) scale(0);
    }
    100% {
        opacity: 1;
        transform-origin: 50% 50% -400px;
        transform: perspective(800px) translate3d(0, 0, -400px) rotateX(0) scale(1);
    }
}

.roTwistUpIn {
    -webkit-animation-name: roTwistUpIn;
            animation-name: roTwistUpIn;
    
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
}
@-webkit-keyframes roTwistUpIn {
    0% {
        opacity: 0;
        -webkit-transform-origin: 50% 50% -800px;
        -webkit-transform: perspective(800px) translate3d(0, -200%, -800px) rotateY(-1080deg) scale(0);
    }
    100% {
        opacity: 1;
        -webkit-transform-origin: 50% 50% -800px;
        -webkit-transform: perspective(800px) translate3d(0, 0, -800px) rotateY(0) scale(1);
    }
}
@keyframes roTwistUpIn {
    0% {
        opacity: 0;
        transform-origin: 50% 50% -800px;
        transform: perspective(800px) translate3d(0, -200%, -800px) rotateY(-1080deg) scale(0);
    }
    100% {
        opacity: 1;
        transform-origin: 50% 50% -800px;
        transform: perspective(800px) translate3d(0, 0, -800px) rotateY(0) scale(1);
    }
}
.roTwistDownIn {
    -webkit-animation-name: roTwistDownIn;
            animation-name: roTwistDownIn;
    
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
}
@-webkit-keyframes roTwistDownIn {
    0% {
        opacity: 0;
        -webkit-transform-origin: 50% 50% -800px;
        -webkit-transform: perspective(800px) translate3d(0, 200%, -800px) rotateY(-1080deg) scale(0);
    }
    100% {
        opacity: 1;
        -webkit-transform-origin: 50% 50% -800px;
        -webkit-transform: perspective(800px) translate3d(0, 0, -800px) rotateY(0) scale(1);
    }
}
@keyframes roTwistDownIn {
    0% {
        opacity: 0;
        transform-origin: 50% 50% -800px;
        transform: perspective(800px) translate3d(0, 200%, -800px) rotateY(-1080deg) scale(0);
    }
    100% {
        opacity: 1;
        transform-origin: 50% 50% -800px;
        transform: perspective(800px) translate3d(0, 0, -800px) rotateY(0) scale(1);
    }
}




/* ROTATE SOFT OUT */
.roSoftLeftOut {
    -webkit-animation-name: roSoftLeftOut;
            animation-name: roSoftLeftOut;
}
@-webkit-keyframes roSoftLeftOut {
    to {
        opacity: 0;
        -webkit-transform: perspective(1200px) translateX(-50%) rotateY(70deg) rotateX(30deg) translateZ(-200px);
    }
}
@keyframes roSoftLeftOut {
    to {
        opacity: 0;
        transform: perspective(1200px) translateX(-50%) rotateY(70deg) rotateX(30deg) translateZ(-200px);
    }
}

.roSoftRightOut {
    -webkit-animation-name: roSoftRightOut;
            animation-name: roSoftRightOut;
}
@-webkit-keyframes roSoftRightOut {
    to {
        opacity: 0;
        -webkit-transform: perspective(1200px) translateX(50%) rotateY(-70deg) rotateX(30deg) translateZ(-200px);
    }
}
@keyframes roSoftRightOut {
    to {
        opacity: 0;
        transform: perspective(1200px) translateX(50%) rotateY(-70deg) rotateX(30deg) translateZ(-200px);
    }
}




/* ROTATE SOFT IN */
.roSoftLeftIn {
    -webkit-animation-name: roSoftLeftIn;
            animation-name: roSoftLeftIn;
}
@-webkit-keyframes roSoftLeftIn {
    from {
        opacity: 0;
        -webkit-transform: perspective(1200px) translateX(-20%) rotateZ(-10deg) rotateY(-40deg) translateZ(500px);
    }
    to {
        -webkit-transform: perspective(1200px) translateX(0) rotateZ(0) rotateY(0) translateZ(0);
    }
}
@keyframes roSoftLeftIn {
    from {
        opacity: 0;
        transform: perspective(1200px) translateX(-20%) rotateZ(-10deg) rotateY(-40deg) translateZ(500px);
    }
    to {
        transform: perspective(1200px) translateX(0) rotateZ(0) rotateY(0) translateZ(0);
    }
}

.roSoftRightIn {
    -webkit-animation-name: roSoftRightIn;
            animation-name: roSoftRightIn;
}
@-webkit-keyframes roSoftRightIn {
    from {
        opacity: 0;
        -webkit-transform: perspective(1200px) translateX(20%) rotateZ(10deg) rotateY(40deg) translateZ(500px);
    }
    to {
        -webkit-transform: perspective(1200px) translateX(0) rotateZ(0) rotateY(0) translateZ(0);
    }
}
@keyframes roSoftRightIn {
    from {
        opacity: 0;
        transform: perspective(1200px) translateX(20%) rotateZ(10deg) rotateY(40deg) translateZ(500px);
    }
    to {
        transform: perspective(1200px) translateX(0) rotateZ(0) rotateY(0) translateZ(0);
    }
}



/* ROTATE SHORT PUSH OUT */
.roShortPushRightOut {
    -webkit-animation-name: roShortPushRightOut;
            animation-name: roShortPushRightOut;
}
@-webkit-keyframes roShortPushRightOut {
    30% {
        opacity: .8;
        -webkit-transform: scale(.8);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1.8) rotate(45deg);
    }
}
@keyframes roShortPushRightOut {
    30% {
        opacity: .8;
        transform: scale(.8);
    }
    100% {
        opacity: 0;
        transform: scale(1.8) rotate(45deg);
    }
}

.roShortPushLeftOut {
    -webkit-animation-name: roShortPushLeftOut;
            animation-name: roShortPushLeftOut;
}
@-webkit-keyframes roShortPushLeftOut {
    30% {
        opacity: .8;
        -webkit-transform: scale(.8);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1.8) rotate(-45deg);
    }
}
@keyframes roShortPushLeftOut {
    30% {
        opacity: .8;
        transform: scale(.8);
    }
    100% {
        opacity: 0;
        transform: scale(1.8) rotate(-45deg);
    }
}



/* ROTATE SHORT PUSH IN */
.roShortPushRightIn {
    -webkit-animation-name: roShortPushRightIn;
            animation-name: roShortPushRightIn;
}
@-webkit-keyframes roShortPushRightIn {
    from {
        opacity: 0;
        -webkit-transform: scale(1.8) rotate(-45deg);
    }
}
@keyframes roShortPushRightIn {
    from {
        opacity: 0;
        transform: scale(1.8) rotate(-45deg);
    }
}

.roShortPushLeftIn {
    -webkit-animation-name: roShortPushLeftIn;
            animation-name: roShortPushLeftIn;
}
@-webkit-keyframes roShortPushLeftIn {
    from {
        opacity: 0;
        -webkit-transform: scale(1.8) rotate(45deg);
    }
}
@keyframes roShortPushLeftIn {
    from {
        opacity: 0;
        transform: scale(1.8) rotate(45deg);
    }
}



/* ROTATE SHORT PULL IN */
.roShortPullRightIn {
    -webkit-animation-name: roShortPullRightIn;
            animation-name: roShortPullRightIn;
}
@-webkit-keyframes roShortPullRightIn {
    from {
        opacity: 0;
        -webkit-transform: scale(0) rotate(-45deg);
    }
}
@keyframes roShortPullRightIn {
    from {
        opacity: 0;
        transform: scale(0) rotate(-45deg);
    }
}

.roShortPullLeftIn {
    -webkit-animation-name: roShortPullLeftIn;
            animation-name: roShortPullLeftIn;
}
@-webkit-keyframes roShortPullLeftIn {
    from {
        opacity: 0;
        -webkit-transform: scale(0) rotate(45deg);
    }
}
@keyframes roShortPullLeftIn {
    from {
        opacity: 0;
        transform: scale(0) rotate(45deg);
    }
}



/* ROTATE SHORT PULL OUT */
.roShortPullRightOut {
    -webkit-animation-name: roShortPullRightOut;
            animation-name: roShortPullRightOut;
}
@-webkit-keyframes roShortPullRightOut {
    to {
        opacity: 0;
        -webkit-transform: scale(0) rotate(45deg);
    }
}
@keyframes roShortPullRightOut {
    to {
        opacity: 0;
        transform: scale(0) rotate(45deg);
    }
}

.roShortPullLeftOut {
    -webkit-animation-name: roShortPullLeftOut;
            animation-name: roShortPullLeftOut;
}
@-webkit-keyframes roShortPullLeftOut {
    to {
        opacity: 0;
        -webkit-transform: scale(0) rotate(-45deg);
    }
}
@keyframes roShortPullLeftOut {
    to {
        opacity: 0;
        transform: scale(0) rotate(-45deg);
    }
}



/* ROTATE WHEEL OUT */
.roWheelUpOut {
    -webkit-animation-name: roWheelUpOut;
            animation-name: roWheelUpOut;
}
@-webkit-keyframes roWheelUpOut {
    from {
        -webkit-transform-origin: 300% 50%;
    }
    to {
        opacity: 0;
        -webkit-transform-origin: 300% 50%;
        -webkit-transform: rotate(30deg);
    }
}
@keyframes roWheelUpOut {
    from {
        transform-origin: 300% 50%;
    }
    to {
        opacity: 0;
        transform: rotate(30deg);
    }
}

.roWheelDownOut {
    -webkit-animation-name: roWheelDownOut;
            animation-name: roWheelDownOut;
}
@-webkit-keyframes roWheelDownOut {
    from {
        -webkit-transform-origin: -300% 50%;
    }
    to {
        opacity: 0;
        -webkit-transform-origin: -300% 50%;
        -webkit-transform: rotate(30deg);
    }
}
@keyframes roWheelDownOut {
    from {
        transform-origin: -300% 50%;
    }
    to {
        opacity: 0;
        transform-origin: -300% 50%;
        transform: rotate(30deg);
    }
}

.roWheelLeftOut {
    -webkit-animation-name: roWheelLeftOut;
            animation-name: roWheelLeftOut;
}
@-webkit-keyframes roWheelLeftOut {
    from {
        -webkit-transform-origin: 50% -800%;
    }
    to {
        opacity: 0;
        -webkit-transform-origin: 50% -800%;
        -webkit-transform: rotate(30deg);
    }
}
@keyframes roWheelLeftOut {
    from {
        transform-origin: 50% -800%;
    }
    to {
        opacity: 0;
        transform-origin: 50% -800%;
        transform: rotate(30deg);
    }
}

.roWheelRightOut {
    -webkit-animation-name: roWheelRightOut;
            animation-name: roWheelRightOut;
}
@-webkit-keyframes roWheelRightOut {
    from {
        -webkit-transform-origin: 50% 800%;
    }
    to {
        opacity: 0;
        -webkit-transform-origin: 50% 800%;
        -webkit-transform: rotate(30deg);
    }
}
@keyframes roWheelRightOut {
    from {
        transform-origin: 50% 800%;
    }
    to {
        opacity: 0;
        transform-origin: 50% 800%;
        transform: rotate(30deg);
    }
}




/* ROTATE WHEEL IN */
.roWheelUpIn {
    -webkit-animation-name: roWheelUpIn;
            animation-name: roWheelUpIn;
}
@-webkit-keyframes roWheelUpIn {
    from {
        opacity: 0;
        -webkit-transform-origin: -300% 50%;
        -webkit-transform: rotate(-30deg);
    }
    to {
        -webkit-transform-origin: -300% 50%;
    }
}
@keyframes roWheelUpIn {
    from {
        opacity: 0;
        transform-origin: -300% 50%;
        transform: rotate(-30deg);
    }
    to {
        transform-origin: -300% 50%;
    }
}

.roWheelDownIn {
    -webkit-animation-name: roWheelDownIn;
            animation-name: roWheelDownIn;
}
@-webkit-keyframes roWheelDownIn {
    from {
        opacity: 0;
        -webkit-transform-origin: 300% 50%;
        -webkit-transform: rotate(-30deg);
    }
    to {
        -webkit-transform-origin: 300% 50%;
    }
}
@keyframes roWheelDownIn {
    from {
        opacity: 0;
        transform-origin: 300% 50%;
        transform: rotate(-30deg);
    }
    to {
        transform-origin: 300% 50%;
    }
}

.roWheelLeftIn {
    -webkit-animation-name: roWheelLeftIn;
            animation-name: roWheelLeftIn;
}
@-webkit-keyframes roWheelLeftIn {
    from {
        opacity: 0;
        -webkit-transform-origin: 50% 800%;
        -webkit-transform: rotate(-30deg);
    }
    to {
        -webkit-transform-origin: 50% 800%;
    }
}
@keyframes roWheelLeftIn {
    from {
        opacity: 0;
        transform-origin: 50% 800%;
        transform: rotate(-30deg);
    }
    to {
        transform-origin: 50% 800%;
    }
}

.roWheelRightIn {
    -webkit-animation-name: roWheelRightIn;
            animation-name: roWheelRightIn;
}
@-webkit-keyframes roWheelRightIn {
    from {
        opacity: 0;
        -webkit-transform-origin: 50% -800%;
        -webkit-transform: rotate(-30deg);
    }
    to {
        -webkit-transform-origin: 50% -800%;
    }
}
@keyframes roWheelRightIn {
    from {
        opacity: 0;
        transform-origin: 50% -800%;
        transform: rotate(-30deg);
    }
    to {
        transform-origin: 50% -800%;
    }
}




/* ROTATE FLIT OUT */
.roFlitLeftOut {
    -webkit-animation-name: roFlitLeftOut;
            animation-name: roFlitLeftOut;
}
@-webkit-keyframes roFlitLeftOut {
    50%, 100% {
        opacity: .2;
        -webkit-transform: perspective(800px) translateZ(-1000px) rotateY(-90deg);
    }
}
@keyframes roFlitLeftOut {
    50%, 100% {
        opacity: .2;
        transform: perspective(800px) translateZ(-1000px) rotateY(-90deg);
    }
}

.roFlitRightOut {
    -webkit-animation-name: roFlitRightOut;
            animation-name: roFlitRightOut;
}
@-webkit-keyframes roFlitRightOut {
    50%, 100% {
        opacity: .2;
        -webkit-transform: perspective(800px) translateZ(-1000px) rotateY(90deg);
    }
}
@keyframes roFlitRightOut {
    50%, 100% {
        opacity: .2;
        transform: perspective(800px) translateZ(-1000px) rotateY(90deg);
    }
}

.roFlitUpOut {
    -webkit-animation-name: roFlitUpOut;
            animation-name: roFlitUpOut;
}
@-webkit-keyframes roFlitUpOut {
    50%, 100% {
        opacity: .2;
        -webkit-transform: perspective(800px) translateZ(-1000px) rotateX(90deg);
    }
}
@keyframes roFlitUpOut {
    50%, 100% {
        opacity: .2;
        transform: perspective(800px) translateZ(-1000px) rotateX(90deg);
    }
}

.roFlitDownOut {
    -webkit-animation-name: roFlitDownOut;
            animation-name: roFlitDownOut;
}
@-webkit-keyframes roFlitDownOut {
    50%, 100% {
        opacity: .2;
        -webkit-transform: perspective(800px) translateZ(-1000px) rotateX(-90deg);
    }
}
@keyframes roFlitDownOut {
    50%, 100% {
        opacity: .2;
        transform: perspective(800px) translateZ(-1000px) rotateX(-90deg);
    }
}



/* ROTATE FLIT IN */
.roFlitLeftIn {
    -webkit-animation-name: roFlitLeftIn;
            animation-name: roFlitLeftIn;
}
@-webkit-keyframes roFlitLeftIn {
    0%, 50% {
        opacity: .2; 
        -webkit-transform: perspective(800px) translateZ(-1000px) rotateY(-90deg);
    }
}
@keyframes roFlitLeftIn {
    0%, 50% {
        opacity: .2; 
        transform: perspective(800px) translateZ(-1000px) rotateY(-90deg);
    }
}

.roFlitRightIn {
    -webkit-animation-name: roFlitRightIn;
            animation-name: roFlitRightIn;
}
@-webkit-keyframes roFlitRightIn {
    0%, 50% {
        opacity: .2; 
        -webkit-transform: perspective(800px) translateZ(-1000px) rotateY(90deg);
    }
}
@keyframes roFlitRightIn {
    0%, 50% {
        opacity: .2; 
        transform: perspective(800px) translateZ(-1000px) rotateY(90deg);
    }
}

.roFlitUpIn {
    -webkit-animation-name: roFlitUpIn;
            animation-name: roFlitUpIn;
}
@-webkit-keyframes roFlitUpIn {
    0%, 50% {
        opacity: .2; 
        -webkit-transform: perspective(800px) translateZ(-1000px) rotateX(90deg);
    }
}
@keyframes roFlitUpIn {
    0%, 50% {
        opacity: .2; 
        transform: perspective(800px) translateZ(-1000px) rotateX(90deg);
    }
}

.roFlitDownIn {
    -webkit-animation-name: roFlitDownIn;
            animation-name: roFlitDownIn;
}
@-webkit-keyframes roFlitDownIn {
    0%, 50% {
        opacity: .2; 
        -webkit-transform: perspective(800px) translateZ(-1000px) rotateX(-90deg);
    }
}
@keyframes roFlitDownIn {
    0%, 50% {
        opacity: .2; 
        transform: perspective(800px) translateZ(-1000px) rotateX(-90deg);
    }
}



/* ROTATE FOLD OUT */
.roFoldLeftOut {
    -webkit-animation-name: roFoldLeftOut;
            animation-name: roFoldLeftOut;
}
@-webkit-keyframes roFoldLeftOut {
    from {
        -webkit-transform-origin: 100% 50%;
        -webkit-transform: perspective(1600px);
    }
    to {
        opacity: 0; 
        -webkit-transform-origin: 100% 50%;
        -webkit-transform: perspective(1600px) translateX(-100%) rotateY(-90deg);
    }
}
@keyframes roFoldLeftOut {
    from {
        transform-origin: 100% 50%;
        transform: perspective(1600px);
    }
    to {
        opacity: 0; 
        transform-origin: 100% 50%;
        transform: perspective(1600px) translateX(-100%) rotateY(-90deg);
    }
}

.roFoldRightOut {
    -webkit-animation-name: roFoldRightOut;
            animation-name: roFoldRightOut;
}
@-webkit-keyframes roFoldRightOut {
    from {
        -webkit-transform-origin: 0 50%;
        -webkit-transform: perspective(1600px);
    }
    to {
        opacity: 0; 
        -webkit-transform-origin: 0 50%;
        -webkit-transform: perspective(1600px) translateX(100%) rotateY(90deg);
    }
}
@keyframes roFoldRightOut {
    from {
        transform-origin: 0 50%;
        transform: perspective(1600px);
    }
    to {
        opacity: 0; 
        transform-origin: 0 50%;
        transform: perspective(1600px) translateX(100%) rotateY(90deg);
    }
}

.roFoldUpOut {
    -webkit-animation-name: roFoldUpOut;
            animation-name: roFoldUpOut;
}
@-webkit-keyframes roFoldUpOut {
    from {
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: perspective(1600px);
    }
    to {
        opacity: 0; 
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: perspective(1600px) translateY(-100%) rotateX(90deg);
    }
}
@keyframes roFoldUpOut {
    from {
        transform-origin: 50% 100%;
        transform: perspective(1600px);
    }
    to {
        opacity: 0; 
        transform-origin: 50% 100%;
        transform: perspective(1600px) translateY(-100%) rotateX(90deg);
    }
}

.roFoldDownOut {
    -webkit-animation-name: roFoldDownOut;
            animation-name: roFoldDownOut;
}
@-webkit-keyframes roFoldDownOut {
    from {
        -webkit-transform-origin: 50% 0;
        -webkit-transform: perspective(1600px);
    }
    to {
        opacity: 0; 
        -webkit-transform-origin: 50% 0;
        -webkit-transform: perspective(1600px) translateY(100%) rotateX(-90deg);
    }
}
@keyframes roFoldDownOut {
    from {
        transform-origin: 50% 0;
        transform: perspective(1600px);
    }
    to {
        opacity: 0; 
        transform-origin: 50% 0;
        transform: perspective(1600px) translateY(100%) rotateX(-90deg);
    }
}



/* ROTATE FOLD IN */
.roFoldLeftIn {
    -webkit-animation-name: roFoldLeftIn;
            animation-name: roFoldLeftIn;
}
@-webkit-keyframes roFoldLeftIn {
    from {
        opacity: 0; 
        -webkit-transform-origin: 100% 50%;
        -webkit-transform: perspective(1600px) translateX(-100%) rotateY(-90deg);
    }
    to {
        -webkit-transform-origin: 100% 50%;
        -webkit-transform: perspective(1600px);
    }
}
@keyframes roFoldLeftIn {
    from {
        opacity: 0; 
        transform-origin: 100% 50%;
        transform: perspective(1600px) translateX(-100%) rotateY(-90deg);
    }
    to {
        transform-origin: 100% 50%;
        transform: perspective(1600px);
    }
}

.roFoldRightIn {
    -webkit-animation-name: roFoldRightIn;
            animation-name: roFoldRightIn;
}
@-webkit-keyframes roFoldRightIn {
    to {
        -webkit-transform-origin: 0 50%;
        -webkit-transform: perspective(1600px);
    }
    from {
        opacity: 0; 
        -webkit-transform-origin: 0 50%;
        -webkit-transform: perspective(1600px) translateX(100%) rotateY(90deg);
    }
}
@keyframes roFoldRightIn {
    to {
        transform-origin: 0 50%;
        transform: perspective(1600px);
    }
    from {
        opacity: 0; 
        transform-origin: 0 50%;
        transform: perspective(1600px) translateX(100%) rotateY(90deg);
    }
}

.roFoldUpIn {
    -webkit-animation-name: roFoldUpIn;
            animation-name: roFoldUpIn;
}
@-webkit-keyframes roFoldUpIn {
    to {
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: perspective(1600px);
    }
    from {
        opacity: 0; 
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: perspective(1600px) translateY(-100%) rotateX(90deg);
    }
}
@keyframes roFoldUpIn {
    to {
        transform-origin: 50% 100%;
        transform: perspective(1600px);
    }
    from {
        opacity: 0; 
        transform-origin: 50% 100%;
        transform: perspective(1600px) translateY(-100%) rotateX(90deg);
    }
}

.roFoldDownIn {
    -webkit-animation-name: roFoldDownIn;
            animation-name: roFoldDownIn;
}
@-webkit-keyframes roFoldDownIn {
    to {
        -webkit-transform-origin: 50% 0;
        -webkit-transform: perspective(1600px);
    }
    from {
        opacity: 0; 
        -webkit-transform-origin: 50% 0;
        -webkit-transform: perspective(1600px) translateY(100%) rotateX(-90deg);
    }
}
@keyframes roFoldDownIn {
    to {
        transform-origin: 50% 0;
        transform: perspective(1600px);
    }
    from {
        opacity: 0; 
        transform-origin: 50% 0;
        transform: perspective(1600px) translateY(100%) rotateX(-90deg);
    }
}



/* ROTATE ROOM OUT */
.roRoomLeftOut {
    -webkit-animation-name: roRoomLeftOut;
            animation-name: roRoomLeftOut;
}
@-webkit-keyframes roRoomLeftOut {
    from {
        -webkit-transform-origin: 100% 50%;
        -webkit-transform: perspective(1200px);
    }
    to {
        opacity: 0; 
        -webkit-transform-origin: 100% 50%;
        -webkit-transform: perspective(1200px) translateX(-100%) rotateY(90deg);
    }
}
@keyframes roRoomLeftOut {
    from {
        transform-origin: 100% 50%;
        transform: perspective(1200px);
    }
    to {
        opacity: 0; 
        transform-origin: 100% 50%;
        transform: perspective(1200px) translateX(-100%) rotateY(90deg);
    }
}

.roRoomRightOut {
    -webkit-animation-name: roRoomRightOut;
            animation-name: roRoomRightOut;
}
@-webkit-keyframes roRoomRightOut {
    from {
        -webkit-transform-origin: 0 50%;
        -webkit-transform: perspective(1200px);
    }
    to {
        opacity: 0; 
        -webkit-transform-origin: 0 50%;
        -webkit-transform: perspective(1200px) translateX(100%) rotateY(-90deg);
    }
}
@keyframes roRoomRightOut {
    from {
        transform-origin: 0 50%;
        transform: perspective(1200px);
    }
    to {
        opacity: 0; 
        transform-origin: 0 50%;
        transform: perspective(1200px) translateX(100%) rotateY(-90deg);
    }
}

.roRoomUpOut {
    -webkit-animation-name: roRoomUpOut;
            animation-name: roRoomUpOut;
}
@-webkit-keyframes roRoomUpOut {
    from {
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: perspective(1200px);
    }
    to {
        opacity: 0; 
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: perspective(1200px) translateY(-100%) rotateX(-90deg);
    }
}
@keyframes roRoomUpOut {
    from {
        transform-origin: 50% 100%;
        transform: perspective(1200px);
    }
    to {
        opacity: 0; 
        transform-origin: 50% 100%;
        transform: perspective(1200px) translateY(-100%) rotateX(-90deg);
    }
}

.roRoomDownOut {
    -webkit-animation-name: roRoomDownOut;
            animation-name: roRoomDownOut;
}
@-webkit-keyframes roRoomDownOut {
    from {
        -webkit-transform-origin: 50% 0;
        -webkit-transform: perspective(1200px);
    }
    to {
        opacity: 0; 
        -webkit-transform-origin: 50% 0;
        -webkit-transform: perspective(1200px) translateY(100%) rotateX(90deg);
    }
}
@keyframes roRoomDownOut {
    from {
        transform-origin: 50% 0;
        transform: perspective(1200px);
    }
    to {
        opacity: 0; 
        transform-origin: 50% 0;
        transform: perspective(1200px) translateY(100%) rotateX(90deg);
    }
}



/* ROTATE ROOM IN */
.roRoomLeftIn {
    -webkit-animation-name: roRoomLeftIn;
            animation-name: roRoomLeftIn;
}
@-webkit-keyframes roRoomLeftIn {
    to {
        -webkit-transform-origin: 100% 50%;
        -webkit-transform: perspective(1200px);
    }
    from {
        opacity: 0; 
        -webkit-transform-origin: 100% 50%;
        -webkit-transform: perspective(1200px) translateX(-100%) rotateY(90deg);
    }
}
@keyframes roRoomLeftIn {
    to {
        transform-origin: 100% 50%;
        transform: perspective(1200px);
    }
    from {
        opacity: 0; 
        transform-origin: 100% 50%;
        transform: perspective(1200px) translateX(-100%) rotateY(90deg);
    }
}

.roRoomRightIn {
    -webkit-animation-name: roRoomRightIn;
            animation-name: roRoomRightIn;
}
@-webkit-keyframes roRoomRightIn {
    to {
        -webkit-transform-origin: 0 50%;
        -webkit-transform: perspective(1200px);
    }
    from {
        opacity: 0; 
        -webkit-transform-origin: 0 50%;
        -webkit-transform: perspective(1200px) translateX(100%) rotateY(-90deg);
    }
}
@keyframes roRoomRightIn {
    to {
        transform-origin: 0 50%;
        transform: perspective(1200px);
    }
    from {
        opacity: 0; 
        transform-origin: 0 50%;
        transform: perspective(1200px) translateX(100%) rotateY(-90deg);
    }
}

.roRoomUpIn {
    -webkit-animation-name: roRoomUpIn;
            animation-name: roRoomUpIn;
}
@-webkit-keyframes roRoomUpIn {
    to {
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: perspective(1200px);
    }
    from {
        opacity: 0; 
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: perspective(1200px) translateY(-100%) rotateX(-90deg);
    }
}
@keyframes roRoomUpIn {
    to {
        transform-origin: 50% 100%;
        transform: perspective(1200px);
    }
    from {
        opacity: 0; 
        transform-origin: 50% 100%;
        transform: perspective(1200px) translateY(-100%) rotateX(-90deg);
    }
}

.roRoomDownIn {
    -webkit-animation-name: roRoomDownIn;
            animation-name: roRoomDownIn;
}
@-webkit-keyframes roRoomDownIn {
    to {
        -webkit-transform-origin: 50% 0;
        -webkit-transform: perspective(1200px);
    }
    from {
        opacity: 0; 
        -webkit-transform-origin: 50% 0;
        -webkit-transform: perspective(1200px) translateY(100%) rotateX(90deg);
    }
}
@keyframes roRoomDownIn {
    to {
        transform-origin: 50% 0;
        transform: perspective(1200px);
    }
    from {
        opacity: 0; 
        transform-origin: 50% 0;
        transform: perspective(1200px) translateY(100%) rotateX(90deg);
    }
}




/* SLIDE PULL OUT */
.slidePullLeftOut {
    -webkit-animation-name: slidePullLeftOut;
            animation-name: slidePullLeftOut;
}
@-webkit-keyframes slidePullLeftOut {
    25% {
        opacity: .5;
        -webkit-transform: perspective(1200px) translateZ(-500px);
    }
    75% {
        opacity: .5;
        -webkit-transform: perspective(1200px) translateZ(-500px) translateX(-200%);
    }
    100% {
        opacity: 0;
        -webkit-transform: perspective(1200px) translateZ(-500px) translateX(-200%);
    }
}
@-keyframes slidePullLeftOut {
    25% {
        opacity: .5;
        -transform: perspective(1200px) translateZ(-500px);
    }
    75% {
        opacity: .5;
        -transform: perspective(1200px) translateZ(-500px) translateX(-200%);
    }
    100% {
        opacity: 0;
        -transform: perspective(1200px) translateZ(-500px) translateX(-200%);
    }
}

.slidePullRightOut {
    -webkit-animation-name: slidePullRightOut;
            animation-name: slidePullRightOut;
}
@-webkit-keyframes slidePullRightOut {
    25% {
        opacity: .5;
        -webkit-transform: perspective(1200px) translateZ(-500px);
    }
    75% {
        opacity: .5;
        -webkit-transform: perspective(1200px) translateZ(-500px) translateX(200%);
    }
    100% {
        opacity: 0;
        -webkit-transform: perspective(1200px) translateZ(-500px) translateX(200%);
    }
}
@keyframes slidePullRightOut {
    25% {
        opacity: .5;
        transform: perspective(1200px) translateZ(-500px);
    }
    75% {
        opacity: .5;
        transform: perspective(1200px) translateZ(-500px) translateX(200%);
    }
    100% {
        opacity: 0;
        transform: perspective(1200px) translateZ(-500px) translateX(200%);
    }
}

.slidePullUpOut {
    -webkit-animation-name: slidePullUpOut;
            animation-name: slidePullUpOut;
}
@-webkit-keyframes slidePullUpOut {
    25% {
        opacity: .5;
        -webkit-transform: perspective(1200px) translateZ(-500px);
    }
    75% {
        opacity: .5;
        -webkit-transform: perspective(1200px) translateZ(-500px) translateY(-200%);
    }
    100% {
        opacity: 0;
        -webkit-transform: perspective(1200px) translateZ(-500px) translateY(-200%);
    }
}
@keyframes slidePullUpOut {
    25% {
        opacity: .5;
        transform: perspective(1200px) translateZ(-500px);
    }
    75% {
        opacity: .5;
        transform: perspective(1200px) translateZ(-500px) translateY(-200%);
    }
    100% {
        opacity: 0;
        transform: perspective(1200px) translateZ(-500px) translateY(-200%);
    }
}

.slidePullDownOut {
    -webkit-animation-name: slidePullDownOut;
            animation-name: slidePullDownOut;
}
@-webkit-keyframes slidePullDownOut {
    25% {
        opacity: .5;
        -webkit-transform: perspective(1200px) translateZ(-500px);
    }
    75% {
        opacity: .5;
        -webkit-transform: perspective(1200px) translateZ(-500px) translateY(200%);
    }
    100% {
        opacity: 0;
        -webkit-transform: perspective(1200px) translateZ(-500px) translateY(200%);
    }
}
@keyframes slidePullDownOut {
    25% {
        opacity: .5;
        transform: perspective(1200px) translateZ(-500px);
    }
    75% {
        opacity: .5;
        transform: perspective(1200px) translateZ(-500px) translateY(200%);
    }
    100% {
        opacity: 0;
        transform: perspective(1200px) translateZ(-500px) translateY(200%);
    }
}



/* SLIDE PULL IN */
.slidePullLeftIn {
    -webkit-animation-name: slidePullLeftIn;
            animation-name: slidePullLeftIn;
}
@-webkit-keyframes slidePullLeftIn {
    0% {
        opacity: 0;
        -webkit-transform: perspective(1200px) translateZ(-500px) translateX(-200%);
    }
    25% {
        opacity: .5;
        -webkit-transform: perspective(1200px) translateZ(-500px) translateX(-200%);
    }
    75% {
        opacity: .5;
        -webkit-transform: perspective(1200px) translateZ(-500px);
    }
    100% {
        -webkit-transform: perspective(1200px);
    }
}
@keyframes slidePullLeftIn {
    0% {
        opacity: 0;
        transform: perspective(1200px) translateZ(-500px) translateX(-200%);
    }
    25% {
        opacity: .5;
        transform: perspective(1200px) translateZ(-500px) translateX(-200%);
    }
    75% {
        opacity: .5;
        transform: perspective(1200px) translateZ(-500px);
    }
    100% {
        transform: perspective(1200px);
    }
}

.slidePullRightIn {
    -webkit-animation-name: slidePullRightIn;
            animation-name: slidePullRightIn;
}
@-webkit-keyframes slidePullRightIn {
    0% {
        opacity: 0;
        -webkit-transform: perspective(1200px) translateZ(-500px) translateX(200%);
    }
    25% {
        opacity: .5;
        -webkit-transform: perspective(1200px) translateZ(-500px) translateX(200%);
    }
    75% {
        opacity: .5;
        -webkit-transform: perspective(1200px) translateZ(-500px);
    }
    100% {
        -webkit-transform: perspective(1200px);
    }
}

.slidePullUpIn {
    -webkit-animation-name: slidePullUpIn;
            animation-name: slidePullUpIn;
}
@-webkit-keyframes slidePullUpIn {
    0% {
        opacity: 0;
        -webkit-transform: perspective(1200px) translateZ(-500px) translateY(-200%);
    }
    25% {
        opacity: .5;
        -webkit-transform: perspective(1200px) translateZ(-500px) translateY(-200%);
    }
    75% {
        opacity: .5;
        -webkit-transform: perspective(1200px) translateZ(-500px);
    }
    100% {
        -webkit-transform: perspective(1200px);
    }
}
@keyframes slidePullUpIn {
    0% {
        opacity: 0;
        transform: perspective(1200px) translateZ(-500px) translateY(-200%);
    }
    25% {
        opacity: .5;
        transform: perspective(1200px) translateZ(-500px) translateY(-200%);
    }
    75% {
        opacity: .5;
        transform: perspective(1200px) translateZ(-500px);
    }
    100% {
        transform: perspective(1200px);
    }
}

.slidePullDownIn {
    -webkit-animation-name: slidePullDownIn;
            animation-name: slidePullDownIn;
}
@-webkit-keyframes slidePullDownIn {
    0% {
        opacity: 0;
        -webkit-transform: perspective(1200px) translateZ(-500px) translateY(200%);
    }
    25% {
        opacity: .5;
        -webkit-transform: perspective(1200px) translateZ(-500px) translateY(200%);
    }
    75% {
        opacity: .5;
        -webkit-transform: perspective(1200px) translateZ(-500px);
    }
    100% {
        -webkit-transform: perspective(1200px);
    }
}
@keyframes slidePullDownIn {
    0% {
        opacity: 0;
        transform: perspective(1200px) translateZ(-500px) translateY(200%);
    }
    25% {
        opacity: .5;
        transform: perspective(1200px) translateZ(-500px) translateY(200%);
    }
    75% {
        opacity: .5;
        transform: perspective(1200px) translateZ(-500px);
    }
    100% {
        transform: perspective(1200px);
    }
}



/* SCALE EDGE IN */
.soEdgeUpIn {
    -webkit-animation-name: soEdgeUpIn;
            animation-name: soEdgeUpIn;
}
@-webkit-keyframes soEdgeUpIn {
    from {
        -webkit-transform-origin: 50% 0;
        -webkit-transform: scale(0);
    }
    to {
        -webkit-transform-origin: 50% 0;
    }
}
@keyframes soEdgeUpIn {
    from {
        transform-origin: 50% 0;
        transform: scale(0);
    }
    to {
        transform-origin: 50% 0;
    }
}

.soEdgeDownIn {
    -webkit-animation-name: soEdgeDownIn;
            animation-name: soEdgeDownIn;
}
@-webkit-keyframes soEdgeDownIn {
    from {
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: scale(0);
    }
    to {
        -webkit-transform-origin: 50% 100%;
    }
}
@keyframes soEdgeDownIn {
    from {
        transform-origin: 50% 100%;
        transform: scale(0);
    }
    to {
        transform-origin: 50% 100%;
    }
}

.soEdgeLeftIn {
    -webkit-animation-name: soEdgeLeftIn;
            animation-name: soEdgeLeftIn;
}
@-webkit-keyframes soEdgeLeftIn {
    from {
        -webkit-transform-origin: 0 50%;
        -webkit-transform: scale(0);
    }
    to {
        -webkit-transform-origin: 0 50%;
    }
}
@keyframes soEdgeLeftIn {
    from {
        transform-origin: 0 50%;
        transform: scale(0);
    }
    to {
        transform-origin: 0 50%;
    }
}

.soEdgeRightIn {
    -webkit-animation-name: soEdgeRightIn;
            animation-name: soEdgeRightIn;
}
@-webkit-keyframes soEdgeRightIn {
    from {
        -webkit-transform-origin: 100% 50%;
        -webkit-transform: scale(0);
    }
    to {
        -webkit-transform-origin: 100% 50%;
    }
}
@keyframes soEdgeRightIn {
    from {
        transform-origin: 100% 50%;
        transform: scale(0);
    }
    to {
        transform-origin: 100% 50%;
    }
}




/* SCALE EDGE OUT */
.soEdgeUpOut {
    -webkit-animation-name: soEdgeUpOut;
            animation-name: soEdgeUpOut;
}
@-webkit-keyframes soEdgeUpOut {
    from {
        -webkit-transform-origin: 50% 0;
    }
    to {
        -webkit-transform-origin: 50% 0;
        -webkit-transform: scale(0);
    }
}
@keyframes soEdgeUpOut {
    from {
        transform-origin: 50% 0;
    }
    to {
        transform-origin: 50% 0;
        transform: scale(0);
    }
}

.soEdgeDownOut {
    -webkit-animation-name: soEdgeDownOut;
            animation-name: soEdgeDownOut;
}
@-webkit-keyframes soEdgeDownOut {
    from {
        -webkit-transform-origin: 50% 100%;
    }
    to {
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: scale(0);
    }
}
@keyframes soEdgeDownOut {
    from {
        transform-origin: 50% 100%;
    }
    to {
        transform-origin: 50% 100%;
        transform: scale(0);
    }
}

.soEdgeLeftOut {
    -webkit-animation-name: soEdgeLeftOut;
            animation-name: soEdgeLeftOut;
}
@-webkit-keyframes soEdgeLeftOut {
    from {
        -webkit-transform-origin: 0 50%;
    }
    to {
        -webkit-transform-origin: 0 50%;
        -webkit-transform: scale(0);
    }
}
@keyframes soEdgeLeftOut {
    from {
        transform-origin: 0 50%;
    }
    to {
        transform-origin: 0 50%;
        transform: scale(0);
    }
}

.soEdgeRightOut {
    -webkit-animation-name: soEdgeRightOut;
            animation-name: soEdgeRightOut;
}
@-webkit-keyframes soEdgeRightOut {
    from {
        -webkit-transform-origin: 100% 50%;
    }
    to {
        -webkit-transform-origin: 100% 50%;
        -webkit-transform: scale(0);
    }
}
@keyframes soEdgeRightOut {
    from {
        transform-origin: 100% 50%;
    }
    to {
        transform-origin: 100% 50%;
        transform: scale(0);
    }
}






/* OTHERS EFFECT */
/* SLIT EFFECT */
.roSlit {
    -webkit-animation-name: roSlit;
            animation-name: roSlit;
    
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
}
@-webkit-keyframes roSlit {
    0% {
        opacity: 0;
        -webkit-transform: perspective(800px) translateZ(-3000px) rotateY(90deg);
    }
    50% {
        -webkit-transform: perspective(800px) translateZ(-250px) rotateY(89deg);
    }
}
@keyframes roSlit {
    0% {
        opacity: 0;
        transform: perspective(800px) translateZ(-3000px) rotateY(90deg);
    }
    50% {
        transform: perspective(800px) translateZ(-250px) rotateY(89deg);
    }
}



/* NEWSPAPER EFFECT */
.newspaperIn {
    -webkit-animation-name: newspaperIn;
            animation-name: newspaperIn;
}
@-webkit-keyframes newspaperIn {
    from {
        opacity: 0;
        -webkit-transform: perspective(800px) translateZ(-3000px) rotate(720deg);
    }
}
@keyframes newspaperIn {
    from {
        opacity: 0;
        transform: perspective(800px) translateZ(-3000px) rotate(720deg);
    }
}

.newspaperOut {
    -webkit-animation-name: newspaperOut;
            animation-name: newspaperOut;
}
@-webkit-keyframes newspaperOut {
    to {
        opacity: 0;
        -webkit-transform: perspective(800px) translateZ(-3000px) rotate(-720deg);
    }
}
@keyframes newspaperOut {
    to {
        opacity: 0;
        transform: perspective(800px) translateZ(-3000px) rotate(-720deg);
    }
}



/* GLUE EFFECT OUT */
.glueLeftOut {
    -webkit-animation: glueLeftOut ease-in;
            animation: glueLeftOut ease-in;
}
@-webkit-keyframes glueLeftOut {
    40% {
        opacity: .8;
        -webkit-transform-origin: 0 50%; /* Fix khong hoat dong trong tab --> */
        -webkit-transform: perspective(800px) rotateY(15deg);
        -webkit-animation-timing-function: ease-out;
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: 20% 50%;
        -webkit-transform: perspective(800px) scale(.8) translateZ(-500px);
    }
}
@keyframes glueLeftOut {
    40% {
        opacity: .8;
        transform-origin: 0 50%;
        transform: perspective(800px) rotateY(15deg);
        animation-timing-function: ease-out;
    }
    100% {
        opacity: 0;
        transform-origin: 20% 50%;
        transform: perspective(800px) scale(.8) translateZ(-500px);
    }
}

.glueRightOut {
    -webkit-animation: glueRightOut ease-in;
            animation: glueRightOut ease-in;
}
@-webkit-keyframes glueRightOut {
    40% {
        opacity: .8;
        -webkit-transform-origin: 100% 50%;
        -webkit-transform: perspective(800px) rotateY(-15deg);
        -webkit-animation-timing-function: ease-out;
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: 80% 50%;
        -webkit-transform: perspective(800px) scale(.8) translateZ(-500px);
    }
}
@keyframes glueRightOut {
    40% {
        opacity: .8;
        transform-origin: 100% 50%;
        transform: perspective(800px) rotateY(-15deg);
        animation-timing-function: ease-out;
    }
    100% {
        opacity: 0;
        transform-origin: 80% 50%;
        transform: perspective(800px) scale(.8) translateZ(-500px);
    }
}

.glueUpOut {
    -webkit-animation: glueUpOut ease-in;
            animation: glueUpOut ease-in;
}
@-webkit-keyframes glueUpOut {
    40% {
        opacity: .8;
        -webkit-transform-origin: 50% 0;
        -webkit-transform: perspective(800px) rotateX(-15deg);
        -webkit-animation-timing-function: ease-out;
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: 50% 20%;
        -webkit-transform: perspective(800px) scale(.8) translateZ(-500px);
    }
}
@keyframes glueUpOut {
    40% {
        opacity: .8;
        transform-origin: 50% 0;
        transform: perspective(800px) rotateX(-15deg);
        animation-timing-function: ease-out;
    }
    100% {
        opacity: 0;
        transform-origin: 50% 20%;
        transform: perspective(800px) scale(.8) translateZ(-500px);
    }
}

.glueDownOut {
    -webkit-animation: glueDownOut ease-in;
            animation: glueDownOut ease-in;
}
@-webkit-keyframes glueDownOut {
    40% {
        opacity: .8;
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: perspective(800px) rotateX(15deg);
        -webkit-animation-timing-function: ease-out;
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: 50% 80%;
        -webkit-transform: perspective(800px) scale(.8) translateZ(-500px);
    }
}
@keyframes glueDownOut {
    40% {
        opacity: .8;
        transform-origin: 50% 100%;
        transform: perspective(800px) rotateX(15deg);
        animation-timing-function: ease-out;
    }
    100% {
        opacity: 0;
        transform-origin: 50% 80%;
        transform: perspective(800px) scale(.8) translateZ(-500px);
    }
}



/* GLUE EFFECT IN */
.glueLeftIn {
    -webkit-animation: glueLeftIn ease-in;
            animation: glueLeftIn ease-in;
}
@-webkit-keyframes glueLeftIn {
    0% {
        opacity: 0;
        -webkit-transform-origin: 20% 50%;
        -webkit-transform: perspective(800px) scale(.8) translateZ(-500px);
    }
    40% {
        opacity: .8;
        -webkit-transform-origin: 0 50%;
        -webkit-transform: perspective(800px) rotateY(15deg);
        -webkit-animation-timing-function: ease-out;
    }
    100% {
        -webkit-transform-origin: 0 50%;
        -webkit-transform: perspective(800px);
    }
}
@keyframes glueLeftIn {
    0% {
        opacity: 0;
        transform-origin: 20% 50%;
        transform: perspective(800px) scale(.8) translateZ(-500px);
    }
    40% {
        opacity: .8;
        transform-origin: 0 50%;
        transform: perspective(800px) rotateY(15deg);
        animation-timing-function: ease-out;
    }
    100% {
        transform-origin: 0 50%;
        transform: perspective(800px);
    }
}

.glueRightIn {
    -webkit-animation: glueRightIn ease-in;
            animation: glueRightIn ease-in;
            transform-origin: 100% 50%;
}
@-webkit-keyframes glueRightIn {
    0% {
        opacity: 0;
        -webkit-transform-origin: 80% 50%;
        -webkit-transform: perspective(800px) scale(.8) translateZ(-500px);
    }
    40% {
        opacity: .8;
        -webkit-transform-origin: 100% 50%;
        -webkit-transform: perspective(800px) rotateY(-15deg);
        -webkit-animation-timing-function: ease-out;
    }
    100% {
        -webkit-transform-origin: 100% 50%;
        -webkit-transform: perspective(800px);
    }
}
@keyframes glueRightIn {
    0% {
        opacity: 0;
        transform-origin: 80% 50%;
        transform: perspective(800px) scale(.8) translateZ(-500px);
    }
    40% {
        opacity: .8;
        transform-origin: 100% 50%;
        transform: perspective(800px) rotateY(-15deg);
        animation-timing-function: ease-out;
    }
    100% {
        transform-origin: 100% 50%;
        transform: perspective(800px);
    }
}

.glueUpIn {
    -webkit-animation: glueUpIn ease-in;
            animation: glueUpIn ease-in;
}
@-webkit-keyframes glueUpIn {
    0% {
        opacity: 0;
        -webkit-transform-origin: 50% 20%;
        -webkit-transform: perspective(800px) scale(.8) translateZ(-500px);
    }
    40% {
        opacity: .8;
        -webkit-transform-origin: 50% 0;
        -webkit-transform: perspective(800px) rotateX(-15deg);
        -webkit-animation-timing-function: ease-out;
    }
    100% {
        -webkit-transform-origin: 50% 0;
        -webkit-transform: perspective(800px);
    }
}
@keyframes glueUpIn {
    0% {
        opacity: 0;
        transform-origin: 50% 20%;
        transform: perspective(800px) scale(.8) translateZ(-500px);
    }
    40% {
        opacity: .8;
        transform-origin: 50% 0;
        transform: perspective(800px) rotateX(-15deg);
        animation-timing-function: ease-out;
    }
    100% {
        transform-origin: 50% 0;
        transform: perspective(800px);
    }
}

.glueDownIn {
    -webkit-animation: glueDownIn ease-in;
            animation: glueDownIn ease-in;
}
@-webkit-keyframes glueDownIn {
    0% {
        opacity: 0;
        -webkit-transform-origin: 50% 80%;
        -webkit-transform: perspective(800px) scale(.8) translateZ(-500px);
    }
    40% {
        opacity: .8;
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: perspective(800px) rotateX(15deg);
        -webkit-animation-timing-function: ease-out;
    }
    100% {
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: perspective(800px);
    }
}
@keyframes glueDownIn {
    0% {
        opacity: 0;
        transform-origin: 50% 80%;
        transform: perspective(800px) scale(.8) translateZ(-500px);
    }
    40% {
        opacity: .8;
        transform-origin: 50% 100%;
        transform: perspective(800px) rotateX(15deg);
        animation-timing-function: ease-out;
    }
    100% {
        transform-origin: 50% 100%;
        transform: perspective(800px);
    }
}






/* SHAKE EFFECTS ALTERNATIVE
    + originally authored by Lionel - https://github.com/elrumordelaluz
    + size gzip: 3.18KB begin --> reduce only 0.8KB;
*/
.code-animated[class*="shake"] {
    -webkit-animation-duration: .1s !important;
    animation-duration: .1s !important;

    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;

    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
}

.shake {
    -webkit-animation-name: shake;
    animation-name: shake;
}
@-webkit-keyframes shake {
    0%, 100% { -webkit-transform: translate(0, 0) rotate(0); }
    10% { -webkit-transform: translate(2px, -2px) rotate(-1deg); }
    20% { -webkit-transform: translate(2px, -1px) rotate(1deg); }
    30% { -webkit-transform: translate(-1px, -1px) rotate(-2deg); }
    40% { -webkit-transform: translate(-3px, 2px) rotate(-1deg); }
    50% { -webkit-transform: translate(2px, 2px) rotate(-2deg); }
    60% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
    70% { -webkit-transform: translate(1px, -3px) rotate(-2deg); }
    80% { -webkit-transform: translate(-3px, -3px) rotate(1deg); }
    90% { -webkit-transform: translate(2px, -3px) rotate(-2deg); }
}
@keyframes shake {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    10% { transform: translate(2px, -2px) rotate(-1deg); }
    20% { transform: translate(2px, -1px) rotate(1deg); }
    30% { transform: translate(-1px, -1px) rotate(-2deg); }
    40% { transform: translate(-3px, 2px) rotate(-1deg); }
    50% { transform: translate(2px, 2px) rotate(-2deg); }
    60% { transform: translate(-1px, -2px) rotate(-1deg); }
    70% { transform: translate(1px, -3px) rotate(-2deg); }
    80% { transform: translate(-3px, -3px) rotate(1deg); }
    90% { transform: translate(2px, -3px) rotate(-2deg); }
}

.code-animated.shakeSlow {
    -webkit-animation-name: shakeSlow;
    animation-name: shakeSlow;
    -webkit-animation-duration: 1s !important;
    animation-duration: 1s !important;
}
@-webkit-keyframes shakeSlow {
    0%, 100% { -webkit-transform: translate(0, 0) rotate(0); }
    10% { -webkit-transform: translate(-7px, -9px) rotate(1deg); }
    20% { -webkit-transform: translate(-2px, 7px) rotate(-3deg); }
    30% { -webkit-transform: translate(-3px, 6px) rotate(3deg); }
    40% { -webkit-transform: translate(1px, -3px) rotate(-4deg); }
    50% { -webkit-transform: translate(2px, -6px) rotate(2deg); }
    60% { -webkit-transform: translate(-9px, 6px) rotate(-4deg); }
    70% { -webkit-transform: translate(9px, 8px) rotate(-4deg); }
    80% { -webkit-transform: translate(-7px, -8px) rotate(3deg); }
    90% { -webkit-transform: translate(-6px, -4px) rotate(-2deg); }
}
@keyframes shakeSlow {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    10% { transform: translate(-7px, -9px) rotate(1deg); }
    20% { transform: translate(-2px, 7px) rotate(-3deg); }
    30% { transform: translate(-3px, 6px) rotate(3deg); }
    40% { transform: translate(1px, -3px) rotate(-4deg); }
    50% { transform: translate(2px, -6px) rotate(2deg); }
    60% { transform: translate(-9px, 6px) rotate(-4deg); }
    70% { transform: translate(9px, 8px) rotate(-4deg); }
    80% { transform: translate(-7px, -8px) rotate(3deg); }
    90% { transform: translate(-6px, -4px) rotate(-2deg); }
}

.shakeLittle {
    -webkit-animation-name: shakeLittle;
    animation-name: shakeLittle;
}
@-webkit-keyframes shakeLittle {
    0%, 100% { -webkit-transform: translate(0, 0) rotate(0); }
    10% { -webkit-transform: translate(-1px, -1px) rotate(-1deg); }
    20% { -webkit-transform: translate(0, -1px) rotate(-1deg); }
    30% { -webkit-transform: translate(-1px, -1px) rotate(0); }
    40% { -webkit-transform: translate(0, 0) rotate(0); }
    50% { -webkit-transform: translate(0, -1px) rotate(-1deg); }
    60% { -webkit-transform: translate(-1px, 0) rotate(-1deg); }
    70% { -webkit-transform: translate(0, 0) rotate(-1deg); }
    80% { -webkit-transform: translate(-1px, 0) rotate(0); }
    90% { -webkit-transform: translate(0, -1px) rotate(-1deg); }
}
@keyframes shakeLittle {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    10% { transform: translate(-1px, -1px) rotate(-1deg); }
    20% { transform: translate(0, -1px) rotate(-1deg); }
    30% { transform: translate(-1px, -1px) rotate(0); }
    40% { transform: translate(0, 0) rotate(0); }
    50% { transform: translate(0, -1px) rotate(-1deg); }
    60% { transform: translate(-1px, 0) rotate(-1deg); }
    70% { transform: translate(0, 0) rotate(-1deg); }
    80% { transform: translate(-1px, 0) rotate(0); }
    90% { transform: translate(0, -1px) rotate(-1deg); }
}

.shakeHard {
    -webkit-animation-name: shakeHard;
    animation-name: shakeHard;
}
@-webkit-keyframes shakeHard {
    0% { -webkit-transform: translate(0, 0) rotate(0); }
    10% { -webkit-transform: translate(-7px, 6px) rotate(-1deg); }
    20% { -webkit-transform: translate(7px, -8px) rotate(1deg); }
    30% { -webkit-transform: translate(-3px, 7px) rotate(2deg); }
    40% { -webkit-transform: translate(-3px, -7px) rotate(1deg); }
    50% { -webkit-transform: translate(9px, -2px) rotate(3deg); }
    60% { -webkit-transform: translate(5px, -1px) rotate(-2deg); }
    70% { -webkit-transform: translate(0, 6px) rotate(-4deg); }
    80% { -webkit-transform: translate(7px, 9px) rotate(-1deg); }
    90% { -webkit-transform: translate(-10px, 9px) rotate(2deg); }
}
@keyframes shakeHard {
    0% { transform: translate(0, 0) rotate(0); }
    10% { transform: translate(-7px, 6px) rotate(-1deg); }
    20% { transform: translate(7px, -8px) rotate(1deg); }
    30% { transform: translate(-3px, 7px) rotate(2deg); }
    40% { transform: translate(-3px, -7px) rotate(1deg); }
    50% { transform: translate(9px, -2px) rotate(3deg); }
    60% { transform: translate(5px, -1px) rotate(-2deg); }
    70% { transform: translate(0, 6px) rotate(-4deg); }
    80% { transform: translate(7px, 9px) rotate(-1deg); }
    90% { transform: translate(-10px, 9px) rotate(2deg); }
}

.shakeHor {
    -webkit-animation-name: shakeHor;
    animation-name: shakeHor;
}
@-webkit-keyframes shakeHor {
    0%, 100% {
        -webkit-transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translateX(-8px);
    }
    20%, 40%, 60%, 80% {
        -webkit-transform: translateX(8px);
    }
}
@keyframes shakeHor {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-8px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(8px);
    }
}

.shakeVer {
    -webkit-animation-name: shakeVer;
    animation-name: shakeVer;
}
@-webkit-keyframes shakeVer {
    0%, 100% {
        -webkit-transform: translateY(0);
    }
    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translateY(-8px);
    }
    20%, 40%, 60%, 80% {
        -webkit-transform: translateY(8px);
    }
}
@keyframes shakeVer {
    0%, 100% {
        transform: translateY(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateY(-8px);
    }
    20%, 40%, 60%, 80% {
        transform: translateY(8px);
    }
}

.shakeRotate {
    -webkit-animation-name: shakeRotate;
    animation-name: shakeRotate;
}
@-webkit-keyframes shakeRotate {
    0%, 100% {
        -webkit-transform: rotate(0);
    }
    15%, 45%, 75% {
        -webkit-transform: rotate(-5deg);
    }
    30%, 60%, 90% {
        -webkit-transform: rotate(5deg);
    }
}
@keyframes shakeRotate {
    0%, 100% {
        transform: rotate(0);
    }
    15%, 45%, 75% {
        transform: rotate(-5deg);
    }
    30%, 60%, 90% {
        transform: rotate(5deg);
    }
}

.code-animated.shakeOpacity {
    -webkit-animation-name: shakeOpacity;
    animation-name: shakeOpacity;
    -webkit-animation-duration: .2s !important;
    animation-duration: .2s !important;
}
@-webkit-keyframes shakeOpacity {
    0% { -webkit-transform: translate(0, 0) rotate(0); opacity: .2; }
    20% { -webkit-transform: translate(-5px, -2px) rotate(2deg); opacity: .9; }
    40% { -webkit-transform: translate(-1px, 2px) rotate(-3deg); opacity: .4; }
    60% { -webkit-transform: translate(-5px, -4px) rotate(-1deg); opacity: 0; }
    80% { -webkit-transform: translate(-5px, 2px) rotate(1deg); opacity: .6; }
}
@keyframes shakeOpacity {
    0% { transform: translate(0, 0) rotate(0); opacity: .2; }
    20% { transform: translate(-5px, -2px) rotate(2deg); opacity: .9; }
    40% { transform: translate(-1px, 2px) rotate(-3deg); opacity: .4; }
    60% { transform: translate(-5px, -4px) rotate(-1deg); opacity: 0; }
    80% { transform: translate(-5px, 2px) rotate(1deg); opacity: .6; }
}

.shakeCrazy {
    -webkit-animation-name: shakeCrazy;
    animation-name: shakeCrazy;
}
@-webkit-keyframes shakeCrazy {
    0% { -webkit-transform: translate(0, 0) rotate(0); opacity: .1; }
    20% { -webkit-transform: translate(-19px, -15px) rotate(-8deg); opacity: .5; }
    40% { -webkit-transform: translate(15px, 5px) rotate(6deg); opacity: .4; }
    60% { -webkit-transform: translate(-12px, 11px) rotate(-7deg); opacity: 0; }
    80% { -webkit-transform: translate(-10px, -13px) rotate(5deg); opacity: .6; }
}
@keyframes shakeCrazy {
    0% { transform: translate(0, 0) rotate(0); opacity: .1; }
    20% { transform: translate(-19px, -15px) rotate(-8deg); opacity: .5; }
    40% { transform: translate(15px, 5px) rotate(6deg); opacity: .4; }
    60% { transform: translate(-12px, 11px) rotate(-7deg); opacity: 0; }
    80% { transform: translate(-10px, -13px) rotate(5deg); opacity: .6; }
}



/* FAN EFFECT */
.fanBehindDown {
    -webkit-animation-name: fanBehindDown;
    animation-name: fanBehindDown;
}
@-webkit-keyframes fanBehindDown {
    0%, 49%, 51%, 99% {
        -webkit-transform-origin: -50% -50%;
    }
    50% {
        z-index: 9999;
        opacity: .8;
        -webkit-transform: rotate(30deg);
        
    }
    100% {
        opacity: 0;
        -webkit-transform: rotate(0deg);
    }
}
@keyframes fanBehindDown {
    0%, 49%, 51%, 99% {
        transform-origin: -50% -50%;
    }
    50% {
        z-index: 9999;
        opacity: .8;
        transform: rotate(30deg);
    }
    100% {
        opacity: 0;
        transform: rotate(0deg);
    }
}

.fanBehindUp {
    -webkit-animation-name: fanBehindUp;
    animation-name: fanBehindUp;
}
@-webkit-keyframes fanBehindUp {
    0%, 49%, 51%, 99% {
        -webkit-transform-origin: -50% -50%;
    }
    50% {
        z-index: 9999;
        opacity: .8;
        -webkit-transform: rotate(-20deg);
        
    }
    100% {
        opacity: 0;
        -webkit-transform: rotate(0deg);
    }
}
@keyframes fanBehindUp {
    0%, 49%, 51%, 99% {
        transform-origin: -50% -50%;
    }
    50% {
        z-index: 9999;
        opacity: .8;
        transform: rotate(-20deg);
        
    }
    100% {
        opacity: 0;
        transform: rotate(0deg);
    }
}


.fanFrontUp {
    -webkit-animation-name: fanFrontUp;
    animation-name: fanFrontUp;
}
@-webkit-keyframes fanFrontUp {
    0%, 49%, 52%, 99% {
        -webkit-transform-origin: -50% -50%;
    }
    50% {
        -webkit-transform: rotate(-20deg);
    }
    51% {
        -webkit-transform: rotate(-20deg);
        z-index: 9999;
    }
    100% {
        -webkit-transform: rotate(0deg);
        z-index: 9999;
    }
}
@keyframes fanFrontUp {
    0%, 49%, 52%, 99% {
        transform-origin: -50% -50%;
    }
    50% {
        transform: rotate(-20deg);
    }
    51% {
        transform: rotate(-20deg);
        z-index: 9999;
    }
    100% {
        transform: rotate(0deg);
        z-index: 9999;
    }
}

.fanFrontDown {
    -webkit-animation-name: fanFrontDown;
    animation-name: fanFrontDown;
}
@-webkit-keyframes fanFrontDown {
    0%, 49%, 52%, 99% {
        -webkit-transform-origin: -50% -50%;
    }
    50% {
        -webkit-transform: rotate(30deg);
    }
    51% {
        -webkit-transform: rotate(30deg);
        z-index: 9999;
    }
    100% {
        -webkit-transform: rotate(0deg);
        z-index: 9999;
    }
}
@keyframes fanFrontDown {
    0%, 49%, 52%, 99% {
        transform-origin: -50% -50%;
    }
    50% {
        transform: rotate(30deg);
    }
    51% {
        transform: rotate(30deg);
        z-index: 9999;
    }
    100% {
        transform: rotate(0deg);
        z-index: 9999;
    }
}



/* MOVE BEHIND */
.moveLeftBehind {
    -webkit-animation-name: moveLeftBehind;
    animation-name: moveLeftBehind;
}
@-webkit-keyframes moveLeftBehind { 
    0% {
        -webkit-transform: perspective(800px);
    }
    50% {
        z-index: 9999;
        opacity: 1;
        -webkit-transform: perspective(800px) translateX(-120%) rotateY(35deg) rotateX(10deg);
    }
    100% {
        opacity: 0;
        -webkit-transform: perspective(800px) translateZ(-10px);
    }
}
@keyframes moveLeftBehind { 
    0% {
        transform: perspective(800px);
    }
    50% {
        z-index: 9999;
        opacity: 1;
        transform: perspective(800px) translateX(-120%) rotateY(35deg) rotateX(10deg);
    }
    100% {
        opacity: 0;
        transform: perspective(800px) translateZ(-10px);
    }
}

.moveRightBehind {
    -webkit-animation-name: moveRightBehind;
    animation-name: moveRightBehind;
}
@-webkit-keyframes moveRightBehind { 
    0% {
        -webkit-transform: perspective(800px);
    }
    50% {
        z-index: 9999;
        opacity: 1;
        -webkit-transform: perspective(800px) translateX(120%) rotateY(-35deg) rotateX(10deg);
    }
    100% {
        opacity: 0;
        -webkit-transform: perspective(800px) translateZ(-10px);
    }
}
@keyframes moveRightBehind { 
    0% {
        transform: perspective(800px);
    }
    50% {
        z-index: 9999;
        opacity: 1;
        transform: perspective(800px) translateX(120%) rotateY(-35deg) rotateX(10deg);
    }
    100% {
        opacity: 0;
        transform: perspective(800px) translateZ(-10px);
    }
}

.moveLeftFront {
    -webkit-animation-name: moveLeftFront;
    animation-name: moveLeftFront;
}
@-webkit-keyframes moveLeftFront { 
    0% {
        opacity: 0;
        -webkit-transform: perspective(800px);
    }
    50% {
        opacity: 1;
        -webkit-transform: perspective(800px) translateX(-120%) translateZ(-10px) rotateY(35deg) rotateX(10deg);
    }
    51% {
        z-index: 9999;
        -webkit-transform: perspective(800px) translateX(-120%) translateZ(-10px) rotateY(35deg) rotateX(10deg);
    }
    100% {
        z-index: 9999;
        -webkit-transform: perspective(800px);
    }
}
@keyframes moveLeftFront { 
    0% {
        opacity: 0;
        transform: perspective(800px);
    }
    50% {
        opacity: 1;
        transform: perspective(800px) translateX(-120%) translateZ(-10px) rotateY(35deg) rotateX(10deg);
    }
    51% {
        z-index: 9999;
        transform: perspective(800px) translateX(-120%) translateZ(-10px) rotateY(35deg) rotateX(10deg);
    }
    100% {
        z-index: 9999;
        transform: perspective(800px);
    }
}

.moveRightFront {
    -webkit-animation-name: moveRightFront;
    animation-name: moveRightFront;
}
@-webkit-keyframes moveRightFront { 
    0% {
        opacity: 0;
        -webkit-transform: perspective(800px);
    }
    50% {
        opacity: 1;
        -webkit-transform: perspective(800px) translateX(120%) translateZ(-10px) rotateY(-35deg) rotateX(10deg);
    }
    51% {
        z-index: 9999;
        -webkit-transform: perspective(800px) translateX(120%) translateZ(-10px) rotateY(-35deg) rotateX(10deg);
    }
    100% {
        z-index: 9999;
        -webkit-transform: perspective(800px);
    }
}
@keyframes moveRightFront { 
    0% {
        opacity: 0;
        transform: perspective(800px);
    }
    50% {
        opacity: 1;
        transform: perspective(800px) translateX(120%) translateZ(-10px) rotateY(-35deg) rotateX(10deg);
    }
    51% {
        z-index: 9999;
        transform: perspective(800px) translateX(120%) translateZ(-10px) rotateY(-35deg) rotateX(10deg);
    }
    100% {
        z-index: 9999;
        transform: perspective(800px);
    }
}



/* MOVE SHORT BEHIND */
.moveShortLeftBehind {
    -webkit-animation-name: moveShortLeftBehind;
    animation-name: moveShortLeftBehind;
}
@-webkit-keyframes moveShortLeftBehind { 
    0% {
        -webkit-transform: perspective(800px);
    }
    40% {
        opacity: 1;
        z-index: 9999;
        -webkit-transform: perspective(800px) translateX(-40%) scale(.8) rotateY(20deg);
    }
    100% {
        opacity: 0;
        -webkit-transform: perspective(800px) translateZ(-400px);
    }
}
@keyframes moveShortLeftBehind { 
    0% {
        transform: perspective(800px);
    }
    40% {
        opacity: 1;
        z-index: 9999;
        transform: perspective(800px) translateX(-40%) scale(.8) rotateY(20deg);
    }
    100% {
        opacity: 0;
        transform: perspective(800px) translateZ(-400px);
    }
}

.moveShortRightBehind {
    -webkit-animation-name: moveShortRightBehind;
    animation-name: moveShortRightBehind;
}
@-webkit-keyframes moveShortRightBehind { 
    0% {
        -webkit-transform: perspective(800px);
    }
    40% {
        opacity: 1;
        z-index: 9999;
        -webkit-transform: perspective(800px) translateX(40%) scale(.8) rotateY(-20deg);
    }
    100% {
        opacity: 0;
        -webkit-transform: perspective(800px) translateZ(-400px);
    }
}
@keyframes moveShortRightBehind { 
    0% {
        transform: perspective(800px);
    }
    40% {
        opacity: 1;
        z-index: 9999;
        transform: perspective(800px) translateX(40%) scale(.8) rotateY(-20deg);
    }
    100% {
        opacity: 0;
        transform: perspective(800px) translateZ(-400px);
    }
}

.moveShortLeftFront {
    -webkit-animation-name: moveShortLeftFront;
    animation-name: moveShortLeftFront;
}
@-webkit-keyframes moveShortLeftFront {
    0% {
        opacity: 0;
        -webkit-transform: perspective(800px) translateZ(-400px);
    }
    40% {
        opacity: 1;
        -webkit-transform: perspective(800px) translateX(-40%) scale(.8) rotateY(20deg);
    }
    41% {
        z-index: 9999;
        -webkit-transform: perspective(800px) translateX(-40%) scale(.8) rotateY(20deg);
    }
    100% {
        z-index: 9999;
        -webkit-transform: perspective(800px);
    }
}
@keyframes moveShortLeftFront {
    0% {
        opacity: 0;
        transform: perspective(800px) translateZ(-400px);
    }
    40% {
        opacity: 1;
        transform: perspective(800px) translateX(-40%) scale(.8) rotateY(20deg);
    }
    41% {
        z-index: 9999;
        transform: perspective(800px) translateX(-40%) scale(.8) rotateY(20deg);
    }
    100% {
        z-index: 9999;
        transform: perspective(800px);
    }
}

.moveShortRightFront {
    -webkit-animation-name: moveShortRightFront;
    animation-name: moveShortRightFront;
}
@-webkit-keyframes moveShortRightFront {
    0% {
        opacity: 0;
        -webkit-transform: perspective(800px) translateZ(-400px);
    }
    40% {
        opacity: 1;
        -webkit-transform: perspective(800px) translateX(40%) scale(.8) rotateY(-20deg);
    }
    41% {
        z-index: 9999;
        -webkit-transform: perspective(800px) translateX(40%) scale(.8) rotateY(-20deg);
    }
    100% {
        z-index: 9999;
        -webkit-transform: perspective(800px);
    }
}
@keyframes moveShortRightFront {
    0% {
        opacity: 0;
        transform: perspective(800px) translateZ(-400px);
    }
    40% {
        opacity: 1;
        transform: perspective(800px) translateX(40%) scale(.8) rotateY(-20deg);
    }
    41% {
        z-index: 9999;
        transform: perspective(800px) translateX(40%) scale(.8) rotateY(-20deg);
    }
    100% {
        z-index: 9999;
        transform: perspective(800px);
    }
}





/* Table of effect combination - ISSUE 1
============================================================== */

/* MOVE EFFECTS
-------------------------------------------------------------- */
/* MOVE HOR EFFECTS */
.codefx-moveHor.code-viewport { overflow: hidden !important; }
.codefx-moveHor.code-slideNext .code-slideIn {
    -webkit-animation-name: slideOneRightIn;
    animation-name: slideOneRightIn;
}
.codefx-moveHor.code-slideNext .code-slideOut {
    -webkit-animation-name: slideOneLeftOut;
    animation-name: slideOneLeftOut;
}

.codefx-moveHor.code-slidePrev .code-slideIn {
    -webkit-animation-name: slideOneLeftIn;
    animation-name: slideOneLeftIn;
}
.codefx-moveHor.code-slidePrev .code-slideOut {
    -webkit-animation-name: slideOneRightOut;
    animation-name: slideOneRightOut;
}


/* MOVE VER EFFECTS */
.codefx-moveVer.code-viewport { overflow: hidden !important; }
.codefx-moveVer.code-slideNext .code-slideIn {
    -webkit-animation-name: slideOneDownIn;
    animation-name: slideOneDownIn;
}
.codefx-moveVer.code-slideNext .code-slideOut {
    -webkit-animation-name: slideOneUpOut;
    animation-name: slideOneUpOut;
}

.codefx-moveVer.code-slidePrev .code-slideIn {
    -webkit-animation-name: slideOneUpIn;
    animation-name: slideOneUpIn;
}
.codefx-moveVer.code-slidePrev .code-slideOut {
    -webkit-animation-name: slideOneDownOut;
    animation-name: slideOneDownOut;
}




/* FADE EFFECTS
-------------------------------------------------------------- */
/* FADE BASIC EFFECT */
.codefx-fade .code-slideIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}
.codefx-fade .code-slideOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
}


/* FADE HOR EFFECT */
.codefx-fadeHor.code-viewport { overflow: hidden !important; }
.codefx-fadeHor.code-slideNext .code-slideIn {
    -webkit-animation-name: slideOneRightIn;
    animation-name: slideOneRightIn;
}
.codefx-fadeHor.code-slideNext .code-slideOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
}

.codefx-fadeHor.code-slidePrev .code-slideIn {
    -webkit-animation-name: slideOneLeftIn;
    animation-name: slideOneLeftIn;
}
.codefx-fadeHor.code-slidePrev .code-slideOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
}


/* FADE VER EFFECT */
.codefx-fadeVer.code-viewport { overflow: hidden !important; }
.codefx-fadeVer.code-slideNext .code-slideIn {
    -webkit-animation-name: slideOneDownIn;
    animation-name: slideOneDownIn;
}
.codefx-fadeVer.code-slideNext .code-slideOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
}

.codefx-fadeVer.code-slidePrev .code-slideIn {
    -webkit-animation-name: slideOneUpIn;
    animation-name: slideOneUpIn;
}
.codefx-fadeVer.code-slidePrev .code-slideOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
}



/* SCALE EFFECTS
-------------------------------------------------------------- */
/* SCALE OUT HOR EFFECT */
.codefx-scaleOutHor.code-viewport { overflow: hidden !important; }
.codefx-scaleOutHor.code-slideNext .code-slideIn {
    -webkit-animation-name: slideOneRightIn;
    animation-name: slideOneRightIn;
}
.codefx-scaleOutHor.code-slideNext .code-slideOut {
    -webkit-animation-name: pullOut;
    animation-name: pullOut;
}

.codefx-scaleOutHor.code-slidePrev .code-slideIn {
    -webkit-animation-name: slideOneLeftIn;
    animation-name: slideOneLeftIn;
}
.codefx-scaleOutHor.code-slidePrev .code-slideOut {
    -webkit-animation-name: pullOut;
    animation-name: pullOut;
}


/* SCALE OUT VER EFFECT */
.codefx-scaleOutVer.code-viewport { overflow: hidden !important; }
.codefx-scaleOutVer.code-slideNext .code-slideIn {
    -webkit-animation-name: slideOneDownIn;
    animation-name: slideOneDownIn;
}
.codefx-scaleOutVer.code-slideNext .code-slideOut {
    -webkit-animation-name: pullOut;
    animation-name: pullOut;
}

.codefx-scaleOutVer.code-slidePrev .code-slideIn {
    -webkit-animation-name: slideOneUpIn;
    animation-name: slideOneUpIn;
}
.codefx-scaleOutVer.code-slidePrev .code-slideOut {
    -webkit-animation-name: pullOut;
    animation-name: pullOut;
}


/* SCALE IN HOR EFFECT */
.codefx-scaleInHor.code-viewport { overflow: hidden !important; }
.codefx-scaleInHor.code-slideNext .code-slideIn {
    -webkit-animation-name: pullIn;
    animation-name: pullIn;
}
.codefx-scaleInHor.code-slideNext .code-slideOut {
    -webkit-animation-name: slideOneLeftOut;
    animation-name: slideOneLeftOut;
}

.codefx-scaleInHor.code-slidePrev .code-slideIn {
    -webkit-animation-name: pullIn;
    animation-name: pullIn;
}
.codefx-scaleInHor.code-slidePrev .code-slideOut {
    -webkit-animation-name: slideOneRightOut;
    animation-name: slideOneRightOut;
}


/* SCALE IN VER EFFECT */
.codefx-scaleInVer.code-viewport { overflow: hidden !important; }
.codefx-scaleInVer.code-slideNext .code-slideIn {
    -webkit-animation-name: pullIn;
    animation-name: pullIn;
}
.codefx-scaleInVer.code-slideNext .code-slideOut {
    -webkit-animation-name: slideOneUpOut;
    animation-name: slideOneUpOut;
}

.codefx-scaleInVer.code-slidePrev .code-slideIn {
    -webkit-animation-name: pullIn;
    animation-name: pullIn;
}
.codefx-scaleInVer.code-slidePrev .code-slideOut {
    -webkit-animation-name: slideOneDownOut;
    animation-name: slideOneDownOut;
}


/* SCALE PULSE EFFECT */
.codefx-scalePulse.code-slideNext .code-slideIn {
    -webkit-animation-name: pullIn;
    animation-name: pullIn;
}
.codefx-scalePulse.code-slideNext .code-slideOut {
    -webkit-animation-name: pushOut;
    animation-name: pushOut;
}

.codefx-scalePulse.code-slidePrev .code-slideIn {
    -webkit-animation-name: pushIn;
    animation-name: pushIn;
}
.codefx-scalePulse.code-slidePrev .code-slideOut {
    -webkit-animation-name: pullOut;
    animation-name: pullOut;
}


/* SCALE WAVE EFFECT */
.codefx-scaleWave .code-slideIn {
    -webkit-animation-name: pullIn;
    animation-name: pullIn;
}
.codefx-scaleWave .code-slideOut {
    -webkit-animation-name: pullOut;
    animation-name: pullOut;
}




/* ROTATE EFFECTS
-------------------------------------------------------------- */
/* GLUE OUT HOR EFFECT */
.codefx-glueHor { overflow: hidden !important; }
.codefx-glueHor.code-slideNext .code-slideIn {
    -webkit-animation-name: slideOneRightIn;
    animation-name: slideOneRightIn;
}
.codefx-glueHor.code-slideNext .code-slideOut {
    -webkit-animation-name: glueLeftOut;
    animation-name: glueLeftOut;
}

.codefx-glueHor.code-slidePrev .code-slideIn {
    -webkit-animation-name: slideOneLeftIn;
    animation-name: slideOneLeftIn;
}
.codefx-glueHor.code-slidePrev .code-slideOut {
    -webkit-animation-name: glueRightOut;
    animation-name: glueRightOut;
}



/* GLUE OUT VER EFFECT */
.codefx-glueVer { overflow: hidden !important; }
.codefx-glueVer.code-slideNext .code-slideIn {
    -webkit-animation-name: slideOneDownIn;
    animation-name: slideOneDownIn;
}
.codefx-glueVer.code-slideNext .code-slideOut {
    -webkit-animation-name: glueUpOut;
    animation-name: glueUpOut;
}

.codefx-glueVer.code-slidePrev .code-slideIn {
    -webkit-animation-name: slideOneUpIn;
    animation-name: slideOneUpIn;
}
.codefx-glueVer.code-slidePrev .code-slideOut {
    -webkit-animation-name: glueDownOut;
    animation-name: glueDownOut;
}



/* FLIT HOR EFFECT */
.codefx-flitHor.code-slideNext .code-slideIn {
    -webkit-animation-name: roFlitLeftIn;
    animation-name: roFlitLeftIn;
}
.codefx-flitHor.code-slideNext .code-slideOut {
    -webkit-animation-name: roFlitRightOut;
    animation-name: roFlitRightOut;
}

.codefx-flitHor.code-slidePrev .code-slideIn {
    -webkit-animation-name: roFlitRightIn;
    animation-name: roFlitRightIn;
}
.codefx-flitHor.code-slidePrev .code-slideOut {
    -webkit-animation-name: roFlitLeftOut;
    animation-name: roFlitLeftOut;
}



/* FLIT VER EFFECT */
.codefx-flitVer.code-slideNext .code-slideIn {
    -webkit-animation-name: roFlitDownIn;
    animation-name: roFlitDownIn;
}
.codefx-flitVer.code-slideNext .code-slideOut {
    -webkit-animation-name: roFlitUpOut;
    animation-name: roFlitUpOut;
}

.codefx-flitVer.code-slidePrev .code-slideIn {
    -webkit-animation-name: roFlitUpIn;
    animation-name: roFlitUpIn;
}
.codefx-flitVer.code-slidePrev .code-slideOut {
    -webkit-animation-name: roFlitDownOut;
    animation-name: roFlitDownOut;
}



/* HINGE EFFECT */
.codefx-hinge.code-slideNext .code-slideIn {
    -webkit-animation-name: pullIn;
    animation-name: pullIn;
}
.codefx-hinge.code-slideNext .code-slideOut {
    -webkit-animation-name: hinge;
    animation-name: hinge;
}

.codefx-hinge.code-slidePrev .code-slideIn {
    -webkit-animation-name: rollIn;
    animation-name: rollIn;
}
.codefx-hinge.code-slidePrev .code-slideOut {
    -webkit-animation-name: pullOut;
    animation-name: pullOut;
}



/* ROLL EFFECT */
.codefx-roll.code-slideNext .code-slideIn {
    -webkit-animation-name: pullIn;
    animation-name: pullIn;
}
.codefx-roll.code-slideNext .code-slideOut {
    -webkit-animation-name: rollOut;
    animation-name: rollOut;
}

.codefx-roll.code-slidePrev .code-slideIn {
    -webkit-animation-name: rollIn;
    animation-name: rollIn;
}
.codefx-roll.code-slidePrev .code-slideOut {
    -webkit-animation-name: pullOut;
    animation-name: pullOut;
}



/* NEWSPAPER EFFECT */
.codefx-newspaper.code-slideNext .code-slideIn {
    -webkit-animation-name: newspaperIn;
    animation-name: newspaperIn;
}
.codefx-newspaper.code-slideNext .code-slideOut {
    -webkit-animation-name: pushOut;
    animation-name: pushOut;
}

.codefx-newspaper.code-slidePrev .code-slideIn {
    -webkit-animation-name: pushIn;
    animation-name: pushIn;
}
.codefx-newspaper.code-slidePrev .code-slideOut {
    -webkit-animation-name: newspaperOut;
    animation-name: newspaperOut;
}



/* PUSHFROM HOR EFFECT */
.codefx-pushFromHor.code-viewport { overflow: hidden !important; }
.codefx-pushFromHor.code-slideNext .code-slideIn {
    -webkit-animation-name: slideOneRightIn;
    animation-name: slideOneRightIn;
}
.codefx-pushFromHor.code-slideNext .code-slideOut {
    -webkit-animation-name: roEdgeLeftOut;
    animation-name: roEdgeLeftOut;
}

.codefx-pushFromHor.code-slidePrev .code-slideIn {
    -webkit-animation-name: slideOneLeftIn;
    animation-name: slideOneLeftIn;
}
.codefx-pushFromHor.code-slidePrev .code-slideOut {
    -webkit-animation-name: roEdgeRightOut;
    animation-name: roEdgeRightOut;
}



/* PUSHFROM VER EFFECT */
.codefx-pushFromVer.code-viewport { overflow: hidden !important; }
.codefx-pushFromVer.code-slideNext .code-slideIn {
    -webkit-animation-name: slideOneDownIn;
    animation-name: slideOneDownIn;
}
.codefx-pushFromVer.code-slideNext .code-slideOut {
    -webkit-animation-name: roEdgeUpOut;
    animation-name: roEdgeUpOut;
}

.codefx-pushFromVer.code-slidePrev .code-slideIn {
    -webkit-animation-name: slideOneUpIn;
    animation-name: slideOneUpIn;
}
.codefx-pushFromVer.code-slidePrev .code-slideOut {
    -webkit-animation-name: roEdgeDownOut;
    animation-name: roEdgeDownOut;
}



/* ROTATE EDGE HOR EFFECT */
.codefx-roEdgeHor.code-slideNext .code-slideIn {
    -webkit-animation-name: roEdgeRightIn;
    animation-name: roEdgeRightIn;
}
.codefx-roEdgeHor.code-slideNext .code-slideOut {
    -webkit-animation-name: roEdgeLeftOut;
    animation-name: roEdgeLeftOut;
}

.codefx-roEdgeHor.code-slidePrev .code-slideIn {
    -webkit-animation-name: roEdgeLeftIn;
    animation-name: roEdgeLeftIn;
}
.codefx-roEdgeHor.code-slidePrev .code-slideOut {
    -webkit-animation-name: roEdgeRightOut;
    animation-name: roEdgeRightOut;
}



/* ROTATE EDGE VER EFFECT */
.codefx-roEdgeVer.code-slideNext .code-slideIn {
    -webkit-animation-name: roEdgeDownIn;
    animation-name: roEdgeDownIn;
}
.codefx-roEdgeVer.code-slideNext .code-slideOut {
    -webkit-animation-name: roEdgeUpOut;
    animation-name: roEdgeUpOut;
}

.codefx-roEdgeVer.code-slidePrev .code-slideIn {
    -webkit-animation-name: roEdgeUpIn;
    animation-name: roEdgeUpIn;
}
.codefx-roEdgeVer.code-slidePrev .code-slideOut {
    -webkit-animation-name: roEdgeDownOut;
    animation-name: roEdgeDownOut;
}



/* FOLDFROM HOR EFFECT */
.codefx-foldFromHor.code-viewport { overflow: hidden !important; }
.codefx-foldFromHor.code-slideNext .code-slideIn {
    -webkit-animation-name: slideOneRightIn;
    animation-name: slideOneRightIn;
}
.codefx-foldFromHor.code-slideNext .code-slideOut {
    -webkit-animation-name: roFoldLeftOut;
    animation-name: roFoldLeftOut;
}

.codefx-foldFromHor.code-slidePrev .code-slideIn {
    -webkit-animation-name: slideOneLeftIn;
    animation-name: slideOneLeftIn;
}
.codefx-foldFromHor.code-slidePrev .code-slideOut {
    -webkit-animation-name: roFoldRightOut;
    animation-name: roFoldRightOut;
}



/* FOLDFROM VER EFFECT */
.codefx-foldFromVer.code-viewport { overflow: hidden !important; }
.codefx-foldFromVer.code-slideNext .code-slideIn {
    -webkit-animation-name: slideOneDownIn;
    animation-name: slideOneDownIn;
}
.codefx-foldFromVer.code-slideNext .code-slideOut {
    -webkit-animation-name: roFoldUpOut;
    animation-name: roFoldUpOut;
}

.codefx-foldFromVer.code-slidePrev .code-slideIn {
    -webkit-animation-name: slideOneUpIn;
    animation-name: slideOneUpIn;
}
.codefx-foldFromVer.code-slidePrev .code-slideOut {
    -webkit-animation-name: roFoldDownOut;
    animation-name: roFoldDownOut;
}



/* FOLD HOR EFFECT */
.codefx-foldHor.code-slideNext .code-slideIn {
    -webkit-animation-name: roFoldRightIn;
    animation-name: roFoldRightIn;
}
.codefx-foldHor.code-slideNext .code-slideOut {
    -webkit-animation-name: roFoldLeftOut;
    animation-name: roFoldLeftOut;
}

.codefx-foldHor.code-slidePrev .code-slideIn {
    -webkit-animation-name: roFoldLeftIn;
    animation-name: roFoldLeftIn;
}
.codefx-foldHor.code-slidePrev .code-slideOut {
    -webkit-animation-name: roFoldRightOut;
    animation-name: roFoldRightOut;
}



/* FOLD VER EFFECT */
.codefx-foldVer.code-slideNext .code-slideIn {
    -webkit-animation-name: roFoldDownIn;
    animation-name: roFoldDownIn;
}
.codefx-foldVer.code-slideNext .code-slideOut {
    -webkit-animation-name: roFoldUpOut;
    animation-name: roFoldUpOut;
}

.codefx-foldVer.code-slidePrev .code-slideIn {
    -webkit-animation-name: roFoldUpIn;
    animation-name: roFoldUpIn;
}
.codefx-foldVer.code-slidePrev .code-slideOut {
    -webkit-animation-name: roFoldDownOut;
    animation-name: roFoldDownOut;
}



/* ROOM HOR EFFECT */
.codefx-roomHor.code-viewport { overflow: hidden !important; }
.codefx-roomHor.code-slideNext .code-slideIn {
    -webkit-animation-name: roRoomRightIn;
    animation-name: roRoomRightIn;
}
.codefx-roomHor.code-slideNext .code-slideOut {
    -webkit-animation-name: roRoomLeftOut;
    animation-name: roRoomLeftOut;
}

.codefx-roomHor.code-slidePrev .code-slideIn {
    -webkit-animation-name: roRoomLeftIn;
    animation-name: roRoomLeftIn;
}
.codefx-roomHor.code-slidePrev .code-slideOut {
    -webkit-animation-name: roRoomRightOut;
    animation-name: roRoomRightOut;
}



/* ROOM VER EFFECT */
.codefx-roomVer.code-viewport { overflow: hidden !important; }
.codefx-roomVer.code-slideNext .code-slideIn {
    -webkit-animation-name: roRoomDownIn;
    animation-name: roRoomDownIn;
}
.codefx-roomVer.code-slideNext .code-slideOut {
    -webkit-animation-name: roRoomUpOut;
    animation-name: roRoomUpOut;
}

.codefx-roomVer.code-slidePrev .code-slideIn {
    -webkit-animation-name: roRoomUpIn;
    animation-name: roRoomUpIn;
}
.codefx-roomVer.code-slidePrev .code-slideOut {
    -webkit-animation-name: roRoomDownOut;
    animation-name: roRoomDownOut;
}





/* SLIDE EFFECTS
-------------------------------------------------------------- */
.codefx-slide.code-slideNext .code-slideIn {
    -webkit-animation-name: slidePullRightIn;
    animation-name: slidePullRightIn;
}
.codefx-slide.code-slideNext .code-slideOut {
    -webkit-animation-name: slidePullLeftOut;
    animation-name: slidePullLeftOut;
}

.codefx-slide.code-slidePrev .code-slideIn {
    -webkit-animation-name: slidePullLeftIn;
    animation-name: slidePullLeftIn;
}
.codefx-slide.code-slidePrev .code-slideOut {
    -webkit-animation-name: slidePullRightOut;
    animation-name: slidePullRightOut;
}






/* Table of effect combination - ISSUE 2
============================================================== */
/* FALL EFFECT */
.codefx-fall.code-slideNext .code-slideIn {
    -webkit-animation-name: pullIn;
    animation-name: pullIn;
}
.codefx-fall.code-slideNext .code-slideOut {
    -webkit-animation-name: slideFadeDownOut;
    animation-name: slideFadeDownOut;
}

.codefx-fall.code-slidePrev .code-slideIn {
    -webkit-animation-name: slideFadeUpIn;
    animation-name: slideFadeUpIn;
}
.codefx-fall.code-slidePrev .code-slideOut {
    -webkit-animation-name: pullOut;
    animation-name: pullOut;
}



/* PULSE SHORT */
.codefx-pulseShort.code-slideNext .code-slideIn {
    -webkit-animation-name: roShortPullRightIn;
    animation-name: roShortPullRightIn;
}
.codefx-pulseShort.code-slideNext .code-slideOut {
    -webkit-animation-name: roShortPushRightOut;
    animation-name: roShortPushRightOut;
}

.codefx-pulseShort.code-slidePrev .code-slideIn {
    -webkit-animation-name: roShortPushLeftIn;
    animation-name: roShortPushLeftIn;
}
.codefx-pulseShort.code-slidePrev .code-slideOut {
    -webkit-animation-name: roShortPullLeftOut;
    animation-name: roShortPullLeftOut;
}



/* ROTATE SOFT */
.codefx-roSoft.code-slideNext .code-slideIn {
    -webkit-animation-name: slideLeftIn;
    animation-name: slideLeftIn;
}
.codefx-roSoft.code-slideNext .code-slideOut {
    -webkit-animation-name: roSoftRightOut;
    animation-name: roSoftRightOut;
}

.codefx-roSoft.code-slidePrev .code-slideIn {
    -webkit-animation-name: slideRightIn;
    animation-name: slideRightIn;
}
.codefx-roSoft.code-slidePrev .code-slideOut {
    -webkit-animation-name: roSoftLeftOut;
    animation-name: roSoftLeftOut;
}



/* ROTATE DEAL */
.codefx-roDeal.code-slideNext .code-slideIn {
    -webkit-animation-name: roSoftLeftIn;
    animation-name: roSoftLeftIn;
}
.codefx-roDeal.code-slideNext .code-slideOut {
    -webkit-animation-name: pullOut;
    animation-name: pullOut;
}

.codefx-roDeal.code-slidePrev .code-slideIn {
    -webkit-animation-name: roSoftRightIn;
    animation-name: roSoftRightIn;
}
.codefx-roDeal.code-slidePrev .code-slideOut {
    -webkit-animation-name: pullOut;
    animation-name: pullOut;
}


/* WHEEL HOR */
.codefx-wheelHor.code-slideNext .code-slideIn {
    -webkit-animation-name: roWheelLeftIn;
    animation-name: roWheelLeftIn;
}
.codefx-wheelHor.code-slideNext .code-slideOut {
    -webkit-animation-name: roWheelRightOut;
    animation-name: roWheelRightOut;
}

.codefx-wheelHor.code-slidePrev .code-slideIn {
    -webkit-animation-name: roWheelRightIn;
    animation-name: roWheelRightIn;
}
.codefx-wheelHor.code-slidePrev .code-slideOut {
    -webkit-animation-name: roWheelLeftOut;
    animation-name: roWheelLeftOut;
}


/* WHEEL VER */
.codefx-wheelVer.code-slideNext .code-slideIn {
    -webkit-animation-name: roWheelUpIn;
    animation-name: roWheelUpIn;
}
.codefx-wheelVer.code-slideNext .code-slideOut {
    -webkit-animation-name: roWheelDownOut;
    animation-name: roWheelDownOut;
}

.codefx-wheelVer.code-slidePrev .code-slideIn {
    -webkit-animation-name: roWheelDownIn;
    animation-name: roWheelDownIn;
}
.codefx-wheelVer.code-slidePrev .code-slideOut {
    -webkit-animation-name: roWheelUpOut;
    animation-name: roWheelUpOut;
}



/* SNAKE HOR */
.codefx-snakeHor.code-slideNext .code-slideIn {
    -webkit-animation-name: slideShakeLeftIn;
    animation-name: slideShakeLeftIn;
}
.codefx-snakeHor.code-slideNext .code-slideOut {
    -webkit-animation-name: slideShakeRightOut;
    animation-name: slideShakeRightOut;
}

.codefx-snakeHor.code-slidePrev .code-slideIn {
    -webkit-animation-name: slideShakeRightIn;
    animation-name: slideShakeRightIn;
}
.codefx-snakeHor.code-slidePrev .code-slideOut {
    -webkit-animation-name: slideShakeLeftOut;
    animation-name: slideShakeLeftOut;
}


/* SNAKE VER */
.codefx-snakeVer.code-slideNext .code-slideIn {
    -webkit-animation-name: slideShakeUpIn;
    animation-name: slideShakeUpIn;
}
.codefx-snakeVer.code-slideNext .code-slideOut {
    -webkit-animation-name: slideShakeDownOut;
    animation-name: slideShakeDownOut;
}

.codefx-snakeVer.code-slidePrev .code-slideIn {
    -webkit-animation-name: slideShakeDownIn;
    animation-name: slideShakeDownIn;
}
.codefx-snakeVer.code-slidePrev .code-slideOut {
    -webkit-animation-name: slideShakeUpOut;
    animation-name: slideShakeUpOut;
}



/* SHUFFLE */
.codefx-shuffle.code-slideNext .code-slideIn {
    -webkit-animation-name: fanFrontUp;
    animation-name: fanFrontUp;
}
.codefx-shuffle.code-slideNext .code-slideOut {
    -webkit-animation-name: fanBehindDown;
    animation-name: fanBehindDown;
}

.codefx-shuffle.code-slidePrev .code-slideIn {
    -webkit-animation-name: fanFrontDown;
    animation-name: fanFrontDown;
}
.codefx-shuffle.code-slidePrev .code-slideOut {
    -webkit-animation-name: fanBehindUp;
    animation-name: fanBehindUp;
}



/* BROWSE LEFT */
.codefx-browseLeft.code-slideNext .code-slideIn {
    -webkit-animation-name: pullBounceIn;
    animation-name: pullBounceIn;
}
.codefx-browseLeft.code-slideNext .code-slideOut {
    -webkit-animation-name: moveLeftBehind;
    animation-name: moveLeftBehind;
}

.codefx-browseLeft.code-slidePrev .code-slideIn {
    -webkit-animation-name: moveLeftFront;
    animation-name: moveLeftFront;
}
.codefx-browseLeft.code-slidePrev .code-slideOut {
    -webkit-animation-name: pullBounceOut;
    animation-name: pullBounceOut;
}


/* BROWSE RIGHT */
.codefx-browseRight.code-slideNext .code-slideIn {
    -webkit-animation-name: pullBounceIn;
    animation-name: pullBounceIn;
}
.codefx-browseRight.code-slideNext .code-slideOut {
    -webkit-animation-name: moveRightBehind;
    animation-name: moveRightBehind;
}

.codefx-browseRight.code-slidePrev .code-slideIn {
    -webkit-animation-name: moveRightFront;
    animation-name: moveRightFront;
}
.codefx-browseRight.code-slidePrev .code-slideOut {
    -webkit-animation-name: pullBounceOut;
    animation-name: pullBounceOut;
}



/* SLIDE BEHIND */
.codefx-slideBehind.code-slideNext .code-slideIn {
    -webkit-animation-name: moveShortRightFront;
    animation-name: moveShortRightFront;
}
.codefx-slideBehind.code-slideNext .code-slideOut {
    -webkit-animation-name: moveShortLeftBehind;
    animation-name: moveShortLeftBehind;
}

.codefx-slideBehind.code-slidePrev .code-slideIn {
    -webkit-animation-name: moveShortLeftFront;
    animation-name: moveShortLeftFront;
}
.codefx-slideBehind.code-slidePrev .code-slideOut {
    -webkit-animation-name: moveShortRightBehind;
    animation-name: moveShortRightBehind;
}



/* VACUUM HOR */
.codefx-vacuumHor.code-slideNext .code-slideIn {
    -webkit-animation-name: slideScaleRightIn;
    animation-name: slideScaleRightIn;
}
.codefx-vacuumHor.code-slideNext .code-slideOut {
    -webkit-animation-name: slideScaleLeftOut;
    animation-name: slideScaleLeftOut;
}

.codefx-vacuumHor.code-slidePrev .code-slideIn {
    -webkit-animation-name: slideScaleLeftIn;
    animation-name: slideScaleLeftIn;
}
.codefx-vacuumHor.code-slidePrev .code-slideOut {
    -webkit-animation-name: slideScaleRightOut;
    animation-name: slideScaleRightOut;
}



/* VACUUM VER */
.codefx-vacuumVer.code-slideNext .code-slideIn {
    -webkit-animation-name: slideScaleDownIn;
    animation-name: slideScaleDownIn;
}
.codefx-vacuumVer.code-slideNext .code-slideOut {
    -webkit-animation-name: slideScaleUpOut;
    animation-name: slideScaleUpOut;
}

.codefx-vacuumVer.code-slidePrev .code-slideIn {
    -webkit-animation-name: slideScaleUpIn;
    animation-name: slideScaleUpIn;
}
.codefx-vacuumVer.code-slidePrev .code-slideOut {
    -webkit-animation-name: slideScaleDownOut;
    animation-name: slideScaleDownOut;
}




/* Table of effect combination - ISSUE 3
============================================================== */
/* SCALE SOFT */
.codefx-scaleSoft.code-slideNext .code-slideIn {
    -webkit-animation-name: pullSoftIn;
    animation-name: pullSoftIn;
}
.codefx-scaleSoft.code-slideNext .code-slideOut {
    -webkit-animation-name: pushSoftOut;
    animation-name: pushSoftOut;
}

.codefx-scaleSoft.code-slidePrev .code-slideIn {
    -webkit-animation-name: pushSoftIn;
    animation-name: pushSoftIn;
}
.codefx-scaleSoft.code-slidePrev .code-slideOut {
    -webkit-animation-name: pullSoftOut;
    animation-name: pullSoftOut;
}



/* SNAP HOR */
.codefx-snapHor.code-slideNext .code-slideIn {
    -webkit-animation-name: slideRightIn;
    animation-name: slideRightIn;
}
.codefx-snapHor.code-slideNext .code-slideOut {
    -webkit-animation-name: slideShortLeftOut;
    animation-name: slideShortLeftOut;
}

.codefx-snapHor.code-slidePrev .code-slideIn {
    -webkit-animation-name: slideLeftIn;
    animation-name: slideLeftIn;
}
.codefx-snapHor.code-slidePrev .code-slideOut {
    -webkit-animation-name: slideShortRightOut;
    animation-name: slideShortRightOut;
}

/* SNAP VER */
.codefx-snapVer.code-slideNext .code-slideIn {
    -webkit-animation-name: slideDownIn;
    animation-name: slideDownIn;
}
.codefx-snapVer.code-slideNext .code-slideOut {
    -webkit-animation-name: slideShortUpOut;
    animation-name: slideShortUpOut;
}

.codefx-snapVer.code-slidePrev .code-slideIn {
    -webkit-animation-name: slideUpIn;
    animation-name: slideUpIn;
}
.codefx-snapVer.code-slidePrev .code-slideOut {
    -webkit-animation-name: slideShortDownOut;
    animation-name: slideShortDownOut;
}



/* LET IN HOR */
.codefx-letInHor.code-slideNext .code-slideIn {
    -webkit-animation-name: slideRightIn;
    animation-name: slideRightIn;
}
.codefx-letInHor.code-slideNext .code-slideOut {
    -webkit-animation-name: roEdgeSoftLeftOut;
    animation-name: roEdgeSoftLeftOut;
}

.codefx-letInHor.code-slidePrev .code-slideIn {
    -webkit-animation-name: slideLeftIn;
    animation-name: slideLeftIn;
}
.codefx-letInHor.code-slidePrev .code-slideOut {
    -webkit-animation-name: roEdgeSoftRightOut;
    animation-name: roEdgeSoftRightOut;
}

/* LET IN VER */
.codefx-letInVer.code-slideNext .code-slideIn {
    -webkit-animation-name: slideDownIn;
    animation-name: slideDownIn;
}
.codefx-letInVer.code-slideNext .code-slideOut {
    -webkit-animation-name: roEdgeSoftUpOut;
    animation-name: roEdgeSoftUpOut;
}

.codefx-letInVer.code-slidePrev .code-slideIn {
    -webkit-animation-name: slideUpIn;
    animation-name: slideUpIn;
}
.codefx-letInVer.code-slidePrev .code-slideOut {
    -webkit-animation-name: roEdgeSoftDownOut;
    animation-name: roEdgeSoftDownOut;
}



/* STICK HOR */
.codefx-stickHor.code-slideNext .code-slideIn {
    -webkit-animation-name: glueLeftIn;
    animation-name: glueLeftIn;
}
.codefx-stickHor.code-slideNext .code-slideOut {
    -webkit-animation-name: slideRightOut;
    animation-name: slideRightOut;
}
.codefx-stickHor.code-slidePrev .code-slideIn {
    -webkit-animation-name: glueRightIn;
    animation-name: glueRightIn;
}
.codefx-stickHor.code-slidePrev .code-slideOut {
    -webkit-animation-name: slideLeftOut;
    animation-name: slideLeftOut;
}

/* STICK VER */
.codefx-stickVer.code-slideNext .code-slideIn {
    -webkit-animation-name: glueUpIn;
    animation-name: glueUpIn;
}
.codefx-stickVer.code-slideNext .code-slideOut {
    -webkit-animation-name: slideDownOut;
    animation-name: slideDownOut;
}

.codefx-stickVer.code-slidePrev .code-slideIn {
    -webkit-animation-name: glueDownIn;
    animation-name: glueDownIn;
}
.codefx-stickVer.code-slidePrev .code-slideOut {
    -webkit-animation-name: slideUpOut;
    animation-name: slideUpOut;
}


/* GROWTH HOR */
.codefx-growthHor.code-slideNext .code-slideIn {
    -webkit-animation-name: soEdgeRightIn;
    animation-name: soEdgeRightIn;
}
.codefx-growthHor.code-slideNext .code-slideOut {
    -webkit-animation-name: pullSoftOut;
    animation-name: pullSoftOut;
}

.codefx-growthHor.code-slidePrev .code-slideIn {
    -webkit-animation-name: soEdgeLeftIn;
    animation-name: soEdgeLeftIn;
}
.codefx-growthHor.code-slidePrev .code-slideOut {
    -webkit-animation-name: pullSoftOut;
    animation-name: pullSoftOut;
}

/* GROWTH VER */
.codefx-growthVer.code-slideNext .code-slideIn {
    -webkit-animation-name: soEdgeDownIn;
    animation-name: soEdgeDownIn;
}
.codefx-growthVer.code-slideNext .code-slideOut {
    -webkit-animation-name: pullSoftOut;
    animation-name: pullSoftOut;
}

.codefx-growthVer.code-slidePrev .code-slideIn {
    -webkit-animation-name: soEdgeUpIn;
    animation-name: soEdgeUpIn;
}
.codefx-growthVer.code-slidePrev .code-slideOut {
    -webkit-animation-name: pullSoftOut;
    animation-name: pullSoftOut;
}



/* SCALE EDGE HOR */
.codefx-soEdgeHor.code-slideNext .code-slideIn {
    -webkit-animation-name: soEdgeRightIn;
    animation-name: soEdgeRightIn;
}
.codefx-soEdgeHor.code-slideNext .code-slideOut {
    -webkit-animation-name: soEdgeLeftOut;
    animation-name: soEdgeLeftOut;
}

.codefx-soEdgeHor.code-slidePrev .code-slideIn {
    -webkit-animation-name: soEdgeLeftIn;
    animation-name: soEdgeLeftIn;
}
.codefx-soEdgeHor.code-slidePrev .code-slideOut {
    -webkit-animation-name: soEdgeRightOut;
    animation-name: soEdgeRightOut;
}

/* SCALE EDGE VER */
.codefx-soEdgeVer.code-slideNext .code-slideIn {
    -webkit-animation-name: soEdgeDownIn;
    animation-name: soEdgeDownIn;
}
.codefx-soEdgeVer.code-slideNext .code-slideOut {
    -webkit-animation-name: soEdgeUpOut;
    animation-name: soEdgeUpOut;
}

.codefx-soEdgeVer.code-slidePrev .code-slideIn {
    -webkit-animation-name: soEdgeUpIn;
    animation-name: soEdgeUpIn;
}
.codefx-soEdgeVer.code-slidePrev .code-slideOut {
    -webkit-animation-name: soEdgeDownOut;
    animation-name: soEdgeDownOut;
}



/* SHAKE */
.codefx-shake .code-slideIn {
    -webkit-animation-name: shake;
    animation-name: shake;

    -webkit-animation-duration: .1s !important;
    animation-duration: .1s !important;

    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.codefx-shake .code-slideOut {
    -webkit-animation-name: slideDownOut;
    animation-name: slideDownOut;
}


/* TIN HOR */
.codefx-tinHor.code-slideNext .code-slideIn {
    -webkit-animation-name: slideTinRightIn;
    animation-name: slideTinRightIn;
}
.codefx-tinHor.code-slideNext .code-slideOut {
    -webkit-animation-name: slideLeftOut;
    animation-name: slideLeftOut;
}

.codefx-tinHor.code-slidePrev .code-slideIn {
    -webkit-animation-name: slideTinLeftIn;
    animation-name: slideTinLeftIn;
}
.codefx-tinHor.code-slidePrev .code-slideOut {
    -webkit-animation-name: slideRightOut;
    animation-name: slideRightOut;
}

/* TIN VER */
.codefx-tinVer.code-slideNext .code-slideIn {
    -webkit-animation-name: slideTinUpIn;
    animation-name: slideTinUpIn;
}
.codefx-tinVer.code-slideNext .code-slideOut {
    -webkit-animation-name: slideDownOut;
    animation-name: slideDownOut;
}

.codefx-tinVer.code-slidePrev .code-slideIn {
    -webkit-animation-name: slideTinDownIn;
    animation-name: slideTinDownIn;
}
.codefx-tinVer.code-slidePrev .code-slideOut {
    -webkit-animation-name: slideUpOut;
    animation-name: slideUpOut;
}