.section-navigation {
    margin: 40px 0 80px;
    padding: 0 0 0 110px;
}

.section-navigation-subheader {
    font-family: 'Red Hat Display', sans-serif;
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.25;
    letter-spacing: normal;
    color: #282728;
    font-size: 27px;
    margin-bottom: 32px;
}

ul.section-navigation-menu,
ul.section-navigation-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.section-navigation-menu li {
    border-bottom: solid 1px var(--pale-sky-blue);
    line-height: 2.5;
    margin: 0;
    padding: 0;
}


/*
Side-nav can technically have child-lists. Specifically, the /news/ page does this.
The code below uses a bottom border for all root items. For all child menus, however,
it uses a top border instead. It always turns the last border off for root items,
and the first border off for child items UNLESS it is an only child, in which case it
is kept.
*/
ul.section-navigation-menu li li {
    border-top: solid 1px var(--pale-sky-blue);
}

ul.section-navigation-menu li:last-child {
    border-bottom: none;
    border-top: none;
}

ul.section-navigation-menu li li:only-child {
    border-top: solid 1px var(--pale-sky-blue);
}

ul.section-navigation-menu li a {
    display: block;
    font-family: 'Red Hat Display', sans-serif;
    font-size: 18px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #282728;
    margin: 8px 0;
}

ul.section-navigation-menu li.current-cat > a,
ul.section-navigation-menu li.current_page_item > a {
    font-weight: bold;
}

ul.section-navigation-menu li a svg {
    margin-left: 10px;
    color: #adadad;
    height: 15px;
    width: 15px;
    vertical-align: baseline;
}

ul.section-navigation-menu li a:hover {
    opacity: 0.75;
    text-decoration: underline;
}

@media screen and (max-width: 767px) {
    .section-navigation[data-role=section-nav-group] {
        display: none;
    }
}