.code-animated {
    visibility: visible!important;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-backface-visibility: visible!important;
    backface-visibility: visible!important
}
.bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce
}
@-webkit-keyframes bounce {
    0%, 100%, 20%, 50%, 80% {
        -webkit-transform: translateY(0)
    }
    40% {
        -webkit-transform: translateY(-30px)
    }
    60% {
        -webkit-transform: translateY(-15px)
    }
}
@keyframes bounce {
    0%, 100%, 20%, 50%, 80% {
        transform: translateY(0)
    }
    40% {
        transform: translateY(-30px)
    }
    60% {
        transform: translateY(-15px)
    }
}
.flash {
    -webkit-animation-name: flash;
    animation-name: flash
}
@-webkit-keyframes flash {
    0%, 100%, 50% {
        opacity: 1
    }
    25%,
    75% {
        opacity: 0
    }
}
@keyframes flash {
    0%, 100%, 50% {
        opacity: 1
    }
    25%,
    75% {
        opacity: 0
    }
}
.pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse
}
@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(1)
    }
    50% {
        -webkit-transform: scale(1.1)
    }
    100% {
        -webkit-transform: scale(1)
    }
}
@keyframes pulse {
    0% {
        transform: scale(1)
    }
    50% {
        transform: scale(1.1)
    }
    100% {
        transform: scale(1)
    }
}
.rubberBand {
    -webkit-animation-name: rubberBand;
    animation-name: rubberBand
}
@-webkit-keyframes rubberBand {
    0% {
        -webkit-transform: scale(1)
    }
    30% {
        -webkit-transform: scaleX(1.25) scaleY(.75)
    }
    40% {
        -webkit-transform: scaleX(.75) scaleY(1.25)
    }
    60% {
        -webkit-transform: scaleX(1.15) scaleY(.85)
    }
    100% {
        -webkit-transform: scale(1)
    }
}
@keyframes rubberBand {
    0% {
        transform: scale(1)
    }
    30% {
        transform: scaleX(1.25) scaleY(.75)
    }
    40% {
        transform: scaleX(.75) scaleY(1.25)
    }
    60% {
        transform: scaleX(1.15) scaleY(.85)
    }
    100% {
        transform: scale(1)
    }
}
.swing {
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing;
    animation-name: swing
}
@-webkit-keyframes swing {
    20% {
        -webkit-transform: rotate(15deg)
    }
    40% {
        -webkit-transform: rotate(-10deg)
    }
    60% {
        -webkit-transform: rotate(5deg)
    }
    80% {
        -webkit-transform: rotate(-5deg)
    }
    100% {
        -webkit-transform: rotate(0)
    }
}
@keyframes swing {
    20% {
        transform: rotate(15deg)
    }
    40% {
        transform: rotate(-10deg)
    }
    60% {
        transform: rotate(5deg)
    }
    80% {
        transform: rotate(-5deg)
    }
    100% {
        transform: rotate(0)
    }
}
.tada {
    -webkit-animation-name: tada;
    animation-name: tada
}
@-webkit-keyframes tada {
    0% {
        -webkit-transform: scale(1)
    }
    10%,
    20% {
        -webkit-transform: scale(.9) rotate(-3deg)
    }
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: scale(1.1) rotate(3deg)
    }
    40%,
    60%,
    80% {
        -webkit-transform: scale(1.1) rotate(-3deg)
    }
    100% {
        -webkit-transform: scale(1) rotate(0)
    }
}
@keyframes tada {
    0% {
        transform: scale(1)
    }
    10%,
    20% {
        transform: scale(.9) rotate(-3deg)
    }
    30%,
    50%,
    70%,
    90% {
        transform: scale(1.1) rotate(3deg)
    }
    40%,
    60%,
    80% {
        transform: scale(1.1) rotate(-3deg)
    }
    100% {
        transform: scale(1) rotate(0)
    }
}
.wobble {
    -webkit-animation-name: wobble;
    animation-name: wobble
}
@-webkit-keyframes wobble {
    0% {
        -webkit-transform: translateX(0)
    }
    15% {
        -webkit-transform: translateX(-25%) rotate(-5deg)
    }
    30% {
        -webkit-transform: translateX(20%) rotate(3deg)
    }
    45% {
        -webkit-transform: translateX(-15%) rotate(-3deg)
    }
    60% {
        -webkit-transform: translateX(10%) rotate(2deg)
    }
    75% {
        -webkit-transform: translateX(-5%) rotate(-1deg)
    }
    100% {
        -webkit-transform: translateX(0)
    }
}
@keyframes wobble {
    0% {
        transform: translateX(0)
    }
    15% {
        transform: translateX(-25%) rotate(-5deg)
    }
    30% {
        transform: translateX(20%) rotate(3deg)
    }
    45% {
        transform: translateX(-15%) rotate(-3deg)
    }
    60% {
        transform: translateX(10%) rotate(2deg)
    }
    75% {
        transform: translateX(-5%) rotate(-1deg)
    }
    100% {
        transform: translateX(0)
    }
}
.bounceIn {
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn
}
@-webkit-keyframes bounceIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(.3)
    }
    50% {
        opacity: 1;
        -webkit-transform: scale(1.05)
    }
    70% {
        -webkit-transform: scale(.9)
    }
    100% {
        -webkit-transform: scale(1)
    }
}
@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(.3)
    }
    50% {
        opacity: 1;
        transform: scale(1.05)
    }
    70% {
        transform: scale(.9)
    }
    100% {
        transform: scale(1)
    }
}
.slideBounceDownIn {
    -webkit-animation-name: slideBounceDownIn;
    animation-name: slideBounceDownIn
}
@-webkit-keyframes slideBounceDownIn {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-2000px)
    }
    60% {
        opacity: 1;
        -webkit-transform: translateY(30px)
    }
    80% {
        -webkit-transform: translateY(-10px)
    }
    100% {
        -webkit-transform: translateY(0)
    }
}
@keyframes slideBounceDownIn {
    0% {
        opacity: 0;
        transform: translateY(-2000px)
    }
    60% {
        opacity: 1;
        transform: translateY(30px)
    }
    80% {
        transform: translateY(-10px)
    }
    100% {
        transform: translateY(0)
    }
}
.slideBounceLeftIn {
    -webkit-animation-name: slideBounceLeftIn;
    animation-name: slideBounceLeftIn
}
@-webkit-keyframes slideBounceLeftIn {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-2000px)
    }
    60% {
        opacity: 1;
        -webkit-transform: translateX(30px)
    }
    80% {
        -webkit-transform: translateX(-10px)
    }
    100% {
        -webkit-transform: translateX(0)
    }
}
@keyframes slideBounceLeftIn {
    0% {
        opacity: 0;
        transform: translateX(-2000px)
    }
    60% {
        opacity: 1;
        transform: translateX(30px)
    }
    80% {
        transform: translateX(-10px)
    }
    100% {
        transform: translateX(0)
    }
}
.slideBounceRightIn {
    -webkit-animation-name: slideBounceRightIn;
    animation-name: slideBounceRightIn
}
@-webkit-keyframes slideBounceRightIn {
    0% {
        opacity: 0;
        -webkit-transform: translateX(2000px)
    }
    60% {
        opacity: 1;
        -webkit-transform: translateX(-30px)
    }
    80% {
        -webkit-transform: translateX(10px)
    }
    100% {
        -webkit-transform: translateX(0)
    }
}
@keyframes slideBounceRightIn {
    0% {
        opacity: 0;
        transform: translateX(2000px)
    }
    60% {
        opacity: 1;
        transform: translateX(-30px)
    }
    80% {
        transform: translateX(10px)
    }
    100% {
        transform: translateX(0)
    }
}
.slideBounceUpIn {
    -webkit-animation-name: slideBounceUpIn;
    animation-name: slideBounceUpIn
}
@-webkit-keyframes slideBounceUpIn {
    0% {
        opacity: 0;
        -webkit-transform: translateY(2000px)
    }
    60% {
        opacity: 1;
        -webkit-transform: translateY(-30px)
    }
    80% {
        -webkit-transform: translateY(10px)
    }
    100% {
        -webkit-transform: translateY(0)
    }
}
@keyframes slideBounceUpIn {
    0% {
        opacity: 0;
        transform: translateY(2000px)
    }
    60% {
        opacity: 1;
        transform: translateY(-30px)
    }
    80% {
        transform: translateY(10px)
    }
    100% {
        transform: translateY(0)
    }
}
.bounceOut {
    -webkit-animation-name: bounceOut;
    animation-name: bounceOut
}
@-webkit-keyframes bounceOut {
    0% {
        -webkit-transform: scale(1)
    }
    25% {
        -webkit-transform: scale(.95)
    }
    50% {
        opacity: 1;
        -webkit-transform: scale(1.1)
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(.3)
    }
}
@keyframes bounceOut {
    0% {
        transform: scale(1)
    }
    25% {
        transform: scale(.95)
    }
    50% {
        opacity: 1;
        transform: scale(1.1)
    }
    100% {
        opacity: 0;
        transform: scale(.3)
    }
}
.slideBounceDownOut {
    -webkit-animation-name: slideBounceDownOut;
    animation-name: slideBounceDownOut
}
@-webkit-keyframes slideBounceDownOut {
    0% {
        -webkit-transform: translateY(0)
    }
    20% {
        opacity: 1;
        -webkit-transform: translateY(-20px)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(2000px)
    }
}
@keyframes slideBounceDownOut {
    0% {
        transform: translateY(0)
    }
    20% {
        opacity: 1;
        transform: translateY(-20px)
    }
    100% {
        opacity: 0;
        transform: translateY(2000px)
    }
}
.slideBounceLeftOut {
    -webkit-animation-name: slideBounceLeftOut;
    animation-name: slideBounceLeftOut
}
@-webkit-keyframes slideBounceLeftOut {
    0% {
        -webkit-transform: translateX(0)
    }
    20% {
        opacity: 1;
        -webkit-transform: translateX(20px)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-2000px)
    }
}
@keyframes slideBounceLeftOut {
    0% {
        transform: translateX(0)
    }
    20% {
        opacity: 1;
        transform: translateX(20px)
    }
    100% {
        opacity: 0;
        transform: translateX(-2000px)
    }
}
.slideBounceRightOut {
    -webkit-animation-name: slideBounceRightOut;
    animation-name: slideBounceRightOut
}
@-webkit-keyframes slideBounceRightOut {
    0% {
        -webkit-transform: translateX(0)
    }
    20% {
        opacity: 1;
        -webkit-transform: translateX(-20px)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(2000px)
    }
}
@keyframes slideBounceRightOut {
    0% {
        transform: translateX(0)
    }
    20% {
        opacity: 1;
        transform: translateX(-20px)
    }
    100% {
        opacity: 0;
        transform: translateX(2000px)
    }
}
.slideBounceUpOut {
    -webkit-animation-name: slideBounceUpOut;
    animation-name: slideBounceUpOut
}
@-webkit-keyframes slideBounceUpOut {
    0% {
        -webkit-transform: translateY(0)
    }
    20% {
        opacity: 1;
        -webkit-transform: translateY(20px)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-2000px)
    }
}
@keyframes slideBounceUpOut {
    0% {
        transform: translateY(0)
    }
    20% {
        opacity: 1;
        transform: translateY(20px)
    }
    100% {
        opacity: 0;
        transform: translateY(-2000px)
    }
}
.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn
}
@-webkit-keyframes fadeIn {
    from {
        opacity: 0
    }
}
@keyframes fadeIn {
    from {
        opacity: 0
    }
}
.slideShortDownIn {
    -webkit-animation-name: slideShortDownIn;
    animation-name: slideShortDownIn
}
@-webkit-keyframes slideShortDownIn {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0)
    }
}
@keyframes slideShortDownIn {
    0% {
        opacity: 0;
        transform: translateY(-20px)
    }
    100% {
        opacity: 1;
        transform: translateY(0)
    }
}
.slideFadeDownIn {
    -webkit-animation-name: slideFadeDownIn;
    animation-name: slideFadeDownIn
}
@-webkit-keyframes slideFadeDownIn {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-2000px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0)
    }
}
@keyframes slideFadeDownIn {
    0% {
        opacity: 0;
        transform: translateY(-2000px)
    }
    100% {
        opacity: 1;
        transform: translateY(0)
    }
}
.slideShortLeftIn {
    -webkit-animation-name: slideShortLeftIn;
    animation-name: slideShortLeftIn
}
@-webkit-keyframes slideShortLeftIn {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-20px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0)
    }
}
@keyframes slideShortLeftIn {
    0% {
        opacity: 0;
        transform: translateX(-20px)
    }
    100% {
        opacity: 1;
        transform: translateX(0)
    }
}
.slideFadeLeftIn {
    -webkit-animation-name: slideFadeLeftIn;
    animation-name: slideFadeLeftIn
}
@-webkit-keyframes slideFadeLeftIn {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-2000px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0)
    }
}
@keyframes slideFadeLeftIn {
    0% {
        opacity: 0;
        transform: translateX(-2000px)
    }
    100% {
        opacity: 1;
        transform: translateX(0)
    }
}
.slideShortRightIn {
    -webkit-animation-name: slideShortRightIn;
    animation-name: slideShortRightIn
}
@-webkit-keyframes slideShortRightIn {
    0% {
        opacity: 0;
        -webkit-transform: translateX(20px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0)
    }
}
@keyframes slideShortRightIn {
    0% {
        opacity: 0;
        transform: translateX(20px)
    }
    100% {
        opacity: 1;
        transform: translateX(0)
    }
}
.slideFadeRightIn {
    -webkit-animation-name: slideFadeRightIn;
    animation-name: slideFadeRightIn
}
@-webkit-keyframes slideFadeRightIn {
    0% {
        opacity: 0;
        -webkit-transform: translateX(2000px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0)
    }
}
@keyframes slideFadeRightIn {
    0% {
        opacity: 0;
        transform: translateX(2000px)
    }
    100% {
        opacity: 1;
        transform: translateX(0)
    }
}
.slideShortUpIn {
    -webkit-animation-name: slideShortUpIn;
    animation-name: slideShortUpIn
}
@-webkit-keyframes slideShortUpIn {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0)
    }
}
@keyframes slideShortUpIn {
    0% {
        opacity: 0;
        transform: translateY(20px)
    }
    100% {
        opacity: 1;
        transform: translateY(0)
    }
}
.slideFadeUpIn {
    -webkit-animation-name: slideFadeUpIn;
    animation-name: slideFadeUpIn
}
@-webkit-keyframes slideFadeUpIn {
    0% {
        opacity: 0;
        -webkit-transform: translateY(2000px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0)
    }
}
@keyframes slideFadeUpIn {
    0% {
        opacity: 0;
        transform: translateY(2000px)
    }
    100% {
        opacity: 1;
        transform: translateY(0)
    }
}
.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut
}
@-webkit-keyframes fadeOut {
    to {
        opacity: 0
    }
}
@keyframes fadeOut {
    to {
        opacity: 0
    }
}
.slideShortDownOut {
    -webkit-animation-name: slideShortDownOut;
    animation-name: slideShortDownOut
}
@-webkit-keyframes slideShortDownOut {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(20px)
    }
}
@keyframes slideShortDownOut {
    0% {
        opacity: 1;
        transform: translateY(0)
    }
    100% {
        opacity: 0;
        transform: translateY(20px)
    }
}
.slideFadeDownOut {
    -webkit-animation-name: slideFadeDownOut;
    animation-name: slideFadeDownOut
}
@-webkit-keyframes slideFadeDownOut {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(2000px)
    }
}
@keyframes slideFadeDownOut {
    0% {
        opacity: 1;
        transform: translateY(0)
    }
    100% {
        opacity: 0;
        transform: translateY(2000px)
    }
}
.slideShortLeftOut {
    -webkit-animation-name: slideShortLeftOut;
    animation-name: slideShortLeftOut
}
@-webkit-keyframes slideShortLeftOut {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-20px)
    }
}
@keyframes slideShortLeftOut {
    0% {
        opacity: 1;
        transform: translateX(0)
    }
    100% {
        opacity: 0;
        transform: translateX(-20px)
    }
}
.slideFadeLeftOut {
    -webkit-animation-name: slideFadeLeftOut;
    animation-name: slideFadeLeftOut
}
@-webkit-keyframes slideFadeLeftOut {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-2000px)
    }
}
@keyframes slideFadeLeftOut {
    0% {
        opacity: 1;
        transform: translateX(0)
    }
    100% {
        opacity: 0;
        transform: translateX(-2000px)
    }
}
.slideShortRightOut {
    -webkit-animation-name: slideShortRightOut;
    animation-name: slideShortRightOut
}
@-webkit-keyframes slideShortRightOut {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(20px)
    }
}
@keyframes slideShortRightOut {
    0% {
        opacity: 1;
        transform: translateX(0)
    }
    100% {
        opacity: 0;
        transform: translateX(20px)
    }
}
.slideFadeRightOut {
    -webkit-animation-name: slideFadeRightOut;
    animation-name: slideFadeRightOut
}
@-webkit-keyframes slideFadeRightOut {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(2000px)
    }
}
@keyframes slideFadeRightOut {
    0% {
        opacity: 1;
        transform: translateX(0)
    }
    100% {
        opacity: 0;
        transform: translateX(2000px)
    }
}
.slideShortUpOut {
    -webkit-animation-name: slideShortUpOut;
    animation-name: slideShortUpOut
}
@-webkit-keyframes slideShortUpOut {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-20px)
    }
}
@keyframes slideShortUpOut {
    0% {
        opacity: 1;
        transform: translateY(0)
    }
    100% {
        opacity: 0;
        transform: translateY(-20px)
    }
}
.slideFadeUpOut {
    -webkit-animation-name: slideFadeUpOut;
    animation-name: slideFadeUpOut
}
@-webkit-keyframes slideFadeUpOut {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-2000px)
    }
}
@keyframes slideFadeUpOut {
    0% {
        opacity: 1;
        transform: translateY(0)
    }
    100% {
        opacity: 0;
        transform: translateY(-2000px)
    }
}
.code-animated.flip {
    -webkit-animation-name: flip;
    animation-name: flip
}
@-webkit-keyframes flip {
    0% {
        -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
        -webkit-animation-timing-function: ease-out
    }
    40% {
        -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
        -webkit-animation-timing-function: ease-out
    }
    50% {
        -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        -webkit-animation-timing-function: ease-in
    }
    80% {
        -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
        -webkit-animation-timing-function: ease-in
    }
    100% {
        -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
        -webkit-animation-timing-function: ease-in
    }
}
@keyframes flip {
    0% {
        transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
        animation-timing-function: ease-out
    }
    40% {
        transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
        animation-timing-function: ease-out
    }
    50% {
        transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        animation-timing-function: ease-in
    }
    80% {
        transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
        animation-timing-function: ease-in
    }
    100% {
        transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
        animation-timing-function: ease-in
    }
}
.flipXIn {
    -webkit-animation-name: flipXIn;
    animation-name: flipXIn
}
@-webkit-keyframes flipXIn {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
    40% {
        -webkit-transform: perspective(400px) rotateX(-10deg)
    }
    70% {
        -webkit-transform: perspective(400px) rotateX(10deg)
    }
    100% {
        -webkit-transform: perspective(400px) rotateX(0);
        opacity: 1
    }
}
@keyframes flipXIn {
    0% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
    40% {
        transform: perspective(400px) rotateX(-10deg)
    }
    70% {
        transform: perspective(400px) rotateX(10deg)
    }
    100% {
        transform: perspective(400px) rotateX(0);
        opacity: 1
    }
}
.flipYIn {
    -webkit-animation-name: flipYIn;
    animation-name: flipYIn
}
@-webkit-keyframes flipYIn {
    0% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        opacity: 0
    }
    40% {
        -webkit-transform: perspective(400px) rotateY(-10deg)
    }
    70% {
        -webkit-transform: perspective(400px) rotateY(10deg)
    }
    100% {
        -webkit-transform: perspective(400px) rotateY(0);
        opacity: 1
    }
}
@keyframes flipYIn {
    0% {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0
    }
    40% {
        transform: perspective(400px) rotateY(-10deg)
    }
    70% {
        transform: perspective(400px) rotateY(10deg)
    }
    100% {
        transform: perspective(400px) rotateY(0);
        opacity: 1
    }
}
.flipXOut {
    -webkit-animation-name: flipXOut;
    animation-name: flipXOut
}
@-webkit-keyframes flipXOut {
    0% {
        -webkit-transform: perspective(400px) rotateX(0);
        opacity: 1
    }
    100% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
}
@keyframes flipXOut {
    0% {
        transform: perspective(400px) rotateX(0);
        opacity: 1
    }
    100% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
}
.flipYOut {
    -webkit-animation-name: flipYOut;
    animation-name: flipYOut
}
@-webkit-keyframes flipYOut {
    0% {
        -webkit-transform: perspective(400px) rotateY(0);
        opacity: 1
    }
    100% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        opacity: 0
    }
}
@keyframes flipYOut {
    0% {
        transform: perspective(400px) rotateY(0);
        opacity: 1
    }
    100% {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0
    }
}
.lightSpeedIn {
    -webkit-animation-name: lightSpeedIn;
    animation-name: lightSpeedIn;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}
@-webkit-keyframes lightSpeedIn {
    0% {
        -webkit-transform: translateX(100%) skewX(-30deg);
        opacity: 0
    }
    40% {
        -webkit-transform: translateX(0) skewX(30deg);
        opacity: 1
    }
    70% {
        -webkit-transform-origin: 0 100%;
        -webkit-transform: skewX(-15deg);
        opacity: 1
    }
    100% {
        -webkit-transform-origin: 0 100%;
        -webkit-transform: skewX(0);
        opacity: 1
    }
}
@keyframes lightSpeedIn {
    0% {
        transform: translateX(100%) skewX(-30deg);
        opacity: 0
    }
    40% {
        transform: translateX(0) skewX(30deg);
        */ opacity: 1
    }
    70% {
        transform-origin: 0 100%;
        transform: skewX(-15deg);
        opacity: 1
    }
    100% {
        transform-origin: 0 100%;
        transform: skewX(0);
        opacity: 1
    }
}
.lightSpeedOut {
    -webkit-animation-name: lightSpeedOut;
    animation-name: lightSpeedOut;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
}
@-webkit-keyframes lightSpeedOut {
    0% {
        -webkit-transform: translateX(0) skewX(0);
        opacity: 1
    }
    40% {
        -webkit-transform: translateX(100%) skewX(-30deg)
    }
    70% {
        -webkit-transform-origin: 100% 100%;
        -webkit-transform: translateX(100%) skewX(15deg)
    }
    100% {
        -webkit-transform-origin: 100% 100%;
        -webkit-transform: translateX(100%) skewX(-30deg);
        opacity: 0
    }
}
@keyframes lightSpeedOut {
    0% {
        transform: translateX(0) skewX(0);
        opacity: 1
    }
    40% {
        transform: translateX(100%) skewX(-30deg)
    }
    70% {
        transform-origin: 100% 100%;
        transform: translateX(100%) skewX(15deg)
    }
    100% {
        transform-origin: 100% 100%;
        transform: translateX(100%) skewX(-30deg);
        opacity: 0
    }
}
.rotateIn {
    -webkit-animation-name: rotateIn;
    animation-name: rotateIn
}
@-webkit-keyframes rotateIn {
    from {
        -webkit-transform: rotate(-200deg);
        opacity: 0
    }
}
@keyframes rotateIn {
    from {
        transform: rotate(-200deg);
        opacity: 0
    }
}
.rotateOut {
    -webkit-animation-name: rotateOut;
    animation-name: rotateOut
}
@-webkit-keyframes rotateOut {
    to {
        -webkit-transform: rotate(200deg);
        opacity: 0
    }
}
@keyframes rotateOut {
    to {
        transform: rotate(200deg);
        opacity: 0
    }
}
.roDownLeftIn {
    -webkit-animation-name: roDownLeftIn;
    animation-name: roDownLeftIn
}
@-webkit-keyframes roDownLeftIn {
    0% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(-90deg);
        opacity: 0
    }
    100% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(0);
        opacity: 1
    }
}
@keyframes roDownLeftIn {
    0% {
        transform-origin: left bottom;
        transform: rotate(-90deg);
        opacity: 0
    }
    100% {
        transform-origin: left bottom;
        transform: rotate(0);
        opacity: 1
    }
}
.roDownRightIn {
    -webkit-animation-name: roDownRightIn;
    animation-name: roDownRightIn
}
@-webkit-keyframes roDownRightIn {
    0% {
        -webkit-transform-origin: right bottom;
        -webkit-transform: rotate(90deg);
        opacity: 0
    }
    100% {
        -webkit-transform-origin: right bottom;
        -webkit-transform: rotate(0);
        opacity: 1
    }
}
@keyframes roDownRightIn {
    0% {
        transform-origin: right bottom;
        transform: rotate(90deg);
        opacity: 0
    }
    100% {
        transform-origin: right bottom;
        transform: rotate(0);
        opacity: 1
    }
}
.roUpLeftIn {
    -webkit-animation-name: roUpLeftIn;
    animation-name: roUpLeftIn
}
@-webkit-keyframes roUpLeftIn {
    0% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(90deg);
        opacity: 0
    }
    100% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(0);
        opacity: 1
    }
}
@keyframes roUpLeftIn {
    0% {
        transform-origin: left bottom;
        transform: rotate(90deg);
        opacity: 0
    }
    100% {
        transform-origin: left bottom;
        transform: rotate(0);
        opacity: 1
    }
}
.roUpRightIn {
    -webkit-animation-name: roUpRightIn;
    animation-name: roUpRightIn
}
@-webkit-keyframes roUpRightIn {
    0% {
        -webkit-transform-origin: right bottom;
        -webkit-transform: rotate(-90deg);
        opacity: 0
    }
    100% {
        -webkit-transform-origin: right bottom;
        -webkit-transform: rotate(0);
        opacity: 1
    }
}
@keyframes roUpRightIn {
    0% {
        transform-origin: right bottom;
        transform: rotate(-90deg);
        opacity: 0
    }
    100% {
        transform-origin: right bottom;
        transform: rotate(0);
        opacity: 1
    }
}
.roDownLeftOut {
    -webkit-animation-name: roDownLeftOut;
    animation-name: roDownLeftOut
}
@-webkit-keyframes roDownLeftOut {
    0% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(0);
        opacity: 1
    }
    100% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(90deg);
        opacity: 0
    }
}
@keyframes roDownLeftOut {
    0% {
        transform-origin: left bottom;
        transform: rotate(0);
        opacity: 1
    }
    100% {
        transform-origin: left bottom;
        transform: rotate(90deg);
        opacity: 0
    }
}
.roDownRightOut {
    -webkit-animation-name: roDownRightOut;
    animation-name: roDownRightOut
}
@-webkit-keyframes roDownRightOut {
    0% {
        -webkit-transform-origin: right bottom;
        -webkit-transform: rotate(0);
        opacity: 1
    }
    100% {
        -webkit-transform-origin: right bottom;
        -webkit-transform: rotate(-90deg);
        opacity: 0
    }
}
@keyframes roDownRightOut {
    0% {
        transform-origin: right bottom;
        transform: rotate(0);
        opacity: 1
    }
    100% {
        transform-origin: right bottom;
        transform: rotate(-90deg);
        opacity: 0
    }
}
.roUpLeftOut {
    -webkit-animation-name: roUpLeftOut;
    animation-name: roUpLeftOut
}
@-webkit-keyframes roUpLeftOut {
    0% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(0);
        opacity: 1
    }
    100% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(-90deg);
        opacity: 0
    }
}
@keyframes roUpLeftOut {
    0% {
        transform-origin: left bottom;
        transform: rotate(0);
        opacity: 1
    }
    100% {
        transform-origin: left bottom;
        transform: rotate(-90deg);
        opacity: 0
    }
}
.roUpRightOut {
    -webkit-animation-name: roUpRightOut;
    animation-name: roUpRightOut
}
@-webkit-keyframes roUpRightOut {
    0% {
        -webkit-transform-origin: right bottom;
        -webkit-transform: rotate(0);
        opacity: 1
    }
    100% {
        -webkit-transform-origin: right bottom;
        -webkit-transform: rotate(90deg);
        opacity: 0
    }
}
@keyframes roUpRightOut {
    0% {
        transform-origin: right bottom;
        transform: rotate(0);
        opacity: 1
    }
    100% {
        transform-origin: right bottom;
        transform: rotate(90deg);
        opacity: 0
    }
}
.slideLeftIn {
    -webkit-animation-name: slideLeftIn;
    animation-name: slideLeftIn
}
@-webkit-keyframes slideLeftIn {
    from {
        opacity: 0;
        -webkit-transform: translateX(-2000px)
    }
}
@keyframes slideLeftIn {
    from {
        opacity: 0;
        transform: translateX(-2000px)
    }
}
.slideRightIn {
    -webkit-animation-name: slideRightIn;
    animation-name: slideRightIn
}
@-webkit-keyframes slideRightIn {
    from {
        opacity: 0;
        -webkit-transform: translateX(2000px)
    }
}
@keyframes slideRightIn {
    from {
        opacity: 0;
        transform: translateX(2000px)
    }
}
.slideDownIn {
    -webkit-animation-name: slideDownIn;
    animation-name: slideDownIn
}
@-webkit-keyframes slideDownIn {
    from {
        opacity: 0;
        -webkit-transform: translateY(2000px)
    }
}
@keyframes slideDownIn {
    from {
        opacity: 0;
        transform: translateY(2000px)
    }
}
.slideUpIn {
    -webkit-animation-name: slideUpIn;
    animation-name: slideUpIn
}
@-webkit-keyframes slideUpIn {
    from {
        opacity: 0;
        -webkit-transform: translateY(-2000px)
    }
}
@keyframes slideUpIn {
    from {
        opacity: 0;
        transform: translateY(-2000px)
    }
}
.slideLeftOut {
    -webkit-animation-name: slideLeftOut;
    animation-name: slideLeftOut
}
@-webkit-keyframes slideLeftOut {
    to {
        opacity: 0;
        -webkit-transform: translateX(-2000px)
    }
}
@keyframes slideLeftOut {
    to {
        opacity: 0;
        transform: translateX(-2000px)
    }
}
.slideRightOut {
    -webkit-animation-name: slideRightOut;
    animation-name: slideRightOut
}
@-webkit-keyframes slideRightOut {
    to {
        opacity: 0;
        -webkit-transform: translateX(2000px)
    }
}
@keyframes slideRightOut {
    to {
        opacity: 0;
        transform: translateX(2000px)
    }
}
.slideUpOut {
    -webkit-animation-name: slideUpOut;
    animation-name: slideUpOut
}
@-webkit-keyframes slideUpOut {
    to {
        opacity: 0;
        -webkit-transform: translateY(-2000px)
    }
}
@keyframes slideUpOut {
    to {
        opacity: 0;
        transform: translateY(-2000px)
    }
}
.slideDownOut {
    -webkit-animation-name: slideDownOut;
    animation-name: slideDownOut
}
@-webkit-keyframes slideDownOut {
    to {
        opacity: 0;
        -webkit-transform: translateY(2000px)
    }
}
@keyframes slideDownOut {
    to {
        opacity: 0;
        transform: translateY(2000px)
    }
}
.slideShakeLeftOut {
    -webkit-animation-name: slideShakeLeftOut;
    animation-name: slideShakeLeftOut
}
@-webkit-keyframes slideShakeLeftOut {
    25% {
        -webkit-transform: translateX(-50%) rotate(-7deg)
    }
    50% {
        opacity: .7;
        -webkit-transform: translateX(-100%) rotate(7deg)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-200%) rotate(0deg)
    }
}
@keyframes slideShakeLeftOut {
    25% {
        transform: translateX(-50%) rotate(-7deg)
    }
    50% {
        opacity: .7;
        transform: translateX(-100%) rotate(7deg)
    }
    100% {
        opacity: 0;
        transform: translateX(-200%) rotate(0deg)
    }
}
.slideShakeRightOut {
    -webkit-animation-name: slideShakeRightOut;
    animation-name: slideShakeRightOut
}
@-webkit-keyframes slideShakeRightOut {
    25% {
        -webkit-transform: translateX(50%) rotate(7deg)
    }
    50% {
        opacity: .7;
        -webkit-transform: translateX(100%) rotate(-7deg)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(200%) rotate(0deg)
    }
}
@keyframes slideShakeRightOut {
    25% {
        transform: translateX(50%) rotate(7deg)
    }
    50% {
        opacity: .7;
        transform: translateX(100%) rotate(-7deg)
    }
    100% {
        opacity: 0;
        transform: translateX(200%) rotate(0deg)
    }
}
.slideShakeUpOut {
    -webkit-animation-name: slideShakeUpOut;
    animation-name: slideShakeUpOut
}
@-webkit-keyframes slideShakeUpOut {
    25% {
        -webkit-transform: translateY(-50%) rotate(-7deg)
    }
    50% {
        opacity: .7;
        -webkit-transform: translateY(-100%) rotate(7deg)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-200%) rotate(0deg)
    }
}
@keyframes slideShakeUpOut {
    25% {
        transform: translateY(-50%) rotate(-7deg)
    }
    50% {
        opacity: .7;
        transform: translateY(-100%) rotate(7deg)
    }
    100% {
        opacity: 0;
        transform: translateY(-200%) rotate(0deg)
    }
}
.slideShakeDownOut {
    -webkit-animation-name: slideShakeDownOut;
    animation-name: slideShakeDownOut
}
@-webkit-keyframes slideShakeDownOut {
    25% {
        -webkit-transform: translateY(50%) rotate(7deg)
    }
    50% {
        opacity: .7;
        -webkit-transform: translateY(100%) rotate(-7deg)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(200%) rotate(0deg)
    }
}
@keyframes slideShakeDownOut {
    25% {
        transform: translateY(50%) rotate(7deg)
    }
    50% {
        opacity: .7;
        transform: translateY(100%) rotate(-7deg)
    }
    100% {
        opacity: 0;
        transform: translateY(200%) rotate(0deg)
    }
}
.slideShakeLeftIn {
    -webkit-animation-name: slideShakeLeftIn;
    animation-name: slideShakeLeftIn
}
@-webkit-keyframes slideShakeLeftIn {
    0% {
        -webkit-transform: translateX(-200%)
    }
    50% {
        opacity: .7;
        -webkit-transform: translateX(-100%) rotate(7deg)
    }
    75% {
        -webkit-transform: translateX(-50%) rotate(-7deg)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0) rotate(0deg)
    }
}
@keyframes slideShakeLeftIn {
    0% {
        transform: translateX(-200%)
    }
    50% {
        opacity: .7;
        transform: translateX(-100%) rotate(7deg)
    }
    75% {
        transform: translateX(-50%) rotate(-7deg)
    }
    100% {
        opacity: 1;
        transform: translateX(0) rotate(0deg)
    }
}
.slideShakeRightIn {
    -webkit-animation-name: slideShakeRightIn;
    animation-name: slideShakeRightIn
}
@-webkit-keyframes slideShakeRightIn {
    0% {
        -webkit-transform: translateX(200%)
    }
    50% {
        opacity: .7;
        -webkit-transform: translateX(100%) rotate(-7deg)
    }
    75% {
        -webkit-transform: translateX(50%) rotate(7deg)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0) rotate(0deg)
    }
}
@keyframes slideShakeRightIn {
    0% {
        transform: translateX(200%)
    }
    50% {
        opacity: .7;
        transform: translateX(100%) rotate(-7deg)
    }
    75% {
        transform: translateX(50%) rotate(7deg)
    }
    100% {
        opacity: 1;
        transform: translateX(0) rotate(0deg)
    }
}
.slideShakeUpIn {
    -webkit-animation-name: slideShakeUpIn;
    animation-name: slideShakeUpIn
}
@-webkit-keyframes slideShakeUpIn {
    0% {
        -webkit-transform: translateY(-200%)
    }
    50% {
        opacity: .7;
        -webkit-transform: translateY(-100%) rotate(7deg)
    }
    75% {
        -webkit-transform: translateY(-50%) rotate(-7deg)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0) rotate(0deg)
    }
}
@keyframes slideShakeUpIn {
    0% {
        transform: translateY(-200%)
    }
    50% {
        opacity: .7;
        transform: translateY(-100%) rotate(7deg)
    }
    75% {
        transform: translateY(-50%) rotate(-7deg)
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotate(0deg)
    }
}
.slideShakeDownIn {
    -webkit-animation-name: slideShakeDownIn;
    animation-name: slideShakeDownIn
}
@-webkit-keyframes slideShakeDownIn {
    0% {
        -webkit-transform: translateY(200%)
    }
    50% {
        opacity: .7;
        -webkit-transform: translateY(100%) rotate(-7deg)
    }
    75% {
        -webkit-transform: translateY(50%) rotate(7deg)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0) rotate(0deg)
    }
}
@keyframes slideShakeDownIn {
    0% {
        transform: translateY(200%)
    }
    50% {
        opacity: .7;
        transform: translateY(100%) rotate(-7deg)
    }
    75% {
        transform: translateY(50%) rotate(7deg)
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotate(0deg)
    }
}
.slideScaleLeftIn {
    -webkit-animation-name: slideScaleLeftIn;
    animation-name: slideScaleLeftIn
}
@-webkit-keyframes slideScaleLeftIn {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-2000px) scale(.1)
    }
    80% {
        opacity: 1;
        -webkit-transform: scale(.8)
    }
}
@keyframes slideScaleLeftIn {
    0% {
        opacity: 0;
        transform: translateX(-2000px) scale(.1)
    }
    80% {
        opacity: 1;
        transform: scale(.8)
    }
}
.slideScaleRightIn {
    -webkit-animation-name: slideScaleRightIn;
    animation-name: slideScaleRightIn
}
@-webkit-keyframes slideScaleRightIn {
    0% {
        opacity: 0;
        -webkit-transform: translateX(2000px) scale(.1)
    }
    80% {
        opacity: 1;
        -webkit-transform: scale(.8)
    }
}
@keyframes slideScaleRightIn {
    0% {
        opacity: 0;
        transform: translateX(2000px) scale(.1)
    }
    80% {
        opacity: 1;
        transform: scale(.8)
    }
}
.slideScaleUpIn {
    -webkit-animation-name: slideScaleUpIn;
    animation-name: slideScaleUpIn
}
@-webkit-keyframes slideScaleUpIn {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-2000px) scale(.1)
    }
    80% {
        opacity: 1;
        -webkit-transform: scale(.8)
    }
}
@keyframes slideScaleUpIn {
    0% {
        opacity: 0;
        transform: translateY(-2000px) scale(.1)
    }
    80% {
        opacity: 1;
        transform: scale(.8)
    }
}
.slideScaleDownIn {
    -webkit-animation-name: slideScaleDownIn;
    animation-name: slideScaleDownIn
}
@-webkit-keyframes slideScaleDownIn {
    0% {
        opacity: 0;
        -webkit-transform: translateY(2000px) scale(.1)
    }
    80% {
        opacity: 1;
        -webkit-transform: scale(.8)
    }
}
@keyframes slideScaleDownIn {
    0% {
        opacity: 0;
        transform: translateY(2000px) scale(.1)
    }
    80% {
        opacity: 1;
        transform: scale(.8)
    }
}
.slideScaleLeftOut {
    -webkit-animation-name: slideScaleLeftOut;
    animation-name: slideScaleLeftOut
}
@-webkit-keyframes slideScaleLeftOut {
    30% {
        opacity: 1;
        -webkit-transform: scale(1.2)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-2000px) scale(.1)
    }
}
@keyframes slideScaleLeftOut {
    30% {
        opacity: 1;
        transform: scale(1.2)
    }
    100% {
        opacity: 0;
        transform: translateX(-2000px) scale(.1)
    }
}
.slideScaleRightOut {
    -webkit-animation-name: slideScaleRightOut;
    animation-name: slideScaleRightOut
}
@-webkit-keyframes slideScaleRightOut {
    30% {
        opacity: 1;
        -webkit-transform: scale(1.2)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(2000px) scale(.1)
    }
}
@keyframes slideScaleRightOut {
    30% {
        opacity: 1;
        transform: scale(1.2)
    }
    100% {
        opacity: 0;
        transform: translateX(2000px) scale(.1)
    }
}
.slideScaleUpOut {
    -webkit-animation-name: slideScaleUpOut;
    animation-name: slideScaleUpOut
}
@-webkit-keyframes slideScaleUpOut {
    30% {
        opacity: 1;
        -webkit-transform: scale(1.2)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-2000px) scale(.1)
    }
}
@keyframes slideScaleUpOut {
    30% {
        opacity: 1;
        transform: scale(1.2)
    }
    100% {
        opacity: 0;
        transform: translateY(-2000px) scale(.1)
    }
}
.slideScaleDownOut {
    -webkit-animation-name: slideScaleDownOut;
    animation-name: slideScaleDownOut
}
@-webkit-keyframes slideScaleDownOut {
    30% {
        opacity: 1;
        -webkit-transform: scale(1.2)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(2000px) scale(.1)
    }
}
@keyframes slideScaleDownOut {
    30% {
        opacity: 1;
        transform: scale(1.2)
    }
    100% {
        opacity: 0;
        transform: translateY(2000px) scale(.1)
    }
}
.hinge {
    -webkit-animation-name: hinge;
    animation-name: hinge
}
@-webkit-keyframes hinge {
    0% {
        -webkit-transform: rotate(0);
        -webkit-transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out
    }
    20%,
    60% {
        -webkit-transform: rotate(80deg);
        -webkit-transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out
    }
    40% {
        -webkit-transform: rotate(60deg);
        -webkit-transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out
    }
    80% {
        -webkit-transform: rotate(60deg) translateY(0);
        opacity: 1;
        -webkit-transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out
    }
    100% {
        -webkit-transform: translateY(700px);
        transform: translateY(700px);
        opacity: 0
    }
}
@keyframes hinge {
    0% {
        transform: rotate(0);
        transform-origin: top left;
        animation-timing-function: ease-in-out
    }
    20%,
    60% {
        transform: rotate(80deg);
        transform-origin: top left;
        animation-timing-function: ease-in-out
    }
    40% {
        transform: rotate(60deg);
        transform-origin: top left;
        animation-timing-function: ease-in-out
    }
    80% {
        transform: rotate(60deg) translateY(0);
        opacity: 1;
        transform-origin: top left;
        animation-timing-function: ease-in-out
    }
    100% {
        transform: translateY(700px);
        opacity: 0
    }
}
.rollIn {
    -webkit-animation-name: rollIn;
    animation-name: rollIn
}
@-webkit-keyframes rollIn {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100%) rotate(-120deg)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0) rotate(0)
    }
}
@keyframes rollIn {
    0% {
        opacity: 0;
        transform: translateX(-100%) rotate(-120deg)
    }
    100% {
        opacity: 1;
        transform: translateX(0) rotate(0)
    }
}
.rollOut {
    -webkit-animation-name: rollOut;
    animation-name: rollOut
}
@-webkit-keyframes rollOut {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0) rotate(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(100%) rotate(120deg)
    }
}
@keyframes rollOut {
    0% {
        opacity: 1;
        transform: translateX(0) rotate(0)
    }
    100% {
        opacity: 0;
        transform: translateX(100%) rotate(120deg)
    }
}
.magic {
    -webkit-animation-name: magic;
    animation-name: magic
}
.swap {
    -webkit-animation-name: swap;
    animation-name: swap
}
.twistDownIn {
    -webkit-animation-name: twistDownIn;
    animation-name: twistDownIn
}
.twistUpIn {
    -webkit-animation-name: twistUpIn;
    animation-name: twistUpIn
}
.perspectiveDownOut {
    -webkit-animation-name: perspectiveDownOut;
    animation-name: perspectiveDownOut
}
.perspectiveLeftOut {
    -webkit-animation-name: perspectiveLeftOut;
    animation-name: perspectiveLeftOut
}
.perspectiveRightOut {
    -webkit-animation-name: perspectiveRightOut;
    animation-name: perspectiveRightOut
}
.perspectiveUpOut {
    -webkit-animation-name: perspectiveUpOut;
    animation-name: perspectiveUpOut
}
.perspectiveDownIn {
    -webkit-animation-name: perspectiveDownIn;
    animation-name: perspectiveDownIn
}
.perspectiveLeftIn {
    -webkit-animation-name: perspectiveLeftIn;
    animation-name: perspectiveLeftIn
}
.perspectiveRightIn {
    -webkit-animation-name: perspectiveRightIn;
    animation-name: perspectiveRightIn
}
.perspectiveUpIn {
    -webkit-animation-name: perspectiveUpIn;
    animation-name: perspectiveUpIn
}
.puffIn {
    -webkit-animation-name: puffIn;
    animation-name: puffIn
}
.puffOut {
    -webkit-animation-name: puffOut;
    animation-name: puffOut
}
.roLeftOut {
    -webkit-animation-name: roLeftOut;
    animation-name: roLeftOut
}
.roRightOut {
    -webkit-animation-name: roRightOut;
    animation-name: roRightOut
}
.roUpOut {
    -webkit-animation-name: roUpOut;
    animation-name: roUpOut
}
.roDownOut {
    -webkit-animation-name: roDownOut;
    animation-name: roDownOut
}
.roLeftIn {
    -webkit-animation-name: roLeftIn;
    animation-name: roLeftIn
}
.roRightIn {
    -webkit-animation-name: roRightIn;
    animation-name: roRightIn
}
.roUpIn {
    -webkit-animation-name: roUpIn;
    animation-name: roUpIn
}
.roDownIn {
    -webkit-animation-name: roDownIn;
    animation-name: roDownIn
}
.slideOneLeftOut {
    -webkit-animation-name: slideOneLeftOut;
    animation-name: slideOneLeftOut
}
.slideOneRightOut {
    -webkit-animation-name: slideOneRightOut;
    animation-name: slideOneRightOut
}
.slideOneUpOut {
    -webkit-animation-name: slideOneUpOut;
    animation-name: slideOneUpOut
}
.slideOneDownOut {
    -webkit-animation-name: slideOneDownOut;
    animation-name: slideDown
}
.slideOneLeftIn {
    -webkit-animation-name: slideOneLeftIn;
    animation-name: slideOneLeftIn
}
.slideOneRightIn {
    -webkit-animation-name: slideOneRightIn;
    animation-name: slideOneRightIn
}
.slideOneUpIn {
    -webkit-animation-name: slideOneUpIn;
    animation-name: slideOneUpIn
}
.slideOneDownIn {
    -webkit-animation-name: slideOneDownIn;
    animation-name: slideOneDownIn
}
.vanishIn {
    -webkit-animation-name: vanishIn;
    animation-name: vanishIn
}
.vanishOut {
    -webkit-animation-name: vanishOut;
    animation-name: vanishOut
}
.swashOut {
    -webkit-animation-name: swashOut;
    animation-name: swashOut
}
.swashIn {
    -webkit-animation-name: swashIn;
    animation-name: swashIn
}
.foolishOut {
    -webkit-animation-name: foolishOut;
    animation-name: foolishOut
}
.foolishIn {
    -webkit-animation-name: foolishIn;
    animation-name: foolishIn
}
.holeOut {
    -webkit-animation-name: holeOut;
    animation-name: holeOut
}
.slideTinRightOut {
    -webkit-animation-name: slideTinRightOut;
    animation-name: slideTinRightOut
}
.slideTinLeftOut {
    -webkit-animation-name: slideTinLeftOut;
    animation-name: slideTinLeftOut
}
.slideTinUpOut {
    -webkit-animation-name: slideTinUpOut;
    animation-name: slideTinUpOut
}
.slideTinDownOut {
    -webkit-animation-name: slideTinDownOut;
    animation-name: slideTinDownOut
}
.slideTinRightIn {
    -webkit-animation-name: slideTinRightIn;
    animation-name: slideTinRightIn
}
.slideTinLeftIn {
    -webkit-animation-name: slideTinLeftIn;
    animation-name: slideTinLeftIn
}
.slideTinUpIn {
    -webkit-animation-name: slideTinUpIn;
    animation-name: slideTinUpIn
}
.slideTinDownIn {
    -webkit-animation-name: slideTinDownIn;
    animation-name: slideTinDownIn
}
.bombRightOut {
    -webkit-animation-name: bombRightOut;
    animation-name: bombRightOut
}
.bombLeftOut {
    -webkit-animation-name: bombLeftOut;
    animation-name: bombLeftOut
}
@-webkit-keyframes magic {
    0% {
        opacity: 1;
        -webkit-transform-origin: 100% 200%;
        -webkit-transform: scale(1) rotate(0)
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: 200% 500%;
        -webkit-transform: scale(0) rotate(270deg)
    }
}
@keyframes magic {
    0% {
        opacity: 1;
        transform-origin: 100% 200%;
        transform: scale(1) rotate(0)
    }
    100% {
        opacity: 0;
        transform-origin: 200% 500%;
        transform: scale(0) rotate(270deg)
    }
}
@-webkit-keyframes perspectiveDownOut {
    0% {
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: perspective(800px) rotateX(0)
    }
    50% {
        opacity: 1
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: perspective(800px) rotateX(-180deg)
    }
}
@keyframes perspectiveDownOut {
    0% {
        transform-origin: 50% 100%;
        transform: perspective(800px) rotateX(0)
    }
    50% {
        opacity: 1
    }
    100% {
        opacity: 0;
        transform-origin: 50% 100%;
        transform: perspective(800px) rotateX(-180deg)
    }
}
@-webkit-keyframes perspectiveLeftOut {
    0% {
        -webkit-transform-origin: 0 50%;
        -webkit-transform: perspective(800px) rotateY(0)
    }
    50% {
        opacity: 1
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: 0 50%;
        -webkit-transform: perspective(800px) rotateY(-180deg)
    }
}
@keyframes perspectiveLeftOut {
    0% {
        transform-origin: 0 50%;
        transform: perspective(800px) rotateY(0)
    }
    50% {
        opacity: 1
    }
    100% {
        opacity: 0;
        transform-origin: 0 50%;
        transform: perspective(800px) rotateY(-180deg)
    }
}
@-webkit-keyframes perspectiveRightOut {
    0% {
        -webkit-transform-origin: 100% 50%;
        -webkit-transform: perspective(800px) rotateY(0)
    }
    50% {
        opacity: 1
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: 100% 50%;
        -webkit-transform: perspective(800px) rotateY(180deg)
    }
}
@keyframes perspectiveRightOut {
    0% {
        transform-origin: 100% 50%;
        transform: perspective(800px) rotateY(0)
    }
    50% {
        opacity: 1
    }
    100% {
        opacity: 0;
        transform-origin: 100% 50%;
        transform: perspective(800px) rotateY(180deg)
    }
}
@-webkit-keyframes perspectiveUpOut {
    0% {
        -webkit-transform-origin: 50% 0;
        -webkit-transform: perspective(800px) rotateX(0)
    }
    50% {
        opacity: 1
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: 50% 0;
        -webkit-transform: perspective(800px) rotateX(180deg)
    }
}
@keyframes perspectiveUpOut {
    0% {
        transform-origin: 50% 0;
        transform: perspective(800px) rotateX(0)
    }
    50% {
        opacity: 1
    }
    100% {
        opacity: 0;
        transform-origin: 50% 0;
        transform: perspective(800px) rotateX(180deg)
    }
}
@-webkit-keyframes perspectiveDownIn {
    0% {
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: perspective(800px) rotateX(-180deg)
    }
    100% {
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: perspective(800px) rotateX(0)
    }
}
@keyframes perspectiveDownIn {
    0% {
        transform-origin: 50% 100%;
        transform: perspective(800px) rotateX(-180deg)
    }
    100% {
        transform-origin: 50% 100%;
        transform: perspective(800px) rotateX(0)
    }
}
@-webkit-keyframes perspectiveLeftIn {
    0% {
        -webkit-transform-origin: 0 50%;
        -webkit-transform: perspective(800px) rotateY(-180deg)
    }
    100% {
        -webkit-transform-origin: 0 50%;
        -webkit-transform: perspective(800px) rotateY(0)
    }
}
@keyframes perspectiveLeftIn {
    0% {
        transform-origin: 0 50%;
        transform: perspective(800px) rotateY(-180deg)
    }
    100% {
        transform-origin: 0 50%;
        transform: perspective(800px) rotateY(0)
    }
}
@-webkit-keyframes perspectiveRightIn {
    0% {
        -webkit-transform-origin: 100% 50%;
        -webkit-transform: perspective(800px) rotateY(180deg)
    }
    100% {
        -webkit-transform-origin: 100% 50%;
        -webkit-transform: perspective(800px) rotateY(0)
    }
}
@keyframes perspectiveRightIn {
    0% {
        transform-origin: 100% 50%;
        transform: perspective(800px) rotateY(180deg)
    }
    100% {
        transform-origin: 100% 50%;
        transform: perspective(800px) rotateY(0)
    }
}
@-webkit-keyframes perspectiveUpIn {
    0% {
        -webkit-transform-origin: 50% 0;
        -webkit-transform: perspective(800px) rotateX(180deg)
    }
    100% {
        -webkit-transform-origin: 50% 0;
        -webkit-transform: perspective(800px) rotateX(0)
    }
}
@keyframes perspectiveUpIn {
    0% {
        transform-origin: 50% 0;
        transform: perspective(800px) rotateX(180deg)
    }
    100% {
        transform-origin: 50% 0;
        transform: perspective(800px) rotateX(0)
    }
}
@-webkit-keyframes puffIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(2)
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1)
    }
}
@keyframes puffIn {
    0% {
        opacity: 0;
        transform: scale(2)
    }
    100% {
        opacity: 1;
        transform: scale(1)
    }
}
@-webkit-keyframes puffOut {
    0% {
        opacity: 1;
        -webkit-transform: scale(1)
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(2)
    }
}
@keyframes puffOut {
    0% {
        opacity: 1;
        transform: scale(1)
    }
    100% {
        opacity: 0;
        transform: scale(2)
    }
}
@-webkit-keyframes roLeftOut {
    0% {
        -webkit-transform-origin: 50% 50% -200px;
        -webkit-transform: perspective(800px) translateZ(-200px) rotateY(0)
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: 50% 50% -200px;
        -webkit-transform: perspective(800px) translateZ(-200px) rotateY(-180deg)
    }
}
@keyframes roLeftOut {
    0% {
        transform-origin: 50% 50% -200px;
        transform: perspective(800px) translateZ(-200px) rotateY(0)
    }
    100% {
        opacity: 0;
        transform-origin: 50% 50% -200px;
        transform: perspective(800px) translateZ(-200px) rotateY(-180deg)
    }
}
@-webkit-keyframes roRightOut {
    0% {
        -webkit-transform-origin: 50% 50% -200px;
        -webkit-transform: perspective(800px) translateZ(-200px) rotateY(0)
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: 50% 50% -200px;
        -webkit-transform: perspective(800px) translateZ(-200px) rotateY(180deg)
    }
}
@keyframes roRightOut {
    0% {
        transform-origin: 50% 50% -200px;
        transform: perspective(800px) translateZ(-200px) rotateY(0)
    }
    100% {
        opacity: 0;
        transform-origin: 50% 50% -200px;
        transform: perspective(800px) translateZ(-200px) rotateY(180deg)
    }
}
@-webkit-keyframes roUpOut {
    0% {
        -webkit-transform-origin: 50% 50% -150px;
        -webkit-transform: perspective(800px) translateZ(-150px) rotateX(0)
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: 50% 50% -150px;
        -webkit-transform: perspective(800px) translateZ(-150px) rotateX(180deg)
    }
}
@keyframes roUpOut {
    0% {
        transform-origin: 50% 50% -150px;
        transform: perspective(800px) translateZ(-150px) rotateX(0)
    }
    100% {
        opacity: 0;
        transform-origin: 50% 50% -150px;
        transform: perspective(800px) translateZ(-150px) rotateX(180deg)
    }
}
@-webkit-keyframes roDownOut {
    0% {
        -webkit-transform-origin: 50% 50% -150px;
        -webkit-transform: perspective(800px) translateZ(-150px) rotateX(0)
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: 50% 50% -150px;
        -webkit-transform: perspective(800px) translateZ(-150px) rotateX(-180deg)
    }
}
@keyframes roDownOut {
    0% {
        transform-origin: 50% 50% -150px;
        transform: perspective(800px) translateZ(-150px) rotateX(0)
    }
    100% {
        opacity: 0;
        transform-origin: 50% 50% -150px;
        transform: perspective(800px) translateZ(-150px) rotateX(-180deg)
    }
}
@-webkit-keyframes roLeftIn {
    0% {
        opacity: 0;
        -webkit-transform-origin: 50% 50% -200px;
        -webkit-transform: perspective(800px) translateZ(-200px) rotateY(-180deg)
    }
    100% {
        opacity: 1;
        -webkit-transform-origin: 50% 50% -200px;
        -webkit-transform: perspective(800px) translateZ(-200px) rotateY(0)
    }
}
@keyframes roLeftIn {
    0% {
        opacity: 0;
        transform-origin: 50% 50% -200px;
        transform: perspective(800px) translateZ(-200px) rotateY(-180deg)
    }
    100% {
        opacity: 1;
        transform-origin: 50% 50% -200px;
        transform: perspective(800px) translateZ(-200px) rotateY(0)
    }
}
@-webkit-keyframes roRightIn {
    0% {
        opacity: 0;
        -webkit-transform-origin: 50% 50% -200px;
        -webkit-transform: perspective(800px) translateZ(-200px) rotateY(180deg)
    }
    100% {
        opacity: 1;
        -webkit-transform-origin: 50% 50% -200px;
        -webkit-transform: perspective(800px) translateZ(-200px) rotateY(0)
    }
}
@keyframes roRightIn {
    0% {
        opacity: 0;
        transform-origin: 50% 50% -200px;
        transform: perspective(800px) translateZ(-200px) rotateY(180deg)
    }
    100% {
        opacity: 1;
        transform-origin: 50% 50% -200px;
        transform: perspective(800px) translateZ(-200px) rotateY(0)
    }
}
@-webkit-keyframes roUpIn {
    0% {
        opacity: 0;
        -webkit-transform-origin: 50% 50% -150px;
        -webkit-transform: perspective(800px) translateZ(-150px) rotateX(180deg)
    }
    100% {
        opacity: 1;
        -webkit-transform-origin: 50% 50% -150px;
        -webkit-transform: perspective(800px) translateZ(-150px) rotateX(0)
    }
}
@keyframes roUpIn {
    0% {
        opacity: 0;
        transform-origin: 50% 50% -150px;
        transform: perspective(800px) translateZ(-150px) rotateX(180deg)
    }
    100% {
        opacity: 1;
        transform-origin: 50% 50% -150px;
        transform: perspective(800px) translateZ(-150px) rotateX(0)
    }
}
@-webkit-keyframes roDownIn {
    0% {
        opacity: 0;
        -webkit-transform-origin: 50% 50% -150px;
        -webkit-transform: perspective(800px) translateZ(-150px) rotateX(-180deg)
    }
    100% {
        opacity: 1;
        -webkit-transform-origin: 50% 50% -150px;
        -webkit-transform: perspective(800px) translateZ(-150px) rotateX(0)
    }
}
@keyframes roDownIn {
    0% {
        opacity: 0;
        transform-origin: 50% 50% -150px;
        transform: perspective(800px) translateZ(-150px) rotateX(-180deg)
    }
    100% {
        opacity: 1;
        transform-origin: 50% 50% -150px;
        transform: perspective(800px) translateZ(-150px) rotateX(0)
    }
}
@-webkit-keyframes slideOneLeftOut {
    from {
        -webkit-transform: translateX(0)
    }
    to {
        -webkit-transform: translateX(-100%)
    }
}
@keyframes slideOneLeftOut {
    from {
        transform: translateX(0)
    }
    to {
        transform: translateX(-100%)
    }
}
@-webkit-keyframes slideOneRightOut {
    from {
        -webkit-transform: translateX(0)
    }
    to {
        -webkit-transform: translateX(100%)
    }
}
@keyframes slideOneRightOut {
    from {
        transform: translateX(0)
    }
    to {
        transform: translateX(100%)
    }
}
@-webkit-keyframes slideOneUpOut {
    from {
        -webkit-transform: translateY(0)
    }
    to {
        -webkit-transform: translateY(-100%)
    }
}
@keyframes slideOneUpOut {
    from {
        transform: translateY(0)
    }
    to {
        transform: translateY(-100%)
    }
}
@-webkit-keyframes slideOneDownOut {
    from {
        -webkit-transform: translateY(0)
    }
    to {
        -webkit-transform: translateY(100%)
    }
}
@keyframes slideOneDownOut {
    from {
        transform: translateY(0)
    }
    to {
        transform: translateY(100%)
    }
}
@-webkit-keyframes slideOneLeftIn {
    from {
        -webkit-transform: translateX(-100%)
    }
    to {
        -webkit-transform: translateX(0)
    }
}
@keyframes slideOneLeftIn {
    from {
        transform: translateX(-100%)
    }
    to {
        transform: translateX(0)
    }
}
@-webkit-keyframes slideOneRightIn {
    from {
        -webkit-transform: translateX(100%)
    }
    to {
        -webkit-transform: translateX(0)
    }
}
@keyframes slideOneRightIn {
    from {
        transform: translateX(100%)
    }
    to {
        transform: translateX(0)
    }
}
@-webkit-keyframes slideOneUpIn {
    from {
        -webkit-transform: translateY(-100%)
    }
    to {
        -webkit-transform: translateY(0)
    }
}
@keyframes slideOneUpIn {
    from {
        transform: translateY(-100%)
    }
    to {
        transform: translateY(0)
    }
}
@-webkit-keyframes slideOneDownIn {
    from {
        -webkit-transform: translateY(100%)
    }
    to {
        -webkit-transform: translateY(0)
    }
}
@keyframes slideOneDownIn {
    from {
        transform: translateY(100%)
    }
    to {
        transform: translateY(0)
    }
}
@-webkit-keyframes swap {
    0% {
        opacity: 0;
        -webkit-transform-origin: 0 100%;
        -webkit-transform: scale(0) translate(-200%, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform-origin: 100% 100%;
        -webkit-transform: scale(1) translate(0, 0)
    }
}
@keyframes swap {
    0% {
        opacity: 0;
        transform-origin: 0 100%;
        transform: scale(0) translate(-200%, 0)
    }
    100% {
        opacity: 1;
        transform-origin: 100% 100%;
        transform: scale(1) translate(0, 0)
    }
}
@-webkit-keyframes twistDownIn {
    0% {
        opacity: 0;
        -webkit-transform-origin: 0 100%;
        -webkit-transform: scale(0) rotate(360deg) translateY(-100%)
    }
    30% {
        -webkit-transform-origin: 0 100%;
        -webkit-transform: scale(0) rotate(360deg) translateY(-100%)
    }
    100% {
        opacity: 1;
        -webkit-transform-origin: 100% 100%;
        -webkit-transform: scale(1) rotate(0) translateY(0)
    }
}
@keyframes twistDownIn {
    0% {
        opacity: 0;
        transform-origin: 0 100%;
        transform: scale(0) rotate(360deg) translateY(-100%)
    }
    30% {
        transform-origin: 0 100%;
        transform: scale(0) rotate(360deg) translateY(-100%)
    }
    100% {
        opacity: 1;
        transform-origin: 100% 100%;
        transform: scale(1) rotate(0) translateY(0)
    }
}
@-webkit-keyframes twistUpIn {
    0% {
        opacity: 0;
        -webkit-transform-origin: 100% 0;
        -webkit-transform: scale(0) rotate(360deg) translateY(100%)
    }
    30% {
        -webkit-transform-origin: 100% 0;
        -webkit-transform: scale(0) rotate(360deg) translateY(100%)
    }
    100% {
        opacity: 1;
        -webkit-transform-origin: 0 0;
        -webkit-transform: scale(1) rotate(0) translateY(0)
    }
}
@keyframes twistUpIn {
    0% {
        opacity: 0;
        transform-origin: 100% 0;
        transform: scale(0) rotate(360deg) translateY(100%)
    }
    30% {
        transform-origin: 100% 0;
        transform: scale(0) rotate(360deg) translateY(100%)
    }
    100% {
        opacity: 1;
        transform-origin: 0 0;
        transform: scale(1) rotate(0) translateY(0)
    }
}
@-webkit-keyframes vanishIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(2);
        -webkit-filter: blur(90px)
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        -webkit-filter: blur(0)
    }
}
@keyframes vanishIn {
    0% {
        opacity: 0;
        transform: scale(2)
    }
    100% {
        opacity: 1;
        transform: scale(1)
    }
}
@-webkit-keyframes vanishOut {
    0% {
        opacity: 1;
        -webkit-transform: scale(1)
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(2);
        -webkit-filter: blur(20px)
    }
}
@keyframes vanishOut {
    0% {
        opacity: 1;
        transform: scale(1)
    }
    100% {
        opacity: 0;
        transform: scale(2)
    }
}
@-webkit-keyframes swashOut {
    0% {
        opacity: 1;
        -webkit-transform: scale(1)
    }
    80% {
        opacity: 1;
        -webkit-transform: scale(.9)
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(0)
    }
}
@keyframes swashOut {
    0% {
        opacity: 1;
        transform: scale(1)
    }
    80% {
        opacity: 1;
        transform: scale(.9)
    }
    100% {
        opacity: 0;
        transform: scale(0)
    }
}
@-webkit-keyframes swashIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(0)
    }
    90% {
        opacity: 1;
        -webkit-transform: scale(.9)
    }
    100% {
        -webkit-transform: scale(1)
    }
}
@keyframes swashIn {
    0% {
        opacity: 0;
        transform: scale(0)
    }
    90% {
        opacity: 1;
        transform: scale(.9)
    }
    100% {
        transform: scale(1)
    }
}
@-webkit-keyframes foolishOut {
    0% {
        opacity: 1;
        -webkit-transform-origin: 50% 50%;
        -webkit-transform: scale(1) rotate(360deg)
    }
    20% {
        opacity: 1;
        -webkit-transform-origin: 0 0;
        -webkit-transform: scale(.5) rotate(0)
    }
    40% {
        opacity: 1;
        -webkit-transform-origin: 100% 0;
        -webkit-transform: scale(.5) rotate(0)
    }
    60% {
        opacity: 1;
        -webkit-transform-origin: 0;
        -webkit-transform: scale(.5) rotate(0)
    }
    80% {
        opacity: 1;
        -webkit-transform-origin: 0 100%;
        -webkit-transform: scale(.5) rotate(0)
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: 50% 50%;
        -webkit-transform: scale(0) rotate(0)
    }
}
@keyframes foolishOut {
    0% {
        opacity: 1;
        transform-origin: 50% 50%;
        transform: scale(1) rotate(360deg)
    }
    20% {
        opacity: 1;
        transform-origin: 0 0;
        transform: scale(.5) rotate(0)
    }
    40% {
        opacity: 1;
        transform-origin: 100% 0;
        transform: scale(.5) rotate(0)
    }
    60% {
        opacity: 1;
        transform-origin: 0;
        transform: scale(.5) rotate(0)
    }
    80% {
        opacity: 1;
        transform-origin: 0 100%;
        transform: scale(.5) rotate(0)
    }
    100% {
        opacity: 0;
        transform-origin: 50% 50%;
        transform: scale(0) rotate(0)
    }
}
@-webkit-keyframes foolishIn {
    0% {
        opacity: 0;
        -webkit-transform-origin: 50% 50%;
        -webkit-transform: scale(0) rotate(360deg)
    }
    20% {
        opacity: 1;
        -webkit-transform-origin: 0 100%;
        -webkit-transform: scale(.5) rotate(0)
    }
    40% {
        opacity: 1;
        -webkit-transform-origin: 100% 100%;
        -webkit-transform: scale(.5) rotate(0)
    }
    60% {
        opacity: 1;
        -webkit-transform-origin: 0;
        -webkit-transform: scale(.5) rotate(0)
    }
    80% {
        opacity: 1;
        -webkit-transform-origin: 0 0;
        -webkit-transform: scale(.5) rotate(0)
    }
    100% {
        opacity: 1;
        -webkit-transform-origin: 50% 50%;
        -webkit-transform: scale(1) rotate(0)
    }
}
@keyframes foolishIn {
    0% {
        opacity: 0;
        transform-origin: 50% 50%;
        transform: scale(0) rotate(360deg)
    }
    20% {
        opacity: 1;
        transform-origin: 0 100%;
        transform: scale(.5) rotate(0)
    }
    40% {
        opacity: 1;
        transform-origin: 100% 100%;
        transform: scale(.5) rotate(0)
    }
    60% {
        opacity: 1;
        transform-origin: 0;
        transform: scale(.5) rotate(0)
    }
    80% {
        opacity: 1;
        transform-origin: 0 0;
        transform: scale(.5) rotate(0)
    }
    100% {
        opacity: 1;
        transform-origin: 50% 50%;
        transform: scale(1) rotate(0)
    }
}
@-webkit-keyframes holeOut {
    0% {
        opacity: 1;
        -webkit-transform: scale(1) rotateY(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(0) rotateY(180deg)
    }
}
@keyframes holeOut {
    0% {
        opacity: 1;
        transform: scale(1) rotateY(0)
    }
    100% {
        opacity: 0;
        transform: scale(0) rotateY(180deg)
    }
}
@-webkit-keyframes slideTinRightOut {
    0%, 20%, 40%, 50% {
        opacity: 1;
        -webkit-transform: scale(1) translateX(0)
    }
    10%,
    30% {
        opacity: 1;
        -webkit-transform: scale(1.1) translateX(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1) translateX(900%)
    }
}
@keyframes slideTinRightOut {
    0%, 20%, 40%, 50% {
        opacity: 1;
        transform: scale(1) translateX(0)
    }
    10%,
    30% {
        opacity: 1;
        transform: scale(1.1) translateX(0)
    }
    100% {
        opacity: 0;
        transform: scale(1) translateX(900%)
    }
}
@-webkit-keyframes slideTinLeftOut {
    0%, 20%, 40%, 50% {
        opacity: 1;
        -webkit-transform: scale(1) translateX(0)
    }
    10%,
    30% {
        opacity: 1;
        -webkit-transform: scale(1.1) translateX(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1) translateX(-900%)
    }
}
@keyframes slideTinLeftOut {
    0%, 20%, 40%, 50% {
        opacity: 1;
        transform: scale(1) translateX(0)
    }
    10%,
    30% {
        opacity: 1;
        transform: scale(1.1) translateX(0)
    }
    100% {
        opacity: 0;
        transform: scale(1) translateX(-900%)
    }
}
@-webkit-keyframes slideTinUpOut {
    0%, 20%, 40%, 50% {
        opacity: 1;
        -webkit-transform: scale(1) translateY(0)
    }
    10%,
    30% {
        opacity: 1;
        -webkit-transform: scale(1.1) translateY(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1) translateY(-900%)
    }
}
@keyframes slideTinUpOut {
    0%, 20%, 40%, 50% {
        opacity: 1;
        transform: scale(1) translateY(0)
    }
    10%,
    30% {
        opacity: 1;
        transform: scale(1.1) translateY(0)
    }
    100% {
        opacity: 0;
        transform: scale(1) translateY(-900%)
    }
}
@-webkit-keyframes slideTinDownOut {
    0%, 20%, 40%, 50% {
        opacity: 1;
        -webkit-transform: scale(1) translateY(0)
    }
    10%,
    30% {
        opacity: 1;
        -webkit-transform: scale(1.1) translateY(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1) translateY(900%)
    }
}
@keyframes slideTinDownOut {
    0%, 20%, 40%, 50% {
        opacity: 1;
        transform: scale(1) translateY(0)
    }
    10%,
    30% {
        opacity: 1;
        transform: scale(1.1) translateY(0)
    }
    100% {
        opacity: 0;
        transform: scale(1) translateY(900%)
    }
}
@-webkit-keyframes slideTinRightIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(1) translateX(900%)
    }
    50%,
    70%,
    90% {
        opacity: 1;
        -webkit-transform: scale(1.1) translateX(0)
    }
    100%,
    60%,
    80% {
        opacity: 1;
        -webkit-transform: scale(1) translateX(0)
    }
}
@keyframes slideTinRightIn {
    0% {
        opacity: 0;
        transform: scale(1) translateX(900%)
    }
    50%,
    70%,
    90% {
        opacity: 1;
        transform: scale(1.1) translateX(0)
    }
    100%,
    60%,
    80% {
        opacity: 1;
        transform: scale(1) translateX(0)
    }
}
@-webkit-keyframes slideTinLeftIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(1) translateX(-900%)
    }
    50%,
    70%,
    90% {
        opacity: 1;
        -webkit-transform: scale(1.1) translateX(0)
    }
    100%,
    60%,
    80% {
        opacity: 1;
        -webkit-transform: scale(1) translateX(0)
    }
}
@keyframes slideTinLeftIn {
    0% {
        opacity: 0;
        transform: scale(1) translateX(-900%)
    }
    50%,
    70%,
    90% {
        opacity: 1;
        transform: scale(1.1) translateX(0)
    }
    100%,
    60%,
    80% {
        opacity: 1;
        transform: scale(1) translateX(0)
    }
}
@-webkit-keyframes slideTinUpIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(1) translateY(-900%)
    }
    50%,
    70%,
    90% {
        opacity: 1;
        -webkit-transform: scale(1.1) translateY(0)
    }
    100%,
    60%,
    80% {
        opacity: 1;
        -webkit-transform: scale(1) translateY(0)
    }
}
@keyframes slideTinUpIn {
    0% {
        opacity: 0;
        transform: scale(1) translateY(-900%)
    }
    50%,
    70%,
    90% {
        opacity: 1;
        transform: scale(1.1) translateY(0)
    }
    100%,
    60%,
    80% {
        opacity: 1;
        transform: scale(1) translateY(0)
    }
}
@-webkit-keyframes slideTinDownIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(1) translateY(900%)
    }
    50%,
    70%,
    90% {
        opacity: 1;
        -webkit-transform: scale(1.1) translateY(0)
    }
    100%,
    60%,
    80% {
        opacity: 1;
        -webkit-transform: scale(1) translateY(0)
    }
}
@keyframes slideTinDownIn {
    0% {
        opacity: 0;
        transform: scale(1) translateY(900%)
    }
    50%,
    70%,
    90% {
        opacity: 1;
        transform: scale(1.1) translateY(0)
    }
    100%,
    60%,
    80% {
        opacity: 1;
        transform: scale(1) translateY(0)
    }
}
@-webkit-keyframes bombRightOut {
    0% {
        opacity: 1;
        -webkit-transform: rotate(0)
    }
    50% {
        opacity: 1;
        -webkit-transform-origin: 200% 50%;
        -webkit-transform: rotate(160deg);
        -webkit-filter: blur(0)
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: 200% 50%;
        -webkit-transform: rotate(160deg);
        -webkit-filter: blur(20px)
    }
}
@keyframes bombRightOut {
    0% {
        opacity: 1;
        transform: rotate(0)
    }
    50% {
        opacity: 1;
        transform-origin: 200% 50%;
        transform: rotate(160deg)
    }
    100% {
        opacity: 0;
        transform-origin: 200% 50%;
        transform: rotate(160deg)
    }
}
@-webkit-keyframes bombLeftOut {
    0% {
        opacity: 1;
        -webkit-transform-origin: 50% 50%;
        -webkit-transform: rotate(0)
    }
    50% {
        opacity: 1;
        -webkit-transform-origin: -100% 50%;
        -webkit-transform: rotate(-160deg);
        -webkit-filter: blur(0)
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: -100% 50%;
        -webkit-transform: rotate(-160deg);
        -webkit-filter: blur(20px)
    }
}
@keyframes bombLeftOut {
    0% {
        opacity: 1;
        transform-origin: 50% 50%;
        transform: rotate(0)
    }
    50% {
        opacity: 1;
        transform-origin: -100% 50%;
        transform: rotate(-160deg)
    }
    100% {
        opacity: 0;
        transform-origin: -100% 50%;
        transform: rotate(-160deg)
    }
}
.pullIn {
    -webkit-animation-name: pullIn;
    animation-name: pullIn
}
@-webkit-keyframes pullIn {
    from {
        -webkit-transform: scale(0);
        opacity: 0
    }
}
@keyframes pullIn {
    from {
        transform: scale(0);
        opacity: 0
    }
}
.pullOut {
    -webkit-animation-name: pullOut;
    animation-name: pullOut
}
@-webkit-keyframes pullOut {
    to {
        -webkit-transform: scale(0);
        opacity: 0
    }
}
@keyframes pullOut {
    to {
        transform: scale(0);
        opacity: 0
    }
}
.pushIn {
    -webkit-animation-name: pushIn;
    animation-name: pushIn
}
@-webkit-keyframes pushIn {
    from {
        -webkit-transform: scale(2);
        opacity: 0
    }
}
@keyframes pushIn {
    from {
        transform: scale(2);
        opacity: 0
    }
}
.pushOut {
    -webkit-animation-name: pushOut;
    animation-name: pushOut
}
@-webkit-keyframes pushOut {
    to {
        -webkit-transform: scale(2);
        opacity: 0
    }
}
@keyframes pushOut {
    to {
        transform: scale(2);
        opacity: 0
    }
}
.pullBounceIn {
    -webkit-animation-name: pullBounceIn;
    animation-name: pullBounceIn
}
@-webkit-keyframes pullBounceIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(0)
    }
    70% {
        opacity: 1;
        -webkit-transform: scale(1.2)
    }
}
@keyframes pullBounceIn {
    0% {
        opacity: 0;
        transform: scale(0)
    }
    70% {
        opacity: 1;
        transform: scale(1.2)
    }
}
.pullBounceOut {
    -webkit-animation-name: pullBounceOut;
    animation-name: pullBounceOut
}
@-webkit-keyframes pullBounceOut {
    30% {
        opacity: 1;
        -webkit-transform: scale(1.2)
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(0)
    }
}
@keyframes pullBounceOut {
    30% {
        opacity: 1;
        transform: scale(1.2)
    }
    100% {
        opacity: 0;
        transform: scale(0)
    }
}
.pushBounceIn {
    -webkit-animation-name: pushBounceIn;
    animation-name: pushBounceIn
}
@-webkit-keyframes pushBounceIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(2)
    }
    70% {
        opacity: 1;
        -webkit-transform: scale(.8)
    }
}
@keyframes pushBounceIn {
    0% {
        opacity: 0;
        transform: scale(2)
    }
    70% {
        opacity: 1;
        transform: scale(.8)
    }
}
.pushBounceOut {
    -webkit-animation-name: pushBounceOut;
    animation-name: pushBounceOut
}
@-webkit-keyframes pushBounceOut {
    30% {
        -webkit-transform: scale(.8)
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(2)
    }
}
@keyframes pushBounceOut {
    30% {
        transform: scale(.8)
    }
    100% {
        opacity: 0;
        transform: scale(2)
    }
}
.pullSoftIn {
    -webkit-animation-name: pullSoftIn;
    animation-name: pullSoftIn
}
@-webkit-keyframes pullSoftIn {
    from {
        -webkit-transform: scale(.9);
        opacity: 0
    }
}
@keyframes pullSoftIn {
    from {
        transform: scale(.9);
        opacity: 0
    }
}
.pullSoftOut {
    -webkit-animation-name: pullSoftOut;
    animation-name: pullSoftOut
}
@-webkit-keyframes pullSoftOut {
    to {
        -webkit-transform: scale(.9);
        opacity: 0
    }
}
@keyframes pullSoftOut {
    to {
        transform: scale(.9);
        opacity: 0
    }
}
.pushSoftIn {
    -webkit-animation-name: pushSoftIn;
    animation-name: pushSoftIn
}
@-webkit-keyframes pushSoftIn {
    from {
        -webkit-transform: scale(1.1);
        opacity: 0
    }
}
@keyframes pushSoftIn {
    from {
        transform: scale(1.1);
        opacity: 0
    }
}
.pushSoftOut {
    -webkit-animation-name: pushSoftOut;
    animation-name: pushSoftOut
}
@-webkit-keyframes pushSoftOut {
    to {
        -webkit-transform: scale(1.1);
        opacity: 0
    }
}
@keyframes pushSoftOut {
    to {
        transform: scale(1.1);
        opacity: 0
    }
}
.wave {
    -webkit-animation-name: wave;
    animation-name: wave
}
.waveLoop {
    -webkit-animation-name: wave;
    animation-name: wave;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}
@-webkit-keyframes wave {
    0%, 100% {
        -webkit-transform: perspective(800px) translateZ(0)
    }
    25%,
    75% {
        -webkit-transform: perspective(800px) translateZ(-100px)
    }
    50% {
        -webkit-transform: perspective(800px) translateZ(100px)
    }
}
@keyframes wave {
    0%, 100% {
        transform: perspective(800px) translateZ(0)
    }
    25%,
    75% {
        transform: perspective(800px) translateZ(-100px)
    }
    50% {
        transform: perspective(800px) translateZ(100px)
    }
}
.bobUp {
    -webkit-animation-name: bobUp;
    animation-name: bobUp;
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0
}
@-webkit-keyframes bobUp {
    0%, 100% {
        -webkit-transform: perspective(800px) rotateX(0)
    }
    25% {
        -webkit-transform: perspective(800px) rotateX(45deg)
    }
    50% {
        -webkit-transform: perspective(800px) rotateX(-30deg)
    }
    75% {
        -webkit-transform: perspective(800px) rotateX(30deg)
    }
}
@keyframes bobUp {
    0%, 100% {
        transform: perspective(800px) rotateX(0)
    }
    25% {
        transform: perspective(800px) rotateX(45deg)
    }
    50% {
        transform: perspective(800px) rotateX(-30deg)
    }
    75% {
        transform: perspective(800px) rotateX(30deg)
    }
}
.bobDown {
    -webkit-animation-name: bobDown;
    animation-name: bobDown;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%
}
@-webkit-keyframes bobDown {
    0%, 100% {
        -webkit-transform: perspective(800px) rotateX(0)
    }
    25% {
        -webkit-transform: perspective(800px) rotateX(-45deg)
    }
    50% {
        -webkit-transform: perspective(800px) rotateX(30deg)
    }
    75% {
        -webkit-transform: perspective(800px) rotateX(-30deg)
    }
}
@keyframes bobDown {
    0%, 100% {
        transform: perspective(800px) rotateX(0)
    }
    25% {
        transform: perspective(800px) rotateX(-45deg)
    }
    50% {
        transform: perspective(800px) rotateX(30deg)
    }
    75% {
        transform: perspective(800px) rotateX(-30deg)
    }
}
.bobLeft {
    -webkit-animation-name: bobLeft;
    animation-name: bobLeft;
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%
}
@-webkit-keyframes bobLeft {
    0%, 100% {
        -webkit-transform: perspective(800px) rotateY(0)
    }
    25% {
        -webkit-transform: perspective(800px) rotateY(-30deg)
    }
    50% {
        -webkit-transform: perspective(800px) rotateY(15deg)
    }
    75% {
        -webkit-transform: perspective(800px) rotateY(-15deg)
    }
}
@keyframes bobLeft {
    0%, 100% {
        transform: perspective(800px) rotateY(0)
    }
    25% {
        transform: perspective(800px) rotateY(-30deg)
    }
    50% {
        transform: perspective(800px) rotateY(15deg)
    }
    75% {
        transform: perspective(800px) rotateY(-15deg)
    }
}
.bobRight {
    -webkit-animation-name: bobRight;
    animation-name: bobRight;
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%
}
@-webkit-keyframes bobRight {
    0%, 100% {
        -webkit-transform: perspective(800px) rotateY(0)
    }
    25% {
        -webkit-transform: perspective(800px) rotateY(30deg)
    }
    50% {
        -webkit-transform: perspective(800px) rotateY(-15deg)
    }
    75% {
        -webkit-transform: perspective(800px) rotateY(15deg)
    }
}
@keyframes bobRight {
    0%, 100% {
        transform: perspective(800px) rotateY(0)
    }
    25% {
        transform: perspective(800px) rotateY(30deg)
    }
    50% {
        transform: perspective(800px) rotateY(-15deg)
    }
    75% {
        transform: perspective(800px) rotateY(15deg)
    }
}
.juggle {
    -webkit-animation-name: juggle;
    animation-name: juggle
}
@-webkit-keyframes juggle {
    0%, 100% {
        -webkit-transform: perspective(800px) translateZ(0) rotateY(0)
    }
    65% {
        -webkit-transform: perspective(800px) translateZ(400px) rotateY(420deg)
    }
}
@keyframes juggle {
    0%, 100% {
        transform: perspective(800px) translateZ(0) rotateY(0)
    }
    65% {
        transform: perspective(800px) translateZ(400px) rotateY(420deg)
    }
}
.flatten {
    -webkit-animation-name: flatten;
    animation-name: flatten
}
@-webkit-keyframes flatten {
    0% {
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: scaleX(1) skewX(0)
    }
    25% {
        -webkit-transform: scaleX(.8) skewX(45deg)
    }
    50% {
        -webkit-transform: scaleX(.5) skewX(-30deg)
    }
    75% {
        -webkit-transform: scaleX(.3) skewX(30deg)
    }
    100% {
        -webkit-transform: scaleX(0) skewX(0)
    }
}
@keyframes flatten {
    0% {
        transform-origin: 50% 100%;
        transform: scaleX(1) skewX(0)
    }
    25% {
        transform: scaleX(.8) skewX(45deg)
    }
    50% {
        transform: scaleX(.5) skewX(-30deg)
    }
    75% {
        transform: scaleX(.3) skewX(30deg)
    }
    100% {
        transform: scaleX(0) skewX(0)
    }
}
.ringLeft {
    -webkit-animation-name: ringLeft;
    animation-name: ringLeft
}
@-webkit-keyframes ringLeft {
    0% {
        -webkit-transform-origin: 50% 50% -200px;
        -webkit-transform: perspective(800px) translateZ(-200px) rotateY(0)
    }
    100% {
        -webkit-transform-origin: 50% 50% -200px;
        -webkit-transform: perspective(800px) translateZ(-200px) rotateY(-360deg)
    }
}
@keyframes ringLeft {
    0% {
        transform-origin: 50% 50% -200px;
        transform: perspective(800px) translateZ(-200px) rotateY(0)
    }
    100% {
        transform-origin: 50% 50% -200px;
        transform: perspective(800px) translateZ(-200px) rotateY(-360deg)
    }
}
.ringRight {
    -webkit-animation-name: ringRight;
    animation-name: ringRight
}
@-webkit-keyframes ringRight {
    0% {
        -webkit-transform-origin: 50% 50% -200px;
        -webkit-transform: perspective(800px) translateZ(-200px) rotateY(0)
    }
    100% {
        -webkit-transform-origin: 50% 50% -200px;
        -webkit-transform: perspective(800px) translateZ(-200px) rotateY(360deg)
    }
}
@keyframes ringRight {
    0% {
        transform-origin: 50% 50% -200px;
        transform: perspective(800px) translateZ(-200px) rotateY(0)
    }
    100% {
        transform-origin: 50% 50% -200px;
        transform: perspective(800px) translateZ(-200px) rotateY(360deg)
    }
}
.ringUp {
    -webkit-animation-name: ringUp;
    animation-name: ringUp
}
@-webkit-keyframes ringUp {
    0% {
        -webkit-transform-origin: 50% 50% -200px;
        -webkit-transform: perspective(800px) translateZ(-200px) rotateX(0)
    }
    100% {
        -webkit-transform-origin: 50% 50% -200px;
        -webkit-transform: perspective(800px) translateZ(-200px) rotateX(360deg)
    }
}
@keyframes ringUp {
    0% {
        transform-origin: 50% 50% -200px;
        transform: perspective(800px) translateZ(-200px) rotateX(0)
    }
    100% {
        transform-origin: 50% 50% -200px;
        transform: perspective(800px) translateZ(-200px) rotateX(360deg)
    }
}
.ringDown {
    -webkit-animation-name: ringDown;
    animation-name: ringDown
}
@-webkit-keyframes ringDown {
    0% {
        -webkit-transform-origin: 50% 50% -200px;
        -webkit-transform: perspective(800px) translateZ(-200px) rotateX(0)
    }
    100% {
        -webkit-transform-origin: 50% 50% -200px;
        -webkit-transform: perspective(800px) translateZ(-200px) rotateX(-360deg)
    }
}
@keyframes ringDown {
    0% {
        transform-origin: 50% 50% -200px;
        transform: perspective(800px) translateZ(-200px) rotateX(0)
    }
    100% {
        transform-origin: 50% 50% -200px;
        transform: perspective(800px) translateZ(-200px) rotateX(-360deg)
    }
}
.roEdgeUpIn {
    -webkit-animation-name: roEdgeUpIn;
    animation-name: roEdgeUpIn
}
@-webkit-keyframes roEdgeUpIn {
    0% {
        opacity: 0;
        -webkit-transform-origin: 50% 0;
        -webkit-transform: perspective(1200px) rotateX(-90deg)
    }
    100% {
        -webkit-transform-origin: 50% 0;
        -webkit-transform: perspective(1200px)
    }
}
@keyframes roEdgeUpIn {
    0% {
        opacity: 0;
        transform-origin: 50% 0;
        transform: perspective(1200px) rotateX(-90deg)
    }
    100% {
        transform-origin: 50% 0;
        transform: perspective(1200px)
    }
}
.roEdgeDownIn {
    -webkit-animation-name: roEdgeDownIn;
    animation-name: roEdgeDownIn
}
@-webkit-keyframes roEdgeDownIn {
    0% {
        opacity: 0;
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: perspective(1200px) rotateX(90deg)
    }
    100% {
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: perspective(1200px)
    }
}
@keyframes roEdgeDownIn {
    0% {
        opacity: 0;
        transform-origin: 50% 100%;
        transform: perspective(1200px) rotateX(90deg)
    }
    100% {
        transform-origin: 50% 100%;
        transform: perspective(1200px)
    }
}
.roEdgeLeftIn {
    -webkit-animation-name: roEdgeLeftIn;
    animation-name: roEdgeLeftIn
}
@-webkit-keyframes roEdgeLeftIn {
    0% {
        opacity: 0;
        -webkit-transform-origin: 0 50%;
        -webkit-transform: perspective(1200px) rotateY(90deg)
    }
    100% {
        -webkit-transform-origin: 0 50%;
        -webkit-transform: perspective(1200px)
    }
}
@keyframes roEdgeLeftIn {
    0% {
        opacity: 0;
        transform-origin: 0 50%;
        transform: perspective(1200px) rotateY(90deg)
    }
    100% {
        transform-origin: 0 50%;
        transform: perspective(1200px)
    }
}
.roEdgeRightIn {
    -webkit-animation-name: roEdgeRightIn;
    animation-name: roEdgeRightIn
}
@-webkit-keyframes roEdgeRightIn {
    0% {
        opacity: 0;
        -webkit-transform-origin: 100% 50%;
        -webkit-transform: perspective(1200px) rotateY(-90deg)
    }
    100% {
        -webkit-transform-origin: 100% 50%;
        -webkit-transform: perspective(1200px)
    }
}
@keyframes roEdgeRightIn {
    0% {
        opacity: 0;
        transform-origin: 100% 50%;
        transform: perspective(1200px) rotateY(-90deg)
    }
    100% {
        transform-origin: 100% 50%;
        transform: perspective(1200px)
    }
}
.roEdgeUpOut {
    -webkit-animation-name: roEdgeUpOut;
    animation-name: roEdgeUpOut
}
@-webkit-keyframes roEdgeUpOut {
    0% {
        -webkit-transform-origin: 50% 0;
        -webkit-transform: perspective(1200px)
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: 50% 0;
        -webkit-transform: perspective(1200px) rotateX(-90deg)
    }
}
@keyframes roEdgeUpOut {
    0% {
        transform-origin: 50% 0;
        transform: perspective(1200px)
    }
    100% {
        opacity: 0;
        transform-origin: 50% 0;
        transform: perspective(1200px) rotateX(-90deg)
    }
}
.roEdgeDownOut {
    -webkit-animation-name: roEdgeDownOut;
    animation-name: roEdgeDownOut
}
@-webkit-keyframes roEdgeDownOut {
    0% {
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: perspective(1200px)
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: perspective(1200px) rotateX(90deg)
    }
}
@keyframes roEdgeDownOut {
    0% {
        transform-origin: 50% 100%;
        transform: perspective(1200px)
    }
    100% {
        opacity: 0;
        transform-origin: 50% 100%;
        transform: perspective(1200px) rotateX(90deg)
    }
}
.roEdgeLeftOut {
    -webkit-animation-name: roEdgeLeftOut;
    animation-name: roEdgeLeftOut
}
@-webkit-keyframes roEdgeLeftOut {
    0% {
        -webkit-transform-origin: 0 50%;
        -webkit-transform: perspective(1200px)
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: 0 50%;
        -webkit-transform: perspective(1200px) rotateY(90deg)
    }
}
@keyframes roEdgeLeftOut {
    0% {
        transform-origin: 0 50%;
        transform: perspective(1200px)
    }
    100% {
        opacity: 0;
        transform-origin: 0 50%;
        transform: perspective(1200px) rotateY(90deg)
    }
}
.roEdgeRightOut {
    -webkit-animation-name: roEdgeRightOut;
    animation-name: roEdgeRightOut
}
@-webkit-keyframes roEdgeRightOut {
    0% {
        -webkit-transform-origin: 100% 50%;
        -webkit-transform: perspective(1200px)
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: 100% 50%;
        -webkit-transform: perspective(1200px) rotateY(-90deg)
    }
}
@keyframes roEdgeRightOut {
    0% {
        transform-origin: 100% 50%;
        transform: perspective(1200px)
    }
    100% {
        opacity: 0;
        transform-origin: 100% 50%;
        transform: perspective(1200px) rotateY(-90deg)
    }
}
.roEdgeSoftUpOut {
    -webkit-animation-name: roEdgeSoftUpOut;
    animation-name: roEdgeSoftUpOut
}
@-webkit-keyframes roEdgeSoftUpOut {
    0% {
        -webkit-transform-origin: 50% 0;
        -webkit-transform: perspective(1200px)
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: 50% 0;
        -webkit-transform: perspective(1200px) rotateX(-20deg)
    }
}
@keyframes roEdgeSoftUpOut {
    0% {
        transform-origin: 50% 0;
        transform: perspective(1200px)
    }
    100% {
        opacity: 0;
        transform-origin: 50% 0;
        transform: perspective(1200px) rotateX(-20deg)
    }
}
.roEdgeSoftDownOut {
    -webkit-animation-name: roEdgeSoftDownOut;
    animation-name: roEdgeSoftDownOut
}
@-webkit-keyframes roEdgeSoftDownOut {
    0% {
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: perspective(1200px)
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: perspective(1200px) rotateX(20deg)
    }
}
@keyframes roEdgeSoftDownOut {
    0% {
        transform-origin: 50% 100%;
        transform: perspective(1200px)
    }
    100% {
        opacity: 0;
        transform-origin: 50% 100%;
        transform: perspective(1200px) rotateX(20deg)
    }
}
.roEdgeSoftLeftOut {
    -webkit-animation-name: roEdgeSoftLeftOut;
    animation-name: roEdgeSoftLeftOut
}
@-webkit-keyframes roEdgeSoftLeftOut {
    0% {
        -webkit-transform-origin: 0 50%;
        -webkit-transform: perspective(1200px)
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: 0 50%;
        -webkit-transform: perspective(1200px) rotateY(20deg)
    }
}
@keyframes roEdgeSoftLeftOut {
    0% {
        transform-origin: 0 50%;
        transform: perspective(1200px)
    }
    100% {
        opacity: 0;
        transform-origin: 0 50%;
        transform: perspective(1200px) rotateY(20deg)
    }
}
.roEdgeSoftRightOut {
    -webkit-animation-name: roEdgeSoftRightOut;
    animation-name: roEdgeSoftRightOut
}
@-webkit-keyframes roEdgeSoftRightOut {
    0% {
        -webkit-transform-origin: 100% 50%;
        -webkit-transform: perspective(1200px)
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: 100% 50%;
        -webkit-transform: perspective(1200px) rotateY(-20deg)
    }
}
@keyframes roEdgeSoftRightOut {
    0% {
        transform-origin: 100% 50%;
        transform: perspective(1200px)
    }
    100% {
        opacity: 0;
        transform-origin: 100% 50%;
        transform: perspective(1200px) rotateY(-20deg)
    }
}
.roTwistLeftOut {
    -webkit-animation-name: roTwistLeftOut;
    animation-name: roTwistLeftOut;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
}
@-webkit-keyframes roTwistLeftOut {
    0% {
        opacity: 1;
        -webkit-transform-origin: 50% 50% -400px;
        -webkit-transform: perspective(800px) translate3d(0, 0, -400px) rotateX(0) scale(1)
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: 50% 50% -400px;
        -webkit-transform: perspective(800px) translate3d(-200%, 0, -400px) rotateX(-1080deg) scale(0)
    }
}
@keyframes roTwistLeftOut {
    0% {
        opacity: 1;
        transform-origin: 50% 50% -400px;
        transform: perspective(800px) translate3d(0, 0, -400px) rotateX(0) scale(1)
    }
    100% {
        opacity: 0;
        transform-origin: 50% 50% -400px;
        transform: perspective(800px) translate3d(-200%, 0, -400px) rotateX(-1080deg) scale(0)
    }
}
.roTwistRightOut {
    -webkit-animation-name: roTwistRightOut;
    animation-name: roTwistRightOut;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
}
@-webkit-keyframes roTwistRightOut {
    0% {
        opacity: 1;
        -webkit-transform-origin: 50% 50% -400px;
        -webkit-transform: perspective(800px) translate3d(0, 0, -400px) rotateX(0) scale(1)
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: 50% 50% -400px;
        -webkit-transform: perspective(800px) translate3d(200%, 0, -400px) rotateX(-1080deg) scale(0)
    }
}
@keyframes roTwistRightOut {
    0% {
        opacity: 1;
        transform-origin: 50% 50% -400px;
        transform: perspective(800px) translate3d(0, 0, -400px) rotateX(0) scale(1)
    }
    100% {
        opacity: 0;
        transform-origin: 50% 50% -400px;
        transform: perspective(800px) translate3d(200%, 0, -400px) rotateX(-1080deg) scale(0)
    }
}
.roTwistUpOut {
    -webkit-animation-name: roTwistUpOut;
    animation-name: roTwistUpOut;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
}
@-webkit-keyframes roTwistUpOut {
    0% {
        opacity: 1;
        -webkit-transform-origin: 50% 50% -800px;
        -webkit-transform: perspective(800px) translate3d(0, 0, -800px) rotateY(0) scale(1)
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: 50% 50% -800px;
        -webkit-transform: perspective(800px) translate3d(0, -200%, -800px) rotateY(1080deg) scale(0)
    }
}
@keyframes roTwistUpOut {
    0% {
        opacity: 1;
        transform-origin: 50% 50% -800px;
        transform: perspective(800px) translate3d(0, 0, -800px) rotateY(0) scale(1)
    }
    100% {
        opacity: 0;
        transform-origin: 50% 50% -800px;
        transform: perspective(800px) translate3d(0, -200%, -800px) rotateY(1080deg) scale(0)
    }
}
.roTwistDownOut {
    -webkit-animation-name: roTwistDownOut;
    animation-name: roTwistDownOut;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
}
@-webkit-keyframes roTwistDownOut {
    0% {
        opacity: 1;
        -webkit-transform-origin: 50% 50% -800px;
        -webkit-transform: perspective(800px) translate3d(0, 0, -800px) rotateY(0) scale(1)
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: 50% 50% -800px;
        -webkit-transform: perspective(800px) translate3d(0, 200%, -800px) rotateY(1080deg) scale(0)
    }
}
@keyframes roTwistDownOut {
    0% {
        opacity: 1;
        transform-origin: 50% 50% -800px;
        transform: perspective(800px) translate3d(0, 0, -800px) rotateY(0) scale(1)
    }
    100% {
        opacity: 0;
        transform-origin: 50% 50% -800px;
        transform: perspective(800px) translate3d(0, 200%, -800px) rotateY(1080deg) scale(0)
    }
}
.roTwistLeftIn {
    -webkit-animation-name: roTwistLeftIn;
    animation-name: roTwistLeftIn;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}
@-webkit-keyframes roTwistLeftIn {
    0% {
        opacity: 0;
        -webkit-transform-origin: 50% 50% -400px;
        -webkit-transform: perspective(800px) translate3d(-200%, 0, -400px) rotateX(1080deg) scale(0)
    }
    100% {
        opacity: 1;
        -webkit-transform-origin: 50% 50% -400px;
        -webkit-transform: perspective(800px) translate3d(0, 0, -400px) rotateX(0) scale(1)
    }
}
@keyframes roTwistLeftIn {
    0% {
        opacity: 0;
        transform-origin: 50% 50% -400px;
        transform: perspective(800px) translate3d(-200%, 0, -400px) rotateX(1080deg) scale(0)
    }
    100% {
        opacity: 1;
        transform-origin: 50% 50% -400px;
        transform: perspective(800px) translate3d(0, 0, -400px) rotateX(0) scale(1)
    }
}
.roTwistRightIn {
    -webkit-animation-name: roTwistRightIn;
    animation-name: roTwistRightIn;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}
@-webkit-keyframes roTwistRightIn {
    0% {
        opacity: 0;
        -webkit-transform-origin: 50% 50% -400px;
        -webkit-transform: perspective(800px) translate3d(200%, 0, -400px) rotateX(1080deg) scale(0)
    }
    100% {
        opacity: 1;
        -webkit-transform-origin: 50% 50% -400px;
        -webkit-transform: perspective(800px) translate3d(0, 0, -400px) rotateX(0) scale(1)
    }
}
@keyframes roTwistRightIn {
    0% {
        opacity: 0;
        transform-origin: 50% 50% -400px;
        transform: perspective(800px) translate3d(200%, 0, -400px) rotateX(1080deg) scale(0)
    }
    100% {
        opacity: 1;
        transform-origin: 50% 50% -400px;
        transform: perspective(800px) translate3d(0, 0, -400px) rotateX(0) scale(1)
    }
}
.roTwistUpIn {
    -webkit-animation-name: roTwistUpIn;
    animation-name: roTwistUpIn;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}
@-webkit-keyframes roTwistUpIn {
    0% {
        opacity: 0;
        -webkit-transform-origin: 50% 50% -800px;
        -webkit-transform: perspective(800px) translate3d(0, -200%, -800px) rotateY(-1080deg) scale(0)
    }
    100% {
        opacity: 1;
        -webkit-transform-origin: 50% 50% -800px;
        -webkit-transform: perspective(800px) translate3d(0, 0, -800px) rotateY(0) scale(1)
    }
}
@keyframes roTwistUpIn {
    0% {
        opacity: 0;
        transform-origin: 50% 50% -800px;
        transform: perspective(800px) translate3d(0, -200%, -800px) rotateY(-1080deg) scale(0)
    }
    100% {
        opacity: 1;
        transform-origin: 50% 50% -800px;
        transform: perspective(800px) translate3d(0, 0, -800px) rotateY(0) scale(1)
    }
}
.roTwistDownIn {
    -webkit-animation-name: roTwistDownIn;
    animation-name: roTwistDownIn;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}
@-webkit-keyframes roTwistDownIn {
    0% {
        opacity: 0;
        -webkit-transform-origin: 50% 50% -800px;
        -webkit-transform: perspective(800px) translate3d(0, 200%, -800px) rotateY(-1080deg) scale(0)
    }
    100% {
        opacity: 1;
        -webkit-transform-origin: 50% 50% -800px;
        -webkit-transform: perspective(800px) translate3d(0, 0, -800px) rotateY(0) scale(1)
    }
}
@keyframes roTwistDownIn {
    0% {
        opacity: 0;
        transform-origin: 50% 50% -800px;
        transform: perspective(800px) translate3d(0, 200%, -800px) rotateY(-1080deg) scale(0)
    }
    100% {
        opacity: 1;
        transform-origin: 50% 50% -800px;
        transform: perspective(800px) translate3d(0, 0, -800px) rotateY(0) scale(1)
    }
}
.roSoftLeftOut {
    -webkit-animation-name: roSoftLeftOut;
    animation-name: roSoftLeftOut
}
@-webkit-keyframes roSoftLeftOut {
    to {
        opacity: 0;
        -webkit-transform: perspective(1200px) translateX(-50%) rotateY(70deg) rotateX(30deg) translateZ(-200px)
    }
}
@keyframes roSoftLeftOut {
    to {
        opacity: 0;
        transform: perspective(1200px) translateX(-50%) rotateY(70deg) rotateX(30deg) translateZ(-200px)
    }
}
.roSoftRightOut {
    -webkit-animation-name: roSoftRightOut;
    animation-name: roSoftRightOut
}
@-webkit-keyframes roSoftRightOut {
    to {
        opacity: 0;
        -webkit-transform: perspective(1200px) translateX(50%) rotateY(-70deg) rotateX(30deg) translateZ(-200px)
    }
}
@keyframes roSoftRightOut {
    to {
        opacity: 0;
        transform: perspective(1200px) translateX(50%) rotateY(-70deg) rotateX(30deg) translateZ(-200px)
    }
}
.roSoftLeftIn {
    -webkit-animation-name: roSoftLeftIn;
    animation-name: roSoftLeftIn
}
@-webkit-keyframes roSoftLeftIn {
    from {
        opacity: 0;
        -webkit-transform: perspective(1200px) translateX(-20%) rotateZ(-10deg) rotateY(-40deg) translateZ(500px)
    }
    to {
        -webkit-transform: perspective(1200px) translateX(0) rotateZ(0) rotateY(0) translateZ(0)
    }
}
@keyframes roSoftLeftIn {
    from {
        opacity: 0;
        transform: perspective(1200px) translateX(-20%) rotateZ(-10deg) rotateY(-40deg) translateZ(500px)
    }
    to {
        transform: perspective(1200px) translateX(0) rotateZ(0) rotateY(0) translateZ(0)
    }
}
.roSoftRightIn {
    -webkit-animation-name: roSoftRightIn;
    animation-name: roSoftRightIn
}
@-webkit-keyframes roSoftRightIn {
    from {
        opacity: 0;
        -webkit-transform: perspective(1200px) translateX(20%) rotateZ(10deg) rotateY(40deg) translateZ(500px)
    }
    to {
        -webkit-transform: perspective(1200px) translateX(0) rotateZ(0) rotateY(0) translateZ(0)
    }
}
@keyframes roSoftRightIn {
    from {
        opacity: 0;
        transform: perspective(1200px) translateX(20%) rotateZ(10deg) rotateY(40deg) translateZ(500px)
    }
    to {
        transform: perspective(1200px) translateX(0) rotateZ(0) rotateY(0) translateZ(0)
    }
}
.roShortPushRightOut {
    -webkit-animation-name: roShortPushRightOut;
    animation-name: roShortPushRightOut
}
@-webkit-keyframes roShortPushRightOut {
    30% {
        opacity: .8;
        -webkit-transform: scale(.8)
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1.8) rotate(45deg)
    }
}
@keyframes roShortPushRightOut {
    30% {
        opacity: .8;
        transform: scale(.8)
    }
    100% {
        opacity: 0;
        transform: scale(1.8) rotate(45deg)
    }
}
.roShortPushLeftOut {
    -webkit-animation-name: roShortPushLeftOut;
    animation-name: roShortPushLeftOut
}
@-webkit-keyframes roShortPushLeftOut {
    30% {
        opacity: .8;
        -webkit-transform: scale(.8)
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1.8) rotate(-45deg)
    }
}
@keyframes roShortPushLeftOut {
    30% {
        opacity: .8;
        transform: scale(.8)
    }
    100% {
        opacity: 0;
        transform: scale(1.8) rotate(-45deg)
    }
}
.roShortPushRightIn {
    -webkit-animation-name: roShortPushRightIn;
    animation-name: roShortPushRightIn
}
@-webkit-keyframes roShortPushRightIn {
    from {
        opacity: 0;
        -webkit-transform: scale(1.8) rotate(-45deg)
    }
}
@keyframes roShortPushRightIn {
    from {
        opacity: 0;
        transform: scale(1.8) rotate(-45deg)
    }
}
.roShortPushLeftIn {
    -webkit-animation-name: roShortPushLeftIn;
    animation-name: roShortPushLeftIn
}
@-webkit-keyframes roShortPushLeftIn {
    from {
        opacity: 0;
        -webkit-transform: scale(1.8) rotate(45deg)
    }
}
@keyframes roShortPushLeftIn {
    from {
        opacity: 0;
        transform: scale(1.8) rotate(45deg)
    }
}
.roShortPullRightIn {
    -webkit-animation-name: roShortPullRightIn;
    animation-name: roShortPullRightIn
}
@-webkit-keyframes roShortPullRightIn {
    from {
        opacity: 0;
        -webkit-transform: scale(0) rotate(-45deg)
    }
}
@keyframes roShortPullRightIn {
    from {
        opacity: 0;
        transform: scale(0) rotate(-45deg)
    }
}
.roShortPullLeftIn {
    -webkit-animation-name: roShortPullLeftIn;
    animation-name: roShortPullLeftIn
}
@-webkit-keyframes roShortPullLeftIn {
    from {
        opacity: 0;
        -webkit-transform: scale(0) rotate(45deg)
    }
}
@keyframes roShortPullLeftIn {
    from {
        opacity: 0;
        transform: scale(0) rotate(45deg)
    }
}
.roShortPullRightOut {
    -webkit-animation-name: roShortPullRightOut;
    animation-name: roShortPullRightOut
}
@-webkit-keyframes roShortPullRightOut {
    to {
        opacity: 0;
        -webkit-transform: scale(0) rotate(45deg)
    }
}
@keyframes roShortPullRightOut {
    to {
        opacity: 0;
        transform: scale(0) rotate(45deg)
    }
}
.roShortPullLeftOut {
    -webkit-animation-name: roShortPullLeftOut;
    animation-name: roShortPullLeftOut
}
@-webkit-keyframes roShortPullLeftOut {
    to {
        opacity: 0;
        -webkit-transform: scale(0) rotate(-45deg)
    }
}
@keyframes roShortPullLeftOut {
    to {
        opacity: 0;
        transform: scale(0) rotate(-45deg)
    }
}
.roWheelUpOut {
    -webkit-animation-name: roWheelUpOut;
    animation-name: roWheelUpOut
}
@-webkit-keyframes roWheelUpOut {
    from {
        -webkit-transform-origin: 300% 50%
    }
    to {
        opacity: 0;
        -webkit-transform-origin: 300% 50%;
        -webkit-transform: rotate(30deg)
    }
}
@keyframes roWheelUpOut {
    from {
        transform-origin: 300% 50%
    }
    to {
        opacity: 0;
        transform: rotate(30deg)
    }
}
.roWheelDownOut {
    -webkit-animation-name: roWheelDownOut;
    animation-name: roWheelDownOut
}
@-webkit-keyframes roWheelDownOut {
    from {
        -webkit-transform-origin: -300% 50%
    }
    to {
        opacity: 0;
        -webkit-transform-origin: -300% 50%;
        -webkit-transform: rotate(30deg)
    }
}
@keyframes roWheelDownOut {
    from {
        transform-origin: -300% 50%
    }
    to {
        opacity: 0;
        transform-origin: -300% 50%;
        transform: rotate(30deg)
    }
}
.roWheelLeftOut {
    -webkit-animation-name: roWheelLeftOut;
    animation-name: roWheelLeftOut
}
@-webkit-keyframes roWheelLeftOut {
    from {
        -webkit-transform-origin: 50% -800%
    }
    to {
        opacity: 0;
        -webkit-transform-origin: 50% -800%;
        -webkit-transform: rotate(30deg)
    }
}
@keyframes roWheelLeftOut {
    from {
        transform-origin: 50% -800%
    }
    to {
        opacity: 0;
        transform-origin: 50% -800%;
        transform: rotate(30deg)
    }
}
.roWheelRightOut {
    -webkit-animation-name: roWheelRightOut;
    animation-name: roWheelRightOut
}
@-webkit-keyframes roWheelRightOut {
    from {
        -webkit-transform-origin: 50% 800%
    }
    to {
        opacity: 0;
        -webkit-transform-origin: 50% 800%;
        -webkit-transform: rotate(30deg)
    }
}
@keyframes roWheelRightOut {
    from {
        transform-origin: 50% 800%
    }
    to {
        opacity: 0;
        transform-origin: 50% 800%;
        transform: rotate(30deg)
    }
}
.roWheelUpIn {
    -webkit-animation-name: roWheelUpIn;
    animation-name: roWheelUpIn
}
@-webkit-keyframes roWheelUpIn {
    from {
        opacity: 0;
        -webkit-transform-origin: -300% 50%;
        -webkit-transform: rotate(-30deg)
    }
    to {
        -webkit-transform-origin: -300% 50%
    }
}
@keyframes roWheelUpIn {
    from {
        opacity: 0;
        transform-origin: -300% 50%;
        transform: rotate(-30deg)
    }
    to {
        transform-origin: -300% 50%
    }
}
.roWheelDownIn {
    -webkit-animation-name: roWheelDownIn;
    animation-name: roWheelDownIn
}
@-webkit-keyframes roWheelDownIn {
    from {
        opacity: 0;
        -webkit-transform-origin: 300% 50%;
        -webkit-transform: rotate(-30deg)
    }
    to {
        -webkit-transform-origin: 300% 50%
    }
}
@keyframes roWheelDownIn {
    from {
        opacity: 0;
        transform-origin: 300% 50%;
        transform: rotate(-30deg)
    }
    to {
        transform-origin: 300% 50%
    }
}
.roWheelLeftIn {
    -webkit-animation-name: roWheelLeftIn;
    animation-name: roWheelLeftIn
}
@-webkit-keyframes roWheelLeftIn {
    from {
        opacity: 0;
        -webkit-transform-origin: 50% 800%;
        -webkit-transform: rotate(-30deg)
    }
    to {
        -webkit-transform-origin: 50% 800%
    }
}
@keyframes roWheelLeftIn {
    from {
        opacity: 0;
        transform-origin: 50% 800%;
        transform: rotate(-30deg)
    }
    to {
        transform-origin: 50% 800%
    }
}
.roWheelRightIn {
    -webkit-animation-name: roWheelRightIn;
    animation-name: roWheelRightIn
}
@-webkit-keyframes roWheelRightIn {
    from {
        opacity: 0;
        -webkit-transform-origin: 50% -800%;
        -webkit-transform: rotate(-30deg)
    }
    to {
        -webkit-transform-origin: 50% -800%
    }
}
@keyframes roWheelRightIn {
    from {
        opacity: 0;
        transform-origin: 50% -800%;
        transform: rotate(-30deg)
    }
    to {
        transform-origin: 50% -800%
    }
}
.roFlitLeftOut {
    -webkit-animation-name: roFlitLeftOut;
    animation-name: roFlitLeftOut
}
@-webkit-keyframes roFlitLeftOut {
    100%, 50% {
        opacity: .2;
        -webkit-transform: perspective(800px) translateZ(-1000px) rotateY(-90deg)
    }
}
@keyframes roFlitLeftOut {
    100%, 50% {
        opacity: .2;
        transform: perspective(800px) translateZ(-1000px) rotateY(-90deg)
    }
}
.roFlitRightOut {
    -webkit-animation-name: roFlitRightOut;
    animation-name: roFlitRightOut
}
@-webkit-keyframes roFlitRightOut {
    100%, 50% {
        opacity: .2;
        -webkit-transform: perspective(800px) translateZ(-1000px) rotateY(90deg)
    }
}
@keyframes roFlitRightOut {
    100%, 50% {
        opacity: .2;
        transform: perspective(800px) translateZ(-1000px) rotateY(90deg)
    }
}
.roFlitUpOut {
    -webkit-animation-name: roFlitUpOut;
    animation-name: roFlitUpOut
}
@-webkit-keyframes roFlitUpOut {
    100%, 50% {
        opacity: .2;
        -webkit-transform: perspective(800px) translateZ(-1000px) rotateX(90deg)
    }
}
@keyframes roFlitUpOut {
    100%, 50% {
        opacity: .2;
        transform: perspective(800px) translateZ(-1000px) rotateX(90deg)
    }
}
.roFlitDownOut {
    -webkit-animation-name: roFlitDownOut;
    animation-name: roFlitDownOut
}
@-webkit-keyframes roFlitDownOut {
    100%, 50% {
        opacity: .2;
        -webkit-transform: perspective(800px) translateZ(-1000px) rotateX(-90deg)
    }
}
@keyframes roFlitDownOut {
    100%, 50% {
        opacity: .2;
        transform: perspective(800px) translateZ(-1000px) rotateX(-90deg)
    }
}
.roFlitLeftIn {
    -webkit-animation-name: roFlitLeftIn;
    animation-name: roFlitLeftIn
}
@-webkit-keyframes roFlitLeftIn {
    0%, 50% {
        opacity: .2;
        -webkit-transform: perspective(800px) translateZ(-1000px) rotateY(-90deg)
    }
}
@keyframes roFlitLeftIn {
    0%, 50% {
        opacity: .2;
        transform: perspective(800px) translateZ(-1000px) rotateY(-90deg)
    }
}
.roFlitRightIn {
    -webkit-animation-name: roFlitRightIn;
    animation-name: roFlitRightIn
}
@-webkit-keyframes roFlitRightIn {
    0%, 50% {
        opacity: .2;
        -webkit-transform: perspective(800px) translateZ(-1000px) rotateY(90deg)
    }
}
@keyframes roFlitRightIn {
    0%, 50% {
        opacity: .2;
        transform: perspective(800px) translateZ(-1000px) rotateY(90deg)
    }
}
.roFlitUpIn {
    -webkit-animation-name: roFlitUpIn;
    animation-name: roFlitUpIn
}
@-webkit-keyframes roFlitUpIn {
    0%, 50% {
        opacity: .2;
        -webkit-transform: perspective(800px) translateZ(-1000px) rotateX(90deg)
    }
}
@keyframes roFlitUpIn {
    0%, 50% {
        opacity: .2;
        transform: perspective(800px) translateZ(-1000px) rotateX(90deg)
    }
}
.roFlitDownIn {
    -webkit-animation-name: roFlitDownIn;
    animation-name: roFlitDownIn
}
@-webkit-keyframes roFlitDownIn {
    0%, 50% {
        opacity: .2;
        -webkit-transform: perspective(800px) translateZ(-1000px) rotateX(-90deg)
    }
}
@keyframes roFlitDownIn {
    0%, 50% {
        opacity: .2;
        transform: perspective(800px) translateZ(-1000px) rotateX(-90deg)
    }
}
.roFoldLeftOut {
    -webkit-animation-name: roFoldLeftOut;
    animation-name: roFoldLeftOut
}
@-webkit-keyframes roFoldLeftOut {
    from {
        -webkit-transform-origin: 100% 50%;
        -webkit-transform: perspective(1600px)
    }
    to {
        opacity: 0;
        -webkit-transform-origin: 100% 50%;
        -webkit-transform: perspective(1600px) translateX(-100%) rotateY(-90deg)
    }
}
@keyframes roFoldLeftOut {
    from {
        transform-origin: 100% 50%;
        transform: perspective(1600px)
    }
    to {
        opacity: 0;
        transform-origin: 100% 50%;
        transform: perspective(1600px) translateX(-100%) rotateY(-90deg)
    }
}
.roFoldRightOut {
    -webkit-animation-name: roFoldRightOut;
    animation-name: roFoldRightOut
}
@-webkit-keyframes roFoldRightOut {
    from {
        -webkit-transform-origin: 0 50%;
        -webkit-transform: perspective(1600px)
    }
    to {
        opacity: 0;
        -webkit-transform-origin: 0 50%;
        -webkit-transform: perspective(1600px) translateX(100%) rotateY(90deg)
    }
}
@keyframes roFoldRightOut {
    from {
        transform-origin: 0 50%;
        transform: perspective(1600px)
    }
    to {
        opacity: 0;
        transform-origin: 0 50%;
        transform: perspective(1600px) translateX(100%) rotateY(90deg)
    }
}
.roFoldUpOut {
    -webkit-animation-name: roFoldUpOut;
    animation-name: roFoldUpOut
}
@-webkit-keyframes roFoldUpOut {
    from {
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: perspective(1600px)
    }
    to {
        opacity: 0;
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: perspective(1600px) translateY(-100%) rotateX(90deg)
    }
}
@keyframes roFoldUpOut {
    from {
        transform-origin: 50% 100%;
        transform: perspective(1600px)
    }
    to {
        opacity: 0;
        transform-origin: 50% 100%;
        transform: perspective(1600px) translateY(-100%) rotateX(90deg)
    }
}
.roFoldDownOut {
    -webkit-animation-name: roFoldDownOut;
    animation-name: roFoldDownOut
}
@-webkit-keyframes roFoldDownOut {
    from {
        -webkit-transform-origin: 50% 0;
        -webkit-transform: perspective(1600px)
    }
    to {
        opacity: 0;
        -webkit-transform-origin: 50% 0;
        -webkit-transform: perspective(1600px) translateY(100%) rotateX(-90deg)
    }
}
@keyframes roFoldDownOut {
    from {
        transform-origin: 50% 0;
        transform: perspective(1600px)
    }
    to {
        opacity: 0;
        transform-origin: 50% 0;
        transform: perspective(1600px) translateY(100%) rotateX(-90deg)
    }
}
.roFoldLeftIn {
    -webkit-animation-name: roFoldLeftIn;
    animation-name: roFoldLeftIn
}
@-webkit-keyframes roFoldLeftIn {
    from {
        opacity: 0;
        -webkit-transform-origin: 100% 50%;
        -webkit-transform: perspective(1600px) translateX(-100%) rotateY(-90deg)
    }
    to {
        -webkit-transform-origin: 100% 50%;
        -webkit-transform: perspective(1600px)
    }
}
@keyframes roFoldLeftIn {
    from {
        opacity: 0;
        transform-origin: 100% 50%;
        transform: perspective(1600px) translateX(-100%) rotateY(-90deg)
    }
    to {
        transform-origin: 100% 50%;
        transform: perspective(1600px)
    }
}
.roFoldRightIn {
    -webkit-animation-name: roFoldRightIn;
    animation-name: roFoldRightIn
}
@-webkit-keyframes roFoldRightIn {
    to {
        -webkit-transform-origin: 0 50%;
        -webkit-transform: perspective(1600px)
    }
    from {
        opacity: 0;
        -webkit-transform-origin: 0 50%;
        -webkit-transform: perspective(1600px) translateX(100%) rotateY(90deg)
    }
}
@keyframes roFoldRightIn {
    to {
        transform-origin: 0 50%;
        transform: perspective(1600px)
    }
    from {
        opacity: 0;
        transform-origin: 0 50%;
        transform: perspective(1600px) translateX(100%) rotateY(90deg)
    }
}
.roFoldUpIn {
    -webkit-animation-name: roFoldUpIn;
    animation-name: roFoldUpIn
}
@-webkit-keyframes roFoldUpIn {
    to {
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: perspective(1600px)
    }
    from {
        opacity: 0;
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: perspective(1600px) translateY(-100%) rotateX(90deg)
    }
}
@keyframes roFoldUpIn {
    to {
        transform-origin: 50% 100%;
        transform: perspective(1600px)
    }
    from {
        opacity: 0;
        transform-origin: 50% 100%;
        transform: perspective(1600px) translateY(-100%) rotateX(90deg)
    }
}
.roFoldDownIn {
    -webkit-animation-name: roFoldDownIn;
    animation-name: roFoldDownIn
}
@-webkit-keyframes roFoldDownIn {
    to {
        -webkit-transform-origin: 50% 0;
        -webkit-transform: perspective(1600px)
    }
    from {
        opacity: 0;
        -webkit-transform-origin: 50% 0;
        -webkit-transform: perspective(1600px) translateY(100%) rotateX(-90deg)
    }
}
@keyframes roFoldDownIn {
    to {
        transform-origin: 50% 0;
        transform: perspective(1600px)
    }
    from {
        opacity: 0;
        transform-origin: 50% 0;
        transform: perspective(1600px) translateY(100%) rotateX(-90deg)
    }
}
.roRoomLeftOut {
    -webkit-animation-name: roRoomLeftOut;
    animation-name: roRoomLeftOut
}
@-webkit-keyframes roRoomLeftOut {
    from {
        -webkit-transform-origin: 100% 50%;
        -webkit-transform: perspective(1200px)
    }
    to {
        opacity: 0;
        -webkit-transform-origin: 100% 50%;
        -webkit-transform: perspective(1200px) translateX(-100%) rotateY(90deg)
    }
}
@keyframes roRoomLeftOut {
    from {
        transform-origin: 100% 50%;
        transform: perspective(1200px)
    }
    to {
        opacity: 0;
        transform-origin: 100% 50%;
        transform: perspective(1200px) translateX(-100%) rotateY(90deg)
    }
}
.roRoomRightOut {
    -webkit-animation-name: roRoomRightOut;
    animation-name: roRoomRightOut
}
@-webkit-keyframes roRoomRightOut {
    from {
        -webkit-transform-origin: 0 50%;
        -webkit-transform: perspective(1200px)
    }
    to {
        opacity: 0;
        -webkit-transform-origin: 0 50%;
        -webkit-transform: perspective(1200px) translateX(100%) rotateY(-90deg)
    }
}
@keyframes roRoomRightOut {
    from {
        transform-origin: 0 50%;
        transform: perspective(1200px)
    }
    to {
        opacity: 0;
        transform-origin: 0 50%;
        transform: perspective(1200px) translateX(100%) rotateY(-90deg)
    }
}
.roRoomUpOut {
    -webkit-animation-name: roRoomUpOut;
    animation-name: roRoomUpOut
}
@-webkit-keyframes roRoomUpOut {
    from {
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: perspective(1200px)
    }
    to {
        opacity: 0;
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: perspective(1200px) translateY(-100%) rotateX(-90deg)
    }
}
@keyframes roRoomUpOut {
    from {
        transform-origin: 50% 100%;
        transform: perspective(1200px)
    }
    to {
        opacity: 0;
        transform-origin: 50% 100%;
        transform: perspective(1200px) translateY(-100%) rotateX(-90deg)
    }
}
.roRoomDownOut {
    -webkit-animation-name: roRoomDownOut;
    animation-name: roRoomDownOut
}
@-webkit-keyframes roRoomDownOut {
    from {
        -webkit-transform-origin: 50% 0;
        -webkit-transform: perspective(1200px)
    }
    to {
        opacity: 0;
        -webkit-transform-origin: 50% 0;
        -webkit-transform: perspective(1200px) translateY(100%) rotateX(90deg)
    }
}
@keyframes roRoomDownOut {
    from {
        transform-origin: 50% 0;
        transform: perspective(1200px)
    }
    to {
        opacity: 0;
        transform-origin: 50% 0;
        transform: perspective(1200px) translateY(100%) rotateX(90deg)
    }
}
.roRoomLeftIn {
    -webkit-animation-name: roRoomLeftIn;
    animation-name: roRoomLeftIn
}
@-webkit-keyframes roRoomLeftIn {
    to {
        -webkit-transform-origin: 100% 50%;
        -webkit-transform: perspective(1200px)
    }
    from {
        opacity: 0;
        -webkit-transform-origin: 100% 50%;
        -webkit-transform: perspective(1200px) translateX(-100%) rotateY(90deg)
    }
}
@keyframes roRoomLeftIn {
    to {
        transform-origin: 100% 50%;
        transform: perspective(1200px)
    }
    from {
        opacity: 0;
        transform-origin: 100% 50%;
        transform: perspective(1200px) translateX(-100%) rotateY(90deg)
    }
}
.roRoomRightIn {
    -webkit-animation-name: roRoomRightIn;
    animation-name: roRoomRightIn
}
@-webkit-keyframes roRoomRightIn {
    to {
        -webkit-transform-origin: 0 50%;
        -webkit-transform: perspective(1200px)
    }
    from {
        opacity: 0;
        -webkit-transform-origin: 0 50%;
        -webkit-transform: perspective(1200px) translateX(100%) rotateY(-90deg)
    }
}
@keyframes roRoomRightIn {
    to {
        transform-origin: 0 50%;
        transform: perspective(1200px)
    }
    from {
        opacity: 0;
        transform-origin: 0 50%;
        transform: perspective(1200px) translateX(100%) rotateY(-90deg)
    }
}
.roRoomUpIn {
    -webkit-animation-name: roRoomUpIn;
    animation-name: roRoomUpIn
}
@-webkit-keyframes roRoomUpIn {
    to {
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: perspective(1200px)
    }
    from {
        opacity: 0;
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: perspective(1200px) translateY(-100%) rotateX(-90deg)
    }
}
@keyframes roRoomUpIn {
    to {
        transform-origin: 50% 100%;
        transform: perspective(1200px)
    }
    from {
        opacity: 0;
        transform-origin: 50% 100%;
        transform: perspective(1200px) translateY(-100%) rotateX(-90deg)
    }
}
.roRoomDownIn {
    -webkit-animation-name: roRoomDownIn;
    animation-name: roRoomDownIn
}
@-webkit-keyframes roRoomDownIn {
    to {
        -webkit-transform-origin: 50% 0;
        -webkit-transform: perspective(1200px)
    }
    from {
        opacity: 0;
        -webkit-transform-origin: 50% 0;
        -webkit-transform: perspective(1200px) translateY(100%) rotateX(90deg)
    }
}
@keyframes roRoomDownIn {
    to {
        transform-origin: 50% 0;
        transform: perspective(1200px)
    }
    from {
        opacity: 0;
        transform-origin: 50% 0;
        transform: perspective(1200px) translateY(100%) rotateX(90deg)
    }
}
.slidePullLeftOut {
    -webkit-animation-name: slidePullLeftOut;
    animation-name: slidePullLeftOut
}
@-webkit-keyframes slidePullLeftOut {
    25% {
        opacity: .5;
        -webkit-transform: perspective(1200px) translateZ(-500px)
    }
    75% {
        opacity: .5;
        -webkit-transform: perspective(1200px) translateZ(-500px) translateX(-200%)
    }
    100% {
        opacity: 0;
        -webkit-transform: perspective(1200px) translateZ(-500px) translateX(-200%)
    }
}
@-keyframes slidePullLeftOut {
    25% {
        opacity: .5;
        -transform: perspective(1200px) translateZ(-500px)
    }
    75% {
        opacity: .5;
        -transform: perspective(1200px) translateZ(-500px) translateX(-200%)
    }
    100% {
        opacity: 0;
        -transform: perspective(1200px) translateZ(-500px) translateX(-200%)
    }
}
.slidePullRightOut {
    -webkit-animation-name: slidePullRightOut;
    animation-name: slidePullRightOut
}
@-webkit-keyframes slidePullRightOut {
    25% {
        opacity: .5;
        -webkit-transform: perspective(1200px) translateZ(-500px)
    }
    75% {
        opacity: .5;
        -webkit-transform: perspective(1200px) translateZ(-500px) translateX(200%)
    }
    100% {
        opacity: 0;
        -webkit-transform: perspective(1200px) translateZ(-500px) translateX(200%)
    }
}
@keyframes slidePullRightOut {
    25% {
        opacity: .5;
        transform: perspective(1200px) translateZ(-500px)
    }
    75% {
        opacity: .5;
        transform: perspective(1200px) translateZ(-500px) translateX(200%)
    }
    100% {
        opacity: 0;
        transform: perspective(1200px) translateZ(-500px) translateX(200%)
    }
}
.slidePullUpOut {
    -webkit-animation-name: slidePullUpOut;
    animation-name: slidePullUpOut
}
@-webkit-keyframes slidePullUpOut {
    25% {
        opacity: .5;
        -webkit-transform: perspective(1200px) translateZ(-500px)
    }
    75% {
        opacity: .5;
        -webkit-transform: perspective(1200px) translateZ(-500px) translateY(-200%)
    }
    100% {
        opacity: 0;
        -webkit-transform: perspective(1200px) translateZ(-500px) translateY(-200%)
    }
}
@keyframes slidePullUpOut {
    25% {
        opacity: .5;
        transform: perspective(1200px) translateZ(-500px)
    }
    75% {
        opacity: .5;
        transform: perspective(1200px) translateZ(-500px) translateY(-200%)
    }
    100% {
        opacity: 0;
        transform: perspective(1200px) translateZ(-500px) translateY(-200%)
    }
}
.slidePullDownOut {
    -webkit-animation-name: slidePullDownOut;
    animation-name: slidePullDownOut
}
@-webkit-keyframes slidePullDownOut {
    25% {
        opacity: .5;
        -webkit-transform: perspective(1200px) translateZ(-500px)
    }
    75% {
        opacity: .5;
        -webkit-transform: perspective(1200px) translateZ(-500px) translateY(200%)
    }
    100% {
        opacity: 0;
        -webkit-transform: perspective(1200px) translateZ(-500px) translateY(200%)
    }
}
@keyframes slidePullDownOut {
    25% {
        opacity: .5;
        transform: perspective(1200px) translateZ(-500px)
    }
    75% {
        opacity: .5;
        transform: perspective(1200px) translateZ(-500px) translateY(200%)
    }
    100% {
        opacity: 0;
        transform: perspective(1200px) translateZ(-500px) translateY(200%)
    }
}
.slidePullLeftIn {
    -webkit-animation-name: slidePullLeftIn;
    animation-name: slidePullLeftIn
}
@-webkit-keyframes slidePullLeftIn {
    0% {
        opacity: 0;
        -webkit-transform: perspective(1200px) translateZ(-500px) translateX(-200%)
    }
    25% {
        opacity: .5;
        -webkit-transform: perspective(1200px) translateZ(-500px) translateX(-200%)
    }
    75% {
        opacity: .5;
        -webkit-transform: perspective(1200px) translateZ(-500px)
    }
    100% {
        -webkit-transform: perspective(1200px)
    }
}
@keyframes slidePullLeftIn {
    0% {
        opacity: 0;
        transform: perspective(1200px) translateZ(-500px) translateX(-200%)
    }
    25% {
        opacity: .5;
        transform: perspective(1200px) translateZ(-500px) translateX(-200%)
    }
    75% {
        opacity: .5;
        transform: perspective(1200px) translateZ(-500px)
    }
    100% {
        transform: perspective(1200px)
    }
}
.slidePullRightIn {
    -webkit-animation-name: slidePullRightIn;
    animation-name: slidePullRightIn
}
@-webkit-keyframes slidePullRightIn {
    0% {
        opacity: 0;
        -webkit-transform: perspective(1200px) translateZ(-500px) translateX(200%)
    }
    25% {
        opacity: .5;
        -webkit-transform: perspective(1200px) translateZ(-500px) translateX(200%)
    }
    75% {
        opacity: .5;
        -webkit-transform: perspective(1200px) translateZ(-500px)
    }
    100% {
        -webkit-transform: perspective(1200px)
    }
}
.slidePullUpIn {
    -webkit-animation-name: slidePullUpIn;
    animation-name: slidePullUpIn
}
@-webkit-keyframes slidePullUpIn {
    0% {
        opacity: 0;
        -webkit-transform: perspective(1200px) translateZ(-500px) translateY(-200%)
    }
    25% {
        opacity: .5;
        -webkit-transform: perspective(1200px) translateZ(-500px) translateY(-200%)
    }
    75% {
        opacity: .5;
        -webkit-transform: perspective(1200px) translateZ(-500px)
    }
    100% {
        -webkit-transform: perspective(1200px)
    }
}
@keyframes slidePullUpIn {
    0% {
        opacity: 0;
        transform: perspective(1200px) translateZ(-500px) translateY(-200%)
    }
    25% {
        opacity: .5;
        transform: perspective(1200px) translateZ(-500px) translateY(-200%)
    }
    75% {
        opacity: .5;
        transform: perspective(1200px) translateZ(-500px)
    }
    100% {
        transform: perspective(1200px)
    }
}
.slidePullDownIn {
    -webkit-animation-name: slidePullDownIn;
    animation-name: slidePullDownIn
}
@-webkit-keyframes slidePullDownIn {
    0% {
        opacity: 0;
        -webkit-transform: perspective(1200px) translateZ(-500px) translateY(200%)
    }
    25% {
        opacity: .5;
        -webkit-transform: perspective(1200px) translateZ(-500px) translateY(200%)
    }
    75% {
        opacity: .5;
        -webkit-transform: perspective(1200px) translateZ(-500px)
    }
    100% {
        -webkit-transform: perspective(1200px)
    }
}
@keyframes slidePullDownIn {
    0% {
        opacity: 0;
        transform: perspective(1200px) translateZ(-500px) translateY(200%)
    }
    25% {
        opacity: .5;
        transform: perspective(1200px) translateZ(-500px) translateY(200%)
    }
    75% {
        opacity: .5;
        transform: perspective(1200px) translateZ(-500px)
    }
    100% {
        transform: perspective(1200px)
    }
}
.soEdgeUpIn {
    -webkit-animation-name: soEdgeUpIn;
    animation-name: soEdgeUpIn
}
@-webkit-keyframes soEdgeUpIn {
    from {
        -webkit-transform-origin: 50% 0;
        -webkit-transform: scale(0)
    }
    to {
        -webkit-transform-origin: 50% 0
    }
}
@keyframes soEdgeUpIn {
    from {
        transform-origin: 50% 0;
        transform: scale(0)
    }
    to {
        transform-origin: 50% 0
    }
}
.soEdgeDownIn {
    -webkit-animation-name: soEdgeDownIn;
    animation-name: soEdgeDownIn
}
@-webkit-keyframes soEdgeDownIn {
    from {
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: scale(0)
    }
    to {
        -webkit-transform-origin: 50% 100%
    }
}
@keyframes soEdgeDownIn {
    from {
        transform-origin: 50% 100%;
        transform: scale(0)
    }
    to {
        transform-origin: 50% 100%
    }
}
.soEdgeLeftIn {
    -webkit-animation-name: soEdgeLeftIn;
    animation-name: soEdgeLeftIn
}
@-webkit-keyframes soEdgeLeftIn {
    from {
        -webkit-transform-origin: 0 50%;
        -webkit-transform: scale(0)
    }
    to {
        -webkit-transform-origin: 0 50%
    }
}
@keyframes soEdgeLeftIn {
    from {
        transform-origin: 0 50%;
        transform: scale(0)
    }
    to {
        transform-origin: 0 50%
    }
}
.soEdgeRightIn {
    -webkit-animation-name: soEdgeRightIn;
    animation-name: soEdgeRightIn
}
@-webkit-keyframes soEdgeRightIn {
    from {
        -webkit-transform-origin: 100% 50%;
        -webkit-transform: scale(0)
    }
    to {
        -webkit-transform-origin: 100% 50%
    }
}
@keyframes soEdgeRightIn {
    from {
        transform-origin: 100% 50%;
        transform: scale(0)
    }
    to {
        transform-origin: 100% 50%
    }
}
.soEdgeUpOut {
    -webkit-animation-name: soEdgeUpOut;
    animation-name: soEdgeUpOut
}
@-webkit-keyframes soEdgeUpOut {
    from {
        -webkit-transform-origin: 50% 0
    }
    to {
        -webkit-transform-origin: 50% 0;
        -webkit-transform: scale(0)
    }
}
@keyframes soEdgeUpOut {
    from {
        transform-origin: 50% 0
    }
    to {
        transform-origin: 50% 0;
        transform: scale(0)
    }
}
.soEdgeDownOut {
    -webkit-animation-name: soEdgeDownOut;
    animation-name: soEdgeDownOut
}
@-webkit-keyframes soEdgeDownOut {
    from {
        -webkit-transform-origin: 50% 100%
    }
    to {
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: scale(0)
    }
}
@keyframes soEdgeDownOut {
    from {
        transform-origin: 50% 100%
    }
    to {
        transform-origin: 50% 100%;
        transform: scale(0)
    }
}
.soEdgeLeftOut {
    -webkit-animation-name: soEdgeLeftOut;
    animation-name: soEdgeLeftOut
}
@-webkit-keyframes soEdgeLeftOut {
    from {
        -webkit-transform-origin: 0 50%
    }
    to {
        -webkit-transform-origin: 0 50%;
        -webkit-transform: scale(0)
    }
}
@keyframes soEdgeLeftOut {
    from {
        transform-origin: 0 50%
    }
    to {
        transform-origin: 0 50%;
        transform: scale(0)
    }
}
.soEdgeRightOut {
    -webkit-animation-name: soEdgeRightOut;
    animation-name: soEdgeRightOut
}
@-webkit-keyframes soEdgeRightOut {
    from {
        -webkit-transform-origin: 100% 50%
    }
    to {
        -webkit-transform-origin: 100% 50%;
        -webkit-transform: scale(0)
    }
}
@keyframes soEdgeRightOut {
    from {
        transform-origin: 100% 50%
    }
    to {
        transform-origin: 100% 50%;
        transform: scale(0)
    }
}
.roSlit {
    -webkit-animation-name: roSlit;
    animation-name: roSlit;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}
@-webkit-keyframes roSlit {
    0% {
        opacity: 0;
        -webkit-transform: perspective(800px) translateZ(-3000px) rotateY(90deg)
    }
    50% {
        -webkit-transform: perspective(800px) translateZ(-250px) rotateY(89deg)
    }
}
@keyframes roSlit {
    0% {
        opacity: 0;
        transform: perspective(800px) translateZ(-3000px) rotateY(90deg)
    }
    50% {
        transform: perspective(800px) translateZ(-250px) rotateY(89deg)
    }
}
.newspaperIn {
    -webkit-animation-name: newspaperIn;
    animation-name: newspaperIn
}
@-webkit-keyframes newspaperIn {
    from {
        opacity: 0;
        -webkit-transform: perspective(800px) translateZ(-3000px) rotate(720deg)
    }
}
@keyframes newspaperIn {
    from {
        opacity: 0;
        transform: perspective(800px) translateZ(-3000px) rotate(720deg)
    }
}
.newspaperOut {
    -webkit-animation-name: newspaperOut;
    animation-name: newspaperOut
}
@-webkit-keyframes newspaperOut {
    to {
        opacity: 0;
        -webkit-transform: perspective(800px) translateZ(-3000px) rotate(-720deg)
    }
}
@keyframes newspaperOut {
    to {
        opacity: 0;
        transform: perspective(800px) translateZ(-3000px) rotate(-720deg)
    }
}
.glueLeftOut {
    -webkit-animation: glueLeftOut ease-in;
    animation: glueLeftOut ease-in
}
@-webkit-keyframes glueLeftOut {
    40% {
        opacity: .8;
        -webkit-transform-origin: 0 50%;
        -webkit-transform: perspective(800px) rotateY(15deg);
        -webkit-animation-timing-function: ease-out
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: 20% 50%;
        -webkit-transform: perspective(800px) scale(.8) translateZ(-500px)
    }
}
@keyframes glueLeftOut {
    40% {
        opacity: .8;
        transform-origin: 0 50%;
        transform: perspective(800px) rotateY(15deg);
        animation-timing-function: ease-out
    }
    100% {
        opacity: 0;
        transform-origin: 20% 50%;
        transform: perspective(800px) scale(.8) translateZ(-500px)
    }
}
.glueRightOut {
    -webkit-animation: glueRightOut ease-in;
    animation: glueRightOut ease-in
}
@-webkit-keyframes glueRightOut {
    40% {
        opacity: .8;
        -webkit-transform-origin: 100% 50%;
        -webkit-transform: perspective(800px) rotateY(-15deg);
        -webkit-animation-timing-function: ease-out
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: 80% 50%;
        -webkit-transform: perspective(800px) scale(.8) translateZ(-500px)
    }
}
@keyframes glueRightOut {
    40% {
        opacity: .8;
        transform-origin: 100% 50%;
        transform: perspective(800px) rotateY(-15deg);
        animation-timing-function: ease-out
    }
    100% {
        opacity: 0;
        transform-origin: 80% 50%;
        transform: perspective(800px) scale(.8) translateZ(-500px)
    }
}
.glueUpOut {
    -webkit-animation: glueUpOut ease-in;
    animation: glueUpOut ease-in
}
@-webkit-keyframes glueUpOut {
    40% {
        opacity: .8;
        -webkit-transform-origin: 50% 0;
        -webkit-transform: perspective(800px) rotateX(-15deg);
        -webkit-animation-timing-function: ease-out
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: 50% 20%;
        -webkit-transform: perspective(800px) scale(.8) translateZ(-500px)
    }
}
@keyframes glueUpOut {
    40% {
        opacity: .8;
        transform-origin: 50% 0;
        transform: perspective(800px) rotateX(-15deg);
        animation-timing-function: ease-out
    }
    100% {
        opacity: 0;
        transform-origin: 50% 20%;
        transform: perspective(800px) scale(.8) translateZ(-500px)
    }
}
.glueDownOut {
    -webkit-animation: glueDownOut ease-in;
    animation: glueDownOut ease-in
}
@-webkit-keyframes glueDownOut {
    40% {
        opacity: .8;
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: perspective(800px) rotateX(15deg);
        -webkit-animation-timing-function: ease-out
    }
    100% {
        opacity: 0;
        -webkit-transform-origin: 50% 80%;
        -webkit-transform: perspective(800px) scale(.8) translateZ(-500px)
    }
}
@keyframes glueDownOut {
    40% {
        opacity: .8;
        transform-origin: 50% 100%;
        transform: perspective(800px) rotateX(15deg);
        animation-timing-function: ease-out
    }
    100% {
        opacity: 0;
        transform-origin: 50% 80%;
        transform: perspective(800px) scale(.8) translateZ(-500px)
    }
}
.glueLeftIn {
    -webkit-animation: glueLeftIn ease-in;
    animation: glueLeftIn ease-in
}
@-webkit-keyframes glueLeftIn {
    0% {
        opacity: 0;
        -webkit-transform-origin: 20% 50%;
        -webkit-transform: perspective(800px) scale(.8) translateZ(-500px)
    }
    40% {
        opacity: .8;
        -webkit-transform-origin: 0 50%;
        -webkit-transform: perspective(800px) rotateY(15deg);
        -webkit-animation-timing-function: ease-out
    }
    100% {
        -webkit-transform-origin: 0 50%;
        -webkit-transform: perspective(800px)
    }
}
@keyframes glueLeftIn {
    0% {
        opacity: 0;
        transform-origin: 20% 50%;
        transform: perspective(800px) scale(.8) translateZ(-500px)
    }
    40% {
        opacity: .8;
        transform-origin: 0 50%;
        transform: perspective(800px) rotateY(15deg);
        animation-timing-function: ease-out
    }
    100% {
        transform-origin: 0 50%;
        transform: perspective(800px)
    }
}
.glueRightIn {
    -webkit-animation: glueRightIn ease-in;
    animation: glueRightIn ease-in;
    transform-origin: 100% 50%
}
@-webkit-keyframes glueRightIn {
    0% {
        opacity: 0;
        -webkit-transform-origin: 80% 50%;
        -webkit-transform: perspective(800px) scale(.8) translateZ(-500px)
    }
    40% {
        opacity: .8;
        -webkit-transform-origin: 100% 50%;
        -webkit-transform: perspective(800px) rotateY(-15deg);
        -webkit-animation-timing-function: ease-out
    }
    100% {
        -webkit-transform-origin: 100% 50%;
        -webkit-transform: perspective(800px)
    }
}
@keyframes glueRightIn {
    0% {
        opacity: 0;
        transform-origin: 80% 50%;
        transform: perspective(800px) scale(.8) translateZ(-500px)
    }
    40% {
        opacity: .8;
        transform-origin: 100% 50%;
        transform: perspective(800px) rotateY(-15deg);
        animation-timing-function: ease-out
    }
    100% {
        transform-origin: 100% 50%;
        transform: perspective(800px)
    }
}
.glueUpIn {
    -webkit-animation: glueUpIn ease-in;
    animation: glueUpIn ease-in
}
@-webkit-keyframes glueUpIn {
    0% {
        opacity: 0;
        -webkit-transform-origin: 50% 20%;
        -webkit-transform: perspective(800px) scale(.8) translateZ(-500px)
    }
    40% {
        opacity: .8;
        -webkit-transform-origin: 50% 0;
        -webkit-transform: perspective(800px) rotateX(-15deg);
        -webkit-animation-timing-function: ease-out
    }
    100% {
        -webkit-transform-origin: 50% 0;
        -webkit-transform: perspective(800px)
    }
}
@keyframes glueUpIn {
    0% {
        opacity: 0;
        transform-origin: 50% 20%;
        transform: perspective(800px) scale(.8) translateZ(-500px)
    }
    40% {
        opacity: .8;
        transform-origin: 50% 0;
        transform: perspective(800px) rotateX(-15deg);
        animation-timing-function: ease-out

    }
    100% {
        transform-origin: 50% 0;
        transform: perspective(800px)
    }
}
.glueDownIn {
    -webkit-animation: glueDownIn ease-in;
    animation: glueDownIn ease-in
}
@-webkit-keyframes glueDownIn {
    0% {
        opacity: 0;
        -webkit-transform-origin: 50% 80%;
        -webkit-transform: perspective(800px) scale(.8) translateZ(-500px)
    }
    40% {
        opacity: .8;
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: perspective(800px) rotateX(15deg);
        -webkit-animation-timing-function: ease-out
    }
    100% {
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: perspective(800px)
    }
}
@keyframes glueDownIn {
    0% {
        opacity: 0;
        transform-origin: 50% 80%;
        transform: perspective(800px) scale(.8) translateZ(-500px)
    }
    40% {
        opacity: .8;
        transform-origin: 50% 100%;
        transform: perspective(800px) rotateX(15deg);
        animation-timing-function: ease-out
    }
    100% {
        transform-origin: 50% 100%;
        transform: perspective(800px)
    }
}
.code-animated[class*=shake] {
    -webkit-animation-duration: .1s!important;
    animation-duration: .1s!important;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
}
.shake {
    -webkit-animation-name: shake;
    animation-name: shake
}
@-webkit-keyframes shake {
    0%, 100% {
        -webkit-transform: translate(0, 0) rotate(0)
    }
    10% {
        -webkit-transform: translate(2px, -2px) rotate(-1deg)
    }
    20% {
        -webkit-transform: translate(2px, -1px) rotate(1deg)
    }
    30% {
        -webkit-transform: translate(-1px, -1px) rotate(-2deg)
    }
    40% {
        -webkit-transform: translate(-3px, 2px) rotate(-1deg)
    }
    50% {
        -webkit-transform: translate(2px, 2px) rotate(-2deg)
    }
    60% {
        -webkit-transform: translate(-1px, -2px) rotate(-1deg)
    }
    70% {
        -webkit-transform: translate(1px, -3px) rotate(-2deg)
    }
    80% {
        -webkit-transform: translate(-3px, -3px) rotate(1deg)
    }
    90% {
        -webkit-transform: translate(2px, -3px) rotate(-2deg)
    }
}
@keyframes shake {
    0%, 100% {
        transform: translate(0, 0) rotate(0)
    }
    10% {
        transform: translate(2px, -2px) rotate(-1deg)
    }
    20% {
        transform: translate(2px, -1px) rotate(1deg)
    }
    30% {
        transform: translate(-1px, -1px) rotate(-2deg)
    }
    40% {
        transform: translate(-3px, 2px) rotate(-1deg)
    }
    50% {
        transform: translate(2px, 2px) rotate(-2deg)
    }
    60% {
        transform: translate(-1px, -2px) rotate(-1deg)
    }
    70% {
        transform: translate(1px, -3px) rotate(-2deg)
    }
    80% {
        transform: translate(-3px, -3px) rotate(1deg)
    }
    90% {
        transform: translate(2px, -3px) rotate(-2deg)
    }
}
.code-animated.shakeSlow {
    -webkit-animation-name: shakeSlow;
    animation-name: shakeSlow;
    -webkit-animation-duration: 1s!important;
    animation-duration: 1s!important
}
@-webkit-keyframes shakeSlow {
    0%, 100% {
        -webkit-transform: translate(0, 0) rotate(0)
    }
    10% {
        -webkit-transform: translate(-7px, -9px) rotate(1deg)
    }
    20% {
        -webkit-transform: translate(-2px, 7px) rotate(-3deg)
    }
    30% {
        -webkit-transform: translate(-3px, 6px) rotate(3deg)
    }
    40% {
        -webkit-transform: translate(1px, -3px) rotate(-4deg)
    }
    50% {
        -webkit-transform: translate(2px, -6px) rotate(2deg)
    }
    60% {
        -webkit-transform: translate(-9px, 6px) rotate(-4deg)
    }
    70% {
        -webkit-transform: translate(9px, 8px) rotate(-4deg)
    }
    80% {
        -webkit-transform: translate(-7px, -8px) rotate(3deg)
    }
    90% {
        -webkit-transform: translate(-6px, -4px) rotate(-2deg)
    }
}
@keyframes shakeSlow {
    0%, 100% {
        transform: translate(0, 0) rotate(0)
    }
    10% {
        transform: translate(-7px, -9px) rotate(1deg)
    }
    20% {
        transform: translate(-2px, 7px) rotate(-3deg)
    }
    30% {
        transform: translate(-3px, 6px) rotate(3deg)
    }
    40% {
        transform: translate(1px, -3px) rotate(-4deg)
    }
    50% {
        transform: translate(2px, -6px) rotate(2deg)
    }
    60% {
        transform: translate(-9px, 6px) rotate(-4deg)
    }
    70% {
        transform: translate(9px, 8px) rotate(-4deg)
    }
    80% {
        transform: translate(-7px, -8px) rotate(3deg)
    }
    90% {
        transform: translate(-6px, -4px) rotate(-2deg)
    }
}
.shakeLittle {
    -webkit-animation-name: shakeLittle;
    animation-name: shakeLittle
}
@-webkit-keyframes shakeLittle {
    0%, 100% {
        -webkit-transform: translate(0, 0) rotate(0)
    }
    10% {
        -webkit-transform: translate(-1px, -1px) rotate(-1deg)
    }
    20% {
        -webkit-transform: translate(0, -1px) rotate(-1deg)
    }
    30% {
        -webkit-transform: translate(-1px, -1px) rotate(0)
    }
    40% {
        -webkit-transform: translate(0, 0) rotate(0)
    }
    50% {
        -webkit-transform: translate(0, -1px) rotate(-1deg)
    }
    60% {
        -webkit-transform: translate(-1px, 0) rotate(-1deg)
    }
    70% {
        -webkit-transform: translate(0, 0) rotate(-1deg)
    }
    80% {
        -webkit-transform: translate(-1px, 0) rotate(0)
    }
    90% {
        -webkit-transform: translate(0, -1px) rotate(-1deg)
    }
}
@keyframes shakeLittle {
    0%, 100% {
        transform: translate(0, 0) rotate(0)
    }
    10% {
        transform: translate(-1px, -1px) rotate(-1deg)
    }
    20% {
        transform: translate(0, -1px) rotate(-1deg)
    }
    30% {
        transform: translate(-1px, -1px) rotate(0)
    }
    40% {
        transform: translate(0, 0) rotate(0)
    }
    50% {
        transform: translate(0, -1px) rotate(-1deg)
    }
    60% {
        transform: translate(-1px, 0) rotate(-1deg)
    }
    70% {
        transform: translate(0, 0) rotate(-1deg)
    }
    80% {
        transform: translate(-1px, 0) rotate(0)
    }
    90% {
        transform: translate(0, -1px) rotate(-1deg)
    }
}
.shakeHard {
    -webkit-animation-name: shakeHard;
    animation-name: shakeHard
}
@-webkit-keyframes shakeHard {
    0% {
        -webkit-transform: translate(0, 0) rotate(0)
    }
    10% {
        -webkit-transform: translate(-7px, 6px) rotate(-1deg)
    }
    20% {
        -webkit-transform: translate(7px, -8px) rotate(1deg)
    }
    30% {
        -webkit-transform: translate(-3px, 7px) rotate(2deg)
    }
    40% {
        -webkit-transform: translate(-3px, -7px) rotate(1deg)
    }
    50% {
        -webkit-transform: translate(9px, -2px) rotate(3deg)
    }
    60% {
        -webkit-transform: translate(5px, -1px) rotate(-2deg)
    }
    70% {
        -webkit-transform: translate(0, 6px) rotate(-4deg)
    }
    80% {
        -webkit-transform: translate(7px, 9px) rotate(-1deg)
    }
    90% {
        -webkit-transform: translate(-10px, 9px) rotate(2deg)
    }
}
@keyframes shakeHard {
    0% {
        transform: translate(0, 0) rotate(0)
    }
    10% {
        transform: translate(-7px, 6px) rotate(-1deg)
    }
    20% {
        transform: translate(7px, -8px) rotate(1deg)
    }
    30% {
        transform: translate(-3px, 7px) rotate(2deg)
    }
    40% {
        transform: translate(-3px, -7px) rotate(1deg)
    }
    50% {
        transform: translate(9px, -2px) rotate(3deg)
    }
    60% {
        transform: translate(5px, -1px) rotate(-2deg)
    }
    70% {
        transform: translate(0, 6px) rotate(-4deg)
    }
    80% {
        transform: translate(7px, 9px) rotate(-1deg)
    }
    90% {
        transform: translate(-10px, 9px) rotate(2deg)
    }
}
.shakeHor {
    -webkit-animation-name: shakeHor;
    animation-name: shakeHor
}
@-webkit-keyframes shakeHor {
    0%, 100% {
        -webkit-transform: translateX(0)
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translateX(-8px)
    }
    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translateX(8px)
    }
}
@keyframes shakeHor {
    0%, 100% {
        transform: translateX(0)
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-8px)
    }
    20%,
    40%,
    60%,
    80% {
        transform: translateX(8px)
    }
}
.shakeVer {
    -webkit-animation-name: shakeVer;
    animation-name: shakeVer
}
@-webkit-keyframes shakeVer {
    0%, 100% {
        -webkit-transform: translateY(0)
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translateY(-8px)
    }
    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translateY(8px)
    }
}
@keyframes shakeVer {
    0%, 100% {
        transform: translateY(0)
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateY(-8px)
    }
    20%,
    40%,
    60%,
    80% {
        transform: translateY(8px)
    }
}
.shakeRotate {
    -webkit-animation-name: shakeRotate;
    animation-name: shakeRotate
}
@-webkit-keyframes shakeRotate {
    0%, 100% {
        -webkit-transform: rotate(0)
    }
    15%,
    45%,
    75% {
        -webkit-transform: rotate(-5deg)
    }
    30%,
    60%,
    90% {
        -webkit-transform: rotate(5deg)
    }
}
@keyframes shakeRotate {
    0%, 100% {
        transform: rotate(0)
    }
    15%,
    45%,
    75% {
        transform: rotate(-5deg)
    }
    30%,
    60%,
    90% {
        transform: rotate(5deg)
    }
}
.code-animated.shakeOpacity {
    -webkit-animation-name: shakeOpacity;
    animation-name: shakeOpacity;
    -webkit-animation-duration: .2s!important;
    animation-duration: .2s!important
}
@-webkit-keyframes shakeOpacity {
    0% {
        -webkit-transform: translate(0, 0) rotate(0);
        opacity: .2
    }
    20% {
        -webkit-transform: translate(-5px, -2px) rotate(2deg);
        opacity: .9
    }
    40% {
        -webkit-transform: translate(-1px, 2px) rotate(-3deg);
        opacity: .4
    }
    60% {
        -webkit-transform: translate(-5px, -4px) rotate(-1deg);
        opacity: 0
    }
    80% {
        -webkit-transform: translate(-5px, 2px) rotate(1deg);
        opacity: .6
    }
}
@keyframes shakeOpacity {
    0% {
        transform: translate(0, 0) rotate(0);
        opacity: .2
    }
    20% {
        transform: translate(-5px, -2px) rotate(2deg);
        opacity: .9
    }
    40% {
        transform: translate(-1px, 2px) rotate(-3deg);
        opacity: .4
    }
    60% {
        transform: translate(-5px, -4px) rotate(-1deg);
        opacity: 0
    }
    80% {
        transform: translate(-5px, 2px) rotate(1deg);
        opacity: .6
    }
}
.shakeCrazy {
    -webkit-animation-name: shakeCrazy;
    animation-name: shakeCrazy
}
@-webkit-keyframes shakeCrazy {
    0% {
        -webkit-transform: translate(0, 0) rotate(0);
        opacity: .1
    }
    20% {
        -webkit-transform: translate(-19px, -15px) rotate(-8deg);
        opacity: .5
    }
    40% {
        -webkit-transform: translate(15px, 5px) rotate(6deg);
        opacity: .4
    }
    60% {
        -webkit-transform: translate(-12px, 11px) rotate(-7deg);
        opacity: 0
    }
    80% {
        -webkit-transform: translate(-10px, -13px) rotate(5deg);
        opacity: .6
    }
}
@keyframes shakeCrazy {
    0% {
        transform: translate(0, 0) rotate(0);
        opacity: .1
    }
    20% {
        transform: translate(-19px, -15px) rotate(-8deg);
        opacity: .5
    }
    40% {
        transform: translate(15px, 5px) rotate(6deg);
        opacity: .4
    }
    60% {
        transform: translate(-12px, 11px) rotate(-7deg);

        opacity: 0
    }
    80% {
        transform: translate(-10px, -13px) rotate(5deg);
        opacity: .6
    }
}
.fanBehindDown {
    -webkit-animation-name: fanBehindDown;
    animation-name: fanBehindDown
}
@-webkit-keyframes fanBehindDown {
    0%, 49%, 51%, 99% {
        -webkit-transform-origin: -50% -50%
    }
    50% {
        z-index: 9999;
        opacity: .8;
        -webkit-transform: rotate(30deg)
    }
    100% {
        opacity: 0;
        -webkit-transform: rotate(0deg)
    }
}
@keyframes fanBehindDown {
    0%, 49%, 51%, 99% {
        transform-origin: -50% -50%
    }
    50% {
        z-index: 9999;
        opacity: .8;
        transform: rotate(30deg)
    }
    100% {
        opacity: 0;
        transform: rotate(0deg)
    }
}
.fanBehindUp {
    -webkit-animation-name: fanBehindUp;
    animation-name: fanBehindUp
}
@-webkit-keyframes fanBehindUp {
    0%, 49%, 51%, 99% {
        -webkit-transform-origin: -50% -50%
    }
    50% {
        z-index: 9999;
        opacity: .8;
        -webkit-transform: rotate(-20deg)
    }
    100% {
        opacity: 0;
        -webkit-transform: rotate(0deg)
    }
}
@keyframes fanBehindUp {
    0%, 49%, 51%, 99% {
        transform-origin: -50% -50%
    }
    50% {
        z-index: 9999;
        opacity: .8;
        transform: rotate(-20deg)
    }
    100% {
        opacity: 0;
        transform: rotate(0deg)
    }
}
.fanFrontUp {
    -webkit-animation-name: fanFrontUp;
    animation-name: fanFrontUp
}
@-webkit-keyframes fanFrontUp {
    0%, 49%, 52%, 99% {
        -webkit-transform-origin: -50% -50%
    }
    50% {
        -webkit-transform: rotate(-20deg)
    }
    51% {
        -webkit-transform: rotate(-20deg);
        z-index: 9999
    }
    100% {
        -webkit-transform: rotate(0deg);
        z-index: 9999
    }
}
@keyframes fanFrontUp {
    0%, 49%, 52%, 99% {
        transform-origin: -50% -50%
    }
    50% {
        transform: rotate(-20deg)
    }
    51% {
        transform: rotate(-20deg);
        z-index: 9999
    }
    100% {
        transform: rotate(0deg);
        z-index: 9999
    }
}
.fanFrontDown {
    -webkit-animation-name: fanFrontDown;
    animation-name: fanFrontDown
}
@-webkit-keyframes fanFrontDown {
    0%, 49%, 52%, 99% {
        -webkit-transform-origin: -50% -50%
    }
    50% {
        -webkit-transform: rotate(30deg)
    }
    51% {
        -webkit-transform: rotate(30deg);
        z-index: 9999
    }
    100% {
        -webkit-transform: rotate(0deg);
        z-index: 9999
    }
}
@keyframes fanFrontDown {
    0%, 49%, 52%, 99% {
        transform-origin: -50% -50%
    }
    50% {
        transform: rotate(30deg)
    }
    51% {
        transform: rotate(30deg);
        z-index: 9999
    }
    100% {
        transform: rotate(0deg);
        z-index: 9999
    }
}
.moveLeftBehind {
    -webkit-animation-name: moveLeftBehind;
    animation-name: moveLeftBehind
}
@-webkit-keyframes moveLeftBehind {
    0% {
        -webkit-transform: perspective(800px)
    }
    50% {
        z-index: 9999;
        opacity: 1;
        -webkit-transform: perspective(800px) translateX(-120%) rotateY(35deg) rotateX(10deg)
    }
    100% {
        opacity: 0;
        -webkit-transform: perspective(800px) translateZ(-10px)
    }
}
@keyframes moveLeftBehind {
    0% {
        transform: perspective(800px)
    }
    50% {
        z-index: 9999;
        opacity: 1;
        transform: perspective(800px) translateX(-120%) rotateY(35deg) rotateX(10deg)
    }
    100% {
        opacity: 0;
        transform: perspective(800px) translateZ(-10px)
    }
}
.moveRightBehind {
    -webkit-animation-name: moveRightBehind;
    animation-name: moveRightBehind
}
@-webkit-keyframes moveRightBehind {
    0% {
        -webkit-transform: perspective(800px)
    }
    50% {
        z-index: 9999;
        opacity: 1;
        -webkit-transform: perspective(800px) translateX(120%) rotateY(-35deg) rotateX(10deg)
    }
    100% {
        opacity: 0;
        -webkit-transform: perspective(800px) translateZ(-10px)
    }
}
@keyframes moveRightBehind {
    0% {
        transform: perspective(800px)
    }
    50% {
        z-index: 9999;
        opacity: 1;
        transform: perspective(800px) translateX(120%) rotateY(-35deg) rotateX(10deg)
    }
    100% {
        opacity: 0;
        transform: perspective(800px) translateZ(-10px)
    }
}
.moveLeftFront {
    -webkit-animation-name: moveLeftFront;
    animation-name: moveLeftFront
}
@-webkit-keyframes moveLeftFront {
    0% {
        opacity: 0;
        -webkit-transform: perspective(800px)
    }
    50% {
        opacity: 1;
        -webkit-transform: perspective(800px) translateX(-120%) translateZ(-10px) rotateY(35deg) rotateX(10deg)
    }
    51% {
        z-index: 9999;
        -webkit-transform: perspective(800px) translateX(-120%) translateZ(-10px) rotateY(35deg) rotateX(10deg)
    }
    100% {
        z-index: 9999;
        -webkit-transform: perspective(800px)
    }
}
@keyframes moveLeftFront {
    0% {
        opacity: 0;
        transform: perspective(800px)
    }
    50% {
        opacity: 1;
        transform: perspective(800px) translateX(-120%) translateZ(-10px) rotateY(35deg) rotateX(10deg)
    }
    51% {
        z-index: 9999;
        transform: perspective(800px) translateX(-120%) translateZ(-10px) rotateY(35deg) rotateX(10deg)
    }
    100% {
        z-index: 9999;
        transform: perspective(800px)
    }
}
.moveRightFront {
    -webkit-animation-name: moveRightFront;
    animation-name: moveRightFront
}
@-webkit-keyframes moveRightFront {
    0% {
        opacity: 0;
        -webkit-transform: perspective(800px)
    }
    50% {
        opacity: 1;
        -webkit-transform: perspective(800px) translateX(120%) translateZ(-10px) rotateY(-35deg) rotateX(10deg)
    }
    51% {
        z-index: 9999;
        -webkit-transform: perspective(800px) translateX(120%) translateZ(-10px) rotateY(-35deg) rotateX(10deg)
    }
    100% {
        z-index: 9999;
        -webkit-transform: perspective(800px)
    }
}
@keyframes moveRightFront {
    0% {
        opacity: 0;
        transform: perspective(800px)
    }
    50% {
        opacity: 1;
        transform: perspective(800px) translateX(120%) translateZ(-10px) rotateY(-35deg) rotateX(10deg)
    }
    51% {
        z-index: 9999;
        transform: perspective(800px) translateX(120%) translateZ(-10px) rotateY(-35deg) rotateX(10deg)
    }
    100% {
        z-index: 9999;
        transform: perspective(800px)
    }
}
.moveShortLeftBehind {
    -webkit-animation-name: moveShortLeftBehind;
    animation-name: moveShortLeftBehind
}
@-webkit-keyframes moveShortLeftBehind {
    0% {
        -webkit-transform: perspective(800px)
    }
    40% {
        opacity: 1;
        z-index: 9999;
        -webkit-transform: perspective(800px) translateX(-40%) scale(.8) rotateY(20deg)
    }
    100% {
        opacity: 0;
        -webkit-transform: perspective(800px) translateZ(-400px)
    }
}
@keyframes moveShortLeftBehind {
    0% {
        transform: perspective(800px)
    }
    40% {
        opacity: 1;
        z-index: 9999;
        transform: perspective(800px) translateX(-40%) scale(.8) rotateY(20deg)
    }
    100% {
        opacity: 0;
        transform: perspective(800px) translateZ(-400px)
    }
}
.moveShortRightBehind {
    -webkit-animation-name: moveShortRightBehind;
    animation-name: moveShortRightBehind
}
@-webkit-keyframes moveShortRightBehind {
    0% {
        -webkit-transform: perspective(800px)
    }
    40% {
        opacity: 1;
        z-index: 9999;
        -webkit-transform: perspective(800px) translateX(40%) scale(.8) rotateY(-20deg)
    }
    100% {
        opacity: 0;
        -webkit-transform: perspective(800px) translateZ(-400px)
    }
}
@keyframes moveShortRightBehind {
    0% {
        transform: perspective(800px)
    }
    40% {
        opacity: 1;
        z-index: 9999;
        transform: perspective(800px) translateX(40%) scale(.8) rotateY(-20deg)
    }
    100% {
        opacity: 0;
        transform: perspective(800px) translateZ(-400px)
    }
}
.moveShortLeftFront {
    -webkit-animation-name: moveShortLeftFront;
    animation-name: moveShortLeftFront
}
@-webkit-keyframes moveShortLeftFront {
    0% {
        opacity: 0;
        -webkit-transform: perspective(800px) translateZ(-400px)
    }
    40% {
        opacity: 1;
        -webkit-transform: perspective(800px) translateX(-40%) scale(.8) rotateY(20deg)
    }
    41% {
        z-index: 9999;
        -webkit-transform: perspective(800px) translateX(-40%) scale(.8) rotateY(20deg)
    }
    100% {
        z-index: 9999;
        -webkit-transform: perspective(800px)
    }
}
@keyframes moveShortLeftFront {
    0% {
        opacity: 0;
        transform: perspective(800px) translateZ(-400px)
    }
    40% {
        opacity: 1;
        transform: perspective(800px) translateX(-40%) scale(.8) rotateY(20deg)
    }
    41% {
        z-index: 9999;
        transform: perspective(800px) translateX(-40%) scale(.8) rotateY(20deg)
    }
    100% {
        z-index: 9999;
        transform: perspective(800px)
    }
}
.moveShortRightFront {
    -webkit-animation-name: moveShortRightFront;
    animation-name: moveShortRightFront
}
@-webkit-keyframes moveShortRightFront {
    0% {
        opacity: 0;
        -webkit-transform: perspective(800px) translateZ(-400px)
    }
    40% {
        opacity: 1;
        -webkit-transform: perspective(800px) translateX(40%) scale(.8) rotateY(-20deg)
    }
    41% {
        z-index: 9999;
        -webkit-transform: perspective(800px) translateX(40%) scale(.8) rotateY(-20deg)
    }
    100% {
        z-index: 9999;
        -webkit-transform: perspective(800px)
    }
}
@keyframes moveShortRightFront {
    0% {
        opacity: 0;
        transform: perspective(800px) translateZ(-400px)
    }
    40% {
        opacity: 1;
        transform: perspective(800px) translateX(40%) scale(.8) rotateY(-20deg)
    }
    41% {
        z-index: 9999;
        transform: perspective(800px) translateX(40%) scale(.8) rotateY(-20deg)
    }
    100% {
        z-index: 9999;
        transform: perspective(800px)
    }
}
.codefx-moveHor.code-viewport {
    overflow: hidden!important
}
.codefx-moveHor.code-slideNext .code-slideIn {
    -webkit-animation-name: slideOneRightIn;
    animation-name: slideOneRightIn
}
.codefx-moveHor.code-slideNext .code-slideOut {
    -webkit-animation-name: slideOneLeftOut;
    animation-name: slideOneLeftOut
}
.codefx-moveHor.code-slidePrev .code-slideIn {
    -webkit-animation-name: slideOneLeftIn;
    animation-name: slideOneLeftIn
}
.codefx-moveHor.code-slidePrev .code-slideOut {
    -webkit-animation-name: slideOneRightOut;
    animation-name: slideOneRightOut
}
.codefx-moveVer.code-viewport {
    overflow: hidden!important
}
.codefx-moveVer.code-slideNext .code-slideIn {
    -webkit-animation-name: slideOneDownIn;
    animation-name: slideOneDownIn
}
.codefx-moveVer.code-slideNext .code-slideOut {
    -webkit-animation-name: slideOneUpOut;
    animation-name: slideOneUpOut
}
.codefx-moveVer.code-slidePrev .code-slideIn {
    -webkit-animation-name: slideOneUpIn;
    animation-name: slideOneUpIn
}
.codefx-moveVer.code-slidePrev .code-slideOut {
    -webkit-animation-name: slideOneDownOut;
    animation-name: slideOneDownOut
}
.codefx-fade .code-slideIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn
}
.codefx-fade .code-slideOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut
}
.codefx-fadeHor.code-viewport {
    overflow: hidden!important
}
.codefx-fadeHor.code-slideNext .code-slideIn {
    -webkit-animation-name: slideOneRightIn;
    animation-name: slideOneRightIn
}
.codefx-fadeHor.code-slideNext .code-slideOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut
}
.codefx-fadeHor.code-slidePrev .code-slideIn {
    -webkit-animation-name: slideOneLeftIn;
    animation-name: slideOneLeftIn
}
.codefx-fadeHor.code-slidePrev .code-slideOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut
}
.codefx-fadeVer.code-viewport {
    overflow: hidden!important
}
.codefx-fadeVer.code-slideNext .code-slideIn {
    -webkit-animation-name: slideOneDownIn;
    animation-name: slideOneDownIn
}
.codefx-fadeVer.code-slideNext .code-slideOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut
}
.codefx-fadeVer.code-slidePrev .code-slideIn {
    -webkit-animation-name: slideOneUpIn;
    animation-name: slideOneUpIn
}
.codefx-fadeVer.code-slidePrev .code-slideOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut
}
.codefx-scaleOutHor.code-viewport {
    overflow: hidden!important
}
.codefx-scaleOutHor.code-slideNext .code-slideIn {
    -webkit-animation-name: slideOneRightIn;
    animation-name: slideOneRightIn
}
.codefx-scaleOutHor.code-slideNext .code-slideOut {
    -webkit-animation-name: pullOut;
    animation-name: pullOut
}
.codefx-scaleOutHor.code-slidePrev .code-slideIn {
    -webkit-animation-name: slideOneLeftIn;
    animation-name: slideOneLeftIn
}
.codefx-scaleOutHor.code-slidePrev .code-slideOut {
    -webkit-animation-name: pullOut;
    animation-name: pullOut
}
.codefx-scaleOutVer.code-viewport {
    overflow: hidden!important
}
.codefx-scaleOutVer.code-slideNext .code-slideIn {
    -webkit-animation-name: slideOneDownIn;
    animation-name: slideOneDownIn
}
.codefx-scaleOutVer.code-slideNext .code-slideOut {
    -webkit-animation-name: pullOut;
    animation-name: pullOut
}
.codefx-scaleOutVer.code-slidePrev .code-slideIn {
    -webkit-animation-name: slideOneUpIn;
    animation-name: slideOneUpIn
}
.codefx-scaleOutVer.code-slidePrev .code-slideOut {
    -webkit-animation-name: pullOut;
    animation-name: pullOut
}
.codefx-scaleInHor.code-viewport {
    overflow: hidden!important
}
.codefx-scaleInHor.code-slideNext .code-slideIn {
    -webkit-animation-name: pullIn;
    animation-name: pullIn
}
.codefx-scaleInHor.code-slideNext .code-slideOut {
    -webkit-animation-name: slideOneLeftOut;
    animation-name: slideOneLeftOut
}
.codefx-scaleInHor.code-slidePrev .code-slideIn {
    -webkit-animation-name: pullIn;
    animation-name: pullIn
}
.codefx-scaleInHor.code-slidePrev .code-slideOut {
    -webkit-animation-name: slideOneRightOut;
    animation-name: slideOneRightOut
}
.codefx-scaleInVer.code-viewport {
    overflow: hidden!important
}
.codefx-scaleInVer.code-slideNext .code-slideIn {
    -webkit-animation-name: pullIn;
    animation-name: pullIn
}
.codefx-scaleInVer.code-slideNext .code-slideOut {
    -webkit-animation-name: slideOneUpOut;
    animation-name: slideOneUpOut
}
.codefx-scaleInVer.code-slidePrev .code-slideIn {
    -webkit-animation-name: pullIn;
    animation-name: pullIn
}
.codefx-scaleInVer.code-slidePrev .code-slideOut {
    -webkit-animation-name: slideOneDownOut;
    animation-name: slideOneDownOut
}
.codefx-scalePulse.code-slideNext .code-slideIn {
    -webkit-animation-name: pullIn;
    animation-name: pullIn
}
.codefx-scalePulse.code-slideNext .code-slideOut {
    -webkit-animation-name: pushOut;
    animation-name: pushOut
}
.codefx-scalePulse.code-slidePrev .code-slideIn {
    -webkit-animation-name: pushIn;
    animation-name: pushIn
}
.codefx-scalePulse.code-slidePrev .code-slideOut {
    -webkit-animation-name: pullOut;
    animation-name: pullOut
}
.codefx-scaleWave .code-slideIn {
    -webkit-animation-name: pullIn;
    animation-name: pullIn
}
.codefx-scaleWave .code-slideOut {
    -webkit-animation-name: pullOut;
    animation-name: pullOut
}
.codefx-glueHor {
    overflow: hidden!important
}
.codefx-glueHor.code-slideNext .code-slideIn {
    -webkit-animation-name: slideOneRightIn;
    animation-name: slideOneRightIn
}
.codefx-glueHor.code-slideNext .code-slideOut {
    -webkit-animation-name: glueLeftOut;
    animation-name: glueLeftOut
}
.codefx-glueHor.code-slidePrev .code-slideIn {
    -webkit-animation-name: slideOneLeftIn;
    animation-name: slideOneLeftIn
}
.codefx-glueHor.code-slidePrev .code-slideOut {
    -webkit-animation-name: glueRightOut;
    animation-name: glueRightOut
}
.codefx-glueVer {
    overflow: hidden!important
}
.codefx-glueVer.code-slideNext .code-slideIn {
    -webkit-animation-name: slideOneDownIn;
    animation-name: slideOneDownIn
}
.codefx-glueVer.code-slideNext .code-slideOut {
    -webkit-animation-name: glueUpOut;
    animation-name: glueUpOut
}
.codefx-glueVer.code-slidePrev .code-slideIn {
    -webkit-animation-name: slideOneUpIn;
    animation-name: slideOneUpIn
}
.codefx-glueVer.code-slidePrev .code-slideOut {
    -webkit-animation-name: glueDownOut;
    animation-name: glueDownOut
}
.codefx-flitHor.code-slideNext .code-slideIn {
    -webkit-animation-name: roFlitLeftIn;
    animation-name: roFlitLeftIn
}
.codefx-flitHor.code-slideNext .code-slideOut {
    -webkit-animation-name: roFlitRightOut;
    animation-name: roFlitRightOut
}
.codefx-flitHor.code-slidePrev .code-slideIn {
    -webkit-animation-name: roFlitRightIn;
    animation-name: roFlitRightIn
}
.codefx-flitHor.code-slidePrev .code-slideOut {
    -webkit-animation-name: roFlitLeftOut;
    animation-name: roFlitLeftOut
}
.codefx-flitVer.code-slideNext .code-slideIn {
    -webkit-animation-name: roFlitDownIn;
    animation-name: roFlitDownIn
}
.codefx-flitVer.code-slideNext .code-slideOut {
    -webkit-animation-name: roFlitUpOut;
    animation-name: roFlitUpOut
}
.codefx-flitVer.code-slidePrev .code-slideIn {
    -webkit-animation-name: roFlitUpIn;
    animation-name: roFlitUpIn
}
.codefx-flitVer.code-slidePrev .code-slideOut {
    -webkit-animation-name: roFlitDownOut;
    animation-name: roFlitDownOut
}
.codefx-hinge.code-slideNext .code-slideIn {
    -webkit-animation-name: pullIn;
    animation-name: pullIn
}
.codefx-hinge.code-slideNext .code-slideOut {
    -webkit-animation-name: hinge;
    animation-name: hinge
}
.codefx-hinge.code-slidePrev .code-slideIn {
    -webkit-animation-name: rollIn;
    animation-name: rollIn
}
.codefx-hinge.code-slidePrev .code-slideOut {
    -webkit-animation-name: pullOut;
    animation-name: pullOut
}
.codefx-roll.code-slideNext .code-slideIn {
    -webkit-animation-name: pullIn;
    animation-name: pullIn
}
.codefx-roll.code-slideNext .code-slideOut {
    -webkit-animation-name: rollOut;
    animation-name: rollOut
}
.codefx-roll.code-slidePrev .code-slideIn {
    -webkit-animation-name: rollIn;
    animation-name: rollIn
}
.codefx-roll.code-slidePrev .code-slideOut {
    -webkit-animation-name: pullOut;
    animation-name: pullOut
}
.codefx-newspaper.code-slideNext .code-slideIn {
    -webkit-animation-name: newspaperIn;
    animation-name: newspaperIn
}
.codefx-newspaper.code-slideNext .code-slideOut {
    -webkit-animation-name: pushOut;
    animation-name: pushOut
}
.codefx-newspaper.code-slidePrev .code-slideIn {
    -webkit-animation-name: pushIn;
    animation-name: pushIn
}
.codefx-newspaper.code-slidePrev .code-slideOut {
    -webkit-animation-name: newspaperOut;
    animation-name: newspaperOut
}
.codefx-pushFromHor.code-viewport {
    overflow: hidden!important
}
.codefx-pushFromHor.code-slideNext .code-slideIn {
    -webkit-animation-name: slideOneRightIn;
    animation-name: slideOneRightIn
}
.codefx-pushFromHor.code-slideNext .code-slideOut {
    -webkit-animation-name: roEdgeLeftOut;
    animation-name: roEdgeLeftOut
}
.codefx-pushFromHor.code-slidePrev .code-slideIn {
    -webkit-animation-name: slideOneLeftIn;
    animation-name: slideOneLeftIn
}
.codefx-pushFromHor.code-slidePrev .code-slideOut {
    -webkit-animation-name: roEdgeRightOut;
    animation-name: roEdgeRightOut
}
.codefx-pushFromVer.code-viewport {
    overflow: hidden!important
}
.codefx-pushFromVer.code-slideNext .code-slideIn {
    -webkit-animation-name: slideOneDownIn;
    animation-name: slideOneDownIn
}
.codefx-pushFromVer.code-slideNext .code-slideOut {
    -webkit-animation-name: roEdgeUpOut;
    animation-name: roEdgeUpOut
}
.codefx-pushFromVer.code-slidePrev .code-slideIn {
    -webkit-animation-name: slideOneUpIn;
    animation-name: slideOneUpIn
}
.codefx-pushFromVer.code-slidePrev .code-slideOut {
    -webkit-animation-name: roEdgeDownOut;
    animation-name: roEdgeDownOut
}
.codefx-roEdgeHor.code-slideNext .code-slideIn {
    -webkit-animation-name: roEdgeRightIn;
    animation-name: roEdgeRightIn
}
.codefx-roEdgeHor.code-slideNext .code-slideOut {
    -webkit-animation-name: roEdgeLeftOut;
    animation-name: roEdgeLeftOut
}
.codefx-roEdgeHor.code-slidePrev .code-slideIn {
    -webkit-animation-name: roEdgeLeftIn;
    animation-name: roEdgeLeftIn
}
.codefx-roEdgeHor.code-slidePrev .code-slideOut {
    -webkit-animation-name: roEdgeRightOut;
    animation-name: roEdgeRightOut
}
.codefx-roEdgeVer.code-slideNext .code-slideIn {
    -webkit-animation-name: roEdgeDownIn;
    animation-name: roEdgeDownIn
}
.codefx-roEdgeVer.code-slideNext .code-slideOut {
    -webkit-animation-name: roEdgeUpOut;
    animation-name: roEdgeUpOut
}
.codefx-roEdgeVer.code-slidePrev .code-slideIn {
    -webkit-animation-name: roEdgeUpIn;
    animation-name: roEdgeUpIn
}
.codefx-roEdgeVer.code-slidePrev .code-slideOut {
    -webkit-animation-name: roEdgeDownOut;
    animation-name: roEdgeDownOut
}
.codefx-foldFromHor.code-viewport {
    overflow: hidden!important
}
.codefx-foldFromHor.code-slideNext .code-slideIn {
    -webkit-animation-name: slideOneRightIn;
    animation-name: slideOneRightIn
}
.codefx-foldFromHor.code-slideNext .code-slideOut {
    -webkit-animation-name: roFoldLeftOut;
    animation-name: roFoldLeftOut
}
.codefx-foldFromHor.code-slidePrev .code-slideIn {
    -webkit-animation-name: slideOneLeftIn;
    animation-name: slideOneLeftIn
}
.codefx-foldFromHor.code-slidePrev .code-slideOut {
    -webkit-animation-name: roFoldRightOut;
    animation-name: roFoldRightOut
}
.codefx-foldFromVer.code-viewport {
    overflow: hidden!important
}
.codefx-foldFromVer.code-slideNext .code-slideIn {
    -webkit-animation-name: slideOneDownIn;
    animation-name: slideOneDownIn
}
.codefx-foldFromVer.code-slideNext .code-slideOut {
    -webkit-animation-name: roFoldUpOut;
    animation-name: roFoldUpOut
}
.codefx-foldFromVer.code-slidePrev .code-slideIn {
    -webkit-animation-name: slideOneUpIn;
    animation-name: slideOneUpIn
}
.codefx-foldFromVer.code-slidePrev .code-slideOut {
    -webkit-animation-name: roFoldDownOut;
    animation-name: roFoldDownOut
}
.codefx-foldHor.code-slideNext .code-slideIn {
    -webkit-animation-name: roFoldRightIn;
    animation-name: roFoldRightIn
}
.codefx-foldHor.code-slideNext .code-slideOut {
    -webkit-animation-name: roFoldLeftOut;
    animation-name: roFoldLeftOut
}
.codefx-foldHor.code-slidePrev .code-slideIn {
    -webkit-animation-name: roFoldLeftIn;
    animation-name: roFoldLeftIn
}
.codefx-foldHor.code-slidePrev .code-slideOut {
    -webkit-animation-name: roFoldRightOut;
    animation-name: roFoldRightOut
}
.codefx-foldVer.code-slideNext .code-slideIn {
    -webkit-animation-name: roFoldDownIn;
    animation-name: roFoldDownIn
}
.codefx-foldVer.code-slideNext .code-slideOut {
    -webkit-animation-name: roFoldUpOut;
    animation-name: roFoldUpOut
}
.codefx-foldVer.code-slidePrev .code-slideIn {
    -webkit-animation-name: roFoldUpIn;
    animation-name: roFoldUpIn
}
.codefx-foldVer.code-slidePrev .code-slideOut {
    -webkit-animation-name: roFoldDownOut;
    animation-name: roFoldDownOut
}
.codefx-roomHor.code-viewport {
    overflow: hidden!important
}
.codefx-roomHor.code-slideNext .code-slideIn {
    -webkit-animation-name: roRoomRightIn;
    animation-name: roRoomRightIn
}
.codefx-roomHor.code-slideNext .code-slideOut {
    -webkit-animation-name: roRoomLeftOut;
    animation-name: roRoomLeftOut
}

.codefx-roomHor.code-slidePrev .code-slideIn {
    -webkit-animation-name: roRoomLeftIn;
    animation-name: roRoomLeftIn
}
.codefx-roomHor.code-slidePrev .code-slideOut {
    -webkit-animation-name: roRoomRightOut;
    animation-name: roRoomRightOut
}
.codefx-roomVer.code-viewport {
    overflow: hidden!important
}
.codefx-roomVer.code-slideNext .code-slideIn {
    -webkit-animation-name: roRoomDownIn;
    animation-name: roRoomDownIn
}
.codefx-roomVer.code-slideNext .code-slideOut {
    -webkit-animation-name: roRoomUpOut;
    animation-name: roRoomUpOut
}
.codefx-roomVer.code-slidePrev .code-slideIn {
    -webkit-animation-name: roRoomUpIn;
    animation-name: roRoomUpIn
}
.codefx-roomVer.code-slidePrev .code-slideOut {
    -webkit-animation-name: roRoomDownOut;
    animation-name: roRoomDownOut
}
.codefx-slide.code-slideNext .code-slideIn {
    -webkit-animation-name: slidePullRightIn;
    animation-name: slidePullRightIn
}
.codefx-slide.code-slideNext .code-slideOut {
    -webkit-animation-name: slidePullLeftOut;
    animation-name: slidePullLeftOut
}
.codefx-slide.code-slidePrev .code-slideIn {
    -webkit-animation-name: slidePullLeftIn;
    animation-name: slidePullLeftIn
}
.codefx-slide.code-slidePrev .code-slideOut {
    -webkit-animation-name: slidePullRightOut;
    animation-name: slidePullRightOut
}
.codefx-fall.code-slideNext .code-slideIn {
    -webkit-animation-name: pullIn;
    animation-name: pullIn
}
.codefx-fall.code-slideNext .code-slideOut {
    -webkit-animation-name: slideFadeDownOut;
    animation-name: slideFadeDownOut
}
.codefx-fall.code-slidePrev .code-slideIn {
    -webkit-animation-name: slideFadeUpIn;
    animation-name: slideFadeUpIn
}
.codefx-fall.code-slidePrev .code-slideOut {
    -webkit-animation-name: pullOut;
    animation-name: pullOut
}
.codefx-pulseShort.code-slideNext .code-slideIn {
    -webkit-animation-name: roShortPullRightIn;
    animation-name: roShortPullRightIn
}
.codefx-pulseShort.code-slideNext .code-slideOut {
    -webkit-animation-name: roShortPushRightOut;
    animation-name: roShortPushRightOut
}
.codefx-pulseShort.code-slidePrev .code-slideIn {
    -webkit-animation-name: roShortPushLeftIn;
    animation-name: roShortPushLeftIn
}
.codefx-pulseShort.code-slidePrev .code-slideOut {
    -webkit-animation-name: roShortPullLeftOut;
    animation-name: roShortPullLeftOut
}
.codefx-roSoft.code-slideNext .code-slideIn {
    -webkit-animation-name: slideLeftIn;
    animation-name: slideLeftIn
}
.codefx-roSoft.code-slideNext .code-slideOut {
    -webkit-animation-name: roSoftRightOut;
    animation-name: roSoftRightOut
}
.codefx-roSoft.code-slidePrev .code-slideIn {
    -webkit-animation-name: slideRightIn;
    animation-name: slideRightIn
}
.codefx-roSoft.code-slidePrev .code-slideOut {
    -webkit-animation-name: roSoftLeftOut;
    animation-name: roSoftLeftOut
}
.codefx-roDeal.code-slideNext .code-slideIn {
    -webkit-animation-name: roSoftLeftIn;
    animation-name: roSoftLeftIn
}
.codefx-roDeal.code-slideNext .code-slideOut {
    -webkit-animation-name: pullOut;
    animation-name: pullOut
}
.codefx-roDeal.code-slidePrev .code-slideIn {
    -webkit-animation-name: roSoftRightIn;
    animation-name: roSoftRightIn
}
.codefx-roDeal.code-slidePrev .code-slideOut {
    -webkit-animation-name: pullOut;
    animation-name: pullOut
}
.codefx-wheelHor.code-slideNext .code-slideIn {
    -webkit-animation-name: roWheelLeftIn;
    animation-name: roWheelLeftIn
}
.codefx-wheelHor.code-slideNext .code-slideOut {
    -webkit-animation-name: roWheelRightOut;
    animation-name: roWheelRightOut
}
.codefx-wheelHor.code-slidePrev .code-slideIn {
    -webkit-animation-name: roWheelRightIn;
    animation-name: roWheelRightIn
}
.codefx-wheelHor.code-slidePrev .code-slideOut {
    -webkit-animation-name: roWheelLeftOut;
    animation-name: roWheelLeftOut
}
.codefx-wheelVer.code-slideNext .code-slideIn {
    -webkit-animation-name: roWheelUpIn;
    animation-name: roWheelUpIn
}
.codefx-wheelVer.code-slideNext .code-slideOut {
    -webkit-animation-name: roWheelDownOut;
    animation-name: roWheelDownOut
}
.codefx-wheelVer.code-slidePrev .code-slideIn {
    -webkit-animation-name: roWheelDownIn;
    animation-name: roWheelDownIn
}
.codefx-wheelVer.code-slidePrev .code-slideOut {
    -webkit-animation-name: roWheelUpOut;
    animation-name: roWheelUpOut
}
.codefx-snakeHor.code-slideNext .code-slideIn {
    -webkit-animation-name: slideShakeLeftIn;
    animation-name: slideShakeLeftIn
}
.codefx-snakeHor.code-slideNext .code-slideOut {
    -webkit-animation-name: slideShakeRightOut;
    animation-name: slideShakeRightOut
}
.codefx-snakeHor.code-slidePrev .code-slideIn {
    -webkit-animation-name: slideShakeRightIn;
    animation-name: slideShakeRightIn
}
.codefx-snakeHor.code-slidePrev .code-slideOut {
    -webkit-animation-name: slideShakeLeftOut;
    animation-name: slideShakeLeftOut
}
.codefx-snakeVer.code-slideNext .code-slideIn {
    -webkit-animation-name: slideShakeUpIn;
    animation-name: slideShakeUpIn
}
.codefx-snakeVer.code-slideNext .code-slideOut {
    -webkit-animation-name: slideShakeDownOut;
    animation-name: slideShakeDownOut
}
.codefx-snakeVer.code-slidePrev .code-slideIn {
    -webkit-animation-name: slideShakeDownIn;
    animation-name: slideShakeDownIn
}
.codefx-snakeVer.code-slidePrev .code-slideOut {
    -webkit-animation-name: slideShakeUpOut;
    animation-name: slideShakeUpOut
}
.codefx-shuffle.code-slideNext .code-slideIn {
    -webkit-animation-name: fanFrontUp;
    animation-name: fanFrontUp
}
.codefx-shuffle.code-slideNext .code-slideOut {
    -webkit-animation-name: fanBehindDown;
    animation-name: fanBehindDown
}
.codefx-shuffle.code-slidePrev .code-slideIn {
    -webkit-animation-name: fanFrontDown;
    animation-name: fanFrontDown
}
.codefx-shuffle.code-slidePrev .code-slideOut {
    -webkit-animation-name: fanBehindUp;
    animation-name: fanBehindUp
}
.codefx-browseLeft.code-slideNext .code-slideIn {
    -webkit-animation-name: pullBounceIn;
    animation-name: pullBounceIn
}
.codefx-browseLeft.code-slideNext .code-slideOut {
    -webkit-animation-name: moveLeftBehind;
    animation-name: moveLeftBehind
}
.codefx-browseLeft.code-slidePrev .code-slideIn {
    -webkit-animation-name: moveLeftFront;
    animation-name: moveLeftFront
}
.codefx-browseLeft.code-slidePrev .code-slideOut {
    -webkit-animation-name: pullBounceOut;
    animation-name: pullBounceOut
}
.codefx-browseRight.code-slideNext .code-slideIn {
    -webkit-animation-name: pullBounceIn;
    animation-name: pullBounceIn
}
.codefx-browseRight.code-slideNext .code-slideOut {
    -webkit-animation-name: moveRightBehind;
    animation-name: moveRightBehind
}
.codefx-browseRight.code-slidePrev .code-slideIn {
    -webkit-animation-name: moveRightFront;
    animation-name: moveRightFront
}
.codefx-browseRight.code-slidePrev .code-slideOut {
    -webkit-animation-name: pullBounceOut;
    animation-name: pullBounceOut
}
.codefx-slideBehind.code-slideNext .code-slideIn {
    -webkit-animation-name: moveShortRightFront;
    animation-name: moveShortRightFront
}
.codefx-slideBehind.code-slideNext .code-slideOut {
    -webkit-animation-name: moveShortLeftBehind;
    animation-name: moveShortLeftBehind
}
.codefx-slideBehind.code-slidePrev .code-slideIn {
    -webkit-animation-name: moveShortLeftFront;
    animation-name: moveShortLeftFront
}
.codefx-slideBehind.code-slidePrev .code-slideOut {
    -webkit-animation-name: moveShortRightBehind;
    animation-name: moveShortRightBehind
}
.codefx-vacuumHor.code-slideNext .code-slideIn {
    -webkit-animation-name: slideScaleRightIn;
    animation-name: slideScaleRightIn
}
.codefx-vacuumHor.code-slideNext .code-slideOut {
    -webkit-animation-name: slideScaleLeftOut;
    animation-name: slideScaleLeftOut
}
.codefx-vacuumHor.code-slidePrev .code-slideIn {
    -webkit-animation-name: slideScaleLeftIn;
    animation-name: slideScaleLeftIn
}
.codefx-vacuumHor.code-slidePrev .code-slideOut {
    -webkit-animation-name: slideScaleRightOut;
    animation-name: slideScaleRightOut
}
.codefx-vacuumVer.code-slideNext .code-slideIn {
    -webkit-animation-name: slideScaleDownIn;
    animation-name: slideScaleDownIn
}
.codefx-vacuumVer.code-slideNext .code-slideOut {
    -webkit-animation-name: slideScaleUpOut;
    animation-name: slideScaleUpOut
}
.codefx-vacuumVer.code-slidePrev .code-slideIn {
    -webkit-animation-name: slideScaleUpIn;
    animation-name: slideScaleUpIn
}
.codefx-vacuumVer.code-slidePrev .code-slideOut {
    -webkit-animation-name: slideScaleDownOut;
    animation-name: slideScaleDownOut
}
.codefx-scaleSoft.code-slideNext .code-slideIn {
    -webkit-animation-name: pullSoftIn;
    animation-name: pullSoftIn
}
.codefx-scaleSoft.code-slideNext .code-slideOut {
    -webkit-animation-name: pushSoftOut;
    animation-name: pushSoftOut
}
.codefx-scaleSoft.code-slidePrev .code-slideIn {
    -webkit-animation-name: pushSoftIn;
    animation-name: pushSoftIn
}
.codefx-scaleSoft.code-slidePrev .code-slideOut {
    -webkit-animation-name: pullSoftOut;
    animation-name: pullSoftOut
}
.codefx-snapHor.code-slideNext .code-slideIn {
    -webkit-animation-name: slideRightIn;
    animation-name: slideRightIn
}
.codefx-snapHor.code-slideNext .code-slideOut {
    -webkit-animation-name: slideShortLeftOut;
    animation-name: slideShortLeftOut
}
.codefx-snapHor.code-slidePrev .code-slideIn {
    -webkit-animation-name: slideLeftIn;
    animation-name: slideLeftIn
}
.codefx-snapHor.code-slidePrev .code-slideOut {
    -webkit-animation-name: slideShortRightOut;
    animation-name: slideShortRightOut
}
.codefx-snapVer.code-slideNext .code-slideIn {
    -webkit-animation-name: slideDownIn;
    animation-name: slideDownIn
}
.codefx-snapVer.code-slideNext .code-slideOut {
    -webkit-animation-name: slideShortUpOut;
    animation-name: slideShortUpOut
}
.codefx-snapVer.code-slidePrev .code-slideIn {
    -webkit-animation-name: slideUpIn;
    animation-name: slideUpIn
}
.codefx-snapVer.code-slidePrev .code-slideOut {
    -webkit-animation-name: slideShortDownOut;
    animation-name: slideShortDownOut
}
.codefx-letInHor.code-slideNext .code-slideIn {
    -webkit-animation-name: slideRightIn;
    animation-name: slideRightIn
}
.codefx-letInHor.code-slideNext .code-slideOut {
    -webkit-animation-name: roEdgeSoftLeftOut;
    animation-name: roEdgeSoftLeftOut
}
.codefx-letInHor.code-slidePrev .code-slideIn {
    -webkit-animation-name: slideLeftIn;
    animation-name: slideLeftIn
}
.codefx-letInHor.code-slidePrev .code-slideOut {
    -webkit-animation-name: roEdgeSoftRightOut;
    animation-name: roEdgeSoftRightOut
}
.codefx-letInVer.code-slideNext .code-slideIn {
    -webkit-animation-name: slideDownIn;
    animation-name: slideDownIn
}
.codefx-letInVer.code-slideNext .code-slideOut {
    -webkit-animation-name: roEdgeSoftUpOut;
    animation-name: roEdgeSoftUpOut
}
.codefx-letInVer.code-slidePrev .code-slideIn {
    -webkit-animation-name: slideUpIn;
    animation-name: slideUpIn
}
.codefx-letInVer.code-slidePrev .code-slideOut {
    -webkit-animation-name: roEdgeSoftDownOut;
    animation-name: roEdgeSoftDownOut
}
.codefx-stickHor.code-slideNext .code-slideIn {
    -webkit-animation-name: glueLeftIn;
    animation-name: glueLeftIn
}
.codefx-stickHor.code-slideNext .code-slideOut {
    -webkit-animation-name: slideRightOut;
    animation-name: slideRightOut
}
.codefx-stickHor.code-slidePrev .code-slideIn {
    -webkit-animation-name: glueRightIn;
    animation-name: glueRightIn
}
.codefx-stickHor.code-slidePrev .code-slideOut {
    -webkit-animation-name: slideLeftOut;
    animation-name: slideLeftOut
}
.codefx-stickVer.code-slideNext .code-slideIn {
    -webkit-animation-name: glueUpIn;
    animation-name: glueUpIn
}
.codefx-stickVer.code-slideNext .code-slideOut {
    -webkit-animation-name: slideDownOut;
    animation-name: slideDownOut
}
.codefx-stickVer.code-slidePrev .code-slideIn {
    -webkit-animation-name: glueDownIn;
    animation-name: glueDownIn
}
.codefx-stickVer.code-slidePrev .code-slideOut {
    -webkit-animation-name: slideUpOut;
    animation-name: slideUpOut
}
.codefx-growthHor.code-slideNext .code-slideIn {
    -webkit-animation-name: soEdgeRightIn;
    animation-name: soEdgeRightIn
}
.codefx-growthHor.code-slideNext .code-slideOut {
    -webkit-animation-name: pullSoftOut;
    animation-name: pullSoftOut
}
.codefx-growthHor.code-slidePrev .code-slideIn {
    -webkit-animation-name: soEdgeLeftIn;
    animation-name: soEdgeLeftIn
}
.codefx-growthHor.code-slidePrev .code-slideOut {
    -webkit-animation-name: pullSoftOut;
    animation-name: pullSoftOut
}
.codefx-growthVer.code-slideNext .code-slideIn {
    -webkit-animation-name: soEdgeDownIn;
    animation-name: soEdgeDownIn
}
.codefx-growthVer.code-slideNext .code-slideOut {
    -webkit-animation-name: pullSoftOut;
    animation-name: pullSoftOut
}
.codefx-growthVer.code-slidePrev .code-slideIn {
    -webkit-animation-name: soEdgeUpIn;
    animation-name: soEdgeUpIn
}
.codefx-growthVer.code-slidePrev .code-slideOut {
    -webkit-animation-name: pullSoftOut;
    animation-name: pullSoftOut
}
.codefx-soEdgeHor.code-slideNext .code-slideIn {
    -webkit-animation-name: soEdgeRightIn;
    animation-name: soEdgeRightIn
}
.codefx-soEdgeHor.code-slideNext .code-slideOut {
    -webkit-animation-name: soEdgeLeftOut;
    animation-name: soEdgeLeftOut
}
.codefx-soEdgeHor.code-slidePrev .code-slideIn {
    -webkit-animation-name: soEdgeLeftIn;
    animation-name: soEdgeLeftIn
}
.codefx-soEdgeHor.code-slidePrev .code-slideOut {
    -webkit-animation-name: soEdgeRightOut;
    animation-name: soEdgeRightOut
}
.codefx-soEdgeVer.code-slideNext .code-slideIn {
    -webkit-animation-name: soEdgeDownIn;
    animation-name: soEdgeDownIn
}
.codefx-soEdgeVer.code-slideNext .code-slideOut {
    -webkit-animation-name: soEdgeUpOut;
    animation-name: soEdgeUpOut
}
.codefx-soEdgeVer.code-slidePrev .code-slideIn {
    -webkit-animation-name: soEdgeUpIn;
    animation-name: soEdgeUpIn
}
.codefx-soEdgeVer.code-slidePrev .code-slideOut {
    -webkit-animation-name: soEdgeDownOut;
    animation-name: soEdgeDownOut
}
.codefx-shake .code-slideIn {
    -webkit-animation-name: shake;
    animation-name: shake;
    -webkit-animation-duration: .1s!important;
    animation-duration: .1s!important;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}
.codefx-shake .code-slideOut {
    -webkit-animation-name: slideDownOut;
    animation-name: slideDownOut
}
.codefx-tinHor.code-slideNext .code-slideIn {
    -webkit-animation-name: slideTinRightIn;
    animation-name: slideTinRightIn
}
.codefx-tinHor.code-slideNext .code-slideOut {
    -webkit-animation-name: slideLeftOut;
    animation-name: slideLeftOut
}
.codefx-tinHor.code-slidePrev .code-slideIn {
    -webkit-animation-name: slideTinLeftIn;
    animation-name: slideTinLeftIn
}
.codefx-tinHor.code-slidePrev .code-slideOut {
    -webkit-animation-name: slideRightOut;
    animation-name: slideRightOut
}
.codefx-tinVer.code-slideNext .code-slideIn {
    -webkit-animation-name: slideTinUpIn;
    animation-name: slideTinUpIn
}
.codefx-tinVer.code-slideNext .code-slideOut {
    -webkit-animation-name: slideDownOut;
    animation-name: slideDownOut
}
.codefx-tinVer.code-slidePrev .code-slideIn {
    -webkit-animation-name: slideTinDownIn;
    animation-name: slideTinDownIn
}
.codefx-tinVer.code-slidePrev .code-slideOut {
    -webkit-animation-name: slideUpOut;
    animation-name: slideUpOut
}