/* Extra Hand scroll animations. Elements only start hidden when JS is running. */
.ehl-js .ehl-anim {
	transition-property: opacity, transform;
	transition-duration: 400ms;
	transition-timing-function: ease;
}

.ehl-js .ehl-anim.ehl-slide-left { transform: translate3d(100%, 0, 0); }
.ehl-js .ehl-anim.ehl-slide-right { transform: translate3d(-100%, 0, 0); }
.ehl-js .ehl-anim.ehl-slide-up { transform: translate3d(0, 100%, 0); }

.ehl-js .ehl-anim.ehl-fade-up,
.ehl-js .ehl-anim.ehl-fade-left,
.ehl-js .ehl-anim.ehl-fade-right,
.ehl-js .ehl-anim.ehl-fade-up-left,
.ehl-js .ehl-anim.ehl-zoom-in-down { opacity: 0; }

.ehl-js .ehl-anim.ehl-fade-up { transform: translate3d(0, 100px, 0); }
.ehl-js .ehl-anim.ehl-fade-left { transform: translate3d(100px, 0, 0); }
.ehl-js .ehl-anim.ehl-fade-right { transform: translate3d(-100px, 0, 0); }
.ehl-js .ehl-anim.ehl-fade-up-left { transform: translate3d(100px, 100px, 0); }
.ehl-js .ehl-anim.ehl-zoom-in-down { transform: translate3d(0, -100px, 0) scale(0.6); }

.ehl-js .ehl-anim.ehl-in {
	opacity: 1;
	transform: none;
}

.ehl-duration-400 { transition-duration: 400ms !important; }
.ehl-duration-500 { transition-duration: 500ms !important; }
.ehl-duration-600 { transition-duration: 600ms !important; }
.ehl-duration-800 { transition-duration: 800ms !important; }
.ehl-duration-1000 { transition-duration: 1000ms !important; }

.ehl-delay-250 { transition-delay: 250ms; }
.ehl-delay-500 { transition-delay: 500ms; }
.ehl-delay-750 { transition-delay: 750ms; }
.ehl-delay-1000 { transition-delay: 1000ms; }
.ehl-delay-1500 { transition-delay: 1500ms; }
.ehl-delay-2000 { transition-delay: 2000ms; }
.ehl-delay-2500 { transition-delay: 2500ms; }
.ehl-delay-3000 { transition-delay: 3000ms; }

/* Slides start off-screen; stop them causing a sideways scrollbar. */
.ehl-js body { overflow-x: clip; }

@media (prefers-reduced-motion: reduce) {
	.ehl-js .ehl-anim {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}