.grow-shrink-animation {
  animation: 5s ease-in-out 0s infinite normal growShrink;
}

@keyframes growShrink {
  0% {
    transform: scale(1);
    transform: rotate3d(1, 0, 0, 0deg) scale(1);
  }

  15% {
    transform: rotate3d(1, 0, 0, 0deg) scale(1.05);
  }

  35% {
    transform: rotate3d(1, 0, 0, 50deg) scale(0.8);
  }

  60% {
    transform: scale(1);
    transform: rotate3d(1, 0, 0, 0deg) scale(1);
  }

  100% {
    transform: scale(1);
    transform: rotate3d(1, 0, 0, 0deg) scale(1);
  }
}

.fade-in-animation-corner {
  animation: scaleIn 0.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  animation-delay: 0.5s;
  transform-origin: bottom left;
}

.fade-in-animation {
  animation: fadeIn 0.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  animation-delay: 0.3s;
}

.delay-1 {
  animation-delay: 1s;
}
.delay-2 {
  animation-delay: 1.5s;
}
.delay-3 {
  animation-delay: 2s;
}
.delay-4 {
  animation-delay: 2.5s;
}
.delay-5 {
  animation-delay: 3s;
}

@keyframes fadeIn {
  0% { opacity: 0; transform: scale(0.8) }
  65% { opacity: 1; transform: scale(1.1) }
  100% { opacity: 1; transform: scale(1) }
}

.quick-fade-in-animation {
  animation: quickFadeIn 0.5s;
  animation-delay: 0s;
  animation-direction: normal
  animation-iteration-count: 1;
}

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

@keyframes scaleIn {
  0% { opacity: 0.8; transform: scale(0.0) }
  65% { opacity: 1; transform: scale(1.1) }
  100% { opacity: 1; transform: scale(1) }
}

.slow-fade-out-in-animation {
  animation: slowFadeOutIn 45s;
  animation-delay: 0s;
  animation-direction: normal;
  animation-iteration-count: infinite;
}

@keyframes slowFadeOutIn {
  0% { opacity: 1; }
  90% { opacity: 1; }
  95% { opacity: 0; }
  100% { opacity: 1; }
}
}