/* Making the menu responsive

   developer: tajudeen
   requires:    global.en.css, home.en.css
   ========================================================================== */

/* ==========================================================================
   Common
   ========================================================================== */

#logo {
    width: 20rem !important;
    margin: 1.8rem auto 0 0 !important;
    width: 320px !important;
}

.hamburger {display: none; }

svg.hamburger:hover { fill: #ccc; }

svg.hamburger {
    width: 30px;
    height: auto;
    margin-top: 2rem;
    fill: #d8d8d8;
}

.get-involved-text { font-weight: 600 !important; }

#get-involved-box {
    max-width: 100%;
    z-index: 12;
    height: 0;
    position: absolute;
    right: 0;
    padding-right: 2.5rem;
}

/* ==========================================================================
   Override Global
   ========================================================================== */


html { border-top: 0px !important; }

main { margin-top: 0px; }

#nav ul { float: unset; }

.get-involved-text:hover {
    background: #ff7e00 !important;
    color: #fff !important;
}

.page-width.tailed { position: relative; }

.page-width { padding: 0 40px !important; }

#nav li a {
    font-size: 0.9375rem;
    padding: 0.6875rem 0.4375rem !important;
}

.head-flex {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}


/* ==========================================================================
   footer
   ========================================================================== */

#subfoot { max-width: 100%; }

#subfoot {
    width: unset !important;
    display: flex;
    justify-content: space-between;
}

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

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

@media all and (max-width: 1200px) {
    #nav .page-width {
        padding: 0 0.625rem !important
    }
    #logo {
        width: 264px !important;
        margin: 1.8rem 0 0 0 !important;
    }
    #logo img {
        width: 264px;
        height: auto;
    }
    #nav li a {
        font-size: 13px !important;
        padding: 0.6875rem 0.3125rem !important;
    }
    #top-menu {
        display: flex;
    }
}
/* styles for medium screens (900px)
   ========================================================================== */

@media all and (max-width: 900px) {
    /*  ======================= common  */
    .page-width {
        padding: 0 1.25rem !important;
    }
    /* ======================== global styles override */ 
    #top-menu {
        display: none; 
    }
    .hamburger { 
        display: inline-block; 
        cursor: pointer;
    }
    #nav li a {
        padding: 0.6875rem 0.625rem !important;
    }

    /* ======================== Global Nav */
    #nav ul {
        position: absolute;
        top: 94px;
        left: 0;
        right: 0;
        z-index: 20;
    }
    #our-mission #nav ul, #programs #nav ul, #home #nav ul {
        top: 63px;
    }
    #nav li {
        display: block !important;
        width: 100%;
        height: unset !important;
        z-index: 9999 !important;
        background: #f9f9f9 !important;
        border-bottom: 1px solid #ddd;
    }
    #nav li:hover {
        background: #eeeeee !important;
        color: #000 !important;
    }

    /*  ======================= get involved  */ 
    #get-involved-box {
        padding-right: 1.25rem;
    }
    .get-involved-box::after {
        display: none;
    }
    .get-involved-box {
        position: absolute !important;
        width: 900px !important;
        max-width: 100% !important;
        background: none;
    }
    .get-involved-text {
        margin: 0 !important;
        border-radius: 0 !important;
    }
    .get-involved-text:hover {
        border-radius: 0 !important;
    }
    /*  ======================= mobile backdrop  */ 
    .mobile-backdrop {
        position: absolute;
        width: 100%;
        background: rgba(0,0,0,0.5);
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 19 !important;
        height: 100vh;
        top: 116px;
    }
}
/* styles for medium screens (600px)
   ========================================================================== */

@media all and (max-width: 600px) {
    /*  ======================= common  */ 
    .page-width {
        padding: 0 0.625rem !important;
    }
    /*  ======================= Menu  */
    #logo img {
        height: auto;
        width: 245px;
    }
    svg.hamburger {
        margin-top: 1.9rem;
    }
    /*  ======================= Footer  */
    #subfoot {
        flex-direction: column;
    }
    #subfoot>*:first-child {
        padding: 0.3125rem 1.875rem 0 1.875rem !important;
        margin: 0 auto;
    }
    #subfoot>*:last-child {
        padding: 0.3125rem 0 0.3125rem 0 !important;
        margin: 0 auto !important;
    }
    #subfoot .logos {
        margin: 0 auto;
    }
    #subfoot a {
        display: flex;
    }
    #get-involved-box {
        padding-right: 1.25rem;
        width: 100% !important;
        text-align: center;
    }
    .get-involved-text:hover {
        background: #ff6527 !important;
        color: #fff !important;
        cursor: pointer;
    }
    .homepage#subfoot .logos div img {
        width: auto;
        height: 25px;
    }

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

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