/***************************************************************************
* Topbar
****************************************************************************/
.topbar {
    color: var(--typo-color-headlines);
    background-color: #FFFFFF;
    box-shadow: 0 0 1rem rgba(0,0,0,0.1);
}

@media screen and (min-width:64em){
    .topbar {height: 6rem;}
    .topbar.scrolled {height: 5rem;}
}

/***************************************************************************
* Logo Columns
****************************************************************************/
.topbar .logo_column {
    margin-right: 5rem;
}
.topbar .logo_wrapper .svg_wrapper {
    width: 9rem;
}

/***************************************************************************
* Navigation Toggler
****************************************************************************/
.navigation_toggle_wrapper .navigation_toggle::before, 
.navigation_toggle_wrapper .navigation_toggle::after {
    height: 0.125rem;
}
.navigation_toggle_wrapper .navigation_toggle::before {
    box-shadow: 0 .6875rem 0 0 currentColor;
  }

/***************************************************************************
* Navigation Wrapper
****************************************************************************/
.navigation_wrapper {
    top: 4rem; bottom: 0; height: auto;
    background-color: var(--typo-color-light-grey);
    padding: 0;
}
@media screen and (max-width:63.875em){
    .topbar .navigation_wrapper {
        padding: 0;
    }
    .navigation_wrapper .menu_wrapper {
        overflow: visible;
        padding: 0;
    }
}

/***************************************************************************
* Menu
****************************************************************************/
.navigation_wrapper .menu a:hover,
.navigation_wrapper .menu a[aria-current="page"] {
	color: var(--typo-color-blue);
}
@media screen and (max-width:63.875em){
    .navigation_wrapper .menu a {
        padding: 0 2rem;
        margin: 1rem 0;
        position: relative;
    }
    .navigation_wrapper .menu li {
        position: relative;
    }

    .navigation_wrapper .menu li:after,
    .navigation_wrapper .menu li:before {
        content: '';
        width: auto;
        left: 0;
        right: 0;
        height: 1px;
        background-color: var(--typo-color-grey);
        position: absolute;
        top: 0;
    }
    .navigation_wrapper .menu li:not(:first-child)::after {
        content: none;
    }

    .navigation_wrapper .menu li:before {
        top: auto;
        bottom: 0;
    }
}