<!-- Header -->
<header id="js-header" class="u-header u-header--static u-header--show-hide u-header--has-hidden-element"
        data-header-fix-moment="500"
        data-header-fix-effect="slide">
  <!-- Top Bar -->
  <div class="u-header__section u-header__section--light g-bg-white g-color-gray-dark-v5 g-brd-bottom g-brd-gray-light-v4 g-py-10">
    <div class="row flex-column flex-md-row justify-content-between align-items-center text-center g-font-size-12 mx-0">
      <div class="col-auto col-lg-4 text-lg-left g-px-15">
        <ul class="d-inline-block list-inline g-font-size-16 g-valign-middle g-mr-15 mb-0">
          <li class="list-inline-item">
            <a class="g-color-gray-dark-v5 g-color-primary--hover g-text-underline--none--hover g-pa-5" href="#!">
              <i class="icon-social-instagram"></i>
            </a>
          </li>
          <li class="list-inline-item">
            <a class="g-color-gray-dark-v5 g-color-primary--hover g-text-underline--none--hover g-pa-5" href="#!">
              <i class="icon-social-twitter"></i>
            </a>
          </li>
          <li class="list-inline-item">
            <a class="g-color-gray-dark-v5 g-color-primary--hover g-text-underline--none--hover g-pa-5" href="#!">
              <i class="icon-social-facebook"></i>
            </a>
          </li>
          <li class="list-inline-item">
            <a class="g-color-gray-dark-v5 g-color-primary--hover g-text-underline--none--hover g-pa-5" href="#!">
              <i class="icon-envelope"></i>
            </a>
          </li>
        </ul>
        <a href="tel:#" class="d-inline-block g-valign-middle g-text-underline--none--hover">(1) 396 4587 99</a>
      </div>

      <div class="col-auto g-px-15 g-py-20 g-py-0--md">
        <!-- Logo -->
        <a href="{{ root }}index.html" class="navbar-brand">
          <img src="{{ root }}assets/img/logo/logo-1.png" alt="Image Description">
        </a>
        <!-- End Logo -->
      </div>

      <div class="col-auto col-lg-4 text-lg-right g-px-15">
        <div class="g-mt-minus-10 g-mx-minus-10">
          <a class="btn g-font-weight-600 u-btn-outline-primary g-rounded-50 g-valign-middle g-mx-10 g-mt-10" href="#!">Subscribe</a>

          <!-- Basket -->
          <div class="u-basket d-inline-block g-valign-middle g-color-main g-mt-10 g-mx-10">
            <a href="#!" id="basket-bar-invoker-9" class="g-color-gray-dark-v4 g-font-size-16 g-text-underline--none--hover g-valign-middle"
               aria-controls="basket-bar-9"
               aria-haspopup="true"
               aria-expanded="false"
               data-bage-info="12"
               data-dropdown-event="hover"
               data-dropdown-target="#basket-bar-9"
               data-dropdown-type="css-animation"
               data-dropdown-duration="300"
               data-dropdown-hide-on-scroll="false"
               data-dropdown-animation-in="fadeIn"
               data-dropdown-animation-out="fadeOut">
              <i class="icon-basket-loaded"></i>
            </a>

            <div id="basket-bar-9" class="u-basket__bar u-dropdown--css-animation u-dropdown--hidden g-brd-top g-brd-2 g-brd-primary g-color-main g-mt-20"
                 aria-labelledby="basket-bar-invoker">
              <div class="js-scrollbar g-height-280">
                <!-- Product -->
                <div class="u-basket__product">
                  <div class="row align-items-center no-gutters">
                    <div class="col-4 g-pr-20">
                      <a href="#!" class="u-basket__product-img">
                        <img src="{{ root }}assets/img-temp/150x150/img1.jpg" alt="Image Description">
                      </a>
                    </div>

                    <div class="col-8">
                      <h6 class="g-font-weight-600 g-mb-0">
                        <a href="#!" class="g-color-main g-color-main--hover g-text-underline--none--hover">Black Glasses</a>
                      </h6>
                      <small class="g-color-gray-dark-v5 g-font-size-14">1 x $400.00</small>
                    </div>
                  </div>

                  <button class="u-basket__product-remove" type="button">&times;</button>
                </div>
                <!-- End Product -->

                <!-- Product -->
                <div class="u-basket__product">
                  <div class="row align-items-center no-gutters">
                    <div class="col-4 g-pr-20">
                      <a href="#!" class="u-basket__product-img">
                        <img src="{{ root }}assets/img-temp/150x150/img2.jpg" alt="Image Description">
                      </a>
                    </div>

                    <div class="col-8">
                      <h6 class="g-font-weight-600 g-mb-0">
                        <a href="#!" class="g-color-main g-color-main--hover g-text-underline--none--hover">Black Glasses</a>
                      </h6>
                      <small class="g-color-gray-dark-v5 g-font-size-14">1 x $400.00</small>
                    </div>
                  </div>

                  <button class="u-basket__product-remove" type="button">&times;</button>
                </div>
                <!-- End Product -->

                <!-- Product -->
                <div class="u-basket__product">
                  <div class="row align-items-center no-gutters">
                    <div class="col-4 g-pr-20">
                      <a href="#!" class="u-basket__product-img">
                        <img src="{{ root }}assets/img-temp/150x150/img3.jpg" alt="Image Description">
                      </a>
                    </div>

                    <div class="col-8">
                      <h6 class="g-font-weight-600 g-mb-0">
                        <a href="#!" class="g-color-main g-color-main--hover g-text-underline--none--hover">Black Glasses</a>
                      </h6>
                      <small class="g-color-gray-dark-v5 g-font-size-14">1 x $400.00</small>
                    </div>
                  </div>

                  <button class="u-basket__product-remove" type="button">&times;</button>
                </div>
                <!-- End Product -->

                <!-- Product -->
                <div class="u-basket__product">
                  <div class="row align-items-center no-gutters">
                    <div class="col-4 g-pr-20">
                      <a href="#!" class="u-basket__product-img">
                        <img src="{{ root }}assets/img-temp/150x150/img1.jpg" alt="Image Description">
                      </a>
                    </div>

                    <div class="col-8">
                      <h6 class="g-font-weight-600 g-mb-0">
                        <a href="#!" class="g-color-main g-color-main--hover g-text-underline--none--hover">Black Glasses</a>
                      </h6>
                      <small class="g-color-gray-dark-v5 g-font-size-14">1 x $400.00</small>
                    </div>
                  </div>

                  <button class="u-basket__product-remove" type="button">&times;</button>
                </div>
                <!-- End Product -->
              </div>

              <div class="g-brd-top g-brd-gray-light-v4 g-pa-15 g-pb-20">
                <div class="d-flex flex-row align-items-center justify-content-between g-letter-spacing-1 g-font-size-16 g-mb-15">
                  <strong class="text-uppercase g-font-weight-600">Subtotal</strong>
                  <strong class="g-color-primary g-font-weight-600">$1200.00</strong>
                </div>

                <div class="d-flex flex-row align-items-center justify-content-between g-font-size-18">
                  <a href="#!" class="btn u-btn-outline-primary rounded-0 g-width-120">View Cart</a>
                  <a href="#!" class="btn u-btn-primary rounded-0 g-width-120">Checkout</a>
                </div>
              </div>
            </div>
          </div>
          <!-- End Basket -->

          <a class="d-inline-block g-color-gray-dark-v4 g-font-size-16 g-text-underline--none--hover g-valign-middle g-mx-10 g-mt-10" href="#!">
            <i class="icon-globe"></i>
          </a>

          <ul class="d-inline-block list-inline g-color-gray-dark-v4 g-valign-middle g-mx-10 mb-0">
            <li class="list-inline-item g-mx-2 g-mt-10">
              <a class="g-color-gray-dark-v4 g-color-primary--hover g-text-underline--none--hover" href="#!">Sign In</a>
            </li>
            <li class="list-inline-item g-mx-2 g-mt-10">|</li>
            <li class="list-inline-item g-mx-2 g-mt-10">
              <a class="g-color-gray-dark-v4 g-color-primary--hover g-text-underline--none--hover" href="#!">Register</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <!-- End Top Bar -->

  <div class="u-header__section u-header--hidden-element g-bg-white g-py-10--md">
    <div class="container text-center">
      <div class="row">
        <div class="col-lg-8 offset-lg-2">
          <a href="#!" class="g-hidden-sm-down d-block">
            <img class="w-100" src="{{ root }}assets/img-temp/945x100/img1.jpg" alt="Image Description">
          </a>
        </div>
      </div>
    </div>
  </div>

  <div class="u-header__section u-header__section--dark g-bg-primary-opacity-0_8 g-pos-rel g-py-3">
    <!-- Search Form -->
    <form id="searchform-9" class="u-searchform-v3 g-font-size-25 g-color-gray-dark-v2 g-brd-2 g-brd-y g-brd-gray-light-v4 g-bg-white g-px-15">
      <div class="input-group g-brd-primary--focus">
        <input class="form-control rounded-0 u-form-control g-brd-gray-light-v3" type="search" placeholder="Start Searching...">

        <div class="input-group-addon p-0">
          <button class="text-right px-0 g-color-gray-dark-v2 g-color-gray-light-v2--hover g-font-size-14 g-letter-spacing-2" type="button"
                  aria-haspopup="true"
                  aria-expanded="false"
                  aria-controls="searchform-9"
                  data-dropdown-type="css-animation"
                  data-dropdown-duration="300"
                  data-dropdown-target="#searchform-9">
            <i class="hs-icon hs-icon-close"></i>
          </button>
        </div>
      </div>
    </form>
    <!-- End Search Form -->

    <nav class="navbar navbar-expand-lg justify-content-lg-between">
      <!-- Responsive Toggle Button -->
      <button class="navbar-toggler navbar-toggler-right btn g-line-height-1 g-brd-none g-pa-0 g-pos-abs g-top-3 g-right-0" type="button" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navBar"
              data-toggle="collapse"
              data-target="#navBar">
        <span class="hamburger hamburger--slider">
          <span class="hamburger-box">
            <span class="hamburger-inner"></span>
          </span>
        </span>
      </button>
      <!-- End Responsive Toggle Button -->

      <div class="g-pos-rel">
        <a href="#!" class="g-color-white g-color-white-opacity-0_9--hover g-text-underline--none--hover g-pa-10">
          <i class="icon-menu"></i>
        </a>
      </div>

      <!-- Navigation -->
      <div class="collapse navbar-collapse align-items-center flex-sm-row g-width-auto" id="navBar">
        <ul class="navbar-nav text-uppercase g-font-weight-600 mx-auto">
          <li class="nav-item g-mx-5 g-mx-15--xl{% if mainNavActive_1 == 'home' %} active{% endif %}">
            <a href="#!" class="nav-link">Home
              {% if mainNavActive_1 == 'home' %}<span class="sr-only">(current)</span>{% endif %}
            </a>
          </li>
          <li class="nav-item g-mx-5 g-mx-15--xl{% if mainNavActive_1 == 'blog' %} active{% endif %}">
            <a href="#!" class="nav-link">Blog
              {% if mainNavActive_1 == 'blog' %}<span class="sr-only">(current)</span>{% endif %}
            </a>
          </li>
          <li class="nav-item g-mx-5 g-mx-15--xl{% if mainNavActive_1 == 'portfolio' %} active{% endif %}">
            <a href="#!" class="nav-link">Portfolio
              {% if mainNavActive_1 == 'portfolio' %}<span class="sr-only">(current)</span>{% endif %}
            </a>
          </li>
          <li class="nav-item g-mx-5 g-mx-15--xl{% if mainNavActive_1 == 'features' %} active{% endif %}">
            <a href="#!" class="nav-link">Features
              {% if mainNavActive_1 == 'features' %}<span class="sr-only">(current)</span>{% endif %}
            </a>
          </li>
          <li class="nav-item g-mx-5 g-mx-15--xl{% if mainNavActive_1 == 'shortcodes' %} active{% endif %}">
            <a href="#!" class="nav-link">Shortcodes
              {% if mainNavActive_1 == 'shortcodes' %}<span class="sr-only">(current)</span>{% endif %}
            </a>
          </li>
          <li class="nav-item g-mx-5 g-mx-15--xl{% if mainNavActive_1 == 'demos' %} active{% endif %}">
            <a href="#!" class="nav-link">Demo Pages
              {% if mainNavActive_1 == 'demos' %}<span class="sr-only">(current)</span>{% endif %}
            </a>
          </li>
        </ul>
      </div>
      <!-- End Navigation -->

      <a class="d-inline-block g-color-white g-color-white-opacity-0_9--hover g-text-underline--none--hover g-pa-10" href="#!"
         aria-haspopup="true"
         aria-expanded="false"
         aria-controls="searchform-9"
         data-dropdown-type="css-animation"
         data-dropdown-duration="300"
         data-dropdown-target="#searchform-9">
        <i class="icon-magnifier g-mr-7"></i>
        Search
      </a>
    </nav>
  </div>
</header>
<!-- End Header -->
