.active .ani_fadein,
.active.ani_fadein {
	opacity: 0%;

	-moz-animation-name: ani_fadein;
	-webkit-animation-name: ani_fadein;
	animation-name: ani_fadein;

	-moz-animation-direction: normal;
	-webkit-animation-direction: normal;
	animation-direction: normal;

	animation-fill-mode: forwards;
}
@keyframes ani_fadein {
	from {
		opacity: 0%;
	}

	to {
		opacity: 100%;
	}
}
.active .ani_fadeout,
.active.ani_fadeout {
	opacity: 100%;

	-moz-animation-name: ani_fadeout;
	-webkit-animation-name: ani_fadeout;
	animation-name: ani_fadeout;

	-moz-animation-direction: normal;
	-webkit-animation-direction: normal;
	animation-direction: normal;

	animation-fill-mode: forwards;
}
@keyframes ani_fadeout {
	from {
		opacity: 100%;
	}

	to {
		opacity: 0%;
	}
}

.active .ani_minimize {
	-moz-animation-name: ani_minimize;
	-webkit-animation-name: ani_minimize;
	animation-name: ani_minimize;

	-moz-animation-direction: normal;
	-webkit-animation-direction: normal;
	animation-direction: normal;

	animation-fill-mode: forwards;
	/* animation-iteration-count: infinite; */
}
@keyframes ani_minimize {
	0% {
		opacity: 100%;
		transform: scale(1);
		left: 0;
		bottom: 0;
	}

	85% {
		opacity: 100%;
	}
	100% {
		opacity: 0%;
		transform: scale(0.2);
		left: calc(-42%);
		bottom: -45.5%;
	}
}

.active .ani_drag {
	-moz-animation-name: ani_drag;
	-webkit-animation-name: ani_drag;
	animation-name: ani_drag;

	-moz-animation-direction: normal;
	-webkit-animation-direction: normal;
	animation-direction: normal;

	animation-iteration-count: infinite;
}
@keyframes ani_drag {
	0% {
		opacity: 0%;
		left: 0;
		bottom: 0;
	}
	20% {
		opacity: 100%;
		left: 0;
		bottom: 0;
	}
	80% {
		opacity: 100%;
		left: calc(100% - 222px);
		bottom: calc(100% - 125px);
	}
	100% {
		opacity: 0%;
		left: calc(100% - 222px);
		bottom: calc(100% - 125px);
	}
}

.active .ani_drag_line {
	-moz-animation-name: ani_drag_line;
	-webkit-animation-name: ani_drag_line;
	animation-name: ani_drag_line;

	-moz-animation-direction: normal;
	-webkit-animation-direction: normal;
	animation-direction: normal;

	animation-iteration-count: infinite;
}
@keyframes ani_drag_line {
	0% {
		opacity: 0%;
		width: 0%;
	}
	20% {
		opacity: 100%;
		width: 0%;
	}
	80% {
		opacity: 100%;
		width: 110%;
	}
	100% {
		opacity: 0%;
		width: 110%;
	}
}
.active .ani_slideout,
.active.ani_slideout {
	-moz-animation-name: ani_slideout;
	-webkit-animation-name: ani_slideout;
	animation-name: ani_slideout;

	-moz-animation-direction: normal;
	-webkit-animation-direction: normal;
	animation-direction: normal;

	animation-fill-mode: forwards;
}
@keyframes ani_slideout {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-100vw);
	}
}

.active .ani_duration_0,
.active.ani_duration_0 {
	-moz-animation-duration: 0s;
	-webkit-animation-duration: 0s;
	animation-duration: 0s;
}
.active .ani_duration_1,
.active.ani_duration_1 {
	-moz-animation-duration: 1s;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
}
.active .ani_duration_2,
.active.ani_duration_2 {
	-moz-animation-duration: 2s;
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
}
.active .ani_duration_3,
.active.ani_duration_3 {
	-moz-animation-duration: 3s;
	-webkit-animation-duration: 3s;
	animation-duration: 3s;
}
.active .ani_duration_3_5,
.active.ani_duration_3_5 {
	-moz-animation-duration: 3.5s;
	-webkit-animation-duration: 3.5s;
	animation-duration: 3.5s;
}
.active .ani_duration_4,
.active.ani_duration_4 {
	-moz-animation-duration: 4s;
	-webkit-animation-duration: 4s;
	animation-duration: 4s;
}
.active .ani_duration_5,
.active.ani_duration_5 {
	-moz-animation-duration: 5s;
	-webkit-animation-duration: 5s;
	animation-duration: 5s;
}
.active .ani_delay_1,
.active.ani_delay_1 {
	animation-delay: 1s;
}
.active .ani_delay_2,
.active.ani_delay_2 {
	animation-delay: 2s;
}
.active .ani_delay_3,
.active.ani_delay_3 {
	animation-delay: 3s;
}
.active .ani_delay_4,
.active.ani_delay_4 {
	animation-delay: 4s;
}
.active .ani_delay_5,
.active.ani_delay_5 {
	animation-delay: 5s;
}