@keyframes moveInLeft {
   0%{
      opacity: 0;
      transform: translateX(-10rem);
   }
   80%{
      opacity: .8;
      transform: translateX(2rem);
   }
   100%{
      opacity: 1;
      transform: translateX(0);
   }
}

@keyframes moveInRight {
   0%{
      opacity: 0;
      transform: translateX(10rem);
   }
   80%{
      opacity: .8;
      transform: translateX(-2rem);
   }
   100%{
      opacity: 1;
      transform: translateX(0);
   }
}

@keyframes slide-fade {
   0%{
      opacity: 0;
      transform: translateY(-20px);
   }
   100%{
      opacity: 1;
      transform: translateY(0);
   }
}

@keyframes buttomUp{
   0%{
      opacity: 0;
      transform: translateY(10rem);
   } 
   80%{
      opacity: .8;
      transform: translateY(-1rem);
   }
   100%{
      opacity: 1;
      transform: translateX(0);
   }
}

@keyframes moveInButtom{
   0%{
      opacity: 0;
      transform: translateY(10rem);
   } 
   80%{
      opacity: .8;
      transform: translateY(-2rem);
   }
   100%{
      opacity: 1;
      transform: translateX(0);
   }
}