.animatable {
    /* initially hide animatable objects */
    visibility: hidden;
  
    /* initially pause animatable objects their animations */
    animation-play-state: paused;
  }
  
  /* show objects being animated */
  .animated {
    visibility: visible;
  
    animation-fill-mode: both;
    animation-duration: 1s;
    animation-play-state: running;
  }
  
  /* CSS Animations (extracted from http://glifo.uiparade.com/) */
  @keyframes fadeIn {
    0%,
    60% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  
  @keyframes fadeInDown {
    0% {
      opacity: 0;
      transform: translateY(-20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes fadeInUp {
    0% {
      opacity: 0;
      transform: translateY(20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes bounceIn {
    0% {
      opacity: 0;
      transform: scale(0.3);
    }
    50% {
      transform: scale(1.05);
    }
    70% {
      transform: scale(0.9);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
      
  @keyframes bounceInLeft {
    0% {
      opacity: 0;
      transform: translateX(-2000px);
    }
    60% {
      transform: translateX(20px);
    }
    80% {
      transform: translateX(-5px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @keyframes bounceInRight {
    0% {
      opacity: 0;
      transform: translateX(2000px);
    }
    60% {
      transform: translateX(-20px);
    }
    80% {
      transform: translateX(5px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  
  }
  
 
  @keyframes moveUp {
    0% {
      transform: translateY(40px);
    }
    100% {
      transform: translateY(0);
    }
  }
  
  @keyframes fadeBgColor {
    0%,
    70% {
      background: none;
    }
    100% {
      background: #464646;
    }
  }
  
  
  
  .animated.fadeBgColor {
    animation-name: fadeBgColor;
  }
  .animated.bounceIn {
    animation-name: bounceIn;
  }
  .animated.bounceInRight {
    animation-name: bounceInRight;
  }
  .animated.bounceInLeft {
    animation-name: bounceInLeft;
  }
  .animated.fadeIn {
    animation-name: fadeIn;
  }
  .animated.fadeInDown {
    animation-name: fadeInDown;
  }
  .animated.fadeInUp {
    animation-name: fadeInUp;
  }
  .animated.moveUp {
    animation-name: moveUp;
  }

  /* home */

.bounce-delay{
    animation-duration: 1s;
    animation-timing-function: ease;
}
.a-delay{
    animation-duration: 1.8s;
    animation-timing-function: ease;
}
.animated.bounceInLeft,.bounceInRight,.a-delay-1,.a-delay-2,.a-delay-3{
    animation-duration: 0.5s;
    animation-timing-function: ease;
}
.a-delay-2{
    animation-delay: 0.3s;
}
.a-delay-3{
    animation-delay: 0.6s;
}
.a-delay-4{
    animation-delay: 0.9s;
}
.a-delay-5{
  animation-delay: 1.2s;
}