.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  font-family: Helvetica, Arial,sans-serif;
}

.row {
  position: relative;
  width: 100%;
}

.row [class^="col"] {
  float: left;
  min-height: 0.125rem;
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 { width: 96%; }


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



@media only screen and (min-width: 45em) {  /* 720px */
  .col-1 {width: 4.33%;}
  .col-2 {width: 12.66%;}
  .col-3 {width: 21%;}
  .col-4 {width: 29.33%;}
  .col-5 {width: 37.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 54.33%;}
  .col-8 {width: 62.66%;}
  .col-9 {width: 71%;}
  .col-10 {width: 79.33%;}
  .col-11 {width: 87.66%;}
  .col-12 {width: 96%;}

}