/* movement */
:root{
	--mSpeed:1s;
	--fSpeed:1.5s;
	--bSpeed:1.5s;
	--bStr:10px;
	--mStart:-20%;
	--mStop:0%;
	--mStartF:-200%;
	--mStopF:0%;
	--fStart:0;
	--fStop:1;
	--bStop:0px;
}

.ltr{
	margin-left:var(--mStart);
	animation: 
		ltr var(--mSpeed) ease-out .5s both;
}

.ltr-full{
	margin-left:var(--mStartF);
	animation: 
		ltrF var(--mSpeed) ease-out .5s both;
}

.rtl{
	margin-right:var(--mStart);
	animation: 
		rtl var(--mSpeed) ease-out .5s both;
}

.rtl-full{
	margin-right:var(--mStartF);
	animation: 
		rtlF var(--mSpeed) ease-out .5s both;
}

.btt{
	margin-bottom:var(--mStart);
	animation:
		btt var(--mSpeed) ease-out .5s both;
}

.btt-full{
	margin-bottom:var(--mStartF);
	animation:
		bttF var(--mSpeed) ease-out .5s both;
}

.ttb{
	margin-top:var(--mStart);
	animation:
		ttb var(--mSpeed) ease-out .5s both;
}

.ttb-full{
	margin-top:var(--mStartF);
	animation:
		ttbF var(--mSpeed) ease-out .5s both;
}

.fi-ltr{
	opacity:var(--fStart);
	margin-left:var(--mStart);
	animation: 
		ltr var(--mSpeed) ease-out .5s both, 
		fi var(--fSpeed) ease-out .5s both;
}

.fi-ltr-full{
	opacity:var(--fStart);
	margin-left:var(--mStartF);
	animation: 
		ltrF var(--mSpeed) ease-out .5s both, 
		fi var(--fSpeed) ease-out .5s both;
}

.fi-rtl{
	opacity:var(--fStart);
	margin-right:var(--mStart);
	animation: 
		fi var(--fSpeed) ease-out .5s both, 
		rtl var(--mSpeed) ease-out .5s both;
}

.fi-rtl-full{
	opacity:var(--fStart);
	margin-right:var(--mStartF);
	animation: 
		fi var(--fSpeed) ease-out .5s both, 
		rtlF var(--mSpeed) ease-out .5s both;
}

.fi-btt{
	opacity:var(--fStart);
	margin-bottom:var(--mStart);
	animation:
		fi var(--fSpeed) ease-out .5s both,
		btt var(--mSpeed) ease-out .5s both;
}

.fi-btt-full{
	opacity:var(--fStart);
	margin-bottom:var(--mStartF);
	animation:
		fi var(--fSpeed) ease-out .5s both,
		bttF var(--mSpeed) ease-out .5s both;
}

.fi-ttb{
	opacity:var(--fStart);
	margin-top:var(--mStart);
	animation:
		fi var(--fSpeed) ease-out .5s both,
	 	ttb var(--mSpeed) ease-out .5s both;
}

.fi-ttb-full{
	opacity:var(--fStart);
	margin-top:var(--mStartF);
	animation:
		fi var(--fSpeed) ease-out .5s both,
	 	ttbF var(--mSpeed) ease-out .5s both;
}

.fi-b-ltr{
	opacity:var(--fStart);
	margin-left:var(--mStart);
	filter: blur(var(--bStr));
	animation: 
		ltr var(--mSpeed) ease-out .5s both,
		fi var(--fSpeed) ease-out .5s both,
		bl var(--bSpeed) ease-out .5s both;
}

.fi-b-ltr-full{
	opacity:var(--fStart);
	margin-left:var(--mStartF);
	filter: blur(var(--bStr));
	animation: 
		ltrF var(--mSpeed) ease-out .5s both,
		fi var(--fSpeed) ease-out .5s both,
		bl var(--bSpeed) ease-out .5s both;
}

.fi-b-rtl{
	opacity:var(--fStart);
	margin-right:var(--mStart);
	filter: blur(var(--bStr));
	animation: 
		rtl var(--mSpeed) ease-out .5s both,
		fi var(--fSpeed) ease-out .5s both,
		bl var(--bSpeed) ease-out .5s both;
}

.fi-b-rtl-full{
	opacity:var(--fStart);
	margin-right:var(--mStart);
	filter: blur(var(--bStr));
	animation: 
		rtlF var(--mSpeed) ease-out .5s both,
		fi var(--fSpeed) ease-out .5s both,
		bl var(--bSpeed) ease-out .5s both;
}

.fi-b-btt{
	opacity:var(--fStart);
	margin-bottom:var(--mStart);
	filter: blur(var(--bStr));
	animation:
		btt var(--mSpeed) ease-out .5s both,
		fi var(--fSpeed) ease-out .5s both,
		bl var(--bSpeed) ease-out .5s both;
}

.fi-b-btt-full{
	opacity:var(--fStart);
	margin-bottom:var(--mStartF);
	filter: blur(var(--bStr));
	animation:
		bttF var(--mSpeed) ease-out .5s both,
		fi var(--fSpeed) ease-out .5s both,
		bl var(--bSpeed) ease-out .5s both;
}

.fi-b-ttb{
	opacity:var(--fStart);
	margin-top:var(--mStart);
	filter: blur(var(--bStr));
	animation:
		ttb var(--mSpeed) ease-out .5s both,
		fi var(--fSpeed) ease-out .5s both,
		bl var(--bSpeed) ease-out .5s both;
}

.fi-b-ttb-full{
	opacity:var(--fStart);
	margin-top:var(--mStart);
	filter: blur(var(--bStr));
	animation:
		ttbF var(--mSpeed) ease-out .5s both,
		fi var(--fSpeed) ease-out .5s both,
		bl var(--bSpeed) ease-out .5s both;
}

.b-ltr{
	margin-left:var(--mStart);
	filter: blur(var(--bStr));
	animation: 
		ltr var(--mSpeed) ease-out .5s both,
		bl var(--bSpeed) ease-out .5s both;
}

.b-ltr-full{
	margin-left:var(--mStartF);
	filter: blur(var(--bStr));
	animation: 
		ltrF var(--mSpeed) ease-out .5s both,
		bl var(--bSpeed) ease-out .5s both;
}

.b-rtl{
	margin-right:var(--mStartF);
	filter: blur(var(--bStr));
	animation: 
		rtl var(--mSpeed) ease-out .5s both,
		bl var(--bSpeed) ease-out .5s both;
}

.b-rtl-full{
	margin-right:var(--mStartF);
	filter: blur(var(--bStr));
	animation: 
		rtlF var(--mSpeed) ease-out both,
		bl var(--bSpeed) ease-out both;
}

.b-btt{
	margin-bottom:var(--mStart);
	filter: blur(var(--bStr));
	animation:
		btt var(--mSpeed) ease-out .5s both,
		bl var(--bSpeed) ease-out .5s both;
}

.b-btt-full{
	margin-bottom:var(--mStartF);
	filter: blur(var(--bStr));
	animation:
		bttF var(--mSpeed) ease-out .5s both,
		bl var(--bSpeed) ease-out .5s both;
}

.b-ttb{
	margin-top:var(--mStart);
	filter: blur(var(--bStr));
	animation:
		ttb var(--mSpeed) ease-out .5s both,
		bl var(--bSpeed) ease-out .5s both;
}

.b-ttb-full{
	margin-top:var(--mStart);
	filter: blur(var(--bStr));
	animation:
		ttbF var(--mSpeed) ease-out .5s both,
		bl var(--bSpeed) ease-out .5s both;
}


.b, .b-full{
	filter: blur(var(--bStr));
	animation:
		bl var(--bSpeed) ease-out .5s both;
}

.fi, .fi-full{
	opacity:var(--fStart);
	animation:
		fi var(--fSpeed) ease-out .5s both;
}

.fi-b, .fi-b-full{
	opacity:var(--fStart);
	filter: blur(var(--bStr));
	animation:
		fi var(--fSpeed) ease-out .5s both,
		bl var(--bSpeed) ease-out .5s both;
}


/* keyframes */

@keyframes ltr{
	100%{
		margin-left:var(--mStop);
	}
}

@keyframes ltrF{
	100%{
		margin-left:var(--mStopF);
	}
}


@keyframes rtl{
	100%{
		margin-right:var(--mStop);
	}
}


@keyframes rtlF{
	100%{
		margin-right:var(--mStopF);
	}
}


@keyFrames bl{
	100%{
		filter: blur(var(--bStop));
	}
}

@keyFrames btt{
	100%{
		margin-bottom:var(--mStop);
	}
}

@keyFrames bttF{
	100%{
		margin-bottom:var(--mStopF);
	}
}

@keyFrames ttb{
	100%{
		margin-top:var(--mStop);
	}
}

@keyFrames ttbF{
	100%{
		margin-top:var(--mStopF);
	}
}

@keyframes fi{
	100%{
		opacity:var(--fStop);
	}
}