/*--------------------------------------------------------------------------------------------------------------------------------------- */
/* Stylesheet - Slider */

*{margin:0;padding:0;}						/* Alles erstmal Reset */

.bss-slides{
	position: relative;						/* relativ = daran richten sich alle Kindelemente aus */
	line-height: 0px;						/* removes the gap if you put a border on the slideshow div */
	overflow: hidden;						/* schneided alles ab, was ausserhalb des Bereiches liegt! */	
	/*background-color: #333;				/* für Debug */
	/*border:thin solid blue;				/* für Debug */	
}

.bss-slides figcaption {
	line-height: 1.5em; 					/*restores line-height to the child element*/
}

.bss-slides:focus{
	outline: 0;
}

.bss-slides figure{
	position: absolute;						/* absolute = relativ zu Eltern Element (hier DIV) */
	top: 0;
	width: 100%;
}

.bss-slides:hover{
	cursor: pointer;    
} 

.bss-slides figure img{
	width:inherit;
	/*height:350px;							/* Im Javascript! - Muss angegeben werden, falls unterschiedlich Seitenverhältnisse der Bilder im Slider sind! */
	/*object-fit:fill;						/* Im Javascript! - Bereich ganz gefüllt! Bilder dehnen sich! Schlecht! */
	/*object-fit:contain;					/* Im Javascript! - Bilder scalieren sich in der größe passend. Ränder bleiben! */
	/*object-fit:cover;						/* Im Javascript! - Bereich ganz gefüllt! Bild zoomt ein und aus, nicht so schlecht! */
	/*object-fit:none;*/					/* Im Javascript! - Bildgrössen original, passen sich ein */
	/*object-fit:scale-down;				/* Im Javascript! - Bilder scalieren sich in der größe passend */
	opacity: 0;
	-webkit-transition: opacity 1.2s;
	transition: opacity 1.2s;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.bss-slides .bss-show{
	z-index: 2;
}

.bss-slides .bss-show img{
	opacity: 1;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.bss-slides figcaption{
	position: absolute;						/* absolute = relativ zu Eltern Element (hier DIV) */
	font-family: sans-serif;
	font-size: .8em;
	bottom: .75em;
	right: .35em;
	padding: .25em;
	color: #fff;
	background: #000;
	background: rgba(0,0,0, .25);
	border-radius: 2px;
	opacity: 0;
	-webkit-transition: opacity 1.2s;
	transition: opacity 1.2s;
}

.bss-slides .bss-show figcaption{
	z-index: 3;
	opacity: 1;
}

.bss-slides figcaption a{
	color: #fff;    
}

/*--------------------------------------------------------------------------------------------------------------------------------------- */
/* Bild Vor- Zurück Bedienelemente */

.bss-next, .bss-prev{
	position: absolute;						/* absolute = relativ zu Eltern Element (hier DIV) */
	top: 50%;
	-webkit-transform: translateY(-50%);	/* Halbe Objekthöhe wird zur genauen Position noch abgezogen */
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	color: #fff;
	background: #000;
	background: rgba(0,0,0, .6);
	z-index: 4;
	font-size: 2em;
	opacity: .3;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.bss-next:hover, .bss-prev:hover{
	cursor: pointer;
	opacity: 1;
}

.bss-next{
	right: -1px;
	padding: 10px 5px 15px 10px;
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
}

.bss-prev{
	left: 0;
	padding: 10px 10px 15px 5px;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
}

/*--------------------------------------------------------------------------------------------------------------------------------------- */
/* Anzeige Vollbild */

.bss-fullscreen{
	position: absolute;						/* absolute = relativ zu Eltern Element (hier DIV) */
	width: 26px;
	height: 26px;   
	z-index: 4;
	background: rgba(10,10,20,.4) url(../img/vollbild-ein.png); 
	-webkit-background-size: contain; 
	background-size: contain;
	top: 5px;
	left: 5px;   
	cursor: pointer;
	opacity: .4;
} 

.bss-fullscreen:hover{
	opacity: .8;   
}

:-webkit-full-screen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(../img/vollbild-aus.png);
    -webkit-background-size: contain;
    background-size: contain;
}

:-moz-full-screen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(../img/vollbild-aus.png);
    background-size: contain;
}

:-ms-fullscreen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(../img/vollbild-aus.png);
    background-size: contain;
}

:full-screen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(../img/vollbild-aus.png);
    -webkit-background-size: contain;
    background-size: contain;			/* contain verändert größe, so das das Bild vollständig sichtbar ist */
}

/*--------------------------------------------------------------------------------------------------------------------------------------- */
/* Anzeige Stoppsymbol bei Hover */

.bss-showstop{
	position: absolute;						/* absolute = relativ zu Eltern Element (hier DIV) */
	width: 26px;
	height: 26px;   
	z-index: 4;
	background: rgba(10,10,20,.4) url(../img/pause.png); 
	-webkit-background-size: contain; 
	background-size: contain;
	top: 5px;
	right: 5px;   
	cursor: pointer;
	opacity: .4;
} 

/*--------------------------------------------------------------------------------------------------------------------------------------- */
/* Punkte (Dots) für direkt Bildauswahl */

#divID{
	color: #333;
	z-index: 4;
	opacity: 1.4;
	/*background-color:#0C0;			/* für Debug */
	/*border:thin solid red;			/* für Debug */
}


#divID:hover{
	cursor: pointer;
	white-space: nowrap;				/*nowrap = kein Zeilenumbruch | normal = Zeilenumbruch | pre = */
	opacity: 0.8;
	/*	-webkit-animation: dothover 0.4s linear forwards;*/
	/*			animation: dothover 0.4s linear forwards;*/
}

@-webkit-keyframes dothover {
	50% {
		outline-color: #333;
		text-shadow: 2px 2px #ff0000;
		/*box-shadow: 0 0 0 6px #333, 0 0 0 16px rgba(51, 51, 51, 0.2);*/
	}
		100% {
		outline-color: #333;
		text-shadow: 2px 2px #ff0000;
		/*box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);*/
	}
}

@keyframes dothover {
	50% {
		outline-color: #333;
		text-shadow: 2px 2px #ff0000;
		/*box-shadow: 0 0 0 6px #333, 0 0 0 16px rgba(51, 51, 51, 0.2);*/
	}
	100% {
		outline-color: #333;
		text-shadow: 2px 2px #ff0000;
		/*box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);*/
	}
}

/*--------------------------------------------------------------------------------------------------------------------------------------- */
/* Navigationsmenü im Slider */

/* nav liegt in DIV Container - dort werden Styles Position usw. mit JS übergeben! */

.bss-nav_ul{
	/*background-color:#0C0;			/* für Debug */
	/*border:thin solid red;			/* für Debug */
	padding: 1px 1px 1px 1px;			/* muss sonst fallen Boxen zusammen */
	margin-left:auto;					/* 1 - Alle drei Zeilen wichtig für Zentrieren Horizontal */
	margin-right:auto;					/* 2 - Alle drei Zeilen wichtig für Zentrieren Horizontal */
	width: 30%;							/* 3 - Alle drei Zeilen wichtig für Zentrieren Horizontal */
	z-index: 4;
	opacity: 0.6;
	overflow: hidden;					/* schneided alles ab, was ausserhalb des Bereiches liegt! */
}

.bss-nav_li {
	display: inline;					/* li nebeneinander anzeigen */
	/*background-color:#FFD;			/* für Debug */
	/*border:thin solid blue;			/* für Debug */
	padding: 0px 10px 0px 10px;			/* Abstand Punkte*/
	margin-left: auto;					/* 1 - Alle drei Zeilen wichtig für Zentrieren Horizontal */
	margin-right:auto;					/* 2 - Alle drei Zeilen wichtig für Zentrieren Horizontal */
	width: 10%;							/* 3 - Alle drei Zeilen wichtig für Zentrieren Horizontal */
	min-height: 20px;					/* muss so hoch wie Elternelement sein */
    display: table-cell;				/* 1 - wichtig für das vertiakle Ausrichten */
    vertical-align: middle;				/* 2 - wichtig für das vertiakle Ausrichten */
	text-align:center;					/* 3 - wichtig für das vertiakle Ausrichten */
}

.bss-nav_a {
	text-decoration:none;				/* ohne Unterstriche usw... */
    list-style-type:none; 				/* ohne Aufzählungspunkte */
}

/*--------------------------------------------------------------------------------------------------------------------------------------- */
/* Option - Beschreibung/Überschrift */

.bss-slides .bss-shownote {
	position:absolute;					/* absolute = relativ zu Eltern Element (hier DIV) */
	z-index: 4;
    color: #444;
    font: 1.1em/1.9em serif;			/*font size=1.2, line-height=2.9, font=serif*/
	/*text-transform: uppercase;*/
    text-align: center;
    text-shadow: -1px -1px 0 rgba(255, 255, 255, .3), 1px 1px 0 #505050;
    background: rgba(255, 255, 255, .7);
    border: 1px solid #fff;
    border-left: 0;
    height: 1.9em;
    width: 30%;
    bottom: 10px;
    left: -31%;
	-webkit-transition: left 1s; 		/* Safari */
	transition: left 1s;
	overflow: hidden;					/* schneided alles ab, was ausserhalb des Bereiches liegt! */	
}

.bss-slides:hover .bss-shownote {
    left: 0%;
}

/*--------------------------------------------------------------------------------------------------------------------------------------- */
/* Option - Fortschrittsbalken */

@keyframes balken {
      0% {width:   0; opacity: 0;}
     10% {width:   0; opacity:.2;}
     80% {width:100%; opacity:.8;}
    100% {width:100%; opacity: 0;}
}

/*--------------------------------------------------------------------------------------------------------------------------------------- */
/* CSS3-Transitionen */
/* Die Klassen für die CSS-Animation werden später beim Aufruf des Scripts als Option eingesetzt */

.bss-slides .animate-top {
	display: block;
	position:relative;						/* absolute = relativ zu Eltern Element (hier DIV) */
	animation:animatetop 0.8s;
}

.bss-slides .animate-bottom {
	display: block;
	position:relative;						/* absolute = relativ zu Eltern Element (hier DIV) */
	animation:animatebottom 0.8s;
}

.bss-slides .animate-left {
	display: block;
	position: relative;						/* absolute = relativ zu Eltern Element (hier DIV) */
	animation: animateleft 1s;
}

.bss-slides .animate-right {
	display: block;
	position: relative;						/* absolute = relativ zu Eltern Element (hier DIV) */
	animation: animateright 1s;
}

/*--------------------------------------------------------------------------------------------------------------------------------------- */
/* CSS3 Keyframe-Amimationen */

@keyframes animatetop { 
	from { top : -400px; opacity : 0 } to { top : 0; opacity : 1 } 
}

@keyframes animatebottom { 
	from { top : 400px; opacity : 0 } to { top : 0; opacity : 1 } 
}

@keyframes animateleft { 
	from { left :-800px; opacity : 0 } to { left : 0; opacity : 1 }
}

@keyframes animateright { 
	from { right :-800px; opacity : 0 } to { right : 0; opacity : 1 }
}

/* Nach demselben Schema können weitere Animationen für den Übergang von einem Bild zum nächsten angelegt werden:
animate-top
animate-bottom
animate-left
animate-right
animate-zoom
*/

#message{
	position:fixed;
	bottom: 0px;	/* für Test */
}

/*--------------------------------------------------------------------------------------------------------------------------------------- */
/* CSS3 Stylesheet E N D E  */