#menu{ background-color: var(--color1); }

#menu .derecha{float: right;}
#menu nav a, #menu nav span{color: #FFF; }
#menu nav a{text-decoration: none; margin: 0px; text-transform: uppercase; font-size: 11px;}
#menu nav a:hover{text-decoration: underline;}
#menu .cnt{display: table; width: 100%;}
#menu .cnt>div{display: table-cell; vertical-align: middle;}
#menu .logo img{display: block;}

@media screen and (min-width:700px){  
    #menu nav{margin-top: 18px; }
    #menu nav{float: right;}    
    #menu>div:last-child{padding-right: 30px;}
    #menu .logo img{max-height: 80px; margin-left: 30px; max-width: 200px; }
    #menu{height: 100px; position: relative;}             
    #menu nav .carrito span{margin-left: 24px;}
    #menu nav a{float: left;}    
    #menu nav a + a{margin-left: 20px;}    
    #menu .cnt{height: 100px;}
    #menu .derecha{padding-right: 30px;}
    .btnMenu{display: none;}
}

@media screen and (max-width:699px){  
   #menu nav{position: fixed; top: 0px; background-color: var(--color2); left: -190px; width: 180px; 
       border-left: solid 1px; border-color: var(--color3); z-index: 150;} 
   #menu nav.activo{right: 0px;}      
   #menu nav a{display: block; padding-left: 20px; height: 40px; line-height: 40px; border-bottom: solid 1px;border-color: var(--color3); }      
   #menu>div:last-child{padding-right: 10px;}
   #menu .logo img{max-height: 70px; max-width: 200px; margin-left: 10px; margin-top: 8px; margin-bottom: 8px;}    
   nav .cerrar{font-size: 50px; cursor: pointer;} 
   #menu nav .cerrar:hover{text-decoration: none;}       
   #menu>.titulo{padding: 5px; background-color: rgb(0,0,0,0.2); text-align: center; font-size: 14px; margin-top: 7px;}   
   #controles{margin-right: 10px;}
   .btnMenu.flotar{top: 100px;}
}