@media (prefers-reduced-motion: no-preference) {

	[data-animation].fwp-animated {
		animation-play-state: running;
	}

	[data-animation].fwp-animated [data-animation] {
		animation-play-state: running;
	}

	[data-animation="slideInFromLeft"] {
		animation-name: slideInFromLeft;
		animation-play-state: paused;
		animation-fill-mode: both;
	}

	@keyframes slideInFromLeft {
		0% {
			transform: translateX(-100%);
			opacity: 0;
		}
		50% {
			opacity: 1;
		}
		100% {
			transform: translateX(0);
		}
	}

	[data-animation="slideInFromRight"] {
		animation-name: slideInFromRight;
		animation-play-state: paused;
		animation-fill-mode: both;
	}

	@keyframes slideInFromRight {
		0% {
			transform: translateX(100%);
			opacity: 0;
		}
		50% {
			opacity: 1;
		}
		100% {
			transform: translateX(0);
		}
	}

	[data-animation="slideInFromBottom"] {
		animation-name: slideInFromBottom;
		animation-play-state: paused;
		animation-fill-mode: both;
	}

	@keyframes slideInFromBottom {
		0% {
			transform: translateY(15vh);
			opacity: 0;
		}
		50% {
			opacity: 1;
		}
		100% {
			transform: translateY(0);
		}
	}

	[data-animation="rollDown"] {
		animation-name: rollDown;
		animation-play-state: paused;
		animation-fill-mode: both;
		overflow-y: hidden;
	}

	@keyframes rollDown {
		0% {
			max-height: 0px;
		}
		99% {
			max-height: 100vh;
		}
		100% {
			max-height: 100%;
		}
	}

	[data-animation="zoomIn"] {
		animation-name: zoomIn;
		animation-play-state: paused;
		animation-fill-mode: both;
	}

	@keyframes zoomIn {
		0% {
			transform: scale(0);
			opacity: 0;
		}
		50% {
			opacity: 1;
		}
		100% {
			transform: scale(1);
		}
	}

	[data-animation="fadeIn"] {
		animation-name: fadeIn;
		animation-play-state: paused;
		animation-fill-mode: both;
	}

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

	[data-animation="custom"] {
		animation: custom;
		animation-fill-mode: both;
	}

	@keyframes custom {
		0% {
			transform: translate(0)
		}
		100% {
			transform: translate(0, 100px)
		}
	}

	[data-animation="transitionGrow"]:hover {
		transform: scale(1.1);
	}

	[data-animation="transitionFlip"]:hover {
		transform: rotateY(180deg);
	}
}