.row:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.row {
  clear: both;
}

.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {
  float: left;
  margin: 0 3% 0 0;
}

.row > [class^='col']:last-child, .row .last, .last {
  margin-right: 0;
}

.col1 { width: 5.5%; }
.col2 { width: 14%; }
.col3 { width: 22.5%; }
.col4 { width: 31%; }
.col5 { width: 39.5%; }
.col6 { width: 48%; }
.col7 { width: 56.5%; }
.col8 { width: 65%; }
.col9 { width: 73.5%; }
.col10 { width: 82%; }
.col11 { width: 90.5%; }
.col12 { width: 100%; margin: 0; }

@media all and (min-width: 0px) and (max-width: 767px) {
  .col1 img, .col2 img, .col3 img, .col4 img, .col5 img, .col6 img, .col7 img, .col8 img, .col9 img, .col10 img, .col11 img, .col12 img {
    width: 100%;
    height: auto;
    display: block;
  }
  .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {
    float: none;
    width: 100%;
    margin-bottom:10px; 
  }
}