* {
  box-sizing: border-box;
}


.row {
  max-width: 1000px;
  /* padding-left: 20px;
  padding-right: 20px; */
  margin: 0 auto;
}

/* Clearfix */
.row::before,
.row::after {
  display: table;
  content: '';
}

.row::after {
  clear: both;
}

.col-3, .col-4, .col-6, .col-12 {
  float: left;
}
@media only screen and (min-width: 300px) {
.row {
    width: 100%;
  }
}
  /* Gutters:
   * Each column padded by half gutter on each side,
   *
   * Half of one gutter is 10px, 10/960 (context) = 1.041666%
   *
   */
  padding-left: 1.04166666%;
  padding-right: 1.04166666%;
}

[class*="col-"] {
    float: left;
    padding: 15px;
    
}

/* Mobile defaults */
.col-3, .col-4, .col-6, .col-12 {
  width: 100%;
}


/* Non-mobile, grid */
@media only screen and (min-width: 640px) {
  /* 3 columns, 3/12 in % */
  .col-3 {
    width: 25%;
  }

  /* 4 columns, 4/12 in % */
  .col-4 {
    width: 33.333333%;
  }

  /* 6 columns, 6/12 in % */
  .col-6 {
    width: 50%;
  }

  /* 12 columns, 12/12 in % */
  .col-12 {
    width: 100%;
  }
}