@media only screen and (max-width: 600px) {
 .tabs {
    margin:  0;
    padding: 0;
    list-style: none;
    display: table; /* [1] */
    table-layout: fixed; /* [2] */
    width: auto; /* [3] */
}
}

@media only screen and (min-width: 600px) {
     .tabs {
    margin:  0;
    padding: 0;
    list-style: none;
    display: table; /* [1] */
    table-layout: fixed; /* [2] */
    width: auto; /* [3] */
}
}

@media only screen and (min-width: 768px) {
     .tabs {
    margin:  0;
    padding: 0;
    list-style: none;
    display: table; /* [1] */
    table-layout: fixed; /* [2] */
    width: auto; /* [3] */
}
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .tabs {
    margin:  0;
    padding: 0;
    list-style: none;
    display: table; /* [1] */
    table-layout: fixed; /* [2] */
    width: 100%; /* [3] */
}
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .tabs {
    margin:  0;
    padding: 0;
    list-style: none;
    display: table; /* [1] */
    table-layout: fixed; /* [2] */
    width: 100%; /* [3] */
}
}




    .tabs__item {
        display: table-cell; /* [4] */
    }

        .tabs__link {
            display: block; /* [5] */
        }


/**
 * Primary nav. Extends `.tabs`.
 *
 * 1. Stop tabs’ corners leaking out beyond our 4px round.
 */
.primary-nav {
    text-align: center;
    border-radius: 4px;
    overflow: hidden; /* [1] */
}

        .primary-nav a {
            padding: 1em;
            background-color: #0183c1;
            color: #fff;
            font-weight: bold;
            text-decoration: none;
        }

        .primary-nav a:hover {
            background-color: #de6103;
            opacity: 1;
        }