/****************************************************************************
 * Wrapper
 ****************************************************************************/
.navigation_wrapper,
.navigation_wrapper .navigation_toggle{
    -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;
}

/****************************************************************************
 * Wrapper
 ****************************************************************************/
.navigation_wrapper{
    position: fixed; right: auto; left: 100%; top: 0; height: 100%; height: 100vh;
    width: 100%; background-color: #FFFFFF; z-index: 1001; color: inherit;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}
.navigation_wrapper.opened{ left: 0; }


/****************************************************************************
 * Toggler
 ****************************************************************************/
.navigation_toggle_wrapper .navigation_toggle,
.navigation_toggle_wrapper .navigation_toggle:visited{
    position: absolute; right: 100%; top: .5rem; z-index: 10;
    height: 3rem; width: 3rem; line-height: 3rem; font-size: 2rem;
    display: block; margin-right: 1.625rem;
    text-align: center;
}
.opened .navigation_toggle_wrapper .navigation_toggle{ right: 0; }

.navigation_toggle_wrapper .navigation_toggle:before,
.navigation_toggle_wrapper .navigation_toggle:after{
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
    margin: 0 auto;
}
.navigation_toggle_wrapper .navigation_toggle:before{
    position: absolute;
    left: 0; right: 0; top: 50%;
    content: '';display: block;
    height: 1.5rem; width: 2.5rem;
    border-top: 4px solid #7F7F7F;
    border-bottom: 4px solid #7F7F7F;
    border-top-color: currentColor ;
    border-bottom-color: currentColor ;
}
.navigation_toggle_wrapper .navigation_toggle:after{
    position: absolute;
    left: 0; right: 0; top: 50%;
    content: '';display: block;
    height: 0; width: 2.5rem;
    background-color: #7F7F7F;
    border-top: 2px solid #7F7F7F;
    border-bottom: 2px solid #7F7F7F;
    background-color:currentColor;
    border-top-color: currentColor ;
    border-bottom-color: currentColor ;
}
.navigation_wrapper.opened .navigation_toggle:before{
    -webkit-transform: translateY(-50%) rotate(45deg);
    -moz-transform: translateY(-50%) rotate(45deg);
    -ms-transform: translateY(-50%) rotate(45deg);
    -o-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
    border-bottom-width: 2px;
    border-top-width: 2px;
    height: 0;
}
.navigation_wrapper.opened .navigation_toggle:after{
    -webkit-transform: translateY(-50%) rotate(-45deg);
    -moz-transform: translateY(-50%) rotate(-45deg);
    -ms-transform: translateY(-50%) rotate(-45deg);
    -o-transform: translateY(-50%) rotate(-45deg);
    transform: translateY(-50%) rotate(-45deg);
}


/****************************************************************************
 * Nav-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_wrapper .menu{
    display: block; padding: 0; margin: 0;
    text-align: center;
}

.navigation_wrapper .menu_wrapper .menu li{
    display: block; padding: .25em; line-height: 1;
}
.navigation_wrapper .menu_wrapper .menu li a{
    display: inline-block; padding: 0;
    line-height: 1.2;
}
.navigation_wrapper .menu_wrapper .menu li ul{
    margin: 0; padding: 
}
.navigation_wrapper .menu_wrapper .menu > li{
    font-size: 1.75rem;
}
.navigation_wrapper .menu_wrapper .menu > li li{
    font-size: 0.75em;
}

@media screen and (min-width: 40em){
    .navigation_toggle_wrapper .navigation_toggle,
    .navigation_toggle_wrapper .navigation_toggle:visited{
        margin-right: 2.9375rem
    }
}



@media screen and (min-width: 64em){
    .navigation_wrapper,
    .navigation_wrapper.opened{
        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_wrapper .menu_wrapper{
        padding: 0; overflow: visible;
    }
    .navigation_wrapper .menu_wrapper .menu{
        text-align: right;
    }
    
    .navigation_wrapper .menu_wrapper .menu > li,
    .navigation_wrapper .menu_wrapper .menu > li li{
        font-size: 1rem; position: relative;
    }
    
    .navigation_wrapper .menu_wrapper .menu > li{
        display: inline-block; padding: 1rem .5rem;
    }
    .navigation_wrapper .menu_wrapper .menu > li li{
        display: block;
    }
    
    .navigation_wrapper .menu_wrapper .menu li ul{
        position: absolute; opacity: 0; visibility: hidden;
        background-color: #DFDFDF; text-align: left;
    }
    .navigation_wrapper .menu_wrapper .menu li:hover > ul,
    .navigation_wrapper .menu_wrapper .menu li:focus > ul,
    .navigation_wrapper .menu_wrapper .menu li > a:hover + ul,
    .navigation_wrapper .menu_wrapper .menu li > a:focus + ul{
        opacity: 1; visibility: visible;
    }
    .navigation_wrapper .menu_wrapper .menu > li > ul{
        left: 0; top: 100%;
    }
    
}