/* Animations Vars. */
.anim-fade {
  position: relative;
  opacity: 0 !important;
  transition: all 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.anim-fade.anim-trigger {
  opacity: 1 !important;
}

/* Generic movement*/
.anim-fade__up:not(.transform) {
  bottom: -200px;
}
.anim-fade__up:not(.transform).anim-trigger {
  bottom: 0;
}

.anim-fade__left:not(.transform) {
  left: 30px;
}
.anim-fade__left:not(.transform).anim-trigger {
  left: 0;
}

.anim-fade__right:not(.transform) {
  left: -60px;
}
.anim-fade__right:not(.transform).anim-trigger {
  left: 0;
}

/* Movement using transforms*/
.anim-fade__up.transform {
  transform: translateY(200px);
}
.anim-fade__up.transform.anim-trigger {
  transform: translateY(0);
}

.anim-fade__left.transform {
  transform: translateX(30px);
}
.anim-fade__left.transform.anim-trigger {
  transform: translateX(0);
}

.anim-fade__right.transform {
  transform: translateX(-60px);
}
.anim-fade__right.transform.anim-trigger {
  transform: translateX(0);
}