/* Gallery fotografica - scorrimento con scroll-snap, senza jQuery.
   Sostituisce le regole .rslides / .callbacks di responsiveSlides, che
   posizionavano le slide in absolute una sopra l'altra. Qui il track e' un flex
   che scorre orizzontalmente e lo scorrimento e' gestito nativamente dal
   browser. L'aspetto (sfondo scuro di .slider, didascalia, frecce) resta quello
   definito in articolo.css. */

.tema-slider {
	position: relative;
	overflow: hidden;
}

.tema-slider-track {
	display: flex;
	flex-wrap: nowrap;
	list-style: none;
	padding: 0;
	margin: 0 !important;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.tema-slider-track::-webkit-scrollbar {
	display: none;
}

.tema-slider-track > .tema-slide {
	flex: 0 0 100%;
	width: 100%;
	max-width: 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	/* Neutralizza l'eredita' di .rslides li / .callbacks li, che erano in
	   position:absolute con display:none su tutte tranne la prima. */
	position: relative !important;
	display: block !important;
	left: auto !important;
	top: auto !important;
	float: none !important;
	min-height: 0;
	margin: 0 !important;
}

.tema-slider-track > .tema-slide > figure {
	margin: 0;
}

.tema-slider-track > .tema-slide img {
	width: 100%;
	height: auto;
	float: none !important;
}

/* Frecce: stessa resa delle .callbacks_nav di responsiveSlides (stessa sprite,
   stessa posizione), ma come <button> invece che come <a> senza destinazione. */
.tema-slider-nav {
	position: absolute;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	top: 50%;
	margin-top: -70px;
	left: 0;
	opacity: 0.9;
	z-index: 2;
	text-indent: -9999px;
	overflow: hidden;
	text-decoration: none;
	height: 100px;
	width: 40px;
	border: 0;
	padding: 0;
	cursor: pointer;
	background: transparent url("images/arrows_big.png") no-repeat left center;
}

.tema-slider-nav.next {
	left: auto;
	background-position: right center;
	right: 0;
}

.tema-slider-nav:active,
.tema-slider-nav:hover {
	opacity: 1;
}

/* Alle estremita' la freccia resta visibile ma inattiva, cosi' il contenitore
   non cambia larghezza e non si genera uno spostamento di layout. */
.tema-slider-nav:disabled {
	opacity: 0.3;
	cursor: default;
}

/* Stessi valori di .callbacks .caption in articolo.css: la didascalia sta su
   fondo scuro (.slider ha background #222222), quindi il testo resta bianco. */
.tema-slide .caption {
	background: transparent !important;
	max-width: 100%;
	height: auto;
	min-height: 42px;
	padding: 1rem 0 0 0;
	margin: 0;
	font-size: 1.3rem;
	font-weight: normal;
	font-stretch: normal;
	font-style: normal;
	line-height: 1.4;
	letter-spacing: normal;
	color: #ffffff;
}