.switch-enter-active,
.switch-leave-active {
  transition: all 0.25s ease-out;
}

.switch-enter-from {
  opacity: 0;
  transform: translateY(100%);
}

.switch-leave-to {
  opacity: 0;
  transform: translateY(-100%);
}

.list {
  transition: all 1s ease-in-out !important;
}
.list-enter,
.list-leave-to {
  opacity: 0;
  transform: translateY(100%);
}
.list-enter-active,
.list-leave-active {
  transition: all 1s ease-in-out !important;
}

.list-hor-enter-active,
.list-hor-leave-active,
.list-hor-move {
  transition: 1s ease-in-out !important;
}
.list-hor-enter-from,
.list-hor-leave-to {
  opacity: 0;
}
.list-hor-enter-from {
  transform: translateX(100%);
}
.list-hor-leave-to {
  transform: translateX(-100%);
}
.list-hor-leave-active {
  position: absolute;
}

.list2-enter-active,
.list2-leave-active,
.list2-move {
  transition: 1s ease-in-out !important;
  transform-origin: center top;
}

.list2-enter {
  opacity: 0;
  transform: translateY(50%);
}

.list2-enter-to {
  opacity: 1;
  transform: translateY(0);
}

.list2-leave-active {
  position: absolute;
  width: 100%;
}

.list2-leave-to {
  opacity: 0;
  transform: translateY(0);
}

.fade-enter-active,
.fade-leave-active,
.fade-move {
  position: absolute;
  transition: 0.6s cubic-bezier(0.59, 0.12, 0.34, 0.95);
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.fade-enter-to,
.fade-leave {
  opacity: 1;
}

.slide-sm-enter-active,
.slide-sm-leave-active,
.slide-sm-move {
  transition: 1s cubic-bezier(0.59, 0.12, 0.34, 0.95);
}
.slide-sm-enter,
.slide-sm-leave-to {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}
.slide-sm-enter-to,
.slide-sm-leave {
  opacity: 1;
  max-height: 5rem;
  overflow: hidden;
}

.toggle-enter-active,
.toggle-leave-active {
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

.toggle-enter-from {
  position: absolute;
  transform: translateY(100%);
  opacity: 0;
}

.toggle-leave-to {
  transform: translateY(-100%);
  opacity: 0;
}

.slide-enter-active,
.slide-leave-active,
.slide-move {
  transition: 1s cubic-bezier(0.59, 0.12, 0.34, 0.95);
}
.slide-enter,
.slide-leave-to {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}
.slide-enter-to,
.slide-leave {
  opacity: 1;
  max-height: 25rem;
  overflow: hidden;
}

.slide-fast-enter-active,
.slide-fast-leave-active,
.slide-fast-move {
  transition: 0.5s ease-in-out;
}
.slide-fast-enter,
.slide-fast-leave-to {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}
.slide-fast-enter-to,
.slide-fast-leave {
  opacity: 1;
  max-height: 25rem;
  overflow: hidden;
}

.slide-hor-enter-active,
.slide-hor-leave-active,
.slide-hor-move {
  transition: 0.6s ease-in-out;
}
.slide-hor-enter,
.slide-hor-leave-to {
  opacity: 0;
  max-width: 0;
  overflow: hidden;
}
.slide-hor-enter-to,
.slide-hor-leave {
  opacity: 1;
  max-width: 30rem;
  overflow: hidden;
}

.slide-hor-18-enter-active,
.slide-hor-18-leave-active,
.slide-hor-18-move {
  transition: 0.6s ease-in-out;
}
.slide-hor-18-enter,
.slide-hor-18-leave-to {
  opacity: 0;
  max-width: 0;
  overflow: hidden;
}
.slide-hor-18-enter-to,
.slide-hor-18-leave {
  opacity: 1;
  max-width: 20rem;
  overflow: hidden;
}

/* Slide vertical */

.slide-ver-enter-active,
.slide-ver-leave-active,
.slide-ver-move {
  transition: 1s ease-in-out;
}
.slide-ver-enter,
.slide-ver-leave-to {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}
.slide-ver-enter-to,
.slide-ver-leave {
  opacity: 1;
  max-height: 40rem;
  overflow: hidden;
}

/* Slide vertical with height */

.slide-ver-enter-to.h-10rem,
.slide-ver-leave.h-10rem {
  max-height: 10rem !important;
}

/* Slide horizontal and vertical */

.slide-hor-ver-enter-active,
.slide-hor-ver-leave-active,
.slide-hor-ver-move {
  transition: 1s ease-in-out;
}
.slide-hor-ver-enter,
.slide-hor-ver-leave-to {
  opacity: 0;
  max-width: 0;
  max-height: 0;
  overflow: hidden;
}
.slide-hor-ver-enter-to,
.slide-hor-ver-leave {
  opacity: 1;
  max-width: 40rem;
  max-height: 40rem;
  overflow: hidden;
}

.slide-hor-key-enter-active,
.slide-hor-key-leave-active,
.slide-hor-key-move {
  transition: 0.6s ease-in-out;
}
.slide-hor-key-enter,
.slide-hor-key-leave-to {
  position: absolute;
  opacity: 0;
  max-width: 0;
  overflow: hidden;
}
.slide-hor-key-enter-to,
.slide-hor-key-leave {
  opacity: 1;
  max-width: 20rem;
  overflow: hidden;
}

.slide2-enter-active,
.slide2-leave-active,
.slide2-move {
  transition: 0.6s ease-in-out;
}
.slide2-enter,
.slide2-leave-to {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}
.slide2-enter-to,
.slide2-leave {
  opacity: 1;
  max-height: 25rem;
  overflow: hidden;
}

.slide3-enter-active,
.slide3-leave-active,
.slide3-move {
  transition: 1s ease-in-out;
}
.slide3-enter,
.slide3-leave-to {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}
.slide3-enter-to,
.slide3-leave {
  opacity: 1;
  max-height: 30rem;
  overflow: hidden;
}

.slide4-enter-active,
.slide4-leave-active,
.slide4-move {
  transition: 0.3s ease-in-out;
}
.slide4-enter,
.slide4-leave-to {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}
.slide4-enter-to,
.slide4-leave {
  opacity: 1;
  max-height: 5rem;
  overflow: hidden;
}

.slide-large-enter-active,
.slide-large-leave-active,
.slide-large-move {
  transition: 1.5s cubic-bezier(0.59, 0.12, 0.34, 0.95);
}
.slide-large-enter,
.slide-large-leave-to {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}
.slide-large-enter-to,
.slide-large-leave {
  opacity: 1;
  max-height: 100vh;
  overflow: hidden;
}

.fade {
  animation: fade 1s cubic-bezier(0.59, 0.12, 0.34, 0.95);
}

@keyframes fade {
  0% {
    opacity: 0;
    transform: translateY(50%);
  }
  100% {
    opacity: 1;
  }
}

@keyframes slide-in-y {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}