@keyframes fade-out {
	from { opacity: 1; }
	to { opacity: 0; }
}
@keyframes fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes slide-out-left {
	from { transform: translateX(0); opacity: 1; }
	to { transform: translateX(-2rem); opacity: 0; }
}
@keyframes slide-in-left {
	from { transform: translateX(2rem); opacity: 0; }
	to { transform: translateX(0); opacity: 1; }
}
@keyframes slide-in-up {
	from { transform: translateY(2rem); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}
@keyframes slide-in-down {
	from { transform: translateY(-2rem); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}
@keyframes slide-out-right {
	from { transform: translateX(0); opacity: 1; }
	to { transform: translateX(2rem); opacity: 0; }
}
@keyframes slide-in-right {
	from { transform: translateX(-2rem); opacity: 0; }
	to { transform: translateX(0); opacity: 1; }
}
@keyframes zoom-out {
	0% { transform: scale(1); opacity: 1; }
	100% { transform: scale(0); opacity: 0; }
}
@keyframes zoom-in {
	0% { transform: scale(0); opacity: 0; }
	100% { transform: scale(1); opacity: 1; }
}

@keyframes bounce {
	60% { transform: translateY(0); }
	80% { transform: translateY(50%); }
	100% { transform: translateY(0); }
}

@media (min-width: 1024px) {
	.slide.get-out {
		z-index: 0;
		animation: fade-out .5s 1; /*ease-in-out;*/
	}
	.slide.get-out.left {
		animation: slide-out-left .5s 1 ease-in-out;
	}
	.slide.get-out.right {
		animation: slide-out-right .5s 1 ease-in-out;
	}
	.slide.get-in {
		z-index: 1;
		display: block;
		animation: fade-in .5s 1; /*ease-in-out;*/
	}
	.slide.get-in.left {
		animation: slide-in-left .5s 1 ease-in-out;
	}
	.slide.get-in.right {
		animation: slide-in-right .5s 1 ease-in-out;
	}
}

@media (max-width: 1023px) {
	.slide.get-out {
		z-index: 0;
		animation: fade-out .5s 1; /*ease-in-out;*/
	}
	.slide.get-out.left {
		animation: slide-out-left .5s 1 ease-in-out;
	}
	.slide.get-out.right {
		animation: slide-out-right .5s 1 ease-in-out;
	}
	.slide.get-in {
		z-index: 1;
		display: block;
		animation: fade-in .5s 1; /*ease-in-out;*/
	}
	.slide.get-in.left {
		animation: slide-in-left .5s 1 ease-in-out;
	}
	.slide.get-in.right {
		animation: slide-in-right .5s 1 ease-in-out;
	}
}
