.animate { opacity: 0; transition: opacity 500ms; }
.animate.scrolled { opacity: 1; }

.scrolled.fade-in {  animation: fade-in 1s ease-in-out both; }
.scrolled.fade-in-bottom { animation: fade-in-bottom 2s ease-in-out both; }
.scrolled.slide-left { animation: slide-in-left 0.75s ease-in-out both; }
.scrolled.slide-right { animation: slide-in-right 0.75s ease-in-out both; }
.scrolled.shake-horizontal { animation: horizontal-shaking 1s ease-in-out both; }

.flicker {
  animation: flicker .75s infinite;
}

.abstract-circle img {
  animation: rotateCircle 7.5s linear infinite;
}

@keyframes rotateCircle {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes horizontal-shaking {
  0% { transform: translateX(0) }
  25% { transform: translateX(5px) }
  50% { transform: translateX(-5px) }
  75% { transform: translateX(5px) }
  100% { transform: translateX(0) }
}

@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(100px);
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes flicker {
  0%, 100% {
      opacity: 0;
  }
  50% {
      opacity: 1;
  }
}