/* CSS DOCUMENT */

@keyframes fade-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.anim-fade-in {
	animation: fade-in var(--global-anim-timing-func) var(--nav-anim-duration) forwards;
}

@keyframes fade-in-leftward {
	0% {
		transform: translateX(10px);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

.anim-fade-in-leftward {
	animation: fade-in-leftward var(--global-anim-timing-func) var(--nav-anim-duration) forwards;
}

@keyframes fade-in-rightward {
	0% {
		transform: translateX(-10px);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

.anim-fade-in-rightward {
	animation: fade-in-rightward var(--global-anim-timing-func) var(--nav-anim-duration) forwards;
}

@keyframes fade-out {
	100% {
		opacity: 0;
	}
}

.anim-fade-out {
	animation: fade-out var(--global-anim-timing-func) var(--nav-anim-duration) forwards !important;
}

@keyframes fade-out-leftward {
	0% {
		transform: translateX(0);
		opacity: 1;
	}
	100% {
		transform: translateX(-10px);
		opacity: 0;
	}
}

.anim-fade-out-leftward {
	animation: fade-out-leftward var(--global-anim-timing-func) var(--nav-anim-duration) forwards !important;
}

@keyframes fade-out-rightward {
	0% {
		transform: translateX(0);
		opacity: 1;
	}
	100% {
		transform: translateX(10px);
		opacity: 0;
	}
}

.anim-fade-out-rightward {
	animation: fade-out-rightward var(--global-anim-timing-func) var(--nav-anim-duration) forwards !important;
}