@charset "utf-8";
/* CSS Document */

.diapoBox { width:100%; padding-top:8vw; }

@media only screen and (min-width:2300px) {
	.diapoBox { padding-top:2vw; }
}

/* Slideshow container */
.slideshow-container { width:100%; overflow:hidden; position:relative; margin:auto; display:flex; flex-wrap:wrap; align-content:center; }
.slideshow-containerRWD { display:none; }

/* Hide the images by default */
.mySlides { display:none; width:100%; }

/* Next & previous buttons */
.prev, .next { cursor:pointer; position:absolute; top:50%; width:auto; margin-top:-22px; padding:16px; color:white; font-weight:bold; font-size:18px; transition:0.6s ease; border-radius:0 3px 3px 0; user-select:none; }

/* Position the "next button" to the right */
.next { right: 0; border-radius: 3px 0 0 3px; }

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); }

.pict { width:100%; display:flex; flex-wrap:wrap; align-content:center; justify-content:center; /* max-height:800px; overflow:hidden; font-size:0; */ }

/* Caption text */
.text { width:100%; display:flex; flex-wrap:wrap; justify-content:center; position:absolute; bottom:1.5em; }
	.text div { background-color:rgba(155,144,124,0.75); color:#FFFFFF; padding:0.5em 1em 0.5em; font-size:1.2em; text-shadow:#000000 2px 2px 5px; }
		.text div a:link, .text div a:visited { color:#FFFFFF; }
		.text div a:hover, .text div a:active { color:#FFFFFF; }

/* The dots/bullets/indicators */
.mySlides-dot { display:none; position:absolute; bottom:1em; left:0; right:0; padding:0.5em 0; text-align:center; }
	.dot { 	cursor:pointer; height:15px; width:15px; margin:0 2px; background-color:rgba(155,144,124); border:#000000 0.15em solid; border-radius:50%; display:inline-block; transition:background-color 0.6s ease; }
	.active, .dot:hover { background-color:#FFFFFF; }

/* Fading animation */
.fade { animation-name: fade; animation-duration:3s; }

@keyframes fade { from {opacity: 0.5} to {opacity: 1} }

@media only screen and (max-width:1080px) {
	.diapoBox { padding-top:14vw; }
}

@media only screen and (max-width:800px) {
	.diapoBox { padding-top:20vw; }
		.text div { font-size:1.2em; }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
	@media only screen and (max-width:440px) {
		.diapoBox { padding-top:11em; }
		.text { bottom:1em; }
			.text div { font-size:0.85em; text-align:center; padding:0.5em 1em; }
		
		.mySlides-dot { display:none; }
	}


	@media only screen and (max-width:350px) {
		.diapoBox { padding-top:18em; }
			.text { bottom:0; }
				.text div { padding:10px; }
	}
}

@media only screen and (-webkit-min-device-pixel-ratio: 3) {

}