/*! Supernews UI - Objects */

/***
  name: Grid
  description: Grid system
  example: |
    <ul class="o-grid">
      <li class="o-grid__cell-size-4">
        <strong>This is column one content</strong>
      </li>
      <li class="o-grid__cell-size-4">
        <strong>This is column two content</strong>
      </li>
      <li class="o-grid__cell-size-4">
        <strong>This is column three content</strong>
      </li>
    </ul>
***/

.o-grid,
[class*="o-grid--"] {
  display: table; /* FAQ: Fallback for IE8/9 to better align content to column center */
  display: flex;
  flex-flow: row wrap;
  margin: -15px -16px;
  align-items: stretch;
  justify-content: center;
  padding: 0;
}
.o-grid--no-spacing {
  padding: 0;
  margin-left: 0;
  margin-right: 0;
}
.o-grid--align-items-middle {
  align-items: center;
}

[class*="o-grid__cell-size"] {
  vertical-align: top; /* FAQ: Fallback for IE9< */
  margin: 15px 16px;
}
.o-grid--no-spacing>[class*="o-grid__cell-size"] {
  margin-left: 0;
  margin-right: 0;
}

.o-grid__cell-order-1 {
  -webkit-order: 1;
  -ms-flex-order: 1;
  order: 1;
}
.o-grid__cell-order-2 {
  -webkit-order: 2;
  -ms-flex-order: 2;
  order: 2;
}
.o-grid__cell-order-3 {
  -webkit-order: 3;
  -ms-flex-order: 3;
  order: 3;
}
.o-grid__cell-order-4 {
  -webkit-order: 4;
  -ms-flex-order: 4;
  order: 4;
}
.o-grid__cell-order-5 {
  -webkit-order: 5;
  -ms-flex-order: 5;
  order: 5;
}
.o-grid__cell-order-6 {
  -webkit-order: 6;
  -ms-flex-order: 6;
  order: 6;
}
.o-grid__cell-order-7 {
  -webkit-order: 7;
  -ms-flex-order: 7;
  order: 7;
}
.o-grid__cell-order-8 {
  -webkit-order: 8;
  -ms-flex-order: 8;
  order: 8;
}
.o-grid__cell-order-9 {
  -webkit-order: 9;
  -ms-flex-order: 9;
  order: 9;
}
.o-grid__cell-order-10 {
  -webkit-order: 10;
  -ms-flex-order: 10;
  order: 10;
}
.o-grid__cell-order-11 {
  -webkit-order: 11;
  -ms-flex-order: 11;
  order: 11;
}
.o-grid__cell-order-12 {
  -webkit-order: 12;
  -ms-flex-order: 12;
  order: 12;
}

@media (max-width: 599px) {
  .o-grid__cell-hide-phone {
    display: none!important;
  }
  .o-grid__cell-order-1-phone {
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
  }
  .o-grid__cell-order-2-phone {
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
  }
  .o-grid__cell-order-3-phone {
    -webkit-order: 3;
    -ms-flex-order: 3;
    order: 3;
  }
  .o-grid__cell-order-4-phone {
    -webkit-order: 4;
    -ms-flex-order: 4;
    order: 4;
  }
  .o-grid__cell-order-5-phone {
    -webkit-order: 5;
    -ms-flex-order: 5;
    order: 5;
  }
  .o-grid__cell-order-6-phone {
    -webkit-order: 6;
    -ms-flex-order: 6;
    order: 6;
  }
  .o-grid__cell-order-7-phone {
    -webkit-order: 7;
    -ms-flex-order: 7;
    order: 7;
  }
  .o-grid__cell-order-8-phone {
    -webkit-order: 8;
    -ms-flex-order: 8;
    order: 8;
  }
  .o-grid__cell-order-9-phone {
    -webkit-order: 9;
    -ms-flex-order: 9;
    order: 9;
  }
  .o-grid__cell-order-10-phone {
    -webkit-order: 10;
    -ms-flex-order: 10;
    order: 10;
  }
  .o-grid__cell-order-11-phone {
    -webkit-order: 11;
    -ms-flex-order: 11;
    order: 11;
  }
  .o-grid__cell-order-12-phone {
    -webkit-order: 12;
    -ms-flex-order: 12;
    order: 12;
  }
  .o-grid__cell-half-phone {
    width: calc(50% - 32px);
  }
  .o-grid--no-spacing>.o-grid__cell-half-phone {
    width: 50%;
  }
  .o-grid__cell-size-1,
  .o-grid__cell-size-2,
  .o-grid__cell-size-3,
  .o-grid__cell-size-4,
  .o-grid__cell-size-5,
  .o-grid__cell-size-6,
  .o-grid__cell-size-7,
  .o-grid__cell-size-8,
  .o-grid__cell-size-9,
  .o-grid__cell-size-10,
  .o-grid__cell-size-11,
  .o-grid__cell-size-12 {
    width: calc(100% - 32px);
  }
  .o-grid--no-spacing>.o-grid__cell-size-1,
  .o-grid--no-spacing>.o-grid__cell-size-2,
  .o-grid--no-spacing>.o-grid__cell-size-3,
  .o-grid--no-spacing>.o-grid__cell-size-4,
  .o-grid--no-spacing>.o-grid__cell-size-5,
  .o-grid--no-spacing>.o-grid__cell-size-6,
  .o-grid--no-spacing>.o-grid__cell-size-7,
  .o-grid--no-spacing>.o-grid__cell-size-8,
  .o-grid--no-spacing>.o-grid__cell-size-9,
  .o-grid--no-spacing>.o-grid__cell-size-10,
  .o-grid--no-spacing>.o-grid__cell-size-11,
  .o-grid--no-spacing>.o-grid__cell-size-12 {
    width: 100%;
  }
  .o-grid__cell-half-phone-offset {
    margin-left: calc(50% + 16px);
  }
  .o-grid--no-spacing>.o-grid__cell-half-phone-offset {
    margin-left: 50%;
  }
  .o-grid__cell-offset-size-1,
  .o-grid__cell-offset-size-2,
  .o-grid__cell-offset-size-3,
  .o-grid__cell-offset-size-4,
  .o-grid__cell-offset-size-5,
  .o-grid__cell-offset-size-6,
  .o-grid__cell-offset-size-7,
  .o-grid__cell-offset-size-8,
  .o-grid__cell-offset-size-9,
  .o-grid__cell-offset-size-10,
  .o-grid__cell-offset-size-11 {
    margin-left: calc(91.6666666667% + 16px);
  }
  .o-grid--no-spacing>.cell-offset-size-1,
  .o-grid--no-spacing>.cell-offset-size-2,
  .o-grid--no-spacing>.cell-offset-size-3,
  .o-grid--no-spacing>.cell-offset-size-4,
  .o-grid--no-spacing>.cell-offset-size-5,
  .o-grid--no-spacing>.cell-offset-size-6,
  .o-grid--no-spacing>.cell-offset-size-7,
  .o-grid--no-spacing>.cell-offset-size-8,
  .o-grid--no-spacing>.cell-offset-size-9,
  .o-grid--no-spacing>.cell-offset-size-10,
  .o-grid--no-spacing>.cell-offset-size-11 {
    margin-left: 91.6666666667%;
  }
}

@media (min-width: 600px) and (max-width: 899px) {
  .o-grid__cell-hide-tablet {
    display: none!important;
  }
  .o-grid__cell-order-1-tablet {
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
  }
  .o-grid__cell-order-2-tablet {
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
  }
  .o-grid__cell-order-3-tablet {
    -webkit-order: 3;
    -ms-flex-order: 3;
    order: 3;
  }
  .o-grid__cell-order-4-tablet {
    -webkit-order: 4;
    -ms-flex-order: 4;
    order: 4;
  }
  .o-grid__cell-order-5-tablet {
    -webkit-order: 5;
    -ms-flex-order: 5;
    order: 5;
  }
  .o-grid__cell-order-6-tablet {
    -webkit-order: 6;
    -ms-flex-order: 6;
    order: 6;
  }
  .o-grid__cell-order-7-tablet {
    -webkit-order: 7;
    -ms-flex-order: 7;
    order: 7;
  }
  .o-grid__cell-order-8-tablet {
    -webkit-order: 8;
    -ms-flex-order: 8;
    order: 8;
  }
  .o-grid__cell-order-9-tablet {
    -webkit-order: 9;
    -ms-flex-order: 9;
    order: 9;
  }
  .o-grid__cell-order-10-tablet {
    -webkit-order: 10;
    -ms-flex-order: 10;
    order: 10;
  }
  .o-grid__cell-order-11-tablet {
    -webkit-order: 11;
    -ms-flex-order: 11;
    order: 11;
  }
  .o-grid__cell-order-12-tablet {
    -webkit-order: 12;
    -ms-flex-order: 12;
    order: 12;
  }
  .o-grid__cell-size-1,
  .o-grid__cell-size-2,
  .o-grid__cell-size-5,
  .o-grid__cell-size-6 {
    width: calc(50% - 32px);
  }
  .o-grid--no-spacing>.o-grid__cell-size-1,
  .o-grid--no-spacing>.o-grid__cell-size-2,
  .o-grid--no-spacing>.o-grid__cell-size-5,
  .o-grid--no-spacing>.o-grid__cell-size-6 {
    width: 50%;
  }
  .o-grid__cell-size-4,
  .o-grid__cell-size-7,
  .o-grid__cell-size-8,
  .o-grid__cell-size-9,
  .o-grid__cell-size-10,
  .o-grid__cell-size-11,
  .o-grid__cell-size-12,
  .o-grid__cell-size-full-tablet {
    width: calc(100% - 32px);
  }
  .o-grid--no-spacing>.o-grid__cell-size-4,
  .o-grid--no-spacing>.o-grid__cell-size-7,
  .o-grid--no-spacing>.o-grid__cell-size-8,
  .o-grid--no-spacing>.o-grid__cell-size-9,
  .o-grid--no-spacing>.o-grid__cell-size-10,
  .o-grid--no-spacing>.o-grid__cell-size-11,
  .o-grid--no-spacing>.o-grid__cell-size-12,
  .o-grid--no-spacing>.o-grid__cell-full-tablet {
    width: 100%;
  }
  /* To preserve cascade, these classes must appear below their counterparts */
  .o-grid__cell-quarter-tablet {
    width: calc(25% - 32px);
  }
  .o-grid--no-spacing>.o-grid__cell-quarter-tablet {
    width: 25%;
  }
  .o-grid__cell-third-tablet {
    width: calc(33.333% - 32px);
  }
  .o-grid--no-spacing>.o-grid__cell-third-tablet {
    width: 33.333%;
  }
  .o-grid__cell-offset-size-1,
  .o-grid__cell-offset-size-2,
  .o-grid__cell-offset-size-3,
  .o-grid__cell-offset-size-4,
  .o-grid__cell-offset-size-5 {
    margin-left: calc(50% + 16px);
  }
  .o-grid--no-spacing>.o-grid__cell-offset-size-1,
  .o-grid--no-spacing>.o-grid__cell-offset-size-2,
  .o-grid--no-spacing>.o-grid__cell-offset-size-3,
  .o-grid--no-spacing>.o-grid__cell-offset-size-4,
  .o-grid--no-spacing>.o-grid__cell-offset-size-5 {
    margin-left: 50%;
  }
  .o-grid__cell-offset-size-7,
  .o-grid__cell-offset-size-8,
  .o-grid__cell-offset-size-9,
  .o-grid__cell-offset-size-10,
  .o-grid__cell-offset-size-11 {
    margin-left: calc(91.6666666667% + 16px);
  }
  .o-grid--no-spacing>.o-grid__cell-offset-size-7,
  .o-grid--no-spacing>.o-grid__cell-offset-size-8,
  .o-grid--no-spacing>.o-grid__cell-offset-size-9,
  .o-grid--no-spacing>.o-grid__cell-offset-size-10,
  .o-grid--no-spacing>.o-grid__cell-offset-size-11 {
    margin-left: 91.6666666667%;
  }
}

@media (min-width: 900px) {
  .o-grid__cell-hide-desktop {
    display: none!important;
  }
  .o-grid__cell-order-1-desktop {
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
  }
  .o-grid__cell-order-2-desktop {
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
  }
  .o-grid__cell-order-3-desktop {
    -webkit-order: 3;
    -ms-flex-order: 3;
    order: 3;
  }
  .o-grid__cell-order-4-desktop {
    -webkit-order: 4;
    -ms-flex-order: 4;
    order: 4;
  }
  .o-grid__cell-order-5-desktop {
    -webkit-order: 5;
    -ms-flex-order: 5;
    order: 5;
  }
  .o-grid__cell-order-6-desktop {
    -webkit-order: 6;
    -ms-flex-order: 6;
    order: 6;
  }
  .o-grid__cell-order-7-desktop {
    -webkit-order: 7;
    -ms-flex-order: 7;
    order: 7;
  }
  .o-grid__cell-order-8-desktop {
    -webkit-order: 8;
    -ms-flex-order: 8;
    order: 8;
  }
  .o-grid__cell-order-9-desktop {
    -webkit-order: 9;
    -ms-flex-order: 9;
    order: 9;
  }
  .o-grid__cell-order-10-desktop {
    -webkit-order: 10;
    -ms-flex-order: 10;
    order: 10;
  }
  .o-grid__cell-order-11-desktop {
    -webkit-order: 11;
    -ms-flex-order: 11;
    order: 11;
  }
  .o-grid__cell-order-12-desktop {
    -webkit-order: 12;
    -ms-flex-order: 12;
    order: 12;
  }
  .o-grid__cell-size-1 {
    width: calc(8.3333333333% - 32px);
  }
  .o-grid--no-spacing>.o-grid__cell-size-1 {
    width: 8.3333333333%;
  }
  .o-grid__cell-size-2 {
    width: calc(16.6666666667% - 32px);
  }
  .o-grid--no-spacing>.o-grid__cell-size-2 {
    width: 16.6666666667%;
  }
  .o-grid__cell-size-3 {
    width: calc(25% - 32px);
  }
  .o-grid--no-spacing>.o-grid__cell-size-3 {
    width: 25%;
  }
  .o-grid__cell-size-4 {
    width: calc(33.3333333333% - 32px);
  }
  .o-grid--no-spacing>.o-grid__cell-size-4 {
    width: 33.3333333333%;
  }
  .o-grid__cell-size-5 {
    width: calc(41.6666666667% - 32px);
  }
  .o-grid--no-spacing>.o-grid__cell-size-5 {
    width: 41.6666666667%;
  }
  .o-grid__cell-size-6 {
    width: calc(50% - 32px);
  }
  .o-grid--no-spacing>.o-grid__cell-size-6 {
    width: 50%;
  }
  .o-grid__cell-size-7 {
    width: calc(58.3333333333% - 32px);
  }
  .o-grid--no-spacing>.o-grid__cell-size-7 {
    width: 58.3333333333%;
  }
  .o-grid__cell-size-8 {
    width: calc(66.6666666667% - 32px);
  }
  .o-grid--no-spacing>.o-grid__cell-size-8 {
    width: 66.6666666667%;
  }
  .o-grid__cell-size-9 {
    width: calc(75% - 32px);
  }
  .o-grid--no-spacing>.o-grid__cell-size-9 {
    width: 75%;
  }
  .o-grid__cell-size-10 {
    width: calc(83.3333333333% - 32px);
  }
  .o-grid--no-spacing>.o-grid__cell-size-10 {
    width: 83.3333333333%;
  }
  .o-grid__cell-size-11 {
    width: calc(91.6666666667% - 32px);
  }
  .o-grid--no-spacing>.o-grid__cell-size-11 {
    width: 91.6666666667%;
  }
  .o-grid__cell-size-12 {
    width: calc(100% - 32px);
  }
  .o-grid--no-spacing>.o-grid__cell-size-12 {
    width: 100%;
  }
  .o-grid__cell-offset-size-1 {
    margin-left: calc(8.3333333333% + 16px);
  }
  .o-grid--no-spacing>.o-grid__cell-offset-size-1 {
    margin-left: 8.3333333333%;
  }
  .o-grid__cell-offset-size-2 {
    margin-left: calc(16.6666666667% + 16px);
  }
  .o-grid--no-spacing>.o-grid__cell-offset-size-2 {
    margin-left: 16.6666666667%;
  }
  .o-grid__cell-offset-size-3 {
    margin-left: calc(25% + 16px);
  }
  .o-grid--no-spacing>.o-grid__cell-offset-size-3 {
    margin-left: 25%;
  }
  .o-grid__cell-offset-size-4 {
    margin-left: calc(33.3333333333% + 16px);
  }
  .o-grid--no-spacing>.o-grid__cell-offset-size-4 {
    margin-left: 33.3333333333%;
  }
  .o-grid__cell-offset-size-5 {
    margin-left: calc(41.6666666667% + 16px);
  }
  .o-grid--no-spacing>.o-grid__cell-offset-size-5 {
    margin-left: 41.6666666667%;
  }
  .o-grid__cell-offset-size-6 {
    margin-left: calc(50% + 16px);
  }
  .o-grid--no-spacing>.o-grid__cell-offset-size-6 {
    margin-left: 50%;
  }
  .o-grid__cell-offset-size-7 {
    margin-left: calc(58.3333333333% + 16px);
  }
  .o-grid--no-spacing>.o-grid__cell-offset-size-7 {
    margin-left: 58.3333333333%;
  }
  .o-grid__cell-offset-size-8 {
    margin-left: calc(66.6666666667% + 16px);
  }
  .o-grid--no-spacing>.o-grid__cell-offset-size-8 {
    margin-left: 66.6666666667%;
  }
  .o-grid__cell-offset-size-9 {
    margin-left: calc(75% + 16px);
  }
  .o-grid--no-spacing>.o-grid__cell-offset-size-9 {
    margin-left: 75%;
  }
  .o-grid__cell-offset-size-10 {
    margin-left: calc(83.3333333333% + 16px);
  }
  .o-grid--no-spacing>.o-grid__cell-offset-size-10 {
    margin-left: 83.3333333333%;
  }
  .o-grid__cell-offset-size-11 {
    margin-left: calc(91.6666666667% + 16px);
  }
  .o-grid--no-spacing>.o-grid__cell-offset-size-11 {
    margin-left: 91.6666666667%;
  }
}
@media (max-width: 899px) {
  .o-grid__cell-full-tablet {
    width: calc(100% - 32px);
  }
}

/***
  name: Container
  description: A content container meant to hold content centered on
               the screen.
  example: |
    <div class="o-container">
      <p>I am some content in a container</p>
    </div>
***/

[class*="o-container"] {
  max-width: 100%;
  width: 1236px;
  padding: 0px 18px;
  margin-left: auto;
  margin-right: auto;
}
.o-container--580 {
  width: 616px;
}
.o-container--890 {
  width: 926px;
}
.o-container--1080 {
  width: 1116px;
}
.o-container--discount-cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
}
@media (min-width: 600px) {
  .o-container--discount-cards {
    flex-direction: row;
  }
}