openaustralia/publicwhip

.site-introduction {
  background-color: $color-orange;
  padding-bottom: 45px;
  margin-bottom: 0;
  padding-left: 15px;
  padding-right: 15px;

  @media (min-width: $screen-xs-min) {
    padding-top: 45px;
    padding-bottom: 60px;
  }

  @media (min-width: $screen-sm-min) {
    padding-top: 90px;
    padding-bottom: 90px;
    text-align: center;
  }

  @media (min-width: $screen-lg-min) {
    padding-top: 120px;
    padding-bottom: 135px;
  }

  .banner-heading {
    margin-top: 0;
    max-width: 8em;
    color: #fff;

    @media (min-width: 30em) {
      max-width: 11em;
    }

    @media (min-width: 40em) {
      max-width: auto;
    }
  }

  .banner-action {
    max-width: 27em;

    @media (min-width: 35em) {
      margin: 2em 0 0;
    }

    @media (min-width: $screen-sm-min) {
      margin: 3em auto 0;
    }
  }
}

.front-panels-block {
  padding-top: 15px;
  padding-bottom: 30px;
  background: lighten($gray-lighter, 2%);

  @media (min-width: $screen-sm-min) {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  @media (min-width: $screen-md-min) {
    padding-top: 90px;
    padding-bottom: 90px;

  }

  .container {
    padding-right: 0;
    padding-left: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
}

.front-panel {
  @media (min-width: $screen-lg-min) {
    padding: 0 45px;
  }

  + .front-panel {
    @media (min-width: $screen-sm-min) {
      margin-top: 48px;
    }

    @media (min-width: $screen-md-min) {
      margin-top: 0;
    }
  }
}

.front-quote-block {
  padding-top: 36px;
  padding-bottom: 8px;

  @media (min-width: $screen-sm-min) {
    padding-top: 90px;
    padding-bottom: 50px;
  }

  figure {
    margin-bottom: 45px;
  }

  blockquote {
    margin-bottom: 15px;
    border: 0;
    padding: 0;
    font-size: 18px;
    font-style: italic;
    text-align: left;
  }

  footer {
    text-align: right;
    font-size: $font-size-small;

    @media (min-width: $screen-sm-min) {
      text-align: right;
    }
  }

  a {
    color: $text-color;
  }

  .quote-avatar-container {
    margin-right: 5px;
    display: inline;

    .no-js & {
      visibility: hidden;
    }

  }

  .quote-avatar {
    border-radius: 3px;
    border: 0;
  }
}

.front-explanation {
  padding-top: 36px;
  padding-bottom: 8px;
  background-color: $color-lemon-light;

  @media (min-width: $screen-sm-min) {
    padding-top: 90px;
    padding-bottom: 90px;
    p {
      text-align: center;
      max-width: 30em;
      margin: auto;
    }
  }
}

.banner-section {
  + .site-footer {
    margin-top: 0;
  }
}

.supporting-orgs-block {
  padding-top: 36px;
  padding-bottom: 36px;

  @media (min-width: $screen-sm-min) {
    text-align: center;
    padding-top: 90px;
    padding-bottom: 90px;
  }

  h2 {
    font-size: $font-size-h4;
    font-weight: normal;
  }

  a {
    text-decoration: none;
  }

  .supporting-org {
    &:hover,
    &:focus {
      opacity: .5;
    }

    img {
      max-width: 100%;
      height: auto;
    }
  }
}