@keyframes slideInFromLeft {
    from {
      transform: translateX(-100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
@keyframes slideInFromRight {
    from {
      transform: translateX(100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
.slideleft, .slideright {
    opacity: 0; /* Inicie os elementos como invisíveis */
  }


/* @keyframes slideInFromLeft {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(0);
    }
  }
  
@keyframes slideInFromRight {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(0);
    }
  } */



/* Definição da animação de fade in */
/* @keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
} */

/* Aplicando a animação de fade in em telas menores para slideleft e slideright */
/* @media (max-width: 768px) {
  .slideleft, .slideright {
    animation-name: fadeIn;
    animation-duration: 1.3s;
    animation-fill-mode: both;
  }
} */