/****************************************************************************
 * 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;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
    background-color: #333333;
}
.topbar *{
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none;    
}
.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: 3em; height: 2em; line-height: 2em; font-size: 1rem;
    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: 3em; height: .25em; background-color: currentColor; content: '';
    -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 .8125em 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: #333333;
}
.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;
}
.navigation_wrapper .menu a{
    padding: .7rem 1rem; position: relative;
}


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


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

}