/* Animações base */
.animar-esquerda,
.animar-direita,
.animar-baixo,
.animar-cima,
.animar {
  opacity: 0;
  transition: all 0.7s ease-out;
}

/* Direções diferentes */
.animar-esquerda {
  transform: translateX(-4vw);
}
.animar-direita {
  /* transform: translateX(150px); */
  transform: translateX(4vw); /*com essa vw ele nao quebra no mobile*/
}

.animar-direita.esferas{  /*tela do esferas quebra na versao mobile se tiver 4vw*/
    transform: translateX(1vw) !important;
}

.animar-baixo {
  transform: translateY(4vw);
}

.animar-cima {
  transform: translateY(-4vw);
}

/* Classe que será adicionada via JS */
.aparecer {
  opacity: 1;
  transform: translate(0, 0);
}




@keyframes destaque {
  0% {
    text-decoration: underline #b22f317e;
  }
  50% {
    text-decoration: underline #B22F31;
  }
  100% {
    text-decoration: underline #b22f317e;
  }
}

.destacar {
  animation: destaque 2s ease-in-out;
}