.GridRulers {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 100000;
  pointer-events: none; }
  .GridRulers:target {
    display: block; }
  .GridRulers:after {
    display: block;
    z-index: 100000;
    position: fixed;
    bottom: 0;
    right: 0;
    padding: 10px;
    background-color: #9248a6;
    color: white;
    font-weight: bold;
    font-family: sans-serif;
    font-size: 16px; }
    @media (min-width: 1439px) {
      .GridRulers:after {
        content: "XL"; } }
    @media (min-width: 1209px) and (max-width: 1438px) {
      .GridRulers:after {
        content: "L"; } }
    @media (min-width: 979px) and (max-width: 1208px) {
      .GridRulers:after {
        content: "M"; } }
    @media (min-width: 763px) and (max-width: 978px) {
      .GridRulers:after {
        content: "S"; } }
    @media (max-width: 762px) {
      .GridRulers:after {
        content: "XS"; } }
  .GridRulers, .GridRulers * {
    box-sizing: border-box; }
  .GridRulers .columns {
    height: 100%;
    white-space: nowrap; }
    @media (min-width: 1439px) {
      .GridRulers .columns {
        width: 1389px;
        margin-left: auto;
        margin-right: auto; } }
    @media (min-width: 1209px) and (max-width: 1438px) {
      .GridRulers .columns {
        width: 1159px;
        margin-left: auto;
        margin-right: auto; } }
    @media (min-width: 979px) and (max-width: 1208px) {
      .GridRulers .columns {
        width: 929px;
        margin-left: auto;
        margin-right: auto; } }
    @media (min-width: 763px) and (max-width: 978px) {
      .GridRulers .columns {
        width: 713px;
        margin-left: auto;
        margin-right: auto; } }
    @media (max-width: 762px) {
      .GridRulers .columns {
        width: auto; } }
    .GridRulers .columns .column {
      height: 100%;
      display: inline-block;
      vertical-align: top; }
      .GridRulers .columns .column .column_body {
        display: inline-block;
        vertical-align: top;
        height: 100%;
        border-left: 1px solid #9248a6;
        background-color: rgba(189, 136, 204, 0.3); }
        @media (min-width: 1439px) {
          .GridRulers .columns .column .column_body {
            width: 80px; } }
        @media (min-width: 1209px) and (max-width: 1438px) {
          .GridRulers .columns .column .column_body {
            width: 59px; } }
        @media (min-width: 979px) and (max-width: 1208px) {
          .GridRulers .columns .column .column_body {
            width: 60px; } }
        @media (min-width: 763px) and (max-width: 978px) {
          .GridRulers .columns .column .column_body {
            width: 42px; } }
        @media (max-width: 762px) {
          .GridRulers .columns .column .column_body {
            width: 32px; } }
      .GridRulers .columns .column .column_spacing {
        display: inline-block;
        vertical-align: top;
        height: 100%;
        border-left: 1px dotted #9248a6; }
        @media (min-width: 1439px) {
          .GridRulers .columns .column .column_spacing {
            width: 39px; } }
        @media (min-width: 1209px) and (max-width: 1438px) {
          .GridRulers .columns .column .column_spacing {
            width: 41px; } }
        @media (min-width: 979px) and (max-width: 1208px) {
          .GridRulers .columns .column .column_spacing {
            width: 19px; } }
        @media (min-width: 763px) and (max-width: 978px) {
          .GridRulers .columns .column .column_spacing {
            width: 19px; } }
        @media (max-width: 762px) {
          .GridRulers .columns .column .column_spacing {
            width: 8px; } }
      .GridRulers .columns .column:last-child {
        border-right: 1px solid #9248a6; }

/*# sourceMappingURL=gridrulers.default.scss.map */