.icon-bar {
    width: 100%;
    overflow: auto;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #00000059;
    border: 1px solid #DFDFDF;
    border-radius: 30px 30px 0px 0px;
}

.menu-name {
    color: #8F8F8F;
    font-size: 12px;
    letter-spacing: 0.04px;
    margin: 0;
}

.icon-bar a {
    float: left;
    width: 25%;
    text-align: center;
    padding: 8px 0;
    transition: all 0.3s ease;
    color: #8F8F8F;
    font-size: 36px;
}

.active p {
    color: #159695;
}


/* ===Nav Menu img=== */

.menu-home {
    background-image: url(../img/icon/icon-home-gray.png);
    background-position: center;
    background-size: cover;
    width: 50%;
    height: 45px;
    margin: 4% auto;
}

.active .menu-home {
    background-image: url(../img/icon/menu-blue/icon-home.png);
}

.menu-info {
    background-image: url(../img/icon/icon-info-health-gray.png);
    background-position: center;
    background-size: cover;
    width: 50%;
    height: 45px;
    margin: 4% auto;
}

.active .menu-info {
    background-image: url(../img/icon/icon-info-health.png);
}

.menu-doctor {
    background-image: url(../img/icon/icon-doctor-online-gray.png);
    background-position: center;
    background-size: cover;
    width: 50%;
    height: 45px;
    margin: 4% auto;
}

.active .menu-doctor {
    background-image: url(../img/icon/icon-doctor-online.png);
}

.menu-more {
    background-image: url(../img/icon/icon-more-gray.png);
    background-position: center;
    background-size: cover;
    width: 50%;
    height: 45px;
    margin: 4% auto;
}

.active .menu-more {
    background-image: url(../img/icon/icon-more.png);
}