/*Stylesheet fuer die Provico Homepage, Version 6 vom Dezember 2019*/

	/* Lagert Styling Module aus, die hier includiert werden können, so dass hier reines CSS steht */

	/* Setzt für alle Browser, alle Stylesheetvorgaben auf Null */
*, ::before, ::after { 
	box-sizing:		border-box; 
	padding:		0;
	margin:			0;
	border:			0;
}

body {
	background-color:		#eeeeee;
	font:					1em arial, helvetica, verdana, sans-serif;
	color:					#101010;
	-ms-hyphens:			auto;
	-webkit-hyphens:		auto;
	hyphens:				auto;
	overflow-y:				scroll;
	overflow-x:				hidden;
	height:					750vh;
}

.relativwrapper { position:	relative; }

.vollschirm {
	width:					100%;
	height:					100vh;
	display:				-webkit-flex;
	display:				-webkit-box;
	display:				-ms-flexbox;
	display:				flex;
	-webkit-align-items:	center;
	-webkit-box-align:		center;
	-ms-flex-align:			center;
	align-items:			center;
}

.vollschirm div { margin: auto }

.anzeiger { cursor:		pointer }

.opak{	background-color:	rgba(255,255,255,0.66); }

	/* Einbindung von komplett eigen formatierten Untermenue-Seiten */
iframe{
		border:		none;
		width:		100%;
		height:		87.5vh;
}

/* Styling Module zum laden ab hier */
	/* Hier das RASTER, dass alle Inhalte mittig macht */
.raster{
	display:				-webkit-grid;
	display:				-ms-grid;
	display:				grid;
	-webkit-grid-columns:	1fr minmax(15em, 45em) 1fr;
	-ms-grid-columns:		1fr minmax(15em, 45em) 1fr;
	grid-template-columns:	auto minmax(15em, 45em) auto;
	-webkit-grid-rows: 		auto auto auto;
	-ms-grid-rows: 			auto auto auto;
}
.zeile01{
	-webkit-grid-row:	1;
	-ms-grid-row:		1;
}
.zeile02{
	-webkit-grid-row:	2;
	-ms-grid-row:		2;
}
.zeile03{
	-webkit-grid-row:	3;
	-ms-grid-row:		3;
}
.inzweitespalte{
	-webkit-grid-column:		2;
	-webkit-grid-column-span:	1;
	-ms-grid-column:			2;
	-ms-grid-column-span:		1;
	grid-column:				2 / span 1;
}
.tiefindiezweitespalte{
	z-index:					-99;
	-webkit-grid-column:		2;
	-webkit-grid-column-span:	1;
	-ms-grid-column:			2;
	-ms-grid-column-span:		1;
	grid-column:				2 / span 1;
	overflow:					hidden;
}
#nichtscrollen {
	overflow:	hidden;
}
	/* SPOILER-CONTAINER von Florian Zier modifiziert von Matthias Zoellner, ProViCo */

	/*bringt alle Checkboxen global in die linke obere Ecke des Elements und macht sie unsichtbar */
input[type=checkbox] {
		position:	absolute;
		opacity:	0.0;
}

.checkspoiler {
	position:		relative;
}

	/* Verschiebt die Beschriftung der Label-Menuepunkte um Platz fuer die Grafik-Knoepfe zu machen  */
.checkbox {
        display: 		block;
        cursor:			pointer;
		padding-left:	5em;
		height:			2em;
		width:			auto;
		padding-top:	0.66em;
		padding-bottom:	2em;
}

	/* Grafik und Hintergrund der Label-Menuepunkte */
.checkspoiler > input[type=checkbox]:first-child + span {
		background:				url(../grafik/vector/knopfmachgross.svg) no-repeat;
		background-color:		rgba(255,255,255,0.75);
		background-size:		3em;
		background-position:	left 1em top .5em;
}
.checkspoiler > input[type=checkbox]:first-child:checked + span {
		background:				url(../grafik/vector/knopfmachklein.svg) no-repeat;
		background-color:		rgba(255,255,255,0.75);
		background-size:		3em;
		background-position:	left 1em top .5em;

}

	/* Ein-/Ausfahren des Inhalts mit Animation */
	/* dieses div oeffnet unchecked */
.checkspoiler > input[type=checkbox]:first-child:checked ~ div {
	overflow:		hidden;
	padding-left:	1em;
	max-height:		0px;
	transition: 	all 0.8s ease 0.0s;
}
.checkspoiler > input[type=checkbox]:first-child~ div {
	overflow:		auto;
	overflow-y:		hidden;
	padding-left:	1em;
	max-height:		300em;
	transition: 	all 4.0s ease 0.0s;
}
	/* diese section schliesst unchecked */
.checkspoiler > input[type=checkbox]:first-child ~ section {
	overflow:		hidden;
	max-height:		0px;
	transition: 	all 0.8s ease 0.0s;
}
.checkspoiler > input[type=checkbox]:first-child:checked ~ section {
	overflow:		auto;
	overflow-y:		hidden;
	max-height:		300em;
	transition: 	all 4.0s ease 0.0s;
}
	/* BULLETS Hier die Styles fuer alle Textblöcke */
.bullet {
	padding-right:		1em;
	padding-left:		0.5em;
}
.bullet p {
	padding-left:		2.25em;
	margin-bottom:		0.5em;
	background:			url(../grafik/vector/bullet.svg) no-repeat;
	background-position:0 0.33em;
	background-size:	0.66em;
	line-height:		135%;
	letter-spacing: 0.075em;
}
.bullet h2 {
	margin-bottom:		0.5em;
	font:				1.5em arial, helvetica, verdana, sans-serif;
	letter-spacing: 	0.175em;
	color:				#5a5a5a;
}
.bullet table {
	padding-left:		2.25em;
	margin-bottom:		0.5em;
	background:			url(../grafik/vector/bullet.svg) no-repeat;
	background-position:0 0.33em;
	background-size:	0.66em;
	border:				0;
}
.bullet img{
	height: 1.5em;
	width:	100%;
}
table.colright td:nth-child(1) {
  text-align: 			right;
}

	/* Hier alles Styling, das mit Bildern zu tun hat */

img{ 	width:				100%; }

#hintergrund{
	background:				url(../grafik/bilder/hintergrund.jpg) no-repeat;
	background-size:		100% 100vh;
	background-position:	top left;
	background-attachment:	fixed;
}

.sehschlitz{
/* 	grid-column:			1 / 4; */
	height:					75vh;
	overflow:				hidden;
	display:				-webkit-flex;
	display:				-webkit-box;
	display:				-ms-flexbox;
	-webkit-align-items:	center;
	-webkit-box-align:		center;
	-ms-flex-align:			center;
	display:				flex;
	align-items:			center;
	justify-content:		center;
}
.sehschlitz h3{
	padding: 0.0em 0.25em;
	font:		2em arial, helvetica, verdana, sans-serif;
}

/* Hier die Animationssequenz fuer die Diaschau, erzeugt mit programm.php */
.slideshow {
	position:			relativ;
	width:				100%;
	height:				66vh;
	overflow:			hidden;
	-webkit-transform:	scale(1.0811);
	transform:			scale(1.0811);
	}

.slideshow-image {
	position:							absolute;
	width:								100%;
	height:								100%;
	background-size:					cover;
	overflow:							hidden;
	-webkit-animation-name:				zoomOut;
	animation-name:						zoomOut;
	-webkit-animation-timing-function:	linear;
	animation-timing-function:			linear;
	-webkit-animation-iteration-count:	infinite;
	animation-iteration-count:			infinite;
	-webkit-animation-duration:			104s;
	animation-duration:					104s;
	opacity:							1;
	-webkit-transform:					scale(0.925);
	transform:							scale(0.925);
	}

.slideshow-image:nth-child(1) {
		-webkit-animation-name:		zoomOut-1;
		animation-name:				zoomOut-1;
		z-index:					12;
		}

.slideshow-image:nth-child(2) {
		-webkit-animation-name:		zoomOut-2;
		animation-name:				zoomOut-2;
		z-index:					11;
		}

.slideshow-image:nth-child(3) {
		-webkit-animation-name:		zoomOut-3;
		animation-name:				zoomOut-3;
		z-index:					10;
		}

.slideshow-image:nth-child(4) {
		-webkit-animation-name:		zoomOut-4;
		animation-name:				zoomOut-4;
		z-index:					9;
		}

.slideshow-image:nth-child(5) {
		-webkit-animation-name:		zoomOut-5;
		animation-name:				zoomOut-5;
		z-index:					8;
		}

.slideshow-image:nth-child(6) {
		-webkit-animation-name:		zoomOut-6;
		animation-name:				zoomOut-6;
		z-index:					7;
		}

.slideshow-image:nth-child(7) {
		-webkit-animation-name:		zoomOut-7;
		animation-name:				zoomOut-7;
		z-index:					6;
		}

.slideshow-image:nth-child(8) {
		-webkit-animation-name:		zoomOut-8;
		animation-name:				zoomOut-8;
		z-index:					5;
		}

.slideshow-image:nth-child(9) {
		-webkit-animation-name:		zoomOut-9;
		animation-name:				zoomOut-9;
		z-index:					4;
		}

.slideshow-image:nth-child(10) {
		-webkit-animation-name:		zoomOut-10;
		animation-name:				zoomOut-10;
		z-index:					3;
		}

.slideshow-image:nth-child(11) {
		-webkit-animation-name:		zoomOut-11;
		animation-name:				zoomOut-11;
		z-index:					2;
		}

.slideshow-image:nth-child(12) {
		-webkit-animation-name:		zoomOut-12;
		animation-name:				zoomOut-12;
		z-index:					1;
		}

.slideshow-image:nth-child(13) {
		-webkit-animation-name:		zoomOut-13;
		animation-name:				zoomOut-13;
		z-index:					0;
		}

@-webkit-keyframes
		zoomOut-1{
			0% {
				opacity:	1;
				-webkit-transform:	scale(0.925);
			}
			0.3606% {
				opacity:	1;
			}
			7.3317% {
				opacity:	1;
			}
			8.0529% {
				opacity:	0;
				-webkit-transform:	scale(1);
			}
			
			100% {
				opacity:	0;
				transform:	scale(0.925);
			}
			
			99.6394% {
				opacity:	0;
				transform: scale(0.9216);
			}
			100% { opacity: 1; }
		}

@keyframes
		zoomOut-1{
			0% {
				opacity:	1;
				transform:	scale(0.925);
			}
			0.3606% {
				opacity:	1;
			}
			7.3317% {
				opacity:	1;
			}
			8.0529% {
				opacity:	0;
				transform:	scale(1);
			}
			
			100% {
				opacity:	0;
				transform:	scale(0.925);
			}
			
			99.6394% {
				opacity:	0;
				transform: scale(0.9216);
			}
			100% { opacity: 1; }
		}

@-webkit-keyframes
		zoomOut-2{
			7.3317% {
				opacity:	1;
				-webkit-transform:	scale(0.925);
			}
			8.0529% {
				opacity:	1;
			}
			15.024% {
				opacity:	1;
			}
			15.7452% {
				opacity:	0;
				-webkit-transform:	scale(1);
			}
			
			100% {
				opacity:	0;
				transform:	scale(0.925);
			}
			
		}

@keyframes
		zoomOut-2{
			7.3317% {
				opacity:	1;
				transform:	scale(0.925);
			}
			8.0529% {
				opacity:	1;
			}
			15.024% {
				opacity:	1;
			}
			15.7452% {
				opacity:	0;
				transform:	scale(1);
			}
			
			100% {
				opacity:	0;
				transform:	scale(0.925);
			}
			
		}

@-webkit-keyframes
		zoomOut-3{
			15.024% {
				opacity:	1;
				-webkit-transform:	scale(0.925);
			}
			15.7452% {
				opacity:	1;
			}
			22.7163% {
				opacity:	1;
			}
			23.4375% {
				opacity:	0;
				-webkit-transform:	scale(1);
			}
			
			100% {
				opacity:	0;
				transform:	scale(0.925);
			}
			
		}

@keyframes
		zoomOut-3{
			15.024% {
				opacity:	1;
				transform:	scale(0.925);
			}
			15.7452% {
				opacity:	1;
			}
			22.7163% {
				opacity:	1;
			}
			23.4375% {
				opacity:	0;
				transform:	scale(1);
			}
			
			100% {
				opacity:	0;
				transform:	scale(0.925);
			}
			
		}

@-webkit-keyframes
		zoomOut-4{
			22.7163% {
				opacity:	1;
				-webkit-transform:	scale(0.925);
			}
			23.4375% {
				opacity:	1;
			}
			30.4087% {
				opacity:	1;
			}
			31.1298% {
				opacity:	0;
				-webkit-transform:	scale(1);
			}
			
			100% {
				opacity:	0;
				transform:	scale(0.925);
			}
			
		}

@keyframes
		zoomOut-4{
			22.7163% {
				opacity:	1;
				transform:	scale(0.925);
			}
			23.4375% {
				opacity:	1;
			}
			30.4087% {
				opacity:	1;
			}
			31.1298% {
				opacity:	0;
				transform:	scale(1);
			}
			
			100% {
				opacity:	0;
				transform:	scale(0.925);
			}
			
		}

@-webkit-keyframes
		zoomOut-5{
			30.4087% {
				opacity:	1;
				-webkit-transform:	scale(0.925);
			}
			31.1298% {
				opacity:	1;
			}
			38.101% {
				opacity:	1;
			}
			38.8221% {
				opacity:	0;
				-webkit-transform:	scale(1);
			}
			
			100% {
				opacity:	0;
				transform:	scale(0.925);
			}
			
		}

@keyframes
		zoomOut-5{
			30.4087% {
				opacity:	1;
				transform:	scale(0.925);
			}
			31.1298% {
				opacity:	1;
			}
			38.101% {
				opacity:	1;
			}
			38.8221% {
				opacity:	0;
				transform:	scale(1);
			}
			
			100% {
				opacity:	0;
				transform:	scale(0.925);
			}
			
		}

@-webkit-keyframes
		zoomOut-6{
			38.101% {
				opacity:	1;
				-webkit-transform:	scale(0.925);
			}
			38.8221% {
				opacity:	1;
			}
			45.7933% {
				opacity:	1;
			}
			46.5144% {
				opacity:	0;
				-webkit-transform:	scale(1);
			}
			
			100% {
				opacity:	0;
				transform:	scale(0.925);
			}
			
		}

@keyframes
		zoomOut-6{
			38.101% {
				opacity:	1;
				transform:	scale(0.925);
			}
			38.8221% {
				opacity:	1;
			}
			45.7933% {
				opacity:	1;
			}
			46.5144% {
				opacity:	0;
				transform:	scale(1);
			}
			
			100% {
				opacity:	0;
				transform:	scale(0.925);
			}
			
		}

@-webkit-keyframes
		zoomOut-7{
			45.7933% {
				opacity:	1;
				-webkit-transform:	scale(0.925);
			}
			46.5144% {
				opacity:	1;
			}
			53.4856% {
				opacity:	1;
			}
			54.2067% {
				opacity:	0;
				-webkit-transform:	scale(1);
			}
			
			100% {
				opacity:	0;
				transform:	scale(0.925);
			}
			
		}

@keyframes
		zoomOut-7{
			45.7933% {
				opacity:	1;
				transform:	scale(0.925);
			}
			46.5144% {
				opacity:	1;
			}
			53.4856% {
				opacity:	1;
			}
			54.2067% {
				opacity:	0;
				transform:	scale(1);
			}
			
			100% {
				opacity:	0;
				transform:	scale(0.925);
			}
			
		}

@-webkit-keyframes
		zoomOut-8{
			53.4856% {
				opacity:	1;
				-webkit-transform:	scale(0.925);
			}
			54.2067% {
				opacity:	1;
			}
			61.1779% {
				opacity:	1;
			}
			61.899% {
				opacity:	0;
				-webkit-transform:	scale(1);
			}
			
			100% {
				opacity:	0;
				transform:	scale(0.925);
			}
			
		}

@keyframes
		zoomOut-8{
			53.4856% {
				opacity:	1;
				transform:	scale(0.925);
			}
			54.2067% {
				opacity:	1;
			}
			61.1779% {
				opacity:	1;
			}
			61.899% {
				opacity:	0;
				transform:	scale(1);
			}
			
			100% {
				opacity:	0;
				transform:	scale(0.925);
			}
			
		}

@-webkit-keyframes
		zoomOut-9{
			61.1779% {
				opacity:	1;
				-webkit-transform:	scale(0.925);
			}
			61.899% {
				opacity:	1;
			}
			68.8702% {
				opacity:	1;
			}
			69.5913% {
				opacity:	0;
				-webkit-transform:	scale(1);
			}
			
			100% {
				opacity:	0;
				transform:	scale(0.925);
			}
			
		}

@keyframes
		zoomOut-9{
			61.1779% {
				opacity:	1;
				transform:	scale(0.925);
			}
			61.899% {
				opacity:	1;
			}
			68.8702% {
				opacity:	1;
			}
			69.5913% {
				opacity:	0;
				transform:	scale(1);
			}
			
			100% {
				opacity:	0;
				transform:	scale(0.925);
			}
			
		}

@-webkit-keyframes
		zoomOut-10{
			68.8702% {
				opacity:	1;
				-webkit-transform:	scale(0.925);
			}
			69.5913% {
				opacity:	1;
			}
			76.5625% {
				opacity:	1;
			}
			77.2837% {
				opacity:	0;
				-webkit-transform:	scale(1);
			}
			
			100% {
				opacity:	0;
				transform:	scale(0.925);
			}
			
		}

@keyframes
		zoomOut-10{
			68.8702% {
				opacity:	1;
				transform:	scale(0.925);
			}
			69.5913% {
				opacity:	1;
			}
			76.5625% {
				opacity:	1;
			}
			77.2837% {
				opacity:	0;
				transform:	scale(1);
			}
			
			100% {
				opacity:	0;
				transform:	scale(0.925);
			}
			
		}

@-webkit-keyframes
		zoomOut-11{
			76.5625% {
				opacity:	1;
				-webkit-transform:	scale(0.925);
			}
			77.2837% {
				opacity:	1;
			}
			84.2548% {
				opacity:	1;
			}
			84.976% {
				opacity:	0;
				-webkit-transform:	scale(1);
			}
			
			100% {
				opacity:	0;
				transform:	scale(0.925);
			}
			
		}

@keyframes
		zoomOut-11{
			76.5625% {
				opacity:	1;
				transform:	scale(0.925);
			}
			77.2837% {
				opacity:	1;
			}
			84.2548% {
				opacity:	1;
			}
			84.976% {
				opacity:	0;
				transform:	scale(1);
			}
			
			100% {
				opacity:	0;
				transform:	scale(0.925);
			}
			
		}

@-webkit-keyframes
		zoomOut-12{
			84.2548% {
				opacity:	1;
				-webkit-transform:	scale(0.925);
			}
			84.976% {
				opacity:	1;
			}
			91.9471% {
				opacity:	1;
			}
			92.6683% {
				opacity:	0;
				-webkit-transform:	scale(1);
			}
			
			100% {
				opacity:	0;
				transform:	scale(0.925);
			}
			
		}

@keyframes
		zoomOut-12{
			84.2548% {
				opacity:	1;
				transform:	scale(0.925);
			}
			84.976% {
				opacity:	1;
			}
			91.9471% {
				opacity:	1;
			}
			92.6683% {
				opacity:	0;
				transform:	scale(1);
			}
			
			100% {
				opacity:	0;
				transform:	scale(0.925);
			}
			
		}

@-webkit-keyframes
		zoomOut-13{
			91.9471% {
				opacity:	1;
				-webkit-transform:	scale(0.925);
			}
			92.6683% {
				opacity:	1;
			}
			99.6394% {
				opacity:	1;
			}
			100% {
				opacity:	0;
				-webkit-transform:	scale(1);
			}
			
			
		}

@keyframes
		zoomOut-13{
			91.9471% {
				opacity:	1;
				transform:	scale(0.925);
			}
			92.6683% {
				opacity:	1;
			}
			99.6394% {
				opacity:	1;
			}
			100% {
				opacity:	0;
				transform:	scale(1);
			}
			
			
		}

/* Hier alle IDs fuer die Diaschau, erzeugt mit programm.php */

 #handschuh { background: url(../grafik/diaschau/handschuh.jpg) no-repeat;
			background-position:	center;
			background-size:		100% auto;
			background-attachment:	fixed; }
 #iguacubraun { background: url(../grafik/diaschau/iguacubraun.jpg) no-repeat;
			background-position:	center;
			background-size:		100% auto;
			background-attachment:	fixed; }
 #iguacugruen { background: url(../grafik/diaschau/iguacugruen.jpg) no-repeat;
			background-position:	center;
			background-size:		100% auto;
			background-attachment:	fixed; }
 #lok { background: url(../grafik/diaschau/lok.jpg) no-repeat;
			background-position:	center;
			background-size:		100% auto;
			background-attachment:	fixed; }
 #nebel { background: url(../grafik/diaschau/nebel.jpg) no-repeat;
			background-position:	center;
			background-size:		100% auto;
			background-attachment:	fixed; }
 #niki { background: url(../grafik/diaschau/niki.jpg) no-repeat;
			background-position:	center;
			background-size:		100% auto;
			background-attachment:	fixed; }
 #orchid { background: url(../grafik/diaschau/orchid.jpg) no-repeat;
			background-position:	center;
			background-size:		100% auto;
			background-attachment:	fixed; }
 #ringe { background: url(../grafik/diaschau/ringe.jpg) no-repeat;
			background-position:	center;
			background-size:		100% auto;
			background-attachment:	fixed; }
 #schnecke { background: url(../grafik/diaschau/schnecke.jpg) no-repeat;
			background-position:	center;
			background-size:		100% auto;
			background-attachment:	fixed; }
 #schrecke { background: url(../grafik/diaschau/schrecke.jpg) no-repeat;
			background-position:	center;
			background-size:		100% auto;
			background-attachment:	fixed; }
 #veilchen { background: url(../grafik/diaschau/veilchen.jpg) no-repeat;
			background-position:	center;
			background-size:		100% auto;
			background-attachment:	fixed; }
 #waku { background: url(../grafik/diaschau/waku.jpg) no-repeat;
			background-position:	center;
			background-size:		100% auto;
			background-attachment:	fixed; }
 #wrack { background: url(../grafik/diaschau/wrack.jpg) no-repeat;
			background-position:	center;
			background-size:		100% auto;
			background-attachment:	fixed; }