/* ==========================================
   BUILD SETU BOTTOM NAVIGATION
========================================== */

.bs-bottom-nav{
    position:fixed;
    left:0;
    right:0;
    bottom:0;

    width:100%;
    height:65px;

    background:#ffffff;

    border-top:1px solid #e5e7eb;

    display:flex;
    align-items:center;
    justify-content:space-around;

    z-index:9999;

    box-shadow:0 -2px 15px rgba(0,0,0,.08);
}

/* ========================= */

.bs-nav-item{
    flex:1;

    display:flex;
    flex-direction:column;

    align-items:center;
    justify-content:center;

    text-decoration:none;

    color:#666;

    font-size:12px;

    transition:.2s ease;
}

/* ========================= */

.bs-nav-item:hover{
    color:#FF9933;
}

/* ========================= */

.bs-nav-icon{
    font-size:20px;
    line-height:1;
}

/* ========================= */

.bs-nav-text{
    margin-top:4px;
    font-size:11px;
    font-weight:600;
}

/* =========================
   CENTER BUTTON
========================= */

.bs-nav-add{
    position:relative;
    top:-12px;

    width:58px;
    height:58px;

    flex:0 0 58px;

    background:#FF9933;

    border-radius:50%;

    color:#fff !important;

    box-shadow:0 5px 20px rgba(255,153,51,.35);
}

.bs-nav-add .bs-nav-icon{
    font-size:22px;
}

.bs-nav-add .bs-nav-text{
    font-size:10px;
}

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

.bs-nav-item.active{
    color:#FF9933;
}

/* =========================
   BODY SPACE
========================= */

body{
    padding-bottom:80px;
}

/* =========================
   TABLET
========================= */

@media (min-width:768px){

    .bs-bottom-nav{
        max-width:700px;
        left:50%;
        transform:translateX(-50%);
        border-radius:16px 16px 0 0;
    }

}