/*
.appear-animation,
[data-appear-animation] {
    opacity:0
}
.animated,
.appear-animation {
    animation-fill-mode:both;
    animation-duration:1s
}
[data-plugin-animated-letters] .animated.letter,
[data-plugin-animated-words] .animated-words-item {
    display:inline-block
}
.appear-animation-visible {
    opacity:1
}
 */

@keyframes pulse {
    0% {
        transform:scale(1)
    }
    50% {
        transform:scale(1.1)
    }
    to {
        transform:scale(1);
        opacity:1
    }
}
.pulse {
    animation-name:pulse
}
@keyframes fadeIn {
    0% {
        opacity:0
    }
    to {
        opacity:1
    }
}
.fadeIn {
    animation-name:fadeIn
}
@keyframes fadeInUp {
    0% {
        opacity:0;
        transform:translateY(30px)
    }
    to {
        opacity:1;
        transform:translateY(0)
    }
}
.fadeInUp {
    animation-name:fadeInUp
}
@keyframes fadeInDown {
    0% {
        opacity:0;
        transform:translateY(-30px)
    }
    to {
        opacity:1;
        transform:translateY(0)
    }
}
.fadeInDown {
    animation-name:fadeInDown
}
@keyframes fadeInLeft {
    0% {
        opacity:0;
        transform:translateX(-40px)
    }
    to {
        opacity:1;
        transform:translateX(0)
    }
}
.fadeInLeft {
    animation-name:fadeInLeft
}
@keyframes fadeInRight {
    0% {
        opacity:0;
        transform:translateX(40px)
    }
    to {
        opacity:1;
        transform:translateX(0)
    }
}
.fadeInRight {
    animation-name:fadeInRight
}
@keyframes fadeInUpBig {
    0% {
        opacity:0;
        transform:translateY(2000px)
    }
    to {
        opacity:1;
        transform:translateY(0)
    }
}
.fadeInUpBig {
    animation-name:fadeInUpBig
}
@keyframes fadeInDownBig {
    0% {
        opacity:0;
        transform:translateY(-2000px)
    }
    to {
        opacity:1;
        transform:translateY(0)
    }
}
.fadeInDownBig {
    animation-name:fadeInDownBig
}
@keyframes fadeInLeftBig {
    0% {
        opacity:0;
        transform:translateX(-2000px)
    }
    to {
        opacity:1;
        transform:translateX(0)
    }
}
.fadeInLeftBig {
    animation-name:fadeInLeftBig
}
@keyframes fadeInRightBig {
    0% {
        opacity:0;
        transform:translateX(2000px)
    }
    to {
        opacity:1;
        transform:translateX(0)
    }
}
.fadeInRightBig {
    animation-name:fadeInRightBig
}
@keyframes bounceIn {
    0% {
        opacity:0;
        transform:scale(0.3)
    }
    50% {
        opacity:1;
        transform:scale(1.05)
    }
    70% {
        transform:scale(0.9)
    }
    to {
        transform:scale(1);
        opacity:1
    }
}
.bounceIn {
    animation-name:bounceIn
}
@keyframes bounceInUp {
    0% {
        opacity:0;
        transform:translateY(2000px)
    }
    60% {
        opacity:1;
        transform:translateY(-30px)
    }
    80% {
        transform:translateY(10px)
    }
    to {
        transform:translateY(0);
        opacity:1
    }
}
.bounceInUp {
    animation-name:bounceInUp
}
@keyframes bounceInDown {
    0% {
        opacity:0;
        transform:translateY(-2000px)
    }
    60% {
        opacity:1;
        transform:translateY(30px)
    }
    80% {
        transform:translateY(-10px)
    }
    to {
        transform:translateY(0);
        opacity:1
    }
}
.bounceInDown {
    animation-name:bounceInDown
}
@keyframes bounceInLeft {
    0% {
        opacity:0;
        transform:translateX(-2000px)
    }
    60% {
        opacity:1;
        transform:translateX(30px)
    }
    80% {
        transform:translateX(-10px)
    }
    to {
        transform:translateX(0);
        opacity:1
    }
}
.bounceInLeft {
    animation-name:bounceInLeft
}
@keyframes bounceInRight {
    0% {
        opacity:0;
        transform:translateX(2000px)
    }
    60% {
        opacity:1;
        transform:translateX(-30px)
    }
    80% {
        transform:translateX(10px)
    }
    to {
        transform:translateX(0);
        opacity:1
    }
}
.bounceInRight {
    animation-name:bounceInRight
}
@keyframes rotateIn {
    0% {
        transform-origin:center center;
        transform:rotate(-200deg);
        opacity:0
    }
    to {
        transform-origin:center center;
        transform:rotate(0);
        opacity:1
    }
}
.rotateIn {
    animation-name:rotateIn
}
@keyframes rotateInUpLeft {
    0% {
        transform-origin:left bottom;
        transform:rotate(90deg);
        opacity:0
    }
    to {
        transform-origin:left bottom;
        transform:rotate(0);
        opacity:1
    }
}
.rotateInUpLeft {
    animation-name:rotateInUpLeft
}
@keyframes rotateInDownLeft {
    0% {
        transform-origin:left bottom;
        transform:rotate(-90deg);
        opacity:0
    }
    to {
        transform-origin:left bottom;
        transform:rotate(0);
        opacity:1
    }
}
.rotateInDownLeft {
    animation-name:rotateInDownLeft
}
@keyframes rotateInUpRight {
    0% {
        transform-origin:right bottom;
        transform:rotate(-90deg);
        opacity:0
    }
    to {
        transform-origin:right bottom;
        transform:rotate(0);
        opacity:1
    }
}
.rotateInUpRight {
    animation-name:rotateInUpRight
}
@keyframes rotateInDownRight {
    0% {
        transform-origin:right bottom;
        transform:rotate(90deg);
        opacity:0
    }
    to {
        transform-origin:right bottom;
        transform:rotate(0);
        opacity:1
    }
}
.rotateInDownRight {
    animation-name:rotateInDownRight
}
@keyframes zoomIn {
    0% {
        opacity:0;
        transform:scale(0.3)
    }
    50% {
        opacity:1
    }
    to {
        opacity:1;
        transform:scale(1)
    }
}
.zoomIn {
    animation-name:zoomIn
}
@keyframes slideInRight {
    0% {
        opacity:1;
        transform:translateX(2000px)
    }
    to {
        opacity:1;
        transform:translateX(0)
    }
}
.slideInRight {
    animation:slideInRight 1s ease;
}
@keyframes slideInUp {
    0% {
        -webkit-transform:translate3d(0,100%,0);
        transform:translate3d(0,100%,0);
        visibility:visible
    }
    to {
        transform:translateZ(0)
    }
}
.slideInUp {
    animation-name:slideInUp
}
@keyframes slideOutLeft {
    0% {
        opacity:1;
        transform:translateX(0)
    }
    to {
        opacity:1;
        transform:translateX(-2000px)
    }
}
.slideOutLeft {
    animation-name:slideOutLeft
}


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

.slideOutRight {
    position: relative;
    animation: slideOutRight 1s;
    animation-fill-mode: both;

}

@keyframes spin {
    0% {
        transform:rotate(0deg)
    }
    to {
        transform:rotate(359deg)
    }
}
@keyframes wave {
    0% {
        transform:rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg)
    }
    to {
        transform:rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg)
    }
}
@keyframes navItemArrow {
    0% {
        position:relative;
        right:-1px
    }
    50% {
        position:relative;
        right:3px
    }
    to {
        position:relative;
        right:-1px
    }
}
@keyframes arrowLeftRight {
    0% {
        transform:translateX(0)
    }
    50% {
        transform:translateX(3px)
    }
    to {
        transform:translateX(0)
    }
}
@keyframes slide-in {
    0% {
        opacity:0;
        transform:translateY(-100%)
    }
    60% {
        opacity:1;
        transform:translateY(20%)
    }
    to {
        opacity:1;
        transform:translateY(0)
    }
}
@keyframes slide-out {
    0% {
        opacity:1;
        transform:translateY(0)
    }
    60% {
        opacity:0;
        transform:translateY(120%)
    }
    to {
        opacity:0;
        transform:translateY(100%)
    }
}
@keyframes maskUp {
    0% {
        transform:translate(0,100%)
    }
    to {
        transform:translate(0,0)
    }
}
.maskUp {
    animation-name:maskUp
}
@keyframes sliderScrollButton {
    0% {
        opacity:1;
        -webkit-transform:translate3d(-50%,0,0);
        transform:translate3d(-50%,0,0)
    }
    70% {
        opacity:1;
        -webkit-transform:translate3d(-50%,10px,0);
        transform:translate3d(-50%,10px,0)
    }
    to {
        opacity:0;
        -webkit-transform:translate3d(-50%,10px,0);
        transform:translate3d(-50%,10px,0)
    }
}
@keyframes gradientTransition {
    0% {
        background-position:0% 50%
    }
    50% {
        background-position:100% 50%
    }
    to {
        background-position:0% 50%
    }
}
@keyframes slideInLeft {
    from {
        right: -10%;
        opacity: 0
    }

    to {
        right: 0;
        opacity: 1
    }
}

.slideInLeft {
    position: relative;
    animation: slideInLeft 1.2s;
    animation-fill-mode: both;

}

@keyframes slideInBottom {
    from {
        top: -300px;
        opacity: 0;
    }

    to {
        top: 45px;
        opacity: 1;
    }
}
.slideInBottom {
    animation: slideInBottom .6s;
    animation-fill-mode: both;
}






@keyframes topDown {
    0% {
        transform:translateY(0)
    }
    50% {
        transform:translateY(-5px)
    }
    to {
        transform:translateY(0)
    }
}
@keyframes flipInX {
    0% {
        transform:perspective(400px) rotate3d(1,0,0,90deg);
        transition-timing-function:ease-in;
        opacity:0
    }
    40% {
        transform:perspective(400px) rotate3d(1,0,0,-20deg);
        transition-timing-function:ease-in
    }
    60% {
        transform:perspective(400px) rotate3d(1,0,0,10deg);
        opacity:1
    }
    80% {
        transform:perspective(400px) rotate3d(1,0,0,-5deg)
    }
    to {
        transform:perspective(400px)
    }
}
.flipInX {
    -webkit-backface-visibility:visible!important;
    backface-visibility:visible!important;
    animation-name:flipInX
}
@keyframes flipInY {
    0% {
        transform:perspective(400px) rotate3d(0,1,0,90deg);
        transition-timing-function:ease-in;
        opacity:0
    }
    40% {
        transform:perspective(400px) rotate3d(0,1,0,-20deg);
        transition-timing-function:ease-in
    }
    60% {
        transform:perspective(400px) rotate3d(0,1,0,10deg);
        opacity:1
    }
    80% {
        transform:perspective(400px) rotate3d(0,1,0,-5deg)
    }
    to {
        transform:perspective(400px)
    }
}
.flipInY {
    -webkit-backface-visibility:visible!important;
    backface-visibility:visible!important;
    animation-name:flipInY
}

.slideDown {
    animation: slideDown 1s forwards;
}
@keyframes slideDown {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(100%);
    }
}