@keyframes scrollDown{
  0%{
    transform: translateY(0px);
  }
  
  70%{
  	transform: translateY(10px);
  }

  100%{
    transform: translateY(0px);
  }
}

.scrollDown{
  animation-name: scrollDown;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
}

@keyframes fadeIn{
  0%{
    opacity: 0;
  }

  10%{
  	opacity: 0;
    transform: translateY(30px);
  }

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

.fadeIn.is-visible {
  animation-name: fadeIn;
  animation-duration: 1s;
}

@keyframes fadeInSlow{
  0%{
    opacity: 0;
  }

  10%{
  	opacity: 0;
    transform: translateY(30px);
  }

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

.fadeInSlow.is-visible {
  animation-name: fadeInSlow;
  animation-duration: 1.3s;
}


@keyframes fadeInSlow2{
  0%{
    opacity: 0;
  }

  10%{
  	opacity: 0;
    transform: translateY(50px);
  }

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

.fadeInSlow2.is-visible {
  animation-name: fadeInSlow2;
  animation-duration: 1.2s;
}

@keyframes fadeInSlow3{
  0%{
    opacity: 0;
  }

  10%{
  	opacity: 0;
    transform: translateY(60px);
  }

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

.fadeInSlow3.is-visible {
  animation-name: fadeInSlow3;
  animation-duration: 1.5s;
}

@keyframes fadeInSlow4{
  0%{
    opacity: 0;
  }

  10%{
  	opacity: 0;
    transform: translateY(70px);
  }

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

.fadeInSlow4.is-visible {
  animation-name: fadeInSlow4;
  animation-duration: 1.7s;
}

@keyframes fadeInSlideDown{
  0%{
    opacity: 0;
  }

  10%{
  	opacity: 0;
  	transform: translateY(-20px);
  }

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

.fadeInSlideDown.is-visible {
  animation-name: fadeInSlideDown;
  animation-duration: 1.7s;
}