.magictime
{
    animation-duration: 1s;
    animation-fill-mode: both;
}
.puffIn
{
    animation-name: puffIn;
}
@keyframes puffIn
{
    0%
    {
        opacity: 0;
        transform-origin: 50% 50%;
        transform: scale(2,2);
    }
    100%
    {
        opacity: 1;
        transform-origin: 50% 50%;
        transform: scale(1,1);
    }
}
.puffOut
{
    animation-name: puffOut;
}
@keyframes puffOut
{
    0%
    {
        opacity: 1;
        transform-origin: 50% 50%;
        transform: scale(1,1);
        filter: blur(0);
    }
    100%
    {
        opacity: 0;
        transform-origin: 50% 50%;
        transform: scale(2,2);
        filter: blur(2px);
    }
}
.vanishIn
{
    animation-name: vanishIn;
}
@keyframes vanishIn
{
    0%
    {
        opacity: 0;
        transform-origin: 50% 50%;
        transform: scale(2,2);
        filter: blur(90px);
    }
    100%
    {
        opacity: 1;
        transform-origin: 50% 50%;
        transform: scale(1,1);
        filter: blur(0);
    }
}
.vanishOut
{
    animation-name: vanishOut;
}
@keyframes vanishOut
{
    0%
    {
        opacity: 1;
        transform-origin: 50% 50%;
        transform: scale(1,1);
        filter: blur(0);
    }
    100%
    {
        opacity: 0;
        transform-origin: 50% 50%;
        transform: scale(2,2);
        filter: blur(20px);
    }
}
.boingInUp
{
    animation-name: boingInUp;
}
@keyframes boingInUp
{
    0%
    {
        opacity: 0;
        transform-origin: 50% 0%;
        transform: perspective(800px) rotateX(-90deg);
    }
    50%
    {
        opacity: 1;
        transform-origin: 50% 0%;
        transform: perspective(800px) rotateX(50deg);
    }
    100%
    {
        opacity: 1;
        transform-origin: 50% 0%;
        transform: perspective(800px) rotateX(0deg);
    }
}
.boingOutDown
{
    animation-name: boingOutDown;
}
@keyframes boingOutDown
{
    0%
    {
        opacity: 1;
        transform-origin: 100% 100%;
        transform: perspective(800px) rotateX(0deg) rotateY(0deg);
    }
    20%
    {
        opacity: 1;
        transform-origin: 100% 100%;
        transform: perspective(800px) rotateX(0deg) rotateY(10deg);
    }
    30%
    {
        opacity: 1;
        transform-origin: 0% 100%;
        transform: perspective(800px) rotateX(0deg) rotateY(0deg);
    }
    40%
    {
        opacity: 1;
        transform-origin: 0% 100%;
        transform: perspective(800px) rotateX(10deg) rotateY(10deg);
    }
    100%
    {
        opacity: 0;
        transform-origin: 100% 100%;
        transform: perspective(800px) rotateX(90deg) rotateY(0deg);
    }
}
.bombLeftOut
{
    animation-name: bombLeftOut;
}
@keyframes bombLeftOut
{
    0%
    {
        opacity: 1;
        transform-origin: 50% 50%;
        transform: rotate(0deg);
        filter: blur(0);
    }
    50%
    {
        opacity: 1;
        transform-origin: -100% 50%;
        transform: rotate(-160deg);
        filter: blur(0);
    }
    100%
    {
        opacity: 0;
        transform-origin: -100% 50%;
        transform: rotate(-160deg);
        filter: blur(20px);
    }
}
.bombRightOut
{
    animation-name: bombRightOut;
}
@keyframes bombRightOut
{
    0%
    {
        opacity: 1;
        transform-origin: 50% 50%;
        transform: rotate(0deg);
        filter: blur(0);
    }
    50%
    {
        opacity: 1;
        transform-origin: 200% 50%;
        transform: rotate(160deg);
        filter: blur(0);
    }
    100%
    {
        opacity: 0;
        transform-origin: 200% 50%;
        transform: rotate(160deg);
        filter: blur(20px);
    }
}
.magic
{
    animation-name: magic;
}
@keyframes magic
{
    0%
    {
        opacity: 1;
        transform-origin: 100% 200%;
        transform: scale(1,1) rotate(0deg);
    }
    100%
    {
        opacity: 0;
        transform-origin: 200% 500%;
        transform: scale(0,0) rotate(270deg);
    }
}
.swap
{
    animation-name: swap;
}
@keyframes swap
{
    0%
    {
        opacity: 0;
        transform-origin: 0 100%;
        transform: scale(0,0) translate(-700px,0);
    }
    100%
    {
        opacity: 1;
        transform-origin: 100% 100%;
        transform: scale(1,1) translate(0,0);
    }
}
.twisterInDown
{
    animation-name: twisterInDown;
}
@keyframes twisterInDown
{
    0%
    {
        opacity: 0;
        transform-origin: 0 100%;
        transform: scale(0,0) rotate(360deg) translateY(-100%);
    }
    30%
    {
        transform-origin: 0 100%;
        transform: scale(0,0) rotate(360deg) translateY(-100%);
    }
    100%
    {
        opacity: 1;
        transform-origin: 100% 100%;
        transform: scale(1,1) rotate(0deg) translateY(0%);
    }
}
.twisterInUp
{
    animation-name: twisterInUp;
}
@keyframes twisterInUp
{
    0%
    {
        opacity: 0;
        transform-origin: 100% 0;
        transform: scale(0,0) rotate(360deg) translateY(100%);
    }
    30%
    {
        transform-origin: 100% 0;
        transform: scale(0,0) rotate(360deg) translateY(100%);
    }
    100%
    {
        opacity: 1;
        transform-origin: 0 0;
        transform: scale(1,1) rotate(0deg) translateY(0);
    }
}
.foolishIn
{
    animation-name: foolishIn;
}
@keyframes foolishIn
{
    0%
    {
        opacity: 0;
        transform-origin: 50% 50%;
        transform: scale(0,0) rotate(360deg);
    }
    20%
    {
        opacity: 1;
        transform-origin: 0% 100%;
        transform: scale(.5,.5) rotate(0deg);
    }
    40%
    {
        opacity: 1;
        transform-origin: 100% 100%;
        transform: scale(.5,.5) rotate(0deg);
    }
    60%
    {
        opacity: 1;
        transform-origin: 0%;
        transform: scale(.5,.5) rotate(0deg);
    }
    80%
    {
        opacity: 1;
        transform-origin: 0% 0%;
        transform: scale(.5,.5) rotate(0deg);
    }
    100%
    {
        opacity: 1;
        transform-origin: 50% 50%;
        transform: scale(1,1) rotate(0deg);
    }
}
.foolishOut
{
    animation-name: foolishOut;
}
@keyframes foolishOut
{
    0%
    {
        opacity: 1;
        transform-origin: 50% 50%;
        transform: scale(1,1) rotate(360deg);
    }
    20%
    {
        opacity: 1;
        transform-origin: 0% 0%;
        transform: scale(.5,.5) rotate(0deg);
    }
    40%
    {
        opacity: 1;
        transform-origin: 100% 0%;
        transform: scale(.5,.5) rotate(0deg);
    }
    60%
    {
        opacity: 1;
        transform-origin: 0%;
        transform: scale(.5,.5) rotate(0deg);
    }
    80%
    {
        opacity: 1;
        transform-origin: 0% 100%;
        transform: scale(.5,.5) rotate(0deg);
    }
    100%
    {
        opacity: 0;
        transform-origin: 50% 50%;
        transform: scale(0,0) rotate(0deg);
    }
}
.holeOut
{
    animation-name: holeOut;
}
@keyframes holeOut
{
    0%
    {
        opacity: 1;
        transform-origin: 50% 50%;
        transform: scale(1,1) rotateY(0deg);
    }
    100%
    {
        opacity: 0;
        transform-origin: 50% 50%;
        transform: scale(0,0) rotateY(180deg);
    }
}
.swashIn
{
    animation-name: swashIn;
}
@keyframes swashIn
{
    0%
    {
        opacity: 0;
        transform-origin: 50% 50%;
        transform: scale(0,0);
    }
    100%
    {
        opacity: 1;
        transform-origin: 50% 50%;
        transform: scale(1,1);
    }
}
.swashOut
{
    animation-name: swashOut;
}
@keyframes swashOut
{
    0%
    {
        opacity: 1;
        transform-origin: 50% 50%;
        transform: scale(1,1);
    }
    80%
    {
        opacity: 1;
        transform-origin: 50% 50%;
        transform: scale(.9,.9);
    }
    100%
    {
        opacity: 0;
        transform-origin: 50% 50%;
        transform: scale(0,0);
    }
}
.spaceInDown
{
    animation-name: spaceInDown;
}
@keyframes spaceInDown
{
    0%
    {
        opacity: 0;
        transform-origin: 50% 100%;
        transform: scale(.2) translate(0%,200%);
    }
    100%
    {
        opacity: 1;
        transform-origin: 50% 100%;
        transform: scale(1) translate(0%,0%);
    }
}
.spaceInLeft
{
    animation-name: spaceInLeft;
}
@keyframes spaceInLeft
{
    0%
    {
        opacity: 0;
        transform-origin: 0% 50%;
        transform: scale(.2) translate(-200%,0%);
    }
    100%
    {
        opacity: 1;
        transform-origin: 0% 50%;
        transform: scale(1) translate(0%,0%);
    }
}
.spaceInRight
{
    animation-name: spaceInRight;
}
@keyframes spaceInRight
{
    0%
    {
        opacity: 0;
        transform-origin: 100% 50%;
        transform: scale(.2) translate(200%,0%);
    }
    100%
    {
        opacity: 1;
        transform-origin: 100% 50%;
        transform: scale(1) translate(0%,0%);
    }
}
.spaceInUp
{
    animation-name: spaceInUp;
}
@keyframes spaceInUp
{
    0%
    {
        opacity: 0;
        transform-origin: 50% 0%;
        transform: scale(.2) translate(0%,-200%);
    }
    100%
    {
        opacity: 1;
        transform-origin: 50% 0%;
        transform: scale(1) translate(0%,0%);
    }
}
.spaceOutDown
{
    animation-name: spaceOutDown;
}
@keyframes spaceOutDown
{
    0%
    {
        opacity: 1;
        transform-origin: 50% 100%;
        transform: scale(1) translate(0%,0%);
    }
    100%
    {
        opacity: 0;
        transform-origin: 50% 100%;
        transform: scale(.2) translate(0%,200%);
    }
}
.spaceOutLeft
{
    animation-name: spaceOutLeft;
}
@keyframes spaceOutLeft
{
    0%
    {
        opacity: 1;
        transform-origin: 0% 50%;
        transform: scale(1) translate(0%,0%);
    }
    100%
    {
        opacity: 0;
        transform-origin: 0% 50%;
        transform: scale(.2) translate(-200%,0%);
    }
}
.spaceOutRight
{
    animation-name: spaceOutRight;
}
@keyframes spaceOutRight
{
    0%
    {
        opacity: 1;
        transform-origin: 100% 50%;
        transform: scale(1) translate(0%,0%);
    }
    100%
    {
        opacity: 0;
        transform-origin: 100% 50%;
        transform: scale(.2) translate(200%,0%);
    }
}
.spaceOutUp
{
    animation-name: spaceOutUp;
}
@keyframes spaceOutUp
{
    0%
    {
        opacity: 1;
        transform-origin: 50% 0%;
        transform: scale(1) translate(0%,0%);
    }
    100%
    {
        opacity: 0;
        transform-origin: 50% 0%;
        transform: scale(.2) translate(0%,-200%);
    }
}
.perspectiveDown
{
    animation-name: perspectiveDown;
}
@keyframes perspectiveDown
{
    0%
    {
        transform-origin: 0 100%;
        transform: perspective(800px) rotateX(0deg);
    }
    100%
    {
        transform-origin: 0 100%;
        transform: perspective(800px) rotateX(-180deg);
    }
}
.perspectiveDownReturn
{
    animation-name: perspectiveDownReturn;
}
@keyframes perspectiveDownReturn
{
    0%
    {
        transform-origin: 0 100%;
        transform: perspective(800px) rotateX(-180deg);
    }
    100%
    {
        transform-origin: 0 100%;
        transform: perspective(800px) rotateX(0deg);
    }
}
.perspectiveLeft
{
    animation-name: perspectiveLeft;
}
@keyframes perspectiveLeft
{
    0%
    {
        transform-origin: 0 0;
        transform: perspective(800px) rotateY(0deg);
    }
    100%
    {
        transform-origin: 0 0;
        transform: perspective(800px) rotateY(-180deg);
    }
}
.perspectiveLeftReturn
{
    animation-name: perspectiveLeftReturn;
}
@keyframes perspectiveLeftReturn
{
    0%
    {
        transform-origin: 0 0;
        transform: perspective(800px) rotateY(-180deg);
    }
    100%
    {
        transform-origin: 0 0;
        transform: perspective(800px) rotateY(0deg);
    }
}
.perspectiveRight
{
    animation-name: perspectiveRight;
}
@keyframes perspectiveRight
{
    0%
    {
        transform-origin: 100% 0;
        transform: perspective(800px) rotateY(0deg);
    }
    100%
    {
        transform-origin: 100% 0;
        transform: perspective(800px) rotateY(180deg);
    }
}
.perspectiveRightReturn
{
    animation-name: perspectiveRightReturn;
}
@keyframes perspectiveRightReturn
{
    0%
    {
        transform-origin: 100% 0;
        transform: perspective(800px) rotateY(180deg);
    }
    100%
    {
        transform-origin: 100% 0;
        transform: perspective(800px) rotateY(0deg);
    }
}
.perspectiveUp
{
    animation-name: perspectiveUp;
}
@keyframes perspectiveUp
{
    0%
    {
        transform-origin: 0 0;
        transform: perspective(800px) rotateX(0deg);
    }
    100%
    {
        transform-origin: 0 0;
        transform: perspective(800px) rotateX(180deg);
    }
}
.perspectiveUpReturn
{
    animation-name: perspectiveUpReturn;
}
@keyframes perspectiveUpReturn
{
    0%
    {
        transform-origin: 0 0;
        transform: perspective(800px) rotateX(180deg);
    }
    100%
    {
        transform-origin: 0 0;
        transform: perspective(800px) rotateX(0deg);
    }
}
.rotateDown
{
    animation-name: rotateDown;
}
@keyframes rotateDown
{
    0%
    {
        opacity: 1;
        transform-origin: 0 0;
        transform: perspective(800px) rotateX(0deg) translateZ(0);
    }
    100%
    {
        opacity: 0;
        transform-origin: 50% 100%;
        transform: perspective(800px) rotateX(-180deg) translateZ(300px);
    }
}
.rotateLeft
{
    animation-name: rotateLeft;
}
@keyframes rotateLeft
{
    0%
    {
        opacity: 1;
        transform-origin: 0 0;
        transform: perspective(800px) rotateY(0deg) translateZ(0);
    }
    100%
    {
        opacity: 0;
        transform-origin: 50% 0;
        transform: perspective(800px) rotateY(180deg) translateZ(300px);
    }
}
.rotateRight
{
    animation-name: rotateRight;
}
@keyframes rotateRight
{
    0%
    {
        opacity: 1;
        transform-origin: 0 0;
        transform: perspective(800px) rotateY(0deg) translate3d(0);
    }
    100%
    {
        opacity: 0;
        transform-origin: 50% 0;
        transform: perspective(800px) rotateY(-180deg) translateZ(150px);
    }
}
.rotateUp
{
    animation-name: rotateUp;
}
@keyframes rotateUp
{
    0%
    {
        opacity: 1;
        transform-origin: 0 0;
        transform: perspective(800px) rotateX(0deg) translateZ(0);
    }
    100%
    {
        opacity: 0;
        transform-origin: 50% 0;
        transform: perspective(800px) rotateX(180deg) translateZ(100px);
    }
}
.slideDown
{
    animation-name: slideDown;
}
@keyframes slideDown
{
    0%
    {
        transform-origin: 0 0;
        transform: translateY(0%);
    }
    100%
    {
        transform-origin: 0 0;
        transform: translateY(100%);
    }
}
.slideDownReturn
{
    animation-name: slideDownReturn;
}
@keyframes slideDownReturn
{
    0%
    {
        transform-origin: 0 0;
        transform: translateY(100%);
    }
    100%
    {
        transform-origin: 0 0;
        transform: translateY(0%);
    }
}
.slideLeft
{
    animation-name: slideLeft;
}
@keyframes slideLeft
{
    0%
    {
        transform-origin: 0 0;
        transform: translateX(0%);
    }
    100%
    {
        transform-origin: 0 0;
        transform: translateX(-100%);
    }
}
.slideLeftReturn
{
    animation-name: slideLeftReturn;
}
@keyframes slideLeftReturn
{
    0%
    {
        transform-origin: 0 0;
        transform: translateX(-100%);
    }
    100%
    {
        transform-origin: 0 0;
        transform: translateX(0%);
    }
}
.slideRight
{
    animation-name: slideRight;
}
@keyframes slideRight
{
    0%
    {
        transform-origin: 0 0;
        transform: translateX(0%);
    }
    100%
    {
        transform-origin: 0 0;
        transform: translateX(100%);
    }
}
.slideRightReturn
{
    animation-name: slideRightReturn;
}
@keyframes slideRightReturn
{
    0%
    {
        transform-origin: 0 0;
        transform: translateX(100%);
    }
    100%
    {
        transform-origin: 0 0;
        transform: translateX(0%);
    }
}
.slideUp
{
    animation-name: slideUp;
}
@keyframes slideUp
{
    0%
    {
        transform-origin: 0 0;
        transform: translateY(0%);
    }
    100%
    {
        transform-origin: 0 0;
        transform: translateY(-100%);
    }
}
.slideUpReturn
{
    animation-name: slideUpReturn;
}
@keyframes slideUpReturn
{
    0%
    {
        transform-origin: 0 0;
        transform: translateY(-100%);
    }
    100%
    {
        transform-origin: 0 0;
        transform: translateY(0%);
    }
}
.openDownLeft
{
    animation-name: openDownLeft;
}
@keyframes openDownLeft
{
    0%
    {
        transform-origin: bottom left;
        transform: rotate(0deg);
        animation-timing-function: ease-out;
    }
    100%
    {
        transform-origin: bottom left;
        transform: rotate(-110deg);
        animation-timing-function: ease-in-out;
    }
}
.openDownLeftReturn
{
    animation-name: openDownLeftReturn;
}
@keyframes openDownLeftReturn
{
    0%
    {
        transform-origin: bottom left;
        transform: rotate(-110deg);
        animation-timing-function: ease-in-out;
    }
    100%
    {
        transform-origin: bottom left;
        transform: rotate(0deg);
        animation-timing-function: ease-out;
    }
}
.openDownRight
{
    animation-name: openDownRight;
}
@keyframes openDownRight
{
    0%
    {
        transform-origin: bottom right;
        transform: rotate(0deg);
        animation-timing-function: ease-out;
    }
    100%
    {
        transform-origin: bottom right;
        transform: rotate(110deg);
        animation-timing-function: ease-in-out;
    }
}
.openDownRightReturn
{
    animation-name: openDownRightReturn;
}
@keyframes openDownRightReturn
{
    0%
    {
        transform-origin: bottom right;
        transform: rotate(110deg);
        animation-timing-function: ease-in-out;
    }
    100%
    {
        transform-origin: bottom right;
        transform: rotate(0deg);
        animation-timing-function: ease-out;
    }
}
.openUpLeft
{
    animation-name: openUpLeft;
}
@keyframes openUpLeft
{
    0%
    {
        transform-origin: top left;
        transform: rotate(0deg);
        animation-timing-function: ease-out;
    }
    100%
    {
        transform-origin: top left;
        transform: rotate(110deg);
        animation-timing-function: ease-in-out;
    }
}
.openUpLeftReturn
{
    animation-name: openUpLeftReturn;
}
@keyframes openUpLeftReturn
{
    0%
    {
        transform-origin: top left;
        transform: rotate(110deg);
        animation-timing-function: ease-in-out;
    }
    100%
    {
        transform-origin: top left;
        transform: rotate(0deg);
        animation-timing-function: ease-out;
    }
}
.openUpRight
{
    animation-name: openUpRight;
}
@keyframes openUpRight
{
    0%
    {
        transform-origin: top right;
        transform: rotate(0deg);
        animation-timing-function: ease-out;
    }
    100%
    {
        transform-origin: top right;
        transform: rotate(-110deg);
        animation-timing-function: ease-in-out;
    }
}
.openUpRightReturn
{
    animation-name: openUpRightReturn;
}
@keyframes openUpRightReturn
{
    0%
    {
        transform-origin: top right;
        transform: rotate(-110deg);
        animation-timing-function: ease-in-out;
    }
    100%
    {
        transform-origin: top right;
        transform: rotate(0deg);
        animation-timing-function: ease-out;
    }
}
.openDownLeftOut
{
    animation-name: openDownLeftOut;
}
@keyframes openDownLeftOut
{
    0%
    {
        opacity: 1;
        transform-origin: bottom left;
        transform: rotate(0deg);
        animation-timing-function: ease-out;
    }
    100%
    {
        opacity: 0;
        transform-origin: bottom left;
        transform: rotate(-110deg);
        animation-timing-function: ease-in-out;
    }
}
.openDownRightOut
{
    animation-name: openDownRightOut;
}
@keyframes openDownRightOut
{
    0%
    {
        opacity: 1;
        transform-origin: bottom right;
        transform: rotate(0deg);
        animation-timing-function: ease-out;
    }
    100%
    {
        opacity: 0;
        transform-origin: bottom right;
        transform: rotate(110deg);
        animation-timing-function: ease-in-out;
    }
}
.openUpLeftOut
{
    animation-name: openUpLeftOut;
}
@keyframes openUpLeftOut
{
    0%
    {
        opacity: 1;
        transform-origin: top left;
        transform: rotate(0deg);
        animation-timing-function: ease-out;
    }
    100%
    {
        opacity: 0;
        transform-origin: top left;
        transform: rotate(110deg);
        animation-timing-function: ease-in-out;
    }
}
.openUpRightOut
{
    animation-name: openUpRightOut;
}
@keyframes openUpRightOut
{
    0%
    {
        opacity: 1;
        transform-origin: top right;
        transform: rotate(0deg);
        animation-timing-function: ease-out;
    }
    100%
    {
        opacity: 0;
        transform-origin: top right;
        transform: rotate(-110deg);
        animation-timing-function: ease-in-out;
    }
}
.tinDownIn
{
    animation-name: tinDownIn;
}
@keyframes tinDownIn
{
    0%
    {
        opacity: 0;
        transform: scale(1,1) translateY(900%);
    }
    50%, 70%, 90%
    {
        opacity: 1;
        transform: scale(1.1,1.1) translateY(0);
    }
    60%, 80%, 100%
    {
        opacity: 1;
        transform: scale(1,1) translateY(0);
    }
}
.tinDownOut
{
    animation-name: tinDownOut;
}
@keyframes tinDownOut
{
    0%, 20%, 40%, 50%
    {
        opacity: 1;
        transform: scale(1,1) translateY(0);
    }
    10%, 30%
    {
        opacity: 1;
        transform: scale(1.1,1.1) translateY(0);
    }
    100%
    {
        opacity: 0;
        transform: scale(1,1) translateY(900%);
    }
}
.tinLeftIn
{
    animation-name: tinLeftIn;
}
@keyframes tinLeftIn
{
    0%
    {
        opacity: 0;
        transform: scale(1,1) translateX(-900%);
    }
    50%, 70%, 90%
    {
        opacity: 1;
        transform: scale(1.1,1.1) translateX(0);
    }
    60%, 80%, 100%
    {
        opacity: 1;
        transform: scale(1,1) translateX(0);
    }
}
.tinLeftOut
{
    animation-name: tinLeftOut;
}
@keyframes tinLeftOut
{
    0%, 20%, 40%, 50%
    {
        opacity: 1;
        transform: scale(1,1) translateX(0);
    }
    10%, 30%
    {
        opacity: 1;
        transform: scale(1.1,1.1) translateX(0);
    }
    100%
    {
        opacity: 0;
        transform: scale(1,1) translateX(-900%);
    }
}
.tinRightIn
{
    animation-name: tinRightIn;
}
@keyframes tinRightIn
{
    0%
    {
        opacity: 0;
        transform: scale(1,1) translateX(900%);
    }
    50%, 70%, 90%
    {
        opacity: 1;
        transform: scale(1.1,1.1) translateX(0);
    }
    60%, 80%, 100%
    {
        opacity: 1;
        transform: scale(1,1) translateX(0);
    }
}
.tinRightOut
{
    animation-name: tinRightOut;
}
@keyframes tinRightOut
{
    0%, 20%, 40%, 50%
    {
        opacity: 1;
        transform: scale(1,1) translateX(0);
    }
    10%, 30%
    {
        opacity: 1;
        transform: scale(1.1,1.1) translateX(0);
    }
    100%
    {
        opacity: 0;
        transform: scale(1,1) translateX(900%);
    }
}
.tinUpIn
{
    animation-name: tinUpIn;
}
@keyframes tinUpIn
{
    0%
    {
        opacity: 0;
        transform: scale(1,1) translateY(-900%);
    }
    50%, 70%, 90%
    {
        opacity: 1;
        transform: scale(1.1,1.1) translateY(0);
    }
    60%, 80%, 100%
    {
        opacity: 1;
        transform: scale(1,1) translateY(0);
    }
}
.tinUpOut
{
    animation-name: tinUpOut;
}
@keyframes tinUpOut
{
    0%, 20%, 40%, 50%
    {
        opacity: 1;
        transform: scale(1,1) translateY(0);
    }
    10%, 30%
    {
        opacity: 1;
        transform: scale(1.1,1.1) translateY(0);
    }
    100%
    {
        opacity: 0;
        transform: scale(1,1) translateY(-900%);
    }
}
.animated[class*="slide"]
{
    opacity: 1!important;
}
.imageAnimation
{
    animation-name: imageAnimation;
}
@-webkit-keyframes imageAnimation
{
    0%
    {
        opacity: 0;
        -webkit-animation-timing-function: ease-in;
    }
    8%
    {
        opacity: 1;
        -webkit-transform: scale(1.05);
        -webkit-animation-timing-function: ease-out;
    }
    17%
    {
        opacity: 1;
        -webkit-transform: scale(1.1);
    }
    25%
    {
        opacity: 0;
        -webkit-transform: scale(1.1);
    }
    100%
    {
        opacity: 0;
    }
}
@-moz-keyframes imageAnimation
{
    0%
    {
        opacity: 0;
        -moz-animation-timing-function: ease-in;
    }
    8%
    {
        opacity: 1;
        -moz-transform: scale(1.05);
        -moz-animation-timing-function: ease-out;
    }
    17%
    {
        opacity: 1;
        -moz-transform: scale(1.1);
    }
    25%
    {
        opacity: 0;
        -moz-transform: scale(1.1);
    }
    100%
    {
        opacity: 0;
    }
}
@-o-keyframes imageAnimation{0%{opacity:0;-o-animation-timing-function:ease-in}8%{opacity:1;-o-transform:scale(1.05);-o-animation-timing-function:ease-out}17%{opacity:1;-o-transform:scale(1.1)}25%{opacity:0;-o-transform:scale(1.1)}100%{opacity:0}}
@-ms-keyframes imageAnimation
{
    17%, 8%
    {
        opacity: 1;
    }
    17%, 25%
    {
        -ms-transform: scale(1.1);
    }
    0%, 100%, 25%
    {
        opacity: 0;
    }
    0%
    {
        -ms-animation-timing-function: ease-in;
    }
    8%
    {
        -ms-transform: scale(1.05);
        -ms-animation-timing-function: ease-out;
    }
}
@keyframes imageAnimation
{
    0%
    {
        opacity: 0;
        animation-timing-function: ease-in;
    }
    8%
    {
        opacity: 1;
        transform: scale(1.05);
        animation-timing-function: ease-out;
    }
    17%
    {
        opacity: 1;
        transform: scale(1.1);
    }
    25%
    {
        opacity: 0;
        transform: scale(1.1);
    }
    100%
    {
        opacity: 0;
    }
}