#main {
  .hero-image {
    height: 250px;
    position: relative;
    @include breakpoint($desktop){
      height: 550px;
    }
    @include breakpoint($tablet-only){
      height: 300px;
    }
    &.auto-height {
      height: auto;
    }
  }
}
#content {
  .container.overlay {
    left: 4em;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
    position: absolute;
    right: 0;
    top: 3em;
    width: 80%;
    z-index: 200;
    @include breakpoint($mobile){
      background: $gray;
      background-color: rgba(50,50,50,0.8) !important;
      left: 0;
      position: relative;
      top: 0 !important;
      width: 100%;
    }
    @include breakpoint($lg-mobile){
      left: 2em;
      max-width: 505px;
    }
    @include breakpoint($desktop){
      top: 10.3em;
    }
    a {
      color: $white;
      @include breakpoint($mobile){
        padding-left: 20px;
      }
    }
    h1,
    h2 {
      color: $white;
      font-weight: 300;
      line-height: 1;
    }
    h1 {
      @include margin(2rem null 0);
      @include breakpoint($mobile){
        @include margin(0 null 0);
        @include padding(10px 10px null 20px);
      }
      @include breakpoint($tablet){
        @include font-size(65);
      }
    }
    h2 {
      @include margin(0 null 0 4rem);
      @include breakpoint($mobile){
        @include margin(0 null 0 0);
        @include padding(null 10px 10px 20px);
      }
      @include breakpoint($tablet){
        @include font-size(35);
      }
    }
    &.wrapper {
      left: 0;
      width: 100%;
    }
    .inner-wrapper {
      padding: 1.5rem 0;
      @include breakpoint($mobile){
        @include margin(null null null 0);
      }
      @include breakpoint($tablet){
        padding: 1.5rem 2rem;
      }
    }
  }
  .event-callout {
    background: $gdblue;
    background: rgba(3,79,157,0.9) !important;
    margin-bottom: 4rem;
    position: relative;
    width: 100%;
    .inner-wrapper {
      padding: .5em 1em !important;
      @include breakpoint($mobile){
        padding-left: 0;
      }
    }
    a {
      color: $white;
      span {
        border-right: 1px solid $white;
        padding: 0 5px 0 3px;
        @include breakpoint($tablet){
          padding: 0 15px 0 9px;
        }
        &:last-child {
          border-right: none;
        }
      }
    }
  }
  .news-feed {
    padding: 0 0 20px;
    // align with callouts
    @include margin(1.5em null null);
    h2.title {
      color: $medgray;
      font-size: 1em;
      line-height: 1;
      margin: 0;
      text-transform: uppercase;
    }
    .news-item {
      border-bottom: 1px solid $ltgray;
      padding: 10px 0;
      .post-date {
        font-weight: bold;
      }
      h3 {
        font-weight: normal;
        margin: 0;
      }
      &.last {
        border-bottom: none;
        padding-bottom: 30px;
      }
    }
    .more-link {
      font-weight: bold;
    }
  }
  .callout {
    @include box-shadow(0 0 15px 0 $ltgray);
    @include margin(1.5em null null);
    .field-group {
      padding: 0 30px 10px;
      text-align: center;
      .title {
        font-weight: bold;
        line-height: 1.25em;
        padding: 20px 0 5px;
      }
      p {
        color: $medgray;
        line-height: 1.25em;
        margin-top: 0;
      }
      a {
        font-weight: bold;
      }
    }
  }
}