{% unless page.header.navigation == 'fancy' %}
{% include navigation.html %}
{% endunless %}


{% if page.header.layout == 'hero' %}
<header class="flex flex-column cover w-100 {% if page.header.vh %}{{ page.header.vh }}{% else %}vh-75-l{% endif %} bg-left bg-center-l {% if page.header.class %}{{ page.header.class }}{% endif %}" {% if page.header.image %}style="background-image: url({{ page.header.image | absolute_url }})"{% endif %}>
  {% if page.header.navigation == 'fancy' %}
  {% include navigation.html %}
  {% endif %}
  <div class="flex flex-auto flex-column justify-center">
    <div class="flex flex-column items-start items-center-l mw9 mw7-m center w-100 pv5 pv0-l pa3 ph4-ns">
      <h1 class="f2 f1-l fw6 lh-title white mv0">{{ page.title }}</h1>
      {% if page.subtitle %}
      <h2 class="f3 f2-l fw4 lh-title white mt3 mb3">{{ page.subtitle }}</h2>
      {% endif %}
      {% if page.paragraph %}
      <p class="f5 f4-l fw3 lh-copy white-90 mt3 mb3">{{ page.paragraph }}</p>
      {% endif %}

      {% if page.header.cta.url contains "://" %}
      <a class="f5 f4-ns {{ page.header.cta.class | join: ' ' | prepend: ' ' }}" href="{{ page.header.cta.url }}" target="_blank" rel="nofollow">{{ page.header.cta.text }}</a>
      {% elsif page.header.cta.url %}
      <a class="f5 f4-ns {{ page.header.cta.class | join: ' ' | prepend: ' ' }}" href="{{ page.header.cta.url | absolute_url }}">{{ page.header.cta.text }}</a>
      {% endif %}
    </div>
  </div>
</header>

{% elsif page.header.layout == 'header' %}
<header class="flex flex-column cover w-100 {% if page.header.vh %}{{ page.header.vh }}{% else %}vh-50 vh-75-l{% endif %} bg-left bg-center-l" {% if page.header.image %}style="background-image: url({{ page.header.image | absolute_url }})"{% endif %}>
{% if page.header.navigation == 'fancy' %}
{% include navigation.html %}
{% endif %}
</header>
{% endif %}


{% if page.header.caption %}
<span class="flex flex-row justify-center f6 fw3 silver pv2 ph3">{{ site.data.theme.text.caption }}&colon;&nbsp; {{ page.header.caption | markdownify | remove: "<p>" | remove: "</p>" }}</span>
{% endif %}