[data-state-class] {
	-skrollr-emit-events: "true";
	-skrollr-animation-name: animElem;
}

[data-state-class="fadeIn"] {
	-webkit-transition: opacity .5s;
	transition: opacity .5s;
	opacity:  0;
}

[data-state-class="fadeIn"].skrollable-after {
	opacity:  1;
}

[data-state-class="fadeInRight"] {
	-webkit-transition: opacity .5s, -webkit-transform .5s;
	transition: opacity .5s, -webkit-transform .5s;
	transition: opacity .5s, transform .5s;
	transition: opacity .5s, transform .5s, -webkit-transform .5s;
	opacity:  0;
	-webkit-transform:  translate3d(-100px, 0, 0);
	transform:  translate3d(-100px, 0, 0);

}

[data-state-class="fadeInRight"].skrollable-after {
	opacity:  1;
	-webkit-transform:  translate3d(0px, 0, 0);
	transform:  translate3d(0px, 0, 0);
}

[data-state-class="fadeInLeft"] {
	-webkit-transition: opacity .5s, -webkit-transform .5s;
	transition: opacity .5s, -webkit-transform .5s;
	transition: opacity .5s, transform .5s;
	transition: opacity .5s, transform .5s, -webkit-transform .5s;
	opacity:  0;
	-webkit-transform:  translate3d(100px, 0, 0);
	transform:  translate3d(100px, 0, 0);
}

[data-state-class="fadeInLeft"].skrollable-after {
	opacity:  1;
	-webkit-transform:  translate3d(0px, 0, 0);
	transform:  translate3d(0px, 0, 0);
}

[data-state-class="fadeInUp"] {
	-webkit-transition: opacity .5s, -webkit-transform .5s;
	transition: opacity .5s, -webkit-transform .5s;
	transition: opacity .5s, transform .5s;
	transition: opacity .5s, transform .5s, -webkit-transform .5s;
	opacity:  0;
	-webkit-transform:  translate3d(0, 100px, 0);
	transform:  translate3d(0, 100px, 0);
}

[data-state-class="fadeInUp"].skrollable-after {
	opacity:  1;
	-webkit-transform:  translate3d(0px, 0, 0);
	transform:  translate3d(0px, 0, 0);
}

[data-state-class="fadeInDown"] {
	-webkit-transition: opacity .5s, -webkit-transform .5s;
	transition: opacity .5s, -webkit-transform .5s;
	transition: opacity .5s, transform .5s;
	transition: opacity .5s, transform .5s, -webkit-transform .5s;
	opacity:  0;
	-webkit-transform:  translate3d(0, -100px, 0);
	transform:  translate3d(0, -100px, 0);
}

[data-state-class="fadeInDown"].skrollable-after {
	opacity:  1;
	-webkit-transform:  translate3d(0px, 0, 0);
	transform:  translate3d(0px, 0, 0);
}

[data-state-class="queueAnim"] {
	-skrollr-animation-name: queueAnim;
}

[data-state-class="queueAnimFull"] {
	-skrollr-animation-name: queueAnimFull;
}

[data-state-class] {
	display: block;
}

/*
* 100 - block offset . Values : 10 (px), 10vw (vw), 10p (%)
* ! - important to use before value
*/
@-skrollr-keyframes animElem {
	bottom-top {
		-webkit-backface-visibility: !hidden;
		        backface-visibility: !hidden;
	}

	-100-bottom-top {
		-webkit-backface-visibility: !hidden;
		        backface-visibility: !hidden;
	}
}
/*
* for custom animation
* ! - important to use before value
*/
@-skrollr-keyframes queueAnim {
	bottom-top {
		-webkit-backface-visibility: !hidden;
		        backface-visibility: !hidden;
	}

	-100-bottom-top {
		-webkit-backface-visibility: !hidden;
		        backface-visibility: !hidden;
	}
}

@-skrollr-keyframes queueAnimFull {
	bottom-top {
		-webkit-backface-visibility: !hidden;
		        backface-visibility: !hidden;
	}

	bottom-top {
		-webkit-backface-visibility: !hidden;
		        backface-visibility: !hidden;
	}
}