.fromBottom {
  opacity: 0;
  transform: translateY(20%);
  transition: all 1s ease-in-out;

  &.in-viewport {
    opacity: 1;
    transform: translateY(0%);
  }
}

.fromTop {
  opacity: 0;
  transform: translateY(-20%);
  transition: all 0.5s ease-in-out;

  &.in-viewport {
    opacity: 1;
    transform: translateY(0%);
  }
}

.fromOpacity {
  opacity: 0;

  transition: all 1s ease-in-out;

  &.in-viewport {
    opacity: 1;

  }
}

.fromLeft {
  opacity: 0;
  transform: translateX(-20%);
  transition: all 0.5s ease-in-out;

  &.in-viewport {
    opacity: 1;
    transform: translateX(0%);
  }
}

.fromRight {
  opacity: 0;
  transform: translateX(20%);
  transition: all 0.5s ease-in-out;

  &.in-viewport {
    opacity: 1;
    transform: translateX(0%);
  }
}

.easyRevealTop {
  opacity: 0;
  transform: translateY(-5px);
  transition: all 0.2s ease-in-out 0.1s;

  &.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 {
  &--25 {
    transition-delay: 0.25s;
  }

  &--50 {
    transition-delay: 0.5s;
  }

  &--70 {
    transition-delay: 0.7s;
  }

  &--90 {
    transition-delay: 0.9s;
  }

  &--100 {
    transition-delay: 1s;
  }

  &--125 {
    transition-delay: 1.25s;
  }

  &--200 {
    transition-delay: 2s;
  }
}

// .fade-enter-active
//  {
//   transition: all 0.5s ease;
// }


// .fade-leave-active {
// }

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


.fadeUp-enter-active,
.fadeUp-leave-active {
  transition: all 300ms ease;
}

.fadeUp-enter,
.fadeUp-leave-to {
  transform: translateY(-15px);
  opacity: 0;
}



.fade-enter{
  opacity: 0;
  transform: translateY(20px);
}
.fade-leave-to {
  opacity: 0;
  transform: translateY(20px);
}
.fade-enter-to{
  opacity: 1;
  transform: translateY(0);
}
.fade-leave {
  opacity: 1;
  transform: translateY(0);
}
.fade-enter-active{  
  transition: opacity 250ms ease-in-out 0.5s, transform 250ms ease-out 0.5s;
}
.fade-leave-active{  
  transition: opacity 250ms ease-in-out 0s, transform 250ms ease-out 0.5s;
}