/************************************************** css/menu/light/menu_left-nav-style.css */
/** light   
 * Panello latearle autouscente con navigazione
 * che esce al click da sinistra
 */

.nav {
  width: 280px; /* largezza libera, potrai sperimentare */
  min-width: 280px;
  height: 100%; /* fissiamo e indichiamo l'altezza massima  */
  position: fixed;
  top: 0px;
  bottom: 0px;
  margin: 0px;
  left: -280px; /* spostiamo(nascondiamo)il pannello rispetto bordo sinistro della pagina  */
  padding: 0 0px; /* spazzi interni */
  -webkit-transition: left 0s; /* regoliamo la uscita del pannello  */ /* prima era 0.1s */
  -moz-transition: left 0s; /* prima era 0.1s */
  transition: left 0s; /* prima era 0.1s */
  background:  var(--menu_bg); /* indichiamo il colore dello sfondo del panello (prima era #16a085)*/
  z-index: 10000; /* indichiamo che sara sopra tutti gli altri elementi della pagina  */
}

/**
 * Immagine logo pannello 
 */
.nav img {
  max-width: 100%;
  border: 0px;
  /* height: 160px; */
  height: 47px;
}
.nav img.center_img_logo {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  /* margin-top: 5px; */
  width: 100%;
  background: var(--menu_bg);
}

/**
 * Bottone interruttore del pannello 
 * tag <label>
 */

.nav-toggle {
  position: absolute; /* posizionamento assoluto*/
  left: 289px; /* rispetto bordo sinistro del pannello  */
  top: 10px; /* rispetto bordo superiore  */
  padding: 12px; /* spazzi interni  */
  background: transparent; /* indichiamo il colore dello sfondo del interruttore di solito corrisponde al colore del pannello */
  color:  var(--buttonXclose); /* colore del testo */
  cursor: pointer; /* tipo del cursore */
  font-size: 30px; /* altezza del font */
  line-height: 25px;
  z-index: 2001; /* sempre in prima vista rispetto altri elementi della pagina  */
  -webkit-transition: 0s ease-in-out; /* animazioni del colore del testo al hover */ /* prima era .25s */
  -moz-transition: 0s ease-in-out; /* prima era .25s */
  transition: 0s ease-in-out; /* prima era .25s */
}

/* identifichiamo il testo del bottone interruttore 
 * prima era il simbolo Unicode (TRIGRAM FOR HEAVEN) \2630 (simbolo 3 barrette orizzontali)
 * adesso è font FantAwesome \f0c9
*/

.nav-toggle:after {
  font-family: "Font Awesome 5\ Free Solid", "Font Awesome\ 5 Free";
  content: "\f0c9";
  /* content: "\2630"; */
  font-weight: 900;
  font-size: 30px; /* prima era 1em*/
  text-decoration: none;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

/* colore del testo al hover  */

.nav-toggle:hover {
  color:  var(--buttonXclose); /* background-color: rgba(252,179,38,1.0);*/
}

/**
 * Checkbox nascosto
 * invisibile e inaccessibile  :)
 * nome del selettore del attributo del checkbox
 */

[id="nav-toggle"] {
  position: absolute;
  display: none;
}

/**
 * cambiamento della posizione del iterruttore  
 * in caso di dispositivi mobili
 * quando pannello aperto si trova al interno del pannello */

[id="nav-toggle"]:checked ~ .nav > .nav-toggle {
  left: 10px; /* aggiunta prima era auto */
  right: auto; /* aggiunta prima era 20px */
  top: 10px; /* aggiunta prima era 0.5em */
  color:  var(--buttonXclose);
}

/**
 * Quando checkbox selezionato, aprire pannello 
 * usiamo pseudo-classe :checked
 */

[id="nav-toggle"]:checked ~ .nav {
  left: 0px;
  -webkit-box-shadow: 4px 0 20px 0 rgba(0, 255, 255, 0.5);
  box-shadow: 4px 0 20px 0 rgba(0, 255, 255, 0.5);
  overflow-y: auto;
  overflow-x: hidden;
}

/* 
 * spostamento del contenuto della pagina 
 * per largezza del pannelo ,
 * non è obbligatorio il trucco, ma puoi sempre usarlo
*/

[id="nav-toggle"]:checked ~ main > article {
  -webkit-transform: translateX(280px);
  -moz-transform: translateX(280px);
  transform: translateX(280px);
}

/*
 * cambio del simbolo del bottone interruttore ,
 * solita croce  (MULTIPLICATION X), 
 * potrai utilizare qualsiasi altro simbolo
*/

[id="nav-toggle"]:checked ~ .nav > .nav-toggle:after {
  font-family: "Font Awesome\ 5 Free Solid", "Font Awesome\ 5 Free";
  content: "\f00d";
  /* content: '\2715'; */
  font-weight: 900;
  font-size: 30px; /* prima era 1em*/
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

/**
 * prefissi per Android <= 4.1.2
 * 
 */

body {
  -webkit-animation: bugfix infinite 1s;
}

@-webkit-keyframes bugfix {
  to {
    padding: 0px;
  }
}

/**
 * per dispositivi medie e piccoli
 */

@media screen and (min-width: 280px) {
  html,
  body {
    margin: 0px;
    overflow-x: hidden;
  }
}

@media screen and (max-width: 280px) {
  html,
  body {
    margin: 0px;
    overflow-x: hidden;
  }
  .nav {
    width: 85%; /* aggiunta prima era 100 */
    box-shadow: none;
  }
}

/**
 * Definiamo lo stile del titolo (logo) del pannello  
*/

.nav h2 {
  top: 120px;
  position: absolute;
  color:  var(--menu_bg);
  text-decoration: none;
  /* text-transform: uppercase; */
  width: 99%; /* aggiunta prima era 85% */
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px; /* aggiunta prima era 5px 0px; */
  text-align: center;
  /* text-shadow: rgba(255, 255, 255, 0.1) -1px -1px 1px, rgba(0, 0, 0, .6) 1px 1px 1px; */
  text-shadow: rgba(255, 255, 255, 0.1) -1px -1px 1px,
    rgb(0, 182, 240) 2px 2px 2px;
  font-family: "Graphik web", sans-serif; /* font simile a calibri Candara;*/
  font-display: swap; /* aggiunta riga */
  font-size: 20px;
  line-height: 20px;
  opacity: 0;
  /*
    transform: scale(0.1, 0.1);
    -ms-transform: scale(0.1, 0.1);
    -moz-transform: scale(0.1, 0.1); 
    -webkit-transform: scale(0.1, 0.1);
    transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%; 
    -webkit-transform-origin: 0% 0%;
    transition: opacity 0.8s, transform 0.8s;
    -ms-transition: opacity 0.8s, -ms-transform 0.8s;
    -moz-transition: opacity 0.8s, -moz-transform 0.8s;
    -webkit-transition: opacity 0.8s, -webkit-transform 0.8s;
*/
}

.nav h2 a {
  color: #dadada;
  text-decoration: none;
  text-transform: uppercase;
}

.nav h1 {
  top: 30px;
  position: absolute;
  color:  var(--menu_bg);
  text-decoration: none;
  /* text-transform: uppercase; */
  width: 100%; /* aggiunta prima era 85% */
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px; /* aggiunta prima era 5px 0px; */
  text-align: center;
  text-shadow: rgba(255, 255, 255, 0.1) -1px -1px 1px,
    rgb(0, 182, 240) 2px 2px 2px;
  font-family: "Graphik web", sans-serif; /* font simile a calibri Candara;*/
  font-display: swap; /* aggiunta riga */
  font-size: 70px;
  line-height: 80px;
  opacity: 1;
}

/*Uscita morbida del titolo (logo) al apertura del panello  */

[id="nav-toggle"]:checked ~ .nav h2 {
  opacity: 1;
  /*
    transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
*/
}

/*
 * Decoriamo il menu 
 * usando la lista non numerata per le voci
 * aggiungiamo passaggi morbidi e trasformazioni 
 */

.nav > ul {
  display: block;
  margin: 0px;
  padding: 0px;
  list-style: none;
}

.nav > ul > li {
  line-height: 2;
  opacity: 0;
  /*  
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transition: opacity .5s .1s, -webkit-transform .5s .1s;
    -moz-transition: opacity .5s .1s, -moz-transform .5s .1s;
    -ms-transition: opacity .5s .1s, -ms-transform .5s .1s;
    transition: opacity .5s .1s, transform .5s .1s;
*/
}

[id="nav-toggle"]:checked ~ .nav > ul > li {
  opacity: 1;
  /*
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
*/
}

/* impostiamo intervalli di apparizione delle voci del menu  */
/*
.nav > ul > li:nth-child(2) {
    -webkit-transition: opacity .5s .2s, -webkit-transform .5s .2s;
    transition: opacity .5s .2s, transform .5s .2s;
}
 
.nav > ul > li:nth-child(3) {
    -webkit-transition: opacity .5s .3s, -webkit-transform .5s .3s;
    transition: opacity .5s .3s, transform .5s .3s;
}
 
.nav > ul > li:nth-child(4) {
    -webkit-transition: opacity .5s .4s, -webkit-transform .5s .4s;
    transition: opacity .5s .4s, transform .5s .4s;
}
 
.nav > ul > li:nth-child(5) {
    -webkit-transition: opacity .5s .5s, -webkit-transform .5s .5s;
    transition: opacity .5s .5s, transform .5s .5s;
}
 
.nav > ul > li:nth-child(6) {
    -webkit-transition: opacity .5s .6s, -webkit-transform .5s .6s;
    transition: opacity .5s .6s, transform .5s .6s;
}
 
.nav > ul > li:nth-child(7) {
    -webkit-transition: opacity .5s .7s, -webkit-transform .5s .7s;
    transition: opacity .5s .7s, transform .5s .7s;
}

.nav > ul > li:nth-child(8) {
    -webkit-transition: opacity .5s .8s, -webkit-transform .5s .8s;
    transition: opacity .5s .8s, transform .5s .8s;
}

.nav > ul > li:nth-child(9) {
    -webkit-transition: opacity .5s .9s, -webkit-transform .5s .9s;
    transition: opacity .5s .9s, transform .5s .9s;
}

.nav > ul > li:nth-child(10) {
    -webkit-transition: opacity .5s .10s, -webkit-transform .5s .10s;
    transition: opacity .5s .10s, transform .5s .10s;
}
*/

/**
 * decoriamo link delle voci del menu 
 */
 
.navpaypaltesto {
  display: inline-block;
  font-family: "Graphik web", sans-serif; /* font simile a calibri Candara;*/
  font-display: swap; /* aggiunta riga */
  font-size: 16px;
  color: var(--menu_testo);
  width: 100%;
  text-decoration: none;
  /* passagio morbido */
  -webkit-transition: 0.25s ease, padding 0.25s ease;
  -moz-transition: 0.25s ease, padding 0.25s ease;
  transition: 0.25s ease, padding 0.25s ease;
}

.nav > ul > li > a {
  display: inline-block;
  position: relative;
  padding: 5px 0px 5px 0px;
  font-family: "Graphik web", sans-serif; /* font simile a calibri Candara;*/
  font-display: swap; /* aggiunta riga */
  font-size: 16px;
  color: var(--menu_testo);
  width: 100%;
  text-decoration: none;
  /* passagio morbido */
  -webkit-transition: 0.25s ease, padding 0.25s ease;
  -moz-transition: 0.25s ease, padding 0.25s ease;
  transition: 0.25s ease, padding 0.25s ease;
}

/**
 * stato dei link al passaggio del mouse
 */

.nav > ul > li > a:hover,
.nav > ul > li > a:focus {
  /*color: var(--color_orange); */
  /* padding-left: 15px; */
  /* font-weight: 300; */
}

/**
 * sottolineatura dei link del menu
 */
/* 
.nav > ul > li > a:before {
    content: '';
    display: block;
    position: absolute;
    right: 0px;
    bottom: 0px;
    height: 1px;
    width: 100%;
    -webkit-transition: width 0s ease;
    transition: width 0s ease;
}
 
.nav > ul > li > a:after {
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    bottom: 0px;
    height: 1px;
    width: 100%;
    background: var(--color_cyano);
    -webkit-transition: width .5s ease;
    transition: width .5s ease;
}
*/


/**
 * animazione della  linea di sottolineatura al hover 
 */
/*
.nav > ul > li > a:hover:before {
    width: 0%;
    background: var(--color_orange);
    -webkit-transition: width .5s ease;
    transition: width .5s ease;
}
 
.nav > ul > li > a:hover:after {
    width: 0%;
    background: transparent;
    -webkit-transition: width 0s ease;
    transition: width 0s ease;
}
*/


/* lo sfondo oscurante della pagina  
 * in questo caso elementi vengono bloccati */

.mask-content {
  display: block;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 1000;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  visibility: hidden;
  opacity: 0;
}

[id="nav-toggle"]:checked ~ .mask-content {
  visibility: visible;
  opacity: 1;
  -webkit-transition: opacity 0s, visibility 0s; /* prima era .5s */
  transition: opacity 0s, visibility 0s; /* prima era .5s */
}