/* Reset di base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {    
    background-color: #fff;
}


/* IL CSS DEL MENU INIZIA QUI */

/* Header */
.header {
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    background: white;
    z-index: 1000;
    letter-spacing: 2px;
}

.logo {
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 0.9px; /* Per emulare ancora meglio lo stile Swiss */
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 0.8;
}

.logo-custom { /* Definisce le dimensioni della immagine della rosetta nel logo SCERMI GRANDI */
    width: 11%; /* Dimensione per schermi grandi */
    height: auto; /* Mantiene le proporzioni */
    margin-right: 12px; /* Margine per telefonino */
    transition: width 0.3s ease; /* Opzionale: rende il cambio fluido */
}

.nav-links {
    display: none; /* Nascosto su mobile, attivabile con JS */
    list-style: none;
}

.nav-links li {
    display: inline-block;
    margin-left: 20px;
}

.nav-links a {
    text-decoration: none;
    color: #000;
    font-size: 0.8rem;
    font-weight: 500;
}

.menu-toggle {
    cursor: pointer;
    font-size: 2.0rem; /* TEMPORANEA */
}


/* Nomi realizzazioni e loro descrizione (fuori dalle figurine, sopra le figurine) */

/* Esempio per i titoli sugli schermi dei PC (per telefoni vedi media quesry in fondo a questo file)*/
h1, h2, h3 {
   font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 0.9px; /* Per emulare ancora meglio lo stile Swiss */
    font-size: 2rem;
    font-weight: 600;
    line-height: 0.8; /* Originalmente era settato 0.8 per emulare ancora meglio lo stile Swiss */
    margin-bottom: 1rem;
    padding-right: 10px;           /* Crea 10px di spazio sul lato dx */
    padding-left: 10px;           /* Crea 10px di spazio sul lato sx */
}


.desc-txt {
   /* Applica il font caricato */
    font-family: 'Libre Caslon Text', serif;
    
    /* Impostazioni consigliate per simulare Adobe Caslon Pro */
    font-size: 15px;            /* Il Caslon rende meglio se leggermente più grande. Questo è il font usato sui Telefonini, per gli schermi più grandi vedi sotto nella sezione media query */
    line-height: 1.6;           /* Aumenta l'interlinea per una lettura riposante */
    color: #222;                /* Un nero meno puro è più elegante su sfondo bianco */
    -webkit-font-smoothing: antialiased; /* Rende i tratti del font più nitidi */
    padding-right: 20px;           /* Crea 10px di spazio sul lato dx */
    padding-left: 20px;           /* Crea 10px di spazio sul lato sx */
    padding-bottom: 25px;         /* Crea 25px di spazio dopo il testo, evita di inserire <br> e consente controllo più fine dello spazio */
    

}

/* Strutturaa per scorll orizzontale */

div.scroll-orizzontale {
  width: 700px; /* Crea un contenitore di 700px, che con la media query sui telefonin idiventerà di 100% */
  height: 530px;
    margin: 0 auto; /*centra il contenitore orizzontalmente sullo schermo */  
background: #ffffff;
  overflow: auto; /* 'auto' evita che la barra di scorrimento sia visibile da subito, ma lo stesso compare quando scrolli orizzontalmente */
  white-space: nowrap;
  
  padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 3px;

}

div.scroll-orizzontale img {
    height: 95%;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 3px;
}


/* The dots/bullets/indicators */
.dot {
  /* cursor: pointer; */
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}


/* STRUTTURA FLEX WRAP PER DUE FIGURINE ACCOPPIATE
Abbiamo creato un contenitore (image-container) per le immagini e le abbiamo disposte utilizzando il flexbox. Ogni immagine (o div  .testoretrofigurina) occupa il 50% della larghezza del contenitore, consentendo quindi di visualizzare sempre due immagini accoppiate. La proprietà flex-wrap: wrap garantisce che le immagini passino a riga successiva quando lo spazio è insufficiente.
1) C'è un DIV class IMAGE-CONTAINER che contiene tutta la sezione wrappable (ossia che mette una seconda figurina verso la destra dello schermo se c'è spazio o altrimenti va a capo).
    2) Le IMG occupano il 50%.
    3) C'è un DIV id BOXFIGURINATESTO, anche lui occupa il 50%.
        4) C'è un DIV WRAPPERINTERNORETRO (position Relative) che ha il solo scopo di poter poi dare un riferimento 'absolute' a #TESTOSUSFONDO.
            5) C'è un id #SFONDOTESTO (position Relative) per la img della figurina di sfondo del testo.
            6) C'è un id #TESTOSUSFONDO (position ABSOLUTE) per il testo del retrofigurina.
*/

.image-container {
  display: flex;
  flex-wrap: wrap;
  width: 700px; /* Crea un contenitore di 700px, che con la media query sui telefonin idiventerà di 100% */
margin: 0 auto; /*centra il contenitore orizzontalmente sullo schermo */
}

.image-container img {
  width: 50%; /* Le immagini  img si divideranno in coppie, ognuna occupando il 50% della larghezza del contenitore */
  height: auto;
  box-sizing: border-box;
  padding: 7px;
}

.image-container #boxfigurinatesto {  /* Anche per i  div con id boxfigurinatesto (retro figurina), analogamente a quanto fa con le img, il boxfigurinatesto verrà trattato come una immagine e si dividerà in coppie, ognuna occupando il 50% della larghezza del contenitore */
  width: 50%;
  height: auto;
  box-sizing: border-box;
  padding: 0px;
}

#boxfigurinatesto { /*Dichiara un id per i DIV, crea cioè un oggetto che il flex-wrap tratterà in maniera analoga all'IMG, ma per il testo) */
width: 100%;
}

#wrapperinternoretro { /* ha il solo scopo di poter poi dare un riferimento 'absolute' a #TESTOSUSFONDO */
position: relative;
width: 100%
margin: 0 auto;
}

#sfondotesto{ /* È una id di img per l'immagine di sfondo del retro figurina, finisce sotto il testo della figurina */
width: 100%;
position: relative;
left: 0px;
top: 0px;
z-index: 1; 

 }

 #testosusfondo{ /* È il container finale del testo che sta sul retro della figurina */
width: 88%; 
position: absolute;
left: 6%;
top: 4%;
z-index: 5;
 }

/* Fine struttura FLEX WRAP */


/* Dettagli tipografici retro figurina */

.grandiraccolte
 {
 width: 100%;
 height: auto;
border-width: 0;
padding-top: 2px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
text-align: center;
font-family: 'Oswald', sans-serif;
 font-size: 110%; 
 color:#fafafa; 
 background-color: #e18592;
 }
      
 .futuro
 {
 width: 100%;
 height: auto;
border-top: 0px;
border-bottom: 2.9px solid #6b6c6c;
border-left: 0px;
border-right: 0px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 0px;
padding-right: 0px;
text-align: center;
font-family: "Letterpress Aurora W00 Regular", 'Arial Black', sans-serif; 
font-size: 95%; /* era 125% con vecchio font Dafont , va ridotto per ottenere lo stesso effetto */
color:  #6b6c6c; 
  }

 .azienda
 {
 width: 100%;
 height: auto;
border: 0px;
padding-top: 4px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
text-align: center;
font-family: 'Arial'; sans-serif; /* font-family: 'Arial Narrow'; sans-serif; */
 font-size: 110%; 
 color:  #e18592; 
  }

 .prodotto
 {
 width: 100%;
 height: auto;
border: 0px;
padding-top: 1px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
text-align: center;
 font-family: 'Arial'; sans-serif;
 font-size: 110%; 
 color:  #6b6c6c; 
  }

 .decennio
 {
 width: 100%;
 height: auto;
border: 0px;
padding-top: 1px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
text-align: center;
 font-family: 'Arial'; sans-serif;
 font-size: 80%; 
 color:  #6b6c6c; 
  }

 .descrizione
 {
 width: 100%;
 height: auto;
border: 0px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
text-align: center;
 font-family: 'Garamond', 'Times New Roman', Serif; 
 font-size: 110%; 
 color:  #6b6c6c; 
  }


 .italian
 {	
 width: 100%;
 height: auto;
border: 0px;
padding-top: 8px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
text-align: center;
 font-family: 'Arial';
 font-weight: bolder;
 font-size: 120%; 
 color:  #6b6c6c; 
  }


.hall
 {	
 width: 100%;
 height: auto;
border-top: 0px;
border-bottom: 1.8px solid #6b6c6c;
border-left: 0px;
border-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
text-align: center;
 font-family: Bodoni Moda;
 font-size: 180%; 
  line-height: 1.2;
 font-weight: bold;
 color: #e18592; 
  }

.indirizzoweb
 {
 width: 100%;
 height: auto;
border: 0px;
padding-top: 3px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
text-align: center;
 font-family: 'Arial'; sans-serif;
 font-size: 75%; 
 color:  #6b6c6c; 
  }


.sfondohalloffame{
width: 100%;
margin: 0 auto;
background: #ffffff;
}


.sfondoverde{
width: 100%;
height: 5px;
margin: 0 auto;
background: #0A6A56;
}

.sfondobianco{
width: 100%;
height: 5px;
margin: 0 auto;
background: #F2EEE6;
}


.sfondorosso{
width: 100%;
height: 5px;
margin: 0 auto;
background: #E2374A;
}



/* INIZIO MEDIA QUERY: ATTENZIONE per quanto riguarda il "mobile first" la pagina hof.html è costruita in maniera differente rispetto alle index.html ed eventi.html. La pagina hof è desktop first e solo le media quesry la rendono adatta per gli schermi dei telefoni. Quindi la logica dei formati di defoult, per esempio le dimensioni dei font, per questa pagina vanno invertite. Ciò che nelle pafgine index e eventi è di default per la hof va spostato dentro la media query, e viceversa (es. dimensioni immagine logo). */

/* Media Query per SCHERMI PICCOLI Telefoni Sotto 768*/
@media all and (max-width: 768px) {

/* IL CSS DEL MENU INIZIA QUI */

/* Header */
.header {
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    background: white;
    z-index: 1000;
    letter-spacing: 2px;
}

.logo {
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 0.9px; /* Per emulare ancora meglio lo stile Swiss */
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 0.8;
}

.logo-custom { /* Definisce le dimensioni della immagine della rosetta nel logo */
    width: 20%; /* Dimensione per telefonino */
    height: auto; /* Mantiene le proporzioni */
    margin-right: 12px; /* Margine per telefonino */
    transition: width 0.3s ease; /* Opzionale: rende il cambio fluido */
}

.nav-links {
    display: none; /* Nascosto su mobile, attivabile con JS */
    list-style: none;
}

.nav-links li {
    display: inline-block;
    margin-left: 20px;
}

.nav-links a {
    text-decoration: none;
    color: #000;
    font-size: 0.8rem;
    font-weight: 500;
}

.menu-toggle {
    cursor: pointer;
    font-size: 2.0rem; /* TEMPORANEA */
}


/* === Media query "inversa" rispetto a pagina index ed eventi ==== */

/* Esempio per i titoli */
h1, h2, h3 {
   font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 0.9px; /* Per emulare ancora meglio lo stile Swiss */
    font-size: 2rem;
    font-weight: 600;
    line-height: 0.8;
    margin-bottom: 1rem;
}


.desc-txt {
		font-size: 18px;
			}

/* ========= */

/* Dettagli tipografici retro figurina su SCHERMI PICCOLI (meno di 760px) */

.grandiraccolte
 {
 width: 100%;
 height: auto;
border-width: 0;
padding-top: 2px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
text-align: center;
font-family: 'Oswald', sans-serif;
 font-size: 132%; /* ex 110% per 1,2 */
 color:#fafafa; 
 background-color: #e18592;
 }
      
 .futuro
 {
 width: 100%;
 height: auto;
border-top: 0px;
border-bottom: 2.9px solid #6b6c6c;
border-left: 0px;
border-right: 0px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 0px;
padding-right: 0px;
text-align: center;
font-family: "Letterpress Aurora W00 Regular", 'Arial Black', sans-serif; 
 font-size: 114%; /* ex 95% per 1,2 */ 
 color:  #6b6c6c; 
  }

 .azienda
 {
 width: 100%;
 height: auto;
border: 0px;
padding-top: 4px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
text-align: center;
font-family: 'Arial'; sans-serif; 
/* font-family: 'Arial Narrow'; sans-serif; */
 font-size: 132%;  /* ex 110% per 1,2 */
 color:  #e18592; 
  }

 .prodotto
 {
 width: 100%;
 height: auto;
border: 0px;
padding-top: 1px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
text-align: center;
 font-family: 'Arial'; sans-serif;
 font-size: 132%;  /* ex 125% per 1,2 */
 color:  #6b6c6c; 
  }

 .decennio
 {
 width: 100%;
 height: auto;
border: 0px;
padding-top: 1px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
text-align: center;
 font-family: 'Arial'; sans-serif;
 font-size: 96%;  /* ex 80% per 1,2 */
 color:  #6b6c6c; 
  }

 .descrizione
 {
 width: 100%;
 height: auto;
border: 0px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
text-align: center;
 font-family: 'Garamond', 'Times New Roman', Serif; 
 font-size: 132%;  /* ex 110% per 1,2 */
 color:  #6b6c6c; 
  }


 .italian
 {	
 width: 100%;
 height: auto;
border: 0px;
padding-top: 8px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
text-align: center;
 font-family: 'Arial';
 font-weight: bolder;
 font-size: 144%;  /* ex 120% per 1,2 */
 color:  #6b6c6c; 
  }


.hall
 {	
 width: 100%;
 height: auto;
border-top: 0px;
border-bottom: 1.8px solid #6b6c6c;
border-left: 0px;
border-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
text-align: center;
 font-family: Bodoni Moda;
 font-size: 216%;  /* ex 180% per 1,2 */
  line-height: 1.2;
 font-weight: bold;
 color: #e18592; 
  }

.indirizzoweb
 {
 width: 100%;
 height: auto;
border: 0px;
padding-top: 3px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
text-align: center;
 font-family: 'Arial'; sans-serif;
 font-size: 90%;  /* ex 75% per 1,2 */
 color:  #6b6c6c; 
  }


/* ========= */
	
p {
		font-size: 140%;
		padding: 5px;
	}

iframe  {
width: 98%;
	}

.image-container{width: 100%;}
	.image-container img {width: 100%;} /* Sui telefoni le immagini non si divideranno più in coppie, ognuna occupando il 100% della larghezza del contenitore */
	.image-container #boxfigurinatesto {width: 100%;} /* Sui telefoni anche il retrofigurina occuperà il 100% della larghezza del contenitore */
	.menuhome  {position: fixed; top: 0; width: 100%;  font-size: 100%;  }


}

 div.scroll-orizzontale {width: 98%;   padding: 1px;}

}

/* Media Query per schermi più grandi
@media all and (max-width: 736px) {
}

@media all and (max-width: 980px) {
}

@media all and (max-width: 1280px) {
}

@media all and (max-width: 1690px) {
}
 */