/* Sub-Global Nav for gridMathematica

   developer:   tajudeen
   requires:    framework.css.en
   ========================================================================== */

:root {
    --red : #d40014;
    --dark-red : #ac000e;
}
/* ==========================================================================
   Top Navbar
   ========================================================================== */

section#topnav  {
    background-color: var(--red);
    height: 2.625rem;
}

#topnav .page-width ul li {
    display: inline-block;
    margin: 0 -2px;
    cursor: pointer;
}

#topnav .page-width ul li a {
    display: inline-block;
    background-color: var(--red);
    padding: 0.75rem 1.25rem 0.4375rem;
    color: #fff;
    margin: 0;
}

#topnav .page-width ul li a:hover {
    background-color: var(--dark-red);
}

#buy-now #subnav-howtobuy,
#faq #subnav-faq,
#features #subnav-features,
#overview #subnav-overview {
    color: #fff;
    background-color: var(--dark-red);
}


/* ==========================================================================
   responsive breakpoint styles
   ========================================================================== */

/* styles for medium screens (1200px)
   ========================================================================== */

@media all and (max-width: 1200px) {}

/* styles for medium screens (900px)
   ========================================================================== */

@media all and (max-width: 900px) {}

/* styles for medium screens (600px)
   ========================================================================== */

@media all and (max-width: 600px) {
    #grid .page-width .inner {
        height: auto;
    }
    .page-width {
        padding: 0 1rem;
    }
    #topnav .page-width ul li a {
        padding: 0.75rem 1.1rem 0.4375rem;
    }
    #topnav ul {
        display: flex;
        flex-wrap: nowrap;
    }
}

/* styles for medium screens (320px)
   ========================================================================== */

@media all and (max-width: 320px) {}