/****************************************************************************
 * 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;}


/****************************************************************************
 * Logo
 ****************************************************************************/
.topbar .logo_wrapper{ position: relative; z-index: 1010;}
.topbar .logo_wrapper .logo{
    display: inline-block; height: 3rem; width: auto;
}

/****************************************************************************
 * 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; 
    -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%;
}


/****************************************************************************
 * 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;
}
.nav_opened .navigation_wrapper{ left: 0; }


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


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

    .topbar .stoerer {
        font-size: 0.875rem;
        -webkit-transform: translate(0,-25%) rotate(10deg);
        -moz-transform: translate(0,-25%) rotate(10deg);
        -ms-transform: translate(0,-25%) rotate(10deg);
        -o-transform: translate(0,-25%) rotate(10deg);
        transform: translate(0,-25%) rotate(10deg);
    }

    /****************************************************************************
    * Navigation-Wrapper
    ****************************************************************************/
    .topbar .navigation_wrapper {
        padding: 2rem 3rem;
    }
}


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

    
    /****************************************************************************
     * Navigation-Wrapper
     ****************************************************************************/
    .navigation_wrapper,
    .nav_opened .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 .navigation_wrapper {
        padding: 0 1rem;
    }
    
    /****************************************************************************
     * Navigation-Menu
     ****************************************************************************/
    .navigation_wrapper .menu_wrapper{
        padding: 0; overflow: visible;
    }

}