/*******************************************************************************
 Diashows in der Kopfzeile und im Text.
 fse, 15.09.2016
 ******************************************************************************/

.slideshow
{
	overflow: hidden;
	position: relative;
	display: inline-block;
	background-color: gray;
/*	border-width: 1px;
	border-style: solid;*/
	z-index: 1;
}

.slideshow figure
{
	position: absolute;
	top: 0;
	width: 100%;
	opacity: 0;
	transition: opacity 0.5s;
	margin: 0;
	padding: 0;
/*	border-width: 1px;
	border-style: dashed;*/
}

.slideshow.title figure
{
	opacity: 1;
}

.slideshow figure:nth-child(2)
{
	position: relative;
}

.slideshow img
{
	position: relative;
	width: 100%;
	padding: 0;
	margin: 0;
}

.slideshow.title img
{
	opacity: 0;          /* Opazitaet wird durch Animation gesteuert */
	margin-bottom: -4px; /* sonst ist unten ein Rand zwischen img und figure */
}

.slideshow figcaption
{
	position: absolute;
	color: white;
	width: 100%;
	opacity: 0;
}

.slideshow.title figcaption
{
	font-size: 0.7em;
	text-shadow: 2px 2px 1px black;
	text-align: right;
	bottom: 0;
}

.slideshow input
{
	display: none;
}
.title input#img0toLeft  + figure img { animation: fadeAndZoom10ToLeft  100s  0s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img0toMid   + figure img { animation: fadeAndZoom10ToMid   100s  0s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img0toRight + figure img { animation: fadeAndZoom10ToRight 100s  0s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img1toLeft  + figure img { animation: fadeAndZoom10ToLeft  100s 10s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img1toMid   + figure img { animation: fadeAndZoom10ToMid   100s 10s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img1toRight + figure img { animation: fadeAndZoom10ToRight 100s 10s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img2toLeft  + figure img { animation: fadeAndZoom10ToLeft  100s 20s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img2toMid   + figure img { animation: fadeAndZoom10ToMid   100s 20s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img2toRight + figure img { animation: fadeAndZoom10ToRight 100s 20s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img3toLeft  + figure img { animation: fadeAndZoom10ToLeft  100s 30s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img3toMid   + figure img { animation: fadeAndZoom10ToMid   100s 30s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img3toRight + figure img { animation: fadeAndZoom10ToRight 100s 30s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img4toLeft  + figure img { animation: fadeAndZoom10ToLeft  100s 40s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img4toMid   + figure img { animation: fadeAndZoom10ToMid   100s 40s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img4toRight + figure img { animation: fadeAndZoom10ToRight 100s 40s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img5toLeft  + figure img { animation: fadeAndZoom10ToLeft  100s 50s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img5toMid   + figure img { animation: fadeAndZoom10ToMid   100s 50s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img5toRight + figure img { animation: fadeAndZoom10ToRight 100s 50s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img6toLeft  + figure img { animation: fadeAndZoom10ToLeft  100s 60s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img6toMid   + figure img { animation: fadeAndZoom10ToMid   100s 60s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img6toRight + figure img { animation: fadeAndZoom10ToRight 100s 60s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img7toLeft  + figure img { animation: fadeAndZoom10ToLeft  100s 70s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img7toMid   + figure img { animation: fadeAndZoom10ToMid   100s 70s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img7toRight + figure img { animation: fadeAndZoom10ToRight 100s 70s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img8toLeft  + figure img { animation: fadeAndZoom10ToLeft  100s 80s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img8toMid   + figure img { animation: fadeAndZoom10ToMid   100s 80s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img8toRight + figure img { animation: fadeAndZoom10ToRight 100s 80s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img9toLeft  + figure img { animation: fadeAndZoom10ToLeft  100s 90s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img9toMid   + figure img { animation: fadeAndZoom10ToMid   100s 90s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img9toRight + figure img { animation: fadeAndZoom10ToRight 100s 90s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }

.title input#img0toLeft  + figure figcaption { animation: fade10Captions 100s  0s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img0toMid   + figure figcaption { animation: fade10Captions 100s  0s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img0toRight + figure figcaption { animation: fade10Captions 100s  0s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img1toLeft  + figure figcaption { animation: fade10Captions 100s 10s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img1toMid   + figure figcaption { animation: fade10Captions 100s 10s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img1toRight + figure figcaption { animation: fade10Captions 100s 10s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img2toLeft  + figure figcaption { animation: fade10Captions 100s 20s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img2toMid   + figure figcaption { animation: fade10Captions 100s 20s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img2toRight + figure figcaption { animation: fade10Captions 100s 20s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img3toLeft  + figure figcaption { animation: fade10Captions 100s 30s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img3toMid   + figure figcaption { animation: fade10Captions 100s 30s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img3toRight + figure figcaption { animation: fade10Captions 100s 30s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img4toLeft  + figure figcaption { animation: fade10Captions 100s 40s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img4toMid   + figure figcaption { animation: fade10Captions 100s 40s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img4toRight + figure figcaption { animation: fade10Captions 100s 40s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img5toLeft  + figure figcaption { animation: fade10Captions 100s 50s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img5toMid   + figure figcaption { animation: fade10Captions 100s 50s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img5toRight + figure figcaption { animation: fade10Captions 100s 50s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img6toLeft  + figure figcaption { animation: fade10Captions 100s 60s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img6toMid   + figure figcaption { animation: fade10Captions 100s 60s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img6toRight + figure figcaption { animation: fade10Captions 100s 60s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img7toLeft  + figure figcaption { animation: fade10Captions 100s 70s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img7toMid   + figure figcaption { animation: fade10Captions 100s 70s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img7toRight + figure figcaption { animation: fade10Captions 100s 70s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img8toLeft  + figure figcaption { animation: fade10Captions 100s 80s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img8toMid   + figure figcaption { animation: fade10Captions 100s 80s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img8toRight + figure figcaption { animation: fade10Captions 100s 80s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img9toLeft  + figure figcaption { animation: fade10Captions 100s 90s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img9toMid   + figure figcaption { animation: fade10Captions 100s 90s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img9toRight + figure figcaption { animation: fade10Captions 100s 90s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }

.title input#img0fade + figure img { animation: fade 100s  0s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img1fade + figure img { animation: fade 100s 10s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img2fade + figure img { animation: fade 100s 20s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img3fade + figure img { animation: fade 100s 30s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img4fade + figure img { animation: fade 100s 40s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img5fade + figure img { animation: fade 100s 50s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img6fade + figure img { animation: fade 100s 60s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img7fade + figure img { animation: fade 100s 70s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img8fade + figure img { animation: fade 100s 80s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img9fade + figure img { animation: fade 100s 90s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }

.title input#img0fade + figure figcaption { animation: fade10Captions 100s  0s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img1fade + figure figcaption { animation: fade10Captions 100s 10s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img2fade + figure figcaption { animation: fade10Captions 100s 20s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img3fade + figure figcaption { animation: fade10Captions 100s 30s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img4fade + figure figcaption { animation: fade10Captions 100s 40s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img5fade + figure figcaption { animation: fade10Captions 100s 50s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img6fade + figure figcaption { animation: fade10Captions 100s 60s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img7fade + figure figcaption { animation: fade10Captions 100s 70s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img8fade + figure figcaption { animation: fade10Captions 100s 80s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#img9fade + figure figcaption { animation: fade10Captions 100s 90s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }


@keyframes fade
{
	  0% { opacity: 0; }
	  2% { opacity: 1; }
	 10% { opacity: 1; }
	 12% { opacity: 0; }
	100% { opacity: 0; }
}

/* Funktioniert leider nicht: Das Bild verschwindet, sobald man die Maus bewegt: */
@keyframes fadeAndZoomOutFromMid
{
	  0% { opacity: 0; }
  0.01% { opacity: 0; transform: scale3d(1.3, 1.3, 0) translate3d(0%, 0%, 0)}
	  2% { opacity: 1; }
	 10% { opacity: 1; transform: scale3d(1.0, 1.0, 0) translate3d(0%, 0%, 0)}
	 12% { opacity: 0; }
	100% { opacity: 0; }
}

@keyframes fadeAndZoom10ToLeft
{
	  0% { opacity: 0; }
	  2% { opacity: 1; }
	 10% { opacity: 1; transform: scale3d(1.3, 1.3, 0) translate3d(5%, 0%, 0)}
	 12% { opacity: 0; }
	100% { opacity: 0; }
}

@keyframes fadeAndZoom10ToMid
{
	  0% { opacity: 0; }
	  2% { opacity: 1; }
	 10% { opacity: 1; transform: scale3d(1.3, 1.3, 0) translate3d(0%, 0%, 0)}
	 12% { opacity: 0; }
	100% { opacity: 0; }
}

@keyframes fadeAndZoom10ToRight
{
	  0% { opacity: 0; }
	  2% { opacity: 1; }
	 10% { opacity: 1; transform: scale3d(1.3, 1.3, 0) translate3d(-5%, 0%, 0)}
	 12% { opacity: 0; }
	100% { opacity: 0; }
}

@keyframes fade10Captions
{
	  0% { opacity: 0; z-index:   0; }
	  2% { opacity: 0; z-index:   0; }
	  3% { opacity: 1; z-index: 100; }
	  8% { opacity: 1; z-index: 100; }
	  9% { opacity: 0; z-index: 100; }
	100% { opacity: 0; z-index:   0; }
}


.title input#no1toLeft  + figure img { animation: fadeAndZoomToLeft  40s  0s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#no1toMid   + figure img { animation: fadeAndZoomToMid   40s  0s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#no1toRight + figure img { animation: fadeAndZoomToRight 40s  0s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#no2toLeft  + figure img { animation: fadeAndZoomToLeft  40s 10s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#no2toMid   + figure img { animation: fadeAndZoomToMid   40s 10s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#no2toRight + figure img { animation: fadeAndZoomToRight 40s 10s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#no3toLeft  + figure img { animation: fadeAndZoomToLeft  40s 20s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#no3toMid   + figure img { animation: fadeAndZoomToMid   40s 20s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#no3toRight + figure img { animation: fadeAndZoomToRight 40s 20s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#no4toLeft  + figure img { animation: fadeAndZoomToLeft  40s 30s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#no4toMid   + figure img { animation: fadeAndZoomToMid   40s 30s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#no4toRight + figure img { animation: fadeAndZoomToRight 40s 30s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }

.title input#no1toLeft  + figure figcaption { animation: fadeFourCaptions 40s  0s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#no1toMid   + figure figcaption { animation: fadeFourCaptions 40s  0s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#no1toRight + figure figcaption { animation: fadeFourCaptions 40s  0s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#no2toLeft  + figure figcaption { animation: fadeFourCaptions 40s 10s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#no2toMid   + figure figcaption { animation: fadeFourCaptions 40s 10s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#no2toRight + figure figcaption { animation: fadeFourCaptions 40s 10s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#no3toLeft  + figure figcaption { animation: fadeFourCaptions 40s 20s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#no3toMid   + figure figcaption { animation: fadeFourCaptions 40s 20s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#no3toRight + figure figcaption { animation: fadeFourCaptions 40s 20s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#no4toLeft  + figure figcaption { animation: fadeFourCaptions 40s 30s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#no4toMid   + figure figcaption { animation: fadeFourCaptions 40s 30s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }
.title input#no4toRight + figure figcaption { animation: fadeFourCaptions 40s 30s cubic-bezier(0.5,0.5,0.5,0.5) infinite; }

@keyframes fadeAndZoomToLeft
{
	  0% { opacity: 0; }
	  5% { opacity: 1; }
	 25% { opacity: 1; transform: scale3d(1.3, 1.3, 0) translate3d(10%, 0%, 0)}
	 30% { opacity: 0; }
	100% { opacity: 0; }
}

@keyframes fadeAndZoomToMid
{
	  0% { opacity: 0; }
	  5% { opacity: 1; }
	 25% { opacity: 1; transform: scale3d(1.3, 1.3, 0) translate3d(0%, 0%, 0)}
	 30% { opacity: 0; }
	100% { opacity: 0; }
}

@keyframes fadeAndZoomToRight
{
	  0% { opacity: 0; }
	  5% { opacity: 1; }
	 25% { opacity: 1; transform: scale3d(1.3, 1.3, 0) translate3d(-10%, 0%, 0)}
	 30% { opacity: 0; }
	100% { opacity: 0; }
}

@keyframes fadeFourCaptions
{
	  0% { opacity: 0; z-index:   0; }
	  5% { opacity: 0; z-index:   0; }
	  7% { opacity: 1; z-index: 100; }
	 20% { opacity: 1; z-index: 100; }
	 22% { opacity: 0; z-index: 100; }
	100% { opacity: 0; z-index:   0; }
}

.slideshow.fotos
{
   transform: scale(0.75);
   transform-origin: top left;
}

.slideshow.fotos figcaption
{
	font-size: 1.5em;
	text-shadow: 2px 2px 1px black;
	text-align: center;
	bottom: 10px;
	transition: opacity 1s;
}

.slideshow.fotos figcaption.left
{
	text-align: left;
}

.slideshow.fotos:hover input:checked + figure figcaption
{
	opacity: 1;
	transition: opacity 1s;
}

.slideshow.fotos input:checked + figure
{
    opacity: 1;
}

.slideshow.fotos figure label
{
	/*display: none;*/
	position: absolute;
	top: 0;
	bottom: 0;
	height: 100%;
	width: 10%;
	/*text-align: center;*/
	font-size: 2em;
	font-weight: bolder;
	z-index: 9;
	background-color: white;
	opacity: 0;
	transition: opacity 0.3s;
	margin: 0;
	padding: 0;
}

.slideshow.fotos figure label span
{
	position: absolute;
	top: 0;
	bottom: 0;
	margin-left: 0;
	margin-right: 0;
	margin-top: auto;
	margin-bottom: auto;
	padding-left: 0;
	width: 100%;
	height: 1em;
	text-align: center;
/*	border-width: 1px;
	border-style: solid;*/
}

.slideshow.fotos figure label.next
{
	right: 0;
}

.slideshow.fotos figure label.prev
{
}

.slideshow.fotos figure label:hover
{
	opacity: 0.5;
}

.slideshow.fotos input:checked + figure label
{
	display: inline-block;
}


.slideshow.fotos .dots label
{
	border-width: 1px;
	border-style: solid;
	border-radius: 100%;
	margin: 1%;
	padding: 1%;
	width: 0.2%;
	height: auto;
	display: inline-block;
	background-color: #E5F1FD;
}

.slideshow.fotos .dots
{
	width: 100%;
	text-align: center;
	background-color: white;
}

.slideshow.fotos input#slide_0:checked ~ .dots #dot_slide0,
.slideshow.fotos input#slide_1:checked ~ .dots #dot_slide1,
.slideshow.fotos input#slide_2:checked ~ .dots #dot_slide2,
.slideshow.fotos input#slide_3:checked ~ .dots #dot_slide3,
.slideshow.fotos input#slide_4:checked ~ .dots #dot_slide4,
.slideshow.fotos input#slide_5:checked ~ .dots #dot_slide5,
.slideshow.fotos input#slide_6:checked ~ .dots #dot_slide6,
.slideshow.fotos input#slide_7:checked ~ .dots #dot_slide7,
.slideshow.fotos input#slide_8:checked ~ .dots #dot_slide8,
.slideshow.fotos input#slide_9:checked ~ .dots #dot_slide9,
.slideshow.fotos input#slide_A:checked ~ .dots #dot_slideA,
.slideshow.fotos input#slide_B:checked ~ .dots #dot_slideB,
.slideshow.fotos input#slide_C:checked ~ .dots #dot_slideC,
.slideshow.fotos input#slide_D:checked ~ .dots #dot_slideD,
.slideshow.fotos input#slide_E:checked ~ .dots #dot_slideE,
.slideshow.fotos input#slide_F:checked ~ .dots #dot_slideF,
.slideshow.fotos input#slide_G:checked ~ .dots #dot_slideG,
.slideshow.fotos input#slide_H:checked ~ .dots #dot_slideH,
.slideshow.fotos input#slide_I:checked ~ .dots #dot_slideI,
.slideshow.fotos input#slide_J:checked ~ .dots #dot_slideJ,
.slideshow.fotos input#slide_K:checked ~ .dots #dot_slideK,
.slideshow.fotos input#slide_L:checked ~ .dots #dot_slideL,
.slideshow.fotos input#slide_M:checked ~ .dots #dot_slideM,
.slideshow.fotos input#slide_N:checked ~ .dots #dot_slideN
{
	background-color: #0066A6;
}