/* Layout - 16 column grid, fluid width, 20px gutters
-------------------------------------------------------------- */

/* grid widths */
.grid16-1 {width: 6.25%;}
.grid16-2 {width: 12.5%;}
.grid16-3 {width: 18.75%;}
.grid16-4 {width: 25%;}
.grid16-5 {width: 31.25%;}
.grid16-6 {width: 37.5%;}
.grid16-7 {width: 43.75%;}
.grid16-8 {width: 50%;}
.grid16-9 {width: 56.25%;}
.grid16-10 {width: 62.5%;}
.grid16-11 {width: 68.75%;}
.grid16-12 {width: 75%;}
.grid16-13 {width: 81.25%;}
.grid16-14 {width: 87.5%;}
.grid16-15 {width: 93.75%;}
.grid16-16 {width: 100%;}

.row:not(.nested) {
  --_gutter: var(--row-gutter, 1em);
  padding-left: var(--_gutter);
  padding-right: var(--_gutter);
  box-sizing: border-box;
}

#preface-top {
  padding-left: 0;
  padding-right: 0;
}

/* page min width */
body,
.full-width {
  min-width: var(--row-min-width);
}

/* row max-min width */
.row {
  max-width: var(--row-max-width);
  min-width: var(--row-min-width);
}

/* allow nested rows to be smaller */
.row.nested {
  min-width: 0;
}

.full-width .grid16-16 {width: 100%;}

/* now reset all nested full-width elements back to 100% */
#page .grid16-16 .grid16-16 {width: 100%;}

/* Grid overrides.
 -------------------------------------------------------------- */
@media (max-width: 996px) {
  /*reset grids to 100% */
  body,
  .full-width,
  .grid16-1,
  .grid16-2,
  .grid16-3,
  .grid16-4,
  .grid16-5,
  .grid16-6,
  .grid16-7,
  .grid16-8,
  .grid16-9,
  .grid16-10,
  .grid16-11,
  .grid16-12,
  .grid16-13,
  .grid16-14,
  .grid16-15,
  .grid16-16 {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0;
  }
}