{% if page.header == NULL and page.header.image_fullwidth == NULL and page.header.pattern == NULL and page.header.background-color == NULL and page.header.title == NULL %}

<div id="masthead-no-image-header">
	<div class="row">
		<div class="small-12 columns">
			<a id="logo" href="{{ site.url }}" title="{{ site.title }} – {{ site.slogan }}">
				<img src="{{ site.url }}/assets/img/{{ site.logo }}" alt="{{ site.title }} – {{ site.slogan }}">
			</a>
		</div><!-- /.small-12.columns -->
	</div><!-- /.row -->
</div><!-- /#masthead -->



{% elsif page.header.title %}

<div id="masthead-with-text" style="{% if page.header.background-color %}background: {{ page.header.background-color }};{% endif %} {% if page.header.image_fullwidth %}{% elsif page.header.pattern %}background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4)), url('{{ site.url }}/images/{{ page.header.pattern }}'){% endif %}">
	<div class="row">
		<div class="small-12 columns">
			<div class="masthead-title">{{ page.header.title }}</div>
		</div><!-- /.small-12.columns -->
	</div><!-- /.row -->
</div><!-- /#masthead -->

{% if page.header.caption_url && page.header.caption %}
<div class="masthead-caption">
	<a href="{{ page.header.caption_url }}">{{ page.header.caption }}</a>
</div>
{% elsif page.header.caption %}
<div class="masthead-caption">
	{{ page.header.caption }}
</div>
{% endif %}



{% elsif page.header.image_fullwidth %}

<div id="masthead">
	<div class="row">
		<div class="small-12 columns">
			<a id="logo" href="{{ site.url }}" title="{{ site.title }} – {{ site.slogan }}">
				<img src="{{ site.url }}/assets/img/{{ site.logo }}" alt="{{ site.title }} – {{ site.slogan }}">
			</a>
		</div><!-- /.small-12.columns -->
	</div><!-- /.row -->
</div><!-- /#masthead -->

{% if page.header.caption_url && page.header.caption %}
<div class="masthead-caption">
	<a href="{{ page.header.caption_url }}">{{ page.header.caption }}</a>
</div>
{% elsif page.header.caption %}
<div class="masthead-caption">
	{{ page.header.caption }}
</div>
{% endif %}



{% elsif page.header.pattern %}

<div id="masthead-with-pattern" style="background: url('{{ site.url }}/images/{{ page.header.pattern }}')">
	<div class="row">
		<figure class="small-12 columns">
			<img src="{{ site.url }}/images/{{ page.header.image }}" alt="{{ site.title }}">
		</figure><!-- /.small-12.columns -->
	</div><!-- /.row -->
</div><!-- /#masthead -->

	{% if page.header.caption_url && page.header.caption %}
	<div class="masthead-caption">
		<a href="{{ page.header.caption_url }}">{{ page.header.caption }}</a>
	</div>
	{% elsif page.header.caption %}
	<div class="masthead-caption">
		{{ page.header.caption }}
	</div>
	{% endif %}



{% elsif page.header.background-color %}

<div id="masthead-with-background-color" style="background: {{ page.header.background-color }};">
	<div class="row">
		<figure class="small-12 columns">
			<img src="{{ site.url }}/images/{{ page.header.image }}" alt="{{ site.title }}">
		</figure><!-- /.small-12.columns -->
	</div><!-- /.row -->
</div><!-- /#masthead -->

{% if page.header.caption_url && page.header.caption %}
<div class="masthead-caption">
	<a href="{{ page.header.caption_url }}">{{ page.header.caption }}</a>
</div>
{% elsif page.header.caption %}
<div class="masthead-caption">
	{{ page.header.caption }}
</div>
{% endif %}



{% elsif page.header == no %}

{% endif %}