pages.scss

// Place all the styles related to the pages controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

.splash {
  @extend .col-xs-12;
  background: linear-gradient(to bottom, rgba(20, 20, 80, 0.5) 0%, rgba(20, 20, 80, 0.5) 100%), url(hero2.jpg);
  background-size: cover;
  min-height: 85vh;
  color: #DED;
  
  .logo {
    @extend .col-xs-2;
    @extend .col-md-offset-1;
    h1 {
      @extend h3;
    }
  }

  .auth-links {
    @extend .col-xs-7, .col-xs-offset-3;
    @extend .col-sm-3, .col-sm-offset-7;
    @extend .col-md-2, .col-md-offset-6;
    padding-top: 1.8em;
    a {
      margin-left: 2em;
      color: white;
    }
  }
  
  .splash-text {
    @media (min-width: $screen-sm-min) {
      position: absolute;
      bottom: 5em;
    }
    @extend .col-xs-11;
    @extend .col-md-4, .col-md-offset-1;
    margin-top: 2em;
    p {
      @extend h1;
      &:last-of-type {
        @extend h3;
      }

      & ~ a {
        @extend .btn, .btn-lg, .btn-primary;
        margin-top: 1em;
        margin-bottom: 1em;
      }
    }
  }

}

.sale {
  @extend .col-xs-12;
  .sale-text {
    @extend .col-sm-8, .col-md-offset-1;
    @extend .col-xs-12;
    margin-top: 1em;
    p {
      @extend h4;
      &:first-of-type {
        @extend h1;
        margin-bottom: 0.5em;
      }
    }
  }
}

.faq {
  @extend .col-xs-12;
  .faq-item {
    @extend .col-sm-8;
    @extend .col-xs-12;
    p.q {
      @extend h3;
    }
    p.a {
      @extend h4;
    }
  }
}