@charset "UTF-8";
/* CSS Document */
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color:#e5e3e1;

	text-align: center;
}
@font-face {
  font-family: 'Jokker';              /* nome a tua scelta */
	src: url('jokker.woff2') format('woff2'),
       url('jokker.woff') format('woff');
  font-weight: normal;                 /* opzionale: puoi gestire vari pesi */
  font-style: normal;
  font-display: swap;                  /* opzionale: migliora il caricamento */
}
.video-container {

      width: 100%;
			text-align:center;
    }
    video {
      width: 60%;
      border-radius: 0px;
    }


h1 {
	font-family: 'Jokker';
	font-size:14pt;
	font-weight:100;
}

h2 {
	font-family: 'Jokker';
	font-size:26pt;

}

.overlay_raffle {
	width:100%;
	position:fixed;
	bottom:0px;
	height:200px;
	background: #000000;
	z-index:999;
	text-align: center;
}

.gallery_bt {
	position:fixed;
	top:20px;
	width:100%;
	z-index:999;
	font-family: 'Jokker';
	color:#F0BD1B;
	font-size:14pt;

}
.gallery_bt_right {
	display:inline-block;
	float:right;
	text-align:right;
	padding: 0px 0px 0px 0px;
}

.header {
	position:fixed;
	bottom:0px;
	width:100%;
	z-index:99;
	font-family: 'Jokker';
	color:#F0BD1B;
	font-size:14pt;
}

.header_sx {
	display:inline-block;
	float:left;
	text-align:left;
	padding:0px 0px 10px 20px;
}

.header_dx {
	display:inline-block;
	float:right;
	text-align:right;
	padding: 0px 20px 10px 0px;
}

.logo {
	position:absolute;
	width:100%;
	padding-top:50vh;
	text-align:center;
	z-index:100;
}

.logo_interno {
	width:600px;
	height:100px;

}

.slider_img {
	display:inline-block;
	width:auto;
	height:100vh;
	}

.slider_img img {
	width:100%;
	height:auto;
}

.testo {
	display:inline-block;
	width:100%;
	background-color:#e5e3e1;
	height:400px;
}

.testo_intro {
	padding:0px 100px 80px 100px;
	text-align:center;
	font-family: 'Jokker';
	font-size:16pt;
	color:#ac7a61;
	line-height: 25pt;
	background-color:#e5e3e1;
}

.artisti {
	display:inline-block;
	text-align:center;
	width:100%;
	background-color:#FFFFFF;
	font-size: 20pt !important;
	color:#000000;

}

.linea_artisti {
	display:inline-block;
	width:100%;
}
.artisti_margine_sx {
	display:inline-block;
	float: left;
	width:10%;
}

.artista {
	display:inline-block;
	float: left;
	width:16%;
	padding: 2%;
	text-align:center;
	font-family: 'Jokker';
	font-size:14pt;
}

.artisti_margine_dx {
	display:inline-block;
	float: right;
	width:10%;
}

.serate {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 0; /* nessuno spazio tra le colonne */
		text-align: center;
	}

	.serate figure {
		margin: 0;
	}

	.serate img {
		width: 80%;
		margin-left:10%;
		margin-right:10%;
		height: auto;            /* mantiene il rapporto 9:16 dell'immagine */
		display: block;
		/* opzionale: se vuoi forzare un taglio uniforme, usa le 2 righe sotto:
		aspect-ratio: 9 / 16;
		object-fit: cover;
		*/
	}

	.serate video {
		width: 90%;
		margin-left:5%;
		margin-right:5%;
		height: auto;            /* mantiene il rapporto 9:16 dell'immagine */
		display: block;
		/* opzionale: se vuoi forzare un taglio uniforme, usa le 2 righe sotto:
		aspect-ratio: 9 / 16;
		object-fit: cover;
		*/
	}

	.partners { width:100%; background:#ad7b62; text-align:center; color:#fff; padding-bottom:80px; }

	/* immagini fluide */
	.partners img { max-width:100%; width:100%; height:auto; padding:0; display:block; margin:0 auto; }

	.linea_partners { width:100%; margin:0 auto; }

	/* se vuoi layout a griglia desktop */
	@media (min-width: 768px) {
	  .linea_partners { display:flex; gap:40px; justify-content:center; }
	  .linea_partners img { width:auto; max-width:300px; } /* opzionale per i loghi */
	}

	/* mobile */
	@media (max-width: 480px) {
	  .partners img { width:100%; padding:0; }
	  .linea_partners { display:block; }
	}

.contatti {
	width:100%;
	background-color: #06141b;
		font-family: 'Jokker';
	text-align:center;
	color:#aaaaaa;
	padding-bottom:200px;
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

	.video-container {
	      width: 100%;
				text-align:center;
	    }
	    video {
	      width: 100%;
	      border-radius: 0px;
	    }

	.artisti_margine_sx {
		width:0%;
		display:none;
	}

	.artista {
		width:80%;
		padding: 10%;

	}

	.artisti_margine_dx {
		width:0%;
		display:none;
	}

	.testo_intro {
	padding:20px 0px 0px 0px;

}

.serate {
			 grid-template-columns: 1fr;
		 }


}