/** animations **/

.slideDown {
  position: relative;
  opacity: 0;
  top: 100px;
}

@keyframes slideDown--animation {
  0% {
  }

  100% {
    opacity: 1;
    transform: translateY(+100px);
  }
}

.slideDown--animation {
  animation: slideDown--animation 3s forwards;
}

.slideUp {
  position: relative;
  opacity: 0;
  top: 100px;
}

@keyframes slideUp--animation {
  0% {
  }

  100% {
    opacity: 1;
    transform: translateY(-100px);
  }
}

.slideUp--animation {
  animation: slideUp--animation 3s forwards;
}

@keyframes shake--animation {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(+1.6deg);
  }
  50% {
    transform: rotate(0eg);
  }
  75% {
    transform: rotate(-1.6deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.shake--animation {
  animation: shake--animation 0.5s infinite;
}

/* topSlideIn--L */
@keyframes topSlideIn--L--animation {
  0% {
  }

  100% {
    opacity: 1;
    transform: translateX(+100px);
  }
}

.topSlideIn--L--animation {
  animation: topSlideIn--L--animation 1s forwards;
}

/* topSlideIn--R */
@keyframes topSlideIn--R--animation {
  0% {
  }

  100% {
    opacity: 1;
    transform: translateX(-100px);
  }
}

.topSlideIn--R--animation {
  animation: topSlideIn--R--animation 1s forwards;
}

/* fadeIn */
@keyframes topFadeIn--animation {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.topFadeIn--animation {
  animation: topFadeIn--animation 3s forwards;
}

/* fadeIn */
@keyframes hiThere--animation {
  30% {
    transform: scale(1.08);
  }
  40%,
  60% {
    transform: rotate(-2deg) scale(1.04);
  }
  50% {
    transform: rotate(+2deg) scale(1.04);
  }
  70% {
    transform: rotate(+0deg) scale(1.04);
  }
  100% {
    transform: scale(1);
  }
}

.hiThere--animation {
  animation: hiThere--animation 3s ease forwards;
}

@keyframes bounce--animation {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-8px);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-8px);
  }
  100% {
    transform: translateY(0);
  }
}

.bounce--animation {
  animation: bounce--animation 4s ease infinite;
}

@keyframes grow--animation {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.grow--animation {
  animation: grow--animation 0.5s ease forwards;
}

@keyframes fadeIn--animation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fadeIn--animation {
  animation: fadeIn--animation 1s forwards;
}

@keyframes zoomIn--animation {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.zoomIn--animation {
  animation: zoomIn--animation 0.5s ease forwards;
}

@keyframes zoomOut--animation {
  from {
    opacity: 0;
    transform: scale(2);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.zoomOut--animation {
  animation: zoomOut--animation 0.5s ease forwards;
}