/* Use with /bootstrap/dist/js/scroll-fadeIn.min.js */

.js-scroll {
  opacity: 0;
  transition: opacity 500ms;
}

.js-in-view {
  opacity: 1;
}

.js-in-view.fade-in {
  animation: fade-in 700ms ease-in-out both;
}

.js-in-view.fade-in-bottom {
  animation: fade-in-bottom 700ms ease-in-out both;
}

.js-in-view.slide-left {
  animation: slide-in-left 700ms ease-in-out both;
}

.js-in-view.slide-right {
  animation: slide-in-right 700ms ease-in-out both;
}

@media (prefers-reduced-motion), (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .js-scroll {
    opacity: 1 !important;
  }

  .js-in-view {
    animation: none !important;
  }
}

@keyframes slide-in-left {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slide-in-right {
  0% {
    transform: translateX(100px);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fade-in-bottom {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}