/* ==========================================================================
   NEW_NAVIGATION.CSS
   E-Strategic Website
   ========================================================================== */


/* ==========================================================================
   NAVIGATION STRIP
   ========================================================================== */

.main_navigation{

    width:100%;

    margin-top:8px;

    background:#ececec;

    border-bottom:5px solid #8cc63f;

    position:relative;

}


/* ==========================================================================
   NAVIGATION CONTAINER
   ========================================================================== */

#frontNav{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

}


/* ==========================================================================
   LOGIN / SIGNUP AREA
   ========================================================================== */

#frontNav > div{

    display:flex;

    align-items:center;

    gap:12px;

    padding-bottom:5px;

}


/* ==========================================================================
   MENU LIST
   ========================================================================== */

#nav_top_id{

    margin:0;

    padding:0;

    list-style:none;

    display:flex;

    align-items:flex-end;

    gap:20px;
    
}


#nav_top_id li{

    margin:0;

    padding:0;
    
    position:relative;
    
    /* Prevent the tab borders extending into the green navigation strip */
    overflow:hidden;

}


/* ==========================================================================
   MENU TABS
   ========================================================================== */

#nav_top_id li a{

    display:block;

    min-height:52px;

    line-height:52px;

    padding:0 22px;

    background:#ececec;

    color:#666666;

    font-size:14px;

    font-weight:bold;

    text-decoration:none;

    border:1px solid #d4d4d4;

    border-bottom:none;

    border-radius:14px 14px 0 0;

    margin:0 0 -5px 0;

    position:relative;

    bottom:-5px;

    box-sizing:border-box;

    transition:background .25s ease,
               color .25s ease,
               border-color .25s ease;
}


#nav_top_id li a span{

    display:block;

    line-height:52px;

}


/* ==========================================================================
   ACTIVE TAB
   ========================================================================== */

#nav_top_id li a.active{

    background:#8cc63f;

    color:#ffffff;

    border-color:#cfcfcf;

}


/* ==========================================================================
   HOVER
   ========================================================================== */

#nav_top_id li a:hover{

    background:#8cc63f;

    color:#ffffff;

    border-color:#8cc63f;

}


/* ==========================================================================
   LOGIN / SIGNUP BUTTONS
   ========================================================================== */

.medium_aqua_btn{

    display:inline-block;

    min-width:82px;

    height:38px;

    line-height:38px;

    padding:0 22px;

    background:#12a8d9;

    color:#ffffff;

    font-size:15px;

    font-weight:bold;

    text-align:center;

    text-decoration:none;

    border:none;

    border-radius:19px;

    cursor:pointer;

    position:relative;

    top:0;

    transition:.2s ease;

}


.medium_aqua_btn:hover{

    background:#0798c8;

    color:#ffffff;

    text-decoration:none;

}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width:1024px){

    #frontNav{

        flex-direction:column;

        align-items:center;

        gap:18px;

    }


    #frontNav > div{

        order:1;

    }


    #nav_top_id{

        order:2;

        justify-content:center;

        flex-wrap:wrap;

    }

}


@media (max-width:768px){


    #frontNav{

        width:100%;

        display:flex;

        flex-direction:column;

        align-items:stretch;

        gap:8px;

    }

#frontNav > div{

    display:flex;

    justify-content:center;

}

    #nav_top_id{

        width:100%;

        flex-direction:column;

        gap:6px;

    }


    #nav_top_id li{

        width:100%;

    }


    #nav_top_id li a{

        min-height:46px;

        line-height:46px;

        text-align:center;

        border-radius:8px;

        border-bottom:1px solid #cfcfcf;
        
        position:static;
        
        bottom:-6px;

        margin-bottom:-5px;


    }


    #nav_top_id li a span{

        line-height:46px;

    }

}