{% include "header" %}
<main class="np-main np-max-width np-page-container">
  <div class="np-hidden-mobile" id="learning-path-desktop">
    {% include "learning_path_desktop_view" %}
  </div>
  <div class="np-hidden-desktop" id="learning-path-mobile">
    {% include "learning_path_mobile_view" %}
  </div>
</main>
{% include "footer" %}

<style>
  .np-header {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  }

  .np-resource-header {
    padding: 32px 16px 0;
  }
  
  .lp-cover-image-wrapper {
    position:relative;
  }

  .lp-title {
    position:absolute;
    color:#fff;
    font-weight:700;
    top:16px;
    left:16px;
    padding-right:16px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
    font-size:24px;
    line-height:32px;
  }

  .np-learning-path-outline {
    padding: 0 16px;
  }

  .np-learning-path-outline-bar {
    border-radius: 2px;
    height: 24px;
    margin: 8px auto;
    width: 5px;
  }

  .np-learning-path-outline-description {
    color: #333;
    font-size: 15px;
    line-height: 21px;
  }

  .np-learning-path-outline-content .course-length {
    margin: 6px 0 18px;
    font-weight: 500;
    color:#333;
    font-size:15px;
  }

  .card-description {
    padding: 0 4px;
    margin: 32px 16px;
  }

  .np-learning-path-outline-item.np-learning-path-outline-inactive-item:before {
    content: "\f023";
    font-family:"Font Awesome 5 Pro";
    width:20px;
    height:20px;
    position:absolute;
    right:20px;
    top:20px;
    color:#333;
  }

  .np-learning-path-outline-icon {
    color:#3c228a;
  }

  .np-top-title {
    color:#333;
  }

  @media (min-width:768px) {
    .np-resource-header {
      padding: 32px 16px;
    }

    .lp-title {
      font-size: 32px;
      line-height: 40px;
    }

    .lp-info {
      padding: 0 40px 0 16px;
    }

    .np-learning-path-outline-inactive-item .np-learning-path-outline-course-image, 
    .np-learning-path-outline-inactive-item .np-events-content-date {
      height: 112px;
      width: 183px;
    }

    .np-learning-path-outline {
      padding: 0;
    }

    .np-card-heading {
      font-size:22px;
      line-height:normal;
    }

  }

  @media (min-width:1200px) {
    .lp-title {
      font-size: 40px;
      line-height: 48px;
    }
  }
</style>