/* =====================================================
   ANIMACIONES BASE
===================================================== */

[data-animate] {

  opacity: 0;

  transition:

    opacity 0.8s ease,
    transform 0.8s cubic-bezier(
      0.16,
      1,
      0.3,
      1
    );

}



/* FADE UP */

[data-animate="fade-up"] {

  transform:
    translateY(30px);

}



/* FADE LEFT */

[data-animate="fade-left"] {

  transform:
    translateX(-40px);

}



/* FADE RIGHT */

[data-animate="fade-right"] {

  transform:
    translateX(40px);

}



/* ACTIVO */

[data-animate].is-visible {

  opacity: 1;

  transform:
    translate3d(0, 0, 0);

}