{% if site.search %} <div class=“search-wrapper”>

<div class="search-form">
    <input type="text" id="search-input" class="search-field" placeholder="Search...">
    <i id="search-close" class="fa fa-times-circle"></i>
    <h4>Search results</h4>
    <ul id="results-container" class="search-results post-list">
    </ul>
    <!-- /.search-results -->
</div>
<!-- /.search-form -->

</div> <!– ./search-wrapper –> {% endif %}

{% include menu.html %}

{% if page.imagefeature %} <header id=“masthead” class=“blog-background overlay align-center align-middle animated from-bottom” style=“background-image: url({{ site.url }}{{ site.baseurl }}/images/{{ page.imagefeature }})”

itemscope itemtype="http://schema.org/Organization">
{% if page.imagecredit %}
<span class="image-credit">Photo Credit: <a href="{{ page.imagecreditlink }}" target="_blank"> {{ page.imagecredit }}</a></span>
{% endif %}

{% else %} <header id=“masthead” class=“blog-background overlay align-center align-middle animated from-bottom” style=“background-image: url({{ site.url }}{{ site.baseurl }}/{{ randomBackground }})”

itemscope itemtype="http://schema.org/Organization">

{% endif %}

{% if site.search %}

<button class="menu-button animated fade dosearch">
    <i class="fa fa-search"></i>
</button>

{% endif %}

{% if page.headline %}

<div class="inner">
    <div class="container">
        <a class="brand light" href="{{ site.url }}{{ site.baseurl }}/" itemprop="url">
            {% if site.logo %}<img itemprop="logo" src="{{ site.url }}{{ site.baseurl }}/images/{{ site.logo }}" alt="{{ site.title }} Logo" />{% endif %}
            <h1 class="blog-title light" itemprop="name">
                {{ site.title }}
            </h1>
        </a>

        <h2 class="blog-description light bordered bordered-top" itemprop="description">
            {{ page.headline }}
        </h2>
    </div>
</div>

{% else %}

<div class="inner">
    <div class="container">
        <a class="brand" href="{{ site.url }}{{ site.baseurl }}/" itemprop="url">
            {% if site.logo %}<img itemprop="logo" src="{{ site.url }}{{ site.baseurl }}/images/{{ site.logo }}" alt="{{ site.title }} Logo" />{% endif %}
            <h1 class="blog-title light" itemprop="name">
                {{ site.title }}
            </h1>
        </a>
    </div>
</div>

{% endif %}

{% if site.animated_fins and site.triangleheader %}

<div class="decor-wrapper">
    <svg id="header-decor" class="decor bottom" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100" preserveAspectRatio="none">
        <path class="large left" d="M0 0 L50 50 L0 100" fill="rgba({{ site.fin_color }}, .1)"></path>
        <path class="large right" d="M100 0 L50 50 L100 100" fill="rgba({{ site.fin_color }}, .1)"></path>
        <path class="medium left" d="M0 100 L50 50 L0 33.3" fill="rgba({{ site.fin_color }}, .3)"></path>
        <path class="medium right" d="M100 100 L50 50 L100 33.3" fill="rgba({{ site.fin_color }}, .3)"></path>
        <path class="small left" d="M0 100 L50 50 L0 66.6" fill="rgba({{ site.fin_color }}, .5)"></path>
        <path class="small right" d="M100 100 L50 50 L100 66.6" fill="rgba({{ site.fin_color }}, .5)"></path>
        <path d="M0 99.9 L50 49.9 L100 99.9 L0 99.9" fill="rgba(255,255,255, 1)"></path>
        <path d="M48 52 L50 49 L52 52 L48 52" fill="rgba(255,255,255, 1)"></path>
    </svg>
</div>

{% else %}

{% if site.triangleheader %}
<div class="decor-wrapper">
    <svg id="header-decor" class="decor bottom" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100" preserveAspectRatio="none">
        <path d="M0 99.9 L50 49.9 L100 99.9 L0 99.9" fill="rgba(255,255,255, 1)"></path>
        <path d="M48 52 L50 49 L52 52 L48 52" fill="rgba(255,255,255, 1)"></path>
    </svg>
</div>
{% endif %}

{% endif %} </header>