:root {
    --color-primary: #00a1e1;
    --color-green: #87bc1e;
    --color-secondary: #fd8204;
    --color-darksecondary: #bb6611;
    --color-purple: #5e367d;
    --color-yellow: #ffca13;
    --color-darkprimary: #3178b6;
    --color-darkyellow: #e1b22b;
    --color-salmon: #e38972;
    --color-greenblue: #669694;

    --color-fg: black;
    --color-bg: white;
  
    --color-nav-background: #808080;
    --color-nav-background-hover: #5a5a5a;
    --color-nav-background-overlay: rgba(128, 128, 128, 0.8);
}

.constituent-nav-wrapper {
    background: var(--color-nav-background);
}

@media (min-width: 60em) {
    .constituent-nav-wrapper {
        background: none;
    }
}

.nav-bar > ul > li > a {
    background: var(--color-nav-background);
}

.nav-bar > ul > li > a:hover,
.nav-bar > ul > li > a:focus {
    background: var(--color-nav-background-hover);
}

.nav-bar > ul > li ul {
    background: var(--color-nav-background-overlay);
    transition: all 0.4s ease-in-out;
}

.nav-bar > ul > li ul a:hover,
.nav-bar > ul > li ul a:focus {
    background: var(--color-nav-background-hover);
}

.cm-menu .expander-wrap a:not(.has-sub) {
    background: var(--color-nav-background);
}

.cm-menu .expander-wrap a:not(.has-sub):hover,
.cm-menu .expander-wrap a:not(.has-sub):focus {
    background: var(--color-nav-background-hover);
}

.cm-menu .expander-wrap a.has-sub span {
    background: var(--color-nav-background);
}

.cm-menu .expander-wrap a.has-sub:hover span,
.cm-menu .expander-wrap a.has-sub:focus span {
    background: var(--color-nav-background-hover);
}