@charset "UTF-8";

/* Außencontainer, um galerie kleiner als Bildschirm zu setzten */
main img {
     margin-top: 0em;
	 border-radius: 0em;
  }

.container {

  max-width: 960px;
  
}

/* Position the image container (needed to position the left and right arrows) */
.container .container {
  position: relative;
  margin-top: 3em;
}

	
/* die Bilder verteilen, + über column die Größe geregelt für MF geregelt */
				.flex {
					flex-wrap: nowrap;
					display: flex; 
					justify-content: space-between;
					flex-direction: row;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex; 
	-webkit-box-pack: justify; 
	-ms-flex-pack: justify; 
	justify-content: space-between;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	 flex-direction: row;
}
				
				.flex-box > div {
					float: left;
					display: flex;
					justify-content: space-between;
					flex-direction: row;
					Xalign-items:center;
				}
				
				X.clearflex-box {
					display:block; 
				}



/* Hide the images by default */
.mySlides {
  display: none;
  text-align: center;
}

/* Fotogalerie:  verschiedene Größe des Detailbildes */
.mySlides img{
  width: 70%;
}
.foto .mySlides img{
  width: 100%;
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  color: white;
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -9em;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
/* setzt "next button" höher für MalereiGalerie */
.high{
  top: 40%;
}

/* On hover, Aufheben der schwarzen Abdimmung */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* On hover,  Aufheben der weißen Abdimmung */
 .black:hover{
  background-color: white;
}
/* schwarzer Pfeil */
.black {
  color: black;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.zahl .numbertext {
  color: #000;
  font-size: 12px;
  padding: 8px 12px;
  position: center;
  top: 0;
}


/* Container for image text einmals weißer Hg, einmal schwarzer Hg*/
.caption-container-weiss {
  text-align: center;
  background-color: #ffffff;
  padding: 2px 16px;
  color: black;
  margin-bottom: 1rem;
}
.caption-container {
  text-align: center;
 
  Xpadding: 2px 16px;
  color: black;
  margin-bottom: 1rem;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Five columns side by side */
.column {
	  
	  Xwidth: 21%;
  margin: 0 0.5rem 1rem 0.5rem;
	  Xmargin-bottom: 2rem;
	  Xbackground:#000000;
	  
	/* Nur Firefox */
	@-moz-document url-prefix(10) 
		float: left;
		xwidth: 23%;
		display: inline-block;
  }
  
 .bild .column {
	  
	 xwidth: 21%;
  margin: 0 0.5rem 1rem 0.5rem;
	  Xmargin-bottom: 2rem;
	  Xbackground:#000000;
	  
	/* Nur Firefox */
	@-moz-document url-prefix(10) 
		float: left;
		width: 21%;
		display: inline-block;
  }

.border {
	border:1px solid gainsboro;
}


/* Add a transparency effect for thumnbail images */
/*.demo {
  opacity: 0.8;
} */

.opacity{
	opacity: 0.7;
	}
	
.active,
.demo:hover {
  opacity: 1;
}





/* styles schwarze Galerie Justus */
#button{
	width: 6%; 
	height: 100%; 
	background-color: grey;
	color: white ;
	border: none;
	font-size: 2em;
	padding: 2%;
	}
    
.Ordnen{
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: grey;
	flex-direction: row;
	position: fixed;
	width: 100%;
	padding: 2%;
	height: 100%;
    }
	
 
 
.end{
	width: 5%;
	padding-left: 95%;
	background-color: grey;
	color: white ;
	border: none;
	font-size: 2em;
	padding-top:2%
	}
	
.text{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	word-wrap: break-word;
	color: white;
	}
	
	
			/* Anordnung Bilderblock */
@media screen and (max-width:600px) {
.imagemargin, .imagemargin2{
	margin: 1%;
	border: 1px solid gainsboro;
	padding: 0em;
		
}
}


		


@media screen and (min-width:600px) {
.imagemargin{
	margin: 1%;
	border: 1px solid gainsboro;
	width: 25%;
	padding: 1em;
}
.imagemargin2{
	margin: 1%;
	border: 1px solid gainsboro;
	width: inherid;
	padding: 1em;
}

}

	
.imagemargin1{
	margin: 1%;
	padding: 1em;

}

.image1{
	display: flex;
	flex-direction: row;
	justify-content: center;
	}
	
#galerie{
	margin-left: ;
	background-color: #F2F2F2;
	position: fixed; 
	width:100%;
	}
	
#galerie .bild {
	max-width: 70%;
	max-height: 70%;
	Xpadding: 1em;
	Xborder: 2px solid #464646;
	Xbox-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
	}






			/* von Justus Ausrichtung der Fotos im Bilderblock mit automatischer Größenzuordnung, ohne Zuschneiden vorher, kann an Stelle von anderen .imagemargin 
			
	.imagemargin{
	margin: 1%;
	border: 1px solid gainsboro;
	width: 25%;
	padding: calc(1em + (25%*0.55)) 1em 1em;
	position: relative;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
}

.imagemargin > img {
	position: absolute;
	top: 1em;
	left: 1em;
	width: calc(100% - 2em);
	height: calc(100% - 2em);
	object-fit: cover;


*/