/* ------------------------------------------------------------------------- */
/*
 * Custom Animations
 *
 * `custom-animation-fade`
 * `custom-animation-scale-up`
 * `custom-animation-scale-down`
 * `custom-animation-slide-top`
 * `custom-animation-slide-bottom`
 * `custom-animation-slide-left`
 * `custom-animation-slide-right`
 *
 ---------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
.custom-animation-fade,
.custom-animation-scale-up,
.custom-animation-slide-top,
.custom-animation-slide-bottom,
.custom-animation-slide-left,
.custom-animation-slide-right {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
/*
 * Fade
 */
.custom-animation-fade {
  -webkit-animation-name: custom-fade;
  animation-name: custom-fade;
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}
/*
 * Scale Up, Scale Down
 */
.custom-animation-scale-up {
  -webkit-animation-name: custom-scale-up;
  animation-name: custom-scale-up;
}
.custom-animation-scale-down {
  -webkit-animation-name: custom-scale-down;
  animation-name: custom-scale-down;
}
/*
 * Slide Top, Slide Bottom, Slide Left, Slide Right
 */
.custom-animation-slide-top {
  -webkit-animation-name: custom-slide-top;
  animation-name: custom-slide-top;
}
.custom-animation-slide-bottom {
  -webkit-animation-name: custom-slide-bottom;
  animation-name: custom-slide-bottom;
}
.custom-animation-slide-left {
  -webkit-animation-name: custom-slide-left;
  animation-name: custom-slide-left;
}
.custom-animation-slide-right {
  -webkit-animation-name: custom-slide-right;
  animation-name: custom-slide-right;
}
/* Keyframes
 ---------------------------------------------------------------------------- */
/*
 * Fade
 */
@-webkit-keyframes custom-fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes custom-fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*
 * Scale Up
 */
@-webkit-keyframes custom-scale-up {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.2);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
}
@keyframes custom-scale-up {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
/*
 * Scale Down
 */
@-webkit-keyframes custom-scale-down {
  0% {
    opacity: 0;
    -webkit-transform: scale(1.8);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
}
@keyframes custom-scale-down {
  0% {
    opacity: 0;
    transform: scale(1.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
/*
 * Slide Top
 */
@-webkit-keyframes custom-slide-top {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@keyframes custom-slide-top {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/*
 * Slide Bottom
 */
@-webkit-keyframes custom-slide-bottom {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@keyframes custom-slide-bottom {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/*
 * Slide Left
 */
@-webkit-keyframes custom-slide-left {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}
@keyframes custom-slide-left {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
/*
 * Slide Right
 */
@-webkit-keyframes custom-slide-right {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}
@keyframes custom-slide-right {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}