.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%));
  }
}