@charset "utf-8";
/* CSS Document */
/* Stile generale del documento */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');

/*Lobster - Poppins - Baloo - Raleway*/

@font-face {
  font-family: 'poppins';
  src: url('../FONTS/poppins/Poppins-Regular.ttf') format('ttf'),
       url( '../FONTS/dancing-script/Dancing-Script.ttf') format('ttf');
  font-weight: normal; /* Puoi specificare 'bold', etc., se necessario */
  font-style: normal;  /* Puoi specificare 'italic', etc., se necessario */
}

body {
  font-family: 'poppins', sans-serif;
  margin: 0 auto;
	max-width: 1980px;
	padding: 0 20;
}

/* Stiledell'intestazione */
header {
  position: relative; /* Necessario per il posizionamento assoluto dei figli */
  width: 100%;
  overflow: hidden;
  margin-top: 0px;	
	
}
main {
  	padding: 20px;
	margin-top: 10px;
}

div{
	margin-top: 10px;
}
p {
	margin-top: 10px;
}
span {
	margin: 0px;
	padding: 0px;
	display: block;
	background: rgba(0, 0, 0, 0.5); /* Sfondo trasparente elegante (nero 50%) */
    max-height: 650px; /* Fissa l'altezza del contenitore  - questo devo regolarlo in base al minimo di immagine che voglio che si veda*/
    box-sizing: border-box; /* Include padding e bordi nel calcolo delle dimensioni */
}
/* Layout mobile: menu laterale */
@media (min-width: 1600px) {
    span {
		max-height: 950px;
	}
}

#img_span{
	width: auto; /* Si adatta alla larghezza dello span o del suo contenitore */
    height: auto; /* Mantiene le proporzioni */
	max-width: 100%;
	/*max-height: 500px;*/
    display: block; /* Rimuove lo spazio indesiderato sotto l'immagine */
	padding: 0px;
	margin: auto; /* Centra l'immagine orizzontalmente */
    position: relative; /* Per centrare all'interno del contenitore */
    /*top: 50%;  Centra verticalmente */
    /*transform: translateY(-50%);  Perfeziona il centramento verticale */
}

.backtainer {
	
	background-image: url( "../IMG/back-ex.jpg"); /* Sostituisci con il percorso della tua immagine */ background-size: cover; /* Adatta l'immagine per coprire l'intero contenitore */
	background-repeat: no-repeat; /* Evita la ripetizione dell'immagine */
	width: 100%;	
}



	
/*-------------------------------------------- LOGO --------------------------------------*/
	#log {
	width: 25%;
	max-width: 300px;
	text-align: center;
	border-radius: 3px;
	top: 10px;
	left: 10px;
	position: absolute;
	/*border: 3px solid red;*/
	z-index: 2;
	padding: 0px;
	
	
}
#log img {
	width: 100%;
	max-width: 300px;
	height: auto; /* Mantiene le proporzioni */
	margin: 0px;
	padding: 0px;

}


/* ------------------------------ style messaggi e-mail-----------------*/

#session-message{
	padding: 20px;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	max-width:  400px;
	width: 100%;
	box-sizing: border-box; /* Aggiunto box-sizing */
	display: block;
	margin: 0px 20px;
	color: #333; 
	font-weight: bold;
	font-family: 'Baloo 2', cursive;
}