@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes slide-in {
  0% {
    transform: translateY(-80%);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes slide-in-bottom {
  0% {
    transform: translateY(40%);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes slide-out {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-10%);
  }
}

@keyframes height-in {
  0% {
    max-height: 0px;
  }
  100% {
    max-height: 800px;
  }
}
@keyframes height-out {
  0% {
    max-height: 800px;
  }
  100% {
    max-height: 0px;
  }
}

@keyframes translate-in {
  0% {
    transform: translateY(60%);
  }
  100% {
    transform: translateY(100%);
  }
}
@keyframes translate-out {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(60%);
  }
}