*{
    margin: 0;

}
body{
    
}

 
 
header{
    
    background-color:rgba(0,0,0,0);
  
    display:flex;
    justify-content: flex-end;
    color: #fff;
    align-items:center;
    width: 100%;
    position: fixed;
     z-index:1;
    
    font-weight:600;
   
   
    
    

}
  
header label{
    font-size: 30px;
    cursor: pointer;
    display: none;
    
   
}
#btn-menu{
    display: none;
    
}
.icon-menu{
    color: darkblue;
}
.menu ul{
    
    
    display: flex;
    list-style: none;
   
    
    
        
    }
.menu ul ul{
    display: none;
    background-color: cornflowerblue;
   
}

.menu a{
    display: block;
    

    
    text-decoration: none;
   font-family: calibri;
    font-size: 16px;
    
    
    
}

.menu a span{
    margin-left: 10px;
        
}
.menu ul li:hover ul{
    display: block;
    position: absolute;   
}
@media (max-width:850px){
    .arriba{
        display: none;
    }
    header{
    height: 60px;
    background-color: #FFF;      
    } 
   
    header label{
        display:block;  
    }
    .menu{
        position:absolute;
        top:60px;  /* con esto se cambia que baje un poco el menu de los ul xq estaba en 50 y se ocultaba el icono del menu las 3 rayitas*/
        left: 0px;
        width: 100%;
        transform: translateX(-100%);
        transition: :all 0.3s;
   
    }
.menu ul{
    flex-direction: column;
    
    background-color: #F6F6F6;
    left: 0px;
    margin-left: -40px;
   
    
    
}
.menu ul li:hover ul{
    display:none;
    position: static;
  
    
}
.menu a span {
    position:absolute;
    right: 15px;
    z-index: 3;
    
}
    .menu a:hover{
    background: rgba(0,0,0,0.2);
        color: #fff;
        
} 
   
    #btn-menu:checked~.menu{
        transform: translateX(0%);
        transition: 1s;
       
    }
    .menu ul ul{
        background: rgba(0,0,0,0.4);
        
    }
    .logoempresa{
        width:160px;
        height:70px;
        position: absolute;
        left: 20px;
        top: 17px;
      
              
    }
    
    .menu a{
        display: block;
    padding: 10px 10px 10px 20px;
      
    text-decoration: none;
   font-family: calibri;
    font-size: 16px;
       
       
        
        
         }
}





@media (min-width:850px){
    header{
    height: 70px;
    display:flex;
    justify-content: flex-end; 
        background: #FFF;
    }
    
    .tapa-auxiliar{
        display: none;
    }
    .menu{
        position: absolute;
        right: 20px;
        top:15px;
        
    

    }
   
      
    .logoempresa{
        width:250px;
              
         height:70px;
        padding: 5px 30px;
        
        
        
    }
.menu ul{
    height: 50px;
    background-color: rgba(0,0,0,0);
}
.menu ul ul{
    top: 42px;
}
   
.menu ul ul li{
        border-right: none;
        background: #fff;
        z-index: 2;
}
   
   
   
    
    .contenedor-menu{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        position: absolute;
        
        
                
    }
    .menu a{
    display: block;
    
    font-weight: 100;    
    text-decoration: none;
        font-family: sans-serif;
       font-size: 12px;
        max-width: 130px;
        text-align: center;
        font-weight: 600;
        margin-left: 10px;
}
    .general{
        padding:10px 15px 10px 15px;
    }
    
    
}