:root{
	--anime-duration: 1.2s;
}
.anime{visibility: hidden;}
.anime.anime-active{visibility: visible;}
.zoomin{
	visibility: visible;
	transform: scale(1.2);
}
.zoomin.anime-active{
	animation-name: ani_zoomin;
	animation-duration: 6s;
	animation-fill-mode: forwards;
	animation-timing-function: ease-out;
}
@keyframes ani_zoomin{
	from{transform: scale(1.2);}
	to{transform: scale(1);}
}
.fadein.anime-active{
	opacity: 0;
	animation-name: ani_fadein;
	animation-duration: var(--anime-duration);
	animation-fill-mode: forwards;
	animation-timing-function: linear;
}
@keyframes ani_fadein{
	from{opacity: 0;}
	to{opacity: 1;}
}
.fadein-up.anime-active{
	opacity: 0;
	animation-name: ani_fadeinup;
	animation-duration: var(--anime-duration);
	animation-fill-mode: forwards;
}
@keyframes ani_fadeinup{
	from{transform: translateY(50px); opacity: 0;}
	to{transform: translateY(0); opacity: 1;}
}
.fadein-down.anime-active{
	opacity: 0;
	animation-name: ani_fadeindown;
	animation-duration: var(--anime-duration);
	animation-fill-mode: forwards;
}
@keyframes ani_fadeindown{
	from{transform: translateY(-50px); opacity: 0;}
	to{transform: translateY(0); opacity: 1;}
}
.fadein-left.anime-active{
	opacity: 0;
	animation-name: ani_fadeinleft;
	animation-duration: var(--anime-duration);
	animation-fill-mode: forwards;
}
@keyframes ani_fadeinleft{
	from{transform: translateX(50px); opacity: 0;}
	to{transform: translateX(0); opacity: 1;}
}
.fadein-right.anime-active{
	opacity: 0;
	animation-name: ani_fadeinright;
	animation-duration: var(--anime-duration);
	animation-fill-mode: forwards;
}
@keyframes ani_fadeinright{
	from{transform: translateX(-50px); opacity: 0;}
	to{transform: translateX(0); opacity: 1;}
}
.fadein-tr.anime-active{
	opacity: 0;
	animation-name: ani_fadeintr;
	animation-duration: var(--anime-duration);
	animation-fill-mode: forwards;
}
@keyframes ani_fadeintr{
	from{transform: translate(-30px, 30px); opacity: 0;}
	to{transform: translate(0, 0); opacity: 1;}
}
.fadein-tl.anime-active{
	opacity: 0;
	animation-name: ani_fadeintl;
	animation-duration: var(--anime-duration);
	animation-fill-mode: forwards;
}
@keyframes ani_fadeintl{
	from{transform: translate(30px, 30px); opacity: 0;}
	to{transform: translate(0, 0); opacity: 1;}
}

.clip-right.anime-active{
	opacity: 0;
	animation-name: ani_clipright;
	animation-duration: var(--anime-duration);
	animation-fill-mode: forwards;
}
@keyframes ani_clipright{
	from{clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); opacity: 1;}
	to{clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); opacity: 1;}
}
.clip-left.anime-active{
	opacity: 0;
	animation-name: ani_clipleft;
	animation-duration: var(--anime-duration);
	animation-fill-mode: forwards;
}
@keyframes ani_clipleft{
	from{clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%); opacity: 1;}
	to{clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); opacity: 1;}
}
.clip-up.anime-active{
	opacity: 0;
	animation-name: ani_clipup;
	animation-duration: var(--anime-duration);
	animation-fill-mode: forwards;
}
@keyframes ani_clipup{
	from{clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%); opacity: 1;}
	to{clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); opacity: 1;}
}
.clip-down.anime-active{
	opacity: 0;
	animation-name: ani_clipdown;
	animation-duration: var(--anime-duration);
	animation-fill-mode: forwards;
}
@keyframes ani_clipdown{
	from{clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%); opacity: 1;}
	to{clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); opacity: 1;}
}
.clip-lr.anime-active{
	opacity: 0;
	animation-name: ani_cliplr;
	animation-duration: var(--anime-duration);
	animation-fill-mode: forwards;
}
@keyframes ani_cliplr{
	from{clip-path: polygon(50% 0%, 50% 0%, 50% 100%, 50% 100%); opacity: 1;}
	to{clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); opacity: 1;}
}
.clip-tb.anime-active{
	opacity: 0;
	animation-name: ani_cliptb;
	animation-duration: var(--anime-duration);
	animation-fill-mode: forwards;
}
@keyframes ani_cliptb{
	from{clip-path: polygon(0% 50%, 100% 50%, 100% 50%, 0% 50%); opacity: 1;}
	to{clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); opacity: 1;}
}
.clip-tl-br.anime-active{
	opacity: 0;
	animation-name: ani_cliptlbr;
	animation-duration: 2s;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
}
@keyframes ani_cliptlbr{
	from{clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%); opacity: 1;}
	to{clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); opacity: 1;}
}
.clip_circle.anime-active{
	opacity: 0;
	animation-name: ani_clipcircle;
	animation-duration: 3s;
	animation-fill-mode: forwards;
}
@keyframes ani_clipcircle{
	from{clip-path: circle(1% at 50% 50%); opacity: 1;}
	to{clip-path: circle(100% at 50% 50%); opacity: 1;}
}