.ani_duration_0250 {
	animation-duration: 0.25s;
}
.ani_duration_0500 {
	animation-duration: 0.5s;
}
.ani_duration_0750 {
	animation-duration: 0.75s;
}
.ani_duration_1000 {
	animation-duration: 1s;
}
.ani_duration_1500 {
	animation-duration: 1.5s;
}
.ani_duration_2000 {
	animation-duration: 2s;
}
.ani_duration_2500 {
	animation-duration: 2.5s;
}
.ani_duration_3000 {
	animation-duration: 3s;
}
.ani_duration_3500 {
	animation-duration: 3.5s;
}
.ani_duration_4000 {
	animation-duration: 4s;
}
.ani_duration_4500 {
	animation-duration: 4.5s;
}
.ani_duration_5000 {
	animation-duration: 5s;
}
.ani_duration_5500 {
	animation-duration: 5.5s;
}
.ani_duration_6000 {
	animation-duration: 6s;
}
.ani_duration_6500 {
	animation-duration: 6.5s;
}
.ani_duration_7000 {
	animation-duration: 7s;
}
.ani_duration_7500 {
	animation-duration: 7.5s;
}
.ani_duration_8000 {
	animation-duration: 8s;
}
.ani_duration_8500 {
	animation-duration: 8.5s;
}
.ani_duration_9000 {
	animation-duration: 9s;
}
.ani_duration_9500 {
	animation-duration: 9.5s;
}
.ani_duration_10000 {
	animation-duration: 10s;
}

.ani_delay_0250 {
	animation-delay: 0.25s;
}
.ani_delay_0500 {
	animation-delay: 0.5s;
}
.ani_delay_0750 {
	animation-delay: 0.75s;
}
.ani_delay_1000 {
	animation-delay: 1s;
}
.ani_delay_1500 {
	animation-delay: 1.5s;
}
.ani_delay_2000 {
	animation-delay: 2s;
}
.ani_delay_2500 {
	animation-delay: 2.5s;
}
.ani_delay_3000 {
	animation-delay: 3s;
}
.ani_delay_3500 {
	animation-delay: 3.5s;
}
.ani_delay_4000 {
	animation-delay: 4s;
}
.ani_delay_4500 {
	animation-delay: 4.5s;
}
.ani_delay_5000 {
	animation-delay: 5s;
}
.ani_delay_5500 {
	animation-delay: 5.5s;
}
.ani_delay_6000 {
	animation-delay: 6s;
}
.ani_delay_6500 {
	animation-delay: 6.5s;
}
.ani_delay_7000 {
	animation-delay: 7s;
}
.ani_delay_7500 {
	animation-delay: 7.5s;
}
.ani_delay_8000 {
	animation-delay: 8s;
}
.ani_delay_8500 {
	animation-delay: 8.5s;
}
.ani_delay_9000 {
	animation-delay: 9s;
}
.ani_delay_9500 {
	animation-delay: 9.5s;
}
.ani_delay_10000 {
	animation-delay: 10s;
}

.reverse {
	animation-delay: 0s;
}

.ani_timing_linear {
	animation-timing-function: linear;
}
.ani_timing_ease {
	animation-timing-function: ease;
}
.ani_timing_ease_in {
	animation-timing-function: ease-in;
}
.ani_timing_ease_out {
	animation-timing-function: ease-out;
}
.ani_timing_ease_in_out {
	animation-timing-function: ease-in-out;
}


/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */

/* FADE INS */

.fade-in {
	opacity: 0;
	animation-fill-mode: forwards;
}

.fade-in.run {
	animation-name: fade-in;
}
.fade-in.reverse {
	opacity: 1;
	animation-name: fade-out;
}


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


.fade-out {
	opacity: 1;
	animation-fill-mode: forwards;
}

.fade-out.run {
	animation-name: fade-out;
}
.fade-out.reverse {
	opacity: 0;
	animation-name: fade-in;
}


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


/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */

/* SLIDE INS */

.slide-in-from-top {
	transform: translateY(-100%);
	animation-fill-mode: forwards;
}

.slide-in-from-top.run {
	animation-name: slide-in-from-top;
}
.slide-in-from-top.reverse {
	transform: translateY(0%);
	animation-name: slide-out-to-top;
}

.slide-out-to-top {
	transform: translateY(0%);
	animation-fill-mode: forwards;
}
.slide-out-to-top.run {
	animation-name: slide-out-to-top;
}
.slide-out-to-top.reverse {
	transform: translateY(-100%);
	animation-name: slide-in-from-top;
}


@keyframes slide-in-from-top {
	0% {
		transform: translateY(-100%);
	}
	100% {
		transform: translateY(0px);
	}
}

@keyframes slide-out-to-top {
	0% {
		transform: translateY(0px);
	}
	100% {
		transform: translateY(-100%);
	}
}


.slide-in-from-left {
	transform: translateX(-110%);
	animation-fill-mode: forwards;
}

.slide-in-from-left.run {
	animation-name: slide-in-from-left;
}
.slide-in-from-left.reverse {
	transform: translateX(0%);
	animation-name: slide-out-to-left;
}

@keyframes slide-in-from-left {
	0% {
		transform: translateX(-110%);
	}
	100% {
		transform: translateX(0%);
	}
}

.slide-out-to-left {
	transform: translateX(0%);
	animation-fill-mode: forwards;
}

.slide-out-to-left.run {
	animation-name: slide-out-to-left;
}
.slide-out-to-left.reverse {
	transform: translateX(-110%);
	animation-name: slide-in-from-left;
}

@keyframes slide-out-to-left {
	0% {
		transform: translateX(0px);
	}
	100% {
		transform: translateX(-110%);
	}
}




.slide-in-from-right {
	transform: translateX(110%);
	
	animation-fill-mode: forwards;
}

.slide-in-from-right.run {
	animation-name: slide-in-from-right;
}
.slide-in-from-right.reverse {
	transform: translateX(0px);
	animation-name: slide-out-to-right;
}

@keyframes slide-in-from-right {
	0% {
		transform: translateX(110%);
	}
	100% {
		transform: translateX(0px);
	}
}

.slide-out-to-right {
	transform: translateX(0px);
	
	animation-fill-mode: forwards;
}
.slide-out-to-right.run {
	animation-name: slide-out-to-right;
}
.slide-out-to-right.reverse {
	transform: translateX(110%);
	animation-name: slide-in-from-right;
}

@keyframes slide-out-to-right {
	0% {
		transform: translateX(0px);
	}
	100% {
		transform: translateX(110%);
	}
}


.slide-in-from-bottom {
	transform: translateY(110%);	
	animation-fill-mode: forwards;
}
.slide-in-from-bottom.run {
	animation-name: slide-in-from-bottom;
}
.slide-in-from-bottom.reverse {
	transform: translateY(0%);
	animation-name: slide-out-to-bottom;
}

.slide-out-to-bottom {
	transform: translateY(0%);
	animation-fill-mode: forwards;
}
.slide-out-to-bottom.run {
	animation-name: slide-out-to-bottom;
}
.slide-out-to-bottom.reverse {
	transform: translateY(110%);
	animation-name: slide-in-from-bottom;
}


@keyframes slide-in-from-bottom {
	0% {
		transform: translateY(110%);
	}
	100% {
		transform: translateY(0%);
	}
}
@keyframes slide-out-to-bottom {
	0% {
		transform: translateY(0%);
	}
	100% {
		transform: translateY(110%);
	}
}

/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */

/* SLIDE AND FADE INS */

.slide-fade-in-from-top {
	opacity: 0;
	transform: translateY(-100%);
	animation-fill-mode: forwards;
}
.slide-fade-in-from-top.run {
	animation-name: slide-fade-in-from-top;
}
.slide-fade-in-from-top.reverse {
	opacity: 1;
	transform: translateY(0%);
	animation-name: slide-fade-out-to-top;
}

.slide-fade-out-to-top {
	opacity: 1;
	transform: translateY(0%);
	animation-fill-mode: forwards;
}
.slide-fade-out-to-top.run {
	animation-name: slide-fade-out-to-top;
}
.slide-fade-out-to-top.reverse {
	opacity: 0;
	transform: translateY(-100%);
	animation-name: slide-fade-in-from-top;
}


@keyframes slide-fade-in-from-top {
	0% {
		opacity: 0;
		transform: translateY(-100%);
	}
	100% {
		opacity: 1;
		transform: translateY(0%);
	}
}
@keyframes slide-fade-out-to-top {
	0% {
		opacity: 1;
		transform: translateY(0%);
	}
	100% {
		opacity: 0;
		transform: translateY(-100%);
	}
}


.slide-fade-in-from-left {
	opacity: 0;
	transform: translateX(-100%);
	animation-fill-mode: forwards;
}
.slide-fade-in-from-left.run {
	animation-name: slide-fade-in-from-left;
}
.slide-fade-in-from-left.reverse {
	animation-name: slide-fade-out-to-left;
}

.slide-fade-out-to-left {
	opacity: 1;
	transform: translateX(0%);
	animation-fill-mode: forwards;
}
.slide-fade-out-to-left.run {
	animation-name: slide-fade-out-to-left;
}
.slide-fade-out-to-left.reverse {
	opacity: 0;
	transform: translateX(-100%);
	animation-name: slide-fade-in-from-left;
}

@keyframes slide-fade-in-from-left {
	0% {
		opacity: 0;
		transform: translateX(-100%);
	}
	100% {
		opacity: 1;
		transform: translateX(0px);
	}
}
@keyframes slide-fade-out-to-left {
	0% {
		opacity: 1;
		transform: translateX(0%);
	}
	100% {
		opacity: 0;
		transform: translateX(-100%);
	}
}

.slide-fade-in-from-right {
	opacity: 0;
	transform: translateX(100%);	
	animation-fill-mode: forwards;
}
.slide-fade-in-from-right.run {
	animation-name: slide-fade-in-from-right;
}
.slide-fade-in-from-right.reverse {
	opacity: 1;
	transform: translateX(0px);
	animation-name: slide-fade-out-to-right;
}

.slide-fade-out-to-right {
	opacity: 1;
	transform: translateX(0%);	
	animation-fill-mode: forwards;
}
.slide-fade-out-to-right.run {
	animation-name: slide-fade-out-to-right;
}
.slide-fade-out-to-right.reverse {
	opacity: 0;
	transform: translateX(100%);
	animation-name: slide-fade-in-from-right;
}

@keyframes slide-fade-in-from-right {
	0% {
		opacity: 0;
		transform: translateX(100%);
	}
	100% {
		opacity: 1;
		transform: translateX(0%);
	}
}
@keyframes slide-fade-out-to-right {
	0% {
		opacity: 1;
		transform: translateX(0%);
	}
	100% {
		opacity: 0;
		transform: translateX(100%);
	}
}


.slide-fade-in-from-bottom {
	opacity: 0;
	transform: translateY(100%);	
	animation-fill-mode: forwards;
}
.slide-fade-in-from-bottom.run {
	animation-name: slide-fade-in-from-bottom;
}
.slide-fade-in-from-bottom.reverse {
	opacity: 1;
	transform: translateY(0%);
	animation-name: slide-fade-out-to-bottom;
}

.slide-fade-out-to-bottom {
	opacity: 1;
	transform: translateY(0%);	
	animation-fill-mode: forwards;
}
.slide-fade-out-to-bottom.run {
	animation-name: slide-fade-out-to-bottom;
}
.slide-fade-out-to-bottom.reverse {
	opacity: 0;
	transform: translateY(100%);
	animation-name: slide-fade-in-from-bottom;
}

@keyframes slide-fade-in-from-bottom {
	0% {
		opacity: 0;
		transform: translateY(100%);
	}
	100% {
		opacity: 1;
		transform: translateY(0%);
	}
}
@keyframes slide-fade-out-to-bottom {
	0% {
		opacity: 1;
		transform: translateY(0%);
	}
	100% {
		opacity: 0;
		transform: translateY(100%);
	}
}