/* ========================================================
   grid.css — Lightweight 12-column float grid
   Only the column widths actually used on this site are
   included. Add more as needed.
   ======================================================== */

*, *::before, *::after {
  box-sizing: border-box;
}

.inline-block {
  max-width: 100%;
  display: inline-block;
}

/* ---- Container ---- */
.container {
  margin-left: auto;
  margin-right: auto;
  max-width: 940px;
}
.container::before,
.container::after {
  content: " ";
  display: table;
}
.container::after {
  clear: both;
}

/* ---- Row ---- */
.container .row {
  margin-left: -10px;
  margin-right: -10px;
}
.row::before,
.row::after {
  content: " ";
  display: table;
}
.row::after {
  clear: both;
}
.row .row {
  margin-left: 0;
  margin-right: 0;
}

/* ---- Columns ---- */
.col {
  position: relative;
  float: left;
  width: 100%;
  min-height: 1px;
  padding-left: 10px;
  padding-right: 10px;
}
.col .col {
  padding-left: 0;
  padding-right: 0;
}

.col-3  { width: 25%; }
.col-4  { width: 33.333333%; }
.col-6  { width: 50%; }
.col-8  { width: 66.666666%; }
.col-9  { width: 75%; }

/* ---- Tablet (≤ 991px) ---- */
@media screen and (max-width: 991px) {
  .container {
    max-width: 728px;
  }
}

/* ---- Mobile landscape (≤ 767px) ---- */
@media screen and (max-width: 767px) {
  .row,
  .container .row {
    margin-left: 0;
    margin-right: 0;
  }
  .col {
    width: 100%;
    left: auto;
    right: auto;
  }
}

/* ---- Mobile portrait (≤ 479px) ---- */
@media screen and (max-width: 479px) {
  .container {
    max-width: none;
  }
  .col {
    width: 100%;
  }
}