:root {
    --menu-item-spacing: 20px;
    --menu-item-min-width: 175px;

}

.chevron {
    color: #b0b0b0;
}

.nav {
    overflow: hidden;
}
.nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav a, .nav div {
    cursor: pointer;
    text-decoration: none;
    color: var(--brand-nocturno) !important;
    display: block;
    width: fit-content;
    min-width: 100%;
    line-height: 30px;
    text-align: center;
    padding: calc(var(--menu-item-spacing)/4)
    var(--menu-item-spacing)
    calc(var(--menu-item-spacing)/4)
    var(--menu-item-spacing);
}

.nav > ul > li > a {

    width: 85px;
    height: 85px;
    border-radius: 50%;
    background-color: navy !important;
    content-visibility: hidden;
}

.nav > ul > li {
    margin: 10px;
}



.nav ul li ul a {
    padding: calc(var(--menu-item-spacing) / 4) calc(var(--menu-item-spacing) * 2.5) calc(var(--menu-item-spacing) / 4) calc(var(--menu-item-spacing) * 2.5);
}

.nav li:hover {
    a:visited, a:link, div {
        color: white !important;
    }

    ul li a:visited, ul li a:link {
        color: black !important;
    }

    ul li {
        a:hover {
            color: white !important;
            background: black !important;
        }
    }
}

.nav ul li {
    float: left;
    position: relative;
}


.nav ul li ul {
    position: absolute;
    left: 0;
    top: 40px;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.15s, opacity .25s;
    border: 1px black solid;
    z-index: 1;
}

@media (min-width: 992px) {

    .nav {
        height: 40px;
        overflow: visible;
    }

    .nav >ul, .nav >li {
        border-top-left-radius: 10px;
    }

    .nav > ul > li:first-of-type {
        margin-left: 10px !important;
    }

    .nav ul li:hover {
        background: var(--brand-dark);
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        /*a {color: white !important};*/
        /*ul li a { color: white !important;}*/
    }

    .nav > ul > li > a {

            border-radius: 0;
            background-color: transparent !important;
            height: initial;
            width: auto;
            content-visibility: visible;
        }
    .nav > ul > li {
         margin: 0 !important;
        }

    .nav ul li ul a:link {
        background: var(--brand-light);
    }

    .nav ul li ul a:hover {
        border-radius: 0;
    }


    .nav ul li:hover > ul {
        visibility: visible;
        opacity: 1;
    }

    .nav ul li ul li, .nav ul li ul li ul li {
        float: none;
        background: #eee;
        margin-top: 0;
        width: fit-content;
        min-width: 100%;
        text-wrap: nowrap;
    }

    .nav ul li ul li ul, .nav ul li ul li ul li ul {
        position: absolute;
        top: 15px;
        left: calc(100% - (var(--menu-item-spacing) / 2));
        visibility: hidden;
        width: fit-content;
        min-width: 100%;
        opacity: 0;
        transition: visibility 0.15s, opacity .3s;
        z-index: 2;
    }

}