/**
*** SIMPLE GRID
*** (C) ZACH COLE 2016
**/
/* ==== GRID SYSTEM ==== */

.sp-container {
  box-sizing: border-box;
  width: 100%;
  /*padding-right: calc(1.5rem * .5);*/
  /*padding-left: calc(1.5rem * .5);*/
  padding-right: 0;
  padding-left: 0;
  margin-right: auto;
  margin-left: auto;
}

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

.sp-row {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  margin-top: 0;
  margin-right: calc(-0.5 * 1.5rem);
  margin-left: calc(-0.5 * 1.5rem);
}

.sp-row > * {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(1.5rem * 0.5);
  padding-left: calc(1.5rem * 0.5);
  margin-top: 0.25rem;
}

.sp-col {
  flex: 1 0 0%;
}

.sp-col-1 {
  flex: 0 0 auto;
  width: 8.33333333%;
}

.sp-col-2 {
  flex: 0 0 auto;
  width: 16.66666667%;
}

.sp-col-3 {
  flex: 0 0 auto;
  width: 25%;
}

.sp-col-4 {
  flex: 0 0 auto;
  width: 33.33333333%;
}

.sp-col-5 {
  flex: 0 0 auto;
  width: 41.66666667%;
}

.sp-col-6 {
  flex: 0 0 auto;
  width: 50%;
}

.sp-col-7 {
  flex: 0 0 auto;
  width: 58.33333333%;
}

.sp-col-8 {
  flex: 0 0 auto;
  width: 66.66666667%;
}

.sp-col-9 {
  flex: 0 0 auto;
  width: 75%;
}

.sp-col-10 {
  flex: 0 0 auto;
  width: 83.33333333%;
}

.sp-col-11 {
  flex: 0 0 auto;
  width: 91.66666667%;
}

.sp-col-12 {
  flex: 0 0 auto;
  width: 100%;
}

.sp-row::after {
	content: "";
	display: table;
	clear: both;
}

@media (max-width: 950px) {
  .sp-col-6 {
    flex: 0 0 auto;
    width: 100%;
  }
}