nav .mobile,
nav .menubutton.mobile,
nav .a.mobile,
nav .menubutton.logo.mobile
{
    display: none;
}

body {
    position: relative;
}

div#menu-overlay
{
    display: none;
}

nav[role="main"] .menu-wrapper > div {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
}

nav[role="main"] div.menu-wrapper
{
    max-width: 980px;
    min-width: 900px;
}

nav[role="main"] .menu-wrapper > div a {
    height: 44px;
    line-height: 44px;
    padding-top: 8px;
    padding-bottom: 8px;
}

nav[role='sub'] div.menu-wrapper {
    max-width: 980px;
    min-width: 900px;
    margin: 0 auto;
}

nav[role="sub"] .buy-now {
    font-style: inherit;
    font-weight: 600;
}

nav[role='sub'] div.menu-wrapper > div:not(.home)
{
    padding-left: 1.5em;
}

nav[role='sub'] div.menu-wrapper > div:not(.home) a
{
    padding-bottom: 0.2em;
}

nav[role="sub"] div.menu-wrapper > div:not(.home) a.selected
{
    border-bottom: 2px solid #209FDF;
}

nav[role="sub"] div.menu-wrapper > div:not(.home) a:hover {
    border-bottom: 2px solid #999;
}

nav div.menu-wrapper > .home,
nav div.menu-wrapper > .logo
{
    margin-right: auto;
}


/* Retina Override */
@media @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi)  {
    /* ------ menu buttons ------ */	
    nav[role="main"] .menu-wrapper > div:not(.products) > .menubutton:not(.logo):not(.menu),
    nav[role="main"] .menu-wrapper > div:not(.products) > .menubutton:not(.logo):not(.menu) {
    	background-size: 40px 25px;
    }

    nav[role="main"] .products .menubutton:not(.more) {
    	background-size: 32px 32px;
    }

    nav[role="main"] .menubutton.more {
        background-image: url("../gfx/menubutton-more@2x.png");
    }

    input.sm-trigger:checked ~ nav[role="sub"] label {
        background-image: url("../gfx/menubutton-sub-menu-expanded@2x.png");
    }

    nav[role="sub"] label {
        background-image: url("../gfx/menubutton-sub-menu-collpased@2x.png");
    }

    input.mm-trigger:checked ~ nav[role="main"] label {
        background-image: url("../gfx/menubutton-main-menu-expanded@2x.png");
    }

    nav[role="main"] label {
        background-image: url("../gfx/menubutton-main-menu-collpased@2x.png");
    }

    nav[role="main"] .menubutton.snitch {
        background-image: url("../gfx/littlesnitch_32@2x.png");
    }

    nav[role="main"] .menubutton.microsnitch {
        background-image: url("../gfx/microsnitch_32@2x.png");
    }

    nav[role="main"] .menubutton.launchbar {
        background-image: url("../gfx/launchbar_32@2x.png");
    }

     nav[role="main"] .menubutton.logo {
    	background-image: url("../gfx/menubutton-logo-light@2x.png");
    }
     nav[role="main"] .menubutton.blog {
    	background-image: url("../gfx/menubutton-blog-light@2x.png");
    }
     nav[role="main"] .menubutton.products {
    	background-image: url("../gfx/menubutton-products-light@2x.png");
    }
     nav[role="main"] .menubutton.support {
    	background-image: url("../gfx/menubutton-support-light@2x.png");
    }
     nav[role="main"] .menubutton.jobs {
    	background-image: url("../gfx/menubutton-jobs-light@2x.png");
    }
     nav[role="main"] .menubutton.shop {
    	background-image: url("../gfx/menubutton-shop-light@2x.png");
    }
     nav[role="main"] .menubutton.cart {
    	background-image: url("../gfx/menubutton-shopping-light@2x.png");
    }
     nav[role="main"] .menubutton.logo {
    	background-image: url("../gfx/menubutton-logo-light@2x.png");
    }
     nav[role="main"] .menubutton.mobile.logo
    {
        background-image: url("../gfx/menubutton-logo-white-mobile@2x.png");
    }
}

@media only screen and (max-width: 1023px) {
    .light nav[role="main"] a,
    .light nav[role="main"] a:hover,
    .dark nav[role="main"] a,
    .dark nav[role="main"] a:hover,
    nav[role="main"] a:hover
    {
        color: #fafafa;
        white-space: nowrap;
    }
    
    nav .mobile,
    nav .menubutton.mobile,
    nav .a.mobile,
    nav .menubutton.logo.mobile
    {
        display: block;
    }
    
    nav[role="main"] .menubutton.desktop,
    nav[role="main"] a.desktop,
    nav[role="sub"] .desktop
    {
        display: none;
    }
    
    .light nav[role="main"] .menubutton.logo,
    .dark nav[role="main"] .menubutton.logo,
    nav[role="main"] .menubutton.logo 
    {
        width: calc(100% - 44px);
        text-indent: 58px;
        
        background-image: url("../gfx/menubutton-logo-white-mobile.png");
        background-size: 32px 16px;
        background-position: 14px center;
    }
    
    nav[role="main"],
    nav[role="sub"]
	{
        position: relative;
        padding-top: 0px;
        height: 44px;
        overflow: hidden;
        z-index: 255;
        
        font-family: "myriad-pro", "MyriadPro-Light", "Myriad Pro Light", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, sans-serif; 
    }
    
    nav[role="main"] div.menu-wrapper,
    nav[role="sub"] div.menu-wrapper,
    nav[role="main"] div,
    nav[role="sub"] div
    {
        max-width: 100%;
        min-width: initial;
    }
    
    input.mm-trigger:checked ~ div#menu-overlay,
    input.sm-trigger:checked ~ div#menu-overlay
    {
        background-color: rgba(0,0,0, 0.3);
        -webkit-backdrop-filter: blur(15px);
        pointer-events: all;
    }
    
    input.mm-trigger:checked ~ nav[role="main"],
    input.sm-trigger:checked ~ nav[role="sub"]
    {
        overflow: visible;
    }
    
    nav[role="main"] div.menu-wrapper > div,
    nav[role="sub"] div.menu-wrapper > div
    {
        width: 100%;
    }
    
    nav[role="sub"] label,
    nav[role="main"] label
    {
        position: absolute;
        display: block;
        top: 0px;
        right: 0px;
        width: 44px;
        height: 44px;
        text-indent: -9999px;
        padding: 0;
        z-index: 1;
    }
    
    nav[role="main"] div a,
    nav[role="sub"] div a
    {
        display: block;
        width: 100%;
        padding: 0;
        margin: 0;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    
    /* main */
    
    input.mm-trigger ~ nav[role="main"] div.menu-wrapper
    {
        position: absolute;
        width: 100%;
    }
    
    nav[role="main"] div.menu-wrapper > div
    {
        position: relative;
        height: auto;
        -webkit-transition: all 75ms linear;
        -moz-transition: all 75ms linear;
        -o-transition: all 75ms linear;
        transition: all 75ms linear;
    }
    
    nav[role="main"] div.menu-wrapper
    {
        background-color: rgba(96, 96, 96, 0.99);
    }
    
    nav[role="main"] div.products
    {
        background-color: rgba(136, 136, 136, 0.99);
    }
    
    nav[role="main"] .menubutton.logo
    {
        background-color: #606060;
        margin: 0;
    }
    
    nav[role="main"] .menubutton:not(.logo),
    nav[role="main"] .menubutton
    {
        height: 44px;
        line-height: 44px;
        float: none;
        padding: 0;
        margin: 0;
        text-indent: 58px;
    }
    
    nav[role="main"] .menubutton.jobs:after {
        left: 84px;
        top: 8px;
    }
    
    nav[role="main"] .menubutton:not(.logo):not(.more):not(.microsnitch):not(.snitch):not(.launchbar):not(.menu)
    {
        background-image: none !important;
    }
    
    /* submenu */
    nav div.menu-wrapper
    {
        margin: 0px auto;
        position: relative;

        display: -webkit-flex;
        display: flex;

        -webkit-align-items: flex-start;
        align-items: flex-start;

        -webkit-justify-content: flex-end;
        justify-content: flex-end;

        -webkit-flex-flow: column nowrap;
        flex-flow: column nowrap;
    }
    
    nav[role="sub"]
    {
        z-index: 254;
        padding: 0;
        margin: 0;
        background-color: rgb(231, 232, 232, 0.99);
        border-bottom: 1px solid #e0e0e0;
    }
    
    input.sm-trigger:checked ~ nav[role="sub"]
    {
        border-bottom: 1px solid transparent;
    }
    
    nav[role='sub'] div.menu-wrapper > div:not(.home)
    {
        padding: 0;
    }
    
    nav[role="sub"] div.menu-wrapper
    {
        background-color: rgba(231, 232, 232, 0.98);
    }
    
    nav[role="sub"] div.menu-wrapper > div
    {
        height: 44px;
        line-height: 44px;
        
        padding: 0;
        margin: 0;
        
        border-bottom: none;
    }
    
    nav[role="sub"] div.menu-wrapper > div:not(.home) a.selected
    {
        border-bottom: none;
    }
    
    nav[role="sub"] div.menu-wrapper div:not(.home) a:hover
    {
        border-bottom: none;
        background-color: rgba(0,0,0, 0.05);
    }
    
    input.sm-trigger:checked ~ nav[role="sub"] div.menu-wrapper
    {
        border-bottom: 1px solid #E0E0E0;
    }
    
    nav[role="sub"] .home
    { 
        font-size: 1.8rem;
    }
    
    nav[role="sub"] .buy-now {
        font-style: inherit;
        font-weight: inherit;
    }
    
    nav[role="sub"] div a:focus,
    nav[role="sub"] div a:active,
    nav[role="sub"] div a:hover,
    nav[role="sub"] div a
    {
        display: block;
        width: 100%;
        padding: 0;
        margin: 0;
        text-indent: 16px;
        
        border-bottom: none;
    }
}