.settings {
  _default-settings: '("grids": (-1px: 12), "gutters": (-1px: 0.25), "gutter styles": (-1px: "opposite"), "output": "isolation", "direction": "ltr", "mobile first": true, "include border box": false, "include clearfix": false, "background grid color": chocolate, "asymmetric output": "isolation", "calc include min-width": true, "debug": false)';
  _user-settings: '("grids": (-1px: 300px 1 3, 500px: 2 100px 1 5 200px, 700px: 1 3 5 7), "gutters": (-1px: 10px, 500px: 1em, 700px: 3%), "gutter styles": (-1px: "split", 700px: "opposite"))'; }

.calc-span {
  _grid: 300px 1 3;
  _gutter: 10px;
  _gutter-style: "split";
  _calc-span-start: "@include calc-span(1, 1)";
  width: 300px;
  float: left;
  margin-right: -100%;
  margin-left: 5px;
  _calc-span-end: "@include calc-span(1, 3)";
  width: -webkit-calc((((100% - (300px + 30px)) / (4))) * 3);
  width: calc((((100% - (300px + 30px)) / (4))) * 3);
  float: right;
  margin-left: 0;
  margin-right: 5px;
  _calc-span-multiple: "@include calc-span(2, 2)";
  width: -webkit-calc((((100% - (300px + 30px)) / (4)) * 1 + 10px) + (((100% - (300px + 30px)) / (4)) * 3));
  width: calc((((100% - (300px + 30px)) / (4)) * 1 + 10px) + (((100% - (300px + 30px)) / (4)) * 3));
  float: right;
  margin-left: 0;
  margin-right: 5px; }
  @media (min-width: 499px) {
    .calc-span {
      _grid: 300px 1 3;
      _gutter: 10px;
      _gutter-style: "split";
      _calc-span-start: "@include calc-span(1, 1)";
      width: 300px;
      float: left;
      margin-right: -100%;
      margin-left: 5px;
      _calc-span-end: "@include calc-span(1, 3)";
      width: -webkit-calc((((100% - (300px + 30px)) / (4))) * 3);
      width: calc((((100% - (300px + 30px)) / (4))) * 3);
      float: right;
      margin-left: 0;
      margin-right: 5px;
      _calc-span-multiple: "@include calc-span(2, 2)";
      width: -webkit-calc((((100% - (300px + 30px)) / (4)) * 1 + 10px) + (((100% - (300px + 30px)) / (4)) * 3));
      width: calc((((100% - (300px + 30px)) / (4)) * 1 + 10px) + (((100% - (300px + 30px)) / (4)) * 3));
      float: right;
      margin-left: 0;
      margin-right: 5px; } }
  @media (min-width: 500px) {
    .calc-span {
      _grid: 2 100px 1 5 200px;
      _gutter: 1em;
      _gutter-style: "split";
      _calc-span-start: "@include calc-span(1, 1)";
      width: -webkit-calc((((100% - (300px + 5em)) / (8))) * 2);
      width: calc((((100% - (300px + 5em)) / (8))) * 2);
      float: left;
      margin-right: -100%;
      margin-left: 0.5em;
      _calc-span-end: "@include calc-span(1, 5)";
      width: 200px;
      float: right;
      margin-left: 0;
      margin-right: 0.5em;
      _calc-span-multiple: "@include calc-span(2, 2)";
      min-width: -webkit-calc((100px + 1em - 1em));
      min-width: calc((100px + 1em - 1em));
      width: -webkit-calc((100px + 1em) + (((100% - (300px + 5em)) / (8)) * 1));
      width: calc((100px + 1em) + (((100% - (300px + 5em)) / (8)) * 1));
      float: left;
      margin-right: -100%;
      margin-left: -webkit-calc(0.5em + (((100% - (300px + 5em)) / (8)) * 2 + 1em));
      margin-left: calc(0.5em + (((100% - (300px + 5em)) / (8)) * 2 + 1em)); } }
  @media (min-width: 699px) {
    .calc-span {
      _grid: 2 100px 1 5 200px;
      _gutter: 1em;
      _gutter-style: "split";
      _calc-span-start: "@include calc-span(1, 1)";
      width: -webkit-calc((((100% - (300px + 5em)) / (8))) * 2);
      width: calc((((100% - (300px + 5em)) / (8))) * 2);
      float: left;
      margin-right: -100%;
      margin-left: 0.5em;
      _calc-span-end: "@include calc-span(1, 5)";
      width: 200px;
      float: right;
      margin-left: 0;
      margin-right: 0.5em;
      _calc-span-multiple: "@include calc-span(2, 2)";
      min-width: -webkit-calc((100px + 1em - 1em));
      min-width: calc((100px + 1em - 1em));
      width: -webkit-calc((100px + 1em) + (((100% - (300px + 5em)) / (8)) * 1));
      width: calc((100px + 1em) + (((100% - (300px + 5em)) / (8)) * 1));
      float: left;
      margin-right: -100%;
      margin-left: -webkit-calc(0.5em + (((100% - (300px + 5em)) / (8)) * 2 + 1em));
      margin-left: calc(0.5em + (((100% - (300px + 5em)) / (8)) * 2 + 1em)); } }
  @media (min-width: 700px) {
    .calc-span {
      _grid: 1 3 5 7;
      _gutter: 3%;
      _gutter-style: "opposite";
      _calc-span-start: "@include calc-span(1, 1)";
      width: -webkit-calc((((100% - (9%)) / (16))) * 1);
      width: calc((((100% - (9%)) / (16))) * 1);
      float: left;
      margin-right: -100%;
      margin-left: 0;
      _calc-span-end: "@include calc-span(1, 4)";
      width: -webkit-calc((((100% - (9%)) / (16))) * 7);
      width: calc((((100% - (9%)) / (16))) * 7);
      float: right;
      margin-left: 0;
      margin-right: 0;
      _calc-span-multiple: "@include calc-span(2, 2)";
      width: -webkit-calc((((100% - (9%)) / (16)) * 3 + 3%) + (((100% - (9%)) / (16)) * 5));
      width: calc((((100% - (9%)) / (16)) * 3 + 3%) + (((100% - (9%)) / (16)) * 5));
      float: left;
      margin-right: -100%;
      margin-left: -webkit-calc((((100% - (9%)) / (16)) * 1 + 3%));
      margin-left: calc((((100% - (9%)) / (16)) * 1 + 3%)); } }
