.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 .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s 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;} .topbar .logo_wrapper{ position: relative; z-index: 1010;}
.topbar .logo_wrapper .logo{
display: inline-block; height: 3rem; width: auto;
} .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{
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_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{ 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);
} .topbar .navigation_wrapper {
padding: 0 2rem;
}
}
@media screen and (min-width:64em){ .topbar{ padding: 0 4rem; } .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_wrapper .menu_wrapper{
padding: 0; overflow: visible;
}
}