/* ============================================== Variables ======================================== */
#nav2{
    /*Front color*/
    --color-white: rgba(255, 255, 255,1);
    --color-white-dark: rgba(225, 225, 225,1);
    --color-grey: rgba(125, 120, 120,1);
    --color-grey-dark: rgba(64, 64, 64,1);
    --color-black: rgba(05, 0, 0,1);
    /*Background color*/
    --bk-green: rgba(22, 82, 9,1);
    --bk-blue: rgba(90, 171, 255,1);
    /*Border*/
    --border-fine: 1px solid rgba(192, 192, 192,1);
}

/* ============================================== Nav2 =========================================== */
#nav2 {
    padding: 4px 10px;
}
#nav2 ul {
    list-style-type: none;
    margin-left: 0px;
    padding: 0px 0px 0px 0px!important;
}
#nav2 ul li {
    position: relative;
}
#nav2 ul li a {
    display: block;
    position: relative;
    color: var(--color-grey-dark2);
    border-bottom: var(--border-fine);
    text-decoration: none;
    /* font-size: 1.1em; */
    padding: 6px 30px 6px 10px;
    /* width: 90%; */
}

/* Botonera */
#nav2 ul li button {
    border-radius: 0.25em;
    /* height: 1.4rem; */
    position: absolute;
    top: 0em;
    right: 0px;
    /* min-width: 0 !important; */
    cursor: pointer;
    background: transparent;
    border: 0;
    /* top: 4px; */
    /* width: 1.5rem; */
    z-index: 9;
    min-width: auto;
    padding: 5px 10px 0px 10px;
}
#nav2 ul li button:hover,
#nav2 ul li button:focus {
    background: var(--color-grey-dark);
    color: #fff;
}
#nav2 ul li button:hover:after,
#nav2 ul li button:focus:after {
    color: var(--color-white);
}
#nav2 ul li button:after {
    display: inline-block;
    vertical-align: top;
    content: "";
    width: 8px;
    height: 8px;
    border-top: 0;
    border-right: 2px solid;
    border-bottom: 2px solid;
    border-left: 0;
    transform: rotate(45deg);
    position: relative;
    /* top: -2px; */
    /* right: 0px; */
    color: var(--color-grey-dark);
    font-weight: 800;
}
#nav2 ul ul li button:after {
    display: inline-block;
    vertical-align: top;
    content: "";
    width: 8px;
    height: 8px;
    border-top: 0;
    border-right: 2px solid;
    border-bottom: 2px solid;
    border-left: 0;
    transform: rotate(315deg);
    position: relative;
    top: 3px;
    right: 1px;
    font-weight: 800;
}

/* Estados */
#nav2 ul li a:hover,
#nav2 ul li a:focus {
    color: var(--color-white) !important;
    background-color: var(--color-grey-dark);
    border-radius: 0px;
}
#nav2 ul li a[aria-current] {
    color: var(--color-white);
    background-color: var(--bk-green);
}
#nav2 ul li a[aria-current]:hover {
    color: var(--color-white);
    background-color: var(--bk-green);
}
#nav2>ul>li>a[aria-current]+button {
        background-color: var(--bk-green);
        border-radius: 0;
}
#nav2>ul>li>a[aria-current]+button:after {
        color: var(--color-white)!important;
}
#nav2 ul li a:hover+button:after,
#nav2 ul li a:focus+button:after {
    color: var(--color-white);
}

/* Ancestros */
#nav2 .miAncestro>a {
    color: var(--color-white);
    background-color: var(--bk-green);
}
#nav2 .miAncestro>a:hover {
    color: var(--color-white);
    background-color: var(--bk-green);
}
#nav2 .miAncestro>a+button:after,
#nav2 ul li a:focus+button:after {
    color: var(--color-white) !important;
    background: transparent;
}


/* Submenús */
#nav2 ul li ul li a {
    background-color: var(--color-white-dark);
    padding-left: 34px;
    font-size: 0.9rem;
}
#nav2 ul li ul li ul li a {
    padding-left: 54px;
}
#nav2 ul li ul li ul li ul li a {
    padding-left: 90px;
}
#nav2>ul>li>ul {
    display: none;
}
#nav2 ul li a.madRoot {
    color: var(--color-white);
    background-color: var(--bk-green);
}

/* Hamburguer-Button */
#nav2 .madHamburguer {
    background-color: transparent;
    font-weight: bold;
    min-width: 0 !important;
    font-size: 1.25em;
    width: 2.5em;
    height: 2.5em;
    border-radius: 0;
    color: var(--color-white);
    border: 1px solid var(--color-white);
    background-color: transparent !important;
    margin: .5rem;
    padding: 0px;
    font-size: 1rem;
    cursor: pointer;
    border: 1px solid var(--color-grey-dark);
    color: var(--color-grey-dark);
}

/* Menú Hamburguesa */
#nav2 .madHamburguer[aria-expanded="false"]~ul {
    display: none;
}
#nav2 .madHamburguer[aria-expanded="true"]~ul {
    display: block;
}

/* Apertura/cierre submenus */
#nav2 ul li button[aria-expanded="false"]~ul {
    display: none;
}

#nav2 ul li button[aria-expanded="true"]~ul {
    display: block;
}


/* ****************************** RWD ********************************* */
@media only screen and (min-width: 992px) {

    /* hamburguer */
    #nav2 .madHamburguer {
        display: none;
    }
    #nav2 {
    padding: 0px;
    }
    #nav2>ul {
        display: flex !important;
        padding: 0px;
        margin-top: 0em;
    }
    #nav2>ul>li:last-child {
        border-right: 0px;
    }

    #nav2 ul li button {
        border-radius: 0px;
        width: auto;
        height: 100%;
        position: initial;
        padding: 0px 15px 0px 10px;
        margin: 0;
    }
    #nav2>ul>li>a+button {
        background: var(--bk-blue);
        color: var(--color-black);
        border: 0px;
    }
    #nav2 ul ul li button {
        border-radius: 0.25em;
        height: 1.4rem;
        position: absolute;
        top: 0em;
        right: -1px;
        min-width: 0 !important;
        cursor: pointer;
        background: transparent;
        border: 0;
        top: 0px;
        width: 1.5rem;
        height: 100%;
    }

    #nav2 ul ul li button {
        position: absolute;
        background: transparent;
        border: 0;
        color: var(--color-black);
    }

    #nav2 ul ul li button:after {
        top: 1px;
    }

    #nav2 ul li button:after {
        top: 3px;
        left: 2px;
    }
     #nav2 ul ul li button:after {
        top: 7px;
        left: -7px;
    }

    #nav2 ul li a {
        background-color: var(--bk-blue);
    }

    #nav2 ul li a:hover+button,
    #nav2 ul li a:focus+button {
        background: var(--color-grey-dark);
    }

    #nav2>ul>li>a[aria-current] {
        color: var(--color-white);
        background-color: var(--bk-green);
    }

    
    #nav2>ul>li>a[aria-current]:hover {
        background-color: var(--bk-green);
        border-radius: 0;
    }

    #nav2 ul li li a:hover+button,
    #nav2 ul li li a:focus+button {
        background: transparent;
    }

    #nav2 ul li a:hover,
    #nav2 ul li a:focus {
        color: var(--color-white) !important;
        background-color: var(--color-grey-dark);
        border-top-right-radius: 0;
        border-bottom-right-radius: 0px;
    }

    #nav2 .miAncestro>a+button {
        color: var(--color-white) !important;
        background-color: var(--bk-green);
    }

    #nav2 .miAncestro>a:hover+button {
        color: var(--color-white) !important;
        background-color: var(--bk-green);
    }

    #nav2 .miAncestro li>a {
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
    }
    #nav2>ul>li:last-child>a {
    border-bottom: none !important;
    }

    #nav2>ul>li {
        width: 140px;
        flex-grow: 1;
        position: relative;
        margin: 0;
        background-color: #5aabff;
        text-align: center;
        display: flex;
        align-items: stretch;
        justify-content: start;
        left: 0;
        text-align: center;
        border-right: 1px solid #cbc2c2;
    }

    #nav2>ul>li>a {
        border-bottom: none;
        width: 100%;
        font-size: .9em;
        color: var(--color-black);
        padding: 4px 0px 8px 10px;
        border-radius: 0;
    }

    #nav2 ul li ul {
        position: absolute;
        width: 100%;
        z-index: 1;
        top: 101%;
        left: 0;
    }

    #nav2 ul li ul li {
        position: relative;
    }

    #nav2 ul li ul li ul {
        top: 0px;
        left: 101%;
        display: none;
    }

    #nav2 ul li:last-child ul li ul {
        left: -101%;
    }

    #nav2 ul li ul li a {
        padding: 5px 35px 5px 10px !important;
        color: var(--color-grey-dark);
        background-color: rgb(239, 239, 239);
        border: 1px solid rgb(228, 228, 228);
        box-shadow: 2px 2px 3px rgba(128, 128, 128, 0.6);
        text-align: left;
        font-size: .85rem;
    }

    #nav2 ul li ul li a:hover,
    #nav2 ul li ul li a:focus {
        border-radius: 0px !important;
    }

    #nav2 ul li ul li:last-child a {
        border-bottom: none;
    }
}

/******************************** IE11 */

@media all and (-ms-high-contrast:none) {
    #nav2>ul>li {
        background-color: rgb(90, 171, 255);
        border: 1px solid rgb(90, 171, 255);
    }
    

    #nav2 ul li a {
        color: rgb(255, 255, 255);
        padding: 4px 10px 8px 10px;
        font-size:1.3em;
    }

    #nav2 ul ul li {
        background-color: rgb(90, 171, 255);
    }

    #nav2 .miSeleccionado a {
        background: rgb(98, 108, 98) !important;
    }

    #nav2 ul li:hover>ul {
        display: block !important;
    }

    #nav2 ul li a:hover,
    #nav2 ul li a:focus {
        color: rgb(0, 0, 0);
        background-color: rgb(255, 210, 0);
    }

    #nav2 ul li button:active,
    #nav2 ul li button:hover,
    #nav2 ul li button:focus {
        background-color: rgb(255, 210, 0);
        color: rgb(0, 0, 0);
    }

    #nav2 ul ul li button:after {
        top: 5px;
        right: 2px;
    }
}