/****************************************************************************
 * Topbar Container
 ****************************************************************************/
.topbar{
    position: fixed; left: 0; right: 0; top: 0; bottom: auto;
    height: 4rem; width: 100%; margin: 0 auto;
    padding: 0 1rem; z-index: 1000;
    box-shadow: 0 0 1rem rgba(0,0,0,0.25);
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
    background-color: rgba(255,255,255,0.9);
}

.topbar > .row{ height: 100%; position: relative; }
.topbar .columns.row{ position: relative; }
.topbar .column,
.topbar .columns{ padding-top: 0; padding-bottom: 0;}

@media screen and (min-width:40em){
    .topbar{ padding: 0 2rem; }
}

@media screen and (min-width:64em){
    .topbar{ padding: 0 4rem; }
}


/****************************************************************************
 * Logo
 *
 * PNG => .logo_wrapper > img.logo
 * SVG => .logo_wrapper figure.logo.figure .svg_wrapper.data_ratio svg
 ****************************************************************************/
.logo_wrapper{ 
    position: relative;
    padding: 0;
    display: block;
}
.topbar .logo_wrapper {
    z-index: 1010;
}

.logo_wrapper picture.data_ratio {
    height: 3rem; 
    width: 7rem;
}
.logo_wrapper picture.data_ratio:before {
    content: none;
}
.logo_wrapper picture.data_ratio img {
    object-fit: contain;
    object-position: 0 50%;
}

.logo_wrapper .svg_wrapper {
    position: relative;
    width: 7rem;
}
.logo_wrapper  > .logo .svg_wrapper.data_ratio svg {
    -webkit-transform: translate(0,-50%);
    -moz-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    -o-transform: translate(0,-50%);
    transform: translate(0,-50%);
    left: 0;
}



/****************************************************************************
 * Toggler
 ****************************************************************************/
.navigation_toggle_wrapper {
    position: relative; z-index: 1010;
}
.navigation_toggle_wrapper .navigation_toggle{
    position: relative; width: 2.25rem; height: 1.5rem;
    text-align: center; display: block; cursor: pointer;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}

.navigation_toggle_wrapper .navigation_toggle:before,
.navigation_toggle_wrapper .navigation_toggle:after{
    position: absolute; left: 50%; top: auto; bottom: auto; margin: 0 auto;
    width: 2.25rem; height: .25rem; background-color: currentColor; content: '';
    border-radius: 0.25rem;
    -webkit-transform: translateY(0) translateX(-50%) rotate(0);
    -moz-transform: translateY(0) translateX(-50%) rotate(0);
    -ms-transform: translateY(0) translateX(-50%) rotate(0);
    -o-transform: translateY(0) translateX(-50%) rotate(0);
    transform: translateY(0) translateX(-50%) rotate(0);
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}

.navigation_toggle_wrapper .navigation_toggle:before{
    top: 0; box-shadow: 0 .625rem 0 0 currentColor;
}
.navigation_toggle_wrapper .navigation_toggle:after{
    bottom: 0;
}


.nav_opened .navigation_toggle_wrapper .navigation_toggle:before{
    -webkit-transform: translateY(-50%) translateX(-50%) rotate(-45deg);
    -moz-transform: translateY(-50%) translateX(-50%) rotate(-45deg);
    -ms-transform: translateY(-50%) translateX(-50%) rotate(-45deg);
    -o-transform: translateY(-50%) translateX(-50%) rotate(-45deg);
    transform: translateY(-50%) translateX(-50%) rotate(-45deg);
    top: 50%; box-shadow: 0 0 0 0 transparent;
}

.nav_opened .navigation_toggle_wrapper .navigation_toggle:after{
    -webkit-transform: translateY(50%) translateX(-50%) rotate(45deg);
    -moz-transform: translateY(50%) translateX(-50%) rotate(45deg);
    -ms-transform: translateY(50%) translateX(-50%) rotate(45deg);
    -o-transform: translateY(50%) translateX(-50%) rotate(45deg);
    transform: translateY(50%) translateX(-50%) rotate(45deg);
    bottom: 50%;
}

@media screen and (min-width:64em){
    .large_no_hamburger .navigation_toggle_wrapper {
        display: none;
    }
}


/****************************************************************************
 * Navigation-Wrapper
 ****************************************************************************/
.navigation_wrapper{
    position: fixed; right: auto; left: 100%; top: 0; 
    height: 100%; height: 100vh; 
    width: 100%; z-index: 1001; color: inherit;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -ms-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
    background-color: #FFFFFF;
}
.topbar .navigation_wrapper {
    padding: 2rem 1rem;
}
.nav_opened .navigation_wrapper {
    left: 0;
}
.navigation_toggle_wrapper:focus-within + .navigation_wrapper, 
.navigation_wrapper:focus-within { 
    left: 0; 
}

@media screen and (min-width:40em){
    .topbar .navigation_wrapper {
        padding: 2rem 2rem;
    }
}

@media screen and (min-width:64em){
    .topbar .navigation_wrapper {
        padding: 2rem 4rem;
    }

    .large_no_hamburger .navigation_wrapper,
    .nav_opened .large_no_hamburger  .navigation_wrapper{
        position: relative; left: auto; right: auto; top: auto; bottom: auto;
        background-color: transparent; height: auto;
        -webkit-transition: none;
        -moz-transition: none;
        -ms-transition: none;
        -o-transition: none;
        transition: none;
    }
    .topbar .large_no_hamburger  .navigation_wrapper {
        padding: 0 1rem;
    }
}



/****************************************************************************
 * Menu Wrapper
 ****************************************************************************/
.navigation_wrapper .menu_wrapper{
    display: block; width: 100%; height: 100%;
    position: relative; z-index: 0; padding: 6rem 0.25rem 4rem;
    overflow-y: auto; margin: 0 auto; 
}

@media screen and (min-width:64em){
    .large_no_hamburger .navigation_wrapper .menu_wrapper{
        padding: 0; overflow: visible;
    }
}


/****************************************************************************
 * Menu
 ****************************************************************************/
.navigation_wrapper .menu {
    margin: 0;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}
.navigation_wrapper .menu a {
    position: relative;
    padding: 0 0.75rem;
	line-height: 2.813rem;
}


@media screen and (min-width:64em){
    .large_no_hamburger .navigation_wrapper .menu {
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
    }
}