/**
 * cssanimation.css
 * Current Version: 1.0.3
 * https://www.cssanimatio.io
 * Created and maintained by: Pavel
 * Find me at: https://www.linkedin.com/in/yesiamrocks/
 * Email: hello@cssanimation.io
 * Github: https://github.com/yesiamrocks/cssanimation.io
 * Title: A CSS Animation Library for Developers and Ninjas
 * Copyright (c) 2017 Pavel
 * License: cssanimation.io is licensed under the MIT license
 **/
 .present .cssanimation,  .present .cssanimation span {
    animation-duration: 1s;
    animation-fill-mode: both;
}

 .present .cssanimation span { display: inline-block }
 .present .infinite { animation-iteration-count: infinite !important }

/*************************************************************
Striking
**************************************************************/
 .present .hu__hu__ { animation: hu__hu__ infinite 2s ease-in-out }
@keyframes hu__hu__ {
    50% { transform: translateY(30px) }
}

 .present .leSnake span { animation: leSnake 1.5s ease-in-out; animation-iteration-count: infinite }
@keyframes leSnake {
    from, to { transform: translateY(0px) }
    50% { transform: translateY(30px) }
}

 .present .lePeek span { animation-name: lePeek }
@keyframes lePeek {
    25% {  transform: rotateX(30deg) translateY(10px) rotate(-13deg); }
    50% { transform: translateY(-22px) rotate(3deg) scale(1.1);  }
}

 .present .effect3d { animation-name: effect3d }
@keyframes effect3d {
    to {
        text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, .1), 0 0 5px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .15)
    }
}

 .present .leRainDrop span { animation-name: leRainDrop; animation-iteration-count: infinite; }
@keyframes leRainDrop {
    0%, 25%, 55%, 75%, 87%, 97%, 100% { transform: scaleX(1.0) }
    26%, 56%, 76% { transform: scaleX(1.3) scaleY(0.8) }
    31%, 61%, 81% { transform: scaleX(0.8) scaleY(1.2) }
    76%, 88% { transform: scaleX(1.2) }
    98% { transform: scaleX(1.1) }
}

 .present .pepe { animation-name: pepe; animation-iteration-count: infinite }
@keyframes pepe {
    from, 33%, 66%, to { transform: rotate(4deg) }
    16%, 50%, 83% { transform: rotate(-4deg) }
}

 .present .leWaterWave span { animation: leWaterWave .2s linear infinite }
@keyframes leWaterWave {
    50% { transform: skewY(1deg) skewX(-1deg) scale(1.06) }
}

 .present .lightning { animation-name: lightning }
@keyframes lightning {
    from, 50%, to { opacity: 1 }
    25%, 75% { opacity: 0 }
}

 .present .leJoltZoom span { animation-name: leJoltZoom }
@keyframes leJoltZoom {
    10% { font-size: 140% }
    40% { font-size: 80% }
    100% { font-size: 100% }
}

 .present .typing {
    width: 473px;
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid #7E2EA0;
    animation: typing 2s steps(12, end), cursor .2s steps(12, end) infinite;
}
@keyframes typing {
    from { width: 0 }
}
@keyframes cursor {
    50% { border-color: transparent }
}

 .present .electricity { animation-name: electricity; animation-iteration-count: infinite }
@keyframes electricity {
    from, 37%, 67%, 85%, 93% { transform: translateY(30px) }
    4%, 64%, 88% { transform: translateY(10px) }
    8%, 24%, 32%, 44% { transform: translateY(5px) }
    12%, 52%, 60%, 20% { transform: translateY(10px) }
    16%, 40% { transform: translateY(5px) }
    28%, 56% { transform: translateY(10px) }
    48%, 72%, 80%, 96% { transform: translateY(30px) }
    76%, to { transform: translateY(40px) }
}

 .present .wipe {
    width: 473px;
    overflow: hidden;
    margin: 0 auto;
    display: inline-flex;
    animation-name: wipe;
}
@keyframes wipe {
    to { width: 0 }
}

 .present .open {
    width: 473px;
    margin: 0 auto;
    overflow: hidden;
    display: inline-flex;
    animation-name: open;
}
@keyframes open {
    from { width: 0 }
}

 .present .leMagnify span { animation-name: leMagnify }
@keyframes leMagnify {
    50% {
        transform: scale(1.8);
        letter-spacing: 26px
    }
}

 .present .leBeat span { animation-name: leBeat; }
@keyframes leBeat {
    14%, 42% { transform: scale(1.3) }
    28%, 70% { transform: scale(1) }
}

/*************************************************************
Letter Fade in
**************************************************************/
 .present .leFadeIn span { animation-name: leFadeIn }
@keyframes leFadeIn {
    from { opacity: 0 }
    to { opacity: 1 }
}

 .present .leFadeInLeft span { animation-name: leFadeInLeft }
@keyframes leFadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-60px);
    }
    to { opacity: 1 }
}

 .present .leFadeInRight span { animation-name: leFadeInRight }
@keyframes leFadeInRight {
    from {
        opacity: 0;
        transform: translateX(60px);
    }
    to { opacity: 1 }
}

 .present .leFadeInTop span { animation-name: leFadeInTop }
@keyframes leFadeInTop {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to { opacity: 1 }
}

 .present .leFadeInBottom span { animation-name: leFadeInBottom }
@keyframes leFadeInBottom {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to { opacity: 1 }
}

/************************************************************
Letter Fade Out
*************************************************************/
 .present .leFadeOut span { animation-name: leFadeOut }
@keyframes leFadeOut {
    to { opacity: 0 }
}

 .present .leFadeOutLeft span { animation-name: leFadeOutLeft }
@keyframes leFadeOutLeft {
    from { opacity: 1 }
    to {
        opacity: 0;
        transform: translateX(-60px);
    }
}

 .present .leFadeOutRight span { animation-name: leFadeOutRight }
@keyframes leFadeOutRight {
    from { opacity: 1 }
    to {
        opacity: 0;
        transform: translateX(60px);
    }
}

 .present .leFadeOutTop span { animation-name: leFadeOutTop }
@keyframes leFadeOutTop {
    from { opacity: 1 }
    to {
        opacity: 0;
        transform: translateY(-100%);
    }
}

 .present .leFadeOutBottom span { animation-name: leFadeOutBottom }
@keyframes leFadeOutBottom {
    from { opacity: 1 }
    to {
        opacity: 0;
        transform: translateY(100%);
    }
}

/*************************************************************
Moving Back
**************************************************************/
 .present .leMovingBackFromRight span { animation-name: leMovingBackFromRight; transform-origin: bottom }
@keyframes leMovingBackFromRight {
    40% { transform: rotate(45deg) }
    100% {
        transform: rotate(0deg);
        animation-timing-function: cubic-bezier(0,.9,.7,1.45)
    }
}

 .present .leMovingBackFromLeft span { animation-name: leMovingBackFromLeft; transform-origin: bottom }
@keyframes leMovingBackFromLeft {
    40% { transform: rotate(-45deg) }
    100% {
        transform: rotate(0deg);
        animation-timing-function: cubic-bezier(0,.9,.7,1.45)
    }
}

/*************************************************************
Kick out
**************************************************************/
 .present .leKickOutBehind span { animation-name: leKickOutFront; transform-origin: top }
@keyframes leKickOutFront {
    40% { transform: rotate(45deg) }
    100% {
        transform: rotate(0deg);
        animation-timing-function: cubic-bezier(0,.9,.7,1.45)
    }
}

 .present .leKickOutFront span { animation-name: leKickOutBehind; transform-origin: top }
@keyframes leKickOutBehind {
    40% { transform: rotate(-45deg) }
    100% {
        transform: rotate(0deg);
        animation-timing-function: cubic-bezier(0,.9,.7,1.45)
    }
}

/************************************************************
Letter Skate
*************************************************************/
 .present .leSkateX span { animation-name: leScaleX; animation-iteration-count: infinite }
@keyframes leScaleX {
    50% { transform: scaleX(0.4) }
}

 .present .leSkateY span { animation-name: leSkateY; animation-iteration-count: infinite }
@keyframes leSkateY {
    50% { transform: scaleY(0.4) }
}

 .present .leSkateXY span { animation-name: leSkateXY; animation-iteration-count: infinite; animation-duration: 1.5s; }
@keyframes leSkateXY {
    25% { transform: scale3d(1, 0.4, 0) }
    50% { transform: scale3d(0.4, 0.4, 1) }
    75% { transform: scale3d(0.4, 1, 1) }
}

/************************************************************
Letter Scale
*************************************************************/
 .present .leScaleXIn span { animation-name: leScaleXIn }
@keyframes leScaleXIn {
    from {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    50% { opacity: 1 }
}

 .present .leScaleXOut span { animation-name: leScaleXOut }
@keyframes leScaleXOut {
    to {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    from { opacity: 1 }
}

 .present .leScaleYIn span { animation-name: leScaleYIn }
@keyframes leScaleYIn {
    from {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
    50% { opacity: 1 }
}

 .present .leScaleYOut span { animation-name: leScaleYOut }
@keyframes leScaleYOut {
    to {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
    from { opacity: 1 }
}

/*************************************************************
Letter Jump
**************************************************************/
 .present .leJump span { animation-name: leJump; animation-iteration-count: infinite }
@keyframes leJump {
    to { transform: translateY(-20px) }
}

/*************************************************************
Letter Fly
**************************************************************/
 .present .leAboundTop span { animation-name: leAboundTop }
@keyframes leAboundTop {
    50% {
        transform: translateY(-100px);
        animation-timing-function: ease-in;
    }
}

 .present .leAboundBottom span { animation-name: leAboundBottom }
@keyframes leAboundBottom {
    50% {
        transform: translateY(100px);
        animation-timing-function: ease-in;
    }
}

 .present .leAboundLeft span { animation-name: leAboundLeft }
@keyframes leAboundLeft {
    50% {
        transform: translateX(-100px);
        animation-timing-function: ease-in
    }
}

 .present .leAboundRight span { animation-name: leAboundRight }
@keyframes leAboundRight {
    50% {
        transform: translateX(100px);
        animation-timing-function: ease-in
    }
}

/*************************************************************
Letter Fly In
**************************************************************/
 .present .leFlyInTop span { animation-name: leFlyInTop }
@keyframes leFlyInTop {
    0% {
        transform: translate(0px, -80px);
        opacity: 0
    }
    50% {
        transform: translate(10px, 50px);
        animation-timing-function: ease-in-out
    }
}

 .present .leFlyInLeft span { animation-name: leFlyInLeft; animation-timing-function: ease-in-out }
@keyframes leFlyInLeft {
    0% {
        transform: translate(-40px, 0px);
        opacity: 0;
    }
    50% { transform: translate(40px, 0px) }
}

 .present .leFlyInRight span { animation-name: leFlyInRight; animation-timing-function: ease-in-out }
@keyframes leFlyInRight {
    0% {
        transform: translate(40px, 0px);
        opacity: 0;
    }
    50% { transform: translate(-40px, 0px) }
}

 .present .leFlyInBottom span { animation-name: leFlyInBottom }
@keyframes leFlyInBottom {
    0% {
        transform: translate(0px, 80px);
        opacity: 0
    }
    50% {
        transform: translate(10px, -50px);
        animation-timing-function: ease-in-out
    }
}

/*************************************************************
Letter Fly Out
**************************************************************/
 .present .leFlyOutTop span { animation-name: leFlyOutTop }
@keyframes leFlyOutTop {
    50% { transform: translate(0px, 50px) }
    to {
        transform: translate(0px, -100px);
        opacity: 0;
    }
}

 .present .leFlyOutLeft span { animation-name: leFlyOutLeft; animation-timing-function: ease-in-out }
@keyframes leFlyOutLeft {
    50% { transform: translate(40px, 0px) }
    to {
        transform: translate(-100px, 0px);
        opacity: 0;
    }
}

 .present .leFlyOutRight span { animation-name: leFlyOutRight; animation-timing-function: ease-in-out }
@keyframes leFlyOutRight {
    50% { transform: translate(-40px, 0px) }
    to {
        transform: translate(100px, 0px);
        opacity: 0;
    }
}

 .present .leFlyOutBottom span { animation-name: leFlyOutBottom }
@keyframes leFlyOutBottom {
    50% { transform: translate(0px, -40px) }
    to {
        transform: translate(0px, 100px);
        opacity: 0;
    }
}

/*************************************************************
Letter Door Open & Close
**************************************************************/
 .present .leDoorCloseLeft span { animation-name: leDoorCloseLeft }
@keyframes leDoorCloseLeft {
    from, to {
        transform: perspective(400px);
        transform-origin: left
    }
    from {
        transform: rotateY(90deg);
        opacity: 0;
    }
    to { opacity: 1 }
}

 .present .leDoorOpenRight span { animation-name: leDoorOpenRight }
@keyframes leDoorOpenRight {
    from, to {
        transform: perspective(400px);
        transform-origin: left
    }
    to {
        transform: rotateY(90deg);
        opacity: 0
    }
}

 .present .leDoorCloseRight span { animation-name: leDoorCloseRight }
@keyframes leDoorCloseRight {
    from, to {
        transform: perspective(400px);
        transform-origin: right
    }
    from {
        transform: rotateY(-90deg);
        opacity: 0
    }
    to { opacity: 1 }
}

 .present .leDoorOpenLeft span { animation-name: leDoorOpenLeft }
@keyframes leDoorOpenLeft {
    from, to {
        transform: perspective(400px);
        transform-origin: right
    }
    to {
        transform: rotateY(-90deg);
        opacity: 0
    }
}

/*************************************************************
Letter Hang And Drop
**************************************************************/
 .present .leHangAndDropLeft span { animation-name: leHangAndDropLeft }
@keyframes leHangAndDropLeft {
    from { transform-origin: left }
    50% {
        transform: rotate(100deg);
        transform-origin: left
    }
    60% {
        transform: rotate(90deg);
        transform-origin: left
    }
    to {
        transform: translateY(800px) rotate(70deg);
        transform-origin: left
    }
}

 .present .leHangAndDropRight span { animation-name: leHangAndDropRight }
@keyframes leHangAndDropRight {
    from { transform-origin: right }
    50% {
        transform: rotate(-100deg);
        transform-origin: right;
    }
    60% {
        transform: rotate(-90deg);
        transform-origin: right;
    }
    to {
        transform: translateY(800px) rotate(-70deg);
        transform-origin: right;
    }
}

/*************************************************************
Letter Shake
**************************************************************/
 .present .leRencontre span { animation: leRencontre .4s; animation-iteration-count: infinite }
@keyframes leRencontre {
    0%, 33%, 100% {
        transform-origin: bottom;
        animation-timing-function: cubic-bezier(.17,.67,.79,1.83)
    }
    33% { transform: translateY(-2px) rotate(-3deg) }
    66% { transform: translateY(2px) rotate(3deg) }
}

 .present .lePulseShake span { animation-name: lePulseShake; animation-iteration-count: infinite }
@keyframes lePulseShake {
    90% { transform: scale(1) }
    92% { transform: scale(1.2) }
    96% { transform: scale(1, 1) }
    98% { transform: scale(1.1) }
}

 .present .leHorizontalShake span { animation-name: leHorizontalShake; animation-iteration-count: infinite }
@keyframes leHorizontalShake {
    3%, 12%, 21%, 30%, 39%, 48%, 57%, 65%, 74%, 3%, 92% { transform: translateX(5px) }
    6%, 15%, 24%, 33%, 42%, 51%, 60%, 68%, 77%, 86%, 95% { transform: translateX(3px) }
    9%, 18%, 27%, 36%, 45%, 54%, 63%, 71%, 80%, 89%, 98% { transform: translateX(-5px) }
}

 .present .leVerticalShake span { animation-name: leVerticalShake; animation-iteration-count: infinite }
@keyframes leVerticalShake {
    3%, 12%, 21%, 30%, 39%, 48%, 57%, 65%, 74%, 83%, 92% { transform: translateY(5px) }
    6%, 15%, 24%, 33%, 42%, 51%, 60%, 68%, 77%, 86%, 95% { transform: translateY(3px) }
    9%, 18%, 27%, 36%, 45%, 54%, 63%, 71%, 80%, 89%, 98% { transform: translateY(-5px) }
}

 .present .leMadMax span { animation-name: leMadMax; animation-iteration-count: infinite }
@keyframes leMadMax {
    3%, 12%, 21%, 30%, 39%, 48%, 57%, 65%, 74%, 83%, 92% { transform: translateY(5px) scale(1.1) }
    6%, 15%, 24%, 33%, 42%, 51%, 60%, 68%, 77%, 86%, 95% { transform: translateY(3px) scale(.8) }
    9%, 18%, 27%, 36%, 45%, 54%, 63%, 71%, 80%, 89%, 98% { transform: translateY(-5px) scale(1.1) }
}

 .present .leHorizontalTremble span { animation-name: leHorizontalTremble; animation-iteration-count: infinite }
@keyframes leHorizontalTremble {
    3%, 21%, 39%, 57%, 74%, 92% { transform: translateX(5px) }
    6%, 24%, 42%, 60%, 77%, 95% { transform: translateX(3px) }
    9%, 27%, 45%, 63%, 80%, 98% { transform: translateX(-5px) }
}

 .present .leVerticalTremble span { animation-name: leVerticalTremble; animation-iteration-count: infinite }
@keyframes leVerticalTremble {
    3%, 21%, 39%, 57%, 74%, 92% { transform: translateY(5px) }
    6%, 24%, 42%, 60%, 77%, 95% { transform: translateY(3px) }
    9%, 27%, 45%, 63%, 80%, 98% { transform: translateY(-5px) }
}

 .present .leCrazyCool span { animation-name: leCrazyCool; animation-iteration-count: infinite }
@keyframes leCrazyCool {
    3%, 21%, 39%, 57%, 74%, 92% { transform: translateY(5px) scale(1.1) }
    6%, 24%, 42%, 60%, 77%, 95% { transform: translateY(3px) scale(.8) }
    9%, 27%, 45%, 63%, 80%, 98% { transform: translateY(-5px) scale(1.1) }
}

 .present .leVibration span { animation: leVibration .1s linear infinite }
@keyframes leVibration {
    50% { transform: skewY(1deg) skewX(-1deg) scale(1.06) }
}

/*************************************************************
Letter Push Release
**************************************************************/
 .present .lePushReleaseFrom span { animation-name: lePushReleaseFrom }
@keyframes lePushReleaseFrom {
    from {
        transform: scale(3, 3);
        opacity: 0;
    }
    50% { transform: scale(.5, .5) }
}

 .present .lePushReleaseFromLeft span { animation-name: lePushReleaseFromLeft }
@keyframes lePushReleaseFromLeft {
    from {
        transform: translateX(-100%);
        opacity: 0
    }
    30% { transform: translateX(100px) }
}

 .present .lePushReleaseFromTop span { animation-name: lePushReleaseFromTop }
@keyframes lePushReleaseFromTop {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    30% { transform: translateY(100px) }
}

 .present .lePushReleaseFromBottom span { animation-name: lePushReleaseFromBottom }
@keyframes lePushReleaseFromBottom {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    30% { transform: translateY(-100px) }
}

 .present .lePushReleaseTo span { animation-name: lePushReleaseTo }
@keyframes lePushReleaseTo {
    30% { transform: scale(.5, .5) }
    to {
        transform: scale(5, 5);
        opacity: 0;
    }
}

 .present .lePushReleaseToTop span { animation-name: lePushReleaseToTop }
@keyframes lePushReleaseToTop {
    30% { transform: translateY(100px) }
    to {
        transform: translateY(-100%);
        opacity: 0
    }
}

 .present .lePushReleaseToBottom span { animation-name: lePushReleaseToBottom }
@keyframes lePushReleaseToBottom {
    30% { transform: translateY(-100px) }
    to {
        transform: translateY(100%);
        opacity: 0
    }
}

/*************************************************************
Letter Flip
**************************************************************/
 .present .leFlipInTop span { animation-name: leFlipInTop }
@keyframes leFlipInTop {
    from {
        transform: perspective(600px);
        opacity: 0
    }
    30% {
        transform: perspective(600px) rotateX(180deg);
        transform-origin: 0 0;
        animation-timing-function: ease-out;
    }
    to { transform: perspective(600px) }
}

 .present .leFlipOutTop span { animation-name: leFlipOutTop }
@keyframes leFlipOutTop {
    to {
        transform: perspective(600px);
        opacity: 0
    }
    70% {
        transform: perspective(600px) rotateX(180deg);
        transform-origin: 0 0;
        animation-timing-function: ease-out;
    }
    to { transform: perspective(600px) }
}

 .present .leFlipInBottom span { animation-name: leFlipInBottom }
@keyframes leFlipInBottom {
    from {
        transform: perspective(600px);
        opacity: 0
    }
    30% {
        transform: perspective(600px) rotateX(180deg);
        transform-origin: bottom;
        animation-timing-function: ease-out;
    }
    to { transform: perspective(600px) }
}

 .present .leFlipOutBottom span { animation-name: leFlipOutBottom }
@keyframes leFlipOutBottom {
    to {
        transform: perspective(600px);
        opacity: 0
    }
    70% {
        transform: perspective(600px) rotateX(180deg);
        transform-origin: bottom;
        animation-timing-function: ease-out;
    }
    to { transform: perspective(600px) }
}

/*************************************************************
Letter Elevate
**************************************************************/
 .present .leElevateLeft span { animation-name: leElevateLeft }
@keyframes leElevateLeft {
    from {
        transform: translateY(100%) rotate(-20deg);
        transform-origin: right;
        opacity: 0;
    }
    40% {
        transform: rotate(20deg);
        transform-origin: right;
    }
    65% {
        transform: rotate(0deg);
        transform-origin: right;
    }
}

 .present .leElevateRight span { animation-name: leElevateRight }
@keyframes leElevateRight {
    from {
        transform: translateY(100%) rotate(20deg);
        transform-origin: left;
        opacity: 0;
    }
    40% {
        transform: rotate(-20deg);
        transform-origin: left;
    }
    65% {
        transform: rotate(0deg);
        transform-origin: left;
    }
}

/*************************************************************
Letter Roll From
**************************************************************/
 .present .leRollFromLeft span { animation-name: leRollFromLeft }
@keyframes leRollFromLeft {
    from {
        transform: translateX(-60px) perspective(600px) rotateY(180deg);
        opacity: 0
    }
}

 .present .leRollFromRight span { animation-name: leRollFromRight }
@keyframes leRollFromRight {
    from {
        transform: translateX(60px) perspective(600px) rotateY(-180deg);
        opacity: 0
    }
}

 .present .leRollFromTop span { animation-name: leRollFromTop }
@keyframes leRollFromTop {
    from {
        transform: translateY(-60px) perspective(600px) rotateX(180deg);
        opacity: 0
    }
}

 .present .leRollFromBottom span { animation-name: leRollFromBottom }
@keyframes leRollFromBottom {
    from {
        transform: translateY(60px) perspective(600px) rotateX(-180deg);
        opacity: 0
    }
}

/*************************************************************
Letter Roll To
**************************************************************/
 .present .leRollToLeft span { animation-name: leRollToLeft }
@keyframes leRollToLeft {
    to {
        transform: translateX(-60px) perspective(600px) rotateY(180deg);
        opacity: 0
    }
}

 .present .leRollToRight span { animation-name: leRollToRight }
@keyframes leRollToRight {
    to {
        transform: translateX(60px) perspective(600px) rotateY(-180deg);
        opacity: 0
    }
}

 .present .leRollToTop span { animation-name: leRollToTop }
@keyframes leRollToTop {
    to {
        transform: translateY(-60px) perspective(600px) rotateX(180deg);
        opacity: 0
    }
}

 .present .leRollToBottom span { animation-name: leRollToBottom }
@keyframes leRollToBottom {
    to {
        transform: translateY(60px) perspective(600px) rotateX(-180deg);
        opacity: 0
    }
}

/*************************************************************
Letter Rotate In skate
**************************************************************/
 .present .leRotateSkateInRight span { animation-name: leRotateSkateInRight }
@keyframes leRotateSkateInRight {
    from {
        transform: scaleX(0.2) translateX(100px);
        opacity: 0;
    }
}

 .present .leRotateSkateInLeft span { animation-name: leRotateSkateInLeft }
@keyframes leRotateSkateInLeft {
    from {
        transform: scaleX(0.2) translateX(-100px);
        opacity: 0;
    }
}

 .present .leRotateSkateInTop span { animation-name: leRotateSkateInTop }
@keyframes leRotateSkateInTop {
    from {
        transform: scaleY(0.2) translateY(-100px);
        opacity: 0;
    }
}

 .present .leRotateSkateInBottom span { animation-name: leRotateSkateInBottom }
@keyframes leRotateSkateInBottom {
    from {
        transform: scaleY(0.2) translateY(100px);
        opacity: 0;
    }
}

/*************************************************************
Letter Rotate Out skate
**************************************************************/
 .present .leRotateSkateOutRight span { animation-name: leRotateSkateOutRight }
@keyframes leRotateSkateOutRight {
    to {
        transform: scaleX(0.2) translateX(100px);
        opacity: 0;
    }
}

 .present .leRotateSkateOutLeft span { animation-name: leRotateSkateOutLeft }
@keyframes leRotateSkateOutLeft {
    to {
        transform: scaleX(0.2) translateX(-100px);
        opacity: 0;
    }
}

 .present .leRotateSkateOutTop span { animation-name: leRotateSkateOutTop }
@keyframes leRotateSkateOutTop {
    to {
        transform: scaleY(0.2) translateY(-100px);
        opacity: 0;
    }
}

 .present .leRotateSkateOutBottom span { animation-name: leRotateSkateOutBottom }
@keyframes leRotateSkateOutBottom {
    to {
        transform: scaleY(0.2) translateY(100px);
        opacity: 0;
    }
}

/*************************************************************
Letter Rotation
**************************************************************/
 .present .leRotateXZoomIn span { animation-name: leRotateXZoomIn }
@keyframes leRotateXZoomIn {
    from {
        transform: perspective(600px) translate3d(0, -60px, -2000px) rotateX(75deg);
        opacity: 0
    }
    5% { transform: perspective(600px) translate3d(0, -60px, -1500px) rotateX(75deg) }
}

 .present .leRotateXZoomOut span { animation-name: leRotateXZoomOut }
@keyframes leRotateXZoomOut {
    95% { transform: perspective(600px) translate3d(0, -60px, -1500px) rotateX(75deg) }
    to {
        transform: perspective(600px) translate3d(0, -60px, -2000px) rotateX(75deg);
        opacity: 0
    }
}

 .present .leRotateYZoomIn span { animation-name: leRotateYZoomIn }
@keyframes leRotateYZoomIn {
    from {
        transform: perspective(600px) translate3d(0, -60px, -2000px) rotateY(75deg);
        opacity: 0
    }
    5% { transform: perspective(600px) translate3d(0, -60px, -1500px) rotateY(75deg) }
}

 .present .leRotateYZoomOut span { animation-name: leRotateYZoomOut }
@keyframes leRotateYZoomOut {
    95% { transform: perspective(600px) translate3d(0, -60px, -1500px) rotateY(75deg) }
    to {
        transform: perspective(600px) translate3d(0, -60px, -2000px) rotateY(75deg);
        opacity: 0;
    }
}

/*************************************************************
Letter Rotate
**************************************************************/

 .present .leRotateIn span { animation-name: leRotateIn }
@keyframes leRotateIn {
    from {
        transform: rotate(-180deg);
        opacity: 0;
    }
    to { opacity: 1 }
}

 .present .leRotateOut span { animation-name: leRotateOut }
@keyframes leRotateOut {
    from { opacity: 1 }
    to {
        transform: rotate(180deg);
        opacity: 0;
    }
}

 .present .leRotateInLeft span { animation-name: leRotateInLeft }
@keyframes leRotateInLeft {
    from {
        transform: rotate(-180deg) translateX(150px);
        opacity: 0;
    }
    to { opacity: 1 }
}

 .present .leRotateOutLeft span { animation-name: leRotateOutLeft }
@keyframes leRotateOutLeft {
    from { opacity: 1 }
    to {
        transform: rotate(180deg) translateX(150px);
        opacity: 0;
    }
}

 .present .leRotateInRight span { animation-name: leRotateInRight }
@keyframes leRotateInRight {
    from {
        transform: rotate(-180deg) translateX(-150px);
        opacity: 0;
    }
    to { opacity: 1 }
}

 .present .leRotateOutRight span { animation-name: leRotateOutRight }
@keyframes leRotateOutRight {
    from { opacity: 1 }
    to {
        transform: rotate(180deg) translateX(-150px);
        opacity: 0;
    }
}

/*************************************************************
Letter Spin
**************************************************************/
 .present .leSpinInLeft span { animation-name: leSpinInLeft }
@keyframes leSpinInLeft {
    from, to { transform-origin: left bottom }
    from {
        transform: rotate(90deg);
        opacity: 0;
    }
}

 .present .leSpinInRight span { animation-name: leSpinInRight }
@keyframes leSpinInRight {
    from, to { transform-origin: right bottom }
    from {
        transform: rotate(-90deg);
        opacity: 0;
    }
}

 .present .leSpinOutLeft span { animation-name: leSpinOutLeft }
@keyframes leSpinOutLeft {
    from, to { transform-origin: left bottom }
    to {
        transform: rotate(90deg);
        opacity: 0;
    }
}

 .present .leSpinOutRight span { animation-name: leSpinOutRight }
@keyframes leSpinOutRight {
    from, to { transform-origin: right bottom }
    to {
        transform: rotate(-90deg);
        opacity: 0;
    }
}

/*************************************************************
Letter Blur In
**************************************************************/
 .present .leBlurIn span { animation-name: leBlurIn }
@keyframes leBlurIn {
    from {
        transform: scaleX(0.2);
        filter: blur(20px);
        opacity: 0;
    }
}

 .present .leBlurInRight span { animation-name: leBlurInRight }
@keyframes leBlurInRight {
    from {
        transform: scaleX(0.2) translateX(100px);
        filter: blur(20px);
        opacity: 0;
    }
}

 .present .leBlurInLeft span { animation-name: leBlurInLeft }
@keyframes leBlurInLeft {
    from {
        transform: scaleX(0.2) translateX(-100px);
        filter: blur(20px);
        opacity: 0;
    }
}

 .present .leBlurInTop span { animation-name: leBlurInTop }
@keyframes leBlurInTop {
    from {
        transform: scaleY(0.2) translateY(-100px);
        filter: blur(20px);
        opacity: 0;
    }
}

 .present .leBlurInBottom span { animation-name: leBlurInBottom }
@keyframes leBlurInBottom {
    from {
        transform: scaleY(0.2) translateY(100px);
        filter: blur(20px);
        opacity: 0;
    }
}

/*************************************************************
Letter Blur Out
**************************************************************/
 .present .leBlurOut span { animation-name: leBlurOut }
@keyframes leBlurOut {
    to {
        transform: scaleX(0.2);
        filter: blur(20px);
        opacity: 0;
    }
}

 .present .leBlurOutRight span { animation-name: leBlurOutRight }
@keyframes leBlurOutRight {
    to {
        transform: scaleX(0.2) translateX(100px);
        filter: blur(20px);
        opacity: 0;
    }
}

 .present .leBlurOutLeft span { animation-name: leBlurOutLeft }
@keyframes leBlurOutLeft {
    to {
        transform: scaleX(0.2) translateX(-100px);
        filter: blur(20px);
        opacity: 0;
    }
}

 .present .leBlurOutTop span { animation-name: leBlurOutTop }
@keyframes leBlurOutTop {
    to {
        transform: scaleY(0.2) translateY(-100px);
        filter: blur(20px);
        opacity: 0;
    }
}

 .present .leBlurOutBottom span { animation-name: leBlurOutBottom }
@keyframes leBlurOutBottom {
    to {
        transform: scaleY(0.2) translateY(100px);
        filter: blur(20px);
        opacity: 0;
    }
}

/*************************************************************
Letter Pop Up
**************************************************************/
 .present .lePopUp span { animation-name: lePopUp }
@keyframes lePopUp {
    50% { transform: scale(1.5) }
}

 .present .lePopUpLeft span { animation-name: lePopUpLeft }
@keyframes lePopUpLeft {
    50% {
        transform: translateX(-50px) scale(1.5);
        animation-timing-function: ease-in;
    }
}

 .present .lePopUpRight span { animation-name: lePopUpRight }
@keyframes lePopUpRight {
    50% {
        transform: translateX(50px) scale(1.5);
        animation-timing-function: ease-in;
    }
}

/*************************************************************
Letter Pop Out
**************************************************************/

 .present .lePopOut span { animation-name: lePopOut }
@keyframes lePopOut {
    50% { transform: scale(.5) }
}

 .present .lePopOutLeft span { animation-name: lePopOutLeft }
@keyframes lePopOutLeft {
    50% {
        transform: translateX(-50px) scale(.5);
        animation-timing-function: ease-in;
    }
}

 .present .lePopOutRight span { animation-name: lePopOutRight }
@keyframes lePopOutRight {
    50% {
        transform: translateX(50px) scale(.5);
        animation-timing-function: ease-in;
    }
}

/*************************************************************
Letter Bouncing
**************************************************************/
 .present .leBounceFromTop span { animation-name: leBounceFromTop }
@keyframes leBounceFromTop {
    0%, 25%, 55%, 85%, 100% {
        animation-timing-function: ease-out;
        transform: translate3d(0, 0, 0);
    }
    41%, 44% {
        animation-timing-function: ease-in;
        transform: translate3d(0, -80px, 0) scale3d(1, 1.2, 1);
    }
    70% {
        animation-timing-function: ease-in;
        transform: translate3d(0, -20px, 0);
    }
    90% { transform: translate3d(0, -4px, 0) }
}

 .present .leBounceFromDown span { animation-name: leBounceFromDown }
@keyframes leBounceFromDown {
    0%, 25%, 55%, 85%, 100% {
        animation-timing-function: ease-out;
        transform: translate3d(0, 0, 0);
    }
    41%, 44% {
        animation-timing-function: ease-in;
        transform: translate3d(0, 80px, 0) scale3d(1, 1.2, 1);
    }
    70% {
        animation-timing-function: ease-in;
        transform: translate3d(0, 20px, 0);
    }
    90% { transform: translate3d(0, 4px, 0) }
}

 .present .leBounceY span { animation-name: leBounceY }
@keyframes leBounceY {
    0%, 25%, 55%, 85%, 100% {
        animation-timing-function: ease-out;
        transform: scale3d(1, 1, 1);
    }
    41%, 44% {
        animation-timing-function: ease-in;
        transform: scale3d(1, 2, 1);
    }
    70% {
        animation-timing-function: ease-in;
        transform: scale3d(1, 1.5, 1);
    }
    90% { transform: scale3d(1, 1.1, 1) }
}

 .present .leBounceZoomIn span { animation-name: leBounceZoomIn }
@keyframes leBounceZoomIn {
    0%, 25%, 55%, 85%, 100% {
        animation-timing-function: ease-out;
        transform: scale(1);
    }
    41%, 44% {
        animation-timing-function: ease-in;
        transform: scale(1.7);
    }
    70% {
        animation-timing-function: ease-in;
        transform: scale(1.9);
    }
    90% { transform: scale(1.1) }
}

 .present .leBounceZoomOut span { animation-name: leBounceZoomOut }
@keyframes leBounceZoomOut {
    0%, 25%, 55%, 85%, 100% {
        animation-timing-function: ease-out;
        transform: scale(1);
    }
    41%, 44% {
        animation-timing-function: ease-in;
        transform: scale(.5);
    }
    70% {
        animation-timing-function: ease-in;
        transform: scale(.7);
    }
    90% { transform: scale(.9) }
}

/*************************************************************
Letter Perspective
**************************************************************/
 .present .lePerspectiveOutTop span { animation-name: lePerspectiveOutTop; transform: perspective(500px); transform-style: preserve-3d }
@keyframes lePerspectiveOutTop {
    50% { opacity: 1 }
    to {
        transform: perspective(500px) rotateX(90deg) translateY(-50px) translateZ(50px);
        opacity: 0;
    }
}

 .present .lePerspectiveOutBottom span { animation-name: lePerspectiveOutBottom; transform: perspective(500px); transform-style: preserve-3d }
@keyframes lePerspectiveOutBottom {
    50% { opacity: 1 }
    to {
        transform: perspective(500px) rotateX(90deg) translateY(50px) translateZ(-50px);
        opacity: 0;
    }
}

/*************************************************************
Letter Zoom In
**************************************************************/

 .present .leZoomIn span { animation-name: leZoomIn }
@keyframes leZoomIn {
    from {
        transform: scale(10);
        opacity: 0;
    }
}

 .present .leZoomInLeft span { animation-name: leZoomInLeft }
@keyframes leZoomInLeft {
    from {
        transform: scale(10) translateX(-150%);
        opacity: 0;
    }
}

 .present .leZoomInRight span { animation-name: leZoomInRight }
@keyframes leZoomInRight {
    from {
        transform: scale(10) translateX(150%);
        opacity: 0;
    }
}

 .present .leZoomInTop span { animation-name: LetterZoomInTop }
@keyframes LetterZoomInTop {
    from {
        transform: scale(10) translateY(-50%);
        opacity: 0;
    }
}

 .present .leZoomInBottom span { animation-name: leZoomInBottom }
@keyframes leZoomInBottom {
    from {
        transform: scale(10) translateY(50%);
        opacity: 0;
    }
}

/*************************************************************
Letter Zoom Out
**************************************************************/
 .present .leZoomOut span { animation-name: leZoomOut }
@keyframes leZoomOut {
    to {
        transform: scale(10);
        opacity: 0;
    }
}

 .present .leZoomOutLeft span { animation-name: leZoomOutLeft }
@keyframes leZoomOutLeft {
    to {
        transform: scale(10) translateX(-150%);
        opacity: 0;
    }
}

 .present .leZoomOutRight span { animation-name: leZoomOutRight }
@keyframes leZoomOutRight {
    to {
        transform: scale(10) translateX(150%);
        opacity: 0;
    }
}

 .present .leZoomOutTop span { animation-name: leZoomOutTop }
@keyframes leZoomOutTop {
    to {
        transform: scale(10) translateY(-50%);
        opacity: 0;
    }
}

 .present .leZoomOutBottom span { animation-name: leZoomOutBottom }
@keyframes leZoomOutBottom {
    to {
        transform: scale(10) translateY(50%);
        opacity: 0;
    }
}

/*************************************************************
Letter Dance In
**************************************************************/
 .present .leDanceInTop span { animation-name: leDanceInTop; transform-origin: top }
@keyframes leDanceInTop {
    from { opacity: 0 }
    16% { transform: skew(-14deg) }
    33% { transform: skew(12deg) }
    49% { transform: skew(-8deg) }
    66% { transform: skew(6deg) }
    83% { transform: skew(-4deg) }
}

 .present .leDanceInMiddle span { animation-name: leDanceInMiddle }
@keyframes leDanceInMiddle {
    from { opacity: 0 }
    16% { transform: skew(-14deg) }
    33% { transform: skew(12deg) }
    49% { transform: skew(-8deg) }
    66% { transform: skew(6deg) }
    83% { transform: skew(-4deg) }
}

 .present .leDanceInBottom span { animation-name: leDanceInBottom; transform-origin: bottom }
@keyframes leDanceInBottom {
    from { opacity: 0 }
    16% { transform: skew(-14deg) }
    33% { transform: skew(12deg) }
    49% { transform: skew(-8deg) }
    66% { transform: skew(6deg) }
    83% { transform: skew(-4deg) }
}

/*************************************************************
Letter Dance Out
**************************************************************/
 .present .leDanceOutTop span { animation-name: leDanceOutTop; transform-origin: top }
@keyframes leDanceOutTop {
    16% { transform: skew(-14deg) }
    33% { transform: skew(12deg) }
    49% { transform: skew(-8deg) }
    66% { transform: skew(6deg) }
    83% { transform: skew(-4deg) }
    to { opacity: 0 }
}

 .present .leDanceOutMiddle span { animation-name: leDanceOutMiddle }
@keyframes leDanceOutMiddle {
    16% { transform: skew(-14deg) }
    33% { transform: skew(12deg) }
    49% { transform: skew(-8deg) }
    66% { transform: skew(6deg) }
    83% { transform: skew(-4deg) }
    to { opacity: 0 }
}

 .present .leDanceOutBottom span { animation-name: leDanceOutBottom; transform-origin: bottom }
@keyframes leDanceOutBottom {
    16% { transform: skew(-14deg) }
    33% { transform: skew(12deg) }
    49% { transform: skew(-8deg) }
    66% { transform: skew(6deg) }
    83% { transform: skew(-4deg) }
    to { opacity: 0 }
}

/*************************************************************
One After One Fade in
**************************************************************/
 .present .oaoFadeIn span:nth-child(even) { animation-name: leoaoFadeInTop; animation-duration: .7s; animation-timing-function: ease-out; }
@keyframes leoaoFadeInTop {
    from {
        transform: translateY(-100px);
        opacity: 0;
    }
}
 .present .oaoFadeIn span:nth-child(odd) { animation-name: leoaoFadeInBottom; animation-duration: .7s; animation-timing-function: ease-out;  }
@keyframes leoaoFadeInBottom {
    from {
        transform: translateY(100px);
        opacity: 0;
    }
}

 .present .oaoFadeOut span:nth-child(even) { animation-name: leoaoFadeOutop; animation-duration: .7s; animation-timing-function: ease-in; }
@keyframes leoaoFadeOutop {
    to {
        transform: translateY(-100px);
        opacity: 0;
    }
}
 .present .oaoFadeOut span:nth-child(odd) { animation-name: leoaoFadeOutBottom; animation-duration: .7s; animation-timing-function: ease-in;  }
@keyframes leoaoFadeOutBottom {
    to {
        transform: translateY(100%);
        opacity: 0;
    }
}

 .present .oaoFlyIn span:nth-child(even) { animation-name: leoaoFlyInTop }
@keyframes leoaoFlyInTop {
    0% {
        transform: translateY(80px);
        opacity: 0
    }
    50% {
        transform: translateY(-50px);
        animation-timing-function: ease-out
    }
}
 .present .oaoFlyIn span:nth-child(odd) { animation-name: leoaoFlyInBottom }
@keyframes leoaoFlyInBottom {
    0% {
        transform: translateY(-80px);
        opacity: 0
    }
    50% {
        transform: translateY(50px);
        animation-timing-function: ease-out
    }
}


 .present .oaoFlyOut span:nth-child(even) { animation-name: leoaoFlyOutTop }
@keyframes leoaoFlyOutTop {
    30% {
        transform: translateY(80px);
        animation-timing-function: ease-out
    }
    80% {
        transform: translateY(-50px);
        animation-timing-function: ease-out
    }
    to { opacity: 0 }
}
 .present .oaoFlyOut span:nth-child(odd) { animation-name: leoaoFlyOutBottom }
@keyframes leoaoFlyOutBottom {
    30% {
        transform: translateY(-80px);
        animation-timing-function: ease-out
    }
    80% {
        transform: translateY(50px);
        animation-timing-function: ease-out
    }
    to { opacity: 0 }
}

 .present .oaoRotateIn span:nth-child(even) { animation-name: oaoRotateInTop }
@keyframes oaoRotateInTop {
    from {
        transform: translateY(-100px) rotate(360deg);
        opacity: 0;
    }
}
 .present .oaoRotateIn span:nth-child(odd) { animation-name: oaoRotateInBottom }
@keyframes oaoRotateInBottom {
    from {
        transform: translateY(100px) rotate(360deg);
        opacity: 0;
    }
}
 .present .oaoRotateOut span:nth-child(even) { animation-name: oaoRotateOutTop }
@keyframes oaoRotateOutTop {
    to {
        transform: translateY(-100px) rotate(360deg);
        opacity: 0;
    }
}
 .present .oaoRotateOut span:nth-child(odd) { animation-name: oaoRotateOutBottom }
@keyframes oaoRotateOutBottom {
    to {
        transform: translateY(100px) rotate(360deg);
        opacity: 0;
    }
}

 .present .oaoRotateXIn span:nth-child(even) { animation-name: oaoRotateXInTop }
@keyframes oaoRotateXInTop {
    from {
        transform: translateY(-100px) rotateX(360deg);
        opacity: 0;
    }
}
 .present .oaoRotateXIn span:nth-child(odd) { animation-name: oaoRotateXInBottom }
@keyframes oaoRotateXInBottom {
    from {
        transform: translateY(100px) rotateX(360deg);
        opacity: 0;
    }
}

 .present .oaoRotateXOut span:nth-child(even) { animation-name: oaoRotateXOutTop }
@keyframes oaoRotateXOutTop {
    to {
        transform: translateY(-100px) rotateX(360deg);
        opacity: 0;
    }
}
 .present .oaoRotateXOut span:nth-child(odd) { animation-name: oaoRotateXOutBottom }
@keyframes oaoRotateXOutBottom {
    to {
        transform: translateY(100px) rotateX(360deg);
        opacity: 0;
    }
}

 .present .oaoRotateYIn span:nth-child(even) { animation-name: oaoRotateYInTop }
@keyframes oaoRotateYInTop {
    from {
        transform: translateY(-100px) rotateY(360deg);
        opacity: 0;
    }
}
 .present .oaoRotateYIn span:nth-child(odd) { animation-name: oaoRotateYInBottom }
@keyframes oaoRotateYInBottom {
    from {
        transform: translateY(100px) rotateY(360deg);
        opacity: 0;
    }
}

 .present .oaoRotateYOut span:nth-child(even) { animation-name: oaoRotateYOutTop }
@keyframes oaoRotateYOutTop {
    to {
        transform: translateY(-100px) rotateY(360deg);
        opacity: 0;
    }
}
 .present .oaoRotateYOut span:nth-child(odd) { animation-name: oaoRotateYOutBottom }
@keyframes oaoRotateYOutBottom {
    to {
        transform: translateY(100px) rotateY(360deg);
        opacity: 0;
    }
}
/*************************************************************
Fade in
**************************************************************/
 .present .fadeIn { animation-name: fadeIn }
@keyframes fadeIn {
    from { opacity: 0 }
    to { opacity: 1 }
}

 .present .fadeInLeft { animation-name: fadeInLeft }
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-100%);
    }
    to { opacity: 1 }
}

 .present .fadeInRight { animation-name: fadeInRight }
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to { opacity: 1 }
}

 .present .fadeInTop { animation-name: fadeInTop }
@keyframes fadeInTop {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to { opacity: 1 }
}

 .present .fadeInBottom { animation-name: fadeInBottom }
@keyframes fadeInBottom {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to { opacity: 1 }
}

/**************************************************************
Fade Out
**************************************************************/
 .present .fadeOut { animation-name: fadeOut }
@keyframes fadeOut {
    to { opacity: 0 }
}

 .present .fadeOutLeft { animation-name: fadeOutLeft }
@keyframes fadeOutLeft {
    from { opacity: 1 }
    to {
        opacity: 0;
        transform: translateX(-100%);
    }
}

 .present .fadeOutRight { animation-name: fadeOutRight }
@keyframes fadeOutRight {
    from { opacity: 1 }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

 .present .fadeOutTop { animation-name: fadeOutTop }
@keyframes fadeOutTop {
    from { opacity: 1 }
    to {
        opacity: 0;
        transform: translateY(-100%);
    }
}

 .present .fadeOutBottom { animation-name: fadeOutBottom }
@keyframes fadeOutBottom {
    from { opacity: 1 }
    to {
        opacity: 0;
        transform: translateY(100%);
    }
}

/*************************************************************
Move From
**************************************************************/
 .present .moveFromLeft { animation-name: moveFromLeft }
@keyframes moveFromLeft {
    from { transform: translateX(-800px) }
}

 .present .moveFromRight { animation-name: moveFromRight }
@keyframes moveFromRight {
    from { transform: translateX(800px) }
}

 .present .moveFromTop { animation-name: moveFromTop }
@keyframes moveFromTop {
    from { transform: translateY(-800px) }
}

 .present .moveFromBottom { animation-name: moveFromBottom }
@keyframes moveFromBottom {
    from { transform: translateY(800px) }
}

/*************************************************************
Move To
**************************************************************/
 .present .moveToLeft { animation-name: moveToLeft }
@keyframes moveToLeft {
    to { transform: translateX(-800px) }
}

 .present .moveToRight { animation-name: moveToRight }
@keyframes moveToRight {
    to { transform: translateX(800px) }
}

 .present .moveToTop { animation-name: moveToTop }
@keyframes moveToTop {
    to { transform: translateY(-800px) }
}

 .present .moveToBottom { animation-name: moveToBottom }
@keyframes moveToBottom {
    to { transform: translateY(800px) }
}

/*************************************************************
Door
**************************************************************/
 .present .doorCloseFromLeft { animation-name: doorCloseFromLeft }
@keyframes doorCloseFromLeft {
    from {
        transform: perspective(400px) rotateY(90deg);
        transform-origin: left;
        opacity: 0;
    }
    50%, to {
        transform: perspective(400px) rotateY(0deg);
        transform-origin: left;
        opacity: 1;
    }
}

 .present .doorOpenFromRight { animation-name: doorOpenFromRight }
@keyframes doorOpenFromRight {
    from {
        transform: perspective(400px) rotateY(0deg);
        transform-origin: left;
        opacity: 1;
    }
    50%, to {
        transform: perspective(400px) rotateY(90deg);
        transform-origin: left;
        opacity: 0;
    }
}

 .present .doorCloseFromRight { animation-name: doorCloseFromRight }
@keyframes doorCloseFromRight {
    from {
        transform: perspective(400px) rotateY(-90deg);
        transform-origin: right;
        opacity: 0;
    }
    50%, to {
        transform: perspective(400px) rotateY(0deg);
        transform-origin: right;
        opacity: 1;
    }
}

 .present .doorOpenFromLeft { animation-name: doorOpenFromLeft }
@keyframes doorOpenFromLeft {
    from {
        transform: perspective(400px) rotateY(0deg);
        transform-origin: right;
        opacity: 1;
    }
    50%, to {
        transform: perspective(400px) rotateY(-90deg);
        transform-origin: right;
        opacity: 0;
    }
}

/*************************************************************
Heartbeat
**************************************************************/
 .present .heartbeatSlow { animation-name: heartbeatSlow; animation-iteration-count: infinite; animation-duration: .5s }
@keyframes heartbeatSlow {
    35%, 65% { transform: scale(1.2) }
}

 .present .heartbeatFast { animation-name: heartbeatFast; animation-iteration-count: infinite }
@keyframes heartbeatFast {
    14%, 42% { transform: scale(1.3) }
    28%, 70% { transform: scale(1) }
}

/*************************************************************
Hang On
**************************************************************/
 .present .hangOnLeft { animation-name: hangOnLeft }
@keyframes hangOnLeft {
    from { transform-origin: left; }
    40% {
        transform: rotate(100deg);
        transform-origin: left;
    }
    55% {
        transform: rotate(80deg);
        transform-origin: left;
    }
    70% {
        transform: rotate(95deg);
        transform-origin: left;
    }
    85% {
        transform: rotate(85deg);
        transform-origin: left;
    }
    100% {
        transform: rotate(90deg);
        transform-origin: left;
    }
}

 .present .hangOnRight { animation-name: hangOnRight }
@keyframes hangOnRight {
    from { transform-origin: right; }
    40% {
        transform: rotate(-100deg);
        transform-origin: right;
    }
    55% {
        transform: rotate(-80deg);
        transform-origin: right;
    }
    70% {
        transform: rotate(-95deg);
        transform-origin: right;
    }
    85% {
        transform: rotate(-85deg);
        transform-origin: right;
    }
    100% {
        transform: rotate(-90deg);
        transform-origin: right;
    }
}

/*************************************************************
Hang And Drop
**************************************************************/
 .present .hangAndDropLeft { animation-name: hangAndDropLeft }
@keyframes hangAndDropLeft {
    from { transform-origin: left }
    50% {
        transform: rotate(100deg);
        transform-origin: left;
    }
    60% {
        transform: rotate(90deg);
        transform-origin: left;
        opacity: 1;
    }
    to {
        transform: translateY(300px) rotate(70deg);
        transform-origin: left;
        opacity: 0;
    }
}

 .present .hangAndDropRight { animation-name: hangAndDropRight }
@keyframes hangAndDropRight {
    from { transform-origin: right }
    50% {
        transform: rotate(-100deg);
        transform-origin: right;
    }
    60% {
        transform: rotate(-90deg);
        transform-origin: right;
        opacity: 1;
    }
    to {
        transform: translateY(300px) rotate(-70deg);
        transform-origin: right;
        opacity: 0
    }
}

/*************************************************************
Shake
**************************************************************/
 .present .pulseShake { animation-name: pulseShake; animation-iteration-count: infinite }
@keyframes pulseShake {
    90% { transform: scale(1) }
    92% { transform: scale(1.2) }
    96% { transform: scale(1, 1) }
    98% { transform: scale(1.1) }
}

 .present .horizontalShake { animation-name: horizontalShake; animation-iteration-count: infinite }
@keyframes horizontalShake {
    3%, 12%, 21%, 30%, 39%, 48%, 57%, 65%, 74%, 83%, 92% { transform: translateX(5px) }
    6%, 15%, 24%, 33%, 42%, 51%, 60%, 68%, 77%, 86%, 95% { transform: translateX(3px) }
    9%, 18%, 27%, 36%, 45%, 54%, 63%, 71%, 80%, 89%, 98% { transform: translateX(-5px) }
}

 .present .verticalShake { animation-name: verticalShake; animation-iteration-count: infinite }
@keyframes verticalShake {
    3%, 12%, 21%, 30%, 39%, 48%, 57%, 65%, 74%, 83%, 92% { transform: translateY(5px) }
    6%, 15%, 24%, 33%, 42%, 51%, 60%, 68%, 77%, 86%, 95% { transform: translateY(3px) }
    9%, 18%, 27%, 36%, 45%, 54%, 63%, 71%, 80%, 89%, 98% { transform: translateY(-5px) }
}

 .present .madMax { animation-name: madMax; animation-iteration-count: infinite }
@keyframes madMax {
    3%, 12%, 21%, 30%, 39%, 48%, 57%, 65%, 74%, 83%, 92% { transform: translateY(5px) scale(1.1) }
    6%, 15%, 24%, 33%, 42%, 51%, 60%, 68%, 77%, 86%, 95% { transform: translateY(3px) scale(.8) }
    9%, 18%, 27%, 36%, 45%, 54%, 63%, 71%, 80%, 89%, 98% { transform: translateY(-5px) scale(1.1) }
}

 .present .coolHorizontalShake { animation-name: coolHorizontalShake; animation-iteration-count: infinite }
@keyframes coolHorizontalShake {
    3%, 21%, 39%, 57%, 74%, 92% { transform: translateX(5px) }
    6%, 24%, 42%, 60%, 77%, 95% { transform: translateX(3px) }
    9%, 27%, 45%, 63%, 80%, 98% { transform: translateX(-5px) }
}

 .present .coolVerticalShake { animation-name: coolVerticalShake; animation-iteration-count: infinite }
@keyframes coolVerticalShake {
    3%, 21%, 39%, 57%, 74%, 92% { transform: translateY(5px) }
    6%, 24%, 42%, 60%, 77%, 95% { transform: translateY(3px) }
    9%, 27%, 45%, 63%, 80%, 98% { transform: translateY(-5px) }
}

 .present .quietMad { animation-name: quietMad; animation-iteration-count: infinite }
@keyframes quietMad {
    3%, 21%, 39%, 57%, 74%, 92% { transform: translateY(5px) scale(1.1) }
    6%, 24%, 42%, 60%, 77%, 95% { transform: translateY(3px) scale(.8) }
    9%, 27%, 45%, 63%, 80%, 98% { transform: translateY(-5px) scale(1.1) }
}

 .present .vibration { animation: vibration .1s linear infinite }
@keyframes vibration {
    50% { transform: skewY(1deg) skewX(-1deg) scale(1.06) }
}

/*************************************************************
Push Release From
**************************************************************/
 .present .pushReleaseFrom { animation-name: pushReleaseFrom }
@keyframes pushReleaseFrom {
    from {
        transform: scale(3, 3);
        opacity: 0;
    }
    30% { transform: scale(.5, .5) }
}

 .present .pushReleaseFromLeft { animation-name: pushReleaseFromLeft }
@keyframes pushReleaseFromLeft {
    from { transform: translateX(-100%) }
    30% { transform: translateX(100px) }
}

 .present .pushReleaseFromRight { animation-name: pushReleaseFromRight }
@keyframes pushReleaseFromRight {
    from { transform: translateX(100%) }
    30% { transform: translateX(-100px) }
}

 .present .pushReleaseFromTop { animation-name: pushReleaseFromTop }
@keyframes pushReleaseFromTop {
    from { transform: translateY(-100%) }
    30% { transform: translateY(100px) }
}

 .present .pushReleaseFromBottom { animation-name: pushReleaseFromBottom }
@keyframes pushReleaseFromBottom {
    from { transform: translateY(100%) }
    30% { transform: translateY(-100px) }
}

/*************************************************************
Push Release To
**************************************************************/
 .present .pushReleaseTo { animation-name: pushReleaseTo }
@keyframes pushReleaseTo {
    30% { transform: scale(.5, .5) }
    to {
        transform: scale(5, 5);
        opacity: 0;
    }
}

 .present .pushReleaseToLeft { animation-name: pushReleaseToLeft }
@keyframes pushReleaseToLeft {
    30% { transform: translateX(100px) }
    to {
        transform: translateX(-100%);
        opacity: 0;
    }
}

 .present .pushReleaseToRight { animation-name: pushReleaseToRight }
@keyframes pushReleaseToRight {
    30% { transform: translateX(-100px) }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

 .present .pushReleaseToTop { animation-name: pushReleaseToTop }
@keyframes pushReleaseToTop {
    30% { transform: translateY(100px) }
    to {
        transform: translateY(-100%);
        opacity: 0;
    }
}

 .present .pushReleaseToBottom { animation-name: pushReleaseToBottom }
@keyframes pushReleaseToBottom {
    30% { transform: translateY(-100px) }
    to {
        transform: translateY(100%);
        opacity: 0;
    }
}

/*************************************************************
Flip X
**************************************************************/
 .present .flipX { animation-name: flipX }
@keyframes flipX {
    from {
        transform: perspective(600px) rotateX(-180deg);
        opacity: 0;
    }
    to { transform: perspective(600px) rotateX(-360deg) }
}

 .present .flipXZoomIn { animation-name: flipXZoomIn }
@keyframes flipXZoomIn {
    from {
      transform: perspective(600px) rotateX(0deg) scale(1);
      animation-timing-function: ease-out;
    }
    40% {
      transform: perspective(600px) rotateX(-180deg) scale(1.8);
      animation-timing-function: ease-out;
    }
    80% {
      transform: perspective(600px) rotateX(-360deg) scale(.7);
      animation-timing-function: ease-in;
    }
    to  { transform: scale(1) }
}

 .present .flipXZoomOut { animation-name: flipXZoomOut }
@keyframes flipXZoomOut {
    from {
      transform: perspective(600px) rotateX(0deg) scale(1);
      animation-timing-function: ease-out;
    }
    40% {
      transform: perspective(600px) rotateX(180deg) scale(1.8);
      animation-timing-function: ease-out;
    }
    80% {
      transform: perspective(600px) rotateX(360deg) scale(.7);
      animation-timing-function: ease-in;
    }
    to  { transform: scale(1) }
}

/*************************************************************
Flip Y
**************************************************************/
 .present .flipY { animation-name: flipY }
@keyframes flipY {
    from {
        transform: perspective(600px) rotateY(180deg);
        opacity: 0;
    }
    to { transform: perspective(600px) rotateY(360deg) }
}

 .present .flipYZoomIn { animation-name: flipYZoomIn }
@keyframes flipYZoomIn {
    from {
      transform: perspective(600px) rotateY(0deg) scale(1);
      animation-timing-function: ease-out;
    }
    40% {
      transform: perspective(600px) rotateY(180deg) scale(1.6);
      animation-timing-function: ease-out;
    }
    80% {
      transform: perspective(600px) rotateY(360deg) scale(.7);
      animation-timing-function: ease-in;
    }
    to  { transform: scale(1) }
}

 .present .flipYZoomOut { animation-name: flipYZoomOut }
@keyframes flipYZoomOut {
    from {
      transform: perspective(600px) rotateY(0deg) scale(1);
      animation-timing-function: ease-out;
    }
    40% {
      transform: perspective(600px) rotateY(180deg) scale(.6);
      animation-timing-function: ease-out;
    }
    80% {
      transform: perspective(600px) rotateY(360deg) scale(1.8);
      animation-timing-function: ease-in;
    }
    to  { transform: scale(1) }
}

/*************************************************************
Skew
**************************************************************/
 .present .skewLeft { animation-name: skewLeft }
@keyframes skewLeft {
    70% { transform: skewX(40deg) }
}

 .present .skewRight { animation-name: skewRight }
@keyframes skewRight {
    70% { transform: skewX(-40deg) }
}

 .present .skewInLeft { animation-name: skewInLeft }
@keyframes skewInLeft {
    from {
        opacity: 0;
        transform: translateX(-100%) skewX(-40deg)
    }
    70% { transform: skewX(-30deg) }
}

 .present .skewInRight { animation-name: skewInRight }
@keyframes skewInRight {
    from {
        opacity: 0;
        transform: translateX(100%) skewX(40deg)
    }
    70% { transform: skewX(30deg) }
}

 .present .skewOutLeft { animation-name: skewOutLeft }
@keyframes skewOutLeft {
    20% { transform: skewX(40deg) }
    to {
        transform: translateX(-100%) skewX(40deg);
        opacity: 0
    }
}

 .present .skewOutRight { animation-name: skewOutRight }
@keyframes skewOutRight {
    20% { transform: skewX(-40deg) }
    to {
        transform: translateX(100%) skewX(-40deg);
        opacity: 0
    }
}

/*************************************************************
Shock In
**************************************************************/
 .present .shockZoom { animation-name: shockZoom }
@keyframes shockZoom {
    from { transform: matrix(5, 0, 0, 5, 0, 0) }
    35% { transform: matrix(2, 0, 0, 2, 0, 0) }
    43% { transform: matrix(1, 0, 0, 1, 0, 0) }
}

 .present .shockInLeft { animation-name: shockInLeft }
@keyframes shockInLeft {
    from { transform: matrix(1, 0, 0, 1, -800, 0) }
    35% { transform: matrix(1, 0, 0, 1, 50, 0) }
    43% { transform: matrix(1, 0, 0, 1, 0, 0) }
}

 .present .shockInRight { animation-name: shockInRight }
@keyframes shockInRight {
    from { transform: matrix(1, 0, 0, 1, 800, 0) }
    35% { transform: matrix(1, 0, 0, 1, -50, 0) }
    43% { transform: matrix(1, 0, 0, 1, 0, 0) }
}

 .present .shockInTop { animation-name: shockInTop }
@keyframes shockInTop {
    from { transform: matrix(1, 0, 0, 1, 0, -400) }
    35% { transform: matrix(1, 0, 0, 1, 0, 50) }
    43% { transform: matrix(1, 0, 0, 1, 0, 0) }
}

 .present .shockInBottom { animation-name: shockInBottom }
@keyframes shockInBottom {
    from { transform: matrix(1, 0, 0, 1, 0, 400) }
    35% { transform: matrix(1, 0, 0, 1, 0, -50) }
    43% { transform: matrix(1, 0, 0, 1, 0, 0) }
}

/*************************************************************
Pull release
**************************************************************/
 .present .pullRelease { animation-name: pullRelease }
@keyframes pullRelease {
    15% { transform: scale(1.8) }
}

 .present .pushRelease { animation-name: pushRelease }
@keyframes pushRelease {
    15% { transform: scale(.5) }
}

/*************************************************************
Swing In
**************************************************************/
 .present .swingInLeft { animation-name: swingInLeft }
@keyframes swingInLeft {
    from {
        transform: matrix(3, 0, 0, 3, -800, 0);
        animation-timing-function: ease-out;
    }
    50% { transform: matrix(1.3, 0, 0, 1.3, 20, 0) }
}

 .present .swingInRight { animation-name: swingInRight }
@keyframes swingInRight {
    from {
        transform: matrix(3, 0, 0, 3, 800, 0);
        animation-timing-function: ease-out;
    }
    50% { transform: matrix(1.3, 0, 0, 1.3, -20, 0) }
}

 .present .swingInTop { animation-name: swingInTop }
@keyframes swingInTop {
    from {
        transform: matrix(3, 0, 0, 3, 0, -800);
        animation-timing-function: ease-out;
    }
    50% { transform: matrix(1.3, 0, 0, 1.3, 0, 20) }
}

 .present .swingInBottom { animation-name: swingInBottom }
@keyframes swingInBottom {
    from {
        transform: matrix(3, 0, 0, 3, 0, 800);
        animation-timing-function: ease-out;
    }
    50% { transform: matrix(1.3, 0, 0, 1.3, 0, -20) }
}

/*************************************************************
Elevate
**************************************************************/

 .present .elevateLeft { animation-name: elevateLeft }
@keyframes elevateLeft {
    from {
        transform: translateY(100%) rotate(-20deg);
        transform-origin: right;
    }
    40% {
        transform: rotate(20deg);
        transform-origin: right;
    }
    65% {
        transform: rotate(0deg);
        transform-origin: right;
    }
}

 .present .elevateRight { animation-name: elevateRight }
@keyframes elevateRight {
    from {
        transform: translateY(100%) rotate(20deg);
        transform-origin: left;
    }
    40% {
        transform: rotate(-20deg);
        transform-origin: left;
    }
    65% {
        transform: rotate(0deg);
        transform-origin: left;
    }
}

/*************************************************************
Roll From
**************************************************************/
 .present .rollFromLeft { animation-name: rollFromLeft }
@keyframes rollFromLeft {
    from {
        transform: translateX(-100%) perspective(600px) rotateY(180deg);
        opacity: 0
    }
    to {
        transform: translateX(0) perspective(600px) rotateY(0deg);
        opacity: 1
    }
}

 .present .rollFromRight { animation-name: rollFromRight }
@keyframes rollFromRight {
    from {
        transform: translateX(100%) perspective(600px) rotateY(-180deg);
        opacity: 0
    }
    to {
        transform: translateX(0) perspective(600px) rotateY(0deg);
        opacity: 1
    }

}

 .present .rollFromTop { animation-name: rollFromTop }
@keyframes rollFromTop {
    from {
        transform: translateY(-100%) perspective(600px) rotateY(180deg);
        opacity: 0
    }
    to {
        transform: translateY(0) perspective(600px) rotateY(0deg);
        opacity: 1
    }
}

 .present .rollFromBottom { animation-name: rollFromBottom }
@keyframes rollFromBottom {
    from {
        transform: translateY(100%) perspective(600px) rotateY(-180deg);
        opacity: 0
    }
    to {
        transform: translateY(0) perspective(600px) rotateY(0deg);
        opacity: 1
    }
}

/*************************************************************
Roll To
**************************************************************/
 .present .rollToLeft { animation-name: rollToLeft }
@keyframes rollToLeft {
    from {
        transform: translateX(0) perspective(600px) rotateY(0deg);
        opacity: 1
    }
    to {
        transform: translateX(-100%) perspective(600px) rotateY(180deg);
        opacity: 0
    }
}

 .present .rollToRight { animation-name: rollToRight }
@keyframes rollToRight {
    from {
        transform: translateX(0) perspective(600px) rotateY(0deg);
        opacity: 1
    }
    to {
        transform: translateX(100%) perspective(600px) rotateY(-180deg);
        opacity: 0
    }
}

 .present .rollToTop { animation-name: rollToTop }
@keyframes rollToTop {
    from {
        transform: translateY(0) perspective(600px) rotateX(0deg);
        opacity: 1
    }
    to {
        transform: translateY(-100%) perspective(600px) rotateX(180deg);
        opacity: 0
    }
}

 .present .rollToBottom { animation-name: rollToBottom }
@keyframes rollToBottom {
    to {
        transform: translateY(0) perspective(600px) rotateX(0deg);
        opacity: 1
    }
    to {
        transform: translateY(100%) perspective(600px) rotateX(-180deg);
        opacity: 0
    }
}

/*************************************************************
Rotation
**************************************************************/
 .present .rotate { animation-name: rotate; animation-timing-function: ease-in-out }
@keyframes rotate {
    from { transform: rotate(0deg) }
    to { transform: rotate(360deg) }
}

 .present .rotateX { animation-name: rotateX }
@keyframes rotateX {
    from { transform: perspective(600px) rotateX(0deg) }
    to { transform: perspective(600px) rotateX(90deg) }
}

 .present .rotateXIn { animation-name: rotateXIn }
@keyframes rotateXIn {
    from {
        transform: perspective(600px) translate3d(0, -60px, -2000px) rotateX(75deg);
        opacity: 0;
    }
    5% { transform: perspective(600px) translate3d(0, -60px, -1500px) rotateX(75deg) }
}

 .present .rotateXOut { animation-name: rotateXOut }
@keyframes rotateXOut {
    95% { transform: perspective(600px) translate3d(0, -60px, -1500px) rotateX(75deg) }
    to {
        transform: perspective(600px) translate3d(0, -60px, -2000px) rotateX(75deg);
        opacity: 0;
    }
}

 .present .rotateY { animation-name: rotateY }
@keyframes rotateY {
    from { transform: perspective(600px) rotateY(0deg) }
    to { transform: perspective(600px) rotateY(90deg) }
}

 .present .rotateYIn { animation-name: rotateYIn }
@keyframes rotateYIn {
    from {
        transform: perspective(600px) translate3d(0, -60px, -2000px) rotateY(75deg);
        opacity: 0;
    }
    5% { transform: perspective(600px) translate3d(0, -60px, -1500px) rotateY(75deg) }
}

 .present .rotateYOut { animation-name: rotateYOut }
@keyframes rotateYOut {
    95% { transform: perspective(600px) translate3d(0, -60px, -1500px) rotateY(75deg) }
    to {
        transform: perspective(600px) translate3d(0, -60px, -2000px) rotateY(75deg);
        opacity: 0;
    }
}

/*************************************************************
Rotate In
**************************************************************/
 .present .rotateInLeft { animation-name: rotateInLeft }
@keyframes rotateInLeft {
    from {
        opacity: 0;
        transform: translateX(-100%) rotate(0deg)
    }
    to { transform: translateX(0px) rotate(360deg) }
}

 .present .rotateInRight { animation-name: rotateInRight }
@keyframes rotateInRight {
    from {
        opacity: 0;
        transform: translateX(100%) rotate(0deg)
    }
    to { transform: translateX(0px) rotate(-360deg) }
}

 .present .rotateInTop { animation-name: rotateInTop }
@keyframes rotateInTop {
    from {
        opacity: 0;
        transform: translateY(-400%) rotate(0deg)
    }
    to { transform: translateX(0px) rotate(360deg) }
}

 .present .rotateInBottom { animation-name: rotateInBottom }
@keyframes rotateInBottom {
    from {
        opacity: 0;
        transform: translateY(400%) rotate(0deg)
    }
    to { transform: translateX(0px) rotate(360deg) }
}

/*************************************************************
Rotate Out
**************************************************************/
 .present .rotateOutLeft { animation-name: rotateOutLeft }
@keyframes rotateOutLeft {
    from { transform: translateX(0px) rotate(360deg) }
    to {
        transform: translateX(-800px) rotate(0deg);
        opacity: 0
    }
}

 .present .rotateOutRight { animation-name: rotateOutRight }
@keyframes rotateOutRight {
    from { transform: translateX(0px) rotate(-360deg) }
    to {
        transform: translateX(800px) rotate(0deg);
        opacity: 0
    }
}

 .present .rotateOutTop { animation-name: rotateOutTop }
@keyframes rotateOutTop {
    from { transform: translateX(0px) rotate(360deg) }
    to {
        transform: translateY(-800px) rotate(0deg);
        opacity: 0
    }
}

 .present .rotateOutBottom { animation-name: rotateOutBottom }
@keyframes rotateOutBottom {
    from { transform: translateX(0px) rotate(360deg) }
    to {
        transform: translateY(800px) rotate(0deg);
        opacity: 0
    }
}

/*************************************************************
Spin To
**************************************************************/
 .present .spinToLeft { animation-name: spinToLeft }
@keyframes spinToLeft {
    from, to { transform-origin: left bottom }
    from {
        transform: rotate(90deg);
        opacity: 0;
    }
}

 .present .spinToRight { animation-name: spinToRight }
@keyframes spinToRight {
    from, to { transform-origin: right bottom }
    from {
        transform: rotate(-90deg);
        opacity: 0;
    }
}

 .present .spinToTop { animation-name: spinToTop }
@keyframes spinToTop {
    from, to { transform-origin: left bottom }
    from {
        transform: rotate(-90deg);
        opacity: 0;
    }
}

 .present .spinToBottom { animation-name: spinToBottom }
@keyframes spinToBottom {
    from, to { transform-origin: right bottom }
    from {
        transform: rotate(90deg);
        opacity: 0;
    }
}

/*************************************************************
Spin From
**************************************************************/
 .present .spinFromLeft { animation-name: spinFromLeft }
@keyframes spinFromLeft {
    from, to { transform-origin: left bottom }
    to {
        transform: rotate(90deg);
        opacity: 0;
    }
}

 .present .spinFromRight { animation-name: spinFromRight }
@keyframes spinFromRight {
    from, to { transform-origin: right bottom }
    to {
        transform: rotate(-90deg);
        opacity: 0;
    }
}

 .present .spinFromTop { animation-name: spinFromTop }
@keyframes spinFromTop {
    from, to { transform-origin: left bottom }
    to {
        transform: rotate(-90deg);
        opacity: 0;
    }
}

 .present .spinFromBottom { animation-name: spinFromBottom }
@keyframes spinFromBottom {
    from, to { transform-origin: right bottom }
    to {
        transform: rotate(90deg);
        opacity: 0;
    }
}

/*************************************************************
Blur In
**************************************************************/

 .present .blurIn { animation-name: blurIn }
@keyframes blurIn {
    from {
        filter: blur(20px);
        opacity: 0;
    }
}

 .present .blurInLeft { animation-name: blurInLeft }
@keyframes blurInLeft {
    from {
        transform: translateX(100%);
        filter: blur(20px);
        opacity: 0;
    }
}

 .present .blurInRight { animation-name: blurInRight }
@keyframes blurInRight {
    from {
        transform: translateX(-100%);
        filter: blur(20px);
        opacity: 0;
    }
}

 .present .blurInTop { animation-name: blurInTop }
@keyframes blurInTop {
    from {
        transform: translateY(100%);
        filter: blur(20px);
        opacity: 0;
    }
}

 .present .blurInBottom { animation-name: blurInBottom }
@keyframes blurInBottom {
    from {
        transform: translateY(-100%);
        filter: blur(20px);
        opacity: 0;
    }
}

/*************************************************************
Blur Out
**************************************************************/
 .present .blurOut { animation-name: blurOut }
@keyframes blurOut {
    85%, to { filter: blur(20px) }
    to { opacity: 0 }
}

 .present .blurOutLeft { animation-name: blurOutLeft }
@keyframes blurOutLeft {
    85%, to {
        filter: blur(20px);
        transform: translateX(100%);
    }
    to { opacity: 0 }
}

 .present .blurOutRight { animation-name: blurOutRight }
@keyframes blurOutRight {
    85%, to {
        filter: blur(20px);
        transform: translateX(-100%);
    }
    to { opacity: 0 }
}

 .present .blurOutTop { animation-name: blurOutTop }
@keyframes blurOutTop {
    85%, to {
        filter: blur(20px);
        transform: translateY(100%);
    }
    to { opacity: 0 }
}

 .present .blurOutBottom { animation-name: blurOutBottom }
@keyframes blurOutBottom {
    85%, to {
        filter: blur(20px);
        transform: translateY(-100%);
    }
    to { opacity: 0 }
}

/*************************************************************
Bounce
**************************************************************/
 .present .bounceFromTop { animation-name: bounceFromTop }
@keyframes bounceFromTop {
    0%, 25%, 55%, 85%, 100% {
        animation-timing-function: ease-out;
        transform: translate3d(0, 0, 0);
    }
    41%, 44% {
        animation-timing-function: ease-in;
        transform: translate3d(0, -80px, 0) scale3d(1, 1.6, 1);
    }
    70% {
        animation-timing-function: ease-in;
        transform: translate3d(0, -20px, 0);
    }
    90% { transform: translate3d(0, -4px, 0) }
}

 .present .bounceFromDown { animation-name: bounceFromDown }
@keyframes bounceFromDown {
    0%, 25%, 55%, 85%, 100% {
        animation-timing-function: ease-out;
        transform: translate3d(0, 0, 0);
    }
    41%, 44% {
        animation-timing-function: ease-in;
        transform: translate3d(0, 80px, 0) scale3d(1, 1.2, 1);
    }
    70% {
        animation-timing-function: ease-in;
        transform: translate3d(0, 20px, 0);
    }
    90% { transform: translate3d(0, 4px, 0) }
}

 .present .bounceX { animation-name: bounceX }
@keyframes bounceX {
    0%, 25%, 55%, 85%, 100% {
        animation-timing-function: ease-out;
        transform: scale3d(1, 1, 1);
    }
    41%, 44% {
        animation-timing-function: ease-in;
        transform: scale3d(1.8, 1, 1);
    }
    70% {
        animation-timing-function: ease-in;
        transform: scale3d(1.5, 1, 1);
    }
    90% { transform: scale3d(1.1, 1, 1) }
}

 .present .bounceY { animation-name: bounceY }
@keyframes bounceY {
    0%, 25%, 55%, 85%, 100% {
        animation-timing-function: ease-out;
        transform: scale3d(1, 1, 1);
    }
    41%, 44% {
        animation-timing-function: ease-in;
        transform: scale3d(1, 2, 1);
    }
    70% {
        animation-timing-function: ease-in;
        transform: scale3d(1, 1.5, 1);
    }
    90% { transform: scale3d(1, 1.1, 1) }
}

 .present .bounceZoomIn { animation-name: bounceZoomIn }
@keyframes bounceZoomIn {
    0%, 25%, 55%, 85%, 100% {
        animation-timing-function: ease-out;
        transform: scale(1);
    }
    41%, 44% {
        animation-timing-function: ease-in;
        transform: scale(1.5);
    }
    70% {
        animation-timing-function: ease-in;
        transform: scale(1.3);
    }
    90% { transform: scale(1.1) }
}

 .present .bounceZoomOut { animation-name: bounceZoomOut }
@keyframes bounceZoomOut {
    0%, 25%, 55%, 85%, 100% {
        animation-timing-function: ease-out;
        transform: scale(1);
    }
    41%, 44% {
        animation-timing-function: ease-in;
        transform: scale(.3);
    }
    70% {
        animation-timing-function: ease-in;
        transform: scale(.5);
    }
    90% { transform: scale(.9) }
}

/*************************************************************
Bounce In
**************************************************************/
 .present .bounceInTop { animation-name: bounceInTop }
@keyframes bounceInTop {
    0% { transform: translate3d(0, -300%, 0) }
    58% { transform: translate3d(0, 27px, 0) }
    73% { transform: translate3d(0, -12px, 0) }
    88% { transform: translate3d(0, 7px, 0) }
}

 .present .bounceInBottom { animation-name: bounceInBottom }
@keyframes bounceInBottom {
    0% { transform: translate3d(0, 300%, 0) }
    58% { transform: translate3d(0, -27px, 0) }
    73% { transform: translate3d(0, 12px, 0) }
    88% { transform: translate3d(0, -8px, 0) }
}

 .present .bounceInLeft { animation-name: bounceInLeft }
@keyframes bounceInLeft {
    0% { transform: translate3d(-300%, 0, 0) }
    58% { transform: translate3d(27px, 0, 0) }
    73% { transform: translate3d(-12px, 0, 0) }
    88% { transform: translate3d(8px, 0, 0) }
}

 .present .bounceInRight { animation-name: bounceInRight }
@keyframes bounceInRight {
    0% { transform: translate3d(300%, 0, 0) }
    58% { transform: translate3d(-27px, 0, 0) }
    73% { transform: translate3d(12px, 0, 0) }
    88% { transform: translate3d(-8px, 0, 0) }
}

/*************************************************************
Bounce Out
**************************************************************/
 .present .bounceOutTop { animation-name: bounceOutTop }
@keyframes bounceOutTop {
    18%, 33%, 48% { opacity: 1}
    18% { transform: translate3d(0, 27px, 0) }
    33% { transform: translate3d(0, -12px, 0) }
    48% { transform: translate3d(0, 8px, 0) }
    100% {
        opacity: 0;
        transform: translate3d(0, -300%, 0)
    }
}

 .present .bounceOutBottom { animation-name: bounceOutBottom }
@keyframes bounceOutBottom {
    18%, 33%, 48% { opacity: 1}
    18% { transform: translate3d(0, -27px, 0) }
    33% { transform: translate3d(0, 12px, 0) }
    48% { transform: translate3d(0, -8px, 0) }
    100% {
        opacity: 0;
        transform: translate3d(0, 300%, 0)
    }
}

 .present .bounceOutLeft { animation-name: bounceOutLeft }
@keyframes bounceOutLeft {
    18%, 33%, 48% { opacity: 1}
    18% { transform: translate3d(27px, 0, 0) }
    33% { transform: translate3d(-12px, 0, 0) }
    48% { transform: translate3d(8px, 0, 0) }
    100% {
        opacity: 0;
        transform: translate3d(-300%, 0, 0)
    }
}

 .present .bounceOutRight { animation-name: bounceOutRight }
@keyframes bounceOutRight {
    18%, 33%, 48% { opacity: 1}
    18% { transform: translate3d(-27px, 0, 0) }
    33% { transform: translate3d(12px, 0, 0) }
    48% { transform: translate3d(-8px, 0, 0) }
    100% {
        opacity: 0;
        transform: translate3d(300%, 0, 0)
    }
}

/*************************************************************
Perspective
**************************************************************/
 .present .perspectiveToTop { animation-name: perspectiveToTop; transform: perspective(500px); transform-style: preserve-3d }
@keyframes perspectiveToTop {
    50% { opacity: 1 }
    to {
        transform: perspective(500px) rotateX(90deg) translateY(-50px) translateZ(50px);
        opacity: 0;
    }
}

 .present .perspectiveToBottom { animation-name: perspectiveToBottom; transform: perspective(500px); transform-style: preserve-3d }
@keyframes perspectiveToBottom {
    50% { opacity: 1 }
    to {
        transform: perspective(500px) rotateX(90deg) translateY(50px) translateZ(-50px);
        opacity: 0;
    }
}

/*************************************************************
Zoom In
**************************************************************/
 .present .zoomIn { animation-name: zoomIn }
@keyframes zoomIn {
    from {
        transform: scale(10);
        opacity: 0;
    }
}

 .present .zoomInLeft { animation-name: zoomInLeft }
@keyframes zoomInLeft {
    from {
        transform: scale(10) translateX(-50%);
        opacity: 0;
    }
}

 .present .zoomInRight { animation-name: zoomInRight }
@keyframes zoomInRight {
    from {
        transform: scale(10) translateX(50%);
        opacity: 0;
    }
}

 .present .zoomInTop { animation-name: zoomInTop }
@keyframes zoomInTop {
    from {
        transform: scale(10) translateY(-50%);
        opacity: 0;
    }
}

 .present .zoomInBottom { animation-name: zoomInBottom }
@keyframes zoomInBottom {
    from {
        transform: scale(10) translateY(50%);
        opacity: 0;
    }
}

/*************************************************************
Zoom Out
**************************************************************/
 .present .zoomOut { animation-name: zoomOut }
@keyframes zoomOut {
    to {
        transform: scale(10);
        opacity: 0;
    }
}

 .present .zoomOutLeft { animation-name: zoomOutLeft }
@keyframes zoomOutLeft {
    to {
        transform: scale(10) translateX(-50%);
        opacity: 0;
    }
}

 .present .zoomOutRight { animation-name: zoomOutRight }
@keyframes zoomOutRight {
    to {
        transform: scale(10) translateX(50%);
        opacity: 0;
    }
}

 .present .zoomOutTop { animation-name: zoomOutTop }
@keyframes zoomOutTop {
    to {
        transform: scale(10) translateY(-50%);
        opacity: 0;
    }
}

 .present .zoomOutBottom { animation-name: zoomOutBottom }
@keyframes zoomOutBottom {
    to {
        transform: scale(10) translateY(50%);
        opacity: 0;
    }
}

/*************************************************************
Dance
**************************************************************/
 .present .danceTop { animation-name: danceTop; transform-origin: top }
@keyframes danceTop {
    16% { transform: skew(-14deg) }
    33% { transform: skew(12deg) }
    49% { transform: skew(-8deg) }
    66% { transform: skew(6deg) }
    83% { transform: skew(-4deg) }
}

 .present .danceMiddle { animation-name: danceMiddle }
@keyframes danceMiddle {
    16% { transform: skew(-14deg) }
    33% { transform: skew(12deg) }
    49% { transform: skew(-8deg) }
    66% { transform: skew(6deg) }
    83% { transform: skew(-4deg) }
}

 .present .danceBottom { animation-name: danceBottom; transform-origin: bottom }
@keyframes danceBottom {
    16% { transform: skew(-14deg) }
    33% { transform: skew(12deg) }
    49% { transform: skew(-8deg) }
    66% { transform: skew(6deg) }
    83% { transform: skew(-4deg) }
}