@charset "UTF-8";

/* ------------------------------------------
  RESET
--------------------------------------------- */






/* ------------------------------------------
  GALLERY STYLES

--------------------------------------------- */

/* ---- Mobile first - für schmale Viewports ------- */

li.galerie {
	display: inline-block;	
	list-style-type: none;
	width: 90%;
	min-height: 10em;
	box-shadow: none; /* box-shadow: 0em 0em 1.5em #c3cba3; */
}


img {
	padding: 0;
	margin: 0;	
	width: 100%;  /* Bild passt sich an verfügbaren Raum im li an */
	vertical-align: bottom;  /* ----- oder vertical-align: top; ----- */
}



/* ------------------------------------------
  BILD KLEINER   

padding-left:15%;
padding-right:15%;
--------------------------------------------- */

img.bildsmall {
width: 50%;
float:left;
padding: 4%;
}

img.intropicmini {
max-width: 400px;
}


img.bildsmaller {
max-width: 100px!important;
}


/* ------------------  Large screens  ------------ */

@media all and (min-width: 35em) {
	li.galerie {
		width: 13em;
	}

li.galerie:focus,
li.galerie:hover {
background-color: white;
opacity: 0.5;
}




/* ----- Mobile Legende ausblenden ---- */

.legende-mobil {
display: none;
}

}




li.intropicmini {
max-width: 10em;
}



/* ----- Figure-Zusatz ---- */



.details {
	position: absolute;
	right: 30%;
	top: 6%;
	vertical-align: center;
	background-color: white;
	border: 1px solid white;
	padding: 0em 0em 2em 0em;
	max-width: 40em;
	max-height: 93em;

	display: none;
}



.details:target {
	display: block;
box-shadow: 0em 0em 4em #5e5f8c;
}


.close {
	width:0;
	heigh:0;
	border: 0; 
	text-shadow: none; 
	color: transparent;
}
.close:after {
   position: absolute;
   top: 1em;
   right: 0em;
   content:"schliessen";
   color: black;
   background: none;
   font: 0.60em/60% "Special Elite", sans-serif;
   display: block;
   text-align:center;
   width: 12 em;
   height: 2em; 
	padding: 0em 3em 0em 0em;
  }

figcaption {
font-size: 1em;
padding: 1.5em 1em 0em 2em;
line-height: 1.2em;
}


/* ----- Figure-Zusatz ENDE ---- */




/* ------------------------------------------
  GALLERY MARTINA STYLES
--------------------------------------------- */

/* Extra small screen / smartphone / 280px to 479px up to 667px */
@media (max-width: 667px) {

li.galerie {
	display: inline-block;	
	list-style-type: none;
	width: 100%;
	box-shadow: none; /* box-shadow: 0em 0em 1em #c3cba3; */
}

figure,
.details.no-mobile,
.close  {
display:none!important;
}

}


/* ------------------------------------------
  GALLERY MARTINA STYLES
--------------------------------------------- */