@import url("../fonts/sketchybold/stylesheet.css");

/*der Hintergrundlayer*/
#slideshow {width:900px; height:700px; margin:0 0; position:relative;}
#slideshow .controls {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 900px;
	height: 40px;
	color: #FFF;
}
/*die umschalter*/
#slideshow .controls label {
	display: block;
	color: #FFF;
	font-size: 20px;
	font-family: segoe;
	background-color: rgba(0,0,0,0.4);
	width: 200px;
	text-align: center;
	float: left;
	cursor: pointer;
}
#slideshow .controls label:hover {background-color:rgba(200,54,54,0.5);}

/*das ist der patz an dem alle bilder Sind*/
.gallery {
	width: 800px;
	height: 600px;
	padding: 0x;
	position: absolute;
	left: 90px;
	top: 50px;
	opacity: 0;
	z-index: 10;
	overflow: hidden;
	-webkit-transition: opacity 0.5s ease-in-out;
	-moz-transition: opacity 0.5s ease-in-out;
	-o-transition: opacity 0.5s ease-in-out;
	transition: opacity 0.5s ease-in-out;
}
.gallery input {position:absolute; left:-9999px; display:none;}
/*die einzelnen Bildfelder*/
.gallery .holder {display:block; width:100px; height:100px; float:left; border:1px solid #000; border-color:#aaa #222 #111 #999;}
.gallery .holder:hover {background-color:rgba(200,54,54,0.5);}
.gallery .holder label {display:block; width:100px; height:100px; margin:0px; cursor:pointer;
background-color:transparent;
background-size:contain;
background-repeat:no-repeat;
background-position:center center;
-webkit-transition:0.5s 0.5s ease-in-out;
-moz-transition:0.5s 0.5s ease-in-out;
-o-transition:0.5s 0.5s ease-in-out;
transition:0.5s 0.5s ease-in-out;
}
#slideshow .gallery .holder label + p {padding:0px 0; margin:0; display:block; font:normal 20px sketchybold; position:absolute; left:0; bottom:-100px; width:100%; color:#fff; text-align:center; opacity:0; text-shadow:0 0 3px rgba(0,0,0,0.8);
-webkit-transition:0.5s ease-in-out;
-moz-transition:0.5s ease-in-out;
-o-transition:0.5s ease-in-out;
transition:0.5s ease-in-out;
}
#slideshow .gallery .holder label + p a {color:#6cf;}

/*erste gallerie*/
.gallery .holder #gal1_01 + label {background-image:url(../images/photos/gal1_01.jpg);}
.gallery .holder #gal1_02 + label {background-image:url(../images/photos/gal1_02.jpg);}
.gallery .holder #gal1_03 + label {background-image:url(../images/photos/gal1_03.jpg);}
.gallery .holder #gal1_04 + label {background-image:url(../images/photos/gal1_04.jpg);}
.gallery .holder #gal1_05 + label {background-image:url(../images/photos/gal1_05.jpg);}
.gallery .holder #gal1_06 + label {background-image:url(../images/photos/gal1_06.jpg);}
.gallery .holder #gal1_07 + label {background-image:url(../images/photos/gal1_07.jpg);}
.gallery .holder #gal1_08 + label {background-image:url(../images/photos/gal1_08.jpg);}
.gallery .holder #gal1_09 + label {background-image:url(../images/photos/gal1_09.jpg);}
.gallery .holder #gal1_10 + label {background-image:url(../images/photos/gal1_10.jpg);}
.gallery .holder #gal1_11 + label {background-image:url(../images/photos/gal1_11.jpg);}
.gallery .holder #gal1_12 + label {background-image:url(../images/photos/gal1_12.jpg);}
.gallery .holder #gal1_13 + label {background-image:url(../images/photos/gal1_13.jpg);}
.gallery .holder #gal1_14 + label {background-image:url(../images/photos/gal1_14.jpg);}
.gallery .holder #gal1_15 + label {background-image:url(../images/photos/gal1_15.jpg);}
.gallery .holder #gal1_16 + label {background-image:url(../images/photos/gal1_16.jpg);}
.gallery .holder #gal1_17 + label {background-image:url(../images/photos/gal1_17.jpg);}
.gallery .holder #gal1_18 + label {background-image:url(../images/photos/gal1_18.jpg);}
.gallery .holder #gal1_19 + label {background-image:url(../images/photos/gal1_19.jpg);}
.gallery .holder #gal1_20 + label {background-image:url(../images/photos/gal1_20.jpg);}
.gallery .holder #gal1_21 + label {background-image:url(../images/photos/gal1_21.jpg);}
.gallery .holder #gal1_22 + label {background-image:url(../images/photos/gal1_22.jpg);}
.gallery .holder #gal1_23 + label {background-image:url(../images/photos/gal1_23.jpg);}
.gallery .holder #gal1_24 + label {background-image:url(../images/photos/gal1_24.jpg);}
.gallery .holder #gal1_25 + label {background-image:url(../images/photos/gal1_25.jpg);}
.gallery .holder #gal1_26 + label {background-image:url(../images/photos/gal1_26.jpg);}
.gallery .holder #gal1_27 + label {background-image:url(../images/photos/gal1_27.jpg);}
.gallery .holder #gal1_28 + label {background-image:url(../images/photos/gal1_28.jpg);}
.gallery .holder #gal1_29 + label {background-image:url(../images/photos/gal1_29.jpg);}
.gallery .holder #gal1_30 + label {background-image:url(../images/photos/gal1_30.jpg);}
.gallery .holder #gal1_31 + label {background-image:url(../images/photos/gal1_31.jpg);}
.gallery .holder #gal1_32 + label {background-image:url(../images/photos/gal1_32.jpg);}
.gallery .holder #gal1_33 + label {background-image:url(../images/photos/gal1_33.jpg);}
.gallery .holder #gal1_34 + label {background-image:url(../images/photos/gal1_34.jpg);}
.gallery .holder #gal1_35 + label {background-image:url(../images/photos/gal1_35.jpg);}

/*zweite gallerie*/
.gallery .holder #gal2_01 + label {background-image:url(../images/photos/gal2_01.jpg);}
.gallery .holder #gal2_02 + label {background-image:url(../images/photos/gal2_02.jpg);}
.gallery .holder #gal2_03 + label {background-image:url(../images/photos/gal2_03.jpg);}
.gallery .holder #gal2_04 + label {background-image:url(../images/photos/gal2_04.jpg);}
.gallery .holder #gal2_05 + label {background-image:url(../images/photos/gal2_05.jpg);}
.gallery .holder #gal2_06 + label {background-image:url(../images/photos/gal2_06.jpg);}
.gallery .holder #gal2_07 + label {background-image:url(../images/photos/gal2_07.jpg);}
.gallery .holder #gal2_08 + label {background-image:url(../images/photos/gal2_08.jpg);}
.gallery .holder #gal2_09 + label {background-image:url(../images/photos/gal2_09.jpg);}
.gallery .holder #gal2_10 + label {background-image:url(../images/photos/gal2_10.jpg);}
.gallery .holder #gal2_11 + label {background-image:url(../images/photos/gal2_11.jpg);}
.gallery .holder #gal2_12 + label {background-image:url(../images/photos/gal2_12.jpg);}
.gallery .holder #gal2_13 + label {background-image:url(../images/photos/gal2_13.jpg);}
.gallery .holder #gal2_14 + label {background-image:url(../images/photos/gal2_14.jpg);}
.gallery .holder #gal2_15 + label {background-image:url(../images/photos/gal2_15.jpg);}
.gallery .holder #gal2_16 + label {background-image:url(../images/photos/gal2_16.jpg);}
.gallery .holder #gal2_17 + label {background-image:url(../images/photos/gal2_17.jpg);}
.gallery .holder #gal2_18 + label {background-image:url(../images/photos/gal2_18.jpg);}
.gallery .holder #gal2_19 + label {background-image:url(../images/photos/gal2_19.jpg);}
.gallery .holder #gal2_20 + label {background-image:url(../images/photos/gal2_20.jpg);}
.gallery .holder #gal2_21 + label {background-image:url(../images/photos/gal2_21.jpg);}
.gallery .holder #gal2_22 + label {background-image:url(../images/photos/gal2_22.jpg);}
.gallery .holder #gal2_23 + label {background-image:url(../images/photos/gal2_23.jpg);}
.gallery .holder #gal2_24 + label {background-image:url(../images/photos/gal2_24.jpg);}
.gallery .holder #gal2_25 + label {background-image:url(../images/photos/gal2_25.jpg);}
.gallery .holder #gal2_26 + label {background-image:url(../images/photos/gal2_26.jpg);}
.gallery .holder #gal2_27 + label {background-image:url(../images/photos/gal2_27.jpg);}
.gallery .holder #gal2_28 + label {background-image:url(../images/photos/gal2_28.jpg);}
.gallery .holder #gal2_29 + label {background-image:url(../images/photos/gal2_29.jpg);}
.gallery .holder #gal2_30 + label {background-image:url(../images/photos/gal2_30.jpg);}
.gallery .holder #gal2_31 + label {background-image:url(../images/photos/gal2_31.jpg);}
.gallery .holder #gal2_32 + label {background-image:url(../images/photos/gal2_32.jpg);}
.gallery .holder #gal2_33 + label {background-image:url(../images/photos/gal2_33.jpg);}
.gallery .holder #gal2_34 + label {background-image:url(../images/photos/gal2_34.jpg);}
.gallery .holder #gal2_35 + label {background-image:url(../images/photos/gal2_35.jpg);}

/*dritte gallerie*/
.gallery .holder #gal3_01 + label {background-image:url(../images/photos/gal3_01.jpg);}
.gallery .holder #gal3_02 + label {background-image:url(../images/photos/gal3_02.jpg);}
.gallery .holder #gal3_03 + label {background-image:url(../images/photos/gal3_03.jpg);}
.gallery .holder #gal3_04 + label {background-image:url(../images/photos/gal3_04.jpg);}
.gallery .holder #gal3_05 + label {background-image:url(../images/photos/gal3_05.jpg);}
.gallery .holder #gal3_06 + label {background-image:url(../images/photos/gal3_06.jpg);}
.gallery .holder #gal3_07 + label {background-image:url(../images/photos/gal3_07.jpg);}
.gallery .holder #gal3_08 + label {background-image:url(../images/photos/gal3_08.jpg);}
.gallery .holder #gal3_09 + label {background-image:url(../images/photos/gal3_09.jpg);}
.gallery .holder #gal3_10 + label {background-image:url(../images/photos/gal3_10.jpg);}
.gallery .holder #gal3_11 + label {background-image:url(../images/photos/gal3_11.jpg);}
.gallery .holder #gal3_12 + label {background-image:url(../images/photos/gal3_12.jpg);}
.gallery .holder #gal3_13 + label {background-image:url(../images/photos/gal3_13.jpg);}
.gallery .holder #gal3_14 + label {background-image:url(../images/photos/gal3_14.jpg);}
.gallery .holder #gal3_15 + label {background-image:url(../images/photos/gal3_15.jpg);}
.gallery .holder #gal3_16 + label {background-image:url(../images/photos/gal3_16.jpg);}
.gallery .holder #gal3_17 + label {background-image:url(../images/photos/gal3_17.jpg);}
.gallery .holder #gal3_18 + label {background-image:url(../images/photos/gal3_18.jpg);}
.gallery .holder #gal3_19 + label {background-image:url(../images/photos/gal3_19.jpg);}
.gallery .holder #gal3_20 + label {background-image:url(../images/photos/gal3_20.jpg);}
.gallery .holder #gal3_21 + label {background-image:url(../images/photos/gal3_21.jpg);}
.gallery .holder #gal3_22 + label {background-image:url(../images/photos/gal3_22.jpg);}
.gallery .holder #gal3_23 + label {background-image:url(../images/photos/gal3_23.jpg);}
.gallery .holder #gal3_24 + label {background-image:url(../images/photos/gal3_24.jpg);}
.gallery .holder #gal3_25 + label {background-image:url(../images/photos/gal3_25.jpg);}
.gallery .holder #gal3_26 + label {background-image:url(../images/photos/gal3_26.jpg);}
.gallery .holder #gal3_27 + label {background-image:url(../images/photos/gal3_27.jpg);}
.gallery .holder #gal3_28 + label {background-image:url(../images/photos/gal3_28.jpg);}
.gallery .holder #gal3_29 + label {background-image:url(../images/photos/gal3_29.jpg);}
.gallery .holder #gal3_30 + label {background-image:url(../images/photos/gal3_30.jpg);}
.gallery .holder #gal3_31 + label {background-image:url(../images/photos/gal3_31.jpg);}
.gallery .holder #gal3_32 + label {background-image:url(../images/photos/gal3_32.jpg);}
.gallery .holder #gal3_33 + label {background-image:url(../images/photos/gal3_33.jpg);}
.gallery .holder #gal3_34 + label {background-image:url(../images/photos/gal3_34.jpg);}
.gallery .holder #gal3_35 + label {background-image:url(../images/photos/gal3_35.jpg);}

/*vierte gallerie*/
.gallery .holder #gal4_01 + label {background-image:url(../images/photos/gal4_01.jpg);}
.gallery .holder #gal4_02 + label {background-image:url(../images/photos/gal4_02.jpg);}
.gallery .holder #gal4_03 + label {background-image:url(../images/photos/gal4_03.jpg);}
.gallery .holder #gal4_04 + label {background-image:url(../images/photos/gal4_04.jpg);}
.gallery .holder #gal4_05 + label {background-image:url(../images/photos/gal4_05.jpg);}
.gallery .holder #gal4_06 + label {background-image:url(../images/photos/gal4_06.jpg);}
.gallery .holder #gal4_07 + label {background-image:url(../images/photos/gal4_07.jpg);}
.gallery .holder #gal4_08 + label {background-image:url(../images/photos/gal4_08.jpg);}
.gallery .holder #gal4_09 + label {background-image:url(../images/photos/gal4_09.jpg);}
.gallery .holder #gal4_10 + label {background-image:url(../images/photos/gal4_10.jpg);}
.gallery .holder #gal4_11 + label {background-image:url(../images/photos/gal4_11.jpg);}
.gallery .holder #gal4_12 + label {background-image:url(../images/photos/gal4_12.jpg);}
.gallery .holder #gal4_13 + label {background-image:url(../images/photos/gal4_13.jpg);}
.gallery .holder #gal4_14 + label {background-image:url(../images/photos/gal4_14.jpg);}
.gallery .holder #gal4_15 + label {background-image:url(../images/photos/gal4_15.jpg);}
.gallery .holder #gal4_16 + label {background-image:url(../images/photos/gal4_16.jpg);}
.gallery .holder #gal4_17 + label {background-image:url(../images/photos/gal4_17.jpg);}
.gallery .holder #gal4_18 + label {background-image:url(../images/photos/gal4_18.jpg);}
.gallery .holder #gal4_19 + label {background-image:url(../images/photos/gal4_19.jpg);}
.gallery .holder #gal4_20 + label {background-image:url(../images/photos/gal4_20.jpg);}
.gallery .holder #gal4_21 + label {background-image:url(../images/photos/gal4_21.jpg);}
.gallery .holder #gal4_22 + label {background-image:url(../images/photos/gal4_22.jpg);}
.gallery .holder #gal4_23 + label {background-image:url(../images/photos/gal4_23.jpg);}
.gallery .holder #gal4_24 + label {background-image:url(../images/photos/gal4_24.jpg);}
.gallery .holder #gal4_25 + label {background-image:url(../images/photos/gal4_25.jpg);}
.gallery .holder #gal4_26 + label {background-image:url(../images/photos/gal4_26.jpg);}
.gallery .holder #gal4_27 + label {background-image:url(../images/photos/gal4_27.jpg);}
.gallery .holder #gal4_28 + label {background-image:url(../images/photos/gal4_28.jpg);}
.gallery .holder #gal4_29 + label {background-image:url(../images/photos/gal4_29.jpg);}
.gallery .holder #gal4_30 + label {background-image:url(../images/photos/gal4_30.jpg);}
.gallery .holder #gal4_31 + label {background-image:url(../images/photos/gal4_31.jpg);}
.gallery .holder #gal4_32 + label {background-image:url(../images/photos/gal4_32.jpg);}
.gallery .holder #gal4_33 + label {background-image:url(../images/photos/gal4_33.jpg);}
.gallery .holder #gal4_34 + label {background-image:url(../images/photos/gal4_34.jpg);}
.gallery .holder #gal4_35 + label {background-image:url(../images/photos/gal4_35.jpg);}


/* for browsers with ~ support */
#slideshow .gallery .holder input:checked ~ p {
	opacity:1; 
	bottom:450px; /*da taucht der text auf dem grossen bild auf*/
-webkit-transition:0.5s 0.5s ease-in-out;
-moz-transition:0.5s 0.5s ease-in-out;
-o-transition:0.5s 0.5s ease-in-out;
transition:0.5s 0.5s ease-in-out;
font:normal 20px sketchybold;
}
/* for browsers with + support only */
#slideshow .gallery .holder input:checked + label + p {
	opacity: 1;
	bottom: 450px;/*da taucht der text auf dem grossen bild auf*/
	-webkit-transition: 0.5s 0.5s ease-in-out;
	-moz-transition: 0.5s 0.5s ease-in-out;
	-o-transition: 0.5s 0.5s ease-in-out;
	transition: 0.5s 0.5s ease-in-out;
	font:normal 20px sketchybold;
}

.gallery .holder input:checked + label {
width:112.5px; /*breite des grossen bildhintergrunds?? mal 6,35 oder so*/
height: 80px;
background-color:rgba(200,54,54,0.5);;
-webkit-transition:0.5s ease-in-out;
-moz-transition:0.5s ease-in-out;
-o-transition:0.5s ease-in-out;
transition:0.5s ease-in-out;
-webkit-transform:scale(6.4);
-moz-transform:scale(6.4);
-o-transform:scale(6.4);
transform:scale(6.4);
}
.gallery .holder input:checked + label.r1 {margin-top:215px;}
.gallery .holder input:checked + label.r2 {margin-top:110px;}
.gallery .holder input:checked + label.r3 {margin-top:10px;}
.gallery .holder input:checked + label.r4 {margin-top:-95px;}
.gallery .holder input:checked + label.r5 {margin-top:-195px;}

.gallery .holder input:checked + label.c1 {margin-left:300px;}
.gallery .holder input:checked + label.c2 {margin-left:195px;}
.gallery .holder input:checked + label.c3 {margin-left:95px;}
.gallery .holder input:checked + label.c4 {margin-left:-10px;}
.gallery .holder input:checked + label.c5 {margin-left:-110px;}
.gallery .holder input:checked + label.c6 {margin-left:-210px;}
.gallery .holder input:checked + label.c7 {margin-left:-315px;}

#gallery1:checked + div,
#gallery2:checked + div,
#gallery3:checked + div,
#gallery4:checked + div {opacity:1; z-index:20;} 

#gallery1:checked ~ .controls label:nth-of-type(1),
#gallery2:checked ~ .controls label:nth-of-type(2),
#gallery3:checked ~ .controls label:nth-of-type(3),
#gallery4:checked ~ .controls label:nth-of-type(4) {background:#555;}

#gallery1, #gallery2, #gallery3, #gallery4 {
	visibility: hidden;
	font-size: 18px;
	color: #FFF;
}