/* See the javascipt file for intrsuctions */
/* Just apply like this  .scrolled.slide-left */

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

  .js-scroll.scrolled {
	opacity: 1;
  }

  .scrolled.fade-in {
	animation: fade-in 1s ease-in-out both;
  }
   
  .scrolled.fade-in-bottom {
	animation: fade-in-bottom 1s ease-in-out both;
  }
   
  .scrolled.slide-left {
	animation: slide-in-left 1s ease-in-out both;
  }
   
  .scrolled.slide-right {
	animation: slide-in-right 1s ease-in-out both;
  }

 

  .scrolled.delay-elements-slide-left *:nth-child(1) {
	animation: slide-in-left 1s ease-in-out both;
  }

  .scrolled.delay-elements-slide-left *:nth-child(2) {
	animation: slide-in-left 1s ease-in-out both;
    animation-delay: .2s;
  }

  .scrolled.delay-elements-slide-left *:nth-child(3) {
	animation: slide-in-left 1s ease-in-out both;
    animation-delay: .3s;
  }

  .scrolled.delay-elements-slide-left *:nth-child(4) {
	animation: slide-in-left 1s ease-in-out both;
    animation-delay: .4s;
  }

  .scrolled.delay-elements-slide-left *:nth-child(5) {
	animation: slide-in-left 1s ease-in-out both;
    animation-delay: .5s;
  }

  .scrolled.delay-elements-slide-left *:nth-child(6) {
	animation: slide-in-left 1s ease-in-out both;
    animation-delay: .6s;
  }

  .scrolled.delay-elements-slide-left *:nth-child(7) {
	animation: slide-in-left 1s ease-in-out both;
    animation-delay: .7s;
  }

  .scrolled.delay-elements-slide-left *:nth-child(8) {
	animation: slide-in-left 1s ease-in-out both;
    animation-delay: .8s;
  }

  .scrolled.delay-elements-slide-left *:nth-child(9) {
	animation: slide-in-left 1s ease-in-out both;
    animation-delay: .9s;
  }


  .scrolled.delay-elements-slide-left *:nth-child(10) {
	animation: slide-in-left 1s ease-in-out both;
    animation-delay: .10s;
  }


  .scrolled.delay-elements-slide-left *:nth-child(11) {
	animation: slide-in-left 1s ease-in-out both;
    animation-delay: .11s;
  }



   
  @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;
	}
  }