{% include "header" %}
{% comment %} {% include "sub_navigation" %} {% endcomment %}
<main class="np-main np-max-width np-page-container">
  <div class="np-hidden-mobile" id="course-desktop">
    {% include "course_desktop_view" %}
  </div>
  <div class="np-hidden-desktop" id="course-mobile">
    {% include "course_mobile_view" %}
  </div>
</main>
{% include "footer" %}

<style>
  .course-detail-rating-stars svg > * {
    fill: white;
  }
  .course-detail-rating-stars svg {
    scale: 1.2;
    margin: 0 3px;
  }
  .course-detail-rating-stars {
    margin-bottom: 9px;
  }
  .np-course-banner-image {
    border-radius: 8px;
  }
  .np-course-banner-overlay {
    border-radius: 8px;
  }
  .np-top-cta {
    border-radius: 8px;
    opacity: 0;
  }

  #course-desktop .np-course-outline .np-course-outline-title {
    color:#cc0033;
  }


  @media screen and (max-width: 1170px) {
    .course-detail-rating-stars {
      margin-bottom: 5px;
      margin-left: -2px;
    }
    .course-detail-rating-stars svg {
      scale: 1;
      margin: 0;
    }
  }
  @media screen and (max-width: 768px) {
    .course-detail-rating-stars {
      margin-bottom: 3px;
      margin-left: -1px;
    }
    .course-detail-rating-stars svg {
      scale: 0.8;
      margin: 0 -1px;
    }
  }
</style>