header.announcement {
  @include background-size(cover);
  background: #333;
  border-bottom: 1px solid #000;
  color: #fff;
  -webkit-font-smoothing: antialiased;

  &.home {
    background: #e3e3e3 url("/static/images/marketing/shot-5-medium.jpg");

    @media screen and (min-width: 1200px) {
      background: #e3e3e3 url("/static/images/marketing/shot-5-large.jpg");
    }

    div {
      padding: lh(10) lh() lh(3);

      @media screen and (max-width:780px) {
        padding: lh(2.5) lh() lh(2);
      }

      //hide login link for homepage
      nav {
        h1 {
          margin-right: 0;
        }

        a.login {
          display: none;
        }
      }
    }
  }

  &.course {
    background: #e3e3e3 url("/static/images/marketing/course-bg-small.jpg");

    @media screen and (min-width: 1200px) {
      background: #e3e3e3 url("/static/images/marketing/course-bg-large.jpg");
    }

    @media screen and (max-width: 1199px) and (min-width: 700px) {
      background: #e3e3e3 url("/static/images/marketing/course-bg-medium.jpg");
    }

    div {
      padding: lh(4) lh() lh(2);

      @media screen and (max-width:780px) {
        padding: lh(2.5) lh() lh(2);
      }
    }

  }

  div {
    @extend .wrapper;
    position: relative;

    nav {
      position: absolute;
      top: 0;
      right: lh();
      @include border-radius(0 0 3px 3px);
      background: #333;
      background: rgba(#000, .7);
      padding: lh(.5) lh();

      h1 {
        @include inline-block();
        margin-right: lh(.5);


        a {
          font: italic 800 18px $header-font-family;
          color: #fff;
          text-decoration: none;

          &:hover, &:focus {
            color: #999;
          }
        }
      }

      a.login {
        text-decoration: none;
        color: #fff;
        font-size: 12px;
        font-style: normal;
        font-family: $header-font-family;

        &:hover, &:focus {
          color: #999;
        }
      }
    }

    section {
      @extend .clearfix;
      background: $mit-red;
      @include inline-block();
      margin-left: flex-grid(4) + flex-gutter();
      padding: lh() lh(1.5);

      @media screen and (max-width: 780px) {
        margin-left: 0;
      }

      h1 {
        font-family: "Open Sans";
        font-size: 30px;
        font-weight: 800;
        @include inline-block();
        line-height: 1.2em;
        margin: 0 lh() 0 0;
      }

      h2 {
        font-family: "Open Sans";
        font-size: 24px;
        font-weight: 400;
        @include inline-block();
        line-height: 1.2em;
      }

      &.course {
        section {
          float: left;
          margin-left: 0;
          margin-right: flex-gutter(8);
          padding: 0;
          width: flex-grid(4, 8);

          @media screen and (max-width: 780px) {
            float: none;
            width: 100%;
            margin-right: 0;
          }

          a {
            @extend .button;
            background-color: darken($mit-red, 20%);
            border-color: darken($mit-red, 30%);
            @include box-shadow(inset 0 1px 0 darken($mit-red, 10%), 0 1px 0 lighten($mit-red, 5%));
            display: block;
            padding: lh(.5) lh();
            text-align: center;

            &:hover {
              background-color: darken($mit-red, 10%);
              border-color: darken($mit-red, 20%);
            }
          }
        }

        p {
          width: flex-grid(4, 8);
          line-height: lh();
          float: left;

          @media screen and (max-width: 780px) {
            float: none;
            width: 100%;
          }
        }
      }
    }
  }
}
