* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

*, html, body {
    font-size: 20px;
}

.row, .row2 {
    margin: 0 auto;
    width: 100%;
}

.row::after, .row2::after {
    content: "";
    clear: both;
    display: table;
}

[class*="col-"] {
    float: left;
    width: 100%;
    padding: 0;
}

.col-0-0  { width: 0; display: none; }
.col-0-1  { width: 8.33%; display: block; }
.col-0-2  { width: 16.66%; display: block; }
.col-0-3  { width: 25%; display: block; }
.col-0-4  { width: 33.33%; display: block; }
.col-0-5  { width: 41.66%; display: block; }
.col-0-6  { width: 50%; display: block; }
.col-0-7  { width: 58.33%; display: block; }
.col-0-8  { width: 66.66%; display: block; }
.col-0-9  { width: 75%; display: block; }
.col-0-10 { width: 83.33%; display: block; }
.col-0-11 { width: 91.66%; display: block; }
.col-0-12 { width: 100%; display: block; }
  
@media only screen and (min-width: 320px) {
    *, html, body {
        font-size: 12pt;
    }

    .col-320-0  { width: 0; display: none; }
    .col-320-1  { width: 8.33%; display: block; }
    .col-320-2  { width: 16.66%; display: block; }
    .col-320-3  { width: 25%; display: block; }
    .col-320-4  { width: 33.33%; display: block; }
    .col-320-5  { width: 41.66%; display: block; }
    .col-320-6  { width: 50%; display: block; }
    .col-320-7  { width: 58.33%; display: block; }
    .col-320-8  { width: 66.66%; display: block; }
    .col-320-9  { width: 75%; display: block; }
    .col-320-10 { width: 83.33%; display: block; }
    .col-320-11 { width: 91.66%; display: block; }
    .col-320-12 { width: 100%; display: block; }
}

@media only screen and (min-width: 480px) {
    *, html, body {
        font-size: 18px;
    }

    .col-480-0  { width: 0; display: none; }
    .col-480-1  { width: 8.33%; display: block; }
    .col-480-2  { width: 16.66%; display: block; }
    .col-480-3  { width: 25%; display: block; }
    .col-480-4  { width: 33.33%; display: block; }
    .col-480-5  { width: 41.66%; display: block; }
    .col-480-6  { width: 50%; display: block; }
    .col-480-7  { width: 58.33%; display: block; }
    .col-480-8  { width: 66.66%; display: block; }
    .col-480-9  { width: 75%; display: block; }
    .col-480-10 { width: 83.33%; display: block; }
    .col-480-11 { width: 91.66%; display: block; }
    .col-480-12 { width: 100%; display: block; }
}

@media only screen and (min-width: 620px) {
    *, html, body {
        font-size: 18px;
    }

    .col-620-0  { width: 0; display: none; }
    .col-620-1  { width: 8.33%; display: block; }
    .col-620-2  { width: 16.66%; display: block; }
    .col-620-3  { width: 25%; display: block; }
    .col-620-4  { width: 33.33%; display: block; }
    .col-620-5  { width: 41.66%; display: block; }
    .col-620-6  { width: 50%; display: block; }
    .col-620-7  { width: 58.33%; display: block; }
    .col-620-8  { width: 66.66%; display: block; }
    .col-620-9  { width: 75%; display: block; }
    .col-620-10 { width: 83.33%; display: block; }
    .col-620-11 { width: 91.66%; display: block; }
    .col-620-12 { width: 100%; display: block; }
}

@media only screen and (min-width: 768px) {
    *, html, body {
        font-size: 18px;
    }

    .col-768-0  { width: 0; display: none; }
    .col-768-1  { width: 8.33%; display: block; }
    .col-768-2  { width: 16.66%; display: block; }
    .col-768-3  { width: 25%; display: block; }
    .col-768-4  { width: 33.33%; display: block; }
    .col-768-5  { width: 41.66%; display: block; }
    .col-768-6  { width: 50%; display: block; }
    .col-768-7  { width: 58.33%; display: block; }
    .col-768-8  { width: 66.66%; display: block; }
    .col-768-9  { width: 75%; display: block; }
    .col-768-10 { width: 83.33%; display: block; }
    .col-768-11 { width: 91.66%; display: block; }
    .col-768-12 { width: 100%; display: block; }
}

@media only screen and (min-width: 1020px) {
    *, html, body {
        font-size: 18px;
    }

    .col-1020-0  { width: 0; display: none; }
    .col-1020-1  { width: 8.33%; display: block; }
    .col-1020-2  { width: 16.66%; display: block; }
    .col-1020-3  { width: 25%; display: block; }
    .col-1020-4  { width: 33.33%; display: block; }
    .col-1020-5  { width: 41.66%; display: block; }
    .col-1020-6  { width: 50%; display: block; }
    .col-1020-7  { width: 58.33%; display: block; }
    .col-1020-8  { width: 66.66%; display: block; }
    .col-1020-9  { width: 75%; display: block; }
    .col-1020-10 { width: 83.33%; display: block; }
    .col-1020-11 { width: 91.66%; display: block; }
    .col-1020-12 { width: 100%; display: block; }
}

@media only screen and (min-width: 1200px) {
    *, html, body {
        font-size: 18px;
    }

    .col-1200-0  { width: 0; display: none; }
    .col-1200-1  { width: 8.33%; display: block; }
    .col-1200-2  { width: 16.66%; display: block; }
    .col-1200-3  { width: 25%; display: block; }
    .col-1200-4  { width: 33.33%; display: block; }
    .col-1200-5  { width: 41.66%; display: block; }
    .col-1200-6  { width: 50%; display: block; }
    .col-1200-7  { width: 58.33%; display: block; }
    .col-1200-8  { width: 66.66%; display: block; }
    .col-1200-9  { width: 75%; display: block; }
    .col-1200-10 { width: 83.33%; display: block; }
    .col-1200-11 { width: 91.66%; display: block; }
    .col-1200-12 { width: 100%; display: block; }
}