/* Base */
.cms-animate {
  transition: all 1s ease-in-out;
}

/* ---------------- FADE ---------------- */
.cms-animate.fade-up {
  opacity: 0;
  transform: translateY(100px);
}
.cms-animate.fade-up.show {
  opacity: 1;
  transform: translateY(0);
}

.cms-animate.fade-down {
  opacity: 0;
  transform: translateY(-100px);
}
.cms-animate.fade-down.show {
  opacity: 1;
  transform: translateY(0);
}

.cms-animate.fade-left {
  opacity: 0;
  transform: translateX(-100px);
}
.cms-animate.fade-left.show {
  opacity: 1;
  transform: translateX(0);
}

.cms-animate.fade-right {
  opacity: 0;
  transform: translateX(100px);
}
.cms-animate.fade-right.show {
  opacity: 1;
  transform: translateX(0);
}

/* ---------------- ZOOM ---------------- */
.cms-animate.zoom-in {
  opacity: 0;
  transform: scale(0.8);
}
.cms-animate.zoom-in.show {
  opacity: 1;
  transform: scale(1);
}

.cms-animate.zoom-out {
  opacity: 0;
  transform: scale(1.2);
}
.cms-animate.zoom-out.show {
  opacity: 1;
  transform: scale(1);
}

/* ---------------- FLIP ---------------- */
.cms-animate.flip-left {
  opacity: 0;
  transform: rotateY(90deg);
}
.cms-animate.flip-left.show {
  opacity: 1;
  transform: rotateY(0);
}

.cms-animate.flip-right {
  opacity: 0;
  transform: rotateY(-90deg);
}
.cms-animate.flip-right.show {
  opacity: 1;
  transform: rotateY(0);
}

.cms-animate.flip-up {
  opacity: 0;
  transform: rotateX(90deg);
}
.cms-animate.flip-up.show {
  opacity: 1;
  transform: rotateX(0);
}

.cms-animate.flip-down {
  opacity: 0;
  transform: rotateX(-90deg);
}
.cms-animate.flip-down.show {
  opacity: 1;
  transform: rotateX(0);
}