/*-----Menú responsive con subcategorías----*/


.barra {

    margin: 22px auto 0;
}

#menu {
    /*background: #cccccc;*/ /* color de la barra*/
    color: #fff; /*color texto de la barra*/
    height: 45px;
    /*border-bottom: 1px solid #e9e9e9;*/ /* borde inferior de la barra*/
    /*box-shadow: 0px 2px 7px #dadada;*/ /* sombra inferior de la barra*/
    width: 100%;
    /*z-index: 101;*/
}

    #menu ul, #menu li {
        margin: 0px auto;
        padding: 0 0;
        list-style: none;
    }

    #menu .iconos {
        float: right;
    }

    #menu li {
        float: left;
        display: inline;
        position: relative;
  /*fuente del texto */
        font-size: 12px;
    }

    #menu ul a {
        display: block;
        line-height: 45px;
        padding: 0 14px;
        text-decoration: uppercase;
        color: #fff; /*color del texto*/
        text-transform: uppercase; /*letras mayúsculas*/
        letter-spacing: 1.5px; /*espacio entre letras*/
    }

    #menu li a:hover {
        color: #fff; /*color del texto */
        background-color:#3c455d;
        border-radius:3px;
        text-decoration: none;
        /*-webkit-transition: all .1s ease-in-out;
        -moz-transition: all .1s ease-in-out;
        -ms-transition: all .1s ease-in-out;
        -o-transition: all .1s ease-in-out;
        transition: all .1s ease-in-out;
        background: #e9e9e9;*/ /*color del fondo de la categoría */
    }

    #menu input {
        display: none;
        margin: 0 0;
        padding: 0 0;
        width: 80px;
        height: 30px;
        opacity: 0;
        cursor: pointer;
    }

    #menu label {
  /*fuente del texto */
        font-size: 25px;
        font-weight: bold;
        display: none;
        width: 35px;
        height: 35px;
        line-height: 45px;
        text-align: center;
    }

        #menu label span {
      /*fuente del texto */
            font-size: 12px;
            position: absolute;
            left: 35px;
            text-transform: uppercase;
            font-weight: bold;
            line-height: 45px;
            letter-spacing: 0.5px;
        }

    #menu ul.menus {
        height: auto;
        overflow: hidden;
        width: 320px;
        background: #2d8d84; /*color del fondo del subcategorías */
        position: absolute;
        z-index: 99;
        display: none;
        /*border: 1px solid #e9e9e9;*/
    }

        #menu ul.menus li {
            display: block;
            width: 100%;
      /*fuente del texto */
            font-size: 12px;
            text-transform: uppercase;
            /*border-bottom: 1px solid #e9e9e9;*/
        }

            #menu ul.menus li:last-child {
                border-bottom: none;
            }

        #menu ul.menus a {
            color: #fff; /*color del  texto del subcategorías */
            line-height: 35px;
        }

    #menu li:hover ul.menus {
        display: block;
    }

    #menu ul.menus a:hover {
        background: #3c455d; /*color del  fondo del subcategorías */
        color: #fff; /*color del  texto del subcategorías */
        /*-webkit-transition: all .1s ease-in-out;
        -moz-transition: all .1s ease-in-out;
        -ms-transition: all .1s ease-in-out;
        -o-transition: all .1s ease-in-out;
        transition: all .1s ease-in-out;*/
    }

.iconos a {
    padding: 0 15px;
    height: 45px;
    display: inline-block;
}

    .iconos a:hover {
        background: #e9e9e9; /*color del fondo de la categoría*/
        color: #000000; /*color del icono*/
        -webkit-transition: all .1s ease-in-out;
        -moz-transition: all .1s ease-in-out;
        -ms-transition: all .1s ease-in-out;
        -o-transition: all .1s ease-in-out;
        transition: all .1s ease-in-out;
    }

#menu .fa {
    font-size: 14px;
    line-height: 45px;
    color: #333333; /*color del icono*/
}



@media screen and (max-width: 640px) {
    #menu {
        z-index: 101;
    }

        #menu ul {
            background:#3c455d; /*color del desplegable del menú móvil*/
            position: absolute;
            top: 100%;
            right: 0;
            left: 0;
            z-index: 3;
            height: auto;
            display: none;
        }

            #menu ul.menus {
                width: 100%;
                position: static;
                padding-left: 20px;
            }

        #menu li {
            display: block;
            float: none;
            width: auto;
      /*fuente del texto */
            font-size: 12px;
        }

        #menu ul a {
            display: block;
            line-height: 40px;
            padding: 0 14px;
        }

        #menu input, #menu label {
            position: absolute;
            /*top:85px;*/
            left: 0;
            display: block;
        }

        #menu input {
            z-index: 4;
        }

            #menu input:checked + label {
                color: #333333; /*color de las barras*/
            }

            #menu input:checked ~ ul {
                display: block;
                top:100px;
            }

    .barra {
        width: 95% !important;
    }
}

header {
    padding-top: 45px;
}
/*-----fin menú responsive-----*/