@charset "UTF-8";
/* animation lib */

.fadeR2L,
.fadeL2R,
.fadeB2T,
.fadeT2B,
.fadeIn{
	animation-delay: 500ms;
	animation-duration: 750ms;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
	animation-direction:normal;
	opacity: 0;
}

/* animation */
.fadeR2L.on{
	animation-name: fadeR2L;
}
.fadeL2R.on{
	animation-name: fadeL2R;
}
.fadeB2T.on{
	animation-name: fadeB2T;
}
.fadeT2B.on{
	animation-name: fadeT2B;
}
@keyframes fadeIn{
	100%{
		opacity: 1;
	}
}
@keyframes fadeR2L{
	0%{
		transform: translateX(7%);
		opacity: 0;
	}
	100%{
		transform: translateX(0);
		opacity: 1;
	}
}
@keyframes fadeL2R{
	0%{
		transform: translateX(-7%);
		opacity: 0;
	}
	100%{
		transform: translateX(0);
		opacity: 1;
	}
}
@keyframes fadeB2T{
	0%{
		transform: translateY(7%);
		opacity: 0;
	}
	100%{
		transform: translateY(0);
		opacity: 1;
	}
}
@keyframes fadeT2B{
	0%{
		transform: translateY(-7%);
		opacity: 0;
	}
	100%{
		transform: translateY(0);
		opacity: 1;
	}
}
@keyframes rotatefade{
	0%{
		transform: rotate(180deg) scale(3);
		opacity: 0;
	}
	50%{
		opacity: 0.3;
	}
	100%{
		opacity: 1;
		transform: scale(0.9) rotate(0deg);
	}
}
@keyframes bounce{
	0%{
		transform:translateY(0);
	}
	50%{
		transform:translateY(-10px);
	}
	100%{
		transform:translateY(0);
	}
}
@keyframes fadeInb2ttxt{
    0%{
        opacity: 0;
        transform: translateY(1em);
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}