.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease-in-out;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}


.fromBottom {
  opacity: 0;
  transform: translateY(50%);
  transition: all 0.5s ease-in-out 0.25s;
  &.in-viewport {
    opacity: 1;
    transform: translateY(0%);
  }
}

.fromTop {
  opacity: 0;
  transform: translateY(-50%);
  transition: all 0.5s ease-in-out 0.25s;
  &.in-viewport {
    opacity: 1;
    transform: translateY(0%);
  }
}

.easyRevealTop {
  opacity: 0;
  transform: translateY(-5px);
  transition: all 0.5s ease-in-out 0.25s;
  &.in-viewport {
    opacity: 1;
    transform: translateY(0px);
  }
}

.easyRevealBottom {
  opacity: 0;
  transform: translateY(5px);
  transition: all 0.5s ease-in-out 0.25s;
  &.in-viewport {
    opacity: 1;
    transform: translateY(0px);
  }
}

.delay {
  &--025 {
    transition-delay: 0.25s;
  }
  &--050 {
    transition-delay: 0.5s;
  }
  &--070 {
    transition-delay: 0.7s;
  }
  &--090 {
    transition-delay: 0.9s;
  }
  &--100 {
    transition-delay: 1s;
  }
  &--125 {
    transition-delay: 1.25s;
  }
  &--200 {
    transition-delay: 2s;
  }
}