.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }
.delay-6 { animation-delay: 0.6s; }
.delay-7 { animation-delay: 0.7s; }
.delay-8 { animation-delay: 0.8s; }
.delay-9 { animation-delay: 0.9s; }
.delay-10 { animation-delay: 1s; }
.delay-11 { animation-delay: 1.1s; }
.delay-12 { animation-delay: 1.2s; }
.delay-13 { animation-delay: 1.3s; }
.delay-14 { animation-delay: 1.4s; }
.delay-15 { animation-delay: 1.5s; }
.delay-16 { animation-delay: 1.6s; }
.delay-17 { animation-delay: 1.7s; }
.delay-18 { animation-delay: 1.8s; }
.delay-19 { animation-delay: 1.9s; }
.delay-20 { animation-delay: 2s; }



/* Slidtop */
.animate.slidetop {
  animation-duration: 1s;
  animation-name: animate-slidetop;
  opacity: 0;
  animation-fill-mode : forwards;
}

@keyframes animate-slidetop {
  0% {
    opacity: 0;
    transform: translate(0px, -100px);
  }

  100% {
    opacity: 1;
    transform: translate(0px, 0px);

  }
}
/* Slidtop50 */
.animate.slidetop50 {
  animation-duration: .8s;
  animation-name: animate-slidetop50;
  opacity: 0;
  animation-fill-mode : forwards;
}

@keyframes animate-slidetop50 {
  0% {
    opacity: 0;
    transform: translate(0px, -50px);
  }

  100% {
    opacity: 1;
    transform: translate(0px, 0px);

  }
}
/* Slidtop25 */
.animate.slidetop25 {
  animation-duration: .6s;
  animation-name: animate-slidetop25;
  opacity: 0;
  animation-fill-mode : forwards;
}

@keyframes animate-slidetop25 {
  0% {
    opacity: 0;
    transform: translate(0px, -50px);
  }

  100% {
    opacity: 1;
    transform: translate(0px, 0px);

  }
}
/* Slidbottom */
.animate.slidebottom {
  animation-duration: .7s;
  animation-name: animate-slidebottom;
  opacity: 0;
  animation-fill-mode : forwards;
}

@keyframes animate-slidebottom {
  0% {
    opacity: 0;
    transform: translate(0px, 100px);
  }

  100% {
    opacity: 1;
    transform: translate(0px, 0px);

  }
}

.animate.ease{
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
/* fade In */
.animate.fadein {
  animation-duration: .7s;
  animation-name: animate-fadein;
  opacity: 0;
  animation-fill-mode : forwards;
}

@keyframes animate-fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;

  }
}
/* fade In 3*/
.animate.fadein3 {
  animation-duration: .3s;
  animation-name: animate-fadein3;
  opacity: 0;
  animation-fill-mode : forwards;
}

@keyframes animate-fadein3 {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;

  }
}