section.index-content {
  @extend .wrapper;
  @extend .clearfix;

  section {
    @extend .clearfix;
    float: left;

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

    h1 {
      font-size: 800 24px "Open Sans";
      margin-bottom: lh();
    }

    p {
      line-height: lh();
      margin-bottom: lh();

    }

    ul {
      margin: 0;
    }

    &.about {
      @include box-sizing(border-box);
      border-right: 1px solid #e5e5e5;
      margin-right: flex-gutter();
      padding-right: flex-gutter() / 2;
      width: flex-grid(8);

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

      section {
        @extend .clearfix;
        margin-bottom: lh();

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

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

          &:nth-child(odd) {
            margin-right: flex-gutter(8);

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

        &.intro {
          section {
            margin-bottom: 0;

            &.intro-text {
              margin-right: flex-gutter(8);
              width: flex-grid(4, 8);

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

              p {
                margin-right: 0;
                width: auto;
                float: none;
              }
            }

            &.intro-video {
              width: flex-grid(4, 8);

              @media screen and (max-width: 780px) {
                width: auto;
              }

              a {
                display: block;
                width: 100%;

                img {
                  width: 100%;
                }

                span {
                  display: none;
                }
              }
            }
          }
        }

        &.features {
          border-top: 1px solid #E5E5E5;
          padding-top: lh();
          margin-bottom: 0;

          h2 {
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #888;
            margin-bottom: lh();
            font-weight: normal;
            font-size: 14px;

            span {
              text-transform: none;

            }
          }

          p {
            width: auto;
            clear: both;

            strong {
              font-family: "Open sans";
              font-weight: 800;
            }

            a {
              color: $mit-red;
              text-decoration: none;
              @include transition();

              &:hover, &:focus {
                color: darken($mit-red, 15%);
              }
            }
          }

          ul {
            margin-bottom: 0;

            li {
              line-height: lh();
              width: flex-grid(4, 8);
              float: left;
              margin-bottom: lh(.5);

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

              &:nth-child(odd) {
                margin-right: flex-gutter(8);

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

    &.course, &.staff {
      width: flex-grid(4);

      @media screen and (max-width: 780px) {
        width: auto;
      }

      h1 {
        color: #888;
        font: normal $body-font-size $body-font-family;
        font-size: 14px;
        letter-spacing: 1px;
        margin-bottom: lh();
        text-transform: uppercase;
      }

      h2 {
        font: 800 24px $header-font-family;
      }

      h3 {
        font: 400 18px $header-font-family;
      }

      a {
        @extend .button;

        span.arrow {
          color: rgba(#fff, .6);
          font-style: normal;
          @include inline-block();
          padding-left: 10px;
        }
      }

      ul {
        list-style: none;

        li {
          img {
            float: left;
            margin-right: lh(.5);
          }
        }
      }
    }

    &.course {
      h2 {
        padding-top: lh(5);
        background: url('/static/images/marketing/circuits-bg.jpg') 0 0 no-repeat;
        @include background-size(contain);

        @media screen and (max-width: 998px) and (min-width: 781px){
          background: url('/static/images/marketing/circuits-medium-bg.jpg') 0 0 no-repeat;
        }

        @media screen and (max-width: 780px) {
          padding-top: lh(5);
          background: url('/static/images/marketing/circuits-bg.jpg') 0 0 no-repeat;
        }

        @media screen and (min-width: 500px) and (max-width: 781px) {
          padding-top: lh(8);
        }
      }

      div.announcement {
        p.announcement-button {
          a {
            margin-top: 0;
          }
        }

        img {
          max-width: 100%;
          margin-bottom: lh();
        }
      }
    }


    // index
    //---------------------------------------- //
    &.about-course {
      @include box-sizing(border-box);
      border-right: 1px solid #e5e5e5;
      margin-right: flex-gutter();
      padding-right: flex-gutter() / 2;
      width: flex-grid(8);

      @media screen and (max-width: 780px) {
        width: auto;
        border-right: 0;
        margin-right: 0;
        padding-right: 0;
      }

      section {
        width: flex-grid(4, 8);

        @media screen and (max-width: 780px) {
          width: auto;
        }

        &.about-info {
          margin-right: flex-gutter(8);

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

        &.requirements {
          clear: both;
          width: 100%;
          border-top: 1px solid #E5E5E5;
          padding-top: lh();
          margin-bottom: 0;

          p {
            float: left;
            width: flex-grid(4, 8);
            margin-right: flex-gutter(8);

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

            &:nth-child(odd) {
              margin-right: 0;
            }
          }
        }

        &.cta {
          width: 100%;
          text-align: center;

          a.enroll {
            @extend .button;
            padding: lh(.5) lh(2);
            @include inline-block();
            text-align: center;
            font: 800 18px $header-font-family;
          }
        }
      }
    }

    &.staff {
      h1 {
        margin-top: lh(1);
      }
    }
  }
}

section.copyright, section.tos, section.privacy-policy, section.honor-code {
  @extend .subpage;
}
