/* GRID
 ============================================================== */

.row {
  width: $layout-width;
  display: table;
  table-layout: fixed;
  margin: $auto-margin;
}

.col,
[class*='col-'] {
  display: table-cell;
  width: 100%;
  padding: 1%;
}

.col-no-padding {
  padding: 0;
}

.col-1 {
  width: 8.333333%;
}

.col-2 {
  width: 16.666667%;
}

.col-3 {
  width: 25%;
}

.col-4 {
  width: 33.333333%;
}

.col-5 {
  width: 41.666667%;
}

.col-6 {
  width: 50%;
}

.col-7 {
  width: 58.333333%;
}

.col-8 {
  width: 66.666667%;
}

.col-9 {
  width: 75%;
}

.col-10 {
  width: 83.333333%;
}

.col-11 {
  width: 91.666667%;
}

.col-12 {
  width: 100%;
}

 .center {
  text-align: center;
}

.left {
  text-align: left;
}

.right {
  text-align: right;
}

.middle {
  vertical-align: middle;
}

.top {
  vertical-align: top;
}

.bottom {
  vertical-align: bottom;
}