{% include "header_minimal" %}
<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>

<style>
  body {
    background-image: url(https://s3.amazonaws.com/static.northpass.com/SPS/sps-background.gif);
  }
  .np-card-padding-large {
    background: rgba(255, 255, 255, 0.5);
    box-shadow: none;
  }
  .np-card-container,
  .np-card-container-training-session {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    box-shadow: none;
    position: relative;
  }
  .np-learning-path-outline-icon {
    align-self: center;
    font-size: 40px;
    color: #9b4b87;
  }
  .np-box-header {
    height: 80px;
  }
  .np-powered-by {
    background: none;
  }
  @media screen and (max-width: 835px) {
    .col-sm-6 {
      max-width: 45%;
    }
    .np-card-padding, .np-card-padding-dynamic {
      padding-left: 0;
    }
  }
  @media screen and (max-width: 765px) {
    .np-box-header {
      height: 60px;
    }
  }
</style>