.show-grid {
  margin-top: 10px;
  margin-bottom: 20px;
}

.show-grid [class*="span"] {
  text-align: center;
  background-color: #eee;
  border-radius: 3px;
  min-height: 30px;
  line-height: 30px;
}

.show-grid:hover [class*="span"] {
  background: #ddd;
}

#dev-grid {
  z-index: 1000000;
  opacity: .2;
  display: none;
  position: fixed;
  inset: 0;
  overflow: hidden;
}

#dev-grid [class*="span"] {
  background-color: red;
  height: 1400px;
}

div.content {
  overflow: hidden;
}

.align-center {
  text-align: center;
}

.align-right {
  text-align: right;
}

.grid {
  width: 960px;
  margin-right: -20px;
  font-size: 0;
}

.grid > * {
  font-size: 1rem;
}

.grid .grid {
  text-align: left;
  margin-right: 0;
  font-size: 0;
}

[class*="span"] {
  vertical-align: top;
  margin-right: 20px;
  display: inline-block;
}

.grid .span1, .grid .fill1 {
  width: 60px;
}

.grid .span2, .grid .fill2 {
  width: 140px;
}

.grid .span3, .grid .fill3 {
  width: 220px;
}

.grid .span4, .grid .fill4 {
  width: 300px;
}

.grid .span5, .grid .fill5 {
  width: 380px;
}

.grid .span6, .grid .fill6 {
  width: 460px;
}

.grid .span7, .grid .fill7 {
  width: 540px;
}

.grid .span8, .grid .fill8 {
  width: 620px;
}

.grid .span9, .grid .fill9 {
  width: 700px;
}

.grid .span10, .grid .fill10 {
  width: 780px;
}

.grid .span11, .grid .fill11 {
  width: 860px;
}

.grid .span12, .grid .fill12 {
  width: 940px;
}

.show-grid.grid .grid {
  background-color: #ccc;
}

.show-grid.grid .grid [class*="span"] {
  background-color: #aaa;
}

.grid .grid > :last-child[class*="span"] {
  margin-right: 0;
}

.grid .grid.span11 {
  width: 880px;
}

.grid .grid.span10 {
  width: 800px;
}

.grid .grid.span9 {
  width: 720px;
}

.grid .grid.span8 {
  width: 640px;
}

.grid .grid.span7 {
  width: 560px;
}

.grid .grid.span6 {
  width: 480px;
}

.grid .grid.span5 {
  width: 400px;
}

.grid .grid.span4 {
  width: 320px;
}

.grid .grid.span3 {
  width: 240px;
}

.grid .grid.span2 {
  width: 160px;
}

.fill {
  width: 100%;
}

.skip0 {
  margin-left: 0;
}

.skip1 {
  margin-left: 80px;
}

.skip2 {
  margin-left: 160px;
}

.skip3 {
  margin-left: 240px;
}

.skip4 {
  margin-left: 320px;
}

.skip5 {
  margin-left: 400px;
}

.skip6 {
  margin-left: 480px;
}

.skip7 {
  margin-left: 560px;
}

.skip8 {
  margin-left: 640px;
}

.skip9 {
  margin-left: 720px;
}

.skip10 {
  margin-left: 800px;
}

.skip11 {
  margin-left: 880px;
}

.skip12 {
  margin-left: 960px;
}

.hidden {
  display: none;
}

.shown {
  display: inherit;
}

.invisible {
  visibility: hidden;
}

.visible {
  visibility: visible;
}

.align-left, .grid .align-left, .large-align-left, .grid .grid .align-left {
  text-align: left;
}

.align-right, .large-align-right, .grid .align-right, .grid .grid .align-right {
  text-align: right;
}

.align-center, .large-align-center, .grid .align-center, .grid .grid .align-center {
  text-align: center;
}

.grid .zero-margins {
  margin: 0;
}

@media (max-width: 979px) {
  .grid {
    width: 102%;
  }

  [class*="span"] {
    margin-right: 2%;
  }

  .grid .span12, .grid .medium-fill12, .grid .span11, .grid .medium-fill11, .grid .span10, .grid .medium-fill10, .grid .span9, .grid .medium-fill9, .grid .span8, .grid .medium-fill8, .grid .span7, .grid .medium-fill7, .span6, .grid .span6, .grid .medium-fill6 {
    width: 98%;
  }

  .span5, .grid .span5, .grid .medium-fill5 {
    width: 81.333%;
  }

  .span4, .grid .span4, .grid .medium-fill4 {
    width: 64.667%;
  }

  .span3, .grid .span3, .grid .medium-fill3 {
    width: 48%;
  }

  .span2, .grid .span2, .grid .medium-fill2 {
    width: 31.333%;
  }

  .span1, .grid .span1, .grid .medium-fill1 {
    width: 14.667%;
  }

  .grid .medium-span6 {
    width: 98%;
  }

  .grid .medium-span5 {
    width: 81.333%;
  }

  .grid .medium-span4 {
    width: 64.667%;
  }

  .grid .medium-span3 {
    width: 48%;
  }

  .grid .medium-span2 {
    width: 31.333%;
  }

  .grid .medium-span1 {
    width: 14.667%;
  }

  .grid .medium-span6.grid {
    width: 100%;
  }

  .grid .medium-span5.grid {
    width: 83.333%;
  }

  .grid .medium-span5.grid .medium-span4, .grid .medium-span5.grid .medium-fill4 {
    width: 78%;
  }

  .grid .medium-span5.grid .medium-span3, .grid .medium-span5.grid .medium-fill3 {
    width: 58%;
  }

  .grid .medium-span5.grid .medium-span2, .grid .medium-span5.grid .medium-fill2 {
    width: 38%;
  }

  .grid .medium-span5.grid .medium-span1, .grid .medium-span5.grid .medium-fill1 {
    width: 18%;
  }

  .grid .medium-span4.grid {
    width: 66.667%;
  }

  .grid .medium-span4.grid .medium-span3, .grid .medium-span4.grid .medium-fill3 {
    width: 73%;
  }

  .grid .medium-span4.grid .medium-span2, .grid .medium-span4.grid .medium-fill2 {
    width: 48%;
  }

  .grid .medium-span4.grid .medium-span1, .grid .medium-span4.grid .medium-fill1 {
    width: 23%;
  }

  .grid .medium-span3.grid {
    width: 50%;
  }

  .grid .medium-span3.grid .medium-span2, .grid .medium-span3.grid .medium-fill2 {
    width: 64.667%;
  }

  .grid .medium-span3.grid .medium-span1, .grid .medium-span3.grid .medium-fill1 {
    width: 31.333%;
  }

  .grid .medium-span2.grid {
    width: 33.333%;
  }

  .grid .medium-span2.grid .medium-span1, .grid .medium-span2.grid .medium-fill1 {
    width: 48%;
  }

  .skip1 {
    margin-left: 16.667%;
  }

  .skip2 {
    margin-left: 33%;
  }

  .skip3 {
    margin-left: 50%;
  }

  .skip4 {
    margin-left: 66.667%;
  }

  .skip5 {
    margin-left: 83.333%;
  }

  .skip6, .skip7, .skip8, .skip9, .skip10, .skip11, .skip12 {
    margin-left: 100%;
  }

  .medium-skip0 {
    margin-left: 0;
  }

  .medium-skip1 {
    margin-left: 16.667%;
  }

  .medium-skip2 {
    margin-left: 33%;
  }

  .medium-skip3 {
    margin-left: 50%;
  }

  .medium-skip4 {
    margin-left: 66.667%;
  }

  .medium-skip5 {
    margin-left: 83.333%;
  }

  .medium-skip6 {
    margin-left: 100%;
  }

  .grid .medium-collapse {
    width: auto;
  }

  .grid .medium-zero-margins {
    margin: 0;
  }

  .grid .medium-add-left-gutter {
    margin-left: 2%;
  }

  .grid .medium-add-right-gutter {
    margin-right: 2%;
  }

  .grid .medium-add-gutters {
    margin-left: 2%;
    margin-right: 2%;
  }

  .grid .medium-span6.medium-add-gutters {
    width: 94%;
  }

  .medium-hidden {
    display: none;
  }

  .medium-shown {
    display: inherit;
  }

  .medium-invisible {
    visibility: hidden;
  }

  .medium-visible {
    visibility: visible;
  }

  .medium-align-right, .grid .medium-align-right {
    text-align: right;
  }

  .medium-align-left, .grid .medium-align-left {
    text-align: left;
  }

  .medium-align-center, .grid .medium-align-center {
    text-align: center;
  }
}

@media (max-width: 679px) {
  .grid {
    width: 103%;
  }

  [class*="span"] {
    margin-right: 3%;
  }

  .grid .span12, .grid .span11, .grid .span10, .grid .span9, .grid .span8, .grid .span7, .grid .span6, .grid .span5, .span4, .grid .span4 {
    width: 97%;
  }

  .span3, .grid .span3 {
    width: 72%;
  }

  .span2, .grid .span2 {
    width: 47%;
  }

  .span1, .grid .span1 {
    width: 22%;
  }

  .grid .small-span4, .grid .small-fill4, .grid .small-fill {
    width: 97%;
  }

  .grid .small-span3, .grid .small-fill3 {
    width: 72%;
  }

  .grid .small-span2point5, .grid .small-fill2point5 {
    width: 63.667%;
  }

  .grid .small-span2, .grid .small-fill2 {
    width: 47%;
  }

  .grid .small-span1point5, .grid .small-fill1point5 {
    width: 30.333%;
  }

  .grid .small-span1, .grid .small-fill1 {
    width: 22%;
  }

  .grid .small-span4.grid {
    width: 100%;
  }

  .grid .small-span4.grid .small-span4, .grid .small-span4.grid .small-fill4 {
    width: 97%;
  }

  .grid .small-span4.grid .small-span3, .grid .small-span4.grid .small-fill3 {
    width: 72%;
  }

  .grid .small-span4.grid .small-span2, .grid .small-span4.grid .small-fill2 {
    width: 47%;
  }

  .grid .small-span4.grid .small-span1point5, .grid .small-span4.grid .small-fill1point5 {
    width: 34.5%;
  }

  .grid .small-span4.grid .small-span1, .grid .small-span4.grid .small-fill1 {
    width: 22%;
  }

  .grid .small-span3.grid {
    width: 75%;
  }

  .grid .small-span3.grid .small-span3, .grid .small-span3.grid .small-fill3, .grid .small-span3.grid .small-span2, .grid .small-span3.grid .small-fill2 {
    width: 63.667%;
  }

  .grid .small-span3.grid .small-span1point5, .grid .small-span3.grid .small-fill1point5 {
    width: 47%;
  }

  .grid .small-span3.grid .small-span1, .grid .small-span3.grid .small-fill1 {
    width: 30.333%;
  }

  .grid .small-span2.grid {
    width: 50%;
  }

  .grid .small-span2.grid .small-span2, .grid .small-span2.grid .small-fill2 {
    width: 97%;
  }

  .grid .small-span2.grid .small-span1, .grid .small-span2.grid .small-fill1 {
    width: 47%;
  }

  .grid .small-collapse {
    width: auto;
  }

  .grid .small-zero-margins {
    margin: 0;
  }

  .skip1 {
    margin-left: 25%;
  }

  .skip2 {
    margin-left: 50%;
  }

  .skip3 {
    margin-left: 75%;
  }

  .skip4, .skip5, .skip6 {
    margin-left: 100%;
  }

  .small-skip0 {
    margin-left: 0;
  }

  .small-skip1 {
    margin-left: 25%;
  }

  .small-skip2 {
    margin-left: 50%;
  }

  .small-skip3 {
    margin-left: 75%;
  }

  .small-skip4, .small-skip5, .small-skip6 {
    margin-left: 100%;
  }

  .small-skip1point5 {
    margin-left: 33.3333%;
  }

  .small-skip2point5 {
    margin-left: 66.6667%;
  }

  .grid .small-add-left-gutter {
    margin-left: 3%;
  }

  .grid .small-add-right-gutter {
    margin-right: 3%;
  }

  .grid .small-add-gutters {
    margin-left: 3%;
    margin-right: 3%;
  }

  .grid .small-span4.small-add-gutters {
    width: 91%;
  }

  .small-hidden {
    display: none;
  }

  .small-shown {
    display: inherit;
  }

  .small-invisible {
    visibility: hidden;
  }

  .small-visible {
    visibility: visible;
  }

  .small-align-right, .grid .small-align-right {
    text-align: right;
  }

  .small-align-left, .grid .small-align-left {
    text-align: left;
  }

  .small-align-center, .grid .small-align-center {
    text-align: center;
  }
}