.tab .nav-tabs {
 
    border-bottom:0 none;
 
}
 
.tab .nav-tabs li a{
 
    position: relative;
 
    padding: 15px;
 
    color: #408080;
 
    font-size: 17px;
 
    z-index: 1;
 
}
 
.tab .nav-tabs li a:hover{
 
    background:transparent;
 
    border:1px solid transparent;
 
}
 
.tab .nav-tabs li a:before{
 
    content: "";
 
    width:100%;
 
    height:100%;
 
    position:absolute;
 
    bottom: 8px;
 
    left:-2px;
 
    background: #00D5D5;
 
 
 
    border: 1px solid #d3d3d3;
 
    border-bottom: 0px none;
 
    border-radius: 10px 10px 0 2px;
 
    transform-origin: left center 0;
 
    transform: perspective(4px) rotateX(2deg);
 
    z-index:-30;
 
}
 
.tab .nav-tabs li{
 
    margin-right: 15px;
 
}
 
.tab .nav-tabs li.active a:before{
 
    background: #008A8A;
 
}
 
.tab .nav-tabs li.active a,
 
.tab .nav-tabs li.active a:focus,
 
.tab .nav-tabs li.active a:hover{
 
    border:1px solid transparent;
 
    background:transparent;
 
    color: #00D5D5;
 
    font-weight:700;
 
    z-index: 2;
 
}
 
.tab-content .tab-pane{
 
    border-bottom-left-radius:15px;
 
    border-bottom-right-radius:15px;
 
    border: 1px solid #408080;
 
    padding: 20px;
 
    background:#EFF8F8;
 
    line-height: 22px;
 
}
 
.tab-content .tab-pane h4{
 
    margin-top: 0;
 
    font-weight:700;
 
    font-size: 20px;
 
}
 
@media only screen and (max-width: 767px) {
 
    .tab .nav-tabs li a{
 
        padding: 15px 10px;
 
        font-size: 14px;
 
    }
 
    .tab .nav-tabs li a:before{
 
        bottom: 6px;
 
    }
 
}
 
@media only screen and (max-width: 499px) {
 
    .tab .nav-tabs li{
 
        width:100%;
 
        margin-bottom: 5px;
 
        margin-top: 5px;
 
    }
 
    .tab .nav-tabs li a:before{
 
        bottom: 0;
 
        transform: none;
 
        border-bottom: 1px solid #408080;
 
    }
 
}