<div class="header-main full-width">
  <div class="container">
    <div class="header-main-container full-width">
      {% if page.site_branding %}
        <div class="site-branding-region">
          {{ page.site_branding }}
        </div>
      {% endif %}
      <div class="header-seperator-line"></div>
      {% if page.primary_menu or page.header_search %}
      <div class="header-right">
        {% if page.primary_menu %}
          <div class="mobile-menu-icon" role="button" onclick="showMobileMenu()" aria-label="Open main menu">
            <span></span>
            <span></span>
            <span></span>
          </div><!-- /mobile-menu -->
              <div class="primary-menu-wrapper">
                <div class="menu-wrap">
                  <div class="close-mobile-menu" role="button" onclick="closeMobileMenu()" aria-label="Close main menu"><i class="ficon-close"></i></div>
                  {{ page.primary_menu }}
                </div>
              </div><!-- /primary-menu-wrapper -->
        {% endif %}
        {% if page.header_search %}
          <div class="header-search">
            <div class="header-icon header-icon-search" role="button" aria-label="Open Search" onclick="openSearch()">
              <i class="ficon-search"></i>
            </div>
            <div class="header-search-wrap">
              <div class="header-search-block header-search-section">
                <div role="button" class="close-header-search" aria-label="Close search" onclick="closeSearch()">
                  <i class="ficon-close"></i>
                </div>
                <div class="container">
                  {{ page.header_search }}
                </div>
              </div>
              <div class="header-search-shadow header-search-section" onclick="closeSearch()"></div>
            </div>
          </div>
        {% endif %}
      </div>
      {% endif %}
    </div>
  </div>
</div>