/* BILDERGALLERIEN */
.gallerie {text-align: center;}
.gallerie h2 {margin-top: 2em; margin-bottom: 1em;}
.gallerie ul { margin: 1.5em auto; padding: 1em 0; }
.gallerie ul li
{
	Z-index: 1;
	text-align:center;
	display:inline-block;
	list-style:none;
	border:solid 12px #fff;
	background:#fff;
	box-shadow:0 0 15px 0px #555;
    opacity: .7;
	transition:all 1s ease;
	-o-transition:all 1s ease;
	-moz-transition:all 1s ease;
	-webkit-transition:all 1s ease;
}
.gallerie ul li:hover { top:0px; opacity: 1; }
.gallerie ul li:nth-child(4n+1) { transform:rotate(10deg); }
.gallerie ul li:nth-child(4n+2) { transform:rotate(-5deg); }
.gallerie ul li:nth-child(4n+3) { transform:rotate(-10deg); }
.gallerie ul li:nth-child(4n+4) { transform:rotate(15deg); }
.gallerie ul .ontop {z-index: 10;}
.gallerie p { margin: 0 0 0 0; font-weight: bolder; }
.light
{
	border-radius:50%;
	position: absolute;
	left :0;
	right: 0;
	width: 700px;
	height: 700px;
	background:#fff;
	filter:blur(100px);
	opacity:0.3;
	pointer-events:none;
}

/*Overlay für Bilder/Videos*/
#overlay
{
	display: none; /*Wenn kein Slideeffekt*/
	height: 100%; /*Wenn kein Slideeffekt*/
	/* height: 0%; /*Wenn Slideeffekt*/
	width: 100%;
	position: fixed;
	z-index: 100;
	left: 0;
	top: 0;
	padding: 0;
	text-align: center;
	background-color: rgb(0,0,0); /* Black fallback color */
	background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
	overflow-x: hidden; /* Disable horizontal scroll */
	transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}
#overlay .overlay-content
{
	position: absolute;
	/*top: 10%;*/
	height: 100vh;
	width: 100vw;
	text-align: center;
	margin: auto;
	display: flex;
  	justify-content: center;
}
#overlay .overlay-content img {max-width: 100vw; max-height: 100vh; object-fit: contain; display: none; margin: auto;}
#overlay .overlay-content iframe {max-width: 100vw; max-height: 100vh; display: none; width: 80%; height: 100vh; border: 0; margin: auto; }
/*#overlay .overlay-content object {height: 100%; width: 100%; display: none;}*/
#overlay .closebtn
{
	z-index: 5;
	position: absolute;
	top: 20px;
	right: 25px;
	display: inline-block;
	text-decoration: none;
	color: #818181;
	transition: 0.3s;
	font-size: 7em;
	line-height: .5;
}
#overlay a:hover, #overlay a:focus {color: #f1f1f1;}

@media only screen and (max-width: 767px)
{
	#overlay .overlay-content img {width: 100%; height: auto;}
	#overlay .overlay-content iframe {width: 100%; height: 100%; border: 0;}
	#overlay .closebtn {font-size: 5em; top: 10px; right: 15px;}
}