@include body-class(true) {

	.sui-fade-in {
		animation: fadeIn 0.3s ease-in forwards;

		@media screen and (prefers-reduced-motion: reduce) {
			opacity: 1;
			animation: none;
		}
	}

	.sui-fade-out {
		animation: fadeOut 0.3s ease-in forwards;

		@media screen and (prefers-reduced-motion: reduce) {
			opacity: 0;
			animation: none;
		}
	}

	.sui-bounce-in {
		animation: bounceInJiggle 0.8s ease-in forwards;

		@media screen and (prefers-reduced-motion: reduce) {
			opacity: 1;
			animation: none;
		}
	}

	.sui-bounce-out {
		animation: bounceOutJiggle 0.6s ease-out forwards;

		@media screen and (prefers-reduced-motion: reduce) {
			opacity: 0;
			animation: none;
		}
	}

	.sui-content-fade-in {
		animation: fadeScaleIn 0.5s ease-in forwards;

		@media screen and (prefers-reduced-motion: reduce) {
			opacity: 1;
			animation: none;
		}
	}

	.sui-content-fade-out {
		animation: fadeScaleOut 0.9s ease-in forwards;

		@media screen and (prefers-reduced-motion: reduce) {
			opacity: 0;
			animation: none;
		}
	}
}

@keyframes bounceInDown {
	from, 60%, 75%, 90%, to {
		animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	}
	0% {
		opacity: 0;
		transform: translate3d(0, -3000px, 0);
	}
	60% {
		opacity: 1;
		transform: translate3d(0, 25px, 0);
	}
	75% {
		transform: translate3d(0, -10px, 0);
	}
	90% {
		transform: translate3d(0, 5px, 0);
	}
	to {
		transform: none;
	}
}

@keyframes bounceInJiggle {
	0%   { transform: translateY(-200%) scale(1.5); opacity:0; }
	30%  { opacity:1; }
	58%  { transform: translateY(0) rotate(1deg) scale(1); opacity: 1 }
	72%  { transform: translateY(-30px) rotate(-1deg); }
	80%  { transform: translateY(0) rotate(0.5deg); }
	100% { transform: translateY(0) rotate(0deg); }
}

@keyframes bounceOutJiggle {
	0%   { transform: translateY(0); }
	10%  { transform: translateY(-10px) rotate(-0.5deg); }
	30%  { transform: translateY(20px) rotate(8deg); }
	70%  { opacity: 1; }
	90%  { transform: translateY(300%) translateX(40px) rotate(35deg); opacity: 0; }
	100% { display: none; }
}

@keyframes bounceOut {
	20% {
		transform: scale3d(.9, .9, .9);
	}
	50%, 55% {
		opacity: 1;
		transform: scale3d(1.1, 1.1, 1.1);
	}
	to {
		opacity: 0;
		transform: scale3d(.3, .3, .3);
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	25% {
		opacity: 1;
	}
}

@keyframes fadeScaleIn {
	0% {
		opacity: 0;
	}
	25% {
		opacity: 0;
		transform: translate3d(0,10px,0) scale(0.9);
	}
	100% {
		transform: translate3d(0,0,0) scale(1);
	}
}

@keyframes fadeOut {
	0% {
		opacity: 1;
	}
	75% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@keyframes fadeScaleOut {
	0% {
		opacity: 1;
		transform: translate3d(0,0,0) scale(1);
	}
	25% {
		opacity: 0;
		transform: translate3d(0,10px,0) scale(0.9);
	}
	100% {
		opacity: 0;
	}
}

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

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

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}