@charset "utf-8";

/* CSS Document */

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}


/*
==============================================
fadeIn
==============================================
*/

.fadeIn {
    animation-name: fadeIn;
    -webkit-animation-name: fadeIn;
    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    animation-fill-mode: backwards;
    /**/
    animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
    visibility: visible !important;
}

@keyframes fadeIn {
    0% {
        transform: scale(0);
        opacity: 0.0;
    }
    50% {
        transform: scale(1.1);
    }
    70% {
        transform: scale(0.9);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn {
    0% {
        -webkit-transform: scale(0);
        opacity: 0.0;
    }
    50% {
        -webkit-transform: scale(1.1);
    }
    70% {
        -webkit-transform: scale(0.9);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1);
        opacity: 1;
    }
}


/*
==============================================
fadeIn2
==============================================
*/

.fadeIn2 {
    animation-name: fadeIn2;
    -webkit-animation-name: fadeIn2;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    animation-fill-mode: backwards;
    animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
    visibility: visible !important;
}

@keyframes fadeIn2 {
    0% {
        transform: scale(0.8);
        opacity: 0.8;
        overflow: hidden;
    }
    50% {
        transform: scale(1.1);
        overflow: hidden;
    }
    70% {
        transform: scale(0.9);
        opacity: 1;
        overflow: hidden;
    }
    100% {
        transform: scale(1);
        opacity: 1;
        overflow: hidden;
    }
}

@-webkit-keyframes fadeIn2 {
    0% {
        -webkit-transform: scale(0.8);
        opacity: 0.8;
        overflow: hidden;
    }
    50% {
        -webkit-transform: scale(1.1);
        overflow: hidden;
    }
    70% {
        -webkit-transform: scale(0.9);
        opacity: 1;
        overflow: hidden;
    }
    100% {
        -webkit-transform: scale(1);
        opacity: 1;
        overflow: hidden;
    }
}


/*
==============================================
pulse2
==============================================
*/

.pulse2 {
    animation-name: pulse2;
    -webkit-animation-name: pulse2;
    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

@keyframes pulse2 {
    0% {
        transform: scale(0.9);
    }
    50% {
        transform: scale(1);
    }
    100% {
        transform: scale(0.9);
    }
}


/*
==============================================
pulse3
==============================================
*/

.pulse3 {
    animation-name: pulse3;
    -webkit-animation-name: pulse3;
    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

@keyframes pulse3 {
    0% {
        transform: translateY(0%) scale(0.95);
    }
    50% {
        transform: translateY(3%) scale(1);
    }
    100% {
        transform: translateY(0%) scale(0.95);
    }
}


/*
==============================================
keydown
==============================================
*/

.keydown {
    animation-name: keydown;
    -webkit-animation-name: keydown;
    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    animation-fill-mode: backwards;
    /**/
    animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
    visibility: visible !important;
}

@keyframes keydown {
    0% {
        transform: scale(0.8);
    }
    100% {
        transform: scale(0.8);
    }
}

@-webkit-keyframes keydown {
    0% {
        -webkit-transform: scale(0.8);
    }
    100% {
        -webkit-transform: scale(0.8);
    }
}


/*
==============================================
slideExpandUp
==============================================
*/

.slideExpandUp {
    animation-name: slideExpandUp;
    -webkit-animation-name: slideExpandUp;
    animation-duration: 1.6s;
    -webkit-animation-duration: 1.6s;
    animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease -out;
    visibility: visible !important;
}

@keyframes slideExpandUp {
    0% {
        transform: translateY(100%) scaleX(0.5);
    }
    30% {
        transform: translateY(-8%) scaleX(0.5);
    }
    40% {
        transform: translateY(2%) scaleX(0.5);
    }
    50% {
        transform: translateY(0%) scaleX(1.1);
    }
    60% {
        transform: translateY(0%) scaleX(0.9);
    }
    70% {
        transform: translateY(0%) scaleX(1.05);
    }
    80% {
        transform: translateY(0%) scaleX(0.95);
    }
    90% {
        transform: translateY(0%) scaleX(1.02);
    }
    100% {
        transform: translateY(0%) scaleX(1);
    }
}

@-webkit-keyframes slideExpandUp {
    0% {
        -webkit-transform: translateY(100%) scaleX(0.5);
    }
    30% {
        -webkit-transform: translateY(-8%) scaleX(0.5);
    }
    40% {
        -webkit-transform: translateY(2%) scaleX(0.5);
    }
    50% {
        -webkit-transform: translateY(0%) scaleX(1.1);
    }
    60% {
        -webkit-transform: translateY(0%) scaleX(0.9);
    }
    70% {
        -webkit-transform: translateY(0%) scaleX(1.05);
    }
    80% {
        -webkit-transform: translateY(0%) scaleX(0.95);
    }
    90% {
        -webkit-transform: translateY(0%) scaleX(1.02);
    }
    100% {
        -webkit-transform: translateY(0%) scaleX(1);
    }
}


/*
==============================================
slideUp2
==============================================
*/

.slideUp2 {
    animation-name: slideUp2;
    -webkit-animation-name: slideUp2;
    animation-duration: 0.5s;
    -webkit-animation-duration: 0.5s;
    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;
    visibility: visible !important;
}

@keyframes slideUp2 {
    0% {
        transform: translateY(-100%);
        scale: 2;
        opacity: 0;
    }
    100% {
        transform: translateY(0%);
        scale: 1;
        opacity: 1;
    }
}

@-webkit-keyframes slideUp2 {
    0% {
        -webkit-transform: translateY(-100%);
        -webkit-scale: 2;
        -webkit-opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0%);
        -webkit-scale: 1;
        -webkit-opacity: 1;
    }
}


/*
==============================================
slideLeft
==============================================
*/

.slideLeft {
    animation-name: slideLeft;
    -webkit-animation-name: slideLeft;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    visibility: visible !important;
}

@keyframes slideLeft {
    0% {
        transform: translateX(150%);
    }
    50% {
        transform: translateX(-8%);
    }
    65% {
        transform: translateX(4%);
    }
    80% {
        transform: translateX(-4%);
    }
    95% {
        transform: translateX(2%);
    }
    100% {
        transform: translateX(0%);
    }
}

@-webkit-keyframes slideLeft {
    0% {
        -webkit-transform: translateX(150%);
    }
    50% {
        -webkit-transform: translateX(-8%);
    }
    65% {
        -webkit-transform: translateX(4%);
    }
    80% {
        -webkit-transform: translateX(-4%);
    }
    95% {
        -webkit-transform: translateX(2%);
    }
    100% {
        -webkit-transform: translateX(0%);
    }
}


/*
==============================================
scale
==============================================
*/

.scale {
    animation-name: scale;
    -webkit-animation-name: scale;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    visibility: visible !important;
}

@keyframes scale {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0.8);
    }
}

@-webkit-keyframes scale {
    0% {
        -webkit-transform: scale(1);
    }
    100% {
        -webkit-transform: scale(0.8);
    }
}

.scale2 {
    animation-name: scale2;
    -webkit-animation-name: scale2;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    visibility: visible !important;
}

@keyframes scale2 {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}

@-webkit-keyframes scale2 {
    0% {
        -webkit-transform: scale(1);
    }
    100% {
        -webkit-transform: scale(0);
    }
}


/*
==============================================
hatch
==============================================
*/

.hatch {
    animation-name: hatch;
    -webkit-animation-name: hatch;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%;
    visibility: visible !important;
}

.hatch2 {
    animation-name: hatch;
    -webkit-animation-name: hatch;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
    /**/
    animation-iteration-count: 2;
    -webkit-animation-iteration-count: 2;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%;
    visibility: visible !important;
}

@keyframes hatch {
    0% {
        transform: rotate(0deg) scaleY(0.6);
    }
    20% {
        transform: rotate(-2deg) scaleY(1.05);
    }
    35% {
        transform: rotate(2deg) scaleY(1);
    }
    50% {
        transform: rotate(-2deg);
    }
    65% {
        transform: rotate(1deg);
    }
    80% {
        transform: rotate(-1deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

@-webkit-keyframes hatch {
    0% {
        -webkit-transform: rotate(0deg) scaleY(0.6);
    }
    20% {
        -webkit-transform: rotate(-2deg) scaleY(1.05);
    }
    35% {
        -webkit-transform: rotate(2deg) scaleY(1);
    }
    50% {
        -webkit-transform: rotate(-2deg);
    }
    65% {
        -webkit-transform: rotate(1deg);
    }
    80% {
        -webkit-transform: rotate(-1deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
    }
}


/*
==============================================
slide
==============================================
*/

.slide {
    animation-name: slide;
    -webkit-animation-name: slide;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%;
    visibility: visible !important;
}

@keyframes slide {
    0% {
        transform: rotate(0deg);
    }
    20% {
        transform: rotate(-2deg);
    }
    35% {
        transform: rotate(2deg);
    }
    50% {
        transform: rotate(-2deg);
    }
    65% {
        transform: rotate(1deg);
    }
    80% {
        transform: rotate(-1deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

@-webkit-keyframes slide {
    0% {
        -webkit-transform: rotate(0deg);
    }
    20% {
        -webkit-transform: rotate(-2deg);
    }
    35% {
        -webkit-transform: rotate(2deg);
    }
    50% {
        -webkit-transform: rotate(-2deg);
    }
    65% {
        -webkit-transform: rotate(1deg);
    }
    80% {
        -webkit-transform: rotate(-1deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
    }
}


/*
==============================================
bounceOutDown
==============================================
*/

.bounceOutDown {
    -webkit-animation-name: bounceOutDown;
    animation-name: bounceOutDown;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%;
    visibility: visible !important;
}

@-webkit-keyframes bounceOutDown {
    20% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }
    40%,
    45% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
    }
}

@keyframes bounceOutDown {
    20% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }
    40%,
    45% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
    }
}


/*
==============================================
FadeOut
==============================================
*/

.FadeOut {
    animation-name: FadeOut;
    -webkit-animation-name: FadeOut;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    visibility: visible !important;
}

.FadeOut2 {
    animation-name: FadeOut;
    -webkit-animation-name: FadeOut;
    animation-duration: 0.5s;
    -webkit-animation-duration: 0.5s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    visibility: visible !important;
}

.FadeOut3 {
    animation-name: FadeOut;
    -webkit-animation-name: FadeOut;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    visibility: visible !important;
}

@keyframes FadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-webkit-keyframes FadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}


/*
==============================================
FadeIn2
==============================================
*/

.FadeIn2 {
    animation-name: FadeIn2;
    -webkit-animation-name: FadeIn2;
    animation-duration: 0.2s;
    -webkit-animation-duration: 0.2s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    visibility: visible !important;
}

.FadeIn5 {
    animation-name: FadeIn2;
    -webkit-animation-name: FadeIn2;
    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    visibility: visible !important;
}

.FadeIn3 {
    animation-name: FadeIn2;
    -webkit-animation-name: FadeIn2;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    visibility: visible !important;
}

.FadeIn4 {
    animation-name: FadeIn4;
    -webkit-animation-name: FadeIn4;
    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    visibility: visible !important;
}

@keyframes FadeIn2 {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes FadeIn2 {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes FadeIn4 {
    0% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.5;
    }
}

@-webkit-keyframes FadeIn4 {
    0% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.5;
    }
}


/*
==============================================
expandUp
==============================================
*/

.expandUp {
    animation-name: expandUp;
    -webkit-animation-name: expandUp;
    animation-duration: 0.7s;
    -webkit-animation-duration: 0.7s;
    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;
    visibility: visible !important;
}

@keyframes expandUp {
    0% {
        transform: translateY(100%) scale(0.6) scaleY(0.5);
    }
    60% {
        transform: translateY(-7%) scaleY(1.12);
    }
    75% {
        transform: translateY(3%);
    }
    100% {
        transform: translateY(0%) scale(1) scaleY(1);
    }
}

@-webkit-keyframes expandUp {
    0% {
        -webkit-transform: translateY(100%) scale(0.6) scaleY(0.5);
    }
    60% {
        -webkit-transform: translateY(-7%) scaleY(1.12);
    }
    75% {
        -webkit-transform: translateY(3%);
    }
    100% {
        -webkit-transform: translateY(0%) scale(1) scaleY(1);
    }
}


/*
==============================================
rotate
==============================================
*/

.rotate {
    animation-name: rotate;
    -webkit-animation-name: rotate;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;
    visibility: visible !important;
}

@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}


/*
==============================================
rotateBig
==============================================
*/

.rotateBig {
    animation-name: rotateBig;
    -webkit-animation-name: rotateBig;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;
    visibility: visible !important;
}

@-webkit-keyframes rotateBig {
    from {
        -webkit-transform: scale(0);
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: scale(1);
        -webkit-transform: rotate(360deg);
    }
}

@keyframes rotateBig {
    from {
        transform: scale(0);
        transform: rotate(0deg);
    }
    to {
        transform: scale(1);
        transform: rotate(360deg);
    }
}


/*
==============================================
opacity
==============================================
*/

.opacity {
    animation-name: opacity;
    -webkit-animation-name: opacity;
    animation-direction: alternate;
    -webkit-animation-direction: alternate;
    animation-iteration-count: 2;
    -webkit-animation-iteration-count: 2;
    animation-duration: 0.5s;
    -webkit-animation-duration: 0.5s;
    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;
    visibility: visible !important;
}

.opacity2 {
    animation-name: opacity;
    -webkit-animation-name: opacity;
    animation-direction: alternate;
    -webkit-animation-direction: alternate;
    animation-iteration-count: 10;
    -webkit-animation-iteration-count: 10;
    animation-duration: 0.5s;
    -webkit-animation-duration: 0.5s;
    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;
    visibility: visible !important;
}

@-webkit-keyframes opacity {
    from {
        -webkit-opacity: 0.0;
    }
    to {
        -webkit-opacity: 1;
    }
}

@keyframes opacity {
    from {
        opacity: 0.0;
    }
    to {
        opacity: 1;
    }
}


/*
==============================================
rubberBand
==============================================
*/

.rubberBand {
    -webkit-animation-name: rubberBand;
    animation-name: rubberBand;
    animation-direction: alternate;
    -webkit-animation-direction: alternate;
    animation-iteration-count: 2;
    -webkit-animation-iteration-count: 2;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;
}

@-webkit-keyframes rubberBand {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
    }
    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
    }
    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
    }
    65% {
        -webkit-transform: scale3d(.95, 1.05, 1);
        transform: scale3d(.95, 1.05, 1);
    }
    75% {
        -webkit-transform: scale3d(1.05, .95, 1);
        transform: scale3d(1.05, .95, 1);
    }
    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes rubberBand {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
    }
    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
    }
    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
    }
    65% {
        -webkit-transform: scale3d(.95, 1.05, 1);
        transform: scale3d(.95, 1.05, 1);
    }
    75% {
        -webkit-transform: scale3d(1.05, .95, 1);
        transform: scale3d(1.05, .95, 1);
    }
    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}


/*
==============================================
bounceOut
==============================================
*/

.bounceOut {
    -webkit-animation-name: bounceOut;
    animation-name: bounceOut;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;
}

@-webkit-keyframes bounceOut {
    20% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9);
    }
    50%,
    55% {
        opacity: 1;
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }
    to {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }
}

@keyframes bounceOut {
    20% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9);
    }
    50%,
    55% {
        opacity: 1;
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }
    to {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }
}


/*
==============================================
ZoomIn
==============================================
*/

.ZoomIn {
    animation-name: ZoomIn;
    -webkit-animation-name: ZoomIn;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
    visibility: visible !important;
}

@keyframes ZoomIn {
    0% {
        transform: scale(0.0);
    }
    100% {
        transform: scale(1.3);
    }
}

@-webkit-keyframes ZoomIn {
    0% {
        -webkit-transform: scale(0.0);
    }
    100% {
        -webkit-transform: scale(1.3);
    }
}


/*
==============================================
Bigger
==============================================
*/

.Bigger {
    animation-name: Bigger;
    -webkit-animation-name: Bigger;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
    transform-origin: center bottom;
    visibility: visible !important;
}

@keyframes Bigger {
    0% {
        opacity: 0;
        transform: scale(0.0) rotate(5deg);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1.3) rotate(0deg);
    }
}

@-webkit-keyframes Bigger {
    0% {
        -webkit-opacity: 0;
        -webkit-transform: scale(0.0) rotate(5deg);
    }
    50% {
        -webkit-opacity: 1;
        -webkit-transform: scale(1) rotate(5deg);
    }
    100% {
        -webkit-opacity: 0;
        -webkit-transform: scale(1.3) rotate(0deg);
    }
}


/*
==============================================
floating
==============================================
*/

.floating {
    animation-name: floating;
    -webkit-animation-name: floating;
    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

@keyframes floating {
    0% {
        transform: translateY(0%);
    }
    50% {
        transform: translateY(3%);
    }
    100% {
        transform: translateY(0%);
    }
}

@-webkit-keyframes floating {
    0% {
        -webkit-transform: translateY(0%);
    }
    50% {
        -webkit-transform: translateY(3%);
    }
    100% {
        -webkit-transform: translateY(0%);
    }
}


/*
==============================================
tossing
==============================================
*/

.tossing {
    animation-name: tossing;
    -webkit-animation-name: tossing;
    animation-duration: 2.5s;
    -webkit-animation-duration: 2.5s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

@keyframes tossing {
    0% {
        transform: rotate(-4deg);
    }
    50% {
        transform: rotate(4deg);
    }
    100% {
        transform: rotate(-4deg);
    }
}

@-webkit-keyframes tossing {
    0% {
        -webkit-transform: rotate(-4deg);
    }
    50% {
        -webkit-transform: rotate(4deg);
    }
    100% {
        -webkit-transform: rotate(-4deg);
    }
}


/*
==============================================
click1
==============================================
*/

.click1 {
    animation-name: click1;
    -webkit-animation-name: click1;
    animation-duration: 0.05s;
    -webkit-animation-duration: 0.05s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
    visibility: visible !important;
}

@keyframes click1 {
    0% {
        transform: scale(1.0);
    }
    100% {
        transform: scale(0.95);
    }
}

@-webkit-keyframes click1 {
    0% {
        -webkit-transform: scale(1.0);
    }
    100% {
        -webkit-transform: scale(0.95);
    }
}

.click2 {
    animation-name: click2;
    -webkit-animation-name: click2;
    animation-duration: 0.1s;
    -webkit-animation-duration: 0.1s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
    visibility: visible !important;
}

@keyframes click2 {
    0% {
        transform: scale(1.0);
    }
    100% {
        transform: scale(0.8);
    }
}

@-webkit-keyframes click2 {
    0% {
        -webkit-transform: scale(1.0);
    }
    100% {
        -webkit-transform: scale(0.8);
    }
}


/*
==============================================
flash
==============================================
*/

.flash {
    -webkit-animation-name: flash;
    animation-name: flash;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
    visibility: visible !important;
}

@-webkit-keyframes flash {
    from,
    50%,
    to {
        opacity: 1;
    }
    25%,
    75% {
        opacity: 0.3;
    }
}

@keyframes flash {
    from,
    50%,
    to {
        opacity: 1;
    }
    25%,
    75% {
        opacity: 0.3;
    }
}


/*
==============================================
flash2
==============================================
*/

.flash2 {
    -webkit-animation-name: flash2;
    animation-name: flash2;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    visibility: visible !important;
}

@-webkit-keyframes flash2 {
    from,
    50%,
    to {
        opacity: 1;
    }
    25%,
    75% {
        opacity: 0.5;
    }
}

@keyframes flash2 {
    from,
    50%,
    to {
        opacity: 1;
    }
    25%,
    75% {
        opacity: 0.5;
    }
}


/*
==============================================
rubberBand 
==============================================
*/

.bounceInUp {
    -webkit-animation-name: rubberBand;
    animation-name: rubberBand;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
    visibility: visible !important;
}

@-webkit-keyframes rubberBand {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
    }
    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
    }
    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
    }
    65% {
        -webkit-transform: scale3d(.95, 1.05, 1);
        transform: scale3d(.95, 1.05, 1);
    }
    75% {
        -webkit-transform: scale3d(1.05, .95, 1);
        transform: scale3d(1.05, .95, 1);
    }
    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes rubberBand {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
    }
    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
    }
    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
    }
    65% {
        -webkit-transform: scale3d(.95, 1.05, 1);
        transform: scale3d(.95, 1.05, 1);
    }
    75% {
        -webkit-transform: scale3d(1.05, .95, 1);
        transform: scale3d(1.05, .95, 1);
    }
    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}


/*
==============================================
bounceInUp 
==============================================
*/

.bounceInUp {
    -webkit-animation-name: bounceInUp;
    animation-name: bounceInUp;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
    visibility: visible !important;
}

@-webkit-keyframes bounceInUp {
    from,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0);
        transform: translate3d(0, 3000px, 0);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }
    75% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }
    90% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0);
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes bounceInUp {
    from,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0);
        transform: translate3d(0, 3000px, 0);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }
    75% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }
    90% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0);
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}


/*
==============================================
Test
==============================================
*/

.Test {
    animation-name: Test;
    -webkit-animation-name: Test;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    /**/
    visibility: visible !important;
}

@keyframes Test {
    0% {
        transform: translateY(0%) scale(1) rotate(360deg);
    }
    100% {
        transform: translateY(0%) scale(0.3) rotate(-360deg);
    }
}

@-webkit-keyframes Test {
    0% {
        -webkit-transform: translateY(0%) scale(1) rotate(360deg);
    }
    100% {
        -webkit-transform: translateY(0%) scale(0.3) rotate(-360deg);
    }
}


/*
==============================================
flipInY
==============================================
*/

.flipInY {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInY;
    animation-name: flipInY;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
}

@-webkit-keyframes flipInY {
    from {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }
    40% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    60% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1;
    }
    80% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    }
    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}

@keyframes flipInY {
    from {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }
    40% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    60% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1;
    }
    80% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    }
    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}


/*
==============================================
fadeOutUp
==============================================
*/

.fadeOutUp {
    animation-name: fadeOutUp;
    -webkit-animation-name: fadeOutUp;
    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}

@keyframes fadeOutUp {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }
}

@-webkit-keyframes fadeOutUp {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
    }
}


/*
==============================================
swing
==============================================
*/

.swing {
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing;
    animation-name: swing;
    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
}

@-webkit-keyframes swing {
    20% {
        -webkit-transform: rotate3d(0, 0, 1, 15deg);
        transform: rotate3d(0, 0, 1, 15deg);
    }
    40% {
        -webkit-transform: rotate3d(0, 0, 1, -10deg);
        transform: rotate3d(0, 0, 1, -10deg);
    }
    60% {
        -webkit-transform: rotate3d(0, 0, 1, 5deg);
        transform: rotate3d(0, 0, 1, 5deg);
    }
    80% {
        -webkit-transform: rotate3d(0, 0, 1, -5deg);
        transform: rotate3d(0, 0, 1, -5deg);
    }
    to {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
    }
}

@keyframes swing {
    20% {
        -webkit-transform: rotate3d(0, 0, 1, 15deg);
        transform: rotate3d(0, 0, 1, 15deg);
    }
    40% {
        -webkit-transform: rotate3d(0, 0, 1, -10deg);
        transform: rotate3d(0, 0, 1, -10deg);
    }
    60% {
        -webkit-transform: rotate3d(0, 0, 1, 5deg);
        transform: rotate3d(0, 0, 1, 5deg);
    }
    80% {
        -webkit-transform: rotate3d(0, 0, 1, -5deg);
        transform: rotate3d(0, 0, 1, -5deg);
    }
    to {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
    }
}


/*
==============================================
tada
==============================================
*/

.tada {
    -webkit-animation-name: tada;
    animation-name: tada;
    animation-duration: 0.8s;
    -webkit-animation-duration: 0.8s;
    animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
    /**/
    animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
}

@-webkit-keyframes tada {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    10%,
    20% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    }
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }
    40%,
    60%,
    80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }
    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes tada {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    10%,
    20% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    }
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }
    40%,
    60%,
    80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }
    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}