/* ================================================================
   Variables
   ================================================================ */

: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: rgba(38, 38, 38, 0.05);
    --color-nav-background-hover: rgba(0, 0, 0, 0.1);
    --color-nav-background-overlay: rgba(19, 32, 48, 0.8);

    --xl-breakpoint: 1400px;
    --tablet-breakpoint: 1024px;
}


.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);
}

a {
    color: var(--color-darkprimary);
}

#site-main .sf-contentblock p, p {
    font-size: 1.125rem;
}
#site-main .sf-contentblock h1, h1 {
    font-size: 3rem;
    font-weight: 700;
    line-height: 3.25rem;
}
#site-main .sf-contentblock h2, h2, .title {
    font-size: 1.75rem;
    font-weight: 700;
}
.title {
    line-height: initial;
    color: var(--color-darkprimary)
}
#site-main .sf-contentblock h3, h3 {
    font-size: 1.25rem;
    font-weight: 700;
}
#site-main .sf-contentblock h5, h5 {
    font-size: 1.125rem;
    font-weight: 400;
    margin: unset;
}

@media (min-width: 1024px) {
    #site-main .sf-contentblock h1, h1 {
        font-size: 6rem;
        font-weight: 700;
        line-height: 6rem;
    }
    #site-main .sf-contentblock h2, h2, .title {
        font-size: 2.25rem;
        font-weight: 700;
    }
    #site-main .sf-contentblock h3, h3 {
        font-size: 1.875rem;
  }
    #site-main .sf-contentblock h5, h5 {
        font-size: 1.5rem;
    }
}