﻿.slideShow {
	
	width: 60%;
	margin-left: auto;
	margin-right: auto;

}

@media (max-width: 82em) {

	.slideShow {
		width: 100%;

	}
}

/* Image zentrieren */
.slideShow .projector img, .slideShow .projector .slider .slide {
	aspect-ratio: 10/6;
}

.slideShow .projector img, .slideShow .projector .slider .slide img {

	object-fit: cover; /* wegen asprect-ratio */
	object-position: center center;
	border-radius: 12px;
}


.slideShow .projector .controlsPanel button {
	cursor: pointer;
		
	filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.2));
}

.slideShow .projector .controlsPanel .forwardButton {
	display: none;
}

.slideShow .projector .controlsPanel .backwardButton {
	display: none;
}

#butImpressionsSlideShowBackward {
	background-image: url("../../pix/Layout/BackgroundButtonBackward.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-color: transparent;
	width: 70px;
	height: 70px;
	/**/
	position: absolute;
	top: calc(50% - 3em);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	left: 3%;
	z-index: 10;
	filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.2));
}

@media (max-width: 43em) {

	#butImpressionsSlideShowBackward {
		width: 50px;
		height: 50px;
		top: calc(50% - 5em);
	}
}

@media (max-width: 26em) {

	#butImpressionsSlideShowBackward {
		width: 40px;
		height: 40px;
	}
}

#butImpressionsSlideShowForward {
	background-image: url("../../pix/Layout/BackgroundButtonForward.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-color: transparent;
	width: 70px;
	height: 70px;
	/**/
	position: absolute;
	top: calc(50% - 3em);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	right: 3%;
	z-index: 10;
	filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.2));
}

@media (max-width: 43em) {

	#butImpressionsSlideShowForward {
		width: 50px;
		height: 50px;
		top: calc(50% - 5em);
	}
}

@media (max-width: 26em) {

	#butImpressionsSlideShowForward {
		width: 40px;
		height: 40px;
	}
}

#butImpressionsSlideShowBackward, #butImpressionsSlideShowForward {
	border: 0;
}

.slideShow .projector .controlsPanel .positionIndicatorPanel button {
	height: auto;
	aspect-ratio: 1;
	border-radius: 50%;
	margin-left: 10px;
	box-shadow: 0 3px 10px rgb(0 0 0 / 0.4);
}

.slideShow .projector .controlsPanel .positionIndicatorPanel button.active {
	background-color: var(--theme-fresh-color);
}

.slideShow .caption {
	min-height: 3.0em;


	font-size: 1.0em;
	font-style: italic;
	margin-top: 0.8em;
	margin-bottom: 1.6em;
}

@media (max-width: 43em) {

	.slideShow .caption {
		min-height: 7.0em;		
	}  
}


