/* Hauptbereich */
.image_Main,
.slideshow_Main {
	position: relative;
}

/* Standardabstand vom Bildhauptbereich */
.image_MainHeader,
.slideshow_MainHeader {
	margin-bottom: 15px;
}

/* Setzungen für Bilderstrecke */
.image_Collection,
.slideshow_Collection {
	position: relative;
	overflow: hidden;	
	margin-bottom: 20px;
}
.slideshow_Collection-list {
	margin-bottom: 0px;
}

/* Standardabstand zwischen Bildern */
.image_ItemWrapper,
.slideshow_ItemWrapper {
	position: relative;	
}
.slideshow_Collection-list .slideshow_ItemWrapper {
	margin-bottom: 20px;
}

/* beim Übergang der Bilder */
.slideshow_NextImage {
	position: absolute;
	top: 0;
	width: 100%;
}

/* Position für Overlay */
.image_ImageItem,
.slideshow_ImageItem {
	position: relative;
}

/* 100% innerhalb des Containers, der die tatsächliche Breite vorgibt */
.image_Image,
.slideshow_Image {
    border: none; 
    margin: 0px;
    max-width: 100%;
    height: auto;
}
.slideshow_Image {
	width: 100%;
}

/* normales Icon standardmäßig ausgeblendet */
.image_IconItem-biggerScreen,
.slideshow_IconItem-biggerScreen {
	display: none;
}

/* Icon für kleine Screens standardmäßig eingeblendet */
.image_IconItem-smallerScreen,
.slideshow_IconItem-smallerScreen {
	position: absolute;
}

/* Icon Standard-Abstand vom Bildrand */
.image_IconItem .icon,
.slideshow_IconItem .icon {
	padding: 20px 50px 0px 50px;
	margin: 0px;
}

/* Icon links auch dann links, falls die Beschreibung in der rechten Hälfte liegt */
.image_OverlayWrapper-right .image_Overlay-half .orientation-left,
.slideshow_OverlayWrapper-right .slideshow_Overlay-half .orientation-left {
	margin-left: -100%;
}
.image_OverlayWrapper-left .image_Overlay-half .orientation-right,
.slideshow_OverlayWrapper-left .slideshow_Overlay-half .orientation-right {
	margin-right: -100%;
}

/* Notwendige Angaben für das Overlay  */
.image_Overlay-hasTransparence.color-black,
.slideshow_Overlay-hasTransparence.color-black {
	background-color: transparent;
}

/* Festlegungen zur Beschreibung */
.image_Overlay .image_DescriptionWrapper,
.slideshow_Overlay .image_DescriptionWrapper {
	padding: 0px;	
}
.image_DescriptionWrapper-left,
.slideshow_DescriptionWrapper-left {
	text-align: left;
}
.image_DescriptionWrapper-right,
.slideshow_DescriptionWrapper-right {
	text-align: right;
}

@media (min-width: 480px) {	
	/* Icon standardmäßig ab 480px eingeblendet */
	.image_IconItem-biggerScreen,
	.slideshow_IconItem-biggerScreen {
		display: block;
	}
	.image_IconItem-smallerScreen,
	.slideshow_IconItem-smallerScreen {
		display: none;
	}
	
	/* Notwendige Angaben für das Overlay  */
	.image_OverlayWrapper,
	.slideshow_OverlayWrapper {
		position: absolute;
		top: 0px;
		height: 100%;
	}
	.image_OverlayWrapper-left,
	.slideshow_OverlayWrapper-left {
		left: 0px;
		padding-right: 0px;
	}
	.image_OverlayWrapper-right,
	.slideshow_OverlayWrapper-right {
		right: 0px;
		padding-left: 0px;
	}
	.image_Overlay,
	.slideshow_Overlay {
		height: 100%;	
	}
	.image_Overlay-hasTransparence.color-black,
	.slideshow_Overlay-hasTransparence.color-black {
		background-color: rgba(0, 0, 0, 0.3);
	}
	.image_Overlay-hasTransparence.color-white,
	.slideshow_Overlay-hasTransparence.color-white {
		background-color: rgba(255, 255, 255, 0.3);
	}
	.image_Overlay-hasTransparence.color-turquois,
	.slideshow_Overlay-hasTransparence.color-turquois {
		background-color: rgba(32, 249, 236, 0.3);
	}	
	
	/* Clear wegen Icon */
	.image_DescriptionWrapper,
	.slideshow_DescriptionWrapper {
		clear: both;
	}
	.image_Overlay .image_DescriptionWrapper,
	.slideshow_Overlay .slideshow_DescriptionWrapper {
		padding: 20px 50px 20px 50px;	
	}	
}

/* Textfarben */
.image_DescriptionWrapper.color-white,
.slideshow_DescriptionWrapper.color-white {
	color: #fff;
	background: transparent;
}
.image_DescriptionWrapper.color-black,
.slideshow_DescriptionWrapper.color-black {
	color: #000;
	background: transparent;
}
.image_DescriptionWrapper.color-red,
.slideshow_DescriptionWrapper.color-red {
	color: #df0613;
	background: transparent;
}

/* Automatische Silbentrennung oder zumindest ein break-word */
.image_DescriptionWrapper,
.slideshow_DescriptionWrapper {
	word-break: break-word;
	-moz-hyphens: auto;
	-o-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

/* Die Referenz um das Bild */
.image_ImageReference,
.slideshow_ImageReference {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

/* Pfeilsteuerung */
.slideshow_ControlArrowWrapper {
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 9000;
}
.slideshow_ControlArrowWrapper-left {
	left: 0px;
}
.slideshow_ControlArrowWrapper-right {
	right: 0px;
}
.slideshow_ControlArrow {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 50px;
	color: #fff;
}
.slideshow_ControlArrow:focus {
	color: #fff;
	outline: none;
}
.slideshow_ControlArrow:hover {
	color: #ccc;
}
.slideshow_ControlArrow-left {
	left: 0px;
	text-shadow: 0px 0px 1px rgba(0, 0, 0, 1);
	
}
.slideshow_ControlArrow-right {
	right: 0px;
	text-shadow: 0px 0px 1px rgba(0, 0, 0, 1);
}
.slideshow_ControlArrow-left:hover {
	background-image: linear-gradient(to left, transparent 0px, rgba(0, 0, 0, 0.3) 100%);
}
.slideshow_ControlArrow-right:hover {
	background-image: linear-gradient(to right, transparent 0px, rgba(0, 0, 0, 0.3) 100%);
}
.slideshow_ControlArrow-left .slideshow_ControlArrowSpan {
	left: 4px;
}
.slideshow_ControlArrow-right .slideshow_ControlArrowSpan {
	right: 4px;
}
.slideshow_ControlArrowSpan {
	position: absolute;
	top: 50%;
	font-size: 64px;
	font-size: 4rem;
	line-height: 1; /* wichtig für javascript */
}

/* Schaltflächen-Navigation */
.slideshow_ButtonNav {
	position: absolute;
	left: 50%;
	width: 80%;
	margin-left: -40%;
	list-style: none;
	padding: 0px;
	font-size: 0px;
	line-height: 0px;
	z-index: 9000;	
	text-align: center;
	bottom: 20px;
}
.slideshow_Li {
    display: inline-block;
	border-width: 1px;
	margin: 0px 5px 5px 0px;
	padding: 0px 0px 0px 0px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border-color: #fff;
	box-shadow: 0 0 0 1px #000;
}
.slideshow_LiActive {
	border-style: solid;
	background-color: #fff;
}
.slideshow_LiInactive {
	border-style: solid;
	background-color: rgba(0,0,0,0.1);
}
.slideshow_Li:hover {
    cursor: pointer;
}