nav#display-menu {
    background: #222222;
    border-left: .0625em solid #222222;
    font-size: .8em;
    margin-right: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: 25em;
    z-index: 99;
}

.admin-bar nav#display-menu {
    top: 32px;
}

nav#display-menu #hide-menu {
    height: 4.999em;
    overflow-x: hidden;
    overflow-y: hidden;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE 10+ */
    overflow-y:scroll;
    overflow-x:hidden;
}


nav#display-menu #hide-menu::-webkit-scrollbar { 
    display: none;  /* Chrome Safari */
}

nav#display-menu:focus-within #hide-menu {
    height: 100vh;
} /* Internet Explorer won't open the menu without this being seperate */

nav#display-menu:target #hide-menu,
nav#display-menu:hover #hide-menu {
    height: 100vh;
}

.admin-bar nav#display-menu:target #hide-menu,
.admin-bar nav#display-menu:hover #hide-menu,
.admin-bar nav#display-menu:focus-within #hide-menu {
    height: calc(100vh - 32px);
}

nav#display-menu:hover:not(:focus-within) #hide-menu:target {
    height: 5em;
}

nav#display-menu:not(:focus-within):not(:hover) #hide-menu > h3,
nav#display-menu:not(:focus-within):not(:hover) #hide-menu > div ul.social,
nav#display-menu:not(:focus-within):not(:hover) #hide-menu > ul.navigation,
nav#display-menu:not(:focus-within):not(:hover) #hide-menu > ul.navigation-widgets {
    display: none;
}

nav#display-menu a {
    color: #ffffff;
}

nav#display-menu a:focus,
nav#display-menu a:hover {
    color: #c52b30;
}

nav#display-menu a.nav-logo {
    display: inline-block;
    float: left;
    margin: .125em;
}

nav#display-menu a.nav-logo img {
    float: left;
    height: 4em;
    margin: .5em 1em .5em .5em;
}

nav#display-menu h1 {
    display: block;
    font-family: 'Teko', sans-serif;
    line-height: 2.25em;
    padding: 0em .5em;
    text-align: center;
    text-transform: none;
}

nav#display-menu h1 a:focus,
nav#display-menu h1 a:hover {
    color: #aaaaaa;
}

nav#display-menu .customizer {
    bottom: 0;
    position: absolute;
    left: 0;
}

nav#display-menu ul.social {
    background: #eeeeee;
    border-bottom: .0625em solid #cccccc;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    padding: 0 1.5em .25em 1em;
    text-align: center;
    width: calc( 100% - 2.5em );
}

nav#display-menu ul.social li {
    background: none;
    display: block;
    position: relative;
}

nav#display-menu ul.social li a {
    background: #c52b30;
    border-radius: 50%;
    display: inline-block;
    height: 3em;
    margin: .3em .1em 0;
    position: relative;
    width: 3em;
}

nav#display-menu ul.social li a::before {
    font-family: 'schwarttzy';
    color: #efefef;
    display: inline-block;
    font-size: 1.5em;
    font-weight: normal;
    padding: .5em;
    text-transform: none;
}

nav#display-menu ul.social li.beer a::before {
    content: 'x';
}

nav#display-menu ul.social li.bitcoin a::before {
    content: 'a';
}

nav#display-menu ul.social li.compass a::before {
    content: 'c';
}

nav#display-menu ul.social li.facebook a::before {
    content: 'd';
}

nav#display-menu ul.social li.facebook a::before {
    content: 'd';
}

nav#display-menu ul.social li.facebook-messenger a::before {
    content: 'A';
}

nav#display-menu ul.social li.instagram a::before {
    content: 'f';
}

nav#display-menu ul.social li.linkedin a::before {
    content: 'i';
}

nav#display-menu ul.social li.maps a::before {
    content: 'j';
}

nav#display-menu ul.social li.phone a::before {
    content: 'm';
}

nav#display-menu ul.social li.reddit a::before {
    content: 'o';
}

nav#display-menu ul.social li.rocket a::before {
    content: 'p';
}

nav#display-menu ul.social li.soundcloud a::before {
    content: 'r';
}

nav#display-menu ul.social li.steam a::before {
    content: 's';
}

nav#display-menu ul.social li.tachometer a::before {
    content: 't';
}

nav#display-menu ul.social li.twitter a::before {
    content: 'u';
}

nav#display-menu ul.social li.wordpress a::before {
    content: 'v';
}

nav#display-menu ul.social li.yelp a::before {
    content: 'y';
}

nav#display-menu ul.social li.youtube a::before {
    content: 'w';
}

nav#display-menu ul.social li a:focus,
nav#display-menu ul.social li a:hover {
    background: #333333;
}

nav#display-menu > ul:only-child {
    min-height: calc(100vh - 6.5em);
}

nav#display-menu ul.navigation {
    background: #ffffff;
    clear: both;
    display: grid;
}

nav#display-menu ul.navigation li {
    display: inline-block;
    float: none;
    text-align: left;
}

nav#display-menu ul.navigation li a {
    border-bottom: .0625em solid #cccccc;
    color: #333333;
    display: inline-block;
    font-weight: bold;
    line-height: 1em;
    margin: 0 .125em .125em .125em;
    padding: 1em 1.5em;
    text-transform: uppercase;
    width: calc(100% - 3em);
}

nav#display-menu #hide-menu > ul.navigation > li:nth-child(2n),
nav#display-menu #hide-menu > ul.navigation > li:nth-child(2n) li {
    background: #f8f8f8;
}

nav#display-menu ul.navigation li li a {
    margin-left: 1.5em;
    width: 19.5em;
}

nav#display-menu ul.navigation li a:focus,
nav#display-menu ul.navigation li a:hover {
    color: #c52b30;
}

nav#display-menu .menu-trick {
    float: right;
    height: 4.5em;
    margin-top: .125em;
    position: relative;
    width: 5em;
}

nav#display-menu .enable-drop-down {
    color: #aaaaaa;
    font-size: 1em;
    font-weight: bold;
    line-height: 1.25em;
    padding: 1.25em 1.25em 1.25em 22em;
    position: absolute;
    right: .3em;
    text-align: right;
    top: 0em;
}


nav#display-menu .enable-drop-down:focus,
nav#display-menu .enable-drop-down:hover {
    color: #c52b30;
}

nav#display-menu:focus-within .enable-drop-down,
nav#display-menu:hover .enable-drop-down,
nav#display-menu:target .enable-drop-down {
    display: none;
}

nav#display-menu h3 {
    color: #ffffff;
    margin-left: .5em;
    text-align: left;
}

nav#display-menu h3 a {
    color: #ffffff;
}

nav#display-menu h3 a:focus,
nav#display-menu h3 a:hover {
    color: #c52b30;
}

nav#display-menu ul.navigation-widgets h3 {
    border-top: #ffffff solid .3em;
    margin: .25em 0;
    text-align: center;
}

nav#display-menu ul.navigation-widgets li {
    border-bottom: #111111 solid .05em;
    color: #ffffff;
    display: block;
    padding: 1em 0;
}

nav#display-menu ul.navigation-widgets > li {
    padding: 1em;
}

nav#display-menu ul.navigation-widgets > li:last-of-type {
    font-size: .7em;
    text-align: center;
}

nav#display-menu ul.navigation-widgets a {
    color: #aaaaaa;
}

nav#display-menu ul.navigation-widgets a:focus,
nav#display-menu ul.navigation-widgets a:hover {
    color: #c52b30;
}

nav#display-menu .gallery figcaption.wp-caption-text {
    display: none;
}

nav#display-menu li.woocommerce-mini-cart-item {
    position: relative;
}

nav#display-menu .widget_shopping_cart_content a {
    display: block;
}

nav#display-menu .widget_shopping_cart_content a.remove_from_cart_button {
    color: #ffffff;
    display: block;
    font-size: 2em;
    left: 1em;
    margin: .5em 0;
    position: absolute;
    top: 0;
    width: 1em;
}

nav#display-menu .widget_shopping_cart_content a.remove_from_cart_button:focus,
nav#display-menu .widget_shopping_cart_content a.remove_from_cart_button:hover {
    color: #333333;
}

nav#display-menu .widget_shopping_cart_content a.remove_from_cart_button:before {
    background: #c52b30;
    border-radius: 50%;
    border: .05em solid #eeeeee;
    content: '';
    height: 1em;
    left: -.025em;
    position: absolute;
    top: -0.075em;
    width: 1em;
    z-index: -1;
}

nav#display-menu .widget_shopping_cart_content li.mini_cart_item img {
    border-radius: 50%;
    border: .3em solid #eeeeee;
    display: block;
    margin: .25em auto;
    text-align: center;
    width: calc( 75% - .5em );
}

nav#display-menu p.woocommerce-mini-cart__empty-message {
    text-align: center;
}

nav#display-menu .woocommerce-mini-cart__total {
    font-size: 1.5em;
    padding: 1em 1em 0;
}


nav#display-menu .woocommerce-mini-cart__buttons {
    font-size: 1.5em;
    padding: 0 1em 1em;
}

@media screen and ( max-width:782.1px ){
    
    .admin-bar nav#display-menu {
        
        top: 46px;
        
    }
    
    .admin-bar nav#display-menu:target #hide-menu,
    .admin-bar nav#display-menu:hover #hide-menu,
    .admin-bar nav#display-menu:focus-within #hide-menu {
        
        height: calc( 100vh - 46px );
        
    }
    
}

@media screen and ( max-width:600.1px ){
    
    .nojq {
        
        position: fixed !important;
        
    }
    
    .admin-bar nav#display-menu {
        
        top: 46px;
        
    }
    
    .admin-bar nav#display-menu:target #hide-menu,
    .admin-bar nav#display-menu:hover #hide-menu,
    .admin-bar nav#display-menu:focus-within #hide-menu {
        
        height: calc( 100vh - 46px);
        
    }
    
}