.hide {
  display: none;
}

/* CLASSES ANIMATIONS */

.fadein {
  animation: fadein 0.3s forwards ease-out;
}
.fadeout {
  animation: fadeout 0.3s forwards ease-out;
}

.leftPanel.moveLeft {
  transform: translateX(-2000%);
}

.rightPanel.moveRight {
  transform: translateX(200%);
}

@media (width < 550px) {
  .leftPanel.moveLeft {
    transform: translateX(-230%);
  }

  .rightPanel.moveRight {
    transform: translateX(230%);
  }
}

/* keyframes */
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}