ul.tabs {

    margin: 0;

    padding: 0;

    float: left;

    list-style: none;

    width: 100%;

}



ul.tabs li {

    margin: 0;

    cursor: pointer;

    line-height: 31px;

    border: 1px solid #ccc;

    background-color: #eee;

    color: #000;

    overflow: hidden;

    position: relative;

    text-align: center;

    float: left;

    width: 100%;

    font-weight: bold;

}

ul.tabs li:hover {

    background-color: #fff;

}



ul.tabs li.active {

    background-color: #fff;

    display: block;

    color: #CD6100;

}

.tabs li a{display: block}

.tabs li.active>a, .tabs li.active>a:hover {

  background: #F8F8F8;

  color: #4c4c4c;

  border-color: #DDD;

  border-bottom-color: #F8F8F8;

  text-shadow: none;

}



.tab_container {

    border: 1px solid #ccc;

    clear: both;

    float: left;

    width: 99.9999%;

    background: #fff;

    overflow: auto;

    margin-top: -1px;

}



.tab_content {

    padding: 20px;

    display: none;

}

@media screen and (min-width: 480px){

    ul.tabs li{width: 50%}



    ul.tabs li.active {

        border-bottom-color: #fff;

    }

}

@media screen and (min-width: 640px){

    ul.tabs li{width: 50%;}

    /* ul.tabs li:nth-child(1), ul.tabs li:nth-child(2), ul.tabs li:nth-child(3), ul.tabs li:nth-child(4){width: 24.9999%;} */



    /* new code */

    ul.tabs li:nth-child(1), ul.tabs li:nth-child(2){width: 50%;}

}