{# Settings #}
{% set root = "../../../" %}
{% set mainNavActive_1 = "shortcodes" %}
{% set sidebarNavActive_1 = "shortcode-base-headers" %}
{% set title = "Headers & Navigation Panels" %}

{% include "html/assets/include/nunjucks/partials/head.njk" %}
{% include "html/assets/include/nunjucks/partials/core-fonts.njk" %}
{% include "html/assets/include/nunjucks/partials/core-css.njk" %}
{% include "html/assets/include/nunjucks/partials/core-icons.njk" %}
{% include "html/assets/include/nunjucks/partials/css/css-dzsparallaxer.njk" %}
<link rel="stylesheet" href="{{ root }}assets/vendor/jquery-ui/themes/base/jquery-ui.min.css">
<link rel="stylesheet" href="{{ root }}assets/vendor/hamburgers/hamburgers.min.css">
<link rel="stylesheet" href="{{ root }}assets/vendor/animate.css">
<link rel="stylesheet" href="{{ root }}assets/vendor/hs-megamenu/src/hs.megamenu.css">
<link rel="stylesheet" href="{{ root }}assets/vendor/cubeportfolio-full/cubeportfolio/css/cubeportfolio.min.css">
<link rel="stylesheet" href="{{ root }}assets/vendor/malihu-scrollbar/jquery.mCustomScrollbar.min.css">

{% include "html/assets/include/nunjucks/partials/css/css-unify.njk" %}
{% include "html/assets/include/nunjucks/partials/css/css-custom.njk" %}
</head>

<body class="u-body--header-side-push-left u-body--header-side-opened u-has-sidebar-navigation g-overflow-x-hidden">
<main>
  {% include "html/assets/include/nunjucks/partials/blocks/headers/header-main.njk" %}

  {% include "html/assets/include/nunjucks/partials/blocks/sidebars/sidebar-shortcode-nav.njk" %}

  {% include "html/assets/include/nunjucks/partials/blocks/page-title/shortcode-page-title/shortcode-page-title-block.njk" %}

  <section class="container g-py-100">
    <div class="g-pb-40">
      <!-- Classic Header -->
      <section id="plain-icons">
        <!-- Heading -->
        <header class="g-mb-60">
        <div class="u-heading-v6-2 text-uppercase">
          <h2 class="h4 u-heading-v6__title g-font-weight-300">Classic Header</h2>
          </div>

          <div class="g-pl-90">
            <p>Classic Header has a variety of design options, types of positioning, types of change when scrolling, several designs for mobile devices. You can combine the settings of headers the way you want.</p>
          </div>
        </header>
        <!-- End Heading -->

        <!-- Classic Designs -->
        <div class="row">
          <div class="col-md-3">
            <h3 class="h4 g-font-weight-300">Classic Designs</h3>
            <!-- <p>In hac habitasse platea dictumst urabitur hendrerit.</p> -->
          </div>

          <div class="col-md-9">
            <div class="row">
              <!-- White BG -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">White BG</h3>

                <a class="btn u-btn-primary" href="classic-header--design-bg-white.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End White BG -->

              <!-- Dark BG -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Dark BG</h3>

                <a class="btn u-btn-primary" href="classic-header--design-bg-dark.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Dark BG -->

              <!-- Primary BG -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Primary BG</h3>

                <a class="btn u-btn-primary" href="classic-header--design-bg-primary.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Primary BG -->

              <!-- Gradient BG -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Gradient BG</h3>

                <a class="btn u-btn-primary" href="classic-header--design-bg-gradient.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Gradient BG -->

              <!-- Transparent BG -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Transparent BG</h3>

                <a class="btn u-btn-primary" href="classic-header--design-bg-transparent.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Transparent BG -->

              <!-- SemiTransparent white BG -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">SemiTransparent white BG</h3>

                <a class="btn u-btn-primary" href="classic-header--design-bg-semitransparent-white.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End SemiTransparent white BG -->

              <!-- SemiTransparent black BG -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">SemiTransparent black BG</h3>

                <a class="btn u-btn-primary" href="classic-header--design-bg-semitransparent-dark.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End SemiTransparent black BG -->

              <!-- Bordered BG -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Bordered BG</h3>

                <a class="btn u-btn-primary" href="classic-header--design-bordered.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Bordered BG -->
            </div>
          </div>
        </div>
        <!-- End Classic Designs -->

        <hr class="g-brd-gray-light-v4 g-pt-10 g-mb-60">

        <!-- Floating Header Designs -->
        <div class="row">
          <div class="col-md-3">
            <h3 class="h4 g-font-weight-300">Floating Header Designs</h3>
            <!-- <p>In hac habitasse platea dictumst urabitur hendrerit.</p> -->
          </div>

          <div class="col-md-9">
            <div class="row">
              <!-- White BG -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">White BG</h3>
                <a class="btn u-btn-primary" href="classic-header--floating-bg-white.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End White BG -->

              <!-- Dark BG -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Dark BG</h3>
                <a class="btn u-btn-primary" href="classic-header--floating-bg-dark.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Dark BG -->

              <!-- Primary BG -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Primary BG</h3>
                <a class="btn u-btn-primary" href="classic-header--floating-bg-primary.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Primary BG -->

              <!-- Gradient BG -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Gradient BG</h3>
                <a class="btn u-btn-primary" href="classic-header--floating-bg-gradient.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Gradient BG -->
            </div>
          </div>
        </div>
        <!-- End Floating Header Designs -->

        <hr class="g-brd-gray-light-v4 g-pt-10 g-mb-60">

        <!-- Splitted Header Designs -->
        <div class="row">
          <div class="col-md-3">
            <h3 class="h4 g-font-weight-300">Splitted Header Designs</h3>
            <!-- <p>In hac habitasse platea dictumst urabitur hendrerit.</p> -->
          </div>

          <div class="col-md-9">
            <div class="row">
              <!-- White BG -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">White BG</h3>
                <a class="btn u-btn-primary" href="classic-header--splitted-bg-white.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End White BG -->

              <!-- Dark BG -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Dark BG</h3>
                <a class="btn u-btn-primary" href="classic-header--splitted-bg-dark.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Dark BG -->

              <!-- Primary BG -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Primary BG</h3>
                <a class="btn u-btn-primary" href="classic-header--splitted-bg-primary.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Primary BG -->

              <!-- Gradient BG -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Gradient BG</h3>
                <a class="btn u-btn-primary" href="classic-header--splitted-bg-gradient.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Gradient BG -->
            </div>
          </div>
        </div>
        <!-- End Splitted Header Designs -->

        <hr class="g-brd-gray-light-v4 g-pt-10 g-mb-60">

        <!-- Header Components -->
        <div class="row">
          <div class="col-md-3">
            <h3 class="h4 g-font-weight-300">Header Components</h3>
            <!-- <p>In hac habitasse platea dictumst urabitur hendrerit.</p> -->
          </div>

          <div class="col-md-9">
            <div class="row">
              <!-- Search bar -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Search bar</h3>

                <a class="btn u-btn-primary" href="classic-header--components-search.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Search bar -->

              <!-- Basket -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Basket</h3>

                <a class="btn u-btn-primary" href="classic-header--components-basket.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Basket -->

              <!-- Languages -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Languages</h3>

                <a class="btn u-btn-primary" href="classic-header--components-langs.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Languages -->
            </div>
          </div>
        </div>
        <!-- End Header Components -->

        <hr class="g-brd-gray-light-v4 g-pt-10 g-mb-60">

        <!-- Nav Styles -->
        <div class="row">
          <div class="col-md-3">
            <h3 class="h4 g-font-weight-300">Nav Styles</h3>
            <!-- <p>In hac habitasse platea dictumst urabitur hendrerit.</p> -->
          </div>

          <div class="col-md-9">
            <div class="row">
              <!-- Nav Styles - 1 -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Nav Styles - 1</h3>

                <a class="btn u-btn-primary" href="classic-header--nav-1.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Nav Styles - 1 -->

              <!-- Nav Styles - 2 -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Nav Styles - 2</h3>

                <a class="btn u-btn-primary" href="classic-header--nav-2.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Nav Styles - 2 -->

              <!-- Nav Styles - 3 -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Nav Styles - 3</h3>

                <a class="btn u-btn-primary" href="classic-header--nav-3.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Nav Styles - 3 -->

              <!-- Nav Styles - 4 -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Nav Styles - 4</h3>

                <a class="btn u-btn-primary" href="classic-header--nav-4.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Nav Styles - 4 -->

              <!-- Nav Styles - 5 -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Nav Styles - 5</h3>

                <a class="btn u-btn-primary" href="classic-header--nav-5.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Nav Styles - 5 -->

              <!-- Nav Styles - 6 -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Nav Styles - 6</h3>

                <a class="btn u-btn-primary" href="classic-header--nav-6.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Nav Styles - 6 -->

              <!-- Nav Styles - 7 -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Nav Styles - 7</h3>

                <a class="btn u-btn-primary" href="classic-header--nav-7.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Nav Styles - 7 -->

              <!-- Nav Styles - 8 -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Nav Styles - 8</h3>

                <a class="btn u-btn-primary" href="classic-header--nav-8.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Nav Styles - 8 -->
            </div>
          </div>
        </div>
        <!-- End Nav Styles -->

        <hr class="g-brd-gray-light-v4 g-pt-10 g-mb-60">

        <!-- Full Width -->
        <div class="row">
          <div class="col-md-3">
            <h3 class="h4 g-font-weight-300">Full Width</h3>
            <!-- <p>In hac habitasse platea dictumst urabitur hendrerit.</p> -->
          </div>

          <div class="col-md-9">
            <div class="row">
              <!-- Splitted Header -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <!-- <h3 class="h5 g-font-weight-300 g-mb-15">Full Width</h3> -->

                <a class="btn u-btn-primary" href="classic-header--full-width.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Splitted Header -->
            </div>
          </div>
        </div>
        <!-- End Full Width -->

        <hr class="g-brd-gray-light-v4 g-pt-10 g-mb-60">

        <!-- Alignments -->
        <div class="row">
          <div class="col-md-3">
            <h3 class="h4 g-font-weight-300">Alignments</h3>
            <!-- <p>In hac habitasse platea dictumst urabitur hendrerit.</p> -->
          </div>

          <div class="col-md-9">
            <div class="row">
              <!-- Left -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Left</h3>

                <a class="btn u-btn-primary" href="classic-header--alignments-left.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Left -->

              <!-- Center -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Center</h3>

                <a class="btn u-btn-primary" href="classic-header--alignments-center.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Center -->

              <!-- Right -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Right</h3>

                <a class="btn u-btn-primary" href="classic-header--alignments-right.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Right -->
            </div>
          </div>
        </div>
        <!-- End Alignments -->

        <hr class="g-brd-gray-light-v4 g-pt-10 g-mb-60">

        <!-- TopBar -->
        <div class="row">
          <div class="col-md-3">
            <h3 class="h4 g-font-weight-300">TopBar</h3>
            <!-- <p>In hac habitasse platea dictumst urabitur hendrerit.</p> -->
          </div>

          <div class="col-md-9">
            <div class="row">
              <!-- TopBar - 1 -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">TopBar - 1</h3>

                <a class="btn u-btn-primary" href="classic-header--topbar-1.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End TopBar - 1 -->

              <!-- TopBar - 2 -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">TopBar - 2</h3>

                <a class="btn u-btn-primary" href="classic-header--topbar-2.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End TopBar - 2 -->

              <!-- TopBar - 3 -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">TopBar - 3</h3>

                <a class="btn u-btn-primary" href="classic-header--topbar-3.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End TopBar - 3 -->

              <!-- TopBar - 4 -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">TopBar - 4</h3>

                <a class="btn u-btn-primary" href="classic-header--topbar-4.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End TopBar - 4 -->

              <!-- TopBar - 5 -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">TopBar - 5</h3>

                <a class="btn u-btn-primary" href="classic-header--topbar-5.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End TopBar - 5 -->

              <!-- TopBar - 6 -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">TopBar - 6</h3>

                <a class="btn u-btn-primary" href="classic-header--topbar-6.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End TopBar - 6 -->

              <!-- TopBar - 7 -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">TopBar - 7</h3>

                <a class="btn u-btn-primary" href="classic-header--topbar-7.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End TopBar - 7 -->

              <!-- TopBar - 8 -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">TopBar - 8</h3>

                <a class="btn u-btn-primary" href="classic-header--topbar-8.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End TopBar - 8 -->
            </div>
          </div>
        </div>
        <!-- End TopBar -->

        <hr class="g-brd-gray-light-v4 g-pt-10 g-mb-60">

        <!-- Positions -->
        <div class="row">
          <div class="col-md-3">
            <h3 class="h4 g-font-weight-300">Positions</h3>
            <!-- <p>At the moment, there are 6 different types of positions for the Classic Header.</p> -->
          </div>

          <div class="col-md-9">
            <div class="row">
              <!-- Static -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Static</h3>

                <a class="btn u-btn-primary" href="classic-header--position-static.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Static -->

              <!-- Absolute. Top. -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Absolute. Top.</h3>

                <a class="btn u-btn-primary" href="classic-header--position-absolute-top.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Absolute. Top. -->

              <!-- Absolute. Bottom. -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Absolute. Bottom.</h3>

                <a class="btn u-btn-primary" href="classic-header--position-absolute-bottom.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Absolute. Bottom. -->

              <!-- Absolute. 2-nd screen. -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Absolute. 2-nd Screen.</h3>

                <a class="btn u-btn-primary" href="classic-header--position-absolute-2screen.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Absolute. 2-nd screen. -->

              <!-- Sticky. Top. -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Sticky. Top.</h3>

                <a class="btn u-btn-primary" href="classic-header--position-sticky-top.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Sticky. Top. -->

              <!-- Sticky. Bottom. -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Sticky. Bottom.</h3>

                <a class="btn u-btn-primary" href="classic-header--position-sticky-bottom.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Sticky. Bottom. -->
            </div>
          </div>
        </div>
        <!-- End Positions -->

        <hr class="g-brd-gray-light-v4 g-pt-10 g-mb-60">

        <!-- On Scroll Behaviors -->
        <div class="row">
          <div class="col-md-3">
            <h3 class="h4 g-font-weight-300">On Scroll Behaviors</h3>
            <!-- <p>Unify has 5 types of "On Scroll Behaviors". You can combine different types of the behaviors.</p> -->
            <!--<ul class="list-unstyled">
              <li class="g-mb-10">– show hidden header in N px (actual for static header or header with absolute position on the top);</li>
              <li class="g-mb-10">– change appearance: you can change background color, padding etc;</li>
              <li class="g-mb-10">– change logo;</li>
              <li class="g-mb-10">– hide top bar.</li>
            </ul>-->
          </div>

          <div class="col-md-9">
            <div class="row">
              <!-- Show/hide header -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Show/hide header</h3>

                <a class="btn u-btn-primary" href="classic-header--behavior.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Show/hide header -->

              <!-- Change logo -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Change logo</h3>

                <a class="btn u-btn-primary" href="classic-header--behavior.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Change logo -->

              <!-- Change appearance -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Change appearance</h3>

                <a class="btn u-btn-primary" href="classic-header--behavior.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Change appearance -->

              <!-- Toggle Header -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Toggle Header</h3>

                <a class="btn u-btn-primary" href="classic-header--behavior-toggle-header.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Toggle Header -->

              <!-- Hide Top Bar -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Hide Top Bar</h3>

                <a class="btn u-btn-primary" href="classic-header--behavior-top-bar.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Hide Top Bar -->
            </div>
          </div>
        </div>
        <!-- End On Scroll Behaviors -->

        <hr class="g-brd-gray-light-v4 g-pt-10 g-mb-60">

        <!-- Navigation's mobile behavior -->
        <div class="row">
          <div class="col-md-3">
            <h3 class="h4 g-font-weight-300">Navigation's mobile behavior</h3>
            <!-- <p>In hac habitasse platea dictumst urabitur hendrerit.</p> -->
          </div>

          <div class="col-md-9">
            <div class="row">
              <!-- Default -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Default (top)</h3>

                <a class="btn u-btn-primary" href="classic-header--mobile-top.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Default -->

              <!-- Push (sidebar) -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Push (sidebar)</h3>

                <a class="btn u-btn-primary" href="classic-header--mobile-sidebar-push.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Push (sidebar) -->

              <!-- Overlay (sidebar) -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Overlay (sidebar)</h3>

                <a class="btn u-btn-primary" href="classic-header--mobile-sidebar-overlay.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Overlay (sidebar) -->
            </div>
          </div>
        </div>
        <!-- End Navigation's mobile behavior -->

        <hr class="g-brd-gray-light-v4 g-pt-10 g-mb-60">

        <!-- Submenu & Megamenu-->
        <div class="row">
          <div class="col-md-3">
            <h3 class="h4 g-font-weight-300">Submenu &amp;&nbsp;Megamenu</h3>
            <!-- <p>Unify has 3 way to show submenu: bootstrap method, onhover method &amp;&nbsp;onclick method.</p> -->
          </div>

          <div class="col-md-9">
            <div class="row">
              <!-- Bootstrap Method -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Submenu<br> (Bootstrap Method)</h3>

                <a class="btn u-btn-primary" href="classic-header--submenu-bootstrap.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Bootstrap Method -->

              <!-- Onhover Method -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Submenu<br> (Onhover Method)</h3>

                <a class="btn u-btn-primary" href="classic-header--submenu-onhover.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Onhover Method -->

              <!-- Onclick Method -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Submenu<br> (Onclick Method)</h3>

                <a class="btn u-btn-primary" href="classic-header--submenu-onclick.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Onclick Method -->

              <!-- Inline Submenu -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Inline<br> Submenu</h3>

                <a class="btn u-btn-primary" href="classic-header--submenu-inline.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Inline Submenu -->

              <!-- Megamenu (2 column) -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Megamenu<br> (2 column)</h3>

                <a class="btn u-btn-primary" href="classic-header--megamenu-2column.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Megamenu (2 column) -->

              <!-- Megamenu (3 column) -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Megamenu<br> (3 column)</h3>

                <a class="btn u-btn-primary" href="classic-header--megamenu-3column.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Megamenu (3 column) -->

              <!-- Megamenu (4 column) -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Megamenu<br> (4 column)</h3>

                <a class="btn u-btn-primary" href="classic-header--megamenu-4column.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Megamenu (4 column) -->

              <!-- Megamenu (5 column) -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Megamenu<br> (5 column)</h3>

                <a class="btn u-btn-primary" href="classic-header--megamenu-5column.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Megamenu (5 column) -->

              <!-- Megamenu with horizontal tab -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Megamenu<br> with horizontal tab</h3>

                <a class="btn u-btn-primary" href="classic-header--megamenu-tabs-horizontal.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Megamenu with horizontal tab -->

              <!-- Megamenu with vertical tab -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Megamenu<br> with vertical tab</h3>

                <a class="btn u-btn-primary" href="classic-header--megamenu-tabs-vertical.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Megamenu with vertical tab -->

              <!-- Megamenu with Contact Form -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Megamenu<br> with Contact Form</h3>

                <a class="btn u-btn-primary" href="classic-header--megamenu-contact-form.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Megamenu with Contact Form -->

              <!-- Megamenu with Contact Form - 2 -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Megamenu<br> with Contact Form - 2</h3>

                <a class="btn u-btn-primary" href="classic-header--megamenu-contact-form-2.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Megamenu with Contact Form - 2 -->

              <!-- Megamenu with Login Form -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Megamenu<br> with Login Form</h3>

                <a class="btn u-btn-primary" href="classic-header--megamenu-login-form.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Megamenu with Login Form -->

              <!-- Megamenu with Map & Form -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Megamenu<br> with Map &amp; Form</h3>

                <a class="btn u-btn-primary" href="classic-header--megamenu-map-form.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Megamenu with Map & Form -->

              <!-- Megamenu with Map -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Megamenu<br> with Map</h3>

                <a class="btn u-btn-primary" href="classic-header--megamenu-map.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Megamenu with Map -->

              <!-- Megamenu with News Items -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Megamenu<br> with News Items</h3>

                <a class="btn u-btn-primary" href="classic-header--megamenu-news.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Megamenu with News Items -->

              <!-- Megamenu with Products -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Megamenu<br> with Products</h3>

                <a class="btn u-btn-primary" href="classic-header--megamenu-products.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Megamenu with Products -->
            </div>
          </div>
        </div>
        <!-- End Submenu & Megamenu -->

        <hr class="g-brd-gray-light-v4 g-pt-10 g-mb-60">

        <!-- One Page Scrolling-->
        <div class="row">
          <div class="col-md-3">
            <h3 class="h4 g-font-weight-300">One Page Navigation</h3>
            <!-- <p>In hac habitasse platea dictumst urabitur hendrerit.</p> -->
          </div>

          <div class="col-md-9">
            <div class="row">
              <!-- One Page Navigation -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <a class="btn u-btn-primary" href="classic-header--one-page-scrolling.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End One Page Navigation -->
            </div>
          </div>
        </div>
        <!-- End One Page Scrolling -->
      </section>
      <!-- End Classic Header -->

      <hr class="g-brd-gray-light-v4 g-my-60">

      <!-- Sidebar Navigation -->
      <section id="plain-icons">
        <!-- Heading -->
        <header class="g-mb-60">
        <div class="u-heading-v6-2 text-uppercase">
          <h2 class="h4 u-heading-v6__title g-font-weight-300">Sidebar Navigation</h2>
          </div>

          <div class="g-pl-90">
            <p>Unify has 3 basic type of a Sidebar Navigation: Static Sidebar Navigation, Dynamic-Overlay Sidebar Navigation &amp; Dynamic-Push Sidebar Navigation. Each type has 2 type of a position (left or right). By choosing g-classes You can change a Sidebar Navigation Design the way you wish.</p>
          </div>
        </header>
        <!-- End Heading -->

        <!-- Static Sidebar Navigation -->
        <div class="row">
          <div class="col-md-3">
            <h3 class="h4 g-font-weight-300">Static Sidebar Navigation</h3>
            <!-- <p>In hac habitasse platea dictumst urabitur hendrerit.</p> -->
          </div>

          <div class="col-md-9">
            <div class="row">
              <!-- Left Side -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Left Side</h3>

                <a class="btn u-btn-primary" href="sidebar--static-left-light.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Left Side -->

              <!-- Right Side -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Right Side</h3>

                <a class="btn u-btn-primary" href="sidebar--static-right-light.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Right Side -->
            </div>
          </div>
        </div>
        <!-- End Static Sidebar Navigation -->

        <hr class="g-brd-gray-light-v4 g-pt-10 g-mb-60">

        <!-- Overlay Sidebar Navigation -->
        <div class="row">
          <div class="col-md-3">
            <h3 class="h4 g-font-weight-300">Overlay Sidebar Navigation</h3>
            <!-- <p>In hac habitasse platea dictumst urabitur hendrerit.</p> -->
          </div>

          <div class="col-md-9">
            <div class="row">
              <!-- Left Side -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Left Side</h3>

                <a class="btn u-btn-primary" href="sidebar--overlay-left-light.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Left Side -->

              <!-- Right Side -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Right Side</h3>

                <a class="btn u-btn-primary" href="sidebar--overlay-right-light.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Right Side -->
            </div>
          </div>
        </div>
        <!-- End Overlay Sidebar Navigation -->

        <hr class="g-brd-gray-light-v4 g-pt-10 g-mb-60">

        <!-- Push Sidebar Navigation -->
        <div class="row">
          <div class="col-md-3">
            <h3 class="h4 g-font-weight-300">Push Sidebar Navigation</h3>
            <!-- <p>In hac habitasse platea dictumst urabitur hendrerit.</p> -->
          </div>

          <div class="col-md-9">
            <div class="row">
              <!-- Left Side -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Left Side</h3>

                <a class="btn u-btn-primary" href="sidebar--push-left-light.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Left Side -->

              <!-- Right Side -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Right Side</h3>

                <a class="btn u-btn-primary" href="sidebar--push-right-light.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Right Side -->
            </div>
          </div>
        </div>
        <!-- End Push Sidebar Navigation -->
      </section>
      <!-- End Sidebar Navigation -->

      <hr class="g-brd-gray-light-v4 g-my-60">

      <!-- Fullscreen Navigation & Smart Navigation -->
      <section id="plain-icons">
        <!-- Heading -->
        <header class="g-mb-60">
        <div class="u-heading-v6-2 text-uppercase">
          <h2 class="h4 u-heading-v6__title g-font-weight-300">Fullscreen Navigation &amp; Smart Navigation</h2>
          </div>

          <div class="g-pl-90">
            <p>Unify has number of Fullscreen and Smart Navigation. We tried to make everything as simple as possible. Just choose any examples you like and implement it. If there any questions please feel free to contact and our team will answer as soon as possible.</p>
          </div>
        </header>
        <!-- End Heading -->

        <!-- Fullscreen Navigation -->
        <div class="row">
          <div class="col-md-3">
            <h3 class="h4 g-font-weight-300">Fullscreen Navigation</h3>
            <!-- <p>In hac habitasse platea dictumst urabitur hendrerit.</p> -->
          </div>

          <div class="col-md-9">
            <div class="row">
              <!-- Top-Right -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Top-Right</h3>

                <a class="btn u-btn-primary" href="fullscreen--top-right.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Top-Right -->

              <!-- Bottom-Right -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Bottom-Right</h3>

                <a class="btn u-btn-primary" href="fullscreen--bottom-right.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Bottom-Right -->

              <!-- Bottom-Left -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Bottom-Left</h3>

                <a class="btn u-btn-primary" href="fullscreen--bottom-left.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Bottom-Left -->
            </div>
          </div>
        </div>
        <!-- End Fullscreen Navigation -->

        <hr class="g-brd-gray-light-v4 g-my-60">

        <!-- Smart Navigation -->
        <div class="row">
          <div class="col-md-3">
            <h3 class="h4 g-font-weight-300">Smart Navigation</h3>
            <!-- <p>In hac habitasse platea dictumst urabitur hendrerit.</p> -->
          </div>

          <div class="col-md-9">
            <div class="row">
              <!-- Top-Right -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Top-Right</h3>

                <a class="btn u-btn-primary" href="smart--top-right.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Top-Right -->

              <!-- Bottom-Right -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Bottom-Right</h3>

                <a class="btn u-btn-primary" href="smart--bottom-right.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Bottom-Right -->

              <!-- Bottom-Left -->
              <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Bottom-Left</h3>

                <a class="btn u-btn-primary" href="smart--bottom-left.html" target="_blank">View Header</a>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Bottom-Left -->
            </div>
          </div>
        </div>
        <!-- End Smart Navigation -->
      </section>
      <!-- End Fullscreen Navigation & Smart Navigation -->

      <hr class="g-brd-gray-light-v4 g-pt-10 g-mb-60">

      <!-- Tasty CSS-animated hamburgers -->
      <section id="plain-icons">
        <!-- Heading -->
        <header class="g-mb-60">
        <div class="u-heading-v6-2 text-uppercase">
          <h2 class="h4 u-heading-v6__title g-font-weight-300">Tasty CSS-animated hamburgers</h2>
          </div>

          <div class="g-pl-90">
            <p>We also thought that the way user clicks the and hamburger icon behaves also very important and added 9 different type of hamburger animations. Choose any type you like.</p>
          </div>
        </header>
        <!-- End Heading -->

        <!-- Types -->
        <div class="row">
          <div class="col-md-3">
            <h3 class="h4 g-font-weight-300">Types</h3>
            <!-- <p>In hac habitasse platea dictumst urabitur hendrerit.</p> -->
          </div>

          <div class="col-md-9">
            <div class="row">
              <!-- Slider -->
              <div class="col-sm-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Slider</h3>
                <div class="js-hamburger hamburger hamburger--slider g-pa-0">
                  <div class="hamburger-box g-opacity-0_3">
                    <div class="hamburger-inner"></div>
                  </div>
                </div>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Slider -->

              <!-- Squeeze -->
              <div class="col-sm-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Squeeze</h3>
                <div class="js-hamburger hamburger hamburger--squeeze g-pa-0">
                  <div class="hamburger-box g-opacity-0_3">
                    <div class="hamburger-inner"></div>
                  </div>
                </div>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Squeeze -->

              <!-- Arrow -->
              <div class="col-sm-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Arrow</h3>
                <div class="js-hamburger hamburger hamburger--arrow g-pa-0">
                  <div class="hamburger-box g-opacity-0_3">
                    <div class="hamburger-inner"></div>
                  </div>
                </div>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Arrow -->

              <!-- Arrow Alt -->
              <div class="col-sm-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Arrow Alt</h3>
                <div class="js-hamburger hamburger hamburger--arrowalt g-pa-0">
                  <div class="hamburger-box g-opacity-0_3">
                    <div class="hamburger-inner"></div>
                  </div>
                </div>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Arrow Alt -->

              <!-- Spin -->
              <div class="col-sm-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Spin</h3>
                <div class="js-hamburger hamburger hamburger--spin g-pa-0">
                  <div class="hamburger-box g-opacity-0_3">
                    <div class="hamburger-inner"></div>
                  </div>
                </div>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Spin -->

              <!-- Elastic -->
              <div class="col-sm-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Elastic</h3>
                <div class="js-hamburger hamburger hamburger--elastic g-pa-0">
                  <div class="hamburger-box g-opacity-0_3">
                    <div class="hamburger-inner"></div>
                  </div>
                </div>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Elastic -->

              <!-- Collapse -->
              <div class="col-sm-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Collapse</h3>
                <div class="js-hamburger hamburger hamburger--collapse g-pa-0">
                  <div class="hamburger-box g-opacity-0_3">
                    <div class="hamburger-inner"></div>
                  </div>
                </div>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Collapse -->

              <!-- Vortex -->
              <div class="col-sm-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Vortex</h3>
                <div class="js-hamburger hamburger hamburger--vortex g-pa-0">
                  <div class="hamburger-box g-opacity-0_3">
                    <div class="hamburger-inner"></div>
                  </div>
                </div>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Vortex -->

              <!-- Boring -->
              <div class="col-sm-3 g-mb-50">
                <h3 class="h5 g-font-weight-300 g-mb-15">Boring</h3>
                <div class="js-hamburger hamburger hamburger--boring g-pa-0">
                  <div class="hamburger-box g-opacity-0_3">
                    <div class="hamburger-inner"></div>
                  </div>
                </div>

                <!-- Show Code
                <div class="g-font-size-12 g-font-code g-pt-20">
                  <a class="js-show-code g-color-main g-text-underline--none--hover" href="#">
                    <i class="fa fa-code"></i> Show code
                  </a>
                </div>
                End Show Code -->
              </div>
              <!-- End Boring -->
            </div>
          </div>
        </div>
        <!-- End Types -->
      </section>
      <!-- End Tasty CSS-animated hamburgers -->
    </div>
  </section>

  {% include "html/assets/include/nunjucks/partials/blocks/cta/cta-main.njk" %}

  {% include "html/assets/include/nunjucks/partials/blocks/footers/footer-main.njk" %}
  {% include "html/assets/include/nunjucks/partials/blocks/footers/copyright-footer-main.njk" %}
  {% include "html/assets/include/nunjucks/partials/blocks/go-to-top/go-to-top-1.njk" %}
</main>

<div id="modal" class="text-left modal-demo g-max-width-600 g-bg-white g-color-black g-pa-20" style="display: none;"></div>

{% include "html/assets/include/nunjucks/partials/core-js.njk" %}

<!-- JS Implementing Plugins -->
{% include "html/assets/include/nunjucks/partials/js/js-dzsparallaxer.njk" %}
<script src="{{ root }}assets/vendor/hs-megamenu/src/hs.megamenu.js"></script>
<script src="{{ root }}assets/vendor/cubeportfolio-full/cubeportfolio/js/jquery.cubeportfolio.min.js"></script>
<script src="{{ root }}assets/vendor/malihu-scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>

{% include "html/assets/include/nunjucks/partials/js/js-jquery-ui-core.njk" %}

<!-- jQuery UI Helpers -->
<script src="{{ root }}assets/vendor/jquery-ui/ui/widgets/menu.js"></script>
<script src="{{ root }}assets/vendor/jquery-ui/ui/widgets/mouse.js"></script>
<!-- End jQuery UI Helpers -->

<!-- jQuery UI Widgets -->
<script src="{{ root }}assets/vendor/jquery-ui/ui/widgets/autocomplete.js"></script>
<!-- End jQuery UI Widgets -->

<!-- JS Unify -->
<script src="{{ root }}assets/js/hs.core.js"></script>
<script src="{{ root }}assets/js/components/hs.header.js"></script>
<script src="{{ root }}assets/js/helpers/hs.hamburgers.js"></script>
<script src="{{ root }}assets/js/components/hs.header-side.js"></script>
<script src="{{ root }}assets/js/components/hs.tabs.js"></script>
<script src="{{ root }}assets/style-switcher/vendor/cookiejs/jquery.cookie.js"></script>
<script src="{{ root }}assets/js/helpers/hs.shortcode-filter.js"></script>
<script src="{{ root }}assets/js/components/hs.cubeportfolio.js"></script>
<script src="{{ root }}assets/js/components/hs.autocomplete-local-search.js"></script>
<script src="{{ root }}assets/js/components/hs.go-to.js"></script>
<script src="{{ root }}assets/js/components/hs.scrollbar.js"></script>

<!-- JS Custom -->
<script src="{{ root }}assets/js/custom.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of tabs
    $.HSCore.components.HSTabs.init('[data-tabs-mobile-type]');
  });

  $(window).on('load', function () {
    // initialization of header
    $.HSCore.components.HSHeader.init($('#js-header'));
    $.HSCore.helpers.HSHamburgers.init('.hamburger');
    $.HSCore.components.HSHeaderSide.init($('#sideNav'));

    // initialization of autocomplet
    $.HSCore.components.HSLocalSearchAutocomplete.init('#u-sidebar-navigation__search-autocomplete');

    // initialization of go to
    $.HSCore.components.HSGoTo.init('.js-go-to');

    // initialization of HSMegaMenu component
    $('.js-mega-menu').HSMegaMenu({
      event: 'hover',
      pageContainer: $('.container'),
      breakpoint: 991
    });

    // initialization of cubeportfolio
    $.HSCore.components.HSCubeportfolio.init('.cbp');
  });

  $(window).on('resize', function () {
    setTimeout(function() {
      $.HSCore.components.HSTabs.init('[data-tabs-mobile-type]');
    }, 200);
  });
</script>
</body>
</html>
