.tab {
    text-align: center;
}

.tab .nav-tabs {
    border: none;
    margin-left: auto;
    margin-right: auto;
    width: 420px;
}

.nav-tabs li a {
    padding: 7px 20px 7px 60px;
    border: 1px solid #ededed;
    border-top: 2px solid #ededed;
    border-right: 0px none;
    background: #f6f6f6;
    color: #515151;
    border-radius: 0px;
    margin-right: 0px;
    font-weight: bold;
    transition: all 0.3s ease-in 0s;
    font-size: 1.5rem;
    background-image: url('../../../assets/images/tabs-icon-b01.png');
    background-repeat: no-repeat;
    background-position: 20px;
}

.nav-tabs li .active {
    background: #308616 !important;
    color: #ffffff !important;
    background-image: url('../../../assets/images/tabs-icon-a02.png') !important;
    background-repeat: no-repeat !important;
    background-position: 20px !important;
}

.nav-tabs li a:hover {
    border-bottom-color: #ededed;
    border-right: 0px none;
    background: #00b0ad;
    color: #fff;
    background-image: url('../../../assets/images/tabs-icon-b02.png');
    background-repeat: no-repeat;
    background-position: 20px;
}

.nav-tabs li a i {
    display: inline-block;
    text-align: center;
    margin-right: 10px;
}

.nav-tabs li:last-child {
    /* border-right: 1px solid #ededed */
}

.nav-tabs li.active a,
.nav-tabs li.active a:focus,
.nav-tabs li.active a:hover {
    border-top: 3px solid #00b0ad;
    border-right: 1px solid #d3d3d3;
    margin-top: -15px;
    color: #444;
    padding: 22px 40px;
}

.tab .tab-content {
}

.tab .tab-content h3 {
    margin-top: 0;
}

@media only screen and (max-width: 767px){
    .nav-tabs li {
        /* width: 100% */
        margin-bottom: 10px;
    }

    .nav-tabs li a {
        /* padding: 15px */
    }

    .nav-tabs li.active a,
    .nav-tabs li.active a:focus,
    .nav-tabs li.active a:hover {
        padding: 15px;
        margin-top: 0;
    }
}