[data-appear-animation],.appear-animation {
    opacity: 0
}

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

.appear-animation-visible {
    opacity: 1
}

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

    25%,75% {
        opacity: 0
    }
}

.flash {
    animation-name: flash
}

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

    10%,30%,50%,70%,90% {
        transform: translateX(-10px)
    }

    20%,40%,60%,80% {
        transform: translateX(10px)
    }
}

.shake {
    animation-name: shake
}

@keyframes bounce {
    0%,20%,50%,80%,100% {
        transform: translateY(0);
        opacity: 1
    }

    40% {
        transform: translateY(-30px)
    }

    60% {
        transform: translateY(-15px)
    }
}

.bounce {
    animation-name: bounce
}

@keyframes tada {
    0% {
        transform: scale(1)
    }

    10%,20% {
        transform: scale(.9) rotate(-3deg)
    }

    30%,50%,70%,90% {
        transform: scale(1.1) rotate(3deg)
    }

    40%,60%,80% {
        transform: scale(1.1) rotate(-3deg)
    }

    100% {
        transform: scale(1) rotate(0);
        opacity: 1
    }
}

.tada {
    animation-name: tada
}

@keyframes swing {
    20% {
        transform: rotate(15deg)
    }

    40% {
        transform: rotate(-10deg)
    }

    60% {
        transform: rotate(5deg)
    }

    80% {
        transform: rotate(-5deg)
    }

    100% {
        transform: rotate(0deg);
        opacity: 1
    }
}

.swing {
    transform-origin: top center;
    animation-name: swing
}

@keyframes wobble {
    0% {
        transform: translateX(0%)
    }

    15% {
        transform: translateX(-25%) rotate(-5deg)
    }

    30% {
        transform: translateX(20%) rotate(3deg)
    }

    45% {
        transform: translateX(-15%) rotate(-3deg)
    }

    60% {
        transform: translateX(10%) rotate(2deg)
    }

    75% {
        transform: translateX(-5%) rotate(-1deg)
    }

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

.wobble {
    animation-name: wobble
}

@keyframes wiggle {
    0% {
        transform: skewX(9deg)
    }

    10% {
        transform: skewX(-8deg)
    }

    20% {
        transform: skewX(7deg)
    }

    30% {
        transform: skewX(-6deg)
    }

    40% {
        transform: skewX(5deg)
    }

    50% {
        transform: skewX(-4deg)
    }

    60% {
        transform: skewX(3deg)
    }

    70% {
        transform: skewX(-2deg)
    }

    80% {
        transform: skewX(1deg)
    }

    90% {
        transform: skewX(0deg)
    }

    100% {
        transform: skewX(0deg);
        opacity: 1
    }
}

.wiggle {
    animation-name: wiggle;
    animation-timing-function: ease-in
}

@keyframes pulse {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.1)
    }

    100% {
        transform: scale(1);
        opacity: 1
    }
}

.pulse {
    animation-name: pulse
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

.fadeIn {
    animation-name: fadeIn
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

.fadeInUp {
    animation-name: fadeInUp
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-30px)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

.fadeInDown {
    animation-name: fadeInDown
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-40px)
    }

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

.fadeInLeft {
    animation-name: fadeInLeft
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(40px)
    }

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

.fadeInRight {
    animation-name: fadeInRight
}

@keyframes fadeInUpBig {
    0% {
        opacity: 0;
        transform: translateY(2000px)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

.fadeInUpBig {
    animation-name: fadeInUpBig
}

@keyframes fadeInDownBig {
    0% {
        opacity: 0;
        transform: translateY(-2000px)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

.fadeInDownBig {
    animation-name: fadeInDownBig
}

@keyframes fadeInLeftBig {
    0% {
        opacity: 0;
        transform: translateX(-2000px)
    }

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

.fadeInLeftBig {
    animation-name: fadeInLeftBig
}

@keyframes fadeInRightBig {
    0% {
        opacity: 0;
        transform: translateX(2000px)
    }

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

.fadeInRightBig {
    animation-name: fadeInRightBig
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(.3)
    }

    50% {
        opacity: 1;
        transform: scale(1.05)
    }

    70% {
        transform: scale(.9)
    }

    100% {
        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)
    }

    100% {
        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)
    }

    100% {
        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)
    }

    100% {
        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)
    }

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

.bounceInRight {
    animation-name: bounceInRight
}

@keyframes rotateIn {
    0% {
        transform-origin: center center;
        transform: rotate(-200deg);
        opacity: 0
    }

    100% {
        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
    }

    100% {
        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
    }

    100% {
        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
    }

    100% {
        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
    }

    100% {
        transform-origin: right bottom;
        transform: rotate(0);
        opacity: 1
    }
}

.rotateInDownRight {
    animation-name: rotateInDownRight
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale(.3)
    }

    50% {
        opacity: 1
    }

    100% {
        opacity: 1;
        transform: scale(1)
    }
}

.zoomIn {
    animation-name: zoomIn
}

@keyframes slideInRight {
    0% {
        opacity: 1;
        transform: translateX(2000px)
    }

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

.slideInRight {
    animation-name: slideInRight
}

@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)
    }

    100% {
        opacity: 1;
        transform: translateX(-2000px)
    }
}

.slideOutLeft {
    animation-name: slideOutLeft
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(359deg)
    }
}

@keyframes wave {
    0% {
        transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg)
    }

    100% {
        transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg)
    }
}

@keyframes navItemArrow {
    0% {
        position: relative;
        right: -1px
    }

    50% {
        position: relative;
        right: 3px
    }

    100% {
        position: relative;
        right: -1px
    }
}

@keyframes arrowLeftRight {
    0% {
        transform: translateX(0)
    }

    50% {
        transform: translateX(3px)
    }

    100% {
        transform: translateX(0)
    }
}

@keyframes slide-in {
    0% {
        opacity: 0;
        transform: translateY(-100%)
    }

    60% {
        opacity: 1;
        transform: translateY(20%)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes slide-out {
    0% {
        opacity: 1;
        transform: translateY(0)
    }

    60% {
        opacity: 0;
        transform: translateY(120%)
    }

    100% {
        opacity: 0;
        transform: translateY(100%)
    }
}

@keyframes maskUp {
    from {
        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)
    }

    100% {
        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%
    }

    100% {
        background-position: 0% 50%
    }
}

@keyframes slideInLeft {
    0% {
        transform: translateX(-101%);
        visibility: visible
    }

    100% {
        transform: translateX(0)
    }
}

.slideInLeft {
    animation-name: slideInLeft
}

@keyframes topDown {
    0% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-5px)
    }

    100% {
        transform: translateY(0)
    }
}
@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  100% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

@keyframes flip {
  0% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  100% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

.animated.flip {
  -webkit-backface-visibility: visible;
  -ms-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}
@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)
    }

    100% {
        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)
    }

    100% {
        transform: perspective(400px)
    }
}

.flipInY {
    -webkit-backface-visibility: visible!important;
    backface-visibility: visible!important;
    animation-name: flipInY
}
@keyframes lightSpeedIn {
  0% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    -ms-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: translateX(-20%) skewX(30deg);
    -ms-transform: translateX(-20%) skewX(30deg);
    transform: translateX(-20%) skewX(30deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: translateX(0%) skewX(-15deg);
    -ms-transform: translateX(0%) skewX(-15deg);
    transform: translateX(0%) skewX(-15deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    -ms-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
}

.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}