.logo {
  position: relative;
  top: -0.5em;
  a {
    text-decoration: none;
    color: #2B2B2D;
    &:visited {
      text-decoration: none;
      color: #2B2B2D;
    }
  }
  img {
    height: 2em;
    position: relative;
    top: 0.55em;
    margin-right: 0.3em;
  }
}

.snippet-container {
  margin-top: 10px;
}

.desktop-only, .hide-on-desktop, .ipad-only, .hide-on-ipad, .small-tablet-only, .hide-on-small-tablet, .mobile-only, .hide-on-mobile {
  padding: 0.25em;
  color: #fff;
}

.demo {
  .row {
    background: #f6f6f6 url("#{image-path('groundworkcss/diag6-black.png')}") center repeat;
    div {
      background: #eee;
      border: 1px dashed #ddd;
    }
  }
  .whole, .half, .halves, .third, .thirds, .fourth, .fourths, .fifth, .fifths, .sixth, .sixths, .seventh, .sevenths, .eighth, .eighths, .ninth, .ninths, .tenth, .tenths, .eleventh, .elevenths, .twelfth, .twelfths {
    text-align: center;
    min-height: 1em;
    padding-top: 10px;
    padding-bottom: 10px;
    background: #1abc9c;
    border: 1px dashed white;
    margin-top: -1px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.25), 5px, 0, 0;
    -moz-box-shadow: rgba(0, 0, 0, 0.25), 5px, 0, 0;
    box-shadow: rgba(0, 0, 0, 0.25), 5px, 0, 0;
    color: white;
    font-size: 0.8em;
  }
  .row:not(.equalize) {
    .whole, .half, .halves, .third, .thirds, .fourth, .fourths, .fifth, .fifths, .sixth, .sixths, .seventh, .sevenths, .eighth, .eighths, .ninth, .ninths, .tenth, .tenths, .eleventh, .elevenths, .twelfth, .twelfths {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  .whole.small-tablet, .half.small-tablet, .halves.small-tablet, .third.small-tablet, .thirds.small-tablet, .fourth.small-tablet, .fourths.small-tablet, .fifth.small-tablet, .fifths.small-tablet, .sixth.small-tablet, .sixths.small-tablet, .seventh.small-tablet, .sevenths.small-tablet, .eighth.small-tablet, .eighths.small-tablet, .ninth.small-tablet, .ninths.small-tablet, .tenth.small-tablet, .tenths.small-tablet, .eleventh.small-tablet, .elevenths.small-tablet, .twelfth.small-tablet, .twelfths.small-tablet {
    background: #3498db;
  }
  .whole.mobile, .half.mobile, .halves.mobile, .third.mobile, .thirds.mobile, .fourth.mobile, .fourths.mobile, .fifth.mobile, .fifths.mobile, .sixth.mobile, .sixths.mobile, .seventh.mobile, .sevenths.mobile, .eighth.mobile, .eighths.mobile, .ninth.mobile, .ninths.mobile, .tenth.mobile, .tenths.mobile, .eleventh.mobile, .elevenths.mobile, .twelfth.mobile, .twelfths.mobile {
    background: #2ecc71;
  }
  &.reordering {
    .whole, .half, .halves, .third, .thirds, .fourth, .fourths, .fifth, .fifths, .sixth, .sixths, .seventh, .sevenths, .eighth, .eighths, .ninth, .ninths, .tenth, .tenths, .eleventh, .elevenths, .twelfth, .twelfths {
      background: #e74c3c;
    }
  }
  &.centering {
    .whole, .half, .halves, .third, .thirds, .fourth, .fourths, .fifth, .fifths, .sixth, .sixths, .seventh, .sevenths, .eighth, .eighths, .ninth, .ninths, .tenth, .tenths, .eleventh, .elevenths, .twelfth, .twelfths {
      background: #f1c40f;
    }
  }
  &.offsetting {
    .whole, .half, .halves, .third, .thirds, .fourth, .fourths, .fifth, .fifths, .sixth, .sixths, .seventh, .sevenths, .eighth, .eighths, .ninth, .ninths, .tenth, .tenths, .eleventh, .elevenths, .twelfth, .twelfths {
      background: #34495e;
    }
  }
  &.equal-columns {
    .whole, .half, .halves, .third, .thirds, .fourth, .fourths, .fifth, .fifths, .sixth, .sixths, .seventh, .sevenths, .eighth, .eighths, .ninth, .ninths, .tenth, .tenths, .eleventh, .elevenths, .twelfth, .twelfths {
      background: #3498db;
    }
  }
  .two-up-ipad {
    &.whole, &.half, &.halves, &.third, &.thirds, &.fourth, &.fourths, &.fifth, &.fifths, &.sixth, &.sixths, &.seventh, &.sevenths, &.eighth, &.eighths, &.ninth, &.ninths, &.tenth, &.tenths, &.eleventh, &.elevenths, &.twelfth, &.twelfths {
      background: #f1c40f;
    }
  }
  .two-up-small-tablet {
    &.whole, &.half, &.halves, &.third, &.thirds, &.fourth, &.fourths, &.fifth, &.fifths, &.sixth, &.sixths, &.seventh, &.sevenths, &.eighth, &.eighths, &.ninth, &.ninths, &.tenth, &.tenths, &.eleventh, &.elevenths, &.twelfth, &.twelfths {
      background: #e67e22;
    }
  }
  .two-up-mobile {
    &.whole, &.half, &.halves, &.third, &.thirds, &.fourth, &.fourths, &.fifth, &.fifths, &.sixth, &.sixths, &.seventh, &.sevenths, &.eighth, &.eighths, &.ninth, &.ninths, &.tenth, &.tenths, &.eleventh, &.elevenths, &.twelfth, &.twelfths {
      background: #f02475;
    }
    &.three-up-small-tablet {
      background: #9b59b6;
    }
  }
}