.row {
  display: -webkit-flex;
  display: flex;

  -webkit-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
}

.span {
  padding: 8px;
  box-sizing: border-box;

  -webkit-flex: 1 1 8%;
          flex: 1 1 8%;
}

/* nested grids */
.row .row,
.row.nested {
  -webkit-flex: 1 1 auto;
          flex: 1 1 auto;
}

/* full width grids */
.row-wide { margin-left: -8px; margin-right: -8px; }
.row-wide:first-child .span { padding-top: 0; }
.row-wide:last-child .span { padding-bottom: 0; }

.row-merge .span { padding-top: 0; padding-bottom: 0; }
.row-merge:first-child .span { padding-top: 8px; }

/* center grids */
.row.center {
  -webkit-justify-content: center;
          justify-content: center;
}
.center .span {
  -webkit-flex-grow: 0;
          flex-grow: 0;
  -webkit-flex-shrink: 0;
          flex-shrink: 0;
}

/* columns widths */
.span-1  {
  -webkit-flex-basis: 8.3333%;
          flex-basis: 8.3333%;
}
.span-2  {
  -webkit-flex-basis: 16.6666%;
          flex-basis: 16.6666%;
}
.span-3  {
  -webkit-flex-basis: 25%;
          flex-basis: 25%;
}
.span-4  {
  -webkit-flex-basis: 33.3333%;
          flex-basis: 33.3333%;
}
.span-5  {
  -webkit-flex-basis: 41.6666%;
          flex-basis: 41.6666%;
}
.span-6  {
  -webkit-flex-basis: 50%;
          flex-basis: 50%;
}
.span-7  {
  -webkit-flex-basis: 58.3333%;
          flex-basis: 58.3333%;
}
.span-8  {
  -webkit-flex-basis: 66.6666%;
          flex-basis: 66.6666%;
}
.span-9  {
  -webkit-flex-basis: 75%;
          flex-basis: 75%;
}
.span-10 {
  -webkit-flex-basis: 83.3333%;
          flex-basis: 83.3333%;
}
.span-11 {
  -webkit-flex-basis: 91.6666%;
          flex-basis: 91.6666%;
}
.span-12 {
  -webkit-flex-basis: 100%;
          flex-basis: 100%;
}


@media all and (max-width: 1000px) {
  .span-1, .span-2, .span-3, .span-4, .span-5 {
    -webkit-flex-basis: 50%;
            flex-basis: 50%;
  }
  .span-6,
  .span-7,
  .span-8,
  .span-9,
  .span-10,
  .span-11,
  .nested .col {
    -webkit-flex-basis: 100%;
            flex-basis: 100%;
  }
}


/*.row { background-color: rgba(0, 0, 0, 0.1); }
.span {
  background-color: rgba(0, 0, 0, 0.1);
  background-clip: content-box;
  box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.1);
}
*/