body{
  overflow-x: hidden;
}

/* ANIMATE ON SCROLL */
.animate{
  opacity: 0;
  filter: blur(5px);
  transform: translateY(50%);
  overflow-x: hidden;
  transition: all .5s;
  overflow: hidden;
}
.animate.slide-left{
  transform: translateX(-400%);
}
.animate.slide-right{
  transform: translateX(400%);
}
.animate.slide-up{
  transform: translateY(-200%);
}
.animate.slide-down{
  transform: translateY(50%);
}



/* Zoom */
.animate.zoom{
  transform: scale(0.2);
}
.animate.zoom-left{
  transform: scale(0.2) translateX(-400%);
}
.animate.zoom-right{
  transform: scale(0.2) translateX(400%);
}
.animate.zoom-up{
  transform: scale(0.2) translateY(-400%);
}
.animate.zoom-down{
  transform: scale(0.2) translateY(200%);
}

/* spin */
.animate.spin-right{
  transform: rotate(-200deg);
}
.animate.spin-left{
  transform: rotate(200deg);
}
.animate.spin-down{
  transform: rotate(200deg) translateY(-80%);
}
.animate.spin-up{
  transform: rotate(200deg) translateY(100%);
}
.animate.spin-down-left{
  transform: rotate(200deg) translateX(300%);
}
.animate.spin-down-right{
  transform: rotate(200deg) translateX(-100%);
}
.animate.spin-up-left{
  transform: rotate(200deg) translateX(100%) translateY(10%);
}
.animate.spin-up-right{
  transform: rotate(200deg) translateX(-100%) translateY(100%);
}
.animate.spin-zoom{
  transform: rotate(200deg) scale(0.2) translateX(-100%) translateY(100%);
}


/* Fade */
.animate.fade-left{
  filter: opacity(100px);
  transform: translateX(-100%);
  transition: all 1s;
}
.animate.fade-right{
  filter: opacity(100px);
  transform: translateX(100%);
  transition: all 1s;
}
.animate.fade-up{
  filter: opacity(100px);
  transform: translateY(-100%);
}
.animate.fade-up-left{
  filter: opacity(100px);
  transform: translateY(-100%) translateX(-100%);
}
.animate.fade-up-right{
  filter: opacity(100px);
  transform: translateY(-100%) translateX(100%);
}
.animate.fade-down{
  filter: opacity(100px);
  transform: translateY(100%);
}
.animate.fade-down-left{
  filter: opacity(100px);
  transform: translateY(100%) translateX(-100%);
}
.animate.fade-down-right{
  filter: opacity(100px);
  transform: translateY(100%) translateX(100%);
}
.animate.fade-down{
  filter: opacity(100px);
  transform: translateY(100%) translateX(100%);
}
.animate.fade-zoom{
  filter: opacity(100px);
  transform:  scale(0.2);
}
.animate.fade-zoom-left{
  filter: opacity(100px);
  transform:  scale(0.2) translateX(-100%);
}
.animate.fade-zoom-right{
  filter: opacity(100px);
  transform:  scale(0.2) translateX(100%);
}
.animate.fade-zoom-up-right{
  filter: opacity(100px);
  transform:  scale(0.2) translateY(-100%) translateX(100%);
}
.animate.fade-zoom-up-left{
  filter: opacity(100px);
  transform:  scale(0.2) translateY(-100%) translateX(-100%);
}
.animate.fade-zoom-down-left{
  filter: opacity(100px);
  transform:  scale(0.2) translateY(100%) translateX(-100%);
}
.animate.fade-zoom-down-right{
  filter: opacity(100px);
  transform:  scale(0.2) translateY(100%) translateX(100%);
}
.animate.fade-spin-left{
  transform: rotate(-200deg);
  filter: opacity(100px);
}
.animate.fade-spin-right{
  transform: rotate(200deg);
  filter: opacity(100px);
}


/* Blur */
.animate.blur{
  filter: blur(100px);
}
.animate.blur-spin-right{
  transform: rotate(200deg);
  filter: opacity(100px) blur(100px);
}
.animate.blur-spin-left{
  transform: rotate(-200deg);
  filter: opacity(100px) blur(100px);
}
.animate.blur-zoom{
  transform:  scale(0.2) translateY(-100%) translateX(-100%);
  filter: opacity(100px) blur(100px);
  transition: all 1s;
}


/* Animation delay */
.delay-1{
  transition-delay: 200ms;
}
.delay-2{
  transition-delay: 400ms;
}
.delay-3{
  transition-delay: 600ms;
}
.delay-4{
  transition-delay: 800ms;
}
.delay-5{
  transition-delay: 1000ms;
}
.delay-6{
  transition-delay: 1200ms;
}



/* Show active */
.animate.show{
  filter: opacity(0);
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1) translateX(0) rotate(0);
}