/*------------------------------------------------------------ 
  Animations
------------------------------------------------------------*/

.reveal {
  position: relative;
  opacity: 0;
}

.reveal.active {
  opacity: 1;
}

.active.my-fade {
  animation-name: myFade;
  animation-duration: 1.5s;
}

@keyframes myFade {
  from {
    transform: translateY(2.5rem);
  }
  to {
    transform: translate(0);
  }
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.my-fade-2 {
  animation-name: myFade;
  animation-duration: 1.5s;
}

@keyframes myFade2 {
  from {
    transform: translateY(2.5rem);
  }
  to {
    transform: translate(0);
  }
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.active.my-fade-3 {
  animation-name: myFade3;
  animation-duration: 1.5s;
}

@keyframes myFade3 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.my-fade-4 {
  animation-name: myFade4;
  animation-duration: 1s;
}

@keyframes myFade4 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.my-slide-left {
  animation-name: slideLeft;
  animation-duration: 3s;
}

@keyframes slideLeft {
  from {
    transform: translateX(-600px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}