#contenedorMenu{
  position: fixed;
  background: #333;
  width: 100%;
  height: 50px;
  z-index: 100;
  padding-right: 5px;
}

#menu-bar{
  display:none;
}

.label-menu{
  position: absolute;
  color: white;
  right: 10px;
  font-size: 40px;
  margin: 6px 0;
  cursor: pointer;
}

.menu{
  position: absolute;
  top:50px;
  left:0;
  width:100%;
  height:100vh;/*PARA QUE OCUPE SIEMPRE EL 100% DEL ALTO DE LA VENTANA*/
  background: rgba(51,51,51,0.9);
  transition: all 0.5s;/*TRANSICION DE ESE TIEMPO*/
  transform: translateX(-100%);/*PARA TRASLADAR HORIZONTALMENTE -100% SE OCULTA*/
}



.menu a{
  display: block;
  color: white;
  height: 50px;
  text-decoration: none;
  padding:15px;
  border-bottom: 1px solid rgba(255,255,255,0.5);

}

.menu a:hover{/*AL COLOCAR ENCIMA EL ENLACE*/
  background: rgba(255,255,255,0.3);
}


/*AL HACER CLICK EN EL ICONO DE 3 RAYAS SE OCULTE O SE MUESTRE EL MENU*/
#menu-bar:checked ~ .menu{
  transform:translateX(0%);
}


.seleccionado{
  pointer-events:none;
  background: rgba(255,255,255,0.3);
}



/*DISENYO PARA PANTALLAS A PARTIR DE 1024px*/
@media (min-width:1200px){
  .menu{
    position: static;
    width:auto;
    height:auto;
    transform: translateX(0%);/*PARA QUE NO ESTE DESPLAZADO A LA IZQUIERDA*/
    float: right;/*PARA QUE SE DESPLAZE A LA DERECHA*/
    display: flex;/*PARA QUE APARESCAN UNO AL LADO DEL OTRO*/
  }

.menu a{
  border:none;
}

  .label-menu{
    display:none;/*PARA OCULTAR EL ICONO DE 3 RAYITAS*/
  }
}