.page_anim_start {
  -webkit-animation: fade-in 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: fade-in 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.page_anim_end {
  -webkit-animation: fade-out 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: fade-out 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
/* ==========================================================================
Slider Animation - Start
========================================================================== */

.slider_anim_screen_a {
  -webkit-animation: slide-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 400ms
    both;
  animation: slide-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 400ms both;
}

.slider_anim_screen_b {
  -webkit-animation: slide-top 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 600ms
    both;
  animation: slide-top 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 600ms both;
}

.slider_anim_screen_c {
  -webkit-animation: fade-in 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1s both;
  animation: fade-in 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1s both;
}
.slider_anim_screen_ar {
  -webkit-animation: slide-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 400ms
    both;
  animation: slide-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 400ms both;
}
.slider_anim_headtext {
  -webkit-animation: slider-txt 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 200ms
    both;
  animation: slider-txt 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 200ms both;
}
.slider_anim_subtext {
  -webkit-animation: slider-txt 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slider-txt 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.slider_anim_btn {
  -webkit-animation: fade-in 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 300ms
    both;
  animation: fade-in 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 300ms both;
}
/**
 * ----------------------------------------
 * animation slide-left
 * ----------------------------------------
 */

@-webkit-keyframes slide-right {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes slide-right {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@-webkit-keyframes slide-left {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100px);
    transform: translateX(100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes slide-left {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100px);
    transform: translateX(100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

/**
 * ----------------------------------------
 * animation slide-top
 * ----------------------------------------
 */
@-webkit-keyframes slide-top {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes slide-top {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

/**
 * ----------------------------------------
 * animation fade-in
 * ----------------------------------------
 */
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation fade-out
 * ----------------------------------------
 */
@-webkit-keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/**
 * ----------------------------------------
 * animation fade-in
 * ----------------------------------------
 */
@-webkit-keyframes slider-txt {
  0% {
    opacity: 0;
    -webkit-transform: translateY(30px);
    -moz-transform: translateY(30px);
    -ms-transform: translateY(30px);
    -o-transform: translateY(30px);
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes slider-txt {
  0% {
    opacity: 0;
    -webkit-transform: translateY(30px);
    -moz-transform: translateY(30px);
    -ms-transform: translateY(30px);
    -o-transform: translateY(30px);
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
}

/* ==========================================================================
Slider Animation - End
========================================================================== */
/* ==========================================================================
Text Animation - Start
========================================================================== */
.text_anim {
  opacity: 0;
  -webkit-transform: translateY(30px);
  -moz-transform: translateY(30px);
  -ms-transform: translateY(30px);
  -o-transform: translateY(30px);
  transform: translateY(30px);
}

.active_text_animation.text_anim {
  transition: all 800ms;
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
/* ==========================================================================
Text Animation - End
========================================================================== */

/* ==========================================================================
Layer Animation - Start
========================================================================== */

.image-layer-img {
  opacity: 0;
  transition: all 800ms;
  -webkit-transform: translateY(30px);
  -moz-transform: translateY(30px);
  -ms-transform: translateY(30px);
  -o-transform: translateY(30px);
  transform: translateY(30px);
}

.active_animation.image-layer-img {
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}

/* ==========================================================================
Layer Animation - Start
========================================================================== */

/* ==========================================================================
Layer Animation - Start
========================================================================== */

.card-anim {
  opacity: 0;
  transition: transform 800ms;
  -webkit-transform: translateY(30px);
  -moz-transform: translateY(30px);
  -ms-transform: translateY(30px);
  -o-transform: translateY(30px);
  transform: translateY(30px);
}

.active_card_animation.card-anim {
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}

/* ==========================================================================
Layer Animation - Start
========================================================================== */

/* ==========================================================================
Layer Animation - Start
========================================================================== */

.post-anim {
  opacity: 0;
  transition: all 800ms;
  -webkit-transform: translateY(30px);
  -moz-transform: translateY(30px);
  -ms-transform: translateY(30px);
  -o-transform: translateY(30px);
  transform: translateY(30px);
}

.active_post_animation.post-anim {
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}

/* ==========================================================================
Layer Animation - End
========================================================================== */
/* ==========================================================================
Button Animation - Start
========================================================================== */

.button-anim {
  opacity: 0;
  transition: transform 800ms;
  -webkit-transform: translateY(30px);
  -moz-transform: translateY(30px);
  -ms-transform: translateY(30px);
  -o-transform: translateY(30px);
  transform: translateY(30px);
}

.active_button_animation.button-anim {
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}

/* ==========================================================================
Button Animation - End
========================================================================== */
/* ==========================================================================
Price Animation - Start
========================================================================== */

.price-anim {
  opacity: 0;
  transition: transform 800ms;
  -webkit-transform: translateY(30px);
  -moz-transform: translateY(30px);
  -ms-transform: translateY(30px);
  -o-transform: translateY(30px);
  transform: translateY(30px);
}

.active_price_animation.price-anim {
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}

/* ==========================================================================
Price Animation - End
========================================================================== */