@CHARSET "UTF-8";

/*************************************************
 *
 * CSS Formatierung Slider Technik
 *
 *************************************************/

 
/********************************************
 *  CSS für Slideshow (Allgemein)           *
 ********************************************/
.ambiente_wrapper {
	background-color: rgba(32, 25, 25, 0.90);
	height: 100vh;
	width: 100vw;
	position: fixed;
	top: 0;
	left: 0;
	box-sizing: border-box;
	overflow: auto;
	z-index: 100000;
}

.back-button {
	margin: 0rem;
	padding: 0.125rem 0.75rem;
	font-family: Verdana,sans-serif;
	font-size: 1rem;
	color: rgb(255, 255, 255) !important;
	background-color: rgba(33, 33, 33, 0.25);
	transition: all 0.5s ease-in-out; 
	position: absolute;
	right: 0;
	top: 0;	
}

.back-button:HOVER { background-color: rgba(33, 33, 33, 0.75); color: rgb(255, 255, 255); }
 
#ambiente_slideshow {
 	margin: 0rem auto;
 	overflow: hidden;
 	text-align: center;
 	position: relative;
	height: 100%;
	width: 100%; 	
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}
 
#ambiente_slideshow figure {
 	position: absolute;
 	top: 0;
 	left: 0;
 	margin: 0rem;
	padding: 0rem;
	height: 100%;
	width: 100%;	
	display: inline-block;
	font-size: 0rem;
	opacity: 0;
	transition: opacity 1s ease-in-out;
}

#ambiente_slideshow input {
	display: none;
 	visibility: hidden;
}
 
#ambiente_slideshow input[type=radio].ambiente_sliderControl:checked + figure  { position:relative; z-index: 1; opacity: 1;}
#ambiente_slideshow input[type=radio].ambiente_sliderControl:checked + figure > figcaption { z-index: 99999;}

/********************************************
 *  CSS für Close-Button                    *
 ********************************************/
p#close-button {
  background-color: rgba(33, 33, 33, 0.25);
  color: rgb(255, 255, 255);
  font-size: 2rem;
  padding: 1.5rem;
  position: fixed;
  right: 0;
  top: 0;
}

/********************************************
 *  CSS für Info-Button und Funktionalität  *
 ********************************************/
#ambiente_slideshow .info {
	margin: 0.75rem;
	padding: 0;
	width: 3rem;
	height: 3rem;	
	vertical-align: middle;
	line-height: 3rem;	
	font-size: 2rem;
	font-weight: bold;	
	color: rgba(255, 255, 255, 0.90);
	background: linear-gradient(145deg, rgba(33, 33, 33, 0.80), rgba(66, 66, 66, 0.85));
	border: 4px solid rgb(255, 255, 255);
	border-radius: 50%;
	display: inline-block;
	z-index: 1000;
	position: absolute;
	bottom: 0.5rem;
	left: 0rem;	
	opacity: 0.5;
	transition: opacity 1s ease-in-out 0s;
	cursor: pointer;
	box-sizing: content-box;
}

#ambiente_slideshow .info:hover { opacity: 0.95; }

#ambiente_slideshow input#showInfo:checked ~ .info { opacity: 1; }
#ambiente_slideshow input#hideInfo:checked ~ label[for="hideInfo"] { visibility: hidden; display: none; z-index: 0; }
#ambiente_slideshow input#showInfo:checked ~ label[for="showInfo"] { visibility: hidden; display: none; z-index: 0; }

/********************************************
 *   CSS für Next-Button und Prev-Button    *
 ********************************************/
#ambiente_slideshow figure > label.nextImage,
#ambiente_slideshow figure > label.prevImage {
	margin: 0rem 0rem 0rem 0rem;
	height: 35%;
	width: 4rem;
	font-size: 3.5rem;
	font-weight: bold;
	text-align: left;  
	display: block;
	opacity: 1; 
	transition: all 0.5s ease-in-out; 
	box-sizing: border-box;
	background-color: rgba(33, 33, 33, 0.25);
	cursor: pointer;
}

#ambiente_slideshow figure > label.nextImage { position: absolute; right: 0; top: 50%; transform: translateY(-50%); border-radius: 10rem 0rem 0rem 10rem; }
#ambiente_slideshow figure > label.prevImage { position: absolute; left:  0; top: 50%; transform: translateY(-50%); border-radius: 0rem 10rem 10rem 0rem; }
#ambiente_slideshow figure > label.nextImage:hover,
#ambiente_slideshow figure > label.prevImage:hover { opacity: 1; background-color: rgba(33, 33, 33, 0.75); }
#ambiente_slideshow figure > label.nextImage > span,
#ambiente_slideshow figure > label.prevImage > span {
	margin: 0rem;
	width: 4rem;
	text-align: center;
	color: rgb(240, 240, 240);
	font-size: 3.5rem;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}


/********************************************
 *    CSS für Figure und Funktionalität     *
 ********************************************/
#ambiente_slideshow figure > figcaption {
	margin: 0rem auto;
	padding: 0.5rem 1% 0.25rem 1%;
	font-size: 1rem;
	max-width: 20%;
	min-width: 10rem;
	min-height: 10%;
	/* background: rgba(0, 0, 0, 0) linear-gradient(235deg, rgba(255, 255, 215, 0.9), rgba(255, 255, 245, 0.98)) repeat scroll 0 0; */
	background-color: linear-gradient(145deg, rgba(33, 33, 33, 0.80), rgba(66, 66, 66, 0.85));
	color: rgb(240, 240, 240);
	text-align: left;
	z-index: 1000;
	transition: all 1.5s ease-in-out;
	box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.5);
	position: absolute;
	top: 1rem;
}

#ambiente_slideshow figure > img {width: 100% auto; height: 100%; border: 3px solid rgba(255, 255, 255, 0.2); border-top: none; }
#ambiente_slideshow figure > figcaption span.caption-title { font-size: 0.9rem; text-transform: capitalize; font-variant: small-caps; font-weight: bold; }
#ambiente_slideshow figure > figcaption p.caption-text {
	margin: 0.25rem 1% 0.5rem 1%;
	padding: 0.75rem 2% 0rem 2%;
	border-top: 2px solid rgb(240, 240, 240);
	font-family: Arial, Verdana;
	font-size: 0.75rem;
	line-height: 1.25rem;
	text-align: justify;
}

#ambiente_slideshow figure > figcaption p.caption-text a,
#ambiente_slideshow figure > figcaption p.caption-text a:visited,
#ambiente_slideshow figure > figcaption p.caption-text a:active,
#ambiente_slideshow figure > figcaption p.caption-text a:link {
	margin: 0.75rem 0rem 0rem 0rem;
	padding: 0rem;
	display: block;
	text-align: center;
	color: rgb(240, 240, 240);
}

#ambiente_slideshow figure > figcaption p.caption-text a:hover { }

#ambiente_slideshow figcaption.info_upperleft  {position: absolute; top: 4%; left:  -100%; background: linear-gradient(145deg, rgba(33, 33, 33, 0.80), rgba(66, 66, 66, 0.85));}
#ambiente_slideshow figcaption.info_upperright {position: absolute; top: 4%; right: -100%; background: linear-gradient(210deg, rgba(33, 33, 33, 0.80), rgba(66, 66, 66, 0.85));}

#ambiente_slideshow input#showInfo:hover   ~ figure > figcaption.info_upperleft    { left:  0;   }
#ambiente_slideshow input#showInfo:hover   ~ figure > figcaption.info_upperright   { right: 0;   }
/* #ambiente_slideshow input#showInfo:hover   ~ div.center-thumbnails > #ambiente_nav { opacity: 1; } */
#ambiente_slideshow input#showInfo:checked ~ figure > figcaption.info_upperleft    { left:  0;   }
#ambiente_slideshow input#showInfo:checked ~ figure > figcaption.info_upperright   { right: 0;   }
/* #ambiente_slideshow input#showInfo:checked ~ div.center-thumbnails > #ambiente_nav { opacity: 1; } */

/********************************************
 *  CSS für Thumbnails und Funktionalität   *
 ********************************************/
div.center-thumbnails { position: absolute; bottom: 2%; z-index: 1000; left: 50%; transform: translateX(-50%); width: 100%; }

#ambiente_nav {
	margin: 0rem 0.25rem 0rem 0.25rem;
	padding: 0.125rem 0.5rem 0.125rem 0.5rem;
	line-height: 0;
	text-align: center;
	vertical-align: middle;
	list-style: none;
	display: inline-block;
	font-size: 1.5rem;
	font-weight: bold;
	color: rgb(255, 255, 255);
	/*background-color: rgba(33, 33, 33, 0.25);*/
	background: linear-gradient(0deg, rgba(55, 48, 48, 0.90), rgba(75, 66, 66, 0.9), rgba(55, 48, 48, 0.90));
	border: 0.25rem solid rgba(255, 255, 255, 0.2);
	/* border-radius: 5rem; */
	z-index: 1000;
	opacity: 0;
	transition: opacity 1s ease-in-out;
	display: inline-block;
	cursor: default;
}

#ambiente-thumbnails:hover > ul#ambiente_nav { opacity: 1; display: inline-block;}

#ambiente_nav li     {display: inline-block; vertical-align: middle; font-weight: normal; }
#ambiente_nav li.nav { width: 2.5rem; text-align: center; cursor: pointer; margin: 0 -0.25rem; vertical-align: middle; line-height: 1rem; }
#ambiente_nav li.nav > span { padding: 2.5rem 0; width: 2.5rem; display: block; } 
#ambiente_nav li.nav:hover > span { background-color: rgba(200, 200, 200, 0.35); }
#ambiente_nav label  {margin: 0 0.5rem; cursor: pointer; width: 8.5rem; display: block; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.4);}

.ambiente-thumbnail {
	margin: 0 1px;
	padding: 0;
	height: 6rem;
	width: auto;
	max-width: 100%;
}

/********************************************
 *         CSS für Slideshow-Listing        * 
 ********************************************/
figure.sl-listing { margin: 2.5rem 0.25rem 1rem 0.25rem; }

figure.sl-listing:FIRST-OF-TYPE { margin: 1rem 0.25rem 1rem 0.25rem; }

figure.sl-listing figcaption {
	padding: 0.25rem 0 0 0;
	color: rgb(99, 99, 99);
	font-family: verdana,sans-serif;
	font-size: 11px;
}

figure.sl-listing .figure-title {
	color: rgb(33, 33, 33);
	font-size: 12px;
	font-weight: bold;
	vertical-align: text-bottom;
}

figure.sl-listing img { width: 100%; }


/********************************************
 *          CSS für Media-Queries           *
 ********************************************/
@media (max-width:1023px) { #ambiente_slideshow figure > figcaption {max-width: 35%;} }
@media (max-width:799px ) { 
	#ambiente_slideshow figure > figcaption {max-width: 50%;} 
	.ambiente-thumbnail {max-height: 4.5rem;} 
	#ambiente_nav label { width: 6.5rem; }
}
@media (max-width:680px ) { 
	#ambiente_slideshow figure > figcaption.info_upperleft  {max-width: 100%; top: 0 !important; left:  -110%;}
	#ambiente_slideshow figure > figcaption.info_upperright {max-width: 100%; top: 0 !important; right: -110%;}
	#ambiente_nav { visibility: hidden !important; display: none !important; }
}
@media (max-width:575px ) { #ambiente_slideshow figure > figcaption, .info {visibility: hidden; display: none; } }