@media only screen and (min-width: 1321px) {
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 */
#liSup{
display:inline-block;
position:relative;
}
/* menu. Cambiando center l'oriento a destra o sinistra */
#menu{
width:100%;
background-color:#333;
text-align:left;
margin-top:-22px;
}
/* link menu. Cambiando 80px posso scrivere voci più lunghe */
#liSup a{
display:block;
padding: 20px 0 20px 30px;
color:#fff;
font-size:0.8em;
text-decoration:none;
}

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

/* SOTTOMENU PRINCIPALE */
#menu liSup .hidden{
display:block;
position:absolute;
top:100px;left:0;
background-color:#333;
visibility:hidden;
margin-left:-5px;
border-right:none;
}

/* link sottomenu */
#menu liSup .hidden liSup a{
width:100%;
border-right:none;
}

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

/* TRIGRAMMA */
/* stile e invisibilità */
.showMenu{
width:100%;
border:none;
margin:-22px 0px -20px 0px;
padding:5px;
text-align:left;
font-size:2.5em;
margin-bottom:10px;
background-color:#333;
color:#fff;
outline:none;
display:none;
cursor: pointer;
}
}
@media only screen and (max-width: 1320px) {
	
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 */
#liSup{
display:inline-block;
position:relative;
}
/* menu. Cambiando center l'oriento a destra o sinistra */
#menu{
width:100%;
background-color:#333;
text-align:left;
margin-top:-22px;
}
/* link menu. Cambiando 80px posso scrivere voci più lunghe */
#liSup a{
display:block;
padding: 20px 0 20px 15px;
color:#fff;
font-size:0.7em;
text-decoration:none;
}

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

/* SOTTOMENU PRINCIPALE */
#menu liSup .hidden{
display:block;
position:absolute;
top:100px;left:0;
background-color:#333;
visibility:hidden;
margin-left:-5px;
border-right:none;
}

/* link sottomenu */
#menu liSup .hidden liSup a{
width:100%;
border-right:none;
}

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

/* TRIGRAMMA */
/* stile e invisibilità */
.showMenu{
width:100%;
border:none;
margin:-22px 0px -20px 0px;
padding:5px;
text-align:left;
font-size:2.5em;
margin-bottom:10px;
background-color:#333;
color:#fff;
outline:none;
display:none;
cursor: pointer;
}
}

input[type=checkbox]{display:none}
input[type=checkbox]:checked ~ #menu{display:block}

@media only screen and (max-width: 1060px) {
  
#menu{
padding-left:40px;
text-align:left;
display:none;
}
   
ul #liSup{display:block}
  
#menu #liSup .hidden #liSup, #menu #liSup .hidden #liSup a, ul #liSup, ul #liSup a{
width:100%;
border-top:1px solid #ccc;
}
    
#menu liSup .hidden liSup{display:none}
#menu liSup:hover .hidden liSup{display:block}  

#menu liSup{position:static}  
  
#menu liSup:hover .hidden{margin:0} 

.showMenu{display:block
}   
}