/* -------------------------------------------------------------------- 
   The grid
   --------
   Default mobile: Simple two column fluid grid for mobile.
   Desktop/tablet: Simple twelve column fluid grid.
   -------------------------------------------------------------------- */

.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 2%;
  padding-right: 2%;
}
.column-group {
  width: auto;
}
.column {
  padding-left: 15px;
  padding-right: 15px;
  float: left;
}
/* Lines nested grids up correctly. */
.column .column-group {
  margin-left: -15px;
  margin-right: -15px;
}
.units-1 { width: 50%; }
.units-2 { width: 100%; }

/* Offsets */
.offset-1 { margin-left: 50%; }


/* Tablet to desktop 
------------------------------- */

 @media screen and (min-width: 768px) {
  .container {
    padding: 0;
    max-width: 940px;
  }
  .column {
    padding-left: 20px;
    padding-right: 20px;
  }
  /* Lines nested grids up correctly. */
  .column .column-group {
    margin-left: -20px;
    margin-right: -20px;
  }

  /* Override the mobile grid */
  .units-1 { width: 50%; }
  .units-2 { width: 100%; }

  /* Twelve column fluid grid */
  .lg-units-1  { width: 8.333%; }
  .lg-units-2  { width: 16.666%; }
  .lg-units-3  { width: 25%; }
  .lg-units-4  { width: 33.333%; }
  .lg-units-5  { width: 41.666%; }
  .lg-units-6  { width: 50%; }
  .lg-units-7  { width: 58.333%; }
  .lg-units-8  { width: 66.666%; }
  .lg-units-9  { width: 75%; }
  .lg-units-10 { width: 83.333%; }
  .lg-units-11 { width: 91.666%; }
  .lg-units-12 { width: 100%; }

  /* Offsets */
  .lg-offset-1     { margin-left: 8.333%; }
  .lg-offset-2     { margin-left: 16.666%; }
  .lg-offset-3     { margin-left: 25%; }
  .lg-offset-4     { margin-left: 33.333%; }
  .lg-offset-5     { margin-left: 41.666%; }
  .lg-offset-6     { margin-left: 50%; }
  .lg-offset-7     { margin-left: 58.333%; }
  .lg-offset-8     { margin-left: 66.666%; }
  .lg-offset-9     { margin-left: 75%; }
  .lg-offset-10    { margin-left: 83.333%; }
  .lg-offset-11    { margin-left: 91.666%; }
}


/* Standard sized screens to large screens 
------------------------------------------ */

@media screen and (min-width: 1200px) {
  .container {
    max-width: 1170px;
  }
  .column {
    padding-left: 30px;
    padding-right: 30px;
  }
  /* Lines nested grids up correctly. */
  .column .column-group {
    margin-left: -30px;
    margin-right: -30px;
  }
}


/* Clear all the things! Thanks @necolas. 
----------------------------------------- */

.column-group,
.clearfix {
  *zoom: 1;
}
.column-group:before,
.column-group:after,
.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}
.column-group:after,
.clearfix:after {
  clear: both;
}
/* You can also use a <br class="clear"> */
.clear {
  display: block;
  width: 0;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  clear: both;
}