.table_container {
    margin: 30px 0 60px
}

.responsive_table {
    width: 100%;
    min-width: 300px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
    border-collapse: collapse;
    table-layout: fixed
}

.responsive_table td,
.responsive_table th {
    padding: 10px
}

.responsive_table td:last-of-type {
    font-size: 18px;
    font-weight: 700;
    color: #1e81cd
}

.responsive_table thead {
    background: #1e81cd;
    text-align: left;
    color: #fff;
    font-weight: 700
}

.responsive_table tbody tr {
    background: rgba(204, 204, 204, .1)
}

.responsive_table tr:nth-child(even) {
    background: rgba(204, 204, 204, .3)
}

.responsive_table.with_mobile_labels {
    font-size: 16px
}

@media (max-width:856px) {
    .responsive_table thead {
        display: none
    }

    .responsive_table td,
    .responsive_table th,
    .responsive_table tr {
        display: block
    }

    .responsive_table td:first-of-type {
        background-color: #1e81cd;
        color: #fff
    }

    .responsive_table tbody tr,
    .responsive_table tr:nth-child(even) {
        background: #fff
    }

    .responsive_table td {
        border-top: none;
        background: rgba(204, 204, 204, .1)
    }

    .responsive_table td:nth-child(even) {
        background: rgba(204, 204, 204, .3)
    }

    .responsive_table tr td:first-child {
        font-weight: 700
    }

    .responsive_table.with_mobile_labels tr td:first-child {
        font-weight: 400
    }

    .responsive_table.with_mobile_labels td:before {
        display: block;
        font-weight: 700;
        font-size: 18px;
        color: #4d4d4d;
        margin-bottom: 5px
    }

    .responsive_table.with_mobile_labels td:nth-of-type(1):before {
        content: "Model";
        color: #fff
    }

    .responsive_table.with_mobile_labels td:nth-of-type(2):before {
        content: "Length"
    }

    .responsive_table.with_mobile_labels td:nth-of-type(3):before {
        content: "Inside diameter"
    }

    .responsive_table.with_mobile_labels td:nth-of-type(4):before {
        content: "Total diameter"
    }

    .responsive_table.with_mobile_labels td:nth-of-type(5):before {
        content: "Price without VAT"
    }
}

@media all and (-ms-high-contrast:none),
(-ms-high-contrast:active) {
    .responsive_table {
        border-collapse: separate;
        border-spacing: 0
    }

    .responsive_table th {
        text-align: left
    }
}

@supports (-ms-ime-align:auto) {
    .responsive_table {
        border-collapse: separate;
        border-spacing: 0
    }
}