body{
    top: 0;
    margin:0;
    padding:0;
    width: 100%;
    height: 100px;
    
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    color: rgb(45, 9, 250);
    background-color: rgba(32, 194, 243, 0.856); 
    }

header{
    top: 0;
    margin:0;
    padding:0;
    width: 100%;
    height: 100px;    
    font-size: 15px;
    color: rgb(243, 101, 7);
    background-color: rgba(7, 7, 247, 0.938);
    border:3px solid rgb(241, 9, 9);
    /* hacer el menu fijo */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
  }

#cabecera {background-color:blue; border-left:rgb(51, 243, 51) 10px solid;
            border-right:rgb(240, 39, 196) 10px solid; height:50px;}

#logotipo {width:200px; float:left;}
 
#marca {background-color:rgb(16, 165, 252); width:430px; font-size: 30px;
    color: rgb(241, 246, 247); float:left;}

#publicidad {background-color:rgb(237, 245, 128); width:250px; float:right;}

#btn-menu{
    display:none;
}

header label{
    display:none;
}

header label :hover{
    cursor:pointer;
    list-style:none;
}

.menu a {
    top: 0;
    margin:0;
    padding:10;

    /* ojo con este width no lleva nada - menu nav ,
    TAMBIEN FONT.SIZE TAMAÑO DE LETRAS MENU PRINCIPAL*/
    width: 10;
    height: 10px;    
    font-size: 13px;
    color:rgba(245, 247, 248, 0.918);
    background-color: rgba(9, 168, 231, 0.938);
    border:3px solid rgb(241, 9, 9);
    text-decoration: none;
}

.menu ul{
    margin:0; 
    padding:0;
    list-style:none;
    background-color: rgba (rgb(235, 185, 21));
    display:flex;
    
}

.menu li{
    text-align: left;
    flex-grow:1;
    color:rgba(247, 212, 17, 0.856);
    background-color: rgba (rgb(243, 34, 69));

    justify-content:space-around;
}

.menu li :hover{
  
    background-color: rgba(238, 13, 13, 0.5);
}

.menu li a {
    display:block;
    padding:20px 20px;
    color: rgba(red);
    text-decoration: none;
    background: rgba (rgb(40, 18, 233));
    
}

.menu li a:hover {
    cursor:pointer;
    color: rgba(rgb(0, 255, 21));
    text-decoration: none;
    background: rgba (rgb(216, 68, 154));
}



.menu li ul {
    display:none;
    position:absolute;
    min-width:140px;
}

.menu li:hover > ul {
    display:block;
}

.menu li ul li {
    position:relative;
}

.menu li ul li ul {
    right:-140px;
    top:0px;
}



@media (max-width: 768px){

header label {
    display:block;
 
    }

header label :hover {
    cursor:pointer;
    color: rgba(rgb(0, 255, 21));
    }

.menu {
    position: absolute;
    background-color: rgb(72, 173, 240);
    width:50%;
    margin-left:-50%;
         
    transition: all 1s;
  
}

.menu ul {
    flex-direction: column;
}

.menu li {
   
    border-right:1px solid rgb(240, 12, 12);
}

#btn-menu:checked ~ .menu{
    margin:0;
}

}