.home.index {
  // Map background on homepage:
  .site-header {
    margin-bottom: 120px;
    background: rgba($charcoal, 0.7);

    &:after {
      height: 540px;
    }

    @include susy-breakpoint($mobile) {
      height: auto;
      overflow: visible;
    }

    @include susy-breakpoint($tablet) {
      height: 270px;
      margin-bottom: 270px;
    }
  }

  .logo {
    @include susy-breakpoint($tablet) {
      top: 60px;

      h1 {
        width: 340px;
        height: 75px;
      }
    }
  }

  .content > p:first-of-type {
    font-weight: bold;
    font-size: 22px;
  }

  .content > ul:first-of-type {
    border-top: 1px solid $lightGray;
    border-bottom: 1px solid $lightGray;
    margin-bottom: 30px;

    > li {
      position: relative;
      list-style: none;
      padding: 0 5px;
      font-size: 22px;
      font-style: italic;

      &:before {
        font-style: normal;
        content: '✓';
        position: absolute !important;
        left: -35px;
        top: -10px;
        font-size: 40px;
        color: $green;
      }
    }
  }

  .sidebar {
    background: $beige;
    margin-top: $gutter-width * 2;
    padding: 0 $grid-padding;

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

  .info {
    padding: $gutter-width/2 0;
  }

  .button {
    display: inline-block;
    border-radius: 5px;
    padding: 15px 20px;
    background: $orange;
    color: white;
    text-decoration: none;
    font-size: 28px;
    font-weight: normal;
    box-shadow: 1px 1px 5px rgba(black, 0.1);
    transition: background-color 0.2s;

    &:hover,
    &:focus {
      background: darken($orange, 5);
    }
  }
}

@include susy-breakpoint($desktop) {
  h1 {
    font-size: 32px;
  }

  .content {
    @include span(8);
  }

  .sidebar {
    @include span(4 last);
    margin-top: $gutter-width * 4;
  }
}