@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@300;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Laila:wght@600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Oswald:wght@200..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

p {
	font-family: Open sans;
	font-size: 1.2em;
	line-height: 28px;
	letter-spacing: 0.01em;
	text-align: justify;
	padding: 8px;
}

p2 {
	font-family: Roboto;
	font-size: 1em;
	line-height: 1em;
	letter-spacing: 0.01em;
	text-align: justify;
	padding: 8px;
}

p3 {
	font-family: Montserrat;
	font-size: 1em;
	line-height: 1em;
	letter-spacing: 0.01em;
	text-align: justify;
	padding: 10px;
}

h2 {
	font-family: "Oswald", serif;
	font-size: 2em;
	line-height: 1.5em;
	letter-spacing: 0.01em;
	text-align: justify;
	padding: 8px;
}
@media (max-width: 1200px) {
.h2 {
	font-size: 1.3em; /* Riduce il titolo per schermi meno grandi */
    }    
}

@media (max-width: 920px) {
.h2 {
	font-size: 1em; /* Riduce il titolo per schermi ancora più piccoli */
    }
}

h4 {
	font-family: "Roboto", serif;
	font-size: 2em;
	line-height: 1.5em;
	letter-spacing: 0.01em;
	text-align: justify;
	padding: 8px;
}
@media (max-width: 1200px) {
.h4 {
	font-size: 1.3em; /* Riduce il titolo per schermi meno grandi */
    }    
}

@media (max-width: 920px) {
.h4 {
	font-size: 1em; /* Riduce il titolo per schermi ancora più piccoli */
    }
}



.banner-container {
    position: relative;
    text-align: center; /* Centra il testo orizzontalmente */
    width: 100%;
    height: auto;
}


.titolo-su-banner {
	position: absolute; /* Sovrappone il testo all'immagine */
    top: 40%; /* Posiziona verticalmente al centro */
    left: 45%; /* Posiziona orizzontalmente al centro */
    text-shadow: 2px 2px 4px #000000;"
    font-family: "Oswald", serif;
    font-weight: 900;
    font-size: 4.5em;
    line-height: 50px;
    color: white;
    text-align: center;
    z-index: 1000;
    display: flex;
  	justify-content: center; /* centra la scritta orizzontalmente */
  	align-items: center; /* centra la scritta verticalmente */
  	flex-direction: column; 
}

.titoletto-su-banner {
	position: absolute; /* Sovrappone il testo all'immagine */
    top: 60%; /* Posiziona verticalmente al centro */
    left: 39%; /* Posiziona orizzontalmente al centro */
    text-shadow: 1px 1px 2px #000000;"
    transform: translate(-50%, -50%); /* Centra esattamente l'elemento */
    font-family: "Oswald", serif;
    font-weight: 400;
    font-size: 2.5em;
    line-height: 20px;
    color: white;
    z-index: 1000;
}

.titoletto-su-banner a {
    color: white;
    text-decoration: none;
    z-index: 1000;
}


/*   stile per il banner con scritta sopra */
h3 {
  margin: 0px;
  background-color: red;
  font-family: "Oswald", serif;
  font-weight: 900;
  font-style: normal;  
  font-size: 4.5em;
  font-weight: normal;
  line-height: 50px;
  text-align: center;
  width: 100%;
  height: 500px;
  /* stile Flexbox styles centrare la scritta */
  display: flex;
  justify-content: center; /* centra la scritta orizzontalmente */
  align-items: center; /* centra la scritta verticalmente */
  flex-direction: column; 
}



/* stile dello slideshow */
.slideshow-container {
    width: 100%;
    position: relative;
    margin: auto;
    overflow: hidden;
}

.slides {
    display: none;
    width: 100%;
    height: auto;
}

.active {
    display: block;
}

.slideshow-container::before {
    content: "";
    display: block;
    padding-top: 40%; /* Rapporto di aspetto 65% */
}

.slideshow-container > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slideshow-text {
	position: sticky;
	top: 0px;
	font-size: 3em;
    font-family: 'Open sans', serif;
    color: #0b4670;
    background-color: white;
    text-align: center;
    z-index: 10; /* Assicura che il titolo sia sopra gli altri elementi */
}

@media (max-width: 1200px) {
    .slideshow-text {
	font-size: 2.4em; /* Riduce il titolo per schermi meno grandi */
    }    
}

@media (max-width: 920px) {
    .slideshow-text {
	font-size: 2em; /* Riduce il titolo per schermi ancora più piccoli */
    }
}
/* stile dello slideshow */


/* Stile per i pallini dello slideshow */
.dot {
    height: 15px;
    width: 15px;
    margin: 10px 10px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
}

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

.alignleft { float: left; padding: 15px 15px 15px 0; }

.alignright { float: right; padding: 15px 0 15px 15px; }
/* fine stile per i pallini dello slideshow */



/* stile del menu a tendina */
.menu-container {
    max-width: 95%; /* Larghezza massima del menu */
    margin: 0 auto;
}

.menu {
    list-style: none;
    padding-top: 20px;
    margin: 0;
    display: flex;
    justify-content: center; /* Centra le voci del menu */
    gap: 5%; /* Spazio del 10% tra le voci principali */
}

.menu-item {
    position: relative; /* Necessario per posizionare il sottomenu */
    font-family: Open sans;
    font-weight: 600;
    font-size: 20px; /* Corpo del carattere per le voci principali */
    cursor: pointer; /* Cambia il cursore su hover */
}

.menu-item:hover .submenu {
    display: block; /* Mostra il sottomenu al passaggio del mouse */
}

.submenu {
    list-style: none;
    display: none; /* Nasconde il sottomenu di default */
    position: absolute; /* Posiziona il sottomenu in relazione al menu item */
    top: 100%; /* Posiziona il sottomenu sotto la voce principale */
    left: 0;
    width: 200px; /* Imposta una larghezza fissa per il sottomenu */
    background-color: white; /* Colore di sfondo */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Ombra */
    padding: 10px 0;
    z-index: 1; /* Assicura che il sottomenu sia sopra altri contenuti */
}

.submenu-item {
	font-family: Open sans;
    font-size: 15px; /* Corpo del carattere per le sottovoci */
    font-weight: 600;
    padding: 5px 15px; /* Padding per le sottovoci */
    cursor: pointer; /* Cambia il cursore su hover */
}

.submenu-item:hover {
    background-color: #eeb6b9; /* Colore di sfondo al passaggio del mouse */
}

@media (max-width: 1200px) {
    .menu-item {
        font-size: 18px; /* Riduce le voci principali */
    }
    
    .submenu-item {
        font-size: 13px; /* Riduce le sottovoci */
    }

    .menu-container {
        width: 70%; /* aumenta la larghezza del menu */
    }
}

@media (max-width: 920px) {
    .menu-item {
        font-size: 13px; /* Ulteriore riduzione delle voci principali */
    }
    
    .submenu-item {
        font-size: 12px; /* Ulteriore riduzione delle sottovoci */
    }

    .menu-container {
        width: 90%;  /* aumento della larghezza del menu */
 	}
}
/* fine stile del menu a tendina */


/* stile del tooltip 
.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.tooltip .tooltip-text {
	font-family: Open Sans;
	font-size: 1.0em;
	font-weight: normal;
	line-height: 1.2em;
    visibility: hidden;   
    border-radius: 6px;
    padding: 17px;
    position: absolute;
    z-index: 1;  
    left: 50%;
    margin-left: -60px;
	background-color: #c7e4de;
    opacity: 0;
    transition: opacity 0.3s;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4); /* ombra 
} */

.tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

@media (max-width: 1200px) {
    .tooltip .tooltip-text {
        font-size: 0.9em; /* Riduce il corpo del testo */
    }
}

@media (max-width: 920px) {
    .tooltip .tooltip-text {
        font-size: 0.8em; /* Ulteriore riduzione del corpo del testo */
    }
}
/* fine stile del tooltip */


/* stile del popup modale */
.modal {
    display: none; /* Hidden by default */
    position: fixed; 
    z-index: 20; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto; 
    padding: 20px;
    border: 1px solid #888;
	width: 80%;
}

.modal-content-bis {
    background-color: #fefefe;
   	margin: 15% auto; 
    padding: 20px;
    border: 1px solid #888;
	width: 50%;
}	
	
.modal-content img {
    width: 100%; 
}


@media (max-width: 1200px) {
    .modal-content {
       width: 90%; /* Riduce il corpo del testo */
    }
}

@media (max-width: 920px) {
    .modal-content {
       width: 100%; /* Ulteriore riduzione del corpo del testo */
    }
}

@media (max-width: 1200px) {
    .modal-content-bis {
       width: 70%; /* Riduce il corpo del testo */
    }
}

@media (max-width: 920px) {
    .modal-content-bis {
       width: 100%; /* Ulteriore riduzione del corpo del testo */
    }
}


.open-modal {
    display: inline-block; /* Permette di applicare lo stile */
    color: #2270bc;
    cursor: pointer;
    font-weight: bold; 
    text-decoration: underline;
    transition: color 0.3s, font-weight 0.3s; /* Transizione per colore e peso del font */
}

.open-modal:hover {
    color: #be0000; /* Cambia il colore in rosso */
 }

.close {
    color: #aaa;
    float: right;
    font-size: 36px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}


/* fine stile del popup modale */


/* stile per l'oggetto con SINGOLO blocco di contenuto */
.container1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centra i blocchi */
    gap: 2%; /* Separazione del 2% tra i blocchi */
}

.block1 {
    display: flex; /* Flexbox per i contenuti interni */
    flex-direction: column; /* Disposizione verticale degli elementi */
    justify-content: flex-start; /* Spinge l'immagine verso il fondo */
    width: 90%;
    margin-bottom: 20px;
    box-shadow: 2px 2px 3px 2px #3d3d3d;
    padding: 40px;
    box-sizing: border-box;
    min-height: 300px; /* Altezza minima per la coerenza */
    /* background-color: #c9faf0; */   /* per mettere un colore di sfondo a TUTTI i blocchi, attivare questo comando eliminando prima e dopo /* e */ 
}

.block1 h2 {
    font-family: "Oswald", serif; 
    font-size: 2em;
    margin: 0; /* Rimuove il margine per una migliore allineamento */
    padding-bottom: 10px; /* Spazio tra il titolo e il paragrafo */
}

.block1 p {
    font-size: 1em;
    margin: 0; /* Rimuove il margine per una migliore allineamento */
    flex-grow: 1; /* Permette al paragrafo di occupare spazio */
}

.block1 img {
    width: 90%;
    height: auto;
    display: block; /* Imposta l'immagine come blocco */
    margin: 0 auto; /* Centra l'immagine */
    align-self: flex-end; /* Spinge l'immagine verso il fondo */
}
/* fine dello stile per l'oggetto con SINGOLO blocco di contenuto */




/* stile per l'oggetto con DUE blocchi di contenuto che mantengono la stessa altezza */
.container2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centra i blocchi */
    gap: 2%; /* Separazione del 2% tra i blocchi */
}

.block2 {
    display: flex; /* Flexbox per i contenuti interni */
    flex-direction: column; /* Disposizione verticale degli elementi */
    justify-content: flex-start; /* Spinge l'immagine verso il fondo */
    width: 35%;
    margin-bottom: 20px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
    padding: 10px;
    box-sizing: border-box;
    min-height: 300px; /* Altezza minima per la coerenza */
    /* background-color: #c9faf0; */   /* per mettere un colore di sfondo a TUTTI i blocchi, attivare questo comando eliminando prima e dopo /* e */ 
}

.block2 h2 {
    font-size: 2em;
    margin: 0; /* Rimuove il margine per una migliore allineamento */
    padding-bottom: 10px; /* Spazio tra il titolo e il paragrafo */
    text-align: left;
}

.block2 p {
    font-size: 1em;
    margin: 0; /* Rimuove il margine per una migliore allineamento */
    flex-grow: 1; /* Permette al paragrafo di occupare spazio */
    text-align: left;
}

.block2 img {
    width: 90%;
    height: auto;
    display: block; /* Imposta l'immagine come blocco */
    margin: 0 auto; /* Centra l'immagine */
    align-self: flex-end; /* Spinge l'immagine verso il fondo */
}

@media (max-width: 1200px) {
    .block2 {
        width: 45%; /* Due blocchi affiancati */
    }
}

@media (max-width: 920px) {
    .block2 {
        width: 100%; /* Un blocco per riga */
    }
}
/* fine dello stile per l'oggetto con DUE blocchi di contenuto che mantengono la stessa altezza */



/* stile per l'oggetto con TRE blocchi di contenuto che mantengono la stessa altezza */
.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centra i blocchi */
    gap: 2%; /* Separazione del 2% tra i blocchi */
}

.block {
    display: flex; /* Flexbox per i contenuti interni */
    flex-direction: column; /* Disposizione verticale degli elementi */
    justify-content: flex-start; /* Spinge l'immagine verso il fondo */
    width: 30%;
    margin-bottom: 20px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
    padding: 10px;
	padding-left: 25px;
	padding-right: 25px;
    box-sizing: border-box;
    min-height: 300px; /* Altezza minima per la coerenza */
    /* background-color: #c9faf0; */   /* per mettere un colore di sfondo a TUTTI i blocchi, attivare questo comando eliminando prima e dopo /* e */ 
}

.block h2 {
    font-size: 2em;
    margin: 0; /* Rimuove il margine per una migliore allineamento */
    padding-bottom: 10px; /* Spazio tra il titolo e il paragrafo */
}

.block p {
    font-size: 1em;
    margin: 0; /* Rimuove il margine per una migliore allineamento */
    flex-grow: 1; /* Permette al paragrafo di occupare spazio */
    text-align: left;
}

.block img {
    width: 90%;
    height: auto;
    display: block; /* Imposta l'immagine come blocco */
    margin: 0 auto; /* Centra l'immagine */
    align-self: flex-end; /* Spinge l'immagine verso il fondo */
}

@media (max-width: 1400px) {
    .block {
        width: 45%; /* Due blocchi affiancati */
    }
}

@media (max-width: 768px) {
    .block {
        width: 95%; /* Un blocco per riga */
    }
}
/* fine dello stile per l'oggetto con tre blocchi di contenuto che mantengono la stessa altezza */


/* stile per l'oggetto con TRE blocchetti BLU di contenuto che mantengono la stessa altezza */
.container-blu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centra i blocchi */
    gap: 2%; /* Separazione del 2% tra i blocchi */
    width: 50%;
    margin: 0 auto;
}
/* fine dello stile per l'oggetto con tre blocchi BLU di contenuto che mantengono la stessa altezza */




/* stile per l'oggetto con QUATTRO blocchi di contenuto che mantengono la stessa altezza */
.container4 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centra i blocchi */
    gap: 2%; /* Separazione del 2% tra i blocchi */
}

.block4 {
    display: flex; /* Flexbox per i contenuti interni */
    flex-direction: column; /* Disposizione verticale degli elementi */
    justify-content: flex-start; /* Spinge l'immagine verso il fondo */
    width: 23%;
    margin-bottom: 20px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
    padding: 10px;
    box-sizing: border-box;
    min-height: 300px; /* Altezza minima per la coerenza */
    /* background-color: #c9faf0; */   /* per mettere un colore di sfondo a TUTTI i blocchi, attivare questo comando eliminando prima e dopo /* e */ 
}

.block4 h2 {
    font-size: 2em;
    margin: 0; /* Rimuove il margine per una migliore allineamento */
    padding-bottom: 10px; /* Spazio tra il titolo e il paragrafo */
}

.block4 p {
    font-size: 1em;
    margin: 0; /* Rimuove il margine per una migliore allineamento */
    flex-grow: 1; /* Permette al paragrafo di occupare spazio */
}

.block4 img {
    width: 90%;
    height: auto;
    display: block; /* Imposta l'immagine come blocco */
    margin: 0 auto; /* Centra l'immagine */
    align-self: flex-end; /* Spinge l'immagine verso il fondo */
}

@media (max-width: 1200px) {
    .block4 {
        width: 46%; /* Due blocchi affiancati */
    }
}

@media (max-width: 920px) {
    .block4 {
        width: 100%; /* Un blocco per riga */
    }
}
/* fine dello stile per l'oggetto con QUATTRO blocchi di contenuto che mantengono la stessa altezza */


/* stile per l'oggetto con QUATTRO blocchi stretti di contenuto che mantengono la stessa altezza e che sormontano altri elementi */
.container-sopra {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centra i blocchi */
    gap: 2%; /* Separazione del 2% tra i blocchi */
    margin-top: -80px; /* Sormontare il banner di 80px */
}

.block-sopra {
    display: flex; /* Flexbox per i contenuti interni */
    flex-direction: column; /* Disposizione verticale degli elementi */
    justify-content: flex-start; /* Spinge l'immagine verso il fondo */
    width: 18%;
    margin-bottom: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    padding: 10px;
    box-sizing: border-box;
    min-height: 300px; /* Altezza minima per la coerenza */
    background-color: #f7f4d9; 
    z-index: 10; /* pone questi box su un livello superiore a quello della pagina, che è 1 */
}

.block-sopra h2 {
    font-size: 2em;
    margin: 0; /* Rimuove il margine per una migliore allineamento */
    padding-bottom: 10px; /* Spazio tra il titolo e il paragrafo */
}

.block-sopra p {
    font-size: 1em;
    margin: 0; /* Rimuove il margine per una migliore allineamento */
    flex-grow: 1; /* Permette al paragrafo di occupare spazio */
    text-align: left;
}

.block-sopra img {
    width: 90%;
    height: auto;
    display: block; /* Imposta l'immagine come blocco */
    margin: 0 auto; /* Centra l'immagine */
    align-self: flex-end; /* Spinge l'immagine verso il fondo */
}

@media (max-width: 1200px) {
    .block-sopra {
        width: 46%; /* Due blocchi affiancati */
    }
}

@media (max-width: 920px) {
    .block-sopra {
        width: 100%; /* Un blocco per riga */
    }
}
/* fine dello stile per l'oggetto con QUATTRO blocchi di contenuto che mantengono la stessa altezza e che sormontano altri elementi */




/*  stile per il pulsante/bottone */
.button {
    display: inline-block; /* Rende il link come un elemento a blocchi */
    padding: 15px 30px; /* Spaziatura interna */
    background-color: #f7f4cb; /* Colore di sfondo giallo */
    color: black; /* Colore del testo */
    font-family: Open sans;
	font-size: 1em;
    text-align: center; /* Allinea il testo al centro */
    text-decoration: none; /* Rimuove la sottolineatura dal link */
    border-radius: 8px; /* Bordi arrotondati */
    border: 1px solid transparent; /* Bordo trasparente inizialmente */
    transition: background-color 0.3s, border-color 0.3s; /* Transizione per l'effetto hover */
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3); /* ombra */
}

/* Effetto hover per il pulsante */
.button:hover {
    background-color: #f2ec8f; /* Colore di sfondo giallo scuro al passaggio del mouse */
    border-color: #eadc02; /* Colore del bordo al passaggio del mouse */
    cursor: pointer; /* Cambia il cursore al passaggio del mouse */
}
/*  fine dello stile per il pulsante/bottone */

/*  stile per il pulsante/bottone LILLA */
.button-lilla {
    display: inline-block; /* Rende il link come un elemento a blocchi */
    padding: 15px 30px; /* Spaziatura interna */
    margin: 0 auto;
    background-color: #e1c5f6; /* Colore di sfondo giallo */
    color: black; /* Colore del testo */
    font-family: Open sans;
	font-size: 1em;
    text-align: center; /* Allinea il testo al centro */
    text-decoration: none; /* Rimuove la sottolineatura dal link */
    border-radius: 8px; /* Bordi arrotondati */
    border: 1px solid transparent; /* Bordo trasparente inizialmente */
    transition: background-color 0.3s, border-color 0.3s; /* Transizione per l'effetto hover */
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3); /* ombra */
}

/* Effetto hover per il pulsante */
.button-lilla:hover {
    background-color: #af50f6; /* Colore di sfondo giallo scuro al passaggio del mouse */
    border-color: #5c03a0; /* Colore del bordo al passaggio del mouse */
    cursor: pointer; /* Cambia il cursore al passaggio del mouse */
    color: white; /* Colore del testo */
}
/*  fine dello stile per il pulsante/bottone LILLA */



/*  stile per il pulsante/bottone lilla ZOOM */
.button-zoom {
    display: inline-block; /* Rende il link come un elemento a blocchi */
    padding: 15px 30px; /* Spaziatura interna */
    margin: 0 auto;
    background-color: #e1c5f6; /* Colore di sfondo giallo */
    color: black; /* Colore del testo */
    font-family: 'Open Sans', sans-serif; /* Font corretto */
    font-size: 1em;
    text-align: center; /* Allinea il testo al centro */
    text-decoration: none; /* Rimuove la sottolineatura dal link */
    border-radius: 8px; /* Bordi arrotondati */
    border: 1px solid transparent; /* Bordo trasparente inizialmente */
    transition: background-color 0.3s, border-color 0.3s, transform 0.3s; /* Transizione per l'effetto hover */
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3); /* Ombra */
}

/* Effetto hover per il pulsante */
.button-zoom:hover {
    background-color: #af50f6; /* Colore di sfondo giallo scuro al passaggio del mouse */
    border-color: #5c03a0; /* Colore del bordo al passaggio del mouse */
    cursor: pointer; /* Cambia il cursore al passaggio del mouse */
    color: white; /* Colore del testo */
    transform: scale(1.4); /* Ingrandisce il pulsante al passaggio del mouse */
}
/*  fine dello stile per il pulsante/bottone lilla ZOOM */




/*  stile per il pulsante/bottone in blocco singolo a piena larghezza */
.button {
    display: inline-block; /* Rende il link come un elemento a blocchi */
    padding: 15px 30px; /* Spaziatura interna */
    margin: 0 auto;
    background-color: #f7f4cb; /* Colore di sfondo giallo */
    color: black; /* Colore del testo */
    font-family: Open sans;
	font-size: 1em;
    text-align: center; /* Allinea il testo al centro */
    text-decoration: none; /* Rimuove la sottolineatura dal link */
    border-radius: 8px; /* Bordi arrotondati */
    border: 1px solid transparent; /* Bordo trasparente inizialmente */
    transition: background-color 0.3s, border-color 0.3s; /* Transizione per l'effetto hover */
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3); /* ombra */
}

/* Effetto hover per il pulsante */
.button:hover {
    background-color: #f2ec8f; /* Colore di sfondo giallo scuro al passaggio del mouse */
    border-color: #eadc02; /* Colore del bordo al passaggio del mouse */
    cursor: pointer; /* Cambia il cursore al passaggio del mouse */
}

@media (max-width: 920px) {
    .button {
        width: 50%; /* aumenta larghezza pulsante per schermi piccoli */
    }
}
/*  fine dello stile per il pulsante/bottone in blocco singolo a piena larghezza */





/*  ANIMAZIONI */

/*  animazione immagine che ruota di 180 gradi arrivando da sinistra */
@keyframes rotateAndMove {
    0% {
        transform: rotate(180deg) translateX(-50%);
        opacity: 0; /* Facoltativo, se vuoi che l'immagine appaia gradualmente */
    }
    100% {
        transform: rotate(0deg) translateX(0);
        opacity: 1; /* Facoltativo, se vuoi che l'immagine appaia gradualmente */
    }
}

.image-animation {
    animation: rotateAndMove 2s ease-in-out forwards;
    /* Aggiungi dimensioni e altre proprietà se necessario */
}
/*  fine animazione immagine che ruota di 180 gradi arrivando da sinistra */



/*  animazione immagine che ruota di 180 gradi rimanendo ferma */
@keyframes rotateIn {
    0% {
        transform: rotateY(180deg); /* Inizia rovesciata */
        opacity: 0; /* Invisibile all'inizio */
    }
    100% {
        transform: rotateY(0deg); /* Ruota per posizionarsi correttamente */
        opacity: 1; /* Diventa visibile */
    }
}

.block-sopra img {
    width: 90%;
    height: auto;
    display: block;
    margin: 0 auto;
    align-self: flex-end;
    animation: rotateIn 1.4s ease forwards; /* Applica l'animazione */
    animation-delay: 0.2s; /* Ritardo per la sequenza */
}
/*  fine animazione immagine che ruota di 180 gradi rimanendo ferma */



/*  animazione scritte da sinistra */

.animazione-scritta {
    position: relative; /* Necessario per l'animazione */
    left: -100%; /* Inizia fuori a sinistra */
    animation: slideIn 2s forwards; /* Animazione di scorrimento */
    opacity: 0; /* Inizialmente invisibile */
}

@keyframes slideIn {
    from {
        left: -100%; /* Inizio della animazione */
        opacity: 0; /* Inizialmente invisibile */
    }
    to {
        left: 0; /* Posizione finale */
        opacity: 1; /* visibile alla fine */
    }
}
/*  fine animazione scritte da sinistra */



/*  animazione scritte da destra */

.animazionedadestra-scritta {
    position: relative; /* Necessario per l'animazione */
    right: -100%; /* Inizia fuori a sinistra */
    animation: slideIn 2s forwards; /* Animazione di scorrimento */
    opacity: 0; /* Inizialmente invisibile */
}

@keyframes slideIn {
    from {
        right: -100%; /* Inizio della animazione */
        opacity: 0; /* Inizialmente invisibile */
    }
    to {
        left: 0; /* Posizione finale */
        opacity: 1; /* visibile alla fine */
    }
}
/*  fine animazione scritte da destra */



/*  animazione zoom su immagine */
.zoom {
    width: 20%; /* Dimensione iniziale al 20% */
    opacity: 0; /* Inizialmente invisibile */
    animation: zoomIn 2s forwards; /* Animazione di zoom */
}

@keyframes zoomIn {
    0% {
        transform: scale(0.2); /* Inizio zoom al 20% */
        opacity: 0; /* Invisibile all'inizio */
    }
    100% {
        transform: scale(1); /* Zoom al 100% */
        opacity: 1; /* Visibile alla fine */
    }
}
/*  fine animazione zoom su immagine */


/* Animazione zoom su testo */
.zoom-text {
    font-size: 1em; /* Dimensione iniziale del testo */
    opacity: 0; /* Inizialmente invisibile */
    animation: zoomInText 2s forwards; /* Animazione di zoom */
}

@keyframes zoomInText {
    0% {
        transform: scale(1); /* Inizio a scala 1 */
        opacity: 0; /* Invisibile all'inizio */
    }
    100% {
        transform: scale(4.5); /* Zoom a scala 4.5 */
        opacity: 1; /* Visibile alla fine */
    }
}

/* Media query per schermi minori di 1200px */
@media (max-width: 1200px) {
    @keyframes zoomInText {
        0% {
            transform: scale(1);
            opacity: 0;
        }
        100% {
            transform: scale(3.5); /* Zoom a scala 3.5 */
            opacity: 1;
        }
    }
}

/* Media query per schermi minori di 920px */
@media (max-width: 920px) {
    @keyframes zoomInText {
        0% {
            transform: scale(1);
            opacity: 0;
        }
        100% {
            transform: scale(2.5); /* Zoom a scala 2.5 */
            opacity: 1;
        }
    }
}


/* Animazione zoom su testo piccolo */
.zoom-text-piccolo {
    font-size: 1em; /* Dimensione iniziale del testo */
    opacity: 0; /* Inizialmente invisibile */
    animation: zoomInText1 2s forwards; /* Animazione di zoom */
}

@keyframes zoomInText1 {
    0% {
        transform: scale(1); /* Inizio a scala 1 */
        opacity: 0; /* Invisibile all'inizio */
    }
    100% {
        transform: scale(2.0); /* Zoom a scala 2 */
        opacity: 1; /* Visibile alla fine */
    }
}
/* Fine animazione zoom su testo piccolo */

/* Media query per schermi minori di 1200px */
@media (max-width: 1200px) {
    @keyframes zoomInText1 {
        0% {
            transform: scale(1);
            opacity: 0;
        }
        100% {
            transform: scale(1.6); /* Zoom a scala 1.6 */
            opacity: 1;
        }
    }
}

/* Media query per schermi minori di 920px */
@media (max-width: 920px) {
    @keyframes zoomInText1 {
        0% {
            transform: scale(1);
            opacity: 0;
        }
        100% {
            transform: scale(1.2); /* Zoom a scala 1.2 */
            opacity: 1;
        }
    }
}






/*  animazione rotazione 360 su immagine */
.rotate-fade {
    position: relative; /* Necessario per la movimentazione */
    opacity: 0; /* Inizialmente invisibile */
    animation: fadeInMoveRotate 2s forwards; /* Animazione di fade, movimento e rotazione */
}

@keyframes fadeInMoveRotate {
    0% {
        transform: translateY(300px) rotate(0deg); /* Inizio 200px più in basso e senza rotazione */
        opacity: 0; /* Invisibile all'inizio */
    }
    100% {
        transform: translateY(0) rotate(360deg); /* Posizione finale e rotazione completa */
        opacity: 1; /* Visibile alla fine */
    }
}
/*  fine animazione rotazione 360 su immagine */


/* Animazione rotazione 360 su testo */
.rotate-fade-text {
    position: relative; /* Necessario per la movimentazione */
    opacity: 0; /* Inizialmente invisibile */
    animation: fadeInMoveRotateText 2s forwards; /* Animazione di fade, movimento e rotazione */
}

@keyframes fadeInMoveRotateText {
    0% {
        transform: translateY(300px) rotate(0deg); /* Inizio 300px più in basso e senza rotazione */
        opacity: 0; /* Invisibile all'inizio */
    }
    100% {
        transform: translateY(0) rotate(360deg); /* Posizione finale e rotazione completa */
        opacity: 1; /* Visibile alla fine */
    }
}
/* Fine animazione rotazione 360 su testo */




/*  flashcard */
		.flashcard {
            width: 400px;
            height: 600px;
            perspective: 1000px;
            margin: 0 auto;
        }

        .card {
            width: 100%;
            height: 100%;
            position: relative;
            transition: transform 0.6s;
            transform-style: preserve-3d;
            cursor: pointer;
        }

        .card.flipped {
            transform: rotateY(180deg);
        }

        .card-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 10px;
        }

        .front {
            background-color: blue;
            color: white;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .front img {
            width: 90%;
            height: auto;
            border-radius: 10px 10px 0 0;
        }

        .back {
            background-color: darkred;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            transform: rotateY(180deg);
            border-radius: 10px;
        }
/*  fine flashcard */

/*  contenitore per flashcards multiple */
.flashcard-container {
    display: flex;                   /* Usa Flexbox per affiancare le flashcards */
    justify-content: center;         /* Centra orizzontalmente */
    align-items: center;             /* Allinea verticalmente */
    gap: 20px;                         /* Spaziatura del 2% per separare le flashcards */
    position: relative;              /* Posizionamento relativo per centrare nel contenitore */
    width: 100%;                     /* Assicura che il contenitore usi tutta la larghezza disponibile */
}
/*  fine contenitore per flashcards multiple */



/*  blocco orizzontale con immagine nella metà sinistra e testo nella metà destra */
.blocco {
    display: flex;
    box-shadow: 2px 2px 3px 2px #3d3d3d;
    margin: 0 auto;
}

.contenuto-destra {
    width: 50%; /* Occupiamo la metà destra */
    padding: 20px;
    color: black; /* Colore del testo */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra verticalmente il contenuto */
    text-align: left; /* Allinea il testo a sinistra */
}

/*  fine blocco orizzontale con immagine nella metà sinistra e testo nella metà destra */




/*  blocco orizzontale con immagine nella metà destra e testo nella metà sinistra */
.blocco {
    display: flex;
    box-shadow: 2px 2px 3px 2px #3d3d3d;
    margin: 0 auto;
}


.contenuto-sinistra {
    width: 50%; /* Occupiamo la metà sx */
    padding: 20px;
    color: black; /* Colore del testo */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra verticalmente il contenuto */
    text-align: left; /* Allinea il testo a sinistra */
}


.blocco {
    display: flex;
    box-shadow: 2px 2px 3px 2px #3d3d3d;
    margin: 0 auto;
}

.colonna-sinistra,
.colonna-destra {
    padding: 5px;
    color: black; 
    text-align: left; 
}

.contenuto-destra {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra verticalmente il contenuto */
}
/* fine blocco orizzontale con immagine nella metà sinistra e testo nelle due colonne a destra */

/* blocco singolo con testo sopra e immagine sotto*/

/* fine blocco singolo con testo sopra e immagine sotto*/

.elenco-puntato {
	font-family: Open sans;
	font-size: 1em;
	line-height: 1.3em;
	letter-spacing: 0.01em;
	text-align: justify;
	padding-left: 43px;
	padding-right: 40px;
	list-style-type: square
}

.elenco-puntato li {
	line-height: 1.5em;
    margin-bottom: 10px; /* Spazio tra le voci */ 
    }
	
.columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px; /* Spazio tra le colonne */
}

.columns p {
    margin: 0;
}

.colonne {
    display: grid;
    grid-template-columns: 49% 49%; /* Due colonne di uguale larghezza */
    gap: 2%; /* Spazio tra le colonne */
    width: 100%; 
}

.colonna-sinistra,
.colonna-destra {
    padding: 5px;
    color: black; 
    text-align: left; 
	
	*/ Media query per risoluzioni inferiori a 1200px */
@media (max-width: 1200px) {
    .colonne {
        grid-template-columns: 100%; /* Colonne una sopra l'altra */
		 gap: 5px; /* Spazio tra le colonne */
    }
	
	
 .testo-su-immagine {
        width: 80%;
        height: auto;
        }
 .testo-su-immagine-bis {
        width: 50%;
        padding: 20px;
        }
 @media (max-width: 1200px) {
	.testo-su-immagine {
        width: 80%;
        }
    .testo-su-immagine-bis {
        width: 80%;
        padding: 10px;
        }
 @media (max-width: 920px) {
	.testo-su-immagine {
        width: 90%;
        }
    .testo-su-immagine-bis {
        width: 100%;
        padding: 10px;
        }