/* regole di reset */
ul{margin: 0;padding:0;list-style-type:none}

/*MENU PRINCIPALE*/
/* lista in orizzontale. inline-block � come inline, ma pu� avere altezza e larghezza. relative occorre per il sottomenu */
#menu li{display:inline-block;position:relative}

/* menu. Cambiando center l'orientamento a destra o sinistra */
#menu{width:100%;background-color:#808080;border-radius:20px;text-align:center}

/* link menu. Cambiando 80px posso scrivere voci pi� lunghe */
li a{display:block;padding:5px 2px;width:90px;color:#fff;font:bold 12px Arial;text-decoration:none;border-right:1px solid #ccc}

/* link menu hover */
a:hover{color:#C8C8C8}

/* SOTTOMENU PRINCIPALE */
#menu li .hidden{display:block;position:absolute;top:90px;left:0;background-color:#808080;visibility:hidden;margin-left:-5px;border-right-width:medium}

/* link sottomenu */
#menu li .hidden li a{width:60px;border-right:none}

/* Mostro il Sottomenu animazione per il passaggio sopra agli elementi del menu */
#menu li:hover .hidden{margin-top:-65px;visibility:visible}

/* TRIGRAMMA */
/* stile e invisibilit� */
.showMenu{width:40px;border:1px solid rgb(0, 0, 0);margin:auto;color:black;text-align:center;font-size:30px;margin-bottom:10px;
display:none}


/* invisibilit� checkbox
Il checkbox va nascosto in ogni caso ed il menu comparir� quando esso verr� selezionato tramite click sull�etichetta */
input[type=checkbox]{display:none}

/* La tilde alt126 permette di selezionare tutti gli elementi B presenti in A; 
qui sta a significare che d� visibilit� al menu quando il checkbox viene selezionato. */
input[type=checkbox]:checked ~ #menu{display:block}

.header .menu-icon{
  /*Struttura del quadrato contenente il Btn Menu*/
  /*border:  1px solid red;*/
  padding:  28px 20px;
  position: relative;
  float: right;
  cursor: pointer;
}


.header .menu-icon .nav-icon{
  /*Colore del Btn Menu*/
  background-color: rgb(0, 0, 0);
  display: block;
  /*dimensione del Btn Menu*/
  width:  20px;
  height: 2px;
  /*Posiziona il Btn Menu al centro del quadrato rosso*/
  position: relative;
  transition: background-color .2s ease-out;

}

.header .menu-icon .nav-icon::before,
.header .menu-icon .nav-icon::after{
  /*Struttura del Btn Pulsante Menu*/
  background-color:  rgb(0, 0, 0);
  content:  "";
  display: block;
  height: 110%;
  width: 100%;
  /*Al Click anima il BTN Menu */
  transition: all .3s ease-out;
  position: absolute;
  
  
}
/* crea riga superiore ed inferiore del BTN Menu*/
.header .menu-icon .nav-icon::before{
  top: 5px;
}
.header .menu-icon .nav-icon::after{
  top: -5px;
}

.header .menu-btn{
  /*nasconde checked*/
  display: none;

}

/*Nasconde la linea centrale del BTN menu*/
.header .menu-btn:checked ~ .menu-icon .nav-icon{
  background-color: transparent;

}

/*Al click sul BTN Menu si trasforma in X*/
.header .menu-btn:checked ~ .menu-icon .nav-icon::before{
  transform:  rotate(-45deg);
  top: 0;

}
  
.header .menu-btn:checked ~ .menu-icon .nav-icon::after{
  transform: rotate(45deg);
  top: 0;
}

/* Stile per schermi piccoli */
@media screen and (min-width: 768px) {
  /*Nasconde il BTN Menu su schermi Deskstop*/
  .header .menu-icon{
    display: none;
}
}

/* MEDIA QUERIES */
/* rendo il men� responsivo per adattarlo ai dispositivi pi� piccoli, fino ad una risoluzione massima di 868px */
@media only screen and (max-width: 768px) {

  html {
    font-size: 21px;
    line-height: 150%;
 } 

#menu{border-radius:0;text-align:Left;display:none}
   
/* rendo gli elementi dei menu elementi di blocco */  
ul li{display:block}
  
/* imposto la larghezza massima per gli elementi dei menu e i links */  
#menu li .hidden li, #menu li .hidden li a, ul li, ul li a{padding-right:0;padding-left:0;width:100%;border-right:none;font-size: 16px;}
  
/* mostro il Hamburgher sottomenu solo al passaggio del mouse */   
#menu li .hidden li{display:none} 
#menu li:hover .hidden li{display:block}  

/* resetto la posizione degli elementi del menu. static valore di default. Gli elementi sono mostrati in ordine, come appaiono nel flusso del documento */  
#menu li{position:static}  
  
/* resetto la posizione del sottomenu e lo mostro */  
#menu li .hidden{position: static;visibility:visible}
  
/* nessuna animazione al passaggio del mouse */  
#menu li:hover .hidden{margin:0} 
  
/* colore di sfondo agli elementi del menu e del sottomenu */
#menu li{background-color:#666666}
#menu li .hidden li{background-color:#333333}  
  
/* mostro il pulsante del menu nella versione mobile*/
.showMenu{display:block}  
  
}
.Down
{
  position:fixed;
bottom:0;
  
}
.Center
{
    position: Absolute;
    visibility: Hidden;
    background-color: #ffffff;
    color: #000000;
    opacity: 80;
    font: Normal 12px Verdana;
    width: 140px;
    border: Solid 1px #CCCCCC;
    
  
}
.top
{
  position:absolute;top:0;
  visibility: fixed;
  position:fixed;
  opacity: 80;
  background-color: #FFFFFF;
  background-color: transparent;
}

/* Stile per schermi piccoli */
@media screen and (max-width: 260px) {
   html {
      font-size: 12px;
      line-height: 150%;
   }
   table, thead, tbody, th, td, tr {
display: block;
}

}