@keyframes h1-slidein-top {
  from {transform: translateY(-300px); opacity: 0;}
  to {transform: translateY(0); opacity: 1;}
}
@keyframes h1-slidein-bottom {
  from {transform: translateY(200px); opacity: 0;}
  to {transform: translateY(0); opacity: 1;}
}
@keyframes h1-slidein-left {
  from {transform: translateX(-200px); opacity: 0;}
  to {transform: translateX(0); opacity: 1;}
}
@keyframes h1-slidein-right {
  from {transform: translateX(200px); opacity: 0;}
  to {transform: translateX(0); opacity: 1;}
}
@keyframes fadein {
  from {opacity: 0;}
  to {opacity: 1;}
}

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

@keyframes mobile-menu-slidein-left {
  from {transform: translateX(-500px); opacity: 0;}
  to {transform: translateX(0); opacity: 1;}
}
@keyframes hop {
  0% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-5px);
  }
  50% {
    transform: translateY(2px);
  }
  80% {
    transform: translateY(-1px);
  }
  100% {
    transform: translateY(0);
  }
}
.reveal.r-bottom {
  opacity: 0;
}
.reveal.r-bottom.active {
  opacity: 1;
  animation: h1-slidein-bottom 1s ease;
}

.reveal.r-left {
  opacity: 0;
}
.reveal.r-left.active {
  opacity: 1;
  animation: h1-slidein-left 1s ease;
}

.reveal.r-right {
  opacity: 0;
}
.reveal.r-right.active {
  opacity: 1;
  animation: h1-slidein-right 1s ease;
}

.reveal.fade {
  opacity: 0.1;
}
.reveal.fade.active {
  opacity: 1;
  animation: fadein 2s ease;
}