[data-aos^=fade][data-aos^=fade] {
  opacity: 0;
  transition-property: opacity, transform
}

[data-aos^=fade][data-aos^=fade].aos-animate {
  opacity: 1;
  transform: translateZ(0)
}

[data-aos=fade-foot] {
  transform: translate3d(0, 20px, 0);
  transition-duration: 0.8s;
  transition-delay: 0s;
}

[data-aos=fade-left]{
  transform:translate3d(100px,0,0);
  transition-duration: 0.8s;
  transition-delay: 0s;
}

[data-aos=fade-right]{
  transform:translate3d(-100px,0,0);
  transition-duration: 0.5s;
  transition-delay: .1s;
}

[data-aos=fade-up] {
  transform: translate3d(0, 20px, 0);
  transition-duration: 0.5s;
  transition-delay: .2s;
}

[data-aos=fade-50] {
  transform: translate3d(0, 20px, 0);
  transition-duration: 0.5s;
  transition-delay: .4s;
}

[data-aos=fade-100] {
  transform: translate3d(0, 20px, 0);
  transition-duration: 0.5s;
  transition-delay: .6s;
}

[data-aos=fade-200] {
  transform: translate3d(0, 20px, 0);
  transition-duration: 0.5s;
  transition-delay: .8s;
}

[data-aos=fade-300] {
  transform: translate3d(0, 20px, 0);
  transition-duration: 0.5s;
  transition-delay: 1s;
}

[data-aos=fade-400] {
  transform: translate3d(0, 20px, 0);
  transition-duration: 0.5s;
  transition-delay: 1.2s;
}

@media only screen and (max-width: 500px) {
  [data-aos=fade-up] {
    transform: translate3d(0, 20px, 0);
  transition-duration: 0.5s;
    transition-delay: 0s;
  }
  
  [data-aos=fade-50] {
    transform: translate3d(0, 20px, 0);
  transition-duration: 0.5s;
    transition-delay: .05s;
  }
  
  [data-aos=fade-100] {
    transform: translate3d(0, 20px, 0);
  transition-duration: 0.5s;
    transition-delay: .1s;
  }
  
  [data-aos=fade-200] {
    transform: translate3d(0, 20px, 0);
  transition-duration: 0.5s;
    transition-delay: .15s;
  }
  
  [data-aos=fade-300] {
    transform: translate3d(0, 20px, 0);
  transition-duration: 0.5s;
    transition-delay: .2s;
  }
  
  [data-aos=fade-400] {
    transform: translate3d(0, 20px, 0);
  transition-duration: 0.5s;
    transition-delay: .25s;
  }
}