/* Animate Grow */
  @media (prefers-reduced-motion: no-preference) {
    .animate-grow {
      animation: wipe-enter 1s 1;
    }
  }
  @keyframes wipe-enter {
    0% {
      transform: scale(0, .025);
    }
    50% {
      transform: scale(1, .025);
    }
  }

/* Slide - In from side  Animation */
  @keyframes slideInFromLeft {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(0);
    }
  }
  .animate-slidein-fromleft {  
    /* This section calls the slideInFromLeft animation we defined above */
    animation: 1s ease-out 0s 1 slideInFromLeft;
  }

/* Slide - In from side from Right Animation */
  @keyframes slideInFromRight {
    0% {
      transform: translateX(+100%);
    }
    100% {
      transform: translateX(0);
    }
  }
  .animate-slidein-fromright {  
    /* This section calls the slideInFromLeft animation we defined above */
    animation: 1s ease-out 0s 1 slideInFromRight;
  }
/* Slide - In from side  Animation */
  @keyframes fadeIn {
    0% {
      opacity:0;
    }
    100% {
      opacity:1;
    }
  }
  .animate-fadein {  
    /* This section calls the slideInFromLeft animation we defined above */
    animation: 1.5s ease-in 0s 1 fadeIn;
  }

/* Slide - In from side  Animation */
  @keyframes bottomFade {
    0% {
      
      transform: translateY(30%);
      opacity:0;
    }
    100% {
      
      transform: translateY(0);
      opacity:1;
    }
  }
  .animate-bottomfade {  
    /* This section calls the slideInFromLeft animation we defined above */
    animation: 1.2s ease-in 0s 1 bottomFade;
    
  }