/* slide dom
-------------------------------------------------------------- */
[class*="slide-to"]{
	position: relative;
	overflow: hidden;
	opacity:0;
}
.slide-to-right.active{
	animation-name:toRight;
	animation-duration:.4s;
	animation-fill-mode:forwards;
}
@keyframes toRight{
	0% {
		transform-origin:left;
		transform:scaleX(0);
		opacity:0;
	}
	100% {
		transform-origin:left;
		transform:scaleX(1);
		opacity:1;
	}
}
.slide-to-right.active::before{
	animation-name:toRightInner;
	animation-duration:.6s;
	animation-fill-mode:forwards;
    content: '';
    position:absolute;
    width:100%;
    height:100%;
    background-color:#E10000;
    top:0;
    left:0;
}
@keyframes toRightInner{
	0% {
		transform-origin:left;
		transform:scaleX(1);
	}
	50% {
		transform-origin:right;
		transform:scaleX(1);
	}
	100% {
		transform-origin:right;
		transform:scaleX(0);
	}
}

/* text slide-anime
-------------------------------------------------------------- */
[class*="slide-txt"]{
	overflow:hidden;
	display:inline-block;
	opacity:0;
}
[class*="slide-txt"]>*{
	display: inline-block;
}
.slide-txt.lazyloaded,
.slide-txt.active{
	animation-name:slideTextX100;
	animation-duration:.6s;
	animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes slideTextX100 {
	from {
		transform: translateX(-100%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

.slide-txt.lazyloaded>*,
.slide-txt.active>*{
	animation-name:slideTextX-100;
	animation-duration:.6s;
	animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes slideTextX-100 {
	from {
		transform: translateX(100%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

/* text slide-anime
-------------------------------------------------------------- */
.fadein {
    opacity:0 !important;
/*     transform: translateY(40px); */
    transition: all 2s;
}
img.fadein {
    transition: all 3s;
}
.fadein.lazyloaded{
    opacity:1 !important;
/*     transform: translateY(0); */
}