.course-info {
  .container {
    padding-bottom: 120px;
  }

  header.course-profile {
    background: rgb(245,245,245);
    @include background-image(url('/static/images/shot-2-large.jpg'));
    background-size: cover;
    @include box-shadow(0 1px 80px 0 rgba(0,0,0, 0.5));
    border-bottom: 1px solid rgb(100,100,100);
    @include box-shadow(inset 0 1px 5px 0 rgba(0,0,0, 0.1));
    height: 280px;
    margin-top: -69px;
    padding-top: 150px;
    overflow: hidden;
    position: relative;
    width: 100%;

    .intro-inner-wrapper {
      background: rgba(255,255,255, 0.93);
      border: 1px solid rgb(100,100,100);
      @include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5));
      @include box-sizing(border-box);
      @include clearfix;
      margin: 0 auto;
      max-width: 1200px;
      position: relative;
      width: grid-width(12);
      z-index: 2;


      .intro {
        @include box-sizing(border-box);
        @include clearfix;
        float: left;
        height: 180px;
        padding: 20px 20px;
        position: relative;
        width: flex-grid(8) + flex-gutter();
        z-index: 2;

        > hgroup {
          border-bottom: 1px solid rgb(210,210,210);
          @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
          margin-bottom: 27px;
          padding-bottom: 20px;
          width: 100%;

          h1 {
            color: $base-font-color;
            font-weight: 700;
            @include inline-block;
            margin: 0 10px 0 0;
            letter-spacing: 0px;
            text-shadow: 0 1px rgba(255,255,255, 0.6);
          }

          h2 {
            @include inline-block;
            margin: 0;

            a {
              color: $lighter-base-font-color;
              font: italic 800 1em/1em $sans-serif;
              letter-spacing: 0px;
              text-shadow: 0 1px rgba(255,255,255, 0.6);
              text-transform: none;

              &:hover {
                color: $blue;
              }
            }
          }
        }

        .main-cta {
          @include clearfix;
          float: left;
          margin-right: flex-gutter();
          @include transition(all, 0.15s, linear);
          width: flex-grid(6);

          > a.find-courses, a.register {
            @include button(shiny, $blue);
            @include box-sizing(border-box);
            @include border-radius(3px);
            display: block;
            font: normal 1.2rem/1.6rem $sans-serif;
            letter-spacing: 1px;
            padding: 10px 0px;
            text-transform: uppercase;
            text-align: center;
            width: flex-grid(12);

            &:hover {
              color: rgb(255,255,255);
            }
          }

          span.register {
            @include button(shiny, lighten(grayscale($blue), 50%));
            @include box-sizing(border-box);
            @include border-radius(3px);
            color: #888;
            display: block;
            font: normal 1.2rem/1.6rem $sans-serif;
            letter-spacing: 1px;
            padding: 10px 0px;
            text-transform: uppercase;
            text-align: center;
            width: flex-grid(12);
          }
        }
      }

      .media {
        background: transparent;
        border-left: 1px solid rgb(100,100,100);
        @include box-sizing(border-box);
        display: block;
        float: right;
        height: 180px;
        padding: 20px;
        position: relative;
        width: flex-grid(4);
        z-index: 2;

        .hero {
          border: 1px solid rgb(100,100,100);
          height: 100%;
          overflow: hidden;
          position: relative;

          .play-intro {
            @include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.65), rgba(0,0,0, 0.75)));
            @include border-radius(4px);
            @include box-shadow(0 1px 12px 0 rgba(0,0,0, 0.4));
            border: 2px solid rgba(255,255,255, 0.8);
            height: 80px;
            left: 50%;
            margin-top: -40px;
            margin-left: -40px;
            position: absolute;
            top: 50%;
            width: 80px;

            &::after {
              color: rgba(255,255,255, 0.8);
              content: "\25B6";
              display: block;
              font: normal 2em/1em $sans-serif;
              left: 50%;
              margin-left: -11px;
              margin-top: -16px;
              position: absolute;
              text-shadow: 0 -1px rgba(0,0,0, 0.8);
              top: 50%;
            }
          }

          img {
            display: block;
            width: 100%;
          }
        }

        &:hover {
          cursor: pointer;

          .play-intro {
            @include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.75), rgba(0,0,0, 0.8)));
            @include box-shadow(0 1px 12px 0 rgba(0,0,0, 0.5));
            border-color: rgba(255,255,255, 0.9);

            &::after {
              color: rgba(255,255,255, 1);
            }
          }
        }
      }
    }
  }

  .container {
    @include clearfix;

    nav {
      border-bottom: 1px solid rgb(220,220,220);
      @include box-sizing(border-box);
      @include clearfix;
      margin: 40px 0;
      width: flex-grid(12);

      &::after {
        @extend .faded-hr-divider;
        content: "";
        display: none;
      }

      a {
        border-bottom: 3px solid transparent;
        color: $lighter-base-font-color;
        @include inline-block;
        letter-spacing: 1px;
        margin: 0 15px;
        padding: 0px 5px 15px;
        text-align: center;
        text-transform: lowercase;

        &:first-child {
          margin-left: 0px;
        }

        &:hover, &.active {
          border-color: rgb(200,200,200);
          color: $base-font-color;
          text-decoration: none;
        }
      }
    }
  }

  .details {
    float: left;
    margin-right: flex-gutter();
    width: flex-grid(8);

    .inner-wrapper {
      > section {
        margin-bottom: 40px;
      }

      .course-staff {
        .teacher {
          margin-bottom: 40px;

          h3 {
            color: $base-font-color;
            font-family: $sans-serif;
            font-weight: 700;
            margin-bottom: 15px;
            text-transform: none;
          }

          .teacher-image {
            background: rgb(255,255,255);
            border: 1px solid rgb(200,200,200);
            float: left;
            margin: 0 15px 15px 0;
            padding: 1px;
          }
        }
      }
    }
  }

  .course-sidebar {
    @include box-sizing(border-box);
    @include box-shadow(inset 0 0 3px 0 rgba(0,0,0, 0.15));
    border: 1px solid rgb(200,200,200);
    border-top: none;
    float: left;
    padding: 16px 20px 30px;
    width: flex-grid(4);

    header {
      margin-bottom: 30px;
      padding-bottom: 16px;
      position: relative;
      text-align: center;

      &::after {
        @extend .faded-hr-divider;
        content: "";
        display: block;
        height: 1px;
        position: absolute;
        bottom: 0px;
        width: 100%;
        z-index: 1;
      }

      a.university-name {
        border-right: 1px solid rgb(200,200,200);
        color: $base-font-color;
        font-family: $sans-serif;
        font-style: italic;
        font-weight: 800;
        @include inline-block;
        letter-spacing: 0px;
        margin-right: 15px;
        padding-right: 15px;

        &:hover {
          color: $lighter-base-font-color;
        }
      }

      .social-sharing {
        @include box-sizing(border-box);
        float: left;
        height: 44px;
        position: relative;
        text-align: center;
        width: flex-grid(12);
        z-index: 2;

        float: none;

        &:hover {
          .sharing-message {
            opacity: 1;
            top: 56px;
          }
        }

        .sharing-message {
          @include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.9) 0%,
                                                            rgba(0,0,0, 0.7) 100%));
          border: 1px solid rgba(0,0,0, 0.5);
          @include border-radius(4px);
          @include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5));
          @include box-sizing(border-box);
          color: rgb(255,255,255);
          float: right;
          font-family: $serif;
          font-size: 0.9em;
          font-style: italic;
          left: 50%;
          margin-left: -110px;
          opacity: 0;
          padding: 6px 10px;
          position: absolute;
          text-align: center;
          @include transition(all, 0.15s, ease-out);
          top: 65px;
          width: 220px;

          &:hover {
            opacity: 0;
          }
        }

        .share {
          height: 44px;
          @include inline-block;
          margin-right: 10px;
          opacity: 0.5;
          @include transition(all, 0.15s, linear);
          width: 44px;

          &:hover {
            opacity: 1;
          }

          img {
            width: 100%;
          }

          &:last-child {
            margin-right: 0px;
          }
        }
      }
    }

    .important-dates {
      list-style: none;
      margin: 0px;
      padding: 0px 10px;

      li {
        @include clearfix;
        border-bottom: 1px dotted rgb(220,220,220);
        margin-bottom: 20px;
        padding-bottom: 10px;

        &:hover {
          .icon {
            opacity: 1;
          }
        }

        p {
          color: $lighter-base-font-color;
          float: left;
          font-family: $sans-serif;
        }

        .icon {
          background-size: cover;
          float: left;
          height: 19px;
          margin: 2px 10px 0 0;
          opacity: 0.6;
          @include transition(all, 0.15s, linear);
          width: 19px;

          &.start-icon {
            @include background-image(url('../images/portal-icons/calendar-icon.png'));
          }

          &.final-icon {
            @include background-image(url('../images/portal-icons/pencil-icon.png'));
          }

          &.length-icon {
            @include background-image(url('../images/portal-icons/chart-icon.png'));
          }

          &.number-icon {
            @include background-image(url('../images/portal-icons/course-info-icon.png'));
          }
        }

        span {
          float: right;
          font-weight: 700;
        }
      }
    }
  }
}
