@media ( prefers-reduced-motion: no-preference ) {
	.enter-start {
		animation: slidein 1500ms ease-out;
	}

	.enter-end {
		animation: slideout 1500ms ease-out;
	}

	.enter-up {
		animation: slidedown 1500ms ease-out;
	}

	.enter-down {
		animation: slideup 1500ms ease-out;
	}

	.enter-delay-0 {
		animation-fill-mode:backwards;
		animation-delay:0s;
	}
	.enter-delay-1 {
		animation-fill-mode:backwards;
		animation-delay:500ms;
	}
	.enter-delay-2 {
		animation-fill-mode:backwards;
		animation-delay:1000ms;
	}
	.enter-delay-3 {
		animation-fill-mode:backwards;
		animation-delay:1500ms;
	}
	.enter-delay-4 {
		animation-fill-mode:backwards;
		animation-delay:2000ms;
	}

	@keyframes slidein {
		0% {
			opacity: 0;
			transform:translateX(-100vw);
		}

		100% {
			opacity: 1;
			transform:translateX(0);
		}
	}

	@keyframes slideout {
		0% {
			opacity: 0;
			transform:translateX(100vw);
		}

		100% {	
			opacity: 1;
			transform:translateX(0);
		}
	}

	@keyframes slideup {
		0% {
			opacity: 0;
			transform:translateY(100vh);
		}

		100% {	
			opacity: 1;
			transform:translateY(0);
		}
	}

	@keyframes slidedown {
		0% {
			opacity: 0;
			transform:translateY(-100vh);
		}

		100% {
			opacity: 1;
			transform:translateY(0);
		}
	}
}