<!-- Header -->
<header id="js-header" class="u-header u-header--static u-header--show-hide u-header--change-appearance u-header--has-hidden-element"
        data-header-fix-moment="500"
        data-header-fix-effect="slide">
  <div class="u-header__section u-header__section--light g-bg-white g-transition-0_3 g-py-15"
       data-header-fix-moment-exclude="g-py-15"
       data-header-fix-moment-classes="u-shadow-v18 g-py-7">
    <div class="container">
      <div class="d-lg-flex flex-md-row align-items-center g-pos-rel">
        <!-- Responsive Toggle Button -->
        <button class="navbar-toggler navbar-toggler-right btn g-hidden-lg-up 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 -->
        <!-- 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 class="col g-mt-10 g-mt-0--lg g-px-0">
          <div class="row flex-row align-items-start align-items-lg-center justify-content-lg-end text-uppercase g-font-weight-600 u-header--hidden-element g-color-gray-dark-v2 g-font-size-13 text-lg-right g-mt-minus-10 g-mb-20">
            <div class="col-auto g-px-15 g-mt-10">
              <i class="fa fa-phone g-font-size-14 g-mr-3"></i>
              1 800 88 4411
            </div>

            <div class="col-auto g-pos-rel g-px-15 g-mt-10">
              <a href="#" id="languages-dropdown-invoker-2" class="g-color-gray-dark-v2 g-color-primary--hover g-text-underline--none--hover"
                 aria-controls="languages-dropdown-2"
                 aria-haspopup="true"
                 aria-expanded="false"
                 data-dropdown-event="click"
                 data-dropdown-target="#languages-dropdown-2"
                 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">EN
                <i class="fa fa-angle-down g-ml-3"></i>
              </a>
              <ul id="languages-dropdown-2" class="list-unstyled text-left u-shadow-v23 g-pos-abs g-left-0 g-bg-white g-width-160 g-py-20 g-pb-15 g-mt-5 g-z-index-2"
                  aria-labelledby="languages-dropdown-invoker-2">
                <li>
                  <a class="d-flex align-items-center g-color-main g-color-primary--hover g-text-underline--none--hover g-py-8 g-px-20" href="#">
                    <svg class="mr-2 g-ml-minus-6" xmlns="http://www.w3.org/2000/svg" height="11" width="27" viewBox="0 0 640 480">
                      <defs>
                        <clipPath id="a">
                          <path fill-opacity=".67" d="M-85.333 0h682.67v512h-682.67z"/>
                        </clipPath>
                      </defs>
                      <g clip-path="url(#a)" transform="translate(80) scale(.94)">
                        <g stroke-width="1pt">
                          <path fill="#006" d="M-256 0H768.02v512.01H-256z"/>
                          <path d="M-256 0v57.244l909.535 454.768H768.02V454.77L-141.515 0H-256zM768.02 0v57.243L-141.515 512.01H-256v-57.243L653.535 0H768.02z" fill="#fff"/>
                          <path d="M170.675 0v512.01h170.67V0h-170.67zM-256 170.67v170.67H768.02V170.67H-256z" fill="#fff"/>
                          <path d="M-256 204.804v102.402H768.02V204.804H-256zM204.81 0v512.01h102.4V0h-102.4zM-256 512.01L85.34 341.34h76.324l-341.34 170.67H-256zM-256 0L85.34 170.67H9.016L-256 38.164V0zm606.356 170.67L691.696 0h76.324L426.68 170.67h-76.324zM768.02 512.01L426.68 341.34h76.324L768.02 473.848v38.162z" fill="#c00"/>
                        </g>
                      </g>
                    </svg>
                    English
                  </a>
                </li>
                <li>
                  <a class="d-flex align-items-center g-color-main g-color-primary--hover g-text-underline--none--hover g-py-8 g-px-20" href="#">
                    <svg class="mr-2 g-ml-minus-6" xmlns="http://www.w3.org/2000/svg" height="11" width="27" viewBox="0 0 640 480">
                      <g stroke-width="1pt" fill-rule="evenodd">
                        <path fill="#fff" d="M0 0h640v480H0z"/>
                        <path fill="#00267f" d="M0 0h213.33v480H0z"/>
                        <path fill="#f31830" d="M426.67 0H640v480H426.67z"/>
                      </g>
                    </svg>
                    Spanish
                  </a>
                </li>
                <li>
                  <a class="d-flex align-items-center g-color-main g-color-primary--hover g-text-underline--none--hover g-py-8 g-px-20" href="#">
                    <svg class="mr-2 g-ml-minus-6" xmlns="http://www.w3.org/2000/svg" height="11" width="27" viewBox="0 0 640 480">
                      <g fill-rule="evenodd" stroke-width="1pt">
                        <path fill="#fff" d="M0 0h640v480H0z"/>
                        <path fill="#0039a6" d="M0 160.003h640V480H0z"/>
                        <path fill="#d52b1e" d="M0 319.997h640V480H0z"/>
                      </g>
                    </svg>
                    Russian
                  </a>
                </li>
                <li>
                  <a class="d-flex align-items-center g-color-main g-color-primary--hover g-text-underline--none--hover g-py-8 g-px-20" href="#">
                    <svg class="mr-2 g-ml-minus-6" xmlns="http://www.w3.org/2000/svg" height="11" width="27" viewBox="0 0 640 480">
                      <path fill="#ffce00" d="M0 320h640v160.002H0z"/>
                      <path d="M0 0h640v160H0z"/>
                      <path fill="#d00" d="M0 160h640v160H0z"/>
                    </svg>
                    German
                  </a>
                </li>
              </ul>
            </div>

            <div class="col-auto g-px-15 g-mt-10">
              <ul class="list-inline mb-0 g-mx-minus-3">
                <li class="list-inline-item g-valign-middle g-mx-3">
                  <a class="d-block u-icon-v3 u-icon-size--xs u-shadow-v17 g-rounded-50x g-bg-white g-color-gray-dark-v1 g-color-primary--hover g-text-underline--none--hover" href="#">
                    <i class="fa fa-facebook"></i>
                  </a>
                </li>
                <li class="list-inline-item g-valign-middle g-mx-3">
                  <a class="d-block u-icon-v3 u-icon-size--xs u-shadow-v17 g-rounded-50x g-bg-white g-color-gray-dark-v1 g-color-primary--hover g-text-underline--none--hover" href="#">
                    <i class="fa fa-twitter"></i>
                  </a>
                </li>
                <li class="list-inline-item g-valign-middle g-mx-3">
                  <a class="d-block u-icon-v3 u-icon-size--xs u-shadow-v17 g-rounded-50x g-bg-white g-color-gray-dark-v1 g-color-primary--hover g-text-underline--none--hover" href="#">
                    <i class="fa fa-instagram"></i>
                  </a>
                </li>
              </ul>
            </div>
          </div>

          <nav class="navbar navbar-expand-lg p-0">
            <!-- Navigation -->
            <div class="collapse navbar-collapse align-items-center flex-sm-row g-pt-10 g-pt-5--lg g-mr-40--sm" id="navBar">
              <ul class="navbar-nav text-uppercase g-font-weight-600 ml-auto">
                <li class="nav-item g-mx-20--lg{% if mainNavActive_1 == 'home' %} active{% endif %}">
                  <a href="#" class="nav-link px-0">Home
                    {% if mainNavActive_1 == 'home' %}<span class="sr-only">(current)</span>{% endif %}
                  </a>
                </li>
                <li class="nav-item g-mx-20--lg{% if mainNavActive_1 == 'features' %} active{% endif %}">
                  <a href="#" class="nav-link px-0">Features
                    {% if mainNavActive_1 == 'features' %}<span class="sr-only">(current)</span>{% endif %}
                  </a>
                </li>
                <li class="nav-item g-mx-20--lg{% if mainNavActive_1 == 'shortcodes' %} active{% endif %}">
                  <a href="#" class="nav-link px-0">Shortcodes
                    {% if mainNavActive_1 == 'shortcodes' %}<span class="sr-only">(current)</span>{% endif %}
                  </a>
                </li>
                <li class="nav-item g-mx-20--lg{% if mainNavActive_1 == 'pages' %} active{% endif %}">
                  <a href="#" class="nav-link px-0">Pages
                    {% if mainNavActive_1 == 'pages' %}<span class="sr-only">(current)</span>{% endif %}
                  </a>
                </li>
                <li class="nav-item g-mx-20--lg{% if mainNavActive_1 == 'demos' %} active{% endif %}">
                  <a href="#" class="nav-link px-0">Demos
                    {% if mainNavActive_1 == 'demos' %}<span class="sr-only">(current)</span>{% endif %}
                  </a>
                </li>
                <li class="nav-item g-ml-20--lg g-mr-0--lg{% if mainNavActive_1 == 'whats-new' %} active{% endif %}">
                  <a href="#" class="nav-link px-0">What's New
                    {% if mainNavActive_1 == 'whats-new' %}<span class="sr-only">(current)</span>{% endif %}
                  </a>
                </li>
              </ul>
            </div>
            <!-- End Navigation -->

            <!-- Basket -->
            <div class="u-basket d-inline-block g-valign-middle g-mr-30 g-pt-8">
              <a href="#" id="basket-bar-invoker" class="u-icon-v1 g-color-main g-text-underline--none--hover g-width-20 g-height-20"
                 aria-controls="basket-bar"
                 aria-haspopup="true"
                 aria-expanded="false"
                 data-dropdown-event="hover"
                 data-dropdown-target="#basket-bar"
                 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">
                <span class="u-badge-v1--sm g-color-white g-bg-primary g-rounded-50x">3</span>
                <i class="fa fa-shopping-cart"></i>
              </a>

              <div id="basket-bar" 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/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 -->
                </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 -->

            <!-- Search -->
            <div class="d-inline-block g-pos-rel g-valign-middle g-pt-3">
              <a href="#" class="g-font-size-18 g-color-main"
                 aria-haspopup="true"
                 aria-expanded="false"
                 aria-controls="searchform-1"
                 data-dropdown-target="#searchform-1"
                 data-dropdown-type="css-animation"
                 data-dropdown-duration="300"
                 data-dropdown-animation-in="fadeInUp"
                 data-dropdown-animation-out="fadeOutDown">
                <i class="fa fa-search"></i>
              </a>

              <!-- Search Form -->
              <form id="searchform-1" class="u-searchform-v1 u-dropdown--css-animation u-dropdown--hidden g-bg-white g-pa-10 g-mt-20">
                <div class="input-group g-brd-primary--focus">
                  <input class="form-control rounded-0 u-form-control" type="search" placeholder="Enter Your Search Here...">

                  <div class="input-group-addon p-0">
                    <button class="btn rounded-0 btn-primary btn-md g-font-size-14 g-px-18" type="submit">Go</button>
                  </div>
                </div>
              </form>
              <!-- End Search Form -->
            </div>
            <!-- End Search -->
          </nav>
        </div>
      </div>
    </div>
  </div>
</header>
<!-- End Header -->
