﻿html{ padding: 0; margin: 0; overflow: hidden;  }
body{ padding: 0; margin: 0; overflow: hidden; }
#skrollr-body, .skrollr-body{ height: auto !important; }


.debug-info{ position: absolute; left: 0; top: 0; font-family: Verdana; padding: 5px; color: green; background-color: #FFF; z-index: 999; white-space: nowrap; border: 1px solid #ddd; width: auto; height auto;}
.debug-info .info1, .debug-info .info2{ width: auto; height: auto; font-family: Verdana; padding: 5px; color: green; background-color: #FFF; white-space: nowrap;}
.debug-buttons{ position: absolute; right: 0; top: 0; font-family: Verdana; padding: 5px; color: green; background-color: #FFF; z-index: 999; white-space: nowrap; border: 1px solid #ddd; width: auto; height auto;}
.debug-buttons .up-button, .debug-buttons .down-button{ display: block; padding: 20px 10px; font-weight:bold; background-color: #b60002; color: #FFF; text-decoration: none; text-align: center;}
.debug-buttons .up-button{ margin-bottom: 10px;}

.gap{ width: 100vw; height: 100vh; overflow: hidden;  min-height: 300px; background-color: #EEE; position: relative;}
.parallax-image{ width: 100vw; height: 100vh; background-size: cover; background-position: 50% 50%; position: absolute; z-index: 2; top: 0; left: 0; right: 0; bottom: 0;
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
}
.s-content{ font-size: 20px; line-height: 150%; }
.s-content .pagewidth{ max-width: 960px; left: 50% !important;	transform: translate(-50%, 0);  }

.gap .content-parallax{ z-index: 2; 
	transform: translate3d(0px, 0px, 0px);
	-webkit-transform: translate3d(0px, 0px, 0px);
	-moz-transform: translate3d(0px, 0px, 0px);
	-o-transform: translate3d(0px, 0px, 0px);
	-ms-transform: translate3d(0px, 0px, 0px);
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
}
.gap.mobile-add-smallimg{ display: none; }

@media only screen and (max-width: 1024px) 
{
	.gap.static-mobile .content-parallax.parallax-text.transparent{ bottom: 5px !important; }
}
@media only screen and (max-width: 768px) 
{
	.s-content .pagewidth{ left: 0 !important;	transform: none;  }	
	.gap{ height: 70vh !important; }
	.gap.static-mobile{ height: 100vh !important; }
	.parallax-image{ 
		transform: none !important;
		-webkit-transform: none !important;
		-moz-transform: none !important;
		-o-transform: none !important;
		-ms-transform: none !important;
		height: 70vh !important; 
	}
	.gap.static-mobile .parallax-image{ height: 100vh !important; }
	.gap.static-mobile .parallax-image, .gap.static-mobile .parallax-image.mobile-img{ display:none !important;}
	.content-parallax.parallax-text.transparent{ position: static !important; }
}
@media only screen and (max-width: 450px) 
{
	.gap.mobile-add-smallimg{ height: 30vh !important; display: block; }	
	.plx-hidemobile{ display: none !important; }
}