@media only screen and (max-width: 768px) {
ul.menu > li {
display:inline-block;
background:#dfd8d0;
border-radius:8px;
-webkit-transition:1s;
transition:1s;
 }
 
ul.menu > li span {
display:block; 
position:relative;
}

ul.menu > li span a {
text-decoration:none;
display:block;
padding:0 25px;
font:400 16px/40px 'Noto Sans', verdana, arial, sans-serif;
/*cursor:pointer;*/
color:#333;
position:relative;
 }
 
ul.menu > li span a:after {
content:""; 
display:block;
width:5px;
height:5px;
border:1px solid #333;
border-color:#333 #333 transparent transparent; 
position:absolute;
right:8px; top:16px;
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}

ul.menu > li.champagnes span a:after {
content:""; 
display:block;
width:5px;
height:5px;
border:0;
border-color:#333 #333 transparent transparent; 
position:absolute;
right:8px; top:16px;
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}

ul.menu > li span label:nth-of-type(1) {
display:block;
padding:0 25px;
font:400 16px/40px 'Noto Sans', verdana, arial, sans-serif;
/*cursor:pointer;*/
color:#333;
position:relative;
 }
 
ul.menu > li span label:nth-of-type(1):after {
content:"";
display:block;
width:5px;
height:5px;
border:1px solid #333;
border-color:transparent #333 #333 transparent;
position:absolute;
right:8px;
top:14px;
-webkit-transition:1s;
transition:1s;
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}


ul.menu li div {
position:absolute;
left:0;
top:55px;
width:100%;
background:#dfd8d0;
max-height:0;
overflow:hidden;
opacity:0;
-webkit-transition:1s;
transition:1s;
}



#top1:checked ~ .menu li:nth-of-type(2),
#top2:checked ~ .menu li:nth-of-type(3),
#top3:checked ~ .menu li:nth-of-type(4),
#top4:checked ~ .menu li:nth-of-type(5) {
background:#26333c;
}
#top1:checked ~ .menu li:nth-of-type(2) div,
#top2:checked ~ .menu li:nth-of-type(3) div,
#top3:checked ~ .menu li:nth-of-type(4) div,
#top4:checked ~ .menu li:nth-of-type(5) div {
max-height:300px; 
padding:10px 0;
opacity:1;
border-radius:8px;
 }
#top1:checked ~ .menu li:nth-of-type(2) span label:nth-of-type(1),
#top2:checked ~ .menu li:nth-of-type(3) span label:nth-of-type(1),
#top3:checked ~ .menu li:nth-of-type(4) span label:nth-of-type(1),
#top4:checked ~ .menu li:nth-of-type(5) span label:nth-of-type(1) {
color:#fff;
}
#top1:checked ~ .menu li:nth-of-type(2) span label:nth-of-type(1):after,
#top2:checked ~ .menu li:nth-of-type(3) span label:nth-of-type(1):after,
#top3:checked ~ .menu li:nth-of-type(4) span label:nth-of-type(1):after,
#top4:checked ~ .menu li:nth-of-type(5) span label:nth-of-type(1):after {
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
top:19px;
border-color:transparent #fff #fff transparent;
 }
#top1:checked ~ .menu li:nth-of-type(2) span label:nth-of-type(2),
#top2:checked ~ .menu li:nth-of-type(3) span label:nth-of-type(2),
#top3:checked ~ .menu li:nth-of-type(4) span label:nth-of-type(2),
#top4:checked ~ .menu li:nth-of-type(5) span label:nth-of-type(2) {
display:block;
width:100%;
height:100%; 
position:absolute;
left:0; 
top:0; 
background:transparent url(trans.gif); 
/*cursor:pointer;*/
 }

#top1:checked ~ .closetop,
#top2:checked ~ .closetop,
#top3:checked ~ .closetop,
#top4:checked ~ .closetop {
position:fixed;
width:100%; 
height:100%;
left:0;
top:0;
background:transparent;
z-index:1;
 }


nav ul {
padding:0;
 margin:0;
 list-style:none;
  }
  
  
nav input.inputmenu {
position:absolute;
 left:-9999px; 
 display:none;
 }
 
 
nav ul.menu {
position:relative;
 z-index:10;
 }

nav label {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
-ms-touch-action: none;
}


nav {
background:#26333c;
width:100%;
 /*max-width:300px;*/
 margin:0 auto;
 text-align:center;
 position:relative;
 font-family:'Noto Sans', verdana, arial, sans-serif;
 z-index:100;
 }
 
nav label.menuopenclose {
display:block;
 font:400 20px/40px 'Noto Sans', verdana, arial, sans-serif;
 color:#fff;
 position:relative;
 }
 
ul.menu {
width:100%;
 max-height:0;
 overflow:hidden;
 -webkit-transition:1s;
 transition:1s;
 }
nav label.menuopenclose:before {
content:""; 
display:block;
 width:30px; 
 height:3px;
 border:4px solid #fff;
 border-width:4px 0;
 position:absolute;
 right:70px;
 top:11px;
 } 
nav label.menuopenclose:after {
content:"";
 display:block;
 width:30px; 
 height:3px;
 border:4px solid #fff;
 border-width:4px 0;
 position:absolute; 
 right:70px;
 top:18px;
 } 

ul.menu li {
width:100%;
 margin-bottom:2px;
 }
 
ul.menu div dl {
display:block;
 margin:0 auto;
 padding:2px 0;
 }
 
nav label {
/*cursor:pointer;*/
}

ul.menu div dl:after {
content:""; 
display:block;
 width:5px;
 height:5px; 
 border:1px solid #fff;
 border-color:transparent #fff #fff transparent;
 position:absolute;
 right:8px;
 top:10px;
-webkit-transition:1s;
transition:1s;
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}

#menuopenclose:checked ~ ul.menu {
max-height:300px;
z-index:100;
}
#menuopenclose:checked + label.menuopenclose:before {
content:""; 
display:block;
 width:20px;
 height:4px;
 background:#fff;
 border:0;
 top:18px;
 right:75px;
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
} 

#menuopenclose:checked + label.menuopenclose:after {
content:"";
 display:block;
 width:20px;
 height:4px;
 background:#fff;
 border:0;
 top:18px;
 right:75px;
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
} 


ul.menu li div {
position:static;
}

#top1:checked ~ .menu li:nth-of-type(2) div,
#top2:checked ~ .menu li:nth-of-type(3) div,
#top3:checked ~ .menu li:nth-of-type(4) div,
#top4:checked ~ .menu li:nth-of-type(5) div {
max-height:300px;
 opacity:1;
 padding-bottom:10px;
 }

#top1:checked ~ .closetop,
#top2:checked ~ .closetop,
#top3:checked ~ .closetop,
#top4:checked ~ .closetop {
position:fixed;
 width:0;
 height:0;
 }


ul.menu div input:checked + dl{
max-height:300px;
}

ul.menu div input:checked + dl label:nth-of-type(2) {
display:block;
 width:100%;
 height:100%;
 position:absolute;
 left:0; 
 top:0;
 background:transparent url(trans.gif);
 }
 
ul.menu div input:checked + dl:after {
-webkit-transform:rotate(-135deg);
 transform:rotate(-135deg);
 top:12px;
 }
 
 

}