/**
 * Flowpages scroll animations
 * Save as: /assets/css/fp-animate.css
 *
 * Usage:  <h2 data-fp="fade-up" data-fp-delay="0.2">Heading</h2>
 * Stagger: <ul data-fp-stagger="0.12"> with data-fp children </ul>
 */

/* Elements only hide when JS is present, so content never disappears
   if the script fails to load. */
.fp-js [data-fp] {
	opacity: 0;
}

.fp-js [data-fp].fp-in {
	animation-duration: 0.8s;
	animation-timing-function: cubic-bezier( 0.22, 0.61, 0.36, 1 );
	animation-fill-mode: both;
}

/* ---------- Animation types ---------- */

.fp-js [data-fp="fade"].fp-in       { animation-name: fpFade; }
.fp-js [data-fp="fade-up"].fp-in    { animation-name: fpFadeUp; }
.fp-js [data-fp="fade-down"].fp-in  { animation-name: fpFadeDown; }
.fp-js [data-fp="fade-left"].fp-in  { animation-name: fpFadeLeft; }
.fp-js [data-fp="fade-right"].fp-in { animation-name: fpFadeRight; }
.fp-js [data-fp="zoom-in"].fp-in    { animation-name: fpZoomIn; }
.fp-js [data-fp="zoom-out"].fp-in   { animation-name: fpZoomOut; }
.fp-js [data-fp="blur-in"].fp-in    { animation-name: fpBlurIn; }

@keyframes fpFade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes fpFadeUp {
	from { opacity: 0; transform: translate3d( 0, 40px, 0 ); }
	to   { opacity: 1; transform: none; }
}

@keyframes fpFadeDown {
	from { opacity: 0; transform: translate3d( 0, -40px, 0 ); }
	to   { opacity: 1; transform: none; }
}

@keyframes fpFadeLeft {
	from { opacity: 0; transform: translate3d( -50px, 0, 0 ); }
	to   { opacity: 1; transform: none; }
}

@keyframes fpFadeRight {
	from { opacity: 0; transform: translate3d( 50px, 0, 0 ); }
	to   { opacity: 1; transform: none; }
}

@keyframes fpZoomIn {
	from { opacity: 0; transform: scale3d( 0.9, 0.9, 0.9 ); }
	to   { opacity: 1; transform: none; }
}

@keyframes fpZoomOut {
	from { opacity: 0; transform: scale3d( 1.08, 1.08, 1.08 ); }
	to   { opacity: 1; transform: none; }
}

@keyframes fpBlurIn {
	from { opacity: 0; filter: blur( 12px ); transform: translate3d( 0, 20px, 0 ); }
	to   { opacity: 1; filter: blur( 0 ); transform: none; }
}

/* Sideways animations can push the page wide on small screens. */
body {
	overflow-x: hidden;
}

/* Respect the visitor's OS-level motion setting. */
@media ( prefers-reduced-motion: reduce ) {
	.fp-js [data-fp],
	.fp-js [data-fp].fp-in {
		opacity: 1 !important;
		animation: none !important;
		filter: none !important;
		transform: none !important;
	}
}