{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.featured %}

<main class="np-main np-homepage">
  <div class="np-homepage-hero">
    <img class="np-homepage-hero-image"
      src="{{ homepage.artwork_url }}"
      alt="{{ homepage.headline }}"
    />
    <div class="np-homepage-hero-content">
      <img class='np-homepage-hero-logo' src='https://s3.amazonaws.com/static.northpass.com/demos/g2-university-logo.png'>
      <div class="np-homepage-headline np-header-font-color">
        {{ homepage.headline }}
      </div>
      <div class="np-homepage-subheadline np-header-font-color">
        {{ homepage.subheadline }}
      </div>
    </div>

  </div>
  {% include "sub_navigation" %}
  {% include 'courses_catalog' %}
</main>
{% comment %} {% include "footer" %} {% endcomment %}

<style>
  body { background: #FEFEFE; }
  .np-main {
    margin-bottom: 0;
  }
  .np-powered-by {
    background: rgb(6, 40, 70);
  }

  .np-homepage-hero-content {
    position:relative;
  }

  .np-homepage-hero .np-homepage-hero-image {
    display:none;
    max-height: 612px;
    height: 100%;
    object-fit: contain;
  }

  .np-homepage-hero .np-homepage-hero-logo {
    width: 125px;
  }

  .np-homepage-hero .np-homepage-headline {
    font-size: 35px;
    line-height: 45px;
    font-weight: 800;
    margin:10px auto 30px;
  }

  .np-homepage-hero .np-homepage-subheadline {
    font-size: 18px;
    line-height: 24px;
    max-width: 600px;
    font-weight:400;
    color: rgb(38, 49, 61);
  }

  .np-homepage-hero .np-homepage-buttons {
    display: block;
    margin-bottom: 30px auto 0;
    justify-content: center;
  }

  .np-homepage-hero .np-homepage-hero-cta.np-button {
    margin: 20px 15px 0 !important;
    font-size: 16px;
    height:53px;
    border-radius:100px;
    padding: 12px 45px;
  }

  @media (min-width:992px) {

    .np-homepage-hero .np-homepage-hero-content {
      padding: 50px 32px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }

    .np-homepage-hero .np-homepage-hero-image {
      display:block;
      min-height:475px;
    }

    .np-homepage-hero .np-homepage-headline {
      font-size: 55px;
      line-height:72px;
      font-weight: 800;
    }

    .np-homepage-hero .np-homepage-subheadline {
      font-size: 24px;
      line-height: 31px;
    }

    .np-homepage-hero .np-homepage-buttons {
      display: flex;
      margin-top:30px;
    }
  }

  @media (min-width:1200px) {
     .np-homepage-hero .np-homepage-hero-content {
      padding: 70px 32px;
    }

    .np-homepage-hero .np-homepage-subheadline {
      max-width: 760px;
    }
  }

</style>

<script>
    window.onload = function() {
    [].slice.call(document.getElementsByClassName("np-card-content-subtitle")).forEach(function(element) {
      if(element.innerText.length > 100){
        element.innerText = element.innerText.slice(0,100) + '...'
      }
    });
  }
</script>