/* Create your own animation by following this code pattern below */
/* Fade Animation */
[data-san=fade] {
  opacity: 0;
  transition-duration: 1s !important;
}

.fade {
  opacity: 1;
}

/* SlideLeft Animation */
[data-san=slideLeft] {
  opacity: 0;
  transform: translateX(150px);
  transition-duration: 1s !important;
  overflow: hidden;
}

.slideLeft {
  opacity: 1;
  transform: translateX(0);
}

/* SlideRight Animation */
[data-san=slideRight] {
  opacity: 0;
  transform: translateX(-80px);
  transition-duration: 1s !important;
  overflow: hidden;
}

.slideRight {
  opacity: 1;
  transform: translateX(0);
}

/* SlideTop Animation */
[data-san=slideTop] {
  opacity: 0;
  transform: translateY(100px);
  transition-duration: 1s !important;
  overflow: hidden;
}

.slideTop {
  opacity: 1;
  transform: translateY(0);
}

/* SlideDown Animation */
[data-san=slideDown] {
  opacity: 0;
  transform: translateY(-100px);
  transition-duration: 1s !important;
  overflow: hidden;
}

.slideDown {
  opacity: 1;
  transform: translateY(0);
}

/* Delay */
[data-san-delay="200"] {
  transition-delay: 0.2s !important;
}

[data-san-delay="400"] {
  transition-delay: 0.4s !important;
}

[data-san-delay="600"] {
  transition-delay: 0.6s !important;
}/*# sourceMappingURL=scroll-animation.css.map */