@media (orientation: portrait) {
	html.address-bar-fix,  html.address-bar-fix body{
		height: 100%;
		overflow:hidden;
	}

	html.address-bar-fix body {
		-webkit-overflow-scrolling: touch;
		overflow-y: scroll;
	}
}

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

[data-state-class].no-anim {
	transition: none !important;
	animation: none !important;
	opacity: 1 !important;
	transform:  translate3d(0, 0, 0) !important;
}

[data-state-class="fadeIn"] { 
	opacity:  0;
}

[data-state-class="fadeIn"].skrollable-after {
	animation: fadeIn .75s ease both;
}

[data-state-class="fadeInRight"] { 
	opacity:  0;
}

[data-state-class="fadeInRight"].skrollable-after {
	animation: fadeInRight .75s ease both;
}

[data-state-class="fadeInLeft"] { 
	opacity:  0;
}

[data-state-class="fadeInLeft"].skrollable-after {
	animation: fadeInLeft .75s ease both;
}

[data-state-class="fadeInUp"] { 
	opacity:  0;
}

[data-state-class="fadeInUp"].skrollable-after {
	animation: fadeInUp .75s ease both;
}

[data-state-class="fadeInDown"] { 
	opacity:  0;
}

[data-state-class="fadeInDown"].skrollable-after {
	animation: fadeInDown .75s ease both;
}

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

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

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

@keyframes fadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes fadeInRight {
	0% {
		opacity: 0;
		-webkit-transform:  translate3d(-150px, 0, 0);
		transform:  translate3d(-150px, 0, 0);
	}

	100% {
		opacity: 1;
		-webkit-transform:  translate3d(0px, 0, 0);
		transform:  translate3d(0px, 0, 0);
	}
}

@keyframes fadeInLeft {
	0% {
		opacity: 0;
		-webkit-transform:  translate3d(150px, 0, 0);
		transform:  translate3d(150px, 0, 0);
	}

	100% {
		opacity: 1;
		-webkit-transform:  translate3d(0px, 0, 0);
		transform:  translate3d(0px, 0, 0);
	}
}

@keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform:  translate3d(0, 100px, 0);
		transform:  translate3d(0, 100px, 0);
	}

	100% {
		opacity: 1;
		-webkit-transform:  translate3d(0px, 0, 0);
		transform:  translate3d(0px, 0, 0);
	}
}

@keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform:  translate3d(0, -100px, 0);
		transform:  translate3d(0, -100px, 0);
	}

	100% {
		opacity: 1;
		-webkit-transform:  translate3d(0px, 0, 0);
		transform:  translate3d(0px, 0, 0);
	}
}

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

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

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

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

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