/**
 * cssanimation.css
 * Current Version: 1.0.2
 * 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
 **/
 .cssanimation {
    animation-duration: 0.9s;
    animation-fill-mode: both;
} 
.cssanimation span {
    animation-duration: 0.3s;
    animation-fill-mode: both;
}

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

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

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

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

.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)
    }
}

.leRainDrop span { animation-name: leRainDrop; animation-iteration-count: 1; }
@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) }
}

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

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

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

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

.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 }
}

.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) }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*************************************************************
Moving Back
**************************************************************/
.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)
    }
}

.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
**************************************************************/
.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)
    }
}

.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
*************************************************************/
.leSkateX span { animation-name: leScaleX; animation-iteration-count: 1 }
@keyframes leScaleX {
    50% { transform: scaleX(0.4) }
}

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

.leSkateXY span { animation-name: leSkateXY; animation-iteration-count: 1; 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
*************************************************************/
.leScaleXIn span { animation-name: leScaleXIn }
@keyframes leScaleXIn {
    from {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    50% { opacity: 1 }
}

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

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

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

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

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

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

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

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

/*************************************************************
Letter Fly In
**************************************************************/
.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
    }
}

.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) }
}

.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) }
}

.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
**************************************************************/
.leFlyOutTop span { animation-name: leFlyOutTop }
@keyframes leFlyOutTop {
    50% { transform: translate(0px, 50px) }
    to {
        transform: translate(0px, -100px);
        opacity: 0;
    }
}

.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;
    }
}

.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;
    }
}

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

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

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

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

.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
**************************************************************/
.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
    }
}

.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
**************************************************************/
.leRencontre span { animation: leRencontre .4s; animation-iteration-count: 1 }
@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) }
}

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

.leHorizontalShake span { animation-name: leHorizontalShake; animation-iteration-count: 1 }
@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) }
}

.leVerticalShake span { animation-name: leVerticalShake; animation-iteration-count: 1 }
@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) }
}

.leMadMax span { animation-name: leMadMax; animation-iteration-count: 1 }
@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) }
}

.leHorizontalTremble span { animation-name: leHorizontalTremble; animation-iteration-count: 1 }
@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) }
}

.leVerticalTremble span { animation-name: leVerticalTremble; animation-iteration-count: 1 }
@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) }
}

.leCrazyCool span { animation-name: leCrazyCool; animation-iteration-count: 1 }
@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) }
}

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

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

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

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

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

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

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

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

/*************************************************************
Letter Flip
**************************************************************/
.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) }
}

.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) }
}

.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) }
}

.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
**************************************************************/
.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;
    }
}

.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
**************************************************************/
.leRollFromLeft span { animation-name: leRollFromLeft }
@keyframes leRollFromLeft {
    from {
        transform: translateX(-60px) perspective(600px) rotateY(180deg);
        opacity: 0
    }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*************************************************************
Letter Rotation
**************************************************************/
.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) }
}

.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
    }
}

.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) }
}

.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
**************************************************************/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*************************************************************
Letter Bouncing
**************************************************************/
.leBounceFromTop span { animation-name: leBounceFromTop }
@keyframes leBounceFromTop {
    0%, 25%, 55%, 85%, 100% {