.highlighted-courses, .find-courses {
  .courses {
    @include clearfix;
    padding: 40px 15px 15px;

    .course {
      background: rgb(250,250,250);
      border: 1px solid rgb(220,220,220);
      @include border-radius(2px);
      @include box-sizing(border-box);
      @include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.1), inset 0 0 0 1px rgba(255,255,255, 0.9));
      float: left;
      font-size: 0em;
      margin-right: flex-gutter();
      margin-bottom: 25px;
      width: flex-grid(4);
      @include transition(all, 0.15s, linear);

      &:nth-child(3n+3) {
        margin-right: 0;
      }

      .inner-wrapper {
        border: 1px solid rgba(255,255,255, 1);
        height: 100%;
        height: 180px;
        overflow: hidden;
        position: relative;
      }

      header.course-preview {
        left: 0px;
        position: absolute;
        top: 0px;
        width: 100%;
        z-index: 3;

        > a {
          @include background-image(linear-gradient(-90deg, rgba(255,255,255, 0.95), rgba(255,255,255, 0.75)));
          //@include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.6), rgba(0,0,0, 0.8)));
          @include box-shadow(inset 0 -1px 0 0 rgba(255,255,255, 0.2));
          border-bottom: 1px solid rgba(150,150,150, 0.7);
          display: block;
          height: 50px;

          hgroup {
            left: 0px;
            padding: 5px 10px;
            position: absolute;
            right: 60px;
            top: 0px;

            h2 {
              font: bold 1.2rem/1.6rem $sans-serif;
              padding-top: 10px;
              text-shadow: 0 1px rgba(255,255,255, 0.6);
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }

          .info-link {
            border-left: 1px solid rgba(150,150,150, 0.5);
            @include box-sizing(border-box);
            color: $base-font-color;
            display: block;
            font: bold 2rem/2.2rem $sans-serif;
            height: 100%;
            opacity: 0.6;
            padding-top: 10px;
            position: absolute;
            right: 0px;
            text-align: center;
            text-shadow: 0 1px rgba(255,255,255, 0.6);
            top: 0px;
            width: 60px;
          }

          &:hover {
            @include background-image(linear-gradient(-90deg, rgba(255,255,255, 1), rgba(255,255,255, 0.8)));

            h2, p, .info-link {
              color: $blue;
              opacity: 1;
            }
          }
        }
      }

      .info {
        height: 180px + 130px;
        left: 0px;
        position: absolute;
        top: 0px;
        @include transition(all, 0.15s, linear);
        width: 100%;

        .meta-info {
          background: rgba(0,0,0, 0.6);
          bottom: 130px;
          border-top: 1px solid rgba(0,0,0, 0.5);
          @include clearfix;
          position: absolute;
          @include transition(all, 0.15s, linear);
          width: 100%;

          p {
            color: rgb(255,255,255);
            font: 300 1.2rem/1.4rem $sans-serif;
            padding: 5px 10px;

            &.university {
              float: left;
            }

            &.dates {
              float: right;
              margin-top: 0px;
            }
          }
        }

        .cover-image {
          height: 180px;
          overflow: hidden;
          width: 100%;

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

        .desc {
          background: rgb(255,255,255);
          @include box-sizing(border-box);
          height: 130px;
          overflow: hidden;
          padding: 10px;
          width: 100%;

        }
      }

      &:hover {
        background: rgb(245,245,245);
        border-color: rgb(190,190,190);
        @include box-shadow(0 1px 16px 0 rgba($blue, 0.35));

        .info {
          top: -130px;

          .meta-info {
            opacity: 0;
          }
        }
      }
    }
  }
}
