.diaporama-container{
	margin: auto;
	width: 700px;
}

.diaporama-wide-preview-container{
	width: 700px;
	height: 467px;
	display: flex;
	position: relative;
}

.diaporama-wide-preview-container:hover > .diaporama-control-button{
	display: unset;
}

.diaporama-previewed{
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	position: absolute;
	left:50%;
	top:50%;
	transform: translate(-50%, -50%);

	opacity: 0%;

	transition-property: opacity;
	transition-duration: 0.3s;
	transition-timing-function: ease-in-out;

	pointer-events: none;
	user-select: none;
}

.diaporama-previewed.enabled{
	opacity: 100%;
}

.diaporama-thumbnails-container{
	display: flex;
	flex-direction: row;
	overflow-x: scroll;
	flex-wrap: nowrap;
	padding-bottom: 6px;
	position: relative;

	scroll-behavior: smooth;
}

.diaporama-thumbnail-container:hover{
	filter: brightness(1.1);
	z-index: 1;
}

.diaporama-thumbnail-container.enabled{
	filter: brightness(1.2);
	outline :3px solid white;
 	outline-offset: -3px;
 	z-index: 2;
}

.diaporama-thumbnail-container{
	height: 93px;
	width: 140px;

	transition-property: filter transform;
	transition-duration: 0.1s;
	filter: brightness(1);
	transform: scale(1.0);
}

.diaporama-preview{
	height: 100%;
	width: 140px;
	object-fit: cover;
}

.diaporama-thumbnails-container::-webkit-scrollbar {
	width: 6px;
  	height: 6px;
}

.diaporama-thumbnails-container::-webkit-scrollbar-track {
}
 
.diaporama-thumbnails-container::-webkit-scrollbar-thumb {
  	background: black; 
}

.diaporama-thumbnails-container::-webkit-scrollbar-thumb:hover {
  	background: grey; 
}

.diaporama-control-button{
	border-radius: 50%;
	width: 30px;
	height: 30px;
	position: absolute;

	display: none;

	opacity: 80%;

	background: black;

	cursor: pointer;

	z-index: 1;

	top:50%;
}

.diaporama-control-button:hover{
	opacity: 100%;
}

.diaporama-control-button.previous{
	left:30px;
}

.diaporama-control-button.next{
	right:30px;
}

.diaporama-control-icon{
	width: 60%;
	height: 60%;
	position: absolute;
	user-select: none;
	pointer-events: none;

	top: 50%;
	left:50%;
}

.diaporama-control-icon.previous{
	transform: translate(-50%, -50%) rotate(-90deg);
}

.diaporama-control-icon.next{
	transform: translate(-50%, -50%) rotate(90deg);
}

@media only screen and (min-width: 0px) and (max-width: 800px){

.diaporama-container{
	margin: auto;
	width: 100%;
}

.diaporama-wide-preview-container{
	width:100%;
	height:calc(2/3 * 100vw)
}

}