/*inicio menu*/
.select {
	border-bottom: 7px solid #fb0000;
}
.contenedor-menu {
  /*OJO: No declaramos altura definida*/
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
	border-top: 1px dashed #eee;
}
#btn-menu {
    display: none;
}
.contenedor-menu label {
    font-size: 26px;
    color: #1A2F5C;
    cursor: pointer;
    padding-top: 5px; /*para centrar el icono en la altura, ya que el contenedor del menu no tiene altura declarada*/
    display: none;
}
.menu ul {
    background: #fff;
    display: flex;
    list-style: none;
}
.menu ul ul {
    display: none;
}
.menu a {
  font-size: 0.9em;
    padding: 7px 15px; /*determina el alto y ancho del boton*/
    color: #1A2F5C;
    transition: all 0.6s;
  border-right: 1px solid rgba(255,255,255,0.2);
}
.menu a:hover {
    background: #FB0000;
  color: #fff;
}
.menu a span {
    margin-left: 10px; /*para separar un poco el icono del texto*/
}
/*estilos del submenu1*/
.submenu1:hover ul {
    display: block;
    position: absolute;
}
.submenu1 ul a {
    padding: 10px 50px;
}
.submenu1 ul a span {
    position: absolute;
    left: 10px;
    display: none;
    }
.submenu1 ul a:hover span {
    display: inline-block;
    }
.submenu1 ul li {
    border-bottom: 1px solid rgba(255,255,255,.2);
}

/*    ocultar submenu, el cual tiene el evento "click" en submenu.js y que origina conficto en pantallas grandes */
    .submenu {
        display: none;
    }


/*ESTILOS RESPONSIVE WEB DESIGN*/

@media (max-width: 768px) {
/*    ocultar submenu1   */
    .submenu1 {
        display: none;
    }
    
    .contenedor-menu label {
        display: block;
    }

/*activar submenu*/
    .submenu {
        display: block;
    }
    .menu {
        position: absolute;
        top: 210px;
        left: 0;
        width: 95%;
        transform: translateX(-100%);
        transition: all 0.4s;
    }
.menu a {
    padding: 10px 40px; /*determina el alto y ancho del boton*/
    border-bottom: 1px dashed rgba(0,0,0,0.1);
}
    #btn-menu:checked ~ .menu {
        transform: translateX(0%);
    }
    .menu ul {
        display: block;
        background: #fff;

    }
    .menu ul li {
        border-bottom: 1px solid rgba(255,255,255,.1);
    }
    .menu ul li:hover ul {
        display: none;
        position: static;
    }
/*estilos submenu*/
    .submenu a span {
        position: absolute;
        right: 10px;
    }
    .submenu ul a span {
        display: none;
        left: 10px;
    }
    .submenu ul {
        background: rgba(0,0,0,.1);
    }
    .submenu ul a {
        padding: 7px 0 7px 50px ;
    }
    .submenu ul a:hover span {
        display: inline-block;
    }

}