.bounce-left {
	animation: bounceleft 0.6s forwards linear;
	opacity: 0;
}

@keyframes bounceleft {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.bounce-right {
	animation: bounceright 0.6s forwards linear;
	opacity: 1;
}

@keyframes bounceright {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}





.delay-100 {
	animation-delay: 100ms;
}

.delay-200 {
	animation-delay: 200ms;
}

.delay-300 {
	animation-delay: 300ms;
}

.delay-400 {
	animation-delay: 400ms;
}

.checkmark:checked::before {
	transform-origin: left top;
	animation: checkmark linear both 0.3s;
}

@keyframes checkmark {
	0% {
		height: 0px;
		width: 0;
		opacity: 0;
		right: 75px;
	}

	30% {
		height: 15px;
		width: 0;
		opacity: 1;
		right: 75px;
	}

	to {
		height: 15px;
		width: 25px;
		opacity: 1;
	}
}


.next:hover i {
	animation: left .4s forwards;
}

@keyframes left {
	0% {
		transform: translateX(0px);
	}

	100% {
		transform: translateX(10px);
	}
}

.prev:hover i {
	animation: right .4s forwards;
}

@keyframes right {
	0% {
		transform: translateX(0px);
	}

	100% {
		transform: translateX(-10px);
	}
}