.page-enter-active,
.page-leave-active {
  transition: opacity 200ms;
}
.page-enter,
.page-leave-active {
  opacity: 0;
}

.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 3s ease-in-out;
  &.in-viewport {
    opacity: 1;
  }
}
.fromOpacity2 {
  opacity: 0;
  transition: all 0.4s ease-in-out;
  &.in-viewport {
    opacity: 1;
  }
}

.bigger {
  transform: scale(0.5);
  transition: transform 0.7s ease-in-out;

  &.in-viewport {
    transform: scale(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(0px);
  opacity: 0;
}
.fade-enter {
  opacity: 0;
  transform: translateY(0px);
}
.fade-leave-to {
  opacity: 0;
  transform: translateY(0px);
}
.fade-enter-to {
  opacity: 1;
  transform: translateY(0);
}
.fade-leave {
  opacity: 1;
  transform: translateY(0);
}
.fade-enter-active {
  transition: opacity 250ms ease-in-out 0s, transform 250ms ease-out 0.5s;
}
.fade-leave-active {
  transition: opacity 250ms ease-in-out 0s, transform 250ms ease-out 0.5s;
}
.slide-enter-active,
.slide-leave-active {
  transition: all 300ms ease-in;
}
.slide-enter,
.slide-leave-to {
  transform: translateY(0px);
  opacity: 0;
}
// .fade-enter {
//   opacity: 0;
//   transform: translateY(0px);
// }
// .fade-leave-to {
//   opacity: 0;
//   transform: translateY(0px);
// }
// .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;
// }
.flip-list-enter-active {
  transform: translateY(0%);
  transition: all 0.25s ease-in-out 0.25s;
}
.flip-list-leave-active {
  transform: translateY(0%);
  transition: all 0.25s ease-in-out 0s;
}
.flip-list-enter,
.flip-list-leave-to {
  transform: translateY(-10px);
  opacity: 0;
}