/* Fade In Animation */
@keyframes fadein {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Spin Animation */
@keyframes spin-animation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}
@keyframes spin-animation-reverse {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-359deg);
  }
}

/* Pulse Animation */
@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 hsla(var(--pulseColor), 70%);
	}
	70% {
		box-shadow: 0 0 0 10px hsla(var(--pulseColor), 0);
	}
	100% {
		box-shadow: 0 0 0 0 hsla(var(--pulseColor), 0);
	}
}

/* Lazy Load Animation */
@keyframes lazyLoadPlaceholder {
  0% {
    background-position: -468px 0
  }
  100% {
    background-position: 468px 0
  }
}

.animate-on-scroll { transition: all 1s ease; }

  .fade-left-1 { position: absolute; left: 10%; } 
  .fade-left-1.animate { left: -100% !important; }
  .fade-left-2 { left: 23% }
  .fade-left-2.animate { left: -100% !important; }
  .fade-right-1 { right: 23%; }
  .fade-right-1.animate { right: -100% !important; }
  .fade-right-2 { right: 10%; }
  .fade-right-2.animate { right: -100% !important; }
  .fade-up { bottom: 0; opacity: 1; }
  .fade-up.animate { bottom: 40%; transform: translateY(-50%); opacity: 1; }

@media ( min-width: 1024px ) {
  .fade-left-1 { position: absolute; left: 10%; } 
  .fade-left-1.animate { left: 0 !important; }
  .fade-left-2 { left: 23% }
  .fade-left-2.animate { left: 3% !important; }
  .fade-right-1 { right: 23%; }
  .fade-right-1.animate { right: 3% !important; }
  .fade-right-2 { right: 10%; }
  .fade-right-2.animate { right: 0 !important; }
  .fade-up { bottom: 0; opacity: 0; }
  .fade-up.animate { bottom: 40%; transform: translateY(-50%); opacity: 1; }
}