.transition {
    -webkit-animation-name: transition;
    animation-name: transition;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
@-webkit-keyframes transition {
    0% {
        -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);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@keyframes transition {
    0% {
        -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);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}


.transition{


}

.noAnimation {
   animation: none;
}

.zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }
    50% {
        opacity: 1;
    }
}
@keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }
    50% {
        opacity: 1;
    }
}
.zoomInDown {
    -webkit-animation-name: zoomInDown;
    animation-name: zoomInDown;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes zoomInDown {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}
@keyframes zoomInDown {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}
.zoomInLeft {
    -webkit-animation-name: zoomInLeft;
    animation-name: zoomInLeft;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes zoomInLeft {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}
@keyframes zoomInLeft {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}
.zoomInRight {
    -webkit-animation-name: zoomInRight;
    animation-name: zoomInRight;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes zoomInRight {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}
@keyframes zoomInRight {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}
.zoomInUp {
    -webkit-animation-name: zoomInUp;
    animation-name: zoomInUp;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes zoomInUp {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}
@keyframes zoomInUp {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}
.bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }
    40%, 43% {
        -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0);
    }
    70% {
        -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0);
    }
    90% {
        -webkit-transform: translate3d(0,-4px,0);
        transform: translate3d(0,-4px,0);
    }
}
@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }
    40%, 43% {
        -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0);
    }
    70% {
        -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0);
    }
    90% { -webkit-transform: translate3d(0,-4px,0); transform: translate3d(0,-4px,0);
    }
}
.bounceIn {
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
    -webkit-animation-duration: .75s;
    animation-duration: .75s;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes bounceIn {
    0%, 20%, 40%, 60%, 80%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }
    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
        -webkit-transform: scale3d(.97, .97, .97);
        transform: scale3d(.97, .97, .97);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@keyframes bounceIn {
    0%, 20%, 40%, 60%, 80%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }
    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
        -webkit-transform: scale3d(.97, .97, .97);
        transform: scale3d(.97, .97, .97);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
.bounceInDown {
    -webkit-animation-name: bounceInDown;
    animation-name: bounceInDown;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes bounceInDown {
    0%, 60%, 75%, 90%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 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);
    }

    100% {
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes bounceInDown {
    0%, 60%, 75%, 90%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 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);
    }

    100% {
        -webkit-transform: none;
        transform: none;
    }
}
.bounceInLeft {
    -webkit-animation-name: bounceInLeft;
    animation-name: bounceInLeft;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes bounceInLeft {
    0%, 60%, 75%, 90%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px, 0, 0);
        transform: translate3d(-3000px, 0, 0);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px, 0, 0);
        transform: translate3d(25px, 0, 0);
    }
    75% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }
    90% {
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0);
    }
    100% {
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes bounceInLeft {
    0%, 60%, 75%, 90%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px, 0, 0);
        transform: translate3d(-3000px, 0, 0);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px, 0, 0);
        transform: translate3d(25px, 0, 0);
    }
    75% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }
    90% {
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0);
    }
    100% {
        -webkit-transform: none;
        transform: none;
    }
}
.bounceInRight {
    -webkit-animation-name: bounceInRight;
    animation-name: bounceInRight;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes bounceInRight {
    0%, 60%, 75%, 90%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(3000px, 0, 0);
        transform: translate3d(3000px, 0, 0);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, 0, 0);
        transform: translate3d(-25px, 0, 0);
    }
    75% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }
    90% {
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0);
    }
    100% {
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes bounceInRight {
    0%, 60%, 75%, 90%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(3000px, 0, 0);
        transform: translate3d(3000px, 0, 0);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, 0, 0);
        transform: translate3d(-25px, 0, 0);
    }
    75% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }
    90% {
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0);
    }
    100% {
        -webkit-transform: none;
        transform: none;
    }
}
.bounceInUp {
    -webkit-animation-name: bounceInUp;
    animation-name: bounceInUp;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes bounceInUp {
    0%, 60%, 75%, 90%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        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);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
@keyframes bounceInUp {
    0%, 60%, 75%, 90%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        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);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
.animated.flip {
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    -webkit-animation-name: flip;
    animation-name: flip;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes flip {
    0% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    40% {
        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    50% {
        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    80% {
        -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
        transform: perspective(400px) scale3d(.95, .95, .95);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    100% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
}
@keyframes flip {
    0% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    40% {
        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    50% {
        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    80% {
        -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
        transform: perspective(400px) scale3d(.95, .95, .95);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    100% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
}
.flipInX {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInX;
    animation-name: flipInX;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
        opacity: 0;
    }
    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
    }
    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }
    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }
    100% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}
@keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
        opacity: 0;
    }
    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
    }
    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }
    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }
    100% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}
.flipInY {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInY;
    animation-name: flipInY;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes flipInY {
    0% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        -webkit-transition-timing-function: ease-in;
        transition-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-transition-timing-function: ease-in;
        transition-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);
    }
    100% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}
@keyframes flipInY {
    0% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        -webkit-transition-timing-function: ease-in;
        transition-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-transition-timing-function: ease-in;
        transition-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);
    }
    100% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}
.rotateIn {
    -webkit-animation-name: rotateIn;
    animation-name: rotateIn;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes rotateIn {
    0% {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, -200deg);
        transform: rotate3d(0, 0, 1, -200deg);
        opacity: 0;
    }
    100% {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}
@keyframes rotateIn {
    0% {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, -200deg);
        transform: rotate3d(0, 0, 1, -200deg);
        opacity: 0;
    }
    100% {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}
.rotateInDownLeft {
    -webkit-animation-name: rotateInDownLeft;
    animation-name: rotateInDownLeft;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes rotateInDownLeft {
    0% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
    }
    100% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}
@keyframes rotateInDownLeft {
    0% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
    }
    100% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}
.rotateInDownRight {
    -webkit-animation-name: rotateInDownRight;
    animation-name: rotateInDownRight;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes rotateInDownRight {
    0% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
    }
    100% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}
@keyframes rotateInDownRight {
    0% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
    }
    100% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}
.rotateInUpLeft {
    -webkit-animation-name: rotateInUpLeft;
    animation-name: rotateInUpLeft;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes rotateInUpLeft {
    0% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
    }
    100% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}
@keyframes rotateInUpLeft {
    0% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
    }
    100% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}
.rotateInUpRight {
    -webkit-animation-name: rotateInUpRight;
    animation-name: rotateInUpRight;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes rotateInUpRight {
    0% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, -90deg);
        transform: rotate3d(0, 0, 1, -90deg);
        opacity: 0;
    }
    100% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}
@keyframes rotateInUpRight {
    0% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, -90deg);
        transform: rotate3d(0, 0, 1, -90deg);
        opacity: 0;
    }
    100% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}
.flash {
    -webkit-animation-name: flash;
    animation-name: flash;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes flash {
    0%, 50%, 100% {
        opacity: 1;
    }

    25%, 75% {
        opacity: 0;
    }
}
@keyframes flash {
    0%, 50%, 100% {
        opacity: 1;
    }

    25%, 75% {
        opacity: 0;
    }
}
.pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@keyframes pulse {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
.rubberBand {
    -webkit-animation-name: rubberBand;
    animation-name: rubberBand;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes rubberBand {
    0% {
        -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);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@keyframes rubberBand {
    0% {
        -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);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
.shake {
    -webkit-animation-name: shake;
    animation-name: shake;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes shake {
    0%, 100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }
    20%, 40%, 60%, 80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }
}
@keyframes shake {
    0%, 100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }
    20%, 40%, 60%, 80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }
}
.swing {
    -webkit-transform-origin: top center;
    -ms-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing;
    animation-name: swing;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-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);
    }
    100% {
        -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);
    }
    100% {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
    }
}
.tada {
    -webkit-animation-name: tada;
    animation-name: tada;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes tada {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    10%, 20% {
        -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(.9, .9, .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);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@keyframes tada {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    10%, 20% {
        -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(.9, .9, .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);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
.wobble {
    -webkit-animation-name: wobble;
    animation-name: wobble;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes wobble {
    0% {
        -webkit-transform: none;
        transform: none;
    }
    15% {
        -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    }
    30% {
        -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    }
    45% {
        -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    }
    60% {
        -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    }
    75% {
        -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    }
    100% {
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes wobble {
    0% {
        -webkit-transform: none;
        transform: none;
    }
    15% {
        -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    }
    30% {
        -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    }
    45% {
        -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    }
    60% {
        -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    }
    75% {
        -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    }
    100% {
        -webkit-transform: none;
        transform: none;
    }
}
.lightSpeedIn {
    -webkit-animation-name: lightSpeedIn;
    animation-name: lightSpeedIn;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes lightSpeedIn {
    0% {
        -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0;
    }
    60% {
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1;
    }
    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}
@keyframes lightSpeedIn {
    0% {
        -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0;
    }
    60% {
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1;
    }
    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

















/* ۱. ضربان ملایم (Pulse) */
@keyframes pulse {
   0%, 100% { transform: scale(1); }
   50% { transform: scale(0.96); }
}

/* ۲. گلیچ سریع (Quick Glitch) */
@keyframes glitch {
   0%, 100% { transform: translate(0); }
   2%, 4% { transform: translate(-4px, 3px); }
   6% { transform: translate(4px, -2px); }
}

/* ۳. شناور عمودی (Float) */
@keyframes float {
   0%, 100% { transform: translateY(0); }
   50% { transform: translateY(-15px); }
}

/* ۴. سوسو زدن نئون (Flicker) */
@keyframes flicker {
   0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
   20%, 24%, 55% { opacity: 0.3; }
   22% { opacity: 0.1; }
}

/* ۵. لرزش شدید (Shake) */
@keyframes shake {
   0%, 100% { transform: translate(0, 0); }
   20% { transform: translate(-3px, 3px); }
   40% { transform: translate(3px, -2px); }
   60% { transform: translate(-3px, -1px); }
   80% { transform: translate(2px, 2px); }
}

/* ۶. پرش و جهش (Bounce) */
@keyframes bounce {
   0%, 100% { transform: translateY(0); }
   50% { transform: translateY(-20px); }
}

/* ۷. تنفس نئون (Neon Breathe) */
@keyframes neon-breathe {
   0%, 100% { filter: brightness(1); }
   50% { filter: brightness(1.4) drop-shadow(0 0 10px var(--neon-glow-col, #0ff)); }
}

/* ۸. گلیچ قوی سایبری (Strong Glitch) */
@keyframes glitch-strong {
   0%, 100% { transform: translate(0, 0); }
   10% { transform: translate(-5px, 2px); }
   20% { transform: translate(5px, -3px); }
   30% { transform: translate(-2px, 4px); }
   40% { transform: translate(3px, -1px); }
   50% { transform: translate(-4px, 2px); }
   60% { transform: translate(3px, 1px); }
   68% { transform: translate(-3px, -1px); }
   76% { transform: translate(0, 0); }
}

/* ۹. چرخش طیف رنگی (Hue Shift) */
@keyframes hue-shift {
   0% { filter: hue-rotate(0deg); }
   100% { filter: hue-rotate(360deg); }
}

/* ۱۰. بزرگ‌نمایی ضربانی (Zoom Pulse) */
@keyframes zoom-pulse {
   0%, 100% { transform: scale(1); }
   50% { transform: scale(1.12); }
}

/* ۱۱. تاب پاندولی (Swing) */
@keyframes swing {
   0%, 100% { transform: rotate(-4deg); }
   50% { transform: rotate(4deg); }
}

/* ۱۲. جرقه الکتریکی (Electric) */
@keyframes electric {
   0%, 100% { opacity: 1; filter: brightness(1); }
   5% { opacity: 0.6; filter: brightness(1.9); }
   6% { opacity: 1; filter: brightness(1); }
   11% { opacity: 0.4; filter: brightness(2.4); }
   12% { opacity: 1; filter: brightness(1); }
   50% { filter: brightness(1.15); }
}

/* ۱۳. موج سینوسی (Wave) */
@keyframes wave {
   0%, 100% { transform: translateY(0) rotate(0deg); }
   25% { transform: translateY(-8px) rotate(-2deg); }
   50% { transform: translateY(0) rotate(0deg); }
   75% { transform: translateY(8px) rotate(2deg); }
}

/* ۱۴. چرخش ۳۶۰ درجه (Spin) */
@keyframes spin {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
}

/* ۱۵. چرخش معکوس (Spin Reverse) */
@keyframes spin-reverse {
   from { transform: rotate(0deg); }
   to { transform: rotate(-360deg); }
}

/* ۱۶. محو شدن و ظاهر شدن (Fade In Out) */
@keyframes fade-in-out {
   0%, 100% { opacity: 1; }
   50% { opacity: 0.2; }
}

/* ۱۷. درخشش قوی (Glow) */
@keyframes glow {
   0%, 100% {
      text-shadow: 0 0 5px var(--neon-glow-col, #0ff),
                   0 0 10px var(--neon-glow-col, #0ff);
   }
   50% {
      text-shadow: 0 0 15px var(--neon-glow-col, #0ff),
                   0 0 30px var(--neon-glow-col, #0ff),
                   0 0 45px var(--neon-glow-col, #0ff);
   }
}

/* ۱۸. لرزش افقی (Shake X) */
@keyframes shake-x {
   0%, 100% { transform: translateX(0); }
   20% { transform: translateX(-6px); }
   40% { transform: translateX(6px); }
   60% { transform: translateX(-4px); }
   80% { transform: translateX(4px); }
}

/* ۱۹. لرزش عمودی (Shake Y) */
@keyframes shake-y {
   0%, 100% { transform: translateY(0); }
   20% { transform: translateY(-6px); }
   40% { transform: translateY(6px); }
   60% { transform: translateY(-4px); }
   80% { transform: translateY(4px); }
}

/* ۲۰. ضربان قوی (Heartbeat) */
@keyframes heartbeat {
   0%, 100% { transform: scale(1); }
   14% { transform: scale(1.15); }
   28% { transform: scale(1); }
   42% { transform: scale(1.15); }
   70% { transform: scale(1); }
}

/* ۲۱. تایپ‌رایتر چشمک‌زن (Blink) */
@keyframes blink {
   0%, 50%, 100% { opacity: 1; }
   25%, 75% { opacity: 0; }
}

/* ۲۲. چرخش سه‌بعدی محور Y (Flip Y) */
@keyframes flip-y {
   0% { transform: perspective(400px) rotateY(0); }
   100% { transform: perspective(400px) rotateY(360deg); }
}

/* ۲۳. چرخش سه‌بعدی محور X (Flip X) */
@keyframes flip-x {
   0% { transform: perspective(400px) rotateX(0); }
   100% { transform: perspective(400px) rotateX(360deg); }
}

/* ۲۴. کش آمدن افقی (Stretch X) */
@keyframes stretch-x {
   0%, 100% { transform: scaleX(1); }
   50% { transform: scaleX(1.25); }
}

/* ۲۵. کش آمدن عمودی (Stretch Y) */
@keyframes stretch-y {
   0%, 100% { transform: scaleY(1); }
   50% { transform: scaleY(1.25); }
}

/* ۲۶. موج رنگی (Color Wave) */
@keyframes color-wave {
   0% { color: #ff0066; }
   25% { color: #00ffcc; }
   50% { color: #ffcc00; }
   75% { color: #6600ff; }
   100% { color: #ff0066; }
}

/* ۲۷. درخشش رنگین‌کمانی (Rainbow Glow) */
@keyframes rainbow-glow {
   0% { text-shadow: 0 0 10px #ff0000; }
   16% { text-shadow: 0 0 10px #ff7f00; }
   33% { text-shadow: 0 0 10px #ffff00; }
   50% { text-shadow: 0 0 10px #00ff00; }
   66% { text-shadow: 0 0 10px #0000ff; }
   83% { text-shadow: 0 0 10px #8b00ff; }
   100% { text-shadow: 0 0 10px #ff0000; }
}

/* ۲۸. لرزش تصادفی شدید (Jitter) */
@keyframes jitter {
   0% { transform: translate(0, 0) rotate(0deg); }
   10% { transform: translate(-2px, 1px) rotate(-1deg); }
   20% { transform: translate(3px, -2px) rotate(1deg); }
   30% { transform: translate(-1px, 3px) rotate(-0.5deg); }
   40% { transform: translate(2px, -1px) rotate(0.8deg); }
   50% { transform: translate(-3px, 2px) rotate(-1.2deg); }
   60% { transform: translate(1px, -3px) rotate(0.6deg); }
   70% { transform: translate(-2px, 1px) rotate(-0.4deg); }
   80% { transform: translate(3px, 2px) rotate(1deg); }
   90% { transform: translate(-1px, -2px) rotate(-0.7deg); }
   100% { transform: translate(0, 0) rotate(0deg); }
}

/* ۲۹. ظاهر شدن از پایین (Slide Up) */
@keyframes slide-up {
   0% { transform: translateY(30px); opacity: 0; }
   100% { transform: translateY(0); opacity: 1; }
}

/* ۳۰. ظاهر شدن از بالا (Slide Down) */
@keyframes slide-down {
   0% { transform: translateY(-30px); opacity: 0; }
   100% { transform: translateY(0); opacity: 1; }
}

/* ۳۱. ظاهر شدن از چپ (Slide Left) */
@keyframes slide-left {
   0% { transform: translateX(-40px); opacity: 0; }
   100% { transform: translateX(0); opacity: 1; }
}

/* ۳۲. ظاهر شدن از راست (Slide Right) */
@keyframes slide-right {
   0% { transform: translateX(40px); opacity: 0; }
   100% { transform: translateX(0); opacity: 1; }
}

/* ۳۳. بزرگ شدن با محو (Zoom In) */
@keyframes zoom-in {
   0% { transform: scale(0.3); opacity: 0; }
   100% { transform: scale(1); opacity: 1; }
}

/* ۳۴. کوچک شدن با محو (Zoom Out) */
@keyframes zoom-out {
   0% { transform: scale(1.5); opacity: 0; }
   100% { transform: scale(1); opacity: 1; }
}

/* ۳۵. چرخش با بزرگ‌نمایی (Spin Scale) */
@keyframes spin-scale {
   0% { transform: rotate(0deg) scale(0.5); }
   50% { transform: rotate(180deg) scale(1.2); }
   100% { transform: rotate(360deg) scale(1); }
}

/* ۳۶. موج افقی (Wobble) */
@keyframes wobble {
   0%, 100% { transform: translateX(0) rotate(0deg); }
   15% { transform: translateX(-12px) rotate(-4deg); }
   30% { transform: translateX(10px) rotate(3deg); }
   45% { transform: translateX(-8px) rotate(-2deg); }
   60% { transform: translateX(6px) rotate(1.5deg); }
   75% { transform: translateX(-3px) rotate(-1deg); }
}

/* ۳۷. پالس رنگی (Color Pulse) */
@keyframes color-pulse {
   0%, 100% { filter: brightness(1) saturate(1); }
   50% { filter: brightness(1.3) saturate(1.8); }
}

/* ۳۸. سایه متحرک (Shadow Dance) */
@keyframes shadow-dance {
   0%, 100% {
      text-shadow: 2px 2px 0 #ff0066, -2px -2px 0 #00ffcc;
   }
   25% {
      text-shadow: -2px 2px 0 #ffcc00, 2px -2px 0 #6600ff;
   }
   50% {
      text-shadow: 2px -2px 0 #00ff66, -2px 2px 0 #ff3300;
   }
   75% {
      text-shadow: -2px -2px 0 #3399ff, 2px 2px 0 #ff00cc;
   }
}

/* ۳۹. لرزش نئونی (Neon Shake) */
@keyframes neon-shake {
   0%, 100% {
      transform: translate(0, 0);
      text-shadow: 0 0 5px var(--neon-glow-col, #0ff);
   }
   25% {
      transform: translate(-2px, 1px);
      text-shadow: -2px 0 8px var(--neon-glow-col, #0ff);
   }
   50% {
      transform: translate(2px, -1px);
      text-shadow: 2px 0 8px var(--neon-glow-col, #0ff);
   }
   75% {
      transform: translate(-1px, 2px);
      text-shadow: 0 2px 8px var(--neon-glow-col, #0ff);
   }
}

/* ۴۰. موج نرم (Soft Wave) */
@keyframes soft-wave {
   0%, 100% { transform: translateY(0); }
   50% { transform: translateY(-6px); }
}

/* ۴۱. چرخش آهسته (Slow Spin) */
@keyframes slow-spin {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
}

/* ۴۲. درخشش ناگهانی (Flash) */
@keyframes flash {
   0%, 50%, 100% { opacity: 1; }
   25%, 75% { opacity: 0.3; }
}

/* ۴۳. کشش الاستیک (Elastic) */
@keyframes elastic {
   0% { transform: scale(1); }
   30% { transform: scale(1.25); }
   40% { transform: scale(0.9); }
   50% { transform: scale(1.1); }
   65% { transform: scale(0.95); }
   75% { transform: scale(1.05); }
   100% { transform: scale(1); }
}

/* ۴۴. چرخش سه‌بعدی ترکیبی (Flip 3D) */
@keyframes flip-3d {
   0% { transform: perspective(600px) rotateY(0) rotateX(0); }
   50% { transform: perspective(600px) rotateY(180deg) rotateX(10deg); }
   100% { transform: perspective(600px) rotateY(360deg) rotateX(0); }
}

/* ۴۵. محو شدن تدریجی با مقیاس (Fade Scale) */
@keyframes fade-scale {
   0%, 100% { opacity: 1; transform: scale(1); }
   50% { opacity: 0.4; transform: scale(0.92); }
}

/* ۴۶. لرزش چرخشی (Twist) */
@keyframes twist {
   0%, 100% { transform: rotate(0deg); }
   25% { transform: rotate(8deg); }
   75% { transform: rotate(-8deg); }
}

/* ۴۷. درخشش نقطه‌ای (Sparkle) */
@keyframes sparkle {
   0%, 100% {
      filter: brightness(1);
      text-shadow: 0 0 4px #fff;
   }
   50% {
      filter: brightness(1.6);
      text-shadow: 0 0 12px #fff, 0 0 20px var(--neon-glow-col, #0ff);
   }
}

/* ۴۸. حرکت مارپیچی (Spiral) */
@keyframes spiral {
   0% { transform: rotate(0deg) scale(1); }
   50% { transform: rotate(180deg) scale(1.1); }
   100% { transform: rotate(360deg) scale(1); }
}

/* ۴۹. پالس دوبل (Double Pulse) */
@keyframes double-pulse {
   0%, 100% { transform: scale(1); }
   20% { transform: scale(1.08); }
   40% { transform: scale(1); }
   60% { transform: scale(1.08); }
   80% { transform: scale(1); }
}

/* ۵۰. محو شدن رنگی (Hue Fade) */
@keyframes hue-fade {
   0% { filter: hue-rotate(0deg) opacity(1); }
   50% { filter: hue-rotate(180deg) opacity(0.7); }
   100% { filter: hue-rotate(360deg) opacity(1); }
}

/* ۵۱. لرزش آهسته (Gentle Shake) */
@keyframes gentle-shake {
   0%, 100% { transform: translate(0, 0); }
   25% { transform: translate(-1.5px, 1px); }
   50% { transform: translate(1.5px, -1px); }
   75% { transform: translate(-1px, -1.5px); }
}

/* ۵۲. بزرگ‌نمایی نرم (Soft Zoom) */
@keyframes soft-zoom {
   0%, 100% { transform: scale(1); }
   50% { transform: scale(1.06); }
}

/* ۵۳. چرخش با درخشش (Glow Spin) */
@keyframes glow-spin {
   0% {
      transform: rotate(0deg);
      filter: brightness(1);
   }
   50% {
      transform: rotate(180deg);
      filter: brightness(1.4);
   }
   100% {
      transform: rotate(360deg);
      filter: brightness(1);
   }
}

/* ۵۴. موج عمقی (Depth Wave) */
@keyframes depth-wave {
   0%, 100% {
      transform: translateZ(0) scale(1);
      filter: brightness(1);
   }
   50% {
      transform: translateZ(20px) scale(1.05);
      filter: brightness(1.2);
   }
}

/* ۵۵. سوسو زدن سریع (Fast Flicker) */
@keyframes fast-flicker {
   0%, 100% { opacity: 1; }
   10% { opacity: 0.4; }
   20% { opacity: 1; }
   30% { opacity: 0.2; }
   40% { opacity: 1; }
   50% { opacity: 0.6; }
   60% { opacity: 1; }
   70% { opacity: 0.3; }
   80% { opacity: 1; }
}

/* ۵۶. کشش مورب (Skew) */
@keyframes skew {
   0%, 100% { transform: skewX(0deg); }
   25% { transform: skewX(8deg); }
   75% { transform: skewX(-8deg); }
}

/* ۵۷. ظاهر شدن با چرخش (Rotate In) */
@keyframes rotate-in {
   0% { transform: rotate(-90deg) scale(0.5); opacity: 0; }
   100% { transform: rotate(0deg) scale(1); opacity: 1; }
}

/* ۵۸. محو شدن با چرخش (Rotate Out) */
@keyframes rotate-out {
   0% { transform: rotate(0deg) scale(1); opacity: 1; }
   100% { transform: rotate(90deg) scale(0.5); opacity: 0; }
}

/* ۵۹. پالس سه‌بعدی (3D Pulse) */
@keyframes pulse-3d {
   0%, 100% {
      transform: perspective(500px) translateZ(0) scale(1);
   }
   50% {
      transform: perspective(500px) translateZ(30px) scale(1.08);
   }
}

/* ۶۰. درخشش متناوب (Alternating Glow) */
@keyframes alt-glow {
   0%, 100% {
      text-shadow: 0 0 8px #00ffff, 0 0 16px #00ffff;
   }
   50% {
      text-shadow: 0 0 8px #ff00ff, 0 0 16px #ff00ff;
   }
}

/* ==========================================================================
   کلاس‌های انیمیشن متن
   ========================================================================== */



.pulseInfinite {
   animation: pulse 2s infinite ease-in-out;
}

.glitchInfinite {
   animation: glitch 0.35s infinite;
}

.floatInfinite {
   animation: float 3s infinite ease-in-out;
}

.flickerInfinite {
   animation: flicker 2.8s infinite linear;
}

.shakeInfinite {
   animation: shake 0.5s infinite;
}

.bounceInfinite {
   animation: bounce 1.2s infinite;
}

.neonBreatheInfinite {
   animation: neon-breathe 2.4s infinite ease-in-out;
}

.glitchStrongInfinite {
   animation: glitch-strong 1.1s infinite;
}

.hueShiftInfinite {
   animation: hue-shift 4s infinite linear;
}

.zoomPulseInfinite {
   animation: zoom-pulse 1.6s infinite ease-in-out;
}

.swingInfinite {
   animation: swing 2.2s infinite ease-in-out;
}

.electricInfinite {
   animation: electric 1.6s infinite linear;
}

.waveInfinite {
   animation: wave 2.5s infinite ease-in-out;
}

.fadeInOutInfinite {
   animation: fade-in-out 2s infinite ease-in-out;
}

.glowInfinite {
   animation: glow 2s infinite ease-in-out;
}

.shakeXInfinite {
   animation: shake-x 0.4s infinite;
}

.shakeYInfinite {
   animation: shake-y 0.4s infinite;
}

.heartbeatInfinite {
   animation: heartbeat 1.4s infinite;
}

.blinkInfinite {
   animation: blink 1s infinite step-end;
}

.stretchXInfinite {
   animation: stretch-x 1.8s infinite ease-in-out;
}

.stretchYInfinite {
   animation: stretch-y 1.8s infinite ease-in-out;
}



.jitterInfinite {
   animation: jitter 0.6s infinite;
}

.wobbleInfinite {
   animation: wobble 1.5s infinite ease-in-out;
}

.shadowDanceInfinite {
   animation: shadow-dance 3s infinite linear;
}

.neonShakeInfinite {
   animation: neon-shake 0.5s infinite;
}

.flashInfinite {
   animation: flash 1.2s infinite;
}

.elasticInfinite {
   animation: elastic 1.6s infinite;
}

.fadeScaleInfinite {
   animation: fade-scale 2.2s infinite ease-in-out;
}

.twistInfinite {
   animation: twist 1.8s infinite ease-in-out;
}

.sparkleInfinite {
   animation: sparkle 1.5s infinite ease-in-out;
}

.doublePulseInfinite {
   animation: double-pulse 1.8s infinite ease-in-out;
}

.hueFadeInfinite {
   animation: hue-fade 5s infinite linear;
}

.gentleShakeInfinite {
   animation: gentle-shake 1.2s infinite ease-in-out;
}

.softZoomInfinite {
   animation: soft-zoom 2.5s infinite ease-in-out;
}

.depthWaveInfinite {
   animation: depth-wave 2.8s infinite ease-in-out;
}

.fastFlickerInfinite {
   animation: fast-flicker 0.8s infinite linear;
}

.skewInfinite {
   animation: skew 2s infinite ease-in-out;
}

.pulse3dInfinite {
   animation: pulse-3d 2s infinite ease-in-out;
}













/* ==========================================================================
   کی‌فریم‌های مخصوص کادر
   ========================================================================== */

/* تنفس نوری سایه و نور کادر */
@keyframes breathe {
   0%, 100% {
      box-shadow: 0 0 10px var(--neon-border-color), 0 0 20px var(--neon-border-color), inset 0 0 10px var(--neon-border-color);
   }
   50% {
      box-shadow: 0 0 25px var(--neon-border-color), 0 0 50px var(--neon-border-color), inset 0 0 20px var(--neon-border-color);
   }
}

/* امواج نرم نوری اطراف کادر */
@keyframes glowWave {
   0%, 100% {
      box-shadow: 0 0 8px var(--neon-border-color), 0 0 16px var(--neon-border-color), 0 0 24px var(--neon-border-color), inset 0 0 8px var(--neon-border-color);
   }
   25% {
      box-shadow: 0 0 20px var(--neon-border-color), 0 0 40px var(--neon-border-color), 0 0 60px var(--neon-border-color), inset 0 0 20px var(--neon-border-color);
   }
   50% {
      box-shadow: 0 0 12px var(--neon-border-color), 0 0 28px var(--neon-border-color), 0 0 45px var(--neon-border-color), inset 0 0 14px var(--neon-border-color);
   }
   75% {
      box-shadow: 0 0 25px var(--neon-border-color), 0 0 50px var(--neon-border-color), 0 0 80px var(--neon-border-color), inset 0 0 25px var(--neon-border-color);
   }
}

/* چرخش پرتوهای نوری دور کادر */
@keyframes spinGlow {
   0% {
      box-shadow: 0 -12px 20px -4px var(--neon-border-color), 12px 0 20px -4px transparent, 0 12px 20px -4px transparent, -12px 0 20px -4px transparent, 0 0 15px var(--neon-border-color), inset 0 0 10px var(--neon-border-color);
   }
   25% {
      box-shadow: 0 -12px 20px -4px transparent, 12px 0 20px -4px var(--neon-border-color), 0 12px 20px -4px transparent, -12px 0 20px -4px transparent, 0 0 15px var(--neon-border-color), inset 0 0 10px var(--neon-border-color);
   }
   50% {
      box-shadow: 0 -12px 20px -4px transparent, 12px 0 20px -4px transparent, 0 12px 20px -4px var(--neon-border-color), -12px 0 20px -4px transparent, 0 0 15px var(--neon-border-color), inset 0 0 10px var(--neon-border-color);
   }
   75% {
      box-shadow: 0 -12px 20px -4px transparent, 12px 0 20px -4px transparent, 0 12px 20px -4px transparent, -12px 0 20px -4px var(--neon-border-color), 0 0 15px var(--neon-border-color), inset 0 0 10px var(--neon-border-color);
   }
   100% {
      box-shadow: 0 -12px 20px -4px var(--neon-border-color), 12px 0 20px -4px transparent, 0 12px 20px -4px transparent, -12px 0 20px -4px transparent, 0 0 15px var(--neon-border-color), inset 0 0 10px var(--neon-border-color);
   }
}

/* چرخش سایه چهارطرفه سریع */
@keyframes fastSpinGlow {
   0% {
      box-shadow: 0 -15px 25px -6px var(--neon-border-color), 15px 0 25px -6px transparent, 0 15px 25px -6px transparent, -15px 0 25px -6px transparent, 0 0 18px var(--neon-border-color);
   }
   25% {
      box-shadow: 0 -15px 25px -6px transparent, 15px 0 25px -6px var(--neon-border-color), 0 15px 25px -6px transparent, -15px 0 25px -6px transparent, 0 0 18px var(--neon-border-color);
   }
   50% {
      box-shadow: 0 -15px 25px -6px transparent, 15px 0 25px -6px transparent, 0 15px 25px -6px var(--neon-border-color), -15px 0 25px -6px transparent, 0 0 18px var(--neon-border-color);
   }
   75% {
      box-shadow: 0 -15px 25px -6px transparent, 15px 0 25px -6px transparent, 0 15px 25px -6px transparent, -15px 0 25px -6px var(--neon-border-color), 0 0 18px var(--neon-border-color);
   }
   100% {
      box-shadow: 0 -15px 25px -6px var(--neon-border-color), 15px 0 25px -6px transparent, 0 15px 25px -6px transparent, -15px 0 25px -6px transparent, 0 0 18px var(--neon-border-color);
   }
}

/* موج نوری افقی */
@keyframes hWave {
   0%, 100% {
      box-shadow: -15px 0 20px -5px var(--neon-border-color), 15px 0 20px -5px transparent, 0 0 12px var(--neon-border-color), inset 0 0 10px var(--neon-border-color);
   }
   50% {
      box-shadow: -15px 0 20px -5px transparent, 15px 0 20px -5px var(--neon-border-color), 0 0 12px var(--neon-border-color), inset 0 0 10px var(--neon-border-color);
   }
}

/* موج نوری عمودی */
@keyframes vWave {
   0%, 100% {
      box-shadow: 0 -15px 20px -5px var(--neon-border-color), 0 15px 20px -5px transparent, 0 0 12px var(--neon-border-color), inset 0 0 10px var(--neon-border-color);
   }
   50% {
      box-shadow: 0 -15px 20px -5px transparent, 0 15px 20px -5px var(--neon-border-color), 0 0 12px var(--neon-border-color), inset 0 0 10px var(--neon-border-color);
   }
}

/* موج مورب نوری */
@keyframes diagonalWave {
   0%, 100% {
      box-shadow: -12px -12px 22px -5px var(--neon-border-color), 12px 12px 22px -5px transparent, 0 0 14px var(--neon-border-color);
   }
   50% {
      box-shadow: -12px -12px 22px -5px transparent, 12px 12px 22px -5px var(--neon-border-color), 0 0 14px var(--neon-border-color);
   }
}

/* پرتو چرخان هشت‌طرفه */
@keyframes octoSpin {
   0% {
      box-shadow:
         0 -14px 18px -5px var(--neon-border-color),
         10px -10px 18px -5px transparent,
         14px 0 18px -5px transparent,
         10px 10px 18px -5px transparent,
         0 14px 18px -5px transparent,
         -10px 10px 18px -5px transparent,
         -14px 0 18px -5px transparent,
         -10px -10px 18px -5px transparent,
         0 0 14px var(--neon-border-color);
   }
   12.5% {
      box-shadow:
         0 -14px 18px -5px transparent,
         10px -10px 18px -5px var(--neon-border-color),
         14px 0 18px -5px transparent,
         10px 10px 18px -5px transparent,
         0 14px 18px -5px transparent,
         -10px 10px 18px -5px transparent,
         -14px 0 18px -5px transparent,
         -10px -10px 18px -5px transparent,
         0 0 14px var(--neon-border-color);
   }
   25% {
      box-shadow:
         0 -14px 18px -5px transparent,
         10px -10px 18px -5px transparent,
         14px 0 18px -5px var(--neon-border-color),
         10px 10px 18px -5px transparent,
         0 14px 18px -5px transparent,
         -10px 10px 18px -5px transparent,
         -14px 0 18px -5px transparent,
         -10px -10px 18px -5px transparent,
         0 0 14px var(--neon-border-color);
   }
   37.5% {
      box-shadow:
         0 -14px 18px -5px transparent,
         10px -10px 18px -5px transparent,
         14px 0 18px -5px transparent,
         10px 10px 18px -5px var(--neon-border-color),
         0 14px 18px -5px transparent,
         -10px 10px 18px -5px transparent,
         -14px 0 18px -5px transparent,
         -10px -10px 18px -5px transparent,
         0 0 14px var(--neon-border-color);
   }
   50% {
      box-shadow:
         0 -14px 18px -5px transparent,
         10px -10px 18px -5px transparent,
         14px 0 18px -5px transparent,
         10px 10px 18px -5px transparent,
         0 14px 18px -5px var(--neon-border-color),
         -10px 10px 18px -5px transparent,
         -14px 0 18px -5px transparent,
         -10px -10px 18px -5px transparent,
         0 0 14px var(--neon-border-color);
   }
   62.5% {
      box-shadow:
         0 -14px 18px -5px transparent,
         10px -10px 18px -5px transparent,
         14px 0 18px -5px transparent,
         10px 10px 18px -5px transparent,
         0 14px 18px -5px transparent,
         -10px 10px 18px -5px var(--neon-border-color),
         -14px 0 18px -5px transparent,
         -10px -10px 18px -5px transparent,
         0 0 14px var(--neon-border-color);
   }
   75% {
      box-shadow:
         0 -14px 18px -5px transparent,
         10px -10px 18px -5px transparent,
         14px 0 18px -5px transparent,
         10px 10px 18px -5px transparent,
         0 14px 18px -5px transparent,
         -10px 10px 18px -5px transparent,
         -14px 0 18px -5px var(--neon-border-color),
         -10px -10px 18px -5px transparent,
         0 0 14px var(--neon-border-color);
   }
   87.5% {
      box-shadow:
         0 -14px 18px -5px transparent,
         10px -10px 18px -5px transparent,
         14px 0 18px -5px transparent,
         10px 10px 18px -5px transparent,
         0 14px 18px -5px transparent,
         -10px 10px 18px -5px transparent,
         -14px 0 18px -5px transparent,
         -10px -10px 18px -5px var(--neon-border-color),
         0 0 14px var(--neon-border-color);
   }
   100% {
      box-shadow:
         0 -14px 18px -5px var(--neon-border-color),
         10px -10px 18px -5px transparent,
         14px 0 18px -5px transparent,
         10px 10px 18px -5px transparent,
         0 14px 18px -5px transparent,
         -10px 10px 18px -5px transparent,
         -14px 0 18px -5px transparent,
         -10px -10px 18px -5px transparent,
         0 0 14px var(--neon-border-color);
   }
}

/* پالس مرزی ضخیم */
@keyframes borderPulse {
   0%, 100% {
      box-shadow: 0 0 0 2px var(--neon-border-color), 0 0 12px var(--neon-border-color), inset 0 0 8px var(--neon-border-color);
   }
   50% {
      box-shadow: 0 0 0 5px var(--neon-border-color), 0 0 25px var(--neon-border-color), 0 0 45px var(--neon-border-color), inset 0 0 18px var(--neon-border-color);
   }
}

/* تنفس عمیق نئون */
@keyframes deepBreathe {
   0%, 100% {
      box-shadow: 0 0 8px var(--neon-border-color), 0 0 16px var(--neon-border-color), inset 0 0 8px var(--neon-border-color);
      filter: brightness(1);
   }
   50% {
      box-shadow: 0 0 30px var(--neon-border-color), 0 0 60px var(--neon-border-color), 0 0 90px var(--neon-border-color), inset 0 0 25px var(--neon-border-color);
      filter: brightness(1.35);
   }
}

/* موج نرم کادر */
@keyframes softWave {
   0%, 100% {
      box-shadow: 0 0 10px var(--neon-border-color), 0 0 20px var(--neon-border-color), inset 0 0 8px var(--neon-border-color);
   }
   50% {
      box-shadow: 0 0 18px var(--neon-border-color), 0 0 36px var(--neon-border-color), 0 0 55px var(--neon-border-color), inset 0 0 16px var(--neon-border-color);
   }
}

/* درخشش متناوب دو رنگ */
@keyframes altGlow {
   0%, 100% {
      box-shadow: 0 0 15px var(--neon-border-color), 0 0 30px var(--neon-border-color), inset 0 0 12px var(--neon-border-color);
   }
   50% {
      box-shadow: 0 0 15px #fff, 0 0 30px #fff, 0 0 50px var(--neon-border-color), inset 0 0 15px #fff;
   }
}

/* درخشش نقطه‌ای کادر */
@keyframes sparkle {
   0%, 100% {
      box-shadow: 0 0 10px var(--neon-border-color), 0 0 20px var(--neon-border-color);
      filter: brightness(1);
   }
   50% {
      box-shadow: 0 0 20px #fff, 0 0 40px var(--neon-border-color), 0 0 60px var(--neon-border-color);
      filter: brightness(1.5);
   }
}

/* درخشش رنگین‌کمانی کادر */
@keyframes rainbowGlow {
   0% { box-shadow: 0 0 15px #ff0000, 0 0 30px #ff0000, inset 0 0 10px #ff0000; }
   16% { box-shadow: 0 0 15px #ff7f00, 0 0 30px #ff7f00, inset 0 0 10px #ff7f00; }
   33% { box-shadow: 0 0 15px #ffff00, 0 0 30px #ffff00, inset 0 0 10px #ffff00; }
   50% { box-shadow: 0 0 15px #00ff00, 0 0 30px #00ff00, inset 0 0 10px #00ff00; }
   66% { box-shadow: 0 0 15px #0000ff, 0 0 30px #0000ff, inset 0 0 10px #0000ff; }
   83% { box-shadow: 0 0 15px #8b00ff, 0 0 30px #8b00ff, inset 0 0 10px #8b00ff; }
   100% { box-shadow: 0 0 15px #ff0000, 0 0 30px #ff0000, inset 0 0 10px #ff0000; }
}


/* ==========================================================================
   کلاس‌های مخصوص کادر
   ========================================================================== */

.breatheInfinite {
   animation: breathe 2s infinite ease-in-out !important;
}

.glowWaveInfinite {
   animation: glowWave 2s infinite ease-in-out;
}

.spinGlowInfinite {
   animation: spinGlow 2.5s infinite linear;
}

.fastSpinGlowInfinite {
   animation: fastSpinGlow 1.6s infinite linear;
}

.hWaveInfinite {
   animation: hWave 2.2s infinite ease-in-out;
}

.vWaveInfinite {
   animation: vWave 2.2s infinite ease-in-out;
}

.diagonalWaveInfinite {
   animation: diagonalWave 2.4s infinite ease-in-out;
}

.octoSpinInfinite {
   animation: octoSpin 3s infinite linear;
}

.borderPulseInfinite {
   animation: borderPulse 1.8s infinite ease-in-out;
}

.deepBreatheInfinite {
   animation: deepBreathe 2.8s infinite ease-in-out;
}

.softWaveInfinite {
   animation: softWave 2.6s infinite ease-in-out;
}

.altGlowInfinite {
   animation: altGlow 2.2s infinite ease-in-out;
}

.sparkleInfinite {
   animation: sparkle 1.6s infinite ease-in-out;
}

.rainbowGlowInfinite {
   animation: rainbowGlow 4s infinite linear;
}