#menu-bar{
 display: none;}

header label{          /*icono de menú*/
 float: right;	
 font-size: 50px;
 margin: 10px 0;
 cursor: pointer;
 color: #855a25;
}

.logo img{                /*LOGO*/
 width:200px;
 margin: -55px 15px auto;  
}

.menu{
 position: absolute;
 top: 78px;
 left: 0;
 width: 100%;
 height: 100vh;  
 background: rgba(30,30,30,0.9);
 transition: all 0.5s;               /*Mueve 100% a la izquierda el menú, para que se vea el movimiento al dar clic*/
 transform: translateX(-100%);}

.menu a{                                /*bloque del menú en movil*/
  display: block;
  color: #855a25;     /*efb810*/
  height: 50px;
  text-decoration: none;
  padding: 15px;
  border-bottom: 1px solid rgba(239,184,16,0.50);}

.menu a:hover{
 background: rgba(225,225,224,0.2);}   /*255,255,255,0.2*/

#menu-bar:checked ~ .menu{           /*Genera sl movimiento del menu*/
 transform: translateX(0%);}



 /******************************RESPONSIVE*************************************/
 @media (min-width:1024px){

 .logo img{ width:80px; margin-top: 10px; } 

.menu{
 position: static;
 width: auto;
 height: auto;
 margin: 15px 15px auto;      
 transform: translateX(0%);
 float: right;
 display: flex;
 background: #161f16;} /*1e1e1e*/

.menu a{ border: none; font-size: 25px; }
.menu a:hover{ background: #161f16;  color: #e1e1e0;}
header label{ display: none; }     /*Se oculta el icono del Menu*/
 }/*1024*/


 @media(min-width:1280px){  /*****************************************/
 .logo img{ width:200px; margin-top: -55px; }  
 } /*1280*/