/*Motion CSS The library of CSS3 animation create by Petr Pavlyuk  - http://pavlyukpetr.com Copyright (c) 2015-2016 Petr Pavlyuk*/
#animation {
    visibility: hidden
}

.animation {
    visibility: visible !important;
    animation-fill-mode: both !important;
    -webkit-animation-fill-mode: both !important
}

.replay {
    -webkit-animation-iteration-count: infinite !important;
    animation-iteration-count: infinite !important
}

.delay-05s {
    -webkit-animation-delay: .5s !important;
    animation-delay: .5s !important
}

.delay-1s {
    -webkit-animation-delay: 1s !important;
    animation-delay: 1s !important
}

.delay-1-5s {
    -webkit-animation-delay: 1.5s !important;
    animation-delay: 1.5s !important
}

.delay-2s {
    -webkit-animation-delay: 2s !important;
    animation-delay: 2s !important
}

.delay-3s {
    -webkit-animation-delay: 3s !important;
    animation-delay: 3s !important
}

.fade-in {
    -webkit-animation: fade-in 1.2s;
    animation: fade-in 1.2s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
}

@-webkit-keyframes fade-in {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes fade-in {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

.fade-out {
    -webkit-animation: fade-out 1s;
    animation: fade-out 1s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@-webkit-keyframes fade-out {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@keyframes fade-out {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

.fade-in-right {
    -webkit-animation: fade-in-right 1s;
    animation: fade-in-right 1s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@-webkit-keyframes fade-in-right {
    0% {
        -webkit-transform: translateX(-100%);
        opacity: 0
    }

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

@keyframes fade-in-right {
    0% {
        transform: translateX(-100%);
        opacity: 0
    }

    100% {
        transform: translateX(0%);
        opacity: 1
    }
}

.fade-in-left {
    -webkit-animation: fade-in-left 1s;
    animation: fade-in-left 1s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@-webkit-keyframes fade-in-left {
    0% {
        -webkit-transform: translateX(100%);
        opacity: 0
    }

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

@keyframes fade-in-left {
    0% {
        transform: translateX(100%);
        opacity: 0
    }

    100% {
        transform: translateX(0%);
        opacity: 1
    }
}

.fade-in-up {
    -webkit-animation: fade-in-up 0.8s;
    animation: fade-in-up 0.8s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@-webkit-keyframes fade-in-up {
    0% {
        -webkit-transform: translateY(50px);
        opacity: 0
    }

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

@keyframes fade-in-up {
    0% {
        transform: translateY(50px);
        opacity: 0
    }

    100% {
        transform: translateY(0);
        opacity: 1
    }
}

.fade-in-down {
    -webkit-animation: fade-in-down 1s;
    animation: fade-in-down 1s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@-webkit-keyframes fade-in-down {
    0% {
        -webkit-transform: translateY(-100%);
        opacity: 0
    }

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

@keyframes fade-in-down {
    0% {
        transform: translateY(-100%);
        opacity: 0
    }

    100% {
        transform: translateY(0%);
        opacity: 1
    }
}

.fade-out-right {
    -webkit-animation: fade-out-right 1s;
    animation: fade-out-right 1s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@-webkit-keyframes fade-out-right {
    0% {
        -webkit-transform: translateX(0%);
        opacity: 1
    }

    100% {
        -webkit-transform: translateX(100%);
        opacity: 0
    }
}

@keyframes fade-out-right {
    0% {
        transform: translateX(0%);
        opacity: 1
    }

    100% {
        transform: translateX(100%);
        opacity: 0
    }
}

.fade-out-left {
    -webkit-animation: fade-out-left 1s;
    animation: fade-out-left 1s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@-webkit-keyframes fade-out-left {
    0% {
        -webkit-transform: translateX(0%);
        opacity: 1
    }

    100% {
        -webkit-transform: translateX(-100%);
        opacity: 0
    }
}

@keyframes fade-out-left {
    0% {
        transform: translateX(0%);
        opacity: 1
    }

    100% {
        transform: translateX(-100%);
        opacity: 0
    }
}

.fade-out-up {
    -webkit-animation: fade-out-up 1s;
    animation: fade-out-up 1s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@-webkit-keyframes fade-out-up {
    0% {
        -webkit-transform: translateY(0%);
        opacity: 1
    }

    100% {
        -webkit-transform: translateY(-100%);
        opacity: 0
    }
}

@keyframes fade-out-up {
    0% {
        transform: translateY(0%);
        opacity: 1
    }

    100% {
        transform: translateY(-100%);
        opacity: 0
    }
}

.fade-out-down {
    -webkit-animation: fade-out-down 1s;
    animation: fade-out-down 1s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@-webkit-keyframes fade-out-down {
    0% {
        -webkit-transform: translateY(0%);
        opacity: 1
    }

    100% {
        -webkit-transform: translateY(100%);
        opacity: 0
    }
}

@keyframes fade-out-down {
    0% {
        transform: translateY(0%);
        opacity: 1
    }

    100% {
        transform: translateY(100%);
        opacity: 0
    }
}

.slide-in-right {
    -webkit-animation: slide-in-right 1.2s;
    animation: slide-in-right 1.2s;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease
}

@-webkit-keyframes slide-in-right {
    0% {
        -webkit-transform: translateX(-2000px)
    }

    100% {
        -webkit-transform: translateX(0px)
    }
}

@keyframes slide-in-right {
    0% {
        transform: translateX(-2000px)
    }

    100% {
        transform: translateX(0px)
    }
}

.slide-in-left {
    -webkit-animation: slide-in-left 1.2s;
    animation: slide-in-left 1.2s;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease
}

@-webkit-keyframes slide-in-left {
    0% {
        -webkit-transform: translateX(2000px)
    }

    100% {
        -webkit-transform: translateX(0px)
    }
}

@keyframes slide-in-left {
    0% {
        transform: translateX(2000px)
    }

    100% {
        transform: translateX(0px)
    }
}

.slide-in-up {
    -webkit-animation: slide-in-up 1.2s;
    animation: slide-in-up 1.2s;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease
}

@-webkit-keyframes slide-in-up {
    0% {
        -webkit-transform: translateY(1000px)
    }

    100% {
        -webkit-transform: translateY(0px)
    }
}

@keyframes slide-in-up {
    0% {
        transform: translateY(1000px)
    }

    100% {
        transform: translateY(0px)
    }
}

.slide-in-down {
    -webkit-animation: slide-in-down 1.2s;
    animation: slide-in-down 1.2s;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease
}

@-webkit-keyframes slide-in-down {
    0% {
        -webkit-transform: translateY(-1000px)
    }

    100% {
        -webkit-transform: translateY(0px)
    }
}

@keyframes slide-in-down {
    0% {
        transform: translateY(-1000px)
    }

    100% {
        transform: translateY(0px)
    }
}

.slide-out-right {
    -webkit-animation: slide-out-right 1.5s;
    animation: slide-out-right 1.5s;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease
}

@-webkit-keyframes slide-out-right {
    0% {
        -webkit-transform: translateX(0px)
    }

    100% {
        -webkit-transform: translateX(2000px)
    }
}

@keyframes slide-out-right {
    0% {
        transform: translateX(0px)
    }

    100% {
        transform: translateX(2000px)
    }
}

.slide-out-left {
    -webkit-animation: slide-out-left 1.5s;
    animation: slide-out-left 1.5s;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease
}

@-webkit-keyframes slide-out-left {
    0% {
        -webkit-transform: translateX(0px)
    }

    100% {
        -webkit-transform: translateX(-2000px)
    }
}

@keyframes slide-out-left {
    0% {
        transform: translateX(0px)
    }

    100% {
        transform: translateX(-2000px)
    }
}

.slide-out-up {
    -webkit-animation: slide-out-up 1.2s;
    animation: slide-out-up 1.2s;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease
}

@-webkit-keyframes slide-out-up {
    0% {
        -webkit-transform: translateY(0px)
    }

    100% {
        -webkit-transform: translateY(-1000px)
    }
}

@keyframes slide-out-up {
    0% {
        transform: translateY(0px)
    }

    100% {
        transform: translateY(-1000px)
    }
}

.slide-out-down {
    -webkit-animation: slide-out-down 1.2s;
    animation: slide-out-down 1.2s;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease
}

@-webkit-keyframes slide-out-down {
    0% {
        -webkit-transform: translateY(0px)
    }

    100% {
        -webkit-transform: translateY(1000px)
    }
}

@keyframes slide-out-down {
    0% {
        transform: translateY(0px)
    }

    100% {
        transform: translateY(1000px)
    }
}

.bounce-in {
    -webkit-animation: bounce-in 1.2s;
    animation: bounce-in 1.2s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@keyframes bounce-in {
    0% {
        transform: scale(.9);
        opacity: 0
    }

    25% {
        transform: scale(1.2)
    }

    40% {
        transform: scale(.8)
    }

    50% {
        transform: scale(1.1)
    }

    60% {
        transform: scale(.9)
    }

    70% {
        transform: scale(1.05);
        opacity: 1
    }

    80% {
        transform: scale(.95)
    }

    90% {
        transform: scale(1.01)
    }

    100% {
        transform: scale(1)
    }
}

@-webkit-keyframes bounce-in {
    0% {
        -webkit-transform: scale(.9);
        opacity: 0
    }

    25% {
        -webkit-transform: scale(1.2)
    }

    40% {
        -webkit-transform: scale(.8)
    }

    50% {
        -webkit-transform: scale(1.1)
    }

    60% {
        -webkit-transform: scale(.9)
    }

    70% {
        -webkit-transform: scale(1.05);
        opacity: 1
    }

    80% {
        -webkit-transform: scale(.95)
    }

    90% {
        -webkit-transform: scale(1.01)
    }

    100% {
        -webkit-transform: scale(1)
    }
}

.bounce-in-right {
    -webkit-animation: bounce-in-right 1.2s;
    animation: bounce-in-right 1.2s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@keyframes bounce-in-right {
    0% {
        transform: translateX(-2000px)
    }

    63% {
        transform: translateX(30px)
    }

    70%,
    80%,
    90%,
    100% {
        transform: translateX(0px)
    }

    75% {
        transform: translateX(14px)
    }

    85% {
        transform: translateX(8px)
    }

    95% {
        transform: translateX(4px)
    }
}

@-webkit-keyframes bounce-in-right {
    0% {
        -webkit-transform: translateX(-2000px)
    }

    63% {
        -webkit-transform: translateX(30px)
    }

    70%,
    80%,
    90%,
    100% {
        -webkit-transform: translateX(0px)
    }

    75% {
        -webkit-transform: translateX(14px)
    }

    85% {
        -webkit-transform: translateX(8px)
    }

    95% {
        -webkit-transform: translateX(4px)
    }
}

.bounce-in-left {
    -webkit-animation: bounce-in-left 1.2s;
    animation: bounce-in-left 1.2s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@keyframes bounce-in-left {
    0% {
        transform: translateX(2000px)
    }

    63% {
        transform: translateX(-30px)
    }

    70%,
    80%,
    90%,
    100% {
        transform: translateX(0px)
    }

    75% {
        transform: translateX(-14px)
    }

    85% {
        transform: translateX(-8px)
    }

    95% {
        transform: translateX(-4px)
    }
}

@-webkit-keyframes bounce-in-left {
    0% {
        -webkit-transform: translateX(2000px)
    }

    63% {
        -webkit-transform: translateX(-30px)
    }

    70%,
    80%,
    90%,
    100% {
        -webkit-transform: translateX(0px)
    }

    75% {
        -webkit-transform: translateX(-14px)
    }

    85% {
        -webkit-transform: translateX(-8px)
    }

    95% {
        -webkit-transform: translateX(-4px)
    }
}

.bounce-in-up {
    -webkit-animation: bounce-in-up 1.2s;
    animation: bounce-in-up 1.2s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@keyframes bounce-in-up {
    0% {
        transform: translateY(1000px)
    }

    25% {
        transform: translateY(50px)
    }

    30%,
    55%,
    70%,
    80%,
    90%,
    100% {
        transform: translateY(0px)
    }

    45% {
        transform: translateY(25px)
    }

    63% {
        transform: translateY(15px)
    }

    75% {
        transform: translateY(7px)
    }

    85% {
        transform: translateY(4px)
    }

    95% {
        transform: translateY(2px)
    }
}

@-webkit-keyframes bounce-in-up {
    0% {
        -webkit-transform: translateY(1000px)
    }

    25% {
        -webkit-transform: translateY(50px)
    }

    30%,
    55%,
    70%,
    80%,
    90%,
    100% {
        -webkit-transform: translateY(0px)
    }

    45% {
        -webkit-transform: translateY(25px)
    }

    63% {
        -webkit-transform: translateY(15px)
    }

    75% {
        -webkit-transform: translateY(7px)
    }

    85% {
        -webkit-transform: translateY(4px)
    }

    95% {
        -webkit-transform: translateY(2px)
    }
}

.bounce-in-down {
    -webkit-animation: bounce-in-down 1.2s;
    animation: bounce-in-down 1.2s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@keyframes bounce-in-down {
    0% {
        transform: translateY(-1000px)
    }

    25% {
        transform: translateY(-50px)
    }

    30%,
    55%,
    70%,
    80%,
    90%,
    100% {
        transform: translateY(0px)
    }

    45% {
        transform: translateY(-25px)
    }

    63% {
        transform: translateY(-15px)
    }

    75% {
        transform: translateY(-7px)
    }

    85% {
        transform: translateY(-4px)
    }

    95% {
        transform: translateY(-2px)
    }
}

@-webkit-keyframes bounce-in-down {
    0% {
        -webkit-transform: translateY(-1000px)
    }

    25% {
        -webkit-transform: translateY(-50px)
    }

    30%,
    55%,
    70%,
    80%,
    90%,
    100% {
        -webkit-transform: translateY(0px)
    }

    45% {
        -webkit-transform: translateY(-25px)
    }

    63% {
        -webkit-transform: translateY(-15px)
    }

    75% {
        -webkit-transform: translateY(-7px)
    }

    85% {
        -webkit-transform: translateY(-4px)
    }

    95% {
        -webkit-transform: translateY(-2px)
    }
}

.roll-in-right {
    -webkit-animation: roll-in-right 1.2s;
    animation: roll-in-right 1.2s
}

@keyframes roll-in-right {
    0% {
        transform: translateX(-100%) rotate(-130deg);
        opacity: 0
    }

    100% {
        transform: translateX(0%) rotate(0deg);
        opacity: 1
    }
}

@-webkit-keyframes roll-in-right {
    0% {
        -webkit-transform: translateX(-100%) rotate(-130deg);
        opacity: 0
    }

    100% {
        -webkit-transform: translateX(0%) rotate(0deg);
        opacity: 1
    }
}

.roll-in-left {
    -webkit-animation: roll-in-left 1.2s;
    animation: roll-in-left 1.2s
}

@keyframes roll-in-left {
    0% {
        transform: translateX(100%) rotate(130deg);
        opacity: 0
    }

    100% {
        transform: translateX(0%) rotate(0deg);
        opacity: 1
    }
}

@-webkit-keyframes roll-in-left {
    0% {
        -webkit-transform: translateX(100%) rotate(130deg);
        opacity: 0
    }

    100% {
        -webkit-transform: translateX(0%) rotate(0deg);
        opacity: 1
    }
}

.roll-out-right {
    -webkit-animation: roll-out-right 1.2s;
    animation: roll-out-right 1.2s
}

@keyframes roll-out-right {
    0% {
        transform: translateX(0%) rotate(0deg);
        opacity: 1
    }

    100% {
        transform: translateX(100%) rotate(130deg);
        opacity: 0
    }
}

@-webkit-keyframes roll-out-right {
    0% {
        -webkit-transform: translateX(0%) rotate(0deg);
        opacity: 1
    }

    100% {
        -webkit-transform: translateX(100%) rotate(130deg);
        opacity: 0
    }
}

.roll-out-left {
    -webkit-animation: roll-out-left 1.2s;
    animation: roll-out-left 1.2s
}

@keyframes roll-out-left {
    0% {
        transform: translateX(0%) rotate(0deg);
        opacity: 1
    }

    100% {
        transform: translateX(-100%) rotate(-130deg);
        opacity: 0
    }
}

@-webkit-keyframes roll-out-left {
    0% {
        -webkit-transform: translateX(0%) rotate(0deg);
        opacity: 1
    }

    100% {
        -webkit-transform: translateX(-100%) rotate(-130deg);
        opacity: 0
    }
}

.rotbo-in-right {
    -webkit-animation: rotbo-in-right 1.1s;
    animation: rotbo-in-right 1.1s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@keyframes rotbo-in-right {
    0% {
        transform: translateX(-1000px) rotateZ(-540deg)
    }

    63% {
        transform: translateX(15px) rotateZ(20deg)
    }

    75% {
        transform: translateX(-7px) rotateZ(-7deg)
    }

    85% {
        transform: translateX(4px) rotateZ(4deg)
    }

    95% {
        transform: translateX(-2px) rotateZ(-2deg)
    }

    100% {
        transform: translateX(0px) rotateZ(0deg)
    }
}

@-webkit-keyframes rotbo-in-right {
    0% {
        -webkit-transform: translateX(-1000px) rotateZ(-540deg)
    }

    63% {
        -webkit-transform: translateX(15px) rotateZ(20deg)
    }

    75% {
        -webkit-transform: translateX(-7px) rotateZ(-7deg)
    }

    85% {
        -webkit-transform: translateX(4px) rotateZ(4deg)
    }

    95% {
        -webkit-transform: translateX(-2px) rotateZ(-2deg)
    }

    100% {
        -webkit-transform: translateX(0px) rotateZ(0deg)
    }
}

.rotbo-in-left {
    -webkit-animation: rotbo-in-left 1.1s;
    animation: rotbo-in-left 1.1s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@keyframes rotbo-in-left {
    0% {
        transform: translateX(1000px) rotateZ(540deg)
    }

    63% {
        transform: translateX(-15px) rotateZ(-20deg)
    }

    75% {
        transform: translateX(7px) rotateZ(7deg)
    }

    85% {
        transform: translateX(-4px) rotateZ(-4deg)
    }

    95% {
        transform: translateX(2px) rotateZ(2deg)
    }

    100% {
        transform: translateX(0px) rotateZ(0deg)
    }
}

@-webkit-keyframes rotbo-in-left {
    0% {
        -webkit-transform: translateX(1000px) rotateZ(540deg)
    }

    63% {
        -webkit-transform: translateX(-15px) rotateZ(-20deg)
    }

    75% {
        -webkit-transform: translateX(7px) rotateZ(7deg)
    }

    85% {
        -webkit-transform: translateX(-4px) rotateZ(-4deg)
    }

    95% {
        -webkit-transform: translateX(2px) rotateZ(2deg)
    }

    100% {
        -webkit-transform: translateX(0px) rotateZ(0deg)
    }
}

.rotbo-out-left {
    -webkit-animation: rotbo-out-left 2s;
    animation: rotbo-out-left 2s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@keyframes rotbo-out-left {
    0% {
        transform: translateX(0%) rotateZ(0deg)
    }

    20% {
        transform: translateX(15px) rotateZ(20deg)
    }

    100% {
        transform: translateX(-2000px) rotateZ(-1080deg)
    }
}

@-webkit-keyframes rotbo-out-left {
    0% {
        -webkit-transform: translateX(0%) rotateZ(0deg)
    }

    20% {
        -webkit-transform: translateX(15px) rotateZ(20deg)
    }

    100% {
        -webkit-transform: translateX(-2000px) rotateZ(-1080deg)
    }
}

.rotbo-out-right {
    -webkit-animation: rotbo-out-right 2s;
    animation: rotbo-out-right 2s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@keyframes rotbo-out-right {
    0% {
        transform: translateX(0%) rotateZ(0deg)
    }

    20% {
        transform: translateX(-15px) rotateZ(-20deg)
    }

    100% {
        transform: translateX(2000px) rotateZ(1080deg)
    }
}

@-webkit-keyframes rotbo-out-right {
    0% {
        -webkit-transform: translateX(0%) rotateZ(0deg)
    }

    20% {
        -webkit-transform: translateX(-15px) rotateZ(-20deg)
    }

    100% {
        -webkit-transform: translateX(2000px) rotateZ(1080deg)
    }
}

.flip {
    -webkit-animation: flip 1.3s;
    animation: flip 1.3s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@keyframes flip {
    0% {
        transform: rotateY(-360deg)
    }

    40% {
        transform: scale(1.6) rotateY(-190deg)
    }

    50% {
        transform: scale(1.6) rotateY(-150deg)
    }

    80% {
        transform: scale(.95)
    }

    100% {
        transform: scale(1)
    }
}

@-webkit-keyframes flip {
    0% {
        -webkit-transform: perspective(500px) rotateX(70deg);
        opacity: .2
    }

    30% {
        -webkit-transform: perspective(500px) rotateX(-50deg)
    }

    45% {
        -webkit-transform: perspective(500px) rotateX(30deg)
    }

    65% {
        -webkit-transform: perspective(500px) rotateX(-20deg)
    }

    85% {
        -webkit-transform: perspective(500px) rotateX(10deg)
    }

    100% {
        -webkit-transform: perspective(500px) rotateX(0deg)
    }
}

.flip-in-x {
    -webkit-animation: flip-in-x 1.2s;
    animation: flip-in-x 1.2s
}

@keyframes flip-in-x {
    0% {
        transform: perspective(500px) rotateX(70deg);
        opacity: .2
    }

    30% {
        transform: perspective(500px) rotateX(-50deg)
    }

    45% {
        transform: perspective(500px) rotateX(30deg)
    }

    65% {
        transform: perspective(500px) rotateX(-20deg)
    }

    85% {
        transform: perspective(500px) rotateX(10deg)
    }

    100% {
        transform: perspective(500px) rotateX(0deg)
    }
}

@-webkit-keyframes flip-in-x {
    0% {
        -webkit-transform: perspective(500px) rotateX(70deg);
        opacity: .2
    }

    30% {
        -webkit-transform: perspective(500px) rotateX(-50deg)
    }

    45% {
        -webkit-transform: perspective(500px) rotateX(30deg)
    }

    65% {
        -webkit-transform: perspective(500px) rotateX(-20deg)
    }

    85% {
        -webkit-transform: perspective(500px) rotateX(10deg)
    }

    100% {
        -webkit-transform: perspective(500px) rotateX(0deg)
    }
}

.flip-in-y {
    -webkit-animation: flip-in-y 1.2s;
    animation: flip-in-y 1.2s
}

@keyframes flip-in-y {
    0% {
        transform: perspective(500px) rotateY(70deg);
        opacity: .2
    }

    30% {
        transform: perspective(500px) rotateY(-50deg)
    }

    45% {
        transform: perspective(500px) rotateY(30deg)
    }

    65% {
        transform: perspective(500px) rotateY(-20deg)
    }

    85% {
        transform: perspective(500px) rotateY(10deg)
    }

    100% {
        transform: perspective(500px) rotateY(0deg)
    }
}

@-webkit-keyframes flip-in-y {
    0% {
        -webkit-transform: perspective(500px) rotateY(70deg);
        opacity: .2
    }

    30% {
        -webkit-transform: perspective(500px) rotateY(-50deg)
    }

    45% {
        -webkit-transform: perspective(500px) rotateY(30deg)
    }

    65% {
        -webkit-transform: perspective(500px) rotateY(-20deg)
    }

    85% {
        -webkit-transform: perspective(500px) rotateY(10deg)
    }

    100% {
        -webkit-transform: perspective(500px) rotateY(0deg)
    }
}

.flip-out-x {
    -webkit-animation: flip-out-x 1s;
    animation: flip-out-x 1s
}

@keyframes flip-out-x {
    0% {
        transform: perspective(500px) rotateX(0deg)
    }

    50% {
        transform: perspective(500px) rotateX(-30deg);
        opacity: 1
    }

    100% {
        transform: perspective(500px) rotateX(70deg);
        opacity: 0
    }
}

@-webkit-keyframes flip-out-x {
    0% {
        -webkit-transform: perspective(500px) rotateX(0deg)
    }

    50% {
        -webkit-transform: perspective(500px) rotateX(-30deg);
        opacity: 1
    }

    100% {
        -webkit-transform: perspective(500px) rotateX(70deg);
        opacity: 0
    }
}

.flip-out-y {
    -webkit-animation: flip-out-y 1s;
    animation: flip-out-y 1s
}

@keyframes flip-out-y {
    0% {
        transform: perspective(500px) rotateY(0deg)
    }

    50% {
        transform: perspective(500px) rotateY(-30deg);
        opacity: 1
    }

    100% {
        transform: perspective(500px) rotateY(70deg);
        opacity: 0
    }
}

@-webkit-keyframes flip-out-y {
    0% {
        -webkit-transform: perspective(500px) rotateY(0deg)
    }

    50% {
        -webkit-transform: perspective(500px) rotateY(-30deg);
        opacity: 1
    }

    100% {
        -webkit-transform: perspective(500px) rotateY(70deg);
        opacity: 0
    }
}

.rotate {
    -webkit-animation: rotate 1s;
    animation: rotate 1s;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
}

@keyframes rotate {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(360deg)
    }
}

.rotate-in {
    -webkit-animation: rotate-in 1s;
    animation: rotate-in 1s;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
}

@keyframes rotate-in {
    0% {
        transform: rotate(-0deg);
        opacity: 0
    }

    80% {
        opacity: 1
    }

    100% {
        transform: rotate(360deg)
    }
}

@-webkit-keyframes rotate-in {
    0% {
        -webkit-transform: rotate(-0deg);
        opacity: 0
    }

    80% {
        opacity: 1
    }

    100% {
        -webkit-transform: rotate(360deg)
    }
}

.rotate-out {
    -webkit-animation: rotate-out 1s;
    animation: rotate-out 1s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@keyframes rotate-out {
    0% {
        transform: rotate(-360deg)
    }

    20% {
        opacity: 1
    }

    100% {
        transform: rotate(0deg);
        opacity: 0
    }
}

@-webkit-keyframes rotate-out {
    0% {
        -webkit-transform: rotate(-360deg)
    }

    20% {
        opacity: 1
    }

    100% {
        -webkit-transform: rotate(0deg);
        opacity: 0
    }
}

.rotate-in-x {
    -webkit-animation: rotate-in-x 1s;
    animation: rotate-in-x 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
}

@keyframes rotate-in-x {
    0% {
        transform: rotateX(180deg);
        opacity: 0
    }

    80% {
        opacity: 1
    }

    100% {
        transform: rotateX(0deg)
    }
}

@-webkit-keyframes rotate-in-x {
    0% {
        -webkit-transform: rotateX(180deg);
        opacity: 0
    }

    80% {
        opacity: 1
    }

    100% {
        -webkit-transform: rotateX(0deg)
    }
}

.rotate-out-x {
    -webkit-animation: rotate-out-x 1s;
    animation: rotate-out-x 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
}

@keyframes rotate-out-x {
    0% {
        transform: rotateX(0deg)
    }

    20% {
        opacity: 1
    }

    100% {
        transform: rotateX(180deg);
        opacity: 0
    }
}

@-webkit-keyframes rotate-out-x {
    0% {
        -webkit-transform: rotateX(0deg)
    }

    20% {
        opacity: 1
    }

    100% {
        -webkit-transform: rotateX(180deg);
        opacity: 0
    }
}

.rotate-in-y {
    -webkit-animation: rotate-in-y 1s;
    animation: rotate-in-y 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
}

@keyframes rotate-in-y {
    0% {
        transform: rotateY(-180deg);
        opacity: 0
    }

    100% {
        transform: rotateY(0deg);
        opacity: 1
    }
}

@-webkit-keyframes rotate-in-y {
    0% {
        -webkit-transform: rotateY(0deg);
        opacity: 0
    }

    60% {
        opacity: 1
    }

    100% {
        -webkit-transform: rotateY(360deg)
    }
}

.rotate-out-y {
    -webkit-animation: rotate-out-y 1s;
    animation: rotate-out-y 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
}

@keyframes rotate-out-y {
    0% {
        transform: rotateY(0deg);
        opacity: 1
    }

    100% {
        transform: rotateY(-180deg);
        opacity: 0
    }
}

@-webkit-keyframes rotate-out-y {
    0% {
        -webkit-transform: rotateY(0deg);
        opacity: 1
    }

    100% {
        -webkit-transform: rotateY(-180deg);
        opacity: 0
    }
}

.rotate-in-3d {
    -webkit-animation: rotate-in-3d 1s;
    animation: rotate-in-3d 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
}

@keyframes rotate-in-3d {
    0% {
        transform: rotate3d(1, 1, 0, 0deg);
        opacity: 0
    }

    60% {
        opacity: 1
    }

    100% {
        transform: rotate3d(1, 1, 0, 360deg)
    }
}

@-webkit-keyframes rotate-in-3d {
    0% {
        -webkit-transform: rotate3d(1, 1, 0, 0deg);
        opacity: 0
    }

    60% {
        opacity: 1
    }

    100% {
        -webkit-transform: rotate3d(1, 1, 0, 360deg)
    }
}

.rotate-out-3d {
    -webkit-animation: rotate-out-3d 1s;
    animation: rotate-out-3d 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
}

@keyframes rotate-out-3d {
    0% {
        transform: rotate3d(1, 1, 0, 360deg)
    }

    40% {
        opacity: 1
    }

    100% {
        transform: rotate3d(1, 1, 0, 0deg);
        opacity: 0
    }
}

@-webkit-keyframes rotate-out-3d {
    0% {
        -webkit-transform: rotate3d(1, 1, 0, 360deg)
    }

    40% {
        opacity: 1
    }

    100% {
        -webkit-transform: rotate3d(1, 1, 0, 0deg);
        opacity: 0
    }
}

.rotate-in-scale {
    -webkit-animation: rotate-in-scale 1s;
    animation: rotate-in-scale 1s;
    -webkit-animation-timing-function: easec;
    animation-timing-function: ease-in-out
}

@keyframes rotate-in-scale {
    0% {
        transform: scale(0) rotate(-540deg);
        opacity: 0
    }

    80% {
        opacity: 1
    }

    100% {
        transform: scale(1) rotate(0deg)
    }
}

@-webkit-keyframes rotate-in-scale {
    0% {
        -webkit-transform: scale(0) rotate(-540deg);
        opacity: 0
    }

    80% {
        opacity: 1
    }

    100% {
        -webkit-transform: scale(1) rotate(0deg)
    }
}

.rotate-out-scale {
    -webkit-animation: rotate-out-scale 1s;
    animation: rotate-out-scale 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
}

@keyframes rotate-out-scale {
    0% {
        transform: scale(1) rotate(0deg)
    }

    40% {
        opacity: 1
    }

    100% {
        transform: scale(0) rotate(540deg);
        opacity: 0
    }
}

@-webkit-keyframes rotate-out-scale {
    0% {
        -webkit-transform: scale(1) rotate(0deg)
    }

    40% {
        opacity: 1
    }

    100% {
        -webkit-transform: scale(0) rotate(540deg);
        opacity: 0
    }
}

.turn-in-x {
    -webkit-animation: turn-in-x 1s;
    animation: turn-in-x 1s;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
}

@keyframes turn-in-x {
    0% {
        transform: rotateX(360deg) scale(0);
        opacity: 0
    }

    100% {
        transform: rotateX(0deg) scale(1);
        opacity: 1
    }
}

@-webkit-keyframes turn-in-x {
    0% {
        -webkit-transform: rotateX(360deg) scale(0);
        opacity: 0
    }

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

.turn-out-x {
    -webkit-animation: turn-out-x 1s;
    animation: turn-out-x 1s;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
}

@keyframes turn-out-x {
    0% {
        transform: rotateX(0deg) scale(1);
        opacity: 1
    }

    80% {
        opacity: 0
    }

    100% {
        transform: rotateX(360deg) scale(0)
    }
}

@-webkit-keyframes turn-out-x {
    0% {
        -webkit-transform: rotateX(0deg) scale(1);
        opacity: 1
    }

    80% {
        opacity: 0
    }

    100% {
        -webkit-transform: rotateX(360deg) scale(0)
    }
}

.turn-in-y {
    -webkit-animation: turn-in-y 1s;
    animation: turn-in-y 1s;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
}

@keyframes turn-in-y {
    0% {
        transform: rotateY(0deg) scale(0);
        opacity: 0
    }

    100% {
        transform: rotateY(360deg) scale(1);
        opacity: 1
    }
}

@-webkit-keyframes turn-in-y {
    0% {
        -webkit-transform: rotateY(0deg) scale(0);
        opacity: 0
    }

    100% {
        -webkit-transform: rotateX(360deg) scale(1);
        opacity: 1
    }
}

.turn-out-y {
    -webkit-animation: turn-out-y 1s;
    animation: turn-out-y 1s;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
}

@keyframes turn-out-y {
    0% {
        transform: rotateY(0deg) scale(1);
        opacity: 1
    }

    80% {
        opacity: 0
    }

    100% {
        transform: rotateY(360deg) scale(0)
    }
}

@-webkit-keyframes turn-out-y {
    0% {
        -webkit-transform: rotateY(0deg) scale(1);
        opacity: 1
    }

    80% {
        opacity: 0
    }

    100% {
        -webkit-transform: rotateY(360deg) scale(0)
    }
}

.back-in-right {
    -webkit-animation: back-in-right 1.5s;
    animation: back-in-right 1.5s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@keyframes back-in-right {
    0% {
        transform: translateX(-2000px) scale(.7);
        opacity: .7
    }

    80% {
        transform: translateX(0px) scale(.7);
        opacity: .7
    }

    100% {
        transform: scale(1);
        opacity: 1
    }
}

@-webkit-keyframes back-in-right {
    0% {
        -webkit-transform: translateX(-2000px) scale(.7);
        opacity: .7
    }

    80% {
        -webkit-transform: translateX(0px) scale(.7);
        opacity: .7
    }

    100% {
        -webkit-transform: scale(1);
        opacity: 1
    }
}

.back-out-right {
    -webkit-animation: back-out-right 1.5s;
    animation: back-out-right 1.5s;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
}

@keyframes back-out-right {
    0% {
        transform: scale(1);
        opacity: 1
    }

    20% {
        transform: translateX(0px) scale(.7);
        opacity: .7
    }

    100% {
        transform: translateX(2000px) scale(.7);
        opacity: .7
    }
}

@-webkit-keyframes back-out-right {
    0% {
        -webkit-transform: scale(1);
        opacity: 1
    }

    20% {
        -webkit-transform: translateX(0px) scale(.7);
        opacity: .7
    }

    100% {
        -webkit-transform: translateX(2000px) scale(.7);
        opacity: .7
    }
}

.back-in-left {
    -webkit-animation: back-in-left 1.5s;
    animation: back-in-left 1.5s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@keyframes back-in-left {
    0% {
        transform: translateX(2000px) scale(.7);
        opacity: .7
    }

    80% {
        transform: translateX(0px) scale(.7);
        opacity: .7
    }

    100% {
        transform: scale(1);
        opacity: 1
    }
}

@-webkit-keyframes back-in-left {
    0% {
        -webkit-transform: translateX(2000px) scale(.7);
        opacity: .7
    }

    80% {
        -webkit-transform: translateX(0px) scale(.7);
        opacity: .7
    }

    100% {
        -webkit-transform: scale(1);
        opacity: 1
    }
}

.back-out-left {
    -webkit-animation: back-out-left 1.5s;
    animation: back-out-left 1.5s;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
}

@keyframes back-out-left {
    0% {
        transform: scale(1);
        opacity: 1
    }

    20% {
        transform: translateX(0px) scale(.7);
        opacity: .7
    }

    100% {
        transform: translateX(-2000px) scale(.7);
        opacity: .7
    }
}

@-webkit-keyframes back-out-left {
    0% {
        -webkit-transform: scale(1);
        opacity: 1
    }

    20% {
        -webkit-transform: translateX(0px) scale(.7);
        opacity: .7
    }

    100% {
        -webkit-transform: translateX(-2000px) scale(.7);
        opacity: .7
    }
}

.back-in-up {
    -webkit-animation: back-in-up 1.5s;
    animation: back-in-up 1.5s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@keyframes back-in-up {
    0% {
        transform: translateY(1200px) scale(.7);
        opacity: .7
    }

    80% {
        transform: translateY(0px) scale(.7);
        opacity: .7
    }

    100% {
        transform: scale(1);
        opacity: 1
    }
}

@-webkit-keyframes back-in-up {
    0% {
        -webkit-transform: translateY(1200px) scale(.7);
        opacity: .7
    }

    80% {
        -webkit-transform: translateY(0px) scale(.7);
        opacity: .7
    }

    100% {
        -webkit-transform: scale(1);
        opacity: 1
    }
}

.back-out-up {
    -webkit-animation: back-out-up 1.5s;
    animation: back-out-up 1.5s;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
}

@keyframes back-out-up {
    0% {
        transform: scale(1);
        opacity: 1
    }

    20% {
        transform: translateY(0px) scale(.7);
        opacity: .7
    }

    100% {
        transform: translateY(-1200px) scale(.7);
        opacity: .7
    }
}

@-webkit-keyframes back-out-up {
    0% {
        -webkit-transform: scale(1);
        opacity: 1
    }

    20% {
        -webkit-transform: translateY(0px) scale(.7);
        opacity: .7
    }

    100% {
        -webkit-transform: translateY(-1200px) scale(.7);
        opacity: .7
    }
}

.back-in-down {
    -webkit-animation: back-in-down 1.5s;
    animation: back-in-down 1.5s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@keyframes back-in-down {
    0% {
        transform: translateY(-1200px) scale(.7);
        opacity: .7
    }

    80% {
        transform: translateY(0px) scale(.7);
        opacity: .7
    }

    100% {
        transform: scale(1);
        opacity: 1
    }
}

@-webkit-keyframes back-in-down {
    0% {
        -webkit-transform: translateY(-2000px) scale(.7);
        opacity: .7
    }

    80% {
        -webkit-transform: translateY(0px) scale(.7);
        opacity: .7
    }

    100% {
        -webkit-transform: scale(1);
        opacity: 1
    }
}

.back-out-down {
    -webkit-animation: back-out-down 1.5s;
    animation: back-out-down 1.5s;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
}

@keyframes back-out-down {
    0% {
        transform: scale(1);
        opacity: 1
    }

    20% {
        transform: translateY(0px) scale(.7);
        opacity: .7
    }

    100% {
        transform: translateY(1200px) scale(.7);
        opacity: .7
    }
}

@-webkit-keyframes back-out-down {
    0% {
        -webkit-transform: scale(1);
        opacity: 1
    }

    20% {
        -webkit-transform: translateY(0px) scale(.7);
        opacity: .7
    }

    100% {
        -webkit-transform: translateY(1200px) scale(.7);
        opacity: .7
    }
}

.push-in-up {
    transform-origin: 50% 100% 0;
    -webkit-animation: push-in-up 1s;
    animation: push-in-up 1s;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
}

@keyframes push-in-up {
    0% {
        transform: rotateX(90deg);
        opacity: 0
    }

    100% {
        transform: none
    }
}

@-webkit-keyframes push-in-up {
    0% {
        -webkit-transform: rotateX(90deg);
        opacity: 0
    }

    100% {
        -webkit-transform: none
    }
}

.push-out-down {
    transform-origin: 50% 100% 0;
    -webkit-animation: push-out-down 1s;
    animation: push-out-down 1s;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
}

@keyframes push-out-down {
    0% {
        transform: none
    }

    100% {
        transform: rotateX(90deg);
        opacity: 0
    }
}

@-webkit-keyframes push-out-down {
    0% {
        -webkit-transform: none
    }

    100% {
        -webkit-transform: rotateX(90deg);
        opacity: 0
    }
}

.push-in-down {
    -webkit-transform-origin: 50% 0 0;
    transform-origin: 50% 0 0;
    -webkit-animation: push-in-down 1s;
    animation: push-in-down 1s;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
}

@keyframes push-in-down {
    0% {
        transform: rotateX(-90deg);
        opacity: 0
    }

    100% {
        transform: none
    }
}

@-webkit-keyframes push-in-down {
    0% {
        -webkit-transform: rotateX(-90deg);
        opacity: 0
    }

    100% {
        -webkit-transform: none
    }
}

.push-out-up {
    -webkit-transform-origin: 50% 0 0;
    transform-origin: 50% 0 0;
    -webkit-animation: push-out-up 1s;
    animation: push-out-up 1s;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
}

@keyframes push-out-up {
    0% {
        transform: none
    }

    100% {
        transform: rotateX(-90deg);
        opacity: 0
    }
}

@-webkit-keyframes push-out-up {
    0% {
        -webkit-transform: none
    }

    100% {
        -webkit-transform: rotateX(-90deg);
        opacity: 0
    }
}

.push-in-right {
    -webkit-transform-origin: 0 50% 0;
    transform-origin: 0 50% 0;
    -webkit-animation: push-in-right 1s;
    animation: push-in-right 1s;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    transform-style: preserve-3d
}

@keyframes push-in-right {
    0% {
        transform: rotateY(90deg);
        opacity: 0
    }

    100% {
        transform: none
    }
}

@-webkit-keyframes push-in-right {
    0% {
        -webkit-transform: rotateY(90deg);
        opacity: 0
    }

    100% {
        -webkit-transform: none
    }
}

.push-out-left {
    -webkit-transform-origin: 0 50% 0;
    transform-origin: 0 50% 0;
    -webkit-animation: push-out-left 1s;
    animation: push-out-left 1s;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
}

@keyframes push-out-left {
    0% {
        transform: none
    }

    100% {
        transform: rotateY(90deg);
        opacity: 0
    }
}

@-webkit-keyframes push-out-left {
    0% {
        -webkit-transform: none
    }

    100% {
        -webkit-transform: rotateY(90deg);
        opacity: 0
    }
}

.push-in-left {
    -webkit-transform-origin: 100% 50% 0;
    transform-origin: 100% 50% 0;
    -webkit-animation: push-in-left 1s;
    animation: push-in-left 1s;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    transform-style: preserve-3d
}

@keyframes push-in-left {
    0% {
        transform: rotateY(-90deg);
        opacity: 0
    }

    100% {
        transform: none
    }
}

@-webkit-keyframes push-in-left {
    0% {
        -webkit-transform: rotateY(-90deg);
        opacity: 0
    }

    100% {
        -webkit-transform: none
    }
}

.push-out-right {
    -webkit-transform-origin: 100% 50% 0;
    transform-origin: 100% 50% 0;
    -webkit-animation: push-out-right 1s;
    animation: push-out-right 1s;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    transform-style: preserve-3d
}

@keyframes push-out-right {
    0% {
        transform: none
    }

    100% {
        transform: rotateY(-90deg);
        opacity: 0
    }
}

@-webkit-keyframes push-out-right {
    0% {
        -webkit-transform: none
    }

    100% {
        -webkit-transform: rotateY(-90deg);
        opacity: 0
    }
}

.clip-x-in {
    -webkit-animation: clip-x-in 1s;
    animation: clip-x-in 1s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@keyframes clip-x-in {
    0% {
        transform: scale(1, 0)
    }

    100% {
        transform: none
    }
}

@-webkit-keyframes clip-x-in {
    0% {
        -webkit-transform: scale(1, 0)
    }

    100% {
        -webkit-transform: none
    }
}

.clip-y-in {
    -webkit-animation: clip-y-in 1s;
    animation: clip-y-in 1s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@keyframes clip-y-in {
    0% {
        transform: scale(0, 1)
    }

    100% {
        transform: none
    }
}

@-webkit-keyframes clip-y-in {
    0% {
        -webkit-transform: scale(0, 1)
    }

    100% {
        -webkit-transform: none
    }
}

.clip-xy-in {
    -webkit-animation: clip-xy-in 1s;
    animation: clip-xy-in 1s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@keyframes clip-xy-in {
    0% {
        transform: scale(0, .5)
    }

    50% {
        transform: scale(1, .5)
    }

    100% {
        transform: none
    }
}

@-webkit-keyframes clip-xy-in {
    0% {
        -webkit-transform: scale(0, .5)
    }

    50% {
        -webkit-transform: scale(1, .5)
    }

    100% {
        -webkit-transform: none
    }
}

.clip-x-out {
    -webkit-animation: clip-x-out 1s;
    animation: clip-x-out 1s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@keyframes clip-x-out {
    0% {
        transform: none
    }

    100% {
        transform: scale(1, 0)
    }
}

@-webkit-keyframes clip-x-out {
    0% {
        -webkit-transform: none
    }

    100% {
        -webkit-transform: scale(1, 0)
    }
}

.clip-y-out {
    -webkit-animation: clip-y-out 1s;
    animation: clip-y-out 1s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@keyframes clip-y-out {
    0% {
        transform: none
    }

    100% {
        transform: scale(0, 1)
    }
}

@-webkit-keyframes clip-y-out {
    0% {
        -webkit-transform: none
    }

    100% {
        -webkit-transform: scale(0, 1)
    }
}

.clip-xy-out {
    -webkit-animation: clip-xy-out 1s;
    animation: clip-xy-out 1s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@keyframes clip-xy-out {
    0% {
        transform: none
    }

    50% {
        transform: scale(1, .5)
    }

    100% {
        transform: scale(0, .5)
    }
}

@-webkit-keyframes clip-xy-out {
    0% {
        -webkit-transform: none
    }

    50% {
        -webkit-transform: scale(1, .5)
    }

    100% {
        -webkit-transform: scale(0, .5)
    }
}

.fanfare {
    -webkit-animation: fanfare 1.2s;
    animation: fanfare 1.2s
}

@keyframes fanfare {

    0%,
    100% {
        transform: scale(1)
    }

    30% {
        transform: scale(.8) rotateZ(5deg)
    }

    40%,
    60%,
    80% {
        transform: scale(1.15) rotateZ(-5deg)
    }

    50%,
    70%,
    90% {
        transform: scale(1.15) rotateZ(5deg)
    }
}

@-webkit-keyframes fanfare {

    0%,
    100% {
        -webkit-transform: scale(1)
    }

    30% {
        -webkit-transform: scale(.8) rotateZ(5deg)
    }

    40%,
    60%,
    80% {
        -webkit-transform: scale(1.15) rotateZ(-5deg)
    }

    50%,
    70%,
    90% {
        -webkit-transform: scale(1.15) rotateZ(5deg)
    }
}

.float {
    -webkit-animation: float 1.6s;
    animation: float 1.6s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-20px)
    }
}

@-webkit-keyframes float {

    0%,
    100% {
        -webkit-transform: translateY(0)
    }

    50% {
        -webkit-transform: translateY(-20px)
    }
}

.orbit {
    -webkit-animation: orbit 3s;
    animation: orbit 3s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear
}

@keyframes orbit {
    0% {
        transform: rotate(0deg) translateX(20px) rotate(0deg)
    }

    100% {
        transform: rotate(360deg) translateX(20px) rotate(-360deg)
    }
}

@-webkit-keyframes orbit {
    0% {
        -webkit-transform: rotate(0deg) translateX(20px) rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(360deg) translateX(20px) rotate(-360deg)
    }
}

.spiral {
    -webkit-animation: spiral 1s;
    animation: spiral 1s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@keyframes spiral {
    0% {
        transform: rotateY(-360deg) translateY(-150%)
    }

    100% {
        transform: rotateY(0) translateY(0px)
    }
}

@-webkit-keyframes spiral {
    0% {
        -webkit-transform: rotateY(-360deg) translateY(-150%)
    }

    100% {
        -webkit-transform: rotateY(0) translateY(0px)
    }
}

.bounce {
    -webkit-animation: bounce 1s;
    animation: bounce 1s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@keyframes bounce {

    0%,
    30%,
    55%,
    70%,
    80%,
    90%,
    100% {
        transform: translateY(0px)
    }

    25% {
        transform: translateY(-50px)
    }

    45% {
        transform: translateY(-25px)
    }

    63% {
        transform: translateY(-15px)
    }

    75% {
        transform: translateY(-7px)
    }

    85% {
        transform: translateY(-4px)
    }

    95% {
        transform: translateY(-2px)
    }
}

@-webkit-keyframes bounce {

    0%,
    30%,
    55%,
    70%,
    80%,
    90%,
    100% {
        -webkit-transform: translateY(0px)
    }

    25% {
        -webkit-transform: translateY(-50px)
    }

    45% {
        -webkit-transform: translateY(-25px)
    }

    63% {
        -webkit-transform: translateY(-15px)
    }

    75% {
        -webkit-transform: translateY(-7px)
    }

    85% {
        -webkit-transform: translateY(-4px)
    }

    95% {
        -webkit-transform: translateY(-2px)
    }
}

.vibro {
    -webkit-animation: vibro .5s;
    animation: vibro .5s
}

@keyframes vibro {

    0%,
    100% {
        transform: translateX(0px)
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(5px)
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(-5px)
    }
}

@-webkit-keyframes vibro {

    0%,
    100% {
        -webkit-transform: translateX(0px)
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translateX(5px)
    }

    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translateX(-5px)
    }
}

.heartbeat {
    -webkit-animation: heartbeat 8s;
    animation: heartbeat 8s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

@keyframes heartbeat {

    0%,
    20%,
    40%,
    60%,
    80%,
    100% {
        transform: scale(1)
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: scale(1.15)
    }
}

@-webkit-keyframes heartbeat {

    0%,
    20%,
    40%,
    60%,
    80%,
    100% {
        -webkit-transform: scale(1)
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: scale(1.15)
    }
}

.shake {
    -webkit-animation: shake 1s;
    animation: shake 1s;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0px)
    }

    12.5%,
    37.5%,
    62.5%,
    87.5% {
        transform: translateX(20px)
    }

    25%,
    50%,
    75% {
        transform: translateX(-20px)
    }
}

@-webkit-keyframes shake {

    0%,
    100% {
        -webkit-transform: translateX(0px)
    }

    12.5%,
    37.5%,
    62.5%,
    87.5% {
        -webkit-transform: translateX(20px)
    }

    25%,
    50%,
    75% {
        -webkit-transform: translateX(-20px)
    }
}

.puff {
    -webkit-animation: puff 1s;
    animation: puff 1s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@keyframes puff {
    0% {
        transform: none
    }

    100% {
        transform: scale(1.2);
        opacity: 0
    }
}

@-webkit-keyframes puff {
    0% {
        -webkit-transform: none
    }

    100% {
        -webkit-transform: scale(1.2);
        opacity: 0
    }
}

.scale-in {
    -webkit-animation: scale-in 1.5s;
    animation: scale-in 1.5s
}

@keyframes scale-in {
    0% {
        transform: scale(0);
        opacity: 0
    }

    100% {
        transform: scale(1);
        opacity: 1
    }
}

@-webkit-keyframes scale-in {
    0% {
        -webkit-transform: scale(0);
        opacity: 0
    }

    100% {
        -webkit-transform: scale(1);
        opacity: 1
    }
}

.scale-out {
    -webkit-animation: scale-out 1s;
    animation: scale-out 1s
}

@keyframes scale-out {
    0% {
        transform: none;
        opacity: 1
    }

    80% {
        opacity: 0
    }

    100% {
        transform: scale(0);
        opacity: 0
    }
}

@-webkit-keyframes scale-out {
    0% {
        -webkit-transform: none;
        opacity: 1
    }

    50% {
        opacity: .7
    }

    100% {
        -webkit-transform: scale(0);
        opacity: 0
    }
}

.stretch {
    -webkit-animation: stretch 1s;
    animation: stretch 1s
}

@keyframes stretch {

    0%,
    100% {
        transform: scale3d(1, 1, 1)
    }

    30% {
        transform: scale3d(1.3, .7, 1)
    }

    40% {
        transform: scale3d(.7, 1.3, 1)
    }

    60% {
        transform: scale3d(1.2, .8, 1)
    }

    75% {
        transform: scale3d(.8, 1.2, 1)
    }

    90% {
        transform: scale3d(1.05, .95, 1)
    }
}

@-webkit-keyframes stretch {

    0%,
    100% {
        -webkit-transform: scale3d(1, 1, 1)
    }

    30% {
        -webkit-transform: scale3d(1.3, .7, 1)
    }

    40% {
        -webkit-transform: scale3d(.7, 1.3, 1)
    }

    60% {
        -webkit-transform: scale3d(1.2, .8, 1)
    }

    75% {
        -webkit-transform: scale3d(.8, 1.2, 1)
    }

    90% {
        -webkit-transform: scale3d(1.05, .95, 1)
    }
}

.pulse {
    -webkit-animation: pulse 1s;
    animation: pulse 1s
}

@keyframes pulse {
    0% {
        transform: none
    }

    50% {
        transform: scale(1.15)
    }

    100% {
        transform: scale(1)
    }
}

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: none
    }

    50% {
        -webkit-transform: scale(1.15)
    }

    100% {
        -webkit-transform: scale(1)
    }
}

.spin {
    -webkit-transform-origin: 50% 50% -200px;
    transform-origin: 50% 50% -200px;
    -webkit-animation: spin 1s;
    animation: spin 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
}

@keyframes spin {
    0% {
        transform: rotateY(0deg)
    }

    100% {
        transform: rotateY(360deg)
    }
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotateY(0deg)
    }

    100% {
        -webkit-transform: rotateY(360deg)
    }
}

.spin-y {
    -webkit-transform-origin: left top;
    transform-origin: left top;
    -webkit-animation: spin-y 1s;
    animation: spin-y 1s
}

@keyframes spin-y {
    0% {
        transform: rotateY(0deg)
    }

    100% {
        transform: rotateY(360deg)
    }
}

@-webkit-keyframes spin-y {
    0% {
        -webkit-transform: rotateY(0deg)
    }

    100% {
        -webkit-transform: rotateY(360deg)
    }
}

.whirl {
    -webkit-animation: whirl 2s;
    animation: whirl 2s
}

@keyframes whirl {
    0% {
        transform: translateY(1000px) rotateY(0deg)
    }

    80% {
        transform: translateY(-100%) rotateY(720deg)
    }

    100% {
        transform: translateY(0px)
    }
}

@-webkit-keyframes whirl {
    0% {
        -webkit-transform: translateY(1000px) rotateY(0deg)
    }

    80% {
        -webkit-transform: translateY(-100%) rotateY(720deg)
    }

    100% {
        -webkit-transform: translateY(0px)
    }
}

.wabble {
    -webkit-transform-origin: 50% 0 0;
    transform-origin: 50% 0 0;
    -webkit-animation: wabble 1.2s;
    animation: wabble 1.2s
}

@keyframes wabble {

    0%,
    100% {
        transform: rotateZ(0deg)
    }

    12.5% {
        transform: rotateZ(-20deg)
    }

    25% {
        transform: rotateZ(18deg)
    }

    37.5% {
        transform: rotateZ(-15deg)
    }

    50% {
        transform: rotateZ(13deg)
    }

    62.5% {
        transform: rotateZ(-10deg)
    }

    75% {
        transform: rotateZ(7deg)
    }

    87.5% {
        transform: rotateZ(-3deg)
    }
}

@-webkit-keyframes wabble {

    0%,
    100% {
        -webkit-transform: rotateZ(0deg)
    }

    12.5% {
        -webkit-transform: rotateZ(-20deg)
    }

    25% {
        -webkit-transform: rotateZ(18deg)
    }

    37.5% {
        -webkit-transform: rotateZ(-15deg)
    }

    50% {
        -webkit-transform: rotateZ(13deg)
    }

    62.5% {
        -webkit-transform: rotateZ(-10deg)
    }

    75% {
        -webkit-transform: rotateZ(7deg)
    }

    87.5% {
        -webkit-transform: rotateZ(-3deg)
    }
}