.anim-opacity {
  opacity: 0;
  transition: all 0.75s ease-in-out !important;
}
.anim-opacity.in-viewport {
  opacity: 1;
}

.anim-from-bottom {
  opacity: 0;
  transform: translateY(35px);
  transition: all 1s ease-in-out !important;
}
.anim-from-bottom.in-viewport {
  opacity: 1;
  transform: translateY(0);
}

.anim-from-top {
  opacity: 0;
  transform: translateY(-35px);
  transition: all 0.75s ease-in-out !important;
}
.anim-from-top.in-viewport {
  opacity: 1;
  transform: translateY(0);
}

.anim-from-left {
  opacity: 0;
  transform: translateX(-35px);
  transition: all 0.5s ease-in-out !important;
}
.anim-from-left.in-viewport {
  opacity: 1;
  transform: translateX(0);
}

.anim-from-right {
  opacity: 0;
  transform: translateX(35px);
  transition: all 0.5s ease-in-out !important;
}
.anim-from-right.in-viewport {
  opacity: 1;
  transform: translateX(0);
}

.delay-02 {
  transition-delay: 0.2s !important;
}
.delay-04 {
  transition-delay: 0.4s !important;
}
.delay-06 {
  transition-delay: 0.6s !important;
}