@keyframes up {
  from {
    opacity: 0;
    transform: translateY(35px)
  }
  to {
    opacity: 1;
    transform: translateY(0)
  } 
}

.animate-up {
  transform: translateY(35px);
  opacity: 0;

  animation: up 200ms forwards;
}

@keyframes pop {
  from {
    opacity: 0;
    transform: scale(0);

  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}


.animate-pop {
  transform: scale(0);
  opacity: 0;

  animation: pop 300ms forwards;
}

.reverse {
  animation-direction: reverse;
}

.back {
  animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.delay-1 {
  animation-delay: 100ms;
}

.delay-2 {
  animation-delay: 200ms;
}