/* Basic styles for all screen sizes */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}


/* inizio istruzioni per Header e Footer */

header, footer {
    background-color: #ffffff;
    color: rgb(7, 99, 236);
    text-align: center;
    padding: 1em;
}

/* inizio linguette per lingue */
#header #lingue{/* è la fascia in alto dove c'é il logo e le lingue */
    float: right; /* posizionamento Linguette per lingue*/
    padding: 0;
    margin: 0;
}

#header #lingue li{/* è la fascia in alto dove c'é il logo e le lingue */
    float: left;   /* ordinamento Linguette per lingue */
    list-style: none;
    background-color: #a6a8aa;
    padding-top: 20px;
    padding-bottom: 7px;
    margin-left: 8px;
    width: 24px;
    text-align: center;
}
#header #lingue li a{/* è la fascia in alto dove c'é il logo e le lingue */
    color: #fff;
    font-size: 13px;
    font-weight: bold;
}
/* fine linguette per lingue */

/* fine istruzioni per Header e Footer */



/* inizio istruzioni per MAIN SX */
main {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1em;
}
/* fine istruzioni per MAIN SX */


/* inizio istruzioni per SECTION SX E ASIDE DX */

section, aside {
    margin-bottom: 1em;
}

section {
    background-color: #f4f4f4; /* Colore sfondo colonna sx */
    padding: 1em;
}

aside {
    background-color: #e4e4e4; /* Colore sfondo colonna dx */
    padding: 1em;
}



/* inizio didascalia a scomparsa per Pagine Valentina in Spagnolo */
.classe_img_con_didascaliaVaBi {
    float: left;
    position: relative;
    overflow: hidden;
  }
  
  .classe_img_con_didascaliaVaBi p {
    position: absolute;
    left: 16px; /* margine inizio scritta a sinistra */
    bottom: 0;
    background: none repeat scroll 0 0 rgba(230, 157, 13, 0.7);
    font-size: 12px; /* dimensione del testo */
    color: #FFFFFF;/* colore del testo */
    display: none;
    width: 100%;
    padding: 10px;
  }
  
  .classe_img_con_didascaliaVaBi:hover p {
    display:block;
  }
  /* fine didascalia a scomparsa per landingpagePagine Valentina in Spagnolo

/* inizio didascalia fissa su immagini */
.classe_img_con_didascaliafissa {
    float: left;
    position: relative;
  /*  overflow: hidden;*/
  }
  
  .classe_img_con_didascaliafissa p {
    position: absolute;
    left: 170px; /* posione testo da bordo sinistra */
    right: 50px;
    top: 80px; /*posione testo dall'alto */
  /*  bottom: 65px;  posione testo dal basso */
    /*background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7);*/
    font-size: 20px;
    color: #0000cd;/* colore del test */
    /* display: none; */
    width: 100%;
    padding: 10px;
  }
  
  .classe_img_con_didascaliafissa:hover p {
    display:block;
  }
  /* fine didascalia  fissa su immagini */
  

/* fine istruzioni per ASIDE DX */



/* inizio Layout for screens wider than 600px */
@media (min-width: 768px) {
    main {
        flex-direction: row;
    }

    section, aside {
        flex: 1;
        margin-bottom: 0;
        margin-right: 1em;
    }

    aside {
        margin-right: 0;
        margin-left: 1em;
    }

}
    /* fine Layout for screens wider than 600px */


/* inizio didascalia a scomparsa per Pagine Valentina in Spagnolo */
.classe_img_con_didascaliaVaBi {
    float: left;
    position: relative;
    overflow: hidden;
  }
  
  .classe_img_con_didascaliaVaBi p {
    position: absolute;
    left: 16px; /* margine inizio scritta a sinistra */
    bottom: 0;
    background: none repeat scroll 0 0 rgba(230, 157, 13, 0.7);
    font-size: 12px; /* dimensione del testo */
    color: #FFFFFF;/* colore del testo */
    display: none;
    width: 100%;
    padding: 10px;
  }
  
  .classe_img_con_didascaliaVaBi:hover p {
    display:block;
  }
  /* fine didascalia a scomparsa per landingpagePagine Valentina in Spagnolo


/* inizio didascalia fissa su immagini */
.classe_img_con_didascaliafissa {
    float: left;
    position: relative;
  /*  overflow: hidden;*/  /*non fara vedere la didascalia */
  }
  
  .classe_img_con_didascaliafissa p {
    position: absolute;
    left: 170px; /* posione testo da bordo sinistra */
    right: 50px;
    top: 80px; /*posione testo dall'alto */
  /*  bottom: 65px;  posione testo dal basso */
    /*background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7);*/
    font-size: 20px;
    color: #0000cd;/* colore del test */
    /* display: none; */
    width: 100%;
    padding: 10px;
  }
  
  .classe_img_con_didascaliafissa:hover p {
    display:block;
  }
  /* fine didascalia  fissa su immagini */


 


/* Contenitore del menu */

.menu-container {
  position: relative;  
}

/* Stile per l'icona hamburger */
.hamburger {
  width: 30px; /* larghezza riga */
  cursor: pointer;
  margin: 10px;
}

.line {
  width: 100%;
  height: 3px; /* spessore riga */
  background-color: #ffffff; /* colore riga */
  margin: 5px 0;
  transition: 0.4s;
}
/* FINE Stile per l'icona hamburger */


/* Menu a tendina */
.menu {
  list-style-type: none;
  text-align: left; /* allineamento testo */
  font-size: 12px; /* dimensione testo */
  margin: 0;
  padding: 0;
  background-color: #fb0707;
  position: absolute;
  top: 49px; /* Spazio sotto l'icona hamburger */
  left: 20px; /* Spazio a sx del testo */
  width: 325px; /* larghezza spazio per testo*/
  display: none; /* non verrà mostrato nessuno spazio vuoto in corrispondenza di dove poi apparira il menu. */
}

.menu.show {
  display: block; /* Mostra il menu quando la classe "show" è attiva */
}

.menu li a {
  display: block;
  padding: 0px; /*distanzatra le righe */
  text-decoration: none;
  color: white; /* Colore del testo */
  transition: background-color 0.3s;
}

.menu li a:hover {
  background-color: #fb0707;
}

/* definizione delle liste ul */
ul li {list-style: inside url(images/IcoBla20x20.png);}
li {list-style: outside url(images/IcoBla20x20.png);}




/* Esempio: disc inside mette un pallino  a sx testo. 
  possibile utilizzare: 
  disc	un cerchietto pieno colorato; il colore può essere modificato per tutti i tipi con la proprietà color
  circle	un cerchietto vuoto
  square	un quadratino
  decimal	sistema di conteggio decimale 1, 2, 3, ...  
  etc...... */


  /* immagine adattiva */
#padre {
  width: auto;
  height: auto;
  left: 0px;
  }

#padre img{
    width: 100%;
    height: 100%;
    left: 0px;
    object-fit: contain; */ L’immagine viene riadattata (manenendo le proporzioni) per occupare tutto lo spazio del contenitore, senza lasciare alcuno spazio vuoto in esso. Questa soluzione però può portare al ritaglio di parte dei bordi dell’immagine (detto “crop” o ritaglio).*/
/*    object-fit: contain; /* L’immagine viene riadattata (mantenendo le proporzioni) per occupare tutto lo spazio dato dal contenitore, ma garantendo che l’immagine sia completamente visibile. Questa soluzione può generare però degli spazi vuoti nel contenitore */

    }
/*fine immagine adattiva */