/*
	Containers
*/

.scrollContainer {
	overflow-y: scroll;
	overflow-x: hidden;
	width: 100%
}
.scrollContainer {
	height: 100%;
	margin: auto;
}

#example-wrapper.scrollContainer .scrollContent {
	width: 100%;
	height: auto;
}
#example-wrapper.scrollContainer.horizontal .scrollContent {
	width: auto;
	height: 100%;
}
#example-wrapper.horizontal {
	white-space: nowrap;
	font-size: 0;  /* fix for spaces between inline block divs */
}


section.scroll-ani {
	
	text-align: center;
	background: #0E0E10;
}
section.scroll-ani.fullheight {
	min-height: 100%;
}
section.scroll-ani.doublewidth, .spacer.doublewidth {
	min-width: 200%;
}

/*
	Elements
*/

.spacer {
	text-align: center;
	min-height: 100px;
	
}
.spacer.s0 {
	min-height: 1px;
}
.spacer.s1 {
	min-height: 100px;
}
.spacer.s2 {
	min-height: 200px;
}
/*
.spacer.s3 {
	min-height: 300px;
}
*/
.spacer.s3 {
	min-height: 200px;
}
/*
.spacer.s3_9 {
	min-height: 390px;
}
*/
.spacer.s3_9 {
	min-height: 280px;
}
.spacer.s4 {
	min-height: 400px;
}
.spacer.s5 {
	min-height: 500px;
}
.spacer.s6 {
	min-height: 600px;
}
.spacer.s7 {
	min-height: 700px;
}
.spacer.s8 {
	min-height: 800px;
}
.spacer.s9 {
	min-height: 900px;
}
.spacer.s10 {
	min-height: 1000px;
}
.spacer.s_viewport {
	min-height: 100%;
}
.horizontal .spacer {
		margin-bottom: 0;
	min-height: initial;
	min-width: 100px;
	height: 100%;
	display: inline-block;
	vertical-align: top;
}
.horizontal .spacer.s0 {
	min-width: 1px;
}
.horizontal .spacer.s1 {
	min-width: 100px;
}
.horizontal .spacer.s2 {
	min-width: 200px;
}
.horizontal .spacer.s3 {
	min-width: 300px;
}
.horizontal .spacer.s4 {
	min-width: 400px;
}
.horizontal .spacer.s5 {
	min-width: 500px;
}
.horizontal .spacer.s6 {
	min-width: 600px;
}
.horizontal .spacer.s7 {
	min-width: 700px;
}
.horizontal .spacer.s8 {
	min-width: 800px;
}
.horizontal .spacer.s9 {
	min-width: 900px;
}
.horizontal .spacer.s10 {
	min-width: 1000px;
}
.spacer.s_viewport {
	min-width: 100%;
}

.box1, .box2, .box3 {
	display: inline-block;
	position: relative;
	border-radius: 8px;
	border: 0px solid white;
	text-align: center;
	vertical-align: middle;
	padding: 0 5px;
}
.box1 {
	min-width: 100px;
	height: 100px;
	margin: 0 auto 0 auto;
}
.box2 {
	min-width: 50px;
	height: 50px;
	margin: 25px auto 25px auto;
}
.box3 {
	min-width: 26px;
	height: 26px;
	margin: 37px auto 37px auto;
}

/*
	colors
*/

.Kartusche_leer {
	background-color: transparent;
z-index: 1000;
}
.Kartusche {
	background-color: transparent;
	z-index: 0!important;
}
.KartuscheText {
	background-color: transparent;
z-index: 1000;
}
.Deckel {
	background-color: transparent;
z-index: 1000;
}

@media only screen and (min-width: 1600px) and (max-width: 1920px) {
.KartuschenTextTiming { margin-top: -10em; }
    .spacer.s3 { min-height: 200px; }
.spacer.s3_9 { min-height: 280px; }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
img.Kartusche-size { max-width:270px; }
img.KartuscheInnen-size { max-width:231px; }
img.Deckel-size { max-width: 229px; }
.spacer.s3 { min-height: 100px; }
.spacer.s3_9 { min-height: 160px; }

.KartuschenTextTiming { margin-top: -18em; }
}
@media (max-width: 767px) {
.spacer.s3 { min-height: 230px; }
.spacer.s3_9 { min-height: 270px; }
}
/* --------- your css rules for ipad portrait ---------- */
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
.spacer.s3 { min-height: 230px; }
.spacer.s3_9 { min-height: 270px;  }
.KartuschenTextTiming { margin-top: -20em; padding-top: 0;}
}
/* --------- your css rules for ipad landscape ---------- */
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) {
.panel { height: 80vh; }
.KartuschenTextTiming { margin-top: -15em; }
}
@media only screen and (max-width: 479px) {
.panel { height: 80vh; }
img.Kartusche-size { max-width:220px; }
img.KartuscheInnen-size { max-width:190px; }
img.Deckel-size { max-width: 190px; }
.spacer.s3 { min-height: 100px; }
.spacer.s3_9 { min-height: 160px; }

.KartuschenTextTiming { margin-top: -20em; padding-top: 0; }
}