/* Reset di base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* Layout orizzontale */
body {
  background-image: url("/assets/img/site/history.png");
  background-repeat: repeat;
background-size: 260px 89px;
  overflow: hidden; /* Evita scroll verticale */
  height: 100vh;
  display: flex;
  font-family: var(--body-font-family);
  background-color: #eee;
}
/*---------------------------------------
  CUSTOM PROPERTIES ( VARIABLES )             
-----------------------------------------*/ :root {
  --white-color: #ffffff;
  --primary-color: #F8CB2E;
  --secondary-color: #000000;
  --section-bg-color: #f0f8ff;
  --custom-btn-bg-color: #EE5007;
  --custom-btn-bg-hover-color: #c01f27;
  --dark-color: #000000;
  --p-color: #717275;
  --border-color: #7fffd4;
  --link-hover-color: #B22727;
  --body-font-family: 'interstateregular', sans-serif;
  --h1-font-size: 74px;
  --h2-font-size: 46px;
  --h3-font-size: 32px;
  --h4-font-size: 28px;
  --h5-font-size: 24px;
  --h6-font-size: 22px;
  --p-font-size: 18px;
  --btn-font-size: 22px;
  --copyright-font-size: 16px;
  --border-radius-large: 100px;
  --border-radius-medium: 20px;
  --border-radius-small: 10px;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-bold: 700;
}
@font-face {
  font-family: 'ronregular';
  src: url('fonts/ron_free-webfont.woff2') format('woff2'), url('fonts/ron_free-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'interstateregular';
  src: url('fonts/interstate-regular-font-webfont.woff2') format('woff2'), url('fonts/interstate-regular-font-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
/* Per browser basati su WebKit */ ::-webkit-scrollbar {
  width: 12px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 6px;
  border: 3px solid #f1f1f1;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}
/*---------------------------------------
  TYPOGRAPHY               
-----------------------------------------*/
h1, h3, h4, h5, h6, p {
  font-family: 'interstateregular', sans-serif;
}
h2 {
  font-family: 'ronregular';
  font-size: 70px !important;
}
h2, h3, h4, h5, h6 {
  color: var(--dark-color);
}
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-bold);
}
h1 {
  font-size: var(--h1-font-size);
}
h2 {
  font-size: var(--h2-font-size);
}
h3 {
  font-size: var(--h3-font-size);
}
h4 {
  font-size: var(--h4-font-size);
}
h5 {
  font-size: var(--h5-font-size);
}
h6 {
  font-size: var(--h6-font-size);
}
p {
  color: #000;
  font-size: var(--p-font-size);
  font-weight: var(--font-weight-light);
}
ul li {
  color: var(--p-color);
  font-size: var(--p-font-size);
  font-weight: var(--font-weight-light);
  list-style: none;
}
a, button {
  touch-action: manipulation;
  transition: all 0.3s;
}
a {
  display: inline-block;
  color: var(--primary-color);
  text-decoration: none !important;
}
a:hover {
  color: var(--link-hover-color);
}
b, strong {
  font-weight: var(--font-weight-bold);
}
h2.history {
  font-family: 'ronregular';
  font-weight: var(--font-weight-light);
  color: #9f9c9685; /* Colore più visibile senza trasparenza */
  font-size: 20em !important; /* Ridotto per adattarsi allo schermo */
  line-height: 150%; /* Spaziatura più compatta */
  text-align: center;
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
  white-space: nowrap; /* Evita il testo su più righe */
  opacity: 0; /* Inizialmente invisibile */
  animation: slideIn 1.5s ease-out forwards;
  animation-delay: 1s; /* Ritardo per far partire dopo l'animazione della macchina */
}
h2.secondo-layer {
  font-family: 'ronregular';
  font-weight: var(--font-weight-light);
  color: #9f9c9685; /* Colore più visibile senza trasparenza */
  font-size: 20em !important; /* Ridotto per adattarsi allo schermo */
  line-height: 150%; /* Spaziatura più compatta */
  text-align: center;
  position: absolute;
  z-index: 1;
  pointer-events: none;
  white-space: nowrap; /* Evita il testo su più righe */
  opacity: 0; /* Inizialmente invisibile */
  animation: slideIn 1.5s ease-out forwards;
  animation-delay: 1s; /* Ritardo per far partire dopo l'animazione della macchina */
}
img {
  max-width: 100%;
}

/*---------------------------------------
  NAVIGATION              
-----------------------------------------*/
/* Navbar Sticky */
.navbar {
  position: fixed;
  z-index: 9999999;
  top: 0;
  transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out; /* Transizione più lenta */
  margin: auto !important;
  text-align: center;
  padding: 5px 10px;
  left: 50%; /* Posiziona la navbar al centro orizzontalmente */
  transform: translateX(-50%); /* Centra esattamente la navbar */
  width: 83%;
  /* max-width: 1320px;*/
  background-color: white;
  margin-top: 30px !important;
  border-radius: 10px 10px 0 0 !important;
  max-width: 1320px;
}
.container.navigazione {
  display: flex;
  justify-content: center; /* Centra il contenuto della navbar */
}
.navbar-brand {
  margin-right: auto; /* Allinea a sinistra il logo */
}
.navbar-nav {
  display: flex;
  justify-content: center; /* Centra le voci di menu */
  align-items: center;
}
.navbar-nav .nav-link a {
  display: inline-block;
  color: #1a2f2b;
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  position: relative;
  font-family: 'interstateregular', sans-serif;
  border-radius: var(--border-radius-large);
  list-style: none !important;
}
/* Logo */
.nav-logo {
  max-width: 130px;
}
/* Menu centrale */
.nav-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 40px; /* Spaziatura tra i link */
  margin-right: 3rem !important;
}
.nav-item .nav-link {
  text-decoration: none;
  color: #1a2f2b;
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  position: relative;
  padding: 10px 15px 10px 15px;
  font-family: 'interstateregular', sans-serif;
  margin-left: 40px;
}
.nav-item .nav-link:hover {
  color: #1a2f2b; /* Colore al passaggio del mouse */
}
/* Icone social */
.nav-social {
  display: flex;
  gap: 20px;
  list-style: none;
  margin-right: 3rem !important;
  height: 20px; /* Dimensione icone */
  padding: 10px 0; /* Aggiungi un po' di padding per spazio */
}
img.nav-ig {
  max-width: 20px !important;
  margin-left: 40px;
}
img.nav-fb {
  max-width: 20px !important;
  margin-left: 5px;
}
.nav-container {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  justify-content: center; /* Centra il contenuto della navbar */
}
/* Stile per il burger menu */
.navbar-toggler {
  display: none;
  background: none;
  border: none;
  font-size: 30px;
  cursor: pointer;
	color: #000;
}
/* Megamenu - Fisso e non influenzato dallo scroll */
.fullscreen-megamenu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  color: white;
  display: none; /* Nascosto di default */
  align-items: center;
  justify-content: center;
  z-index: 10000;
  overflow: hidden; /* Previene lo scroll all'interno del megamenu */
}
/* Lista megamenu */
.megamenu-list {
  list-style: none;
  padding: 0;
  text-align: center;
}
.megamenu-list li {
  margin: 20px 0;
}
.megamenu-list li a {
  color: white;
  font-size: 24px;
  text-decoration: none;
  font-family: 'interstateregular', sans-serif;
  transition: color 0.3s;
}
.megamenu-list li a:hover {
  color: #ccc;
}
/* Mostra il megamenu quando attivato */
.fullscreen-megamenu.active {
  display: flex;
	z-index: 99999999;
}
.close-megamenu {
  background-color: #00000000;
  position: relative;
  color: #fff;
  top: -30%;
  right: -20%;
	padding: 10px;
	border-radius: 5px;
  border-color: #000;
  hover-color: #000;
  hover-bg: #f8f9fa;
  hover-border-color: #f8f9fa;
  active-color: #000;
   active-bg: #f8f9fa;
  active-border-color: #f8f9fa;
  active-shadow: none;
   disabled-color: #f8f9fa;
   disabled-bg: transparent;
   disabled-border-color: #f8f9fa;
   gradient: none;
  box-shadow: none !important;
  text-shadow: none !important;
 
}
.close-megamenu.btn-outline-light {
  background: none !important;
  border: none !important;
  color: #fff !important;
}
/* Container principale per il layout orizzontale */
.container {
  display: flex;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden; /* Disabilita lo scroll verticale */
  scroll-snap-type: none; /* Disabilita lo scroll per sezione */
}
.section {
  flex: 0 0 auto; /* Le sezioni non si espandono, ma prendono la larghezza del loro contenuto */
  height: 100vh; /* Ogni sezione avrà altezza piena */
  display: flex;
  justify-content: center;
  align-items: center;
}
#START→ {
  width: 100vw !important;
  max-width: 100vw;
}
#1962 {
  width: 100vw !important;
}
#section3 {
  width: 80vw !important;
}
#section4 {
  width: 100vw !important;
}
#section6 {
  width: 85vw !important;
}
#section7 {
  width: 80vw !important;
}
#section8 {
  width: 50vw !important;
}
/*---------------------------------------
  HISTORY OF A LEGEND              
-----------------------------------------*/
/* Lista megamenu */
.megamenu-list {
  list-style: none;
  padding: 0;
  text-align: center;
}
.megamenu-list li {
  margin: 30px 0px 30px 30px;
  border-bottom: 1px solid #eee;
}
.megamenu-list li a {
  color: white;
  font-size: 40px;
  text-decoration: none;
  font-family: 'ronregular', sans-serif;
  text-transform: uppercase;
  transition: color 0.3s;
}
.megamenu-list li a:hover {
  color: #ccc;
}



#history {
  height: 100vh; /* Occupa tutta l'altezza del viewport */
  display: flex !important;
  justify-content: center; /* Allinea orizzontalmente al centro */
  align-items: center; /* Allinea verticalmente al centro */
  overflow: hidden; /* Evita scroll indesiderati */
}



.macchina-legend {
  width: 80%; /* Dimensione immagine */
 /*  max-width: 90%; Limita la larghezza massima */
  position: relative; /* Posizione normale */
  z-index: 2; /* Sopra il testo */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 2s cubic-bezier(0.25, 0.8, 0.25, 1), transform 2s cubic-bezier(0.25, 0.8, 0.25, 1); 
}

/* Classe che applica l'animazione quando l'immagine è visibile */
.macchina-legend.animate {
  opacity: 1;
  transform: translateY(0);
}





.space {
	padding-right: 0;
}


/* Animazione per il fade-in della macchina */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fadein-up {
  animation: fadeInUp 0.8s ease-out;
  animation-fill-mode: both; /* Mantiene lo stato finale dell'animazione */
}
/* Animazione per il movimento del titolo */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-50px); /* Parte dall'alto */
  }
  to {
    opacity: 1;
    transform: translateY(0); /* Arriva al centro */
  }
}
/*---------------------------------------
  19631965            
-----------------------------------------*/
#secondo-layer {
  position: relative; /* Posizione relativa per ancorare gli elementi interni */
  height: 100vh; /* Occupa tutta l'altezza del viewport */
  display: flex;
  justify-content: center; /* Allinea orizzontalmente al centro */
  align-items: center; /* Allinea verticalmente al centro */
  margin-left: 400px;
  border-left: 1px solid black; /* Bordo sinistro */
}
.vertical-text {
  writing-mode: vertical-lr; /* Testo verticale */
  text-orientation: mixed; /* Mantiene l'orientamento leggibile */
  transform: rotate(180deg); /* Inverte l'orientamento per partire dal basso verso l'alto */
  position: absolute; /* Posizionamento assoluto rispetto al contenitore */
  left: 0; /* Aderisce al bordo sinistro del contenitore */
  top: 50%; /* Centra verticalmente */
  transform-origin: left center; /* Imposta il punto di rotazione */
  translate: 0 -50%; /* Centra verticalmente rispetto al contenitore */
  font-size: 10px; /* Dimensione del testo */
  color: #000; /* Colore del testo */
  letter-spacing: 2px; /* Spaziatura tra lettere */
  font-weight: bold; /* Grassetto */
  text-transform: uppercase;
  background-color: #eee;
  margin-left: 6px;
  padding-top: 35px;
  padding-bottom: 35px;
  white-space: nowrap;
}
/*---------------------------------------
  SJ            
-----------------------------------------*/
#section3 {
  display: flex;
  justify-content: center; /* Allinea orizzontalmente al centro */
  align-items: center; /* Allinea verticalmente al centro */
  height: 100vh; /* Altezza dell'intero viewport */
  padding: 20px; /* Aggiunge spazio interno ai bordi */
  box-sizing: border-box; /* Include il padding nelle dimensioni */
}
/* Contenitore del testo */
#SJ {
  max-width: 900px;
  text-align: left;
  padding: 20px;
}
/* Titolo principale */
h3.SJ {
  font-size: 9rem; /* Dimensione grande */
  margin-bottom: 10px; /* Spazio sotto al titolo */
  font-family: 'ronregular', sans-serif;
  font-weight: var(--font-weight-light);
  line-height: 150%; /* Spaziatura più compatta */
  text-transform: uppercase;
}
/* Sottotitolo */
#SJ h4 {
  font-size: 3rem;
  margin-bottom: 20px;
  font-family: 'ronregular', sans-serif;
  font-weight: var(--font-weight-light);
  line-height: 100%;
  text-transform: uppercase;
}
h4.typewriter {
  overflow: hidden; /* Nasconde il testo che non è ancora visibile */
  white-space: pre-wrap; /* Permette al testo di andare a capo correttamente */
  word-wrap: break-word; /* Gestisce la rottura delle parole troppo lunghe */
  margin: 0 auto;
  letter-spacing: .1em;
  display: inline-block;
}
/* Paragrafi */
#SJ p {
  font-size: 1rem; /* Dimensione standard */
  line-height: 1.8; /* Altezza della riga per leggibilità */
  margin-bottom: 15px; /* Spazio tra i paragrafi */
  font-family: 'interstateregular', sans-serif;
  font-weight: var(--font-weight-regular);
  color: #000;
}
/* Stato iniziale del background */
span.red-circle {
  background-image: url("/assets/img/site//round-circle.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block; /* Assicura che il cerchio venga visualizzato come elemento inline */
  padding-left: 10px; /* Aggiungi uno spazio tra il cerchio e il testo */
  vertical-align: middle; /* Centra verticalmente l'immagine con il testo */
}
/*---------------------------------------
  LIVELLO 4 imh            
-----------------------------------------*/
#section4 {
  mergin-left: -900px !important;
}
.livello3 {
  height: 100vh;
  left: 0;
  z-index: 3
}
.img-sopra {
  z-index: 4;
  width: auto;
  height: 478px;
  margin-left: -200px;
}
/*---------------------------------------
  LIVELLO 5 imh            
-----------------------------------------*/
.img-5 {
  width: auto;
  height: 478px;
  margin-left: 0px;
}
.journal {
  height: 70vh;
}
/*---------------------------------------
  LIVELLO 6 img            
-----------------------------------------*/
#sesto-layer {
  position: relative; /* Posizione relativa per ancorare gli elementi interni */
  height: 100vh; /* Occupa tutta l'altezza del viewport */
  display: flex;
  justify-content: center; /* Allinea orizzontalmente al centro */
  align-items: center; /* Allinea verticalmente al centro */
  margin-left: 200px;
  border-left: 1px solid black; /* Bordo sinistro */
}
/*---------------------------------------
  LIVELLO 7            
-----------------------------------------*/
#section3 {
  display: flex;
  justify-content: center; /* Allinea orizzontalmente al centro */
  align-items: center; /* Allinea verticalmente al centro */
  height: 100vh; /* Altezza dell'intero viewport */
  padding: 20px; /* Aggiunge spazio interno ai bordi */
  box-sizing: border-box; /* Include il padding nelle dimensioni */
}
/* Contenitore del testo */
#livello7 {
  max-width: 900px;
  text-align: left;
  padding: 20px;
}
/* Titolo principale */
h3.livello7 {
  font-size: 7rem; /* Dimensione grande */
  margin-bottom: 100px; /* Spazio sotto al titolo */
  font-family: 'ronregular', sans-serif;
  font-weight: var(--font-weight-light);
  line-height: 80%; /* Spaziatura più compatta */
  text-transform: uppercase;

}
.typewriter-container {
  height: 200px;
}
h4.typewriter {
  overflow: hidden; /* Nasconde il testo che non è ancora visibile */
  white-space: pre-wrap; /* Permette al testo di andare a capo correttamente */
  word-wrap: break-word; /* Gestisce la rottura delle parole troppo lunghe */
  margin: 0 auto;
  letter-spacing: .1em;
  display: inline-block;
}
/* Paragrafi */
#livello7 p {
  font-size: 1rem; /* Dimensione standard */
  line-height: 1.5; /* Altezza della riga per leggibilità */
  margin-bottom: 15px; /* Spazio tra i paragrafi */
  font-family: 'interstateregular', sans-serif;
  font-weight: var(--font-weight-regular);
  color: #000;
}
#nono-layer {
  position: relative; /* Posizione relativa per ancorare gli elementi interni */
  height: 100vh; /* Occupa tutta l'altezza del viewport */
  display: flex;
  justify-content: center; /* Allinea orizzontalmente al centro */
  align-items: center; /* Allinea verticalmente al centro */
  margin-left: 400px;
  border-left: 1px solid black; /* Bordo sinistro */
}
#dodici-layer {
  position: relative; /* Posizione relativa per ancorare gli elementi interni */
  height: 100vh; /* Occupa tutta l'altezza del viewport */
  display: flex;
  justify-content: center; /* Allinea orizzontalmente al centro */
  align-items: center; /* Allinea verticalmente al centro */
  margin-left: 400px;
  border-left: 1px solid black; /* Bordo sinistro */
}
/* TIMELINE */
/* Contenitore esterno con sfondo fisso */
.timeline-wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: #eee;
  z-index: 999;
}
/* Contenitore ridotto della timeline */
.timeline-container {
  position: absolute;
  left: 50%;
  width: 40%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transform: translateX(-50%);
}
/* Effetto sfumatura ai lati */
.timeline-container::before, .timeline-container::after {
  content: "";
  position: absolute;
  top: 0;
  width: 20%;
  height: 100%;
  pointer-events: none;
  z-index: 1001;
}
.timeline-container::before {
  left: 0;
  background: linear-gradient(to right, rgba(238, 238, 238, 1) 0%, rgba(238, 238, 238, 0) 100%);
}
.timeline-container::after {
  right: 0;
  background: linear-gradient(to left, rgba(238, 238, 238, 1) 0%, rgba(238, 238, 238, 0) 100%);
}
/* Righello che scorre */
.timeline-ruler {
  position: absolute;
  height: 24px;
  width: calc(100vw * 2.8);
  background: url("/assets/img/site//rule.png");
  background-repeat: repeat;
  background-size: cover;
}
/* Cursore fisso */
.timeline-cursor {
  position: absolute;
  height: 60px;
  width: 5px;
  background: #e46346;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'ronregular', sans-serif;
  font-size: 30px;
}
/* -----------------------------------------------------------
-----------------------------------------------------------
-------------------- RESPONSIVE STYLES ---------------------
-----------------------------------------------------------
-----------------------------------------------------------*/
@media only screen and (max-width: 600px) {
	  body {
    overflow-x: hidden; /* Evita lo scroll orizzontale */
    overflow-y: auto; /* Abilita lo scroll verticale */
    background-image: url("/assets/img/site/history.png");
  background-repeat: repeat;
background-size: 260px 89px;
    width: 100%;
	max-width: 100%;
    height: auto;
  }
	
	
	
	#secondo-layer, #sesto-layer, #nono-layer, #dodici-layer {
    height: auto; 
    margin-left: 0px;
}
	#sesto-layer, #nono-layer, #dodici-layer {
padding-top: 60px;
	padding-bottom: 30px;
}
	#dodici-layer {
    border-left: none;
}
	
  /* Nascondi le immagini desktop su mobile */
  .img-desktop {
    display: none !important;
  }
	
  .timeline-wrapper {
    display: none;
  }
  .container {
    display: block; /* Cambia il layout da flex orizzontale a blocco verticale */
  }
  .section {
    width: 100%; /* Le sezioni occupano tutta la larghezza */
    min-height: auto; /* Adatta l'altezza */
    height: auto;
    padding: 20px 0; /* Aggiunge spazio tra le sezioni */
    display: block;
  }
	
  .navbar {
    position: fixed;
    background: transparent;
    z-index: 9999999;
    top: 0;
    width: 90%;
    transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out; /* Transizione più lenta */
    background-color: rgba(255, 255, 255, 0.0); /* Sfondo semitrasparente */
    background-color: #fff !important;
  }
  .navbar.hidden {
    opacity: 0; /* Totalmente trasparente */
  }
  .navbar-toggler {
    display: block; /* Mostra il burger menu su schermi piccoli */
    position: absolute;
    right: 20px;
    z-index: 10001; /* Assicura che sia sopra la navbar */
    width: 50px;
    height: 50px;
  }
  /* Nasconde il menu classico */
  .nav-menu {
    display: none;
  }
  .fullscreen-megamenu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    display: none; /* Nascosto di default */
    align-items: center;
    justify-content: center;
    z-index: 10000;
  }

.typewriter-container {
        height: 300px !important;
    }
	
h2.secondo-layer  {
    font-size: 9em !important;
    line-height: 130%;
}

	h2.history {
    font-size: 5em !important;
    line-height: 90%;
	margin-top: -250px !important;
}
h3.SJ, h3.livello7  {
	padding-top: 50px;
    font-size: 4rem;
}
#SJ h4 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}	

.macchina-legend {
    width: 140% !important;
}
.macchina-legend-first {
        width: 100% !important;
	  z-index: 3 !important; /* Sopra il testo */
	  padding-top: 250px;
    }

  img {
	width: 100%;
    height: auto !important;
    display: block; /* Evita margini extra */
  }
.img-sopra {
    margin-left: 0px;
}
.vertical-text {
    writing-mode: vertical-lr; /* Testo verticale */
    text-orientation: mixed; /* Mantiene l'orientamento leggibile */
    transform: rotate(180deg); /* Inverte l'orientamento per partire dal basso verso l'alto */
    position: absolute; /* Posizionamento assoluto rispetto al contenitore */
    left: 0; /* Aderisce al bordo sinistro del contenitore */
    top: 50%; /* Centra verticalmente */
    transform-origin: left center; /* Imposta il punto di rotazione */
    translate: 0 -50%; /* Centra verticalmente rispetto al contenitore */
    font-size: 10px; /* Dimensione del testo */
    color: #000; /* Colore del testo */
    letter-spacing: 2px; /* Spaziatura tra lettere */
    font-weight: bold; /* Grassetto */
    text-transform: uppercase;
    background-color: #eee;
    margin-left: 15px;
    padding-top: 35px;
    padding-bottom: 35px;
    white-space: nowrap;
    z-index: 15;
  }
			.riduzione2  {
		margin-top: -150px !important;
	}
		.riduzione  {
		margin-top: -100px;
	}
}

/* Dispositivi medi (tablet, tra 576px e 768px) */
@media screen and (min-width: 601px) and (max-width: 767.98px) {  
	  body {
    overflow-x: hidden; /* Evita lo scroll orizzontale */
    overflow-y: auto; /* Abilita lo scroll verticale */
    background-image: url("/assets/img/site/history.png");
  background-repeat: repeat;
background-size: 260px 89px;
    width: 100%;
	max-width: 100%;
    height: auto;
  }
	

	
  /* Stili per tablet */  

	h2.secondo-layer  {
    font-size: 9em !important;
    line-height: 130%;
}
	.typewriter-container {
        height: 350px !important;
    }

	

.typewriter-container {
    height: 100px;
}
h3.SJ, h3.livello7 {
    font-size: 5rem;

}	
	

#SJ h4 {
    font-size: 2rem;
    margin-bottom: 20px;
    font-family: 'ronregular', sans-serif;
    font-weight: var(--font-weight-light);
    line-height: 100%;
    text-transform: uppercase;
}
#SJ p {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 15px;
    font-family: 'interstateregular', sans-serif;
    font-weight: var(--font-weight-regular);
    color: #000;
}
    .macchina-legend {
        width: 90% !important;
        max-width: 110% !important;
    }
.macchina-legend-first {
        width: 80% !important;
	  z-index: 3 !important; /* Sopra il testo */
    }
#livello7 p {
    padding-right: 100px;
}

	    #SJ h4 {
        font-size: 2.5rem;

    }
	    #livello7 p {
        padding-right: 0px;
    }
		.riduzione  {
		margin-top: -150px;
	}
			.riduzione2  {
		margin-top: -250px !important;
	}

  body {
    overflow-x: hidden; /* Evita lo scroll orizzontale */
    overflow-y: auto; /* Abilita lo scroll verticale */
    background-image: url("/assets/img/site/history.png");
  background-repeat: repeat;
background-size: 260px 89px;
    width: 100%;
	max-width: 100%;
    height: auto;
    display: flex;
  }
	
  img {
	width: 100%;
    height: auto;
    display: block; /* Evita margini extra */
  }
	
.space {
	padding-right: 0px;
	padding-top: 50px;
}

	.superwagoneer {
	margin-top: -100px;}

  .timeline-wrapper {
    display: none;
  }
  .container {
    display: block; /* Cambia il layout da flex orizzontale a blocco verticale */
  }
  .section {
    width: 100%; /* Le sezioni occupano tutta la larghezza */
    min-height: auto; /* Adatta l'altezza */
    height: auto;
    padding: 20px 0; /* Aggiunge spazio tra le sezioni */
    display: block;
  }
  .navbar {
    position: fixed;
    background: transparent;
    z-index: 9999999;
    top: 0;
    width: 90%;
    transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out; /* Transizione più lenta */
    background-color: rgba(255, 255, 255, 0.0); /* Sfondo semitrasparente */
    background-color: #fff !important;
  }
  .navbar.hidden {
    opacity: 0; /* Totalmente trasparente */
  }
  .navbar-toggler {
    display: block; /* Mostra il burger menu su schermi piccoli */
    position: absolute;
    right: 20px;
    z-index: 10001; /* Assicura che sia sopra la navbar */
    width: 50px;
    height: 50px;
  }
  /* Nasconde il menu classico */
  .nav-menu {
    display: none;
  }
  .fullscreen-megamenu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    display: none; /* Nascosto di default */
    align-items: center;
    justify-content: center;
    z-index: 10000;
  }
  #START→ {
    width: auto !important;
    max-width: 100vw !important;
  }
  #section2 {
    width: auto !important;
    margin-top: -100px;
  }
  #section3 {
    width: auto !important;
    height: 200vh;
  }
  #section4 {
    width: auto !important;
  }
  #section6 {
    width: auto !important;
  }
  #section7 {
    width: auto !important;
  }
  #section8 {
    width: auto !important;
  }
  /* -------------- PRIMO LAYER  -------------- */
  #history {
    position: relative;
    height: 100vh;
    display: flex;
    flex-direction: column; /* Mantiene la disposizione verticale */
    text-align: center;
    display: none; /* Nascondi le immagini mobili di default */
  }


	
  /* Nascondi le immagini desktop su mobile */
  .img-desktop {
    display: none !important;
  }
  /* Mostra le immagini mobili su mobile */
  .img-mobile {
    display: block;
	  width: 100%;
  }
  h2.history {
    font-size: 6em !important;
    line-height: 80%;
    text-align: center;
    position: relative;
    transform: translate(-50%, -50%);
    white-space: normal;
    opacity: 0;
    animation: slideIn 1.5s ease-out forwards;
    animation-delay: 1s;
    margin-top: 50px;
    letter-spacing: -2px;
  }
  /*---------------------------------------
  19631965            
-----------------------------------------*/
h2.secondo-layer {
    font-size: 15em !important;
    line-height: 100%;
}
	
  #secondo-layer {
    position: relative; /* Posizione relativa per ancorare gli elementi interni */
    height: auto; 
    display: flex;
    justify-content: center; /* Allinea orizzontalmente al centro */
    align-items: center; /* Allinea verticalmente al centro */
    margin-left: 0px;
    border-left: none; /* Bordo sinistro */
	padding-top: 50px;
  }
  #nono-layer {
    position: relative; /* Posizione relativa per ancorare gli elementi interni */
    height: 50vh; /* Occupa tutta l'altezza del viewport */
    display: flex;
    justify-content: center; /* Allinea orizzontalmente al centro */
    align-items: center; /* Allinea verticalmente al centro */
    margin-left: 0px;
    border-left: none; /* Bordo sinistro */
  }
  .typewriter-container {
    height: 250px;
  }
	

  #sesto-layer {
    height: 50vh;
    margin-left: 0px;
    border-left: none; /* Bordo sinistro */
  }
	
  .vertical-text {
    writing-mode: vertical-lr; /* Testo verticale */
    text-orientation: mixed; /* Mantiene l'orientamento leggibile */
    transform: rotate(180deg); /* Inverte l'orientamento per partire dal basso verso l'alto */
    position: absolute; /* Posizionamento assoluto rispetto al contenitore */
    left: 0; /* Aderisce al bordo sinistro del contenitore */
    top: 50%; /* Centra verticalmente */
    transform-origin: left center; /* Imposta il punto di rotazione */
    translate: 0 -50%; /* Centra verticalmente rispetto al contenitore */
    font-size: 10px; /* Dimensione del testo */
    color: #000; /* Colore del testo */
    letter-spacing: 2px; /* Spaziatura tra lettere */
    font-weight: bold; /* Grassetto */
    text-transform: uppercase;
    background-color: #eee;
    margin-left: 15px;
    padding-top: 35px;
    padding-bottom: 35px;
    white-space: nowrap;
    z-index: 15;
  }

  .livello3 {
    height: auto;
  }

  #SJ {
    margin-bottom: 100px;
  }
  h3.SJ {
    font-size: 6rem;
  }
  .img-sopra {
    z-index: 4;
    width: auto;
    height: auto;
    margin-left: 0px;
  }
  .img-5 {
    width: auto;
    height: auto;
    margin-left: 0px;
  }
  h3.livello7 {
    font-size: 5rem;
    margin-bottom: 100px;
    font-family: 'ronregular', sans-serif;
    font-weight: var(--font-weight-light);
    line-height: 100%;
    text-transform: uppercase;
	  	margin-top: 130px !important;
  }
  .journal {
    height: auto;
  }
  #dodici-layer {
    margin-left: 0px;
	 border-left: none;
	 height: 50vh; /* Occupa tutta l'altezza del viewport */
  }
  #livello7 {
    margin-top: -150px;
  }
	

	
	


    /* Stili specifici per iPad Air */
	.nav-item .nav-link {
    text-decoration: none;
    color: #1a2f2b;
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    position: relative;
    padding: 10px;
    font-family: 'interstateregular', sans-serif;
    margin-left: 0px;
}

	
}

/* Dispositivi grandi (desktop, tra 768px e 1024px) */
@media screen and (min-width: 768px) and (max-width: 1023.98px) {  

html {
    height: 100%;
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch !important;
}
	
  body {
    overflow-x: hidden; /* Evita lo scroll orizzontale */
    overflow-y: auto; /* Abilita lo scroll verticale */
    background-image: url("/assets/img/site/history.png");
  background-repeat: repeat;
background-size: 260px 89px;
    width: 100%;
	max-width: 100%;
    height: auto !important;
    display: block !important;
  }
	
	

	.close-megamenu {
  background-color: #00000000;
  position: relative;
  color: #fff;
top: -44%;
    right: -23%;
}
	


	h2.secondo-layer  {
    font-size: 9em !important;
    line-height: 130%;
}
	.typewriter-container {
        height: 200px !important;
    }

	

.typewriter-container {
    height: 100px;
}
h3.SJ, h3.livello7 {
    font-size: 5rem;

}	
	

#SJ h4 {
    font-size: 2rem;
    margin-bottom: 20px;
    font-family: 'ronregular', sans-serif;
    font-weight: var(--font-weight-light);
    line-height: 100%;
    text-transform: uppercase;
}
#SJ p {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 15px;
    font-family: 'interstateregular', sans-serif;
    font-weight: var(--font-weight-regular);
    color: #000;
}
    .macchina-legend {
        width: 90% !important;
        max-width: 110% !important;
    }
.macchina-legend-first {
        width: 80% !important;
	  z-index: 3 !important; /* Sopra il testo */
    }
#livello7 p {
    padding-right: 100px;
}

	    #SJ h4 {
        font-size: 2.5rem;

    }
	    #livello7 p {
        padding-right: 0px;
    }
		.riduzione  {
		margin-top: -100px;
	}
			.riduzione2  {
		margin-top: -100px !important;
	}


	
  img {
	width: 100%;
    height: auto;
    display: block; /* Evita margini extra */
  }
	
.space {
	padding-right: 0px;
	padding-top: 0px;
}

	.superwagoneer {
	margin-top: -100px;}

  .timeline-wrapper {
    display: none;
  }
  .container {
    display: block; /* Cambia il layout da flex orizzontale a blocco verticale */
  }
  .section {
    width: 100%; /* Le sezioni occupano tutta la larghezza */
    min-height: auto; /* Adatta l'altezza */
    height: auto;
    padding: 20px 0; /* Aggiunge spazio tra le sezioni */
    display: block;
  }
  .navbar {
    position: fixed;
    background: transparent;
    z-index: 9999999;
    top: 0;
    width: 90%;
    transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out; /* Transizione più lenta */
    background-color: rgba(255, 255, 255, 0.0); /* Sfondo semitrasparente */
    background-color: #fff !important;
  }
  .navbar.hidden {
    opacity: 0; /* Totalmente trasparente */
  }
  .navbar-toggler {
    display: block; /* Mostra il burger menu su schermi piccoli */
    position: absolute;
    right: 20px;
    z-index: 10001; /* Assicura che sia sopra la navbar */
    width: 50px;
    height: 50px;
  }
  /* Nasconde il menu classico */
  .nav-menu {
    display: none;
  }
  .fullscreen-megamenu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    display: none; /* Nascosto di default */
    align-items: center;
    justify-content: center;
    z-index: 10000;
  }
  #START→ {
    width: auto !important;
    max-width: 100vw !important;
  }
  #section2 {
    width: auto !important;
    margin-top: -100px;
  }
  #section3 {
    width: auto !important;
    height: 200vh;
  }
  #section4 {
    width: auto !important;
  }
  #section6 {
    width: auto !important;
  }
  #section7 {
    width: auto !important;
  }
  #section8 {
    width: auto !important;
  }
  /* -------------- PRIMO LAYER  -------------- */
  #history {
    position: relative;
    height: 100vh;
    display: flex;
    flex-direction: column; /* Mantiene la disposizione verticale */
    text-align: center;
    display: none; /* Nascondi le immagini mobili di default */
  }


	
  /* Nascondi le immagini desktop su mobile */
  .img-desktop {
    display: none !important;
  }
  /* Mostra le immagini mobili su mobile */
  .img-mobile {
    display: block;
	  width: 100%;
  }
  h2.history {
    font-size: 10em !important;
    line-height: 80%;
    text-align: center;
    position: relative;
    transform: translate(-50%, -50%);
    white-space: normal;
    opacity: 0;
    animation: slideIn 1.5s ease-out forwards;
    animation-delay: 1s;
    margin-top: 50px;
    letter-spacing: -2px;
  }
  /*---------------------------------------
  19631965            
-----------------------------------------*/
h2.secondo-layer {
    font-size: 15em !important;
    line-height: 100%;
}
	
  #secondo-layer {
    position: relative; /* Posizione relativa per ancorare gli elementi interni */
    height: auto; 
    display: flex;
    justify-content: center; /* Allinea orizzontalmente al centro */
    align-items: center; /* Allinea verticalmente al centro */
    margin-left: 0px;
    border-left: none; /* Bordo sinistro */
	padding-top: 50px;
  }
  #nono-layer {
    position: relative; /* Posizione relativa per ancorare gli elementi interni */
    height: 50vh; /* Occupa tutta l'altezza del viewport */
    display: flex;
    justify-content: center; /* Allinea orizzontalmente al centro */
    align-items: center; /* Allinea verticalmente al centro */
    margin-left: 0px;
    border-left: none; /* Bordo sinistro */
  }
  .typewriter-container {
    height: 250px;
  }
	

  #sesto-layer {
    height: 50vh;
    margin-left: 0px;
    border-left: none; /* Bordo sinistro */
  }
	
  .vertical-text {
    writing-mode: vertical-lr; /* Testo verticale */
    text-orientation: mixed; /* Mantiene l'orientamento leggibile */
    transform: rotate(180deg); /* Inverte l'orientamento per partire dal basso verso l'alto */
    position: absolute; /* Posizionamento assoluto rispetto al contenitore */
    left: 0; /* Aderisce al bordo sinistro del contenitore */
    top: 50%; /* Centra verticalmente */
    transform-origin: left center; /* Imposta il punto di rotazione */
    translate: 0 -50%; /* Centra verticalmente rispetto al contenitore */
    font-size: 10px; /* Dimensione del testo */
    color: #000; /* Colore del testo */
    letter-spacing: 2px; /* Spaziatura tra lettere */
    font-weight: bold; /* Grassetto */
    text-transform: uppercase;
    background-color: #eee;
    margin-left: 15px;
    padding-top: 35px;
    padding-bottom: 35px;
    white-space: nowrap;
    z-index: 15;
  }

  .livello3 {
    height: auto;
  }

  #SJ {
    margin-bottom: 100px;
  }
  h3.SJ {
    font-size: 6rem;
  }
  .img-sopra {
    z-index: 4;
    width: auto;
    height: auto;
    margin-left: 0px;
  }
  .img-5 {
    width: auto;
    height: auto;
    margin-left: 0px;
  }
  h3.livello7 {
    font-size: 5rem;
    margin-bottom: 100px;
    font-family: 'ronregular', sans-serif;
    font-weight: var(--font-weight-light);
    line-height: 100%;
    text-transform: uppercase;
	  	margin-top: 130px !important;
  }
  .journal {
    height: auto;
  }
  #dodici-layer {
    margin-left: 0px;
	 border-left: none;
	 height: 50vh; /* Occupa tutta l'altezza del viewport */
  }
  #livello7 {
    margin-top: -150px;
  }
	

	
	


    /* Stili specifici per iPad Air */
	.nav-item .nav-link {
    text-decoration: none;
    color: #1a2f2b;
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    position: relative;
    padding: 10px;
    font-family: 'interstateregular', sans-serif;
    margin-left: 0px;
}

}

/* Desktop standard e grandi (oltre 1024px) */
@media screen and (min-width: 1024px) and (max-width: 1439.98px) {  
	
.navbar {
    position: fixed;
    z-index: 9999999;
    top: 0;
    transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
    margin: auto !important;
    text-align: center;
    padding: 5px 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    background-color: white;
    margin-top: 30px !important;
    border-radius: 10px 10px 0 0 !important;
    max-width: 90% !important;
}
    /* Nascondi le immagini desktop su mobile */
  .img-desktop {
    display: none !important;
  }
  /* Mostra le immagini mobili su mobile */
  .img-mobile {
    display: block;
	  width: 100%;
  }
h2.history {
  font-size: 14em !important; /* Ridotto per adattarsi allo schermo */
  line-height: 80%; /* Spaziatura più compatta */
  margin-top: -170px;

}
	.macchina-legend-first {
		max-width: 70%;
		z-index: 15;
		margin-top: 500px !important;
	}
	.superwagoneer p, div.space.riduzione, div.space.livello7, div.riduzione {padding-right: 100px}
	.livello3 {
    height: 100vh;
    width: auto;
    z-index: 3;
}

}

@media only screen and (min-width: 1440px) {
	.superwagoneer p, div.space.riduzione, div.space.livello7, div.riduzione {padding-right: 100px}
	#SJ p {
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 15px;
    font-family: 'interstateregular', sans-serif;
    font-weight: var(--font-weight-regular);
    color: #000;
}
	.typewriter-container {
    height: 150px;
}
	#SJ h4 {
    font-size: 2.6rem;

}
  .img-mobile {
    display: none !important;
  }
  .img-desktop {
    display: block;
	  width: 100%;
  }
h2.history {
  font-family: 'ronregular';
  font-weight: var(--font-weight-light);
  color: #9f9c9685; /* Colore più visibile senza trasparenza */
font-size: 18em !important;
        line-height: 130%;
  text-align: center;
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
  white-space: nowrap; /* Evita il testo su più righe */
  opacity: 0; /* Inizialmente invisibile */
  animation: slideIn 1.5s ease-out forwards;
  animation-delay: 1s; /* Ritardo per far partire dopo l'animazione della macchina */
}
	
h2.secondo-layer {
  font-family: 'ronregular';
  font-weight: var(--font-weight-light);
  color: #9f9c9685; /* Colore più visibile senza trasparenza */
  font-size: 15em !important; /* Ridotto per adattarsi allo schermo */
  line-height: 100%; /* Spaziatura più compatta */
  text-align: center;
  position: absolute;
  z-index: 1;
  pointer-events: none;
  white-space: nowrap; /* Evita il testo su più righe */
  opacity: 0; /* Inizialmente invisibile */
  animation: slideIn 1.5s ease-out forwards;
  animation-delay: 1s; /* Ritardo per far partire dopo l'animazione della macchina */
}
	
	.macchina-legend {
		        width: 70% !important;
	}
	.macchina-legend-first {
				z-index: 9999999999;
		width: 70% !important;
	}
}