:root {
	--animation-timing-function: cubic-bezier(.4, 0, .2, 1);
	--animation-duration: 1s;
}

@keyframes slideInDown {
	100% {
		opacity: 1;
		transform: none;
	}
}

@keyframes slideInleft {
	0% {
		opacity: 0;
		transform: translateX(25%);
	}
	
	100% {
		opacity: 1;
		transform: none;
	}
}

@keyframes slideInRight {
	0% {
		opacity: 0;
		transform: translateX(-25%);
	}
	
	100% {
		opacity: 1;
		transform: none;
	}
}

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

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

@keyframes zoomReverseIn {
	0% {
		opacity: 0;
		transform: scale(1.25);
	}
	
	100% {
		opacity: 1;
		transform: none;
	}
}

@keyframes flipInY {
	0% {
		opacity: 0;
		transform: perspective(90vw) rotateY(67.5deg);
	}
	
	100% {
		opacity: 1;
		transform: none;
	}
}

.slideInDown {
	animation-name: slideInDown;
}

.slideInLeft {
	animation-name: slideInleft;
}

.slideInRight {
	animation-name: slideInRight;
}

.zoomReverseIn {
	animation-name: zoomReverseIn;
}

.flipOutY {
	animation-name: flipInY;
	animation-direction: reverse;
}