@keyframes fadeInRight {
  0% {
    transform: translateX(50%);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fadeInLeft {
  0% {
    transform: translateX(-50%);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fadeOutRight {
  0% {
    transform: translateX(0);
    opacity: 1;
  }

  100% {
    transform: translateX(45%);
    opacity: 0;
  }
}

@keyframes fadeOutLeft {
  0% {
    transform: translateX(0);
    opacity: 1;
  }

  100% {
    transform: translateX(-45%);
    opacity: 0;
  }
}

.fadeOutRight,
.fadeOutLeft {
  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}