.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::after {
	transform-origin: left top;
	animation: checkmark linear both 0.2s;
	animation-delay: 0.1s;
}

@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);
	}
}

.h-border {
	animation: q-reveal 0.5s linear forwards;
}

@keyframes q-reveal {
	from {
		transform: translateX(200px);
	}
}