/*
  LOST grid system:   https://github.com/corysimmons/lost
  Based on PostCSS:   http://davidtheclark.com/its-time-for-everyone-to-learn-about-postcss/
  Examples:           https://github.com/peterramsing/lost/blob/gh-pages/src/css/style.styl
  ---------------------------------------------------------------------
  Lost uses @vars as global settings, which PostCSS uses to build grid classes.
  These var declarations break LESS: https://github.com/less/less.js/issues/2770
  Workaround: https://github.com/peterramsing/lost/issues/197#issuecomment-170324607

  Declare these classes:
*/
@namespace lostgrid;
@namespace lostgrid;
@media only screen and (min-width: 0rem ) {
  @namespace lostgrid;
  @namespace lostgrid;
}
@media only screen and (min-width: 35.5rem ) {
  @namespace lostgrid;
  @namespace lostgrid;
}
@media only screen and (min-width: 52rem ) {
  @namespace lostgrid;
  @namespace lostgrid;
}
@media only screen and (min-width: 80rem ) {
  @namespace lostgrid;
  @namespace lostgrid;
}
/*
  Which LESS will compile to:

    @namespace lostgrid;
    @lost flexbox flex;
    @lost gutter 1em;

  Then PostCSS will use these to set global vars for the grid.

* *****************************************************************************/
/*
  First pass at breakpoint specific spacers
  Use these between sections

  TODO: decide if these should be used by adding to existing elements with content
  or, on empty divs specifically for spacing?

*/
.margin-unit--top {
  margin-top: 1.5rem;
}
@media only screen and (min-width: 35.5rem ) {
  .margin-unit--top {
    margin-top: 1.75rem;
  }
}
@media only screen and (min-width: 52rem ) {
  .margin-unit--top {
    margin-top: 2rem;
  }
}
@media only screen and (min-width: 80rem ) {
  .margin-unit--top {
    margin-top: 2rem;
  }
}
.padding-unit {
  padding: 1.5rem;
}
@media only screen and (min-width: 35.5rem ) {
  .padding-unit {
    padding: 1.75rem;
  }
}
@media only screen and (min-width: 35.5rem ) {
  .padding-unit {
    padding: 2rem;
  }
}
@media only screen and (min-width: 35.5rem ) {
  .padding-unit {
    padding: 2rem;
  }
}
.padding-unit--left-right {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
@media only screen and (min-width: 35.5rem ) {
  .padding-unit--left-right {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }
}
@media only screen and (min-width: 52rem ) {
  .padding-unit--left-right {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
@media only screen and (min-width: 80rem ) {
  .padding-unit--left-right {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
.padding-unit--left {
  padding-left: 1.5rem;
}
@media only screen and (min-width: 35.5rem ) {
  .padding-unit--left {
    padding-left: 1.75rem;
  }
}
@media only screen and (min-width: 52rem ) {
  .padding-unit--left {
    padding-left: 2rem;
  }
}
@media only screen and (min-width: 80rem ) {
  .padding-unit--left {
    padding-left: 2rem;
  }
}
.padding-unit--right {
  padding-right: 1.5rem;
}
@media only screen and (min-width: 35.5rem ) {
  .padding-unit--right {
    padding-right: 1.75rem;
  }
}
@media only screen and (min-width: 52rem ) {
  .padding-unit--right {
    padding-right: 2rem;
  }
}
@media only screen and (min-width: 80rem ) {
  .padding-unit--right {
    padding-right: 2rem;
  }
}
.padding-unit--top-bottom {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
@media only screen and (min-width: 35.5rem ) {
  .padding-unit--top-bottom {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
  }
}
@media only screen and (min-width: 52rem ) {
  .padding-unit--top-bottom {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}
@media only screen and (min-width: 80rem ) {
  .padding-unit--top-bottom {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}
.grid__half {
  -ms-flex: 0 0 auto;
      flex: 0 0 auto;
  width: calc(99.99% * 0.5 - (1.3rem - 1.3rem * 0.5));
}
.grid__half:nth-child(1n){
  margin-right: 1.3rem;
  margin-left: 0;
}
.grid__half:last-child{
  margin-right: 0;
}
.grid__half:nth-child(undefinedn){
  margin-right: 0;
  margin-left: auto;
}
.gdp-header {
  padding: 1.5rem;
  background-color: #efefef;
}
@media only screen and (min-width: 35.5rem ) {
  .gdp-header {
    padding: 1.75rem;
  }
}
@media only screen and (min-width: 35.5rem ) {
  .gdp-header {
    padding: 2rem;
  }
}
@media only screen and (min-width: 35.5rem ) {
  .gdp-header {
    padding: 2rem;
  }
}
@media only screen and (min-width: 35.5rem) and (max-width: 52rem) {
  .gdp-header {
    padding: 1rem;
  }
}
.gdp-header__title {
  margin-bottom: 1rem;
}
.gdp-header__schedule,
.gdp-header__see-details {
  margin-top: 0.25rem;
}
.gdp-header__price {
  margin: 0.25rem 0;
}
.gdp-header__cta-flex-wrapper {
  margin-top: 1.25rem;
  -ms-flex-positive: 1;
      flex-grow: 1;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: center;
      justify-content: center;
}
.gdp-header-price__value {
  vertical-align: top;
}
.gdp-header-price__label,
.gdp-header-price__value {
  display: inline-block;
}
.gdp-header__buy {
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  -ms-flex-direction: column;
      flex-direction: column;
  margin-right: 0;
}
@media only screen and (min-width: 52rem ) {
  .gdp-header__buy {
    margin: 0;
  }
}
@media only screen and (min-width: 35.5rem ) {
  .gdp-header__buy {
    margin-right: 1rem;
  }
}
.gdp-header__actions {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: center;
      justify-content: center;
}
@media only screen and (min-width: 35.5rem ) {
  .gdp-header__actions {
    -ms-flex-direction: row;
        flex-direction: row;
  }
}
@media only screen and (min-width: 52rem ) {
  .gdp-header__actions {
    -ms-flex-direction: column;
        flex-direction: column;
  }
}
.gdp-header__divider {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  margin: 1rem 0rem;
  width: inherit;
}
@media only screen and (min-width: 52rem ) {
  .gdp-header__divider {
    width: 100%;
  }
}
.gdp-header__divider-text {
  font-size: 1.3rem;
  overflow: hidden;
  position: relative;
  text-align: center;
  z-index: 1;
}
.gdp-header__divider-text:before {
  left: -1%;
  text-align: right;
}
.gdp-header__divider-text:after {
  margin-left: 3%;
}
.gdp-header__divider-text:before,
.gdp-header__divider-text:after {
  background-color: #BBB;
  content: '\a0';
  display: none;
  height: 1px;
  overflow: hidden;
  position: absolute;
  top: 53%;
  width: 47%;
}
@media only screen and (min-width: 52rem ) {
  .gdp-header__divider-text:before,
  .gdp-header__divider-text:after {
    display: inline-block;
  }
}
.gdp-header__sec-cta {
  padding: 1rem 0 0 0;
  display: inline-block;
}
@media only screen and (min-width: 35.5rem ) {
  .gdp-header__sec-cta {
    padding: 0;
    margin: 0 0 0 2rem;
  }
}
.gdp-header__text {
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  display: none;
  font-size: 1.3rem;
  margin-bottom: 1rem;
}
@media only screen and (min-width: 52rem ) {
  .gdp-header__text {
    display: inline-block;
  }
}
/*
  LOST grid system:   https://github.com/corysimmons/lost
  Based on PostCSS:   http://davidtheclark.com/its-time-for-everyone-to-learn-about-postcss/
  Examples:           https://github.com/peterramsing/lost/blob/gh-pages/src/css/style.styl
  ---------------------------------------------------------------------
  Lost uses @vars as global settings, which PostCSS uses to build grid classes.
  These var declarations break LESS: https://github.com/less/less.js/issues/2770
  Workaround: https://github.com/peterramsing/lost/issues/197#issuecomment-170324607

  Declare these classes:
*/
@namespace lostgrid;
@namespace lostgrid;
@media only screen and (min-width: 0rem ) {
  @namespace lostgrid;
  @namespace lostgrid;
}
@media only screen and (min-width: 35.5rem ) {
  @namespace lostgrid;
  @namespace lostgrid;
}
@media only screen and (min-width: 52rem ) {
  @namespace lostgrid;
  @namespace lostgrid;
}
@media only screen and (min-width: 80rem ) {
  @namespace lostgrid;
  @namespace lostgrid;
}
/*
  Which LESS will compile to:

    @namespace lostgrid;
    @lost flexbox flex;
    @lost gutter 1em;

  Then PostCSS will use these to set global vars for the grid.

* *****************************************************************************/
.rewards-container {
  margin-bottom: 2rem;
}
@media only screen and (min-width: 80rem ) {
  .rewards-container {
    margin: 0;
  }
}
@media only screen and (min-width: 80rem ) {
  .gdp-header-rewards {
    display: -ms-flexbox;
    display: flex;
  }
}
@media only screen and (min-width: 80rem ) {
  .gdp-header {
    width: 55%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
  }
}
@media only screen and (min-width: 80rem ) {
  .gdp-header-rewards .rewards__container {
    width: 45%;
  }
}