.container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {
    .container { max-width: 540px; }

    img { max-width: 500px }
}

@media (min-width: 768px) {
    .container { max-width: 720px; }

    img { max-width: 680px }
}

@media (min-width: 992px) {
    .container { max-width: 960px; }

    img { max-width: 900px }
}

@media (min-width: 1200px) {
    .container { max-width: 1140px; }

    img { max-width: 1024px }
}

@media (min-width: 1400px) {
    .container { max-width: 1320px; }

    img { max-width: 1280px }
}

/* colors */

.white { color: #fff !important }
table {
    border-collapse: collapse;
    width: 100%;
    max-width: 800px;
    margin: auto;
    font-size: 12px;
}
th, td

{
    text-align: left;
    padding: 8px;
    border: 1px solid #ddd;
}

th {
    background: gray;
    color: white;
}

tr:nth-child(even) {
    background-color: #f2f2f2;
}

tr:hover {
    background-color: #ddd;
}