:root {
    --color-nav-bordered-a: var(--ae-color-orange);
    --color-nav-bordered-b: var(--ae-color-blue);
    --color-nav-bordered-c: var(--ae-color-maroon);
    --color-nav-bordered-marked: #fff9;
    --color-nav-box-shadow: #0003;
    --color-nav-hover-bg: #eee;
    --color-nav-primary-menu-text: var(--ae-color-orange);
    --color-nav-primary-menu-marked-bg-a: var(--ae-color-orange);
    --color-nav-primary-menu-marked-bg-b: var(--ae-color-blue);
    --color-nav-primary-menu-marked-bg-c: var(--ae-color-maroon);
    --color-nav-primary-menu-marked-text: white;
    --color-nav-top-start: var(--ae-color-orange);
    --color-nav-top-end: var(--ae-color-orange-l);
    --color-nav-top-text: white;
    --color-nav-link-marked-bg: var(--ae-color-orange-l);
    --color-nav-link-marked-text: white;
    --color-nav-mobile-rule: black;
}

/* ----- top nav ----- */
.top-nav {
    background: linear-gradient(to right, var(--color-nav-top-start) 0%, var(--color-nav-top-end) 50%);
    padding: 0;
}
.top-nav .nav-link { color: var(--color-nav-top-text); padding: 0 .5rem; }

/* ----- primary nav ----- */
.nav-primary { color: var(--color-nav-primary-menu-text); }
.nav-primary .menu { position: relative; cursor: pointer; padding: 5px 0; }
.nav-primary .menu:hover, .nav-primary .menu.expanded { background: var(--color-nav-hover-bg); }
.nav-primary .menu.nav-marked {
    background: #666;
    color: var(--color-nav-primary-menu-marked-text);
}
.nav-primary .menu.nav-marked.nav-marked-a { background: var(--color-nav-primary-menu-marked-bg-a); }
.nav-primary .menu.nav-marked.nav-marked-b { background: var(--color-nav-primary-menu-marked-bg-b); }
.nav-primary .menu.nav-marked.nav-marked-c { background: var(--color-nav-primary-menu-marked-bg-c); }
.nav-primary .collapse, .nav-primary .collapsing {
    background: white;
    box-shadow: 0 4px 5px var(--color-nav-box-shadow);
    position: absolute;
    margin-top: 1px;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 2;
}
.nav-primary a { display: block; padding: 10px; text-decoration: none; }
.nav-primary a:hover { background: var(--color-nav-hover-bg); text-decoration: none; }
x.nav-primary a.nav-marked {
    background: var(--color-nav-link-marked-bg);
    color: var(--color-nav-link-marked-text);
}

/* ----- bordered nav links ----- */
.nav-bordered a { display: block; position: relative; }
.nav-bordered a:before {
    border: 1px solid transparent;
    bottom: 5px;
    content: "";
    display: block;
    left: 15px;
    position: absolute;
    right: 15px;
    top: 5px;
}
.nav-bordered.nav-bordered-a a:before { border-color: var(--color-nav-bordered-a); }
.nav-bordered.nav-bordered-b a:before { border-color: var(--color-nav-bordered-b); }
.nav-bordered.nav-bordered-c a:before { border-color: var(--color-nav-bordered-c); }
x.nav-bordered a.nav-marked:before { border-color: var(--color-nav-bordered-marked); }

/* ----- mobile primary nav ----- */
#nav-primary-mobile {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
}
.mobile-toggle {
    cursor: pointer;
    font-size: 2em;
    line-height: 40px;
    left: 20px;
    position: absolute;
    text-align: center;
    top: 40px;
    width: 40px;
}
#mobile-menu {
    background: white;
    box-shadow: 0 0 15px 2px var(--color-nav-box-shadow);
    cursor: pointer;
    display: none;
    min-height: 100%;
    left: 0;
    padding-top: 40px;
    position: absolute;
    top: 0;
    z-index: 10;
}
#mobile-menu .mobile-close {
    font-size: 2em;
    width: 40px;
    line-height: 40px;
    text-align: center;
    position: absolute;
    right: 0;
    top: 0;
}
#mobile-menu a { display: block; }
#mobile-menu > div { border-top: 1px solid var(--color-nav-mobile-rule); font-weight: bold; margin-top: 10px; }
#mobile-menu > div:first-of-type { border-top: none; }

.aux-toggle {
    cursor: pointer;
    padding: 5px;
    position: absolute;
    right: 20px;
    top: 40px;
}
.aux-toggle img { width: 30px; }

/* ----- home menu ----- */
.home-menu { position: relative; text-align: center; }
.home-menu .btn { padding-bottom: 12px; padding-top: 12px; }
.home-menu-items {
    box-shadow: 0 4px 5px var(--color-nav-box-shadow);
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
}
.home-menu-items a { border: none; }
.home-menu-items a:hover { background: var(--color-nav-hover-bg); }

.home-menu-mobile a { border: none; }

/* ----- nav flag new ----- */
.home-menu-mobile .nav-new:after,
.home-menu-items .nav-new:after,
.nav-primary .nav-new:after {
    background-repeat: no-repeat;
    content: "";
    display: block;
    height: 30px;
    left: 5px;
    position: absolute;
    top: 9px;
    width: 60px;
}
.home-menu-items .nav-new:after { top: 11px; }
.home-menu-mobile .nav-new:after { top: 7px; }
.nav-new.nav-new-en:after { background-image: url(/rsrc/icon/nav-flag-new-en.svg); }
.nav-new.nav-new-es:after { background-image: url(/rsrc/icon/nav-flag-new-es.svg); }

/* nav-tabs-ads */
.nav-tabs-ads {
    border-width: 0;
    & .nav-link {
        background-color: var(--ae-color-blue-very-pale);
        color: var(--ae-color-blue);
        margin: 1px;
        width: 100%;
        &:hover { background-color: var(--ae-color-blue-pale); }
        &.active:hover { background-color: inherit; }
    }
}
@media (min-width:576px) {
    .nav-tabs-ads {
        border-width: 1px;
        & .nav-link {
            margin: 1px 1px -1px 1px;
            width: auto;
        }
    }
}