.logoAnimation
{
  animation: unzoom ease 3s;
  animation-iteration-count: 1; 
  animation-fill-mode: forwards;
}

@keyframes unzoom { 
  0% { 
      opacity: 0;
      transform: scale(3);
      transform: skew(20deg, 20deg);
  } 
  100% { 
      opacity: 1; 
      transform: scale(1);
      transform: skew(0deg,0deg);
   } 
}


.fade
{
  animation: fadeInAnimation ease 4s; 
  animation-iteration-count: 1; 
  animation-fill-mode: forwards;
}

@keyframes fadeInAnimation { 
    0% { 
        opacity: 0;
        
    
    } 
    100% { 
        opacity: 1; 
     } 
}

.upAnimation
{
  animation: upAnimator ease 1s; 
  animation-iteration-count: 1; 
  animation-fill-mode: forwards;
}

@keyframes upAnimator { 
  0% { 
      top: 50vh;
      opacity: 0;
      
  
  } 
  100% { 
      top: 0vh; 
      opacity: 1;
   } 
}

.upAnimation2
{
  animation: upAnimator2 ease 2s; 
  animation-iteration-count: 1; 
  animation-fill-mode: forwards;
}

@keyframes upAnimator2 { 
  0% { 
    
      opacity: 0;
      transform: skew(20deg, 20deg);
      
  
  } 
  100% { 
      
      opacity: 1;
      transform: skew(0deg, 0deg);
   } 
}

.zoomAnimation
{
  animation: zoomer ease-in 1.3s;
  animation-iteration-count: 1; 
  animation-fill-mode: forwards;

}

@keyframes zoomer{
  0%{
    opacity: 0;
   transform: scale(0.6);
  }
  100%{
    opacity: 1;
    transform: scale(1);
  }
}

.slideAnimations
{
  animation: slider ease 2s; 
  animation-iteration-count: 1; 
  animation-fill-mode: forwards;
}

@keyframes slider{
  0%{
    opacity: 0;
   transform: translateX(-50vw);
  }
  100%{
    opacity: 1;
    transform:translateX(0px)
  }
}