@media(max-width: 767px) {
	div.picture {
		display:flex;
		align-items: center;
	}

	div.picture img {
		width:100%;
	}
}

@media(min-width: 768px) {
	div.picture img {
		height:390px;
	}
}

div.thumbnails {
	width:100%;
	overflow: hidden;
	height:80px;
	margin-top:5px;
	margin-bottom:5px;
	white-space: nowrap;
}

div.thumbnails img {
	height:60px;
	margin-left:5px;
	margin-right:5px;
}

div.picture {
	position:relative;
	height:400px;
	text-align: center;
	box-shadow:0px 12px 60px -30px rgb(0 0 0 / 20%);
	overflow:hidden;
}

div.picture i.rightarrow {
	position:absolute;
	right:10px;
	z-index: 2;
	top:50%;
}

div.picture i.leftarrow {
	position:absolute;
	left:10px;
	z-index: 2;
	top:50%;
}

img.thumb {
	opacity:.4;
}

img.thumb.selected {
	opacity:1;
}

@keyframes fadeout {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

div.picture img.hiding {
	animation-name: fadeout;
	animation-duration: .3s;
	animation-fill-mode: forwards;
	animation-play-state: running;
}

div.picture img.showing {
	animation-name: fadein;
	animation-duration: .3s;
	animation-fill-mode: forwards;
	animation-play-state: running;
}