{# Settings #}
{% set root = "../../" %}
{% set mainNavActive_1 = "shortcodes" %}
{% set sidebarNavActive_1 = "shortcode-blocks-hero-blocks" %}
{% set title = "Hero Blocks" %}

{% 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/animate.css">
<link rel="stylesheet" href="{{ root }}assets/vendor/jquery-ui/themes/base/jquery-ui.min.css">
<link rel="stylesheet" href="{{ root }}assets/vendor/hs-megamenu/src/hs.megamenu.css">
<link rel="stylesheet" href="{{ root }}assets/vendor/hamburgers/hamburgers.min.css">
<link rel="stylesheet" href="{{ root }}assets/vendor/slick-carousel/slick/slick.css">
<link rel="stylesheet" href="{{ root }}assets/vendor/hs-bg-video/hs-bg-video.css">

{% include "html/assets/include/nunjucks/partials/css/css-showcode.njk" %}

{% 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>
      <!-- Hero blocks -->
      <section class="g-py-70">
        <!-- Hero blocks #01 -->
        <section class="g-py-30">
          <div class="text-center g-mb-50">
            <h2 class="h4">Hero blocks
              <span class="g-color-primary g-ml-5">#01</span>
            </h2>
            <p>BG color, BG gradient</p>
          </div>

          <!-- Nav tabs -->
          <ul class="nav justify-content-center u-nav-v2-1 u-nav-rounded-3 g-mb-50" role="tablist"
              data-target="hero-01"
              data-tabs-mobile-type="slide-up-down"
              data-btn-classes="btn btn-md btn-block u-btn-outline-primary">
            <li class="nav-item">
              <a class="nav-link active" data-toggle="tab" href="#hero-01-1" role="tab">Example 1</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-toggle="tab" href="#hero-01-2" role="tab">Example 2</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-toggle="tab" href="#hero-01-3" role="tab">Example 3</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-toggle="tab" href="#hero-01-4" role="tab">Example 4</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-toggle="tab" href="#hero-01-5" role="tab">Example 5</a>
            </li>
          </ul>
          <!-- End Nav tabs -->

          <!-- Tab panes -->
          <div id="hero-01" class="tab-content">
            <div id="hero-01-1" class="tab-pane fade show active" role="tabpanel">
              <div id="shortcode1-1">
                <div class="shortcode-html">
                  <section class="g-flex-centered g-height-450 g-bg-gray-light-v5 g-py-30">
                    <div class="container">
                      <div class="row">
                        <div class="col-md-6 align-self-center g-py-20">
                          <h2 class="h4 text-uppercase g-letter-spacing-1 g-mb-20">Content block</h2>
                          <p class="lead mb-0 g-line-height-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit rhoncus tempus. Donec id orci malesuada, finibus odio quis, tincidunt libero. Fusce in venenatis ligula. Etiam eget lacus id erat scelerisque tempor.</p>
                        </div>

                        <div class="col-md-6 align-self-center g-py-20">
                          <img class="w-100" src="{{ root }}assets/img-temp/400x270/img23.jpg" alt="Iamge Description">
                        </div>
                      </div>
                    </div>
                  </section>
                </div>
              </div>

              {% set SCExtendedClasses = "container" %}
              {% set contentTarget = "#shortcode1-1" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>

            <div id="hero-01-2" class="tab-pane fade" role="tabpanel">
              <div id="shortcode1-2">
                <div class="shortcode-html">
                  <section class="g-flex-centered g-height-450 g-bg-primary g-color-white-opacity-0_9 g-py-30">
                    <div class="container">
                      <div class="row">
                        <div class="col-md-6 align-self-center g-py-20">
                          <h2 class="h4 text-uppercase g-letter-spacing-1 g-color-white g-mb-20">Content block</h2>
                          <p class="lead mb-0 g-line-height-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit rhoncus tempus. Donec id orci malesuada, finibus odio quis, tincidunt libero. Fusce in venenatis ligula. Etiam eget lacus id erat scelerisque tempor.</p>
                        </div>

                        <div class="col-md-6 align-self-center g-py-20">
                          <img class="w-100" src="{{ root }}assets/img-temp/400x270/img2.jpg" alt="Iamge Description">
                        </div>
                      </div>
                    </div>
                  </section>
                </div>
              </div>

              {% set SCExtendedClasses = "container" %}
              {% set contentTarget = "#shortcode1-2" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>

            <div id="hero-01-3" class="tab-pane fade" role="tabpanel">
              <div id="shortcode1-3">
                <div class="shortcode-html">
                  <section class="g-flex-centered g-height-450 g-bg-darkgray-radialgradient-circle g-color-white-opacity-0_7 g-py-30">
                    <div class="container">
                      <div class="row">
                        <div class="col-md-6 align-self-center g-py-20">
                          <h2 class="h4 text-uppercase g-letter-spacing-1 g-color-white g-mb-20">Content block</h2>
                          <p class="lead mb-0 g-line-height-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit rhoncus tempus. Donec id orci malesuada, finibus odio quis, tincidunt libero. Fusce in venenatis ligula. Etiam eget lacus id erat scelerisque tempor.</p>
                        </div>

                        <div class="col-md-6 align-self-center g-py-20">
                          <img class="w-100" src="{{ root }}assets/img-temp/400x270/img3.jpg" alt="Iamge Description">
                        </div>
                      </div>
                    </div>
                  </section>
                </div>
              </div>

              {% set SCExtendedClasses = "container" %}
              {% set contentTarget = "#shortcode1-3" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>

            <div id="hero-01-4" class="tab-pane fade" role="tabpanel">
              <div id="shortcode1-4">
                <div class="shortcode-html">
                  <section class="g-flex-centered g-height-450 g-bg-blue-radialgradient-circle g-color-white-opacity-0_7 g-py-30">
                    <div class="container">
                      <div class="row">
                        <div class="col-md-6 align-self-center g-py-20">
                          <h2 class="h4 text-uppercase g-letter-spacing-1 g-color-white g-mb-20">Content block</h2>
                          <p class="lead mb-0 g-line-height-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit rhoncus tempus. Donec id orci malesuada, finibus odio quis, tincidunt libero. Fusce in venenatis ligula. Etiam eget lacus id erat scelerisque tempor.</p>
                        </div>

                        <div class="col-md-6 align-self-center g-py-20">
                          <img class="w-100" src="{{ root }}assets/img-temp/400x270/img4.jpg" alt="Iamge Description">
                        </div>
                      </div>
                    </div>
                  </section>
                </div>
              </div>

              {% set SCExtendedClasses = "container" %}
              {% set contentTarget = "#shortcode1-4" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>

            <div id="hero-01-5" class="tab-pane fade" role="tabpanel">
              <div id="shortcode1-5">
                <div class="shortcode-html">
                  <section class="g-flex-centered g-height-450 g-bg-pink-lineargradient-v2 g-color-white-opacity-0_9 g-py-30">
                    <div class="container">
                      <div class="row">
                        <div class="col-md-6 align-self-center g-py-20">
                          <h2 class="h4 text-uppercase g-letter-spacing-1 g-color-white g-mb-20">Content block</h2>
                          <p class="lead mb-0 g-line-height-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit rhoncus tempus. Donec id orci malesuada, finibus odio quis, tincidunt libero. Fusce in venenatis ligula. Etiam eget lacus id erat scelerisque tempor.</p>
                        </div>

                        <div class="col-md-6 align-self-center g-py-20">
                          <img class="w-100" src="{{ root }}assets/img-temp/400x270/img5.jpg" alt="Iamge Description">
                        </div>
                      </div>
                    </div>
                  </section>
                </div>
              </div>

              {% set SCExtendedClasses = "container" %}
              {% set contentTarget = "#shortcode1-5" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Tab panes -->
        </section>
        <!-- End Hero blocks #01 -->

        <!-- Hero blocks #02 -->
        <section class="g-py-30">
          <div class="text-center g-mb-50">
            <h2 class="h4">Hero blocks
              <span class="g-color-primary g-ml-5">#02</span>
            </h2>
            <p>BG image, BG pattern</p>
          </div>

          <!-- Nav tabs -->
          <ul class="nav justify-content-center u-nav-v2-1 u-nav-rounded-3 g-mb-50" role="tablist"
              data-target="hero-02"
              data-tabs-mobile-type="slide-up-down"
              data-btn-classes="btn btn-md btn-block u-btn-outline-primary">
            <li class="nav-item">
              <a class="nav-link active" data-toggle="tab" href="#hero-02-1" role="tab">Example 1</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-toggle="tab" href="#hero-02-2" role="tab">Example 2</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-toggle="tab" href="#hero-02-3" role="tab">Example 3</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-toggle="tab" href="#hero-02-4" role="tab">Example 4</a>
            </li>
          </ul>
          <!-- End Nav tabs -->

          <!-- Tab panes -->
          <div id="hero-02" class="tab-content">
            <div id="hero-02-1" class="tab-pane fade show active" role="tabpanel">
              <div id="shortcode2-1">
                <div class="shortcode-html">
                  <section class="g-flex-centered g-height-500 g-bg-img-hero g-py-30" style="background-image: url({{ root }}assets/img-temp/1920x1080/img12.jpg);">
                    <div class="container">
                      <div class="row">
                        <div class="col-md-6 align-self-center g-py-20">
                          <h2 class="h4 text-uppercase g-letter-spacing-1 g-mb-20">Content block</h2>
                          <p class="lead mb-0 g-line-height-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit rhoncus tempus. Donec id orci malesuada, finibus odio quis, tincidunt libero. Fusce in venenatis ligula. Etiam eget lacus id erat scelerisque tempor.</p>
                        </div>

                        <div class="col-md-6 align-self-center g-py-20">
                          <img class="w-100" src="{{ root }}assets/img-temp/400x270/img6.jpg" alt="Iamge Description">
                        </div>
                      </div>
                    </div>
                  </section>
                </div>
              </div>

              {% set SCExtendedClasses = "container" %}
              {% set contentTarget = "#shortcode2-1" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>

            <div id="hero-02-2" class="tab-pane fade" role="tabpanel">
              <div id="shortcode2-2">
                <div class="shortcode-html">
                  <section class="g-flex-centered g-height-500 g-bg-img-hero g-color-white g-py-30" style="background-image: url({{ root }}assets/img-temp/1920x1080/img5.jpg);">
                    <div class="container">
                      <div class="row">
                        <div class="col-md-6 align-self-center g-py-20">
                          <h2 class="h4 text-uppercase g-letter-spacing-1 g-mb-20">Content block</h2>
                          <p class="lead mb-0 g-line-height-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit rhoncus tempus. Donec id orci malesuada, finibus odio quis, tincidunt libero. Fusce in venenatis ligula. Etiam eget lacus id erat scelerisque tempor.</p>
                        </div>

                        <div class="col-md-6 align-self-center g-py-20">
                          <img class="w-100" src="{{ root }}assets/img-temp/400x270/img7.jpg" alt="Iamge Description">
                        </div>
                      </div>
                    </div>
                  </section>
                </div>
              </div>

              {% set SCExtendedClasses = "container" %}
              {% set contentTarget = "#shortcode2-2" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>

            <div id="hero-02-3" class="tab-pane fade" role="tabpanel">
              <div id="shortcode2-3">
                <div class="shortcode-html">
                  <section class="g-flex-centered g-height-500 g-py-30" style="background-image: url({{ root }}assets/img/bg/pattern/bricks-white.png);">
                    <div class="container">
                      <div class="row">
                        <div class="col-md-6 align-self-center g-py-20">
                          <h2 class="h4 text-uppercase g-letter-spacing-1 g-mb-20">Content block</h2>
                          <p class="lead mb-0 g-line-height-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit rhoncus tempus. Donec id orci malesuada, finibus odio quis, tincidunt libero. Fusce in venenatis ligula. Etiam eget lacus id erat scelerisque tempor.</p>
                        </div>

                        <div class="col-md-6 align-self-center g-py-20">
                          <img class="w-100" src="{{ root }}assets/img-temp/400x270/img8.jpg" alt="Iamge Description">
                        </div>
                      </div>
                    </div>
                  </section>
                </div>
              </div>

              {% set SCExtendedClasses = "container" %}
              {% set contentTarget = "#shortcode2-3" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>

            <div id="hero-02-4" class="tab-pane fade" role="tabpanel">
              <div id="shortcode2-4">
                <div class="shortcode-html">
                  <section class="g-flex-centered g-height-500 g-color-white g-py-30" style="background-image: url({{ root }}assets/img/bg/pattern/math-dark.png);">
                    <div class="container">
                      <div class="row">
                        <div class="col-md-6 align-self-center g-py-20">
                          <h2 class="h4 text-uppercase g-letter-spacing-1 g-mb-20">Content block</h2>
                          <p class="lead mb-0 g-line-height-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit rhoncus tempus. Donec id orci malesuada, finibus odio quis, tincidunt libero. Fusce in venenatis ligula. Etiam eget lacus id erat scelerisque tempor.</p>
                        </div>

                        <div class="col-md-6 align-self-center g-py-20">
                          <img class="w-100" src="{{ root }}assets/img-temp/400x270/img9.jpg" alt="Iamge Description">
                        </div>
                      </div>
                    </div>
                  </section>
                </div>
              </div>

              {% set SCExtendedClasses = "container" %}
              {% set contentTarget = "#shortcode2-4" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Tab panes -->
        </section>
        <!-- End Hero blocks #02 -->

        <!-- Hero blocks #03 -->
        <section class="g-py-30">
          <div class="text-center g-mb-50">
            <h2 class="h4">Hero blocks
              <span class="g-color-primary g-ml-5">#03</span>
            </h2>
            <p>Colored Overlay</p>
          </div>

          <!-- Nav tabs -->
          <ul class="nav justify-content-center u-nav-v2-1 u-nav-rounded-3 g-mb-50" role="tablist"
              data-target="hero-03"
              data-tabs-mobile-type="slide-up-down"
              data-btn-classes="btn btn-md btn-block u-btn-outline-primary">
            <li class="nav-item">
              <a class="nav-link active" data-toggle="tab" href="#hero-03-1" role="tab">Example 1</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-toggle="tab" href="#hero-03-2" role="tab">Example 2</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-toggle="tab" href="#hero-03-3" role="tab">Example 3</a>
            </li>
          </ul>
          <!-- End Nav tabs -->

          <!-- Tab panes -->
          <div id="hero-03" class="tab-content">
            <div id="hero-03-1" class="tab-pane fade show active" role="tabpanel">
              <div id="shortcode3-1">
                <div class="shortcode-html">
                  <section class="g-flex-centered g-height-500 g-bg-img-hero u-bg-overlay g-bg-black-opacity-0_7--after g-color-white-opacity-0_7 g-py-20" style="background-image: url({{ root }}assets/img-temp/1920x1080/img47.jpg);">
                    <div class="container u-bg-overlay__inner">
                      <div class="row">
                        <div class="col-md-6 align-self-center g-py-20">
                          <h2 class="h4 text-uppercase g-letter-spacing-1 g-color-white g-mb-20">Content block</h2>
                          <p class="lead mb-0 g-line-height-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit rhoncus tempus. Donec id orci malesuada, finibus odio quis, tincidunt libero. Fusce in venenatis ligula. Etiam eget lacus id erat scelerisque tempor.</p>
                        </div>

                        <div class="col-md-6 align-self-center g-py-20">
                          <img class="w-100" src="{{ root }}assets/img-temp/400x270/img10.jpg" alt="Iamge Description">
                        </div>
                      </div>
                    </div>
                  </section>
                </div>
              </div>

              {% set SCExtendedClasses = "container" %}
              {% set contentTarget = "#shortcode3-1" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>

            <div id="hero-03-2" class="tab-pane fade" role="tabpanel">
              <div id="shortcode3-2">
                <div class="shortcode-html">
                  <section class="g-flex-centered g-height-500 g-bg-img-hero u-bg-overlay g-bg-white-opacity-0_7--after g-py-20" style="background-image: url({{ root }}assets/img-temp/1920x1080/img1.jpg);">
                    <div class="container u-bg-overlay__inner">
                      <div class="row">
                        <div class="col-md-6 align-self-center g-py-20">
                          <h2 class="h4 text-uppercase g-letter-spacing-1 g-mb-20">Content block</h2>
                          <p class="lead mb-0 g-line-height-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit rhoncus tempus. Donec id orci malesuada, finibus odio quis, tincidunt libero. Fusce in venenatis ligula. Etiam eget lacus id erat scelerisque tempor.</p>
                        </div>

                        <div class="col-md-6 align-self-center g-py-20">
                          <img class="w-100" src="{{ root }}assets/img-temp/400x270/img11.jpg" alt="Iamge Description">
                        </div>
                      </div>
                    </div>
                  </section>
                </div>
              </div>

              {% set SCExtendedClasses = "container" %}
              {% set contentTarget = "#shortcode3-2" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>

            <div id="hero-03-3" class="tab-pane fade" role="tabpanel">
              <div id="shortcode3-3">
                <div class="shortcode-html">
                  <section class="g-flex-centered g-height-500 g-bg-img-hero u-bg-overlay g-bg-primary-opacity-0_6--after g-color-white g-py-20" style="background-image: url({{ root }}assets/img-temp/1920x1080/img1.jpg);">
                    <div class="container u-bg-overlay__inner">
                      <div class="row">
                        <div class="col-md-6 align-self-center g-py-20">
                          <h2 class="h4 text-uppercase g-letter-spacing-1 g-mb-20">Content block</h2>
                          <p class="lead mb-0 g-line-height-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit rhoncus tempus. Donec id orci malesuada, finibus odio quis, tincidunt libero. Fusce in venenatis ligula. Etiam eget lacus id erat scelerisque tempor.</p>
                        </div>

                        <div class="col-md-6 align-self-center g-py-20">
                          <img class="w-100" src="{{ root }}assets/img-temp/400x270/img12.jpg" alt="Iamge Description">
                        </div>
                      </div>
                    </div>
                  </section>
                </div>
              </div>

              {% set SCExtendedClasses = "container" %}
              {% set contentTarget = "#shortcode3-3" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Tab panes -->
        </section>
        <!-- End Hero blocks #03 -->

        <!-- Hero blocks #04 -->
        <section class="g-py-30">
          <div class="text-center g-mb-50">
            <h2 class="h4">Hero blocks
              <span class="g-color-primary g-ml-5">#04</span>
            </h2>
            <p>Patterned Overlay</p>
          </div>

          <!-- Nav tabs -->
          <ul class="nav justify-content-center u-nav-v2-1 u-nav-rounded-3 g-mb-50" role="tablist"
              data-target="hero-04"
              data-tabs-mobile-type="slide-up-down"
              data-btn-classes="btn btn-md btn-block u-btn-outline-primary">
            <li class="nav-item">
              <a class="nav-link active" data-toggle="tab" href="#hero-04-1" role="tab">Example 1</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-toggle="tab" href="#hero-04-2" role="tab">Example 2</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-toggle="tab" href="#hero-04-3" role="tab">Example 3</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-toggle="tab" href="#hero-04-4" role="tab">Example 4</a>
            </li>
          </ul>
          <!-- End Nav tabs -->

          <!-- Tab panes -->
          <div id="hero-04" class="tab-content">
            <div id="hero-04-1" class="tab-pane fade show active" role="tabpanel">
              <div id="shortcode4-1">
                <div class="shortcode-html">
                  <section class="g-flex-centered g-height-500 g-bg-img-hero u-bg-overlay g-bg-grid-v1--before g-color-white g-py-20" style="background-image: url({{ root }}assets/img-temp/1920x1080/img45.jpg);">
                    <div class="container u-bg-overlay__inner">
                      <div class="row">
                        <div class="col-md-6 align-self-center g-py-20">
                          <h2 class="h4 text-uppercase g-letter-spacing-1 g-mb-20">Content block</h2>
                          <p class="lead mb-0 g-line-height-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit rhoncus tempus. Donec id orci malesuada, finibus odio quis, tincidunt libero. Fusce in venenatis ligula. Etiam eget lacus id erat scelerisque tempor.</p>
                        </div>

                        <div class="col-md-6 align-self-center g-py-20">
                          <img class="w-100" src="{{ root }}assets/img-temp/400x270/img13.jpg" alt="Iamge Description">
                        </div>
                      </div>
                    </div>
                  </section>
                </div>
              </div>

              {% set SCExtendedClasses = "container" %}
              {% set contentTarget = "#shortcode4-1" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>

            <div id="hero-04-2" class="tab-pane fade" role="tabpanel">
              <div id="shortcode4-2">
                <div class="shortcode-html">
                  <section class="g-flex-centered g-height-500 g-bg-img-hero u-bg-overlay g-bg-grid-v2--before g-color-white g-py-20" style="background-image: url({{ root }}assets/img-temp/1920x1080/img6.jpg);">
                    <div class="container u-bg-overlay__inner">
                      <div class="row">
                        <div class="col-md-6 align-self-center g-py-20">
                          <h2 class="h4 text-uppercase g-letter-spacing-1 g-mb-20">Content block</h2>
                          <p class="lead mb-0 g-line-height-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit rhoncus tempus. Donec id orci malesuada, finibus odio quis, tincidunt libero. Fusce in venenatis ligula. Etiam eget lacus id erat scelerisque tempor.</p>
                        </div>

                        <div class="col-md-6 align-self-center g-py-20">
                          <img class="w-100" src="{{ root }}assets/img-temp/400x270/img14.jpg" alt="Iamge Description">
                        </div>
                      </div>
                    </div>
                  </section>
                </div>
              </div>

              {% set SCExtendedClasses = "container" %}
              {% set contentTarget = "#shortcode4-2" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>

            <div id="hero-04-3" class="tab-pane fade" role="tabpanel">
              <div id="shortcode4-3">
                <div class="shortcode-html">
                  <section class="g-flex-centered g-height-500 g-bg-img-hero u-bg-overlay g-bg-grid-v5--before g-color-white g-py-20" style="background-image: url({{ root }}assets/img-temp/1920x1080/img7.jpg);">
                    <div class="container u-bg-overlay__inner">
                      <div class="row">
                        <div class="col-md-6 align-self-center g-py-20">
                          <h2 class="h4 text-uppercase g-letter-spacing-1 g-mb-20">Content block</h2>
                          <p class="lead mb-0 g-line-height-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit rhoncus tempus. Donec id orci malesuada, finibus odio quis, tincidunt libero. Fusce in venenatis ligula. Etiam eget lacus id erat scelerisque tempor.</p>
                        </div>

                        <div class="col-md-6 align-self-center g-py-20">
                          <img class="w-100" src="{{ root }}assets/img-temp/400x270/img15.jpg" alt="Iamge Description">
                        </div>
                      </div>
                    </div>
                  </section>
                </div>
              </div>

              {% set SCExtendedClasses = "container" %}
              {% set contentTarget = "#shortcode4-3" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>

            <div id="hero-04-4" class="tab-pane fade" role="tabpanel">
              <div id="shortcode4-4">
                <div class="shortcode-html">
                  <section class="g-flex-centered g-height-500 g-bg-img-hero u-bg-overlay g-bg-grid-v7--before g-color-white g-py-20" style="background-image: url({{ root }}assets/img-temp/1920x1080/img1.jpg);">
                    <div class="container u-bg-overlay__inner">
                      <div class="row">
                        <div class="col-md-6 align-self-center g-py-20">
                          <h2 class="h4 text-uppercase g-letter-spacing-1 g-mb-20">Content block</h2>
                          <p class="lead mb-0 g-line-height-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit rhoncus tempus. Donec id orci malesuada, finibus odio quis, tincidunt libero. Fusce in venenatis ligula. Etiam eget lacus id erat scelerisque tempor.</p>
                        </div>

                        <div class="col-md-6 align-self-center g-py-20">
                          <img class="w-100" src="{{ root }}assets/img-temp/400x270/img16.jpg" alt="Iamge Description">
                        </div>
                      </div>
                    </div>
                  </section>
                </div>
              </div>

              {% set SCExtendedClasses = "container" %}
              {% set contentTarget = "#shortcode4-4" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Tab panes -->
        </section>
        <!-- End Hero blocks #04 -->

        <!-- Hero blocks #05 -->
        <section class="g-py-30">
          <div class="text-center g-mb-50">
            <h2 class="h4">Hero blocks
              <span class="g-color-primary g-ml-5">#05</span>
            </h2>
            <p>Patterned &amp; Colored/gradiented Overlay</p>
          </div>

          <!-- Nav tabs -->
          <ul class="nav justify-content-center u-nav-v2-1 u-nav-rounded-3 g-mb-50" role="tablist"
              data-target="hero-05"
              data-tabs-mobile-type="slide-up-down"
              data-btn-classes="btn btn-md btn-block u-btn-outline-primary">
            <li class="nav-item">
              <a class="nav-link active" data-toggle="tab" href="#hero-05-1" role="tab">Example 1</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-toggle="tab" href="#hero-05-2" role="tab">Example 2</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-toggle="tab" href="#hero-05-3" role="tab">Example 3</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-toggle="tab" href="#hero-05-4" role="tab">Example 4</a>
            </li>
          </ul>
          <!-- End Nav tabs -->

          <!-- Tab panes -->
          <div id="hero-05" class="tab-content">
            <div id="hero-05-1" class="tab-pane fade show active" role="tabpanel">
              <div id="shortcode5-1">
                <div class="shortcode-html">
                  <section class="g-flex-centered g-height-500 g-bg-img-hero u-bg-overlay g-bg-grid-v1--before g-bg-black-opacity-0_2--after g-color-white g-py-20" style="background-image: url({{ root }}assets/img-temp/1920x1080/img10.jpg);">
                    <div class="container u-bg-overlay__inner">
                      <div class="row">
                        <div class="col-md-6 align-self-center g-py-20">
                          <h2 class="h4 text-uppercase g-letter-spacing-1 g-mb-20">Content block</h2>
                          <p class="lead mb-0 g-line-height-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit rhoncus tempus. Donec id orci malesuada, finibus odio quis, tincidunt libero. Fusce in venenatis ligula. Etiam eget lacus id erat scelerisque tempor.</p>
                        </div>

                        <div class="col-md-6 align-self-center g-py-20">
                          <img class="w-100" src="{{ root }}assets/img-temp/400x270/img17.jpg" alt="Iamge Description">
                        </div>
                      </div>
                    </div>
                  </section>
                </div>
              </div>

              {% set SCExtendedClasses = "container" %}
              {% set contentTarget = "#shortcode5-1" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>

            <div id="hero-05-2" class="tab-pane fade" role="tabpanel">
              <div id="shortcode5-2">
                <div class="shortcode-html">
                  <section class="g-flex-centered g-height-500 g-bg-img-hero u-bg-overlay g-bg-grid-v1--before g-bg-white-opacity-0_3--after g-py-20" style="background-image: url({{ root }}assets/img-temp/1920x1080/img1.jpg);">
                    <div class="container u-bg-overlay__inner">
                      <div class="row">
                        <div class="col-md-6 align-self-center g-py-20">
                          <h2 class="h4 text-uppercase g-letter-spacing-1 g-mb-20">Content block</h2>
                          <p class="lead mb-0 g-line-height-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit rhoncus tempus. Donec id orci malesuada, finibus odio quis, tincidunt libero. Fusce in venenatis ligula. Etiam eget lacus id erat scelerisque tempor.</p>
                        </div>

                        <div class="col-md-6 align-self-center g-py-20">
                          <img class="w-100" src="{{ root }}assets/img-temp/400x270/img18.jpg" alt="Iamge Description">
                        </div>
                      </div>
                    </div>
                  </section>
                </div>
              </div>

              {% set SCExtendedClasses = "container" %}
              {% set contentTarget = "#shortcode5-2" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>

            <div id="hero-05-3" class="tab-pane fade" role="tabpanel">
              <div id="shortcode5-3">
                <div class="shortcode-html">
                  <section class="g-flex-centered g-height-500 g-bg-img-hero u-bg-overlay g-bg-grid-v1--before g-bg-primary-opacity-0_6--after g-color-white g-py-20" style="background-image: url({{ root }}assets/img-temp/1920x1080/img1.jpg);">
                    <div class="container u-bg-overlay__inner">
                      <div class="row">
                        <div class="col-md-6 align-self-center g-py-20">
                          <h2 class="h4 text-uppercase g-letter-spacing-1 g-mb-20">Content block</h2>
                          <p class="lead mb-0 g-line-height-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit rhoncus tempus. Donec id orci malesuada, finibus odio quis, tincidunt libero. Fusce in venenatis ligula. Etiam eget lacus id erat scelerisque tempor.</p>
                        </div>

                        <div class="col-md-6 align-self-center g-py-20">
                          <img class="w-100" src="{{ root }}assets/img-temp/400x270/img19.jpg" alt="Iamge Description">
                        </div>
                      </div>
                    </div>
                  </section>
                </div>
              </div>

              {% set SCExtendedClasses = "container" %}
              {% set contentTarget = "#shortcode5-3" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>

            <div id="hero-05-4" class="tab-pane fade" role="tabpanel">
              <div id="shortcode5-4">
                <div class="shortcode-html">
                  <section class="g-flex-centered g-height-500 g-bg-img-hero u-bg-overlay u-bg-overlay--reverse g-bg-grid-v1--before g-bg-gray-light-gradient-v1--after g-z-index-before-after-2-1 g-py-20" style="background-image: url({{ root }}assets/img-temp/1920x1080/img1.jpg);">
                    <div class="container u-bg-overlay__inner">
                      <div class="row">
                        <div class="col-md-6 align-self-center g-py-20">
                          <h2 class="h4 text-uppercase g-letter-spacing-1 g-mb-20">Content block</h2>
                          <p class="lead mb-0 g-line-height-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit rhoncus tempus. Donec id orci malesuada, finibus odio quis, tincidunt libero. Fusce in venenatis ligula. Etiam eget lacus id erat scelerisque tempor.</p>
                        </div>

                        <div class="col-md-6 align-self-center g-py-20">
                          <img class="w-100" src="{{ root }}assets/img-temp/400x270/img20.jpg" alt="Iamge Description">
                        </div>
                      </div>
                    </div>
                  </section>
                </div>
              </div>

              {% set SCExtendedClasses = "container" %}
              {% set contentTarget = "#shortcode5-4" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Tab panes -->
        </section>
        <!-- End Hero blocks #05 -->

        <!-- Hero blocks #06 -->
        <section class="g-py-30">
          <div class="text-center g-mb-50">
            <h2 class="h4">Hero blocks
              <span class="g-color-primary g-ml-5">#06</span>
            </h2>
            <p>BG image parallax + video parallax</p>
          </div>

          <!-- Nav tabs -->
          <ul class="nav justify-content-center u-nav-v2-1 u-nav-rounded-3 g-mb-50" role="tablist"
              data-target="hero-06"
              data-tabs-mobile-type="slide-up-down"
              data-btn-classes="btn btn-md btn-block u-btn-outline-primary">
            <li class="nav-item">
              <a class="nav-link active" data-toggle="tab" href="#hero-06-1" role="tab">Example 1</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-toggle="tab" href="#hero-06-2" role="tab">Example 2</a>
            </li>
          </ul>
          <!-- End Nav tabs -->

          <!-- Tab panes -->
          <div id="hero-06" class="tab-content">
            <div id="hero-06-1" class="tab-pane fade show active" role="tabpanel">
              <div id="shortcode6-1">
                <div class="shortcode-html">
                  <div class="dzsparallaxer auto-init height-is-based-on-content use-loading"
                       data-options='{
                        settings_mode_oneelement_max_offset: "150"
                       }'>
                    <!-- Parallax Image -->
                    <div class="divimage dzsparallaxer--target w-100" style="height: 140%; background-image: url({{ root }}assets/img-temp/1920x1080/img11.jpg)"></div>

                    <section class="g-flex-centered g-height-500 g-color-white u-bg-overlay g-bg-black-opacity-0_6--after g-py-20">
                      <div class="container u-bg-overlay__inner">
                        <div class="row">
                          <div class="col-md-6 align-self-center g-py-20">
                            <h2 class="h4 text-uppercase g-letter-spacing-1 g-mb-20">Content block</h2>
                            <p class="lead mb-0 g-line-height-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit rhoncus tempus. Donec id orci malesuada, finibus odio quis, tincidunt libero. Fusce in venenatis ligula. Etiam eget lacus id erat scelerisque tempor.</p>
                          </div>

                          <div class="col-md-6 align-self-center g-py-20">
                            <img class="w-100" src="{{ root }}assets/img-temp/400x270/img21.jpg" alt="Iamge Description">
                          </div>
                        </div>
                      </div>
                    </section>
                  </div>
                </div>

                <div class="shortcode-styles">
                  <!-- CSS Global Compulsory -->
                  <link type="text/plain" rel="stylesheet" href="{{ root }}assets/vendor/dzsparallaxer/dzsparallaxer.css">
                  <link type="text/plain" rel="stylesheet" href="{{ root }}assets/vendor/dzsparallaxer/dzsscroller/scroller.css">
                  <link type="text/plain" rel="stylesheet" href="{{ root }}assets/vendor/dzsparallaxer/advancedscroller/plugin.css">
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Implementing Plugins -->
                  <script type="text/plain" src="{{ root }}assets/vendor/dzsparallaxer/dzsparallaxer.js"></script>
                  <script type="text/plain" src="{{ root }}assets/vendor/dzsparallaxer/dzsscroller/scroller.js"></script>
                  <script type="text/plain" src="{{ root }}assets/vendor/dzsparallaxer/advancedscroller/plugin.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).on('ready', function () {
                      // initialization of parallax
                      $('.dzsparallaxer').dzsparallaxer();
                    });
                  </script>
                </div>
              </div>

              {% set SCExtendedClasses = "container" %}
              {% set contentTarget = "#shortcode6-1" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>

            <div id="hero-06-2" class="tab-pane fade" role="tabpanel">
              <div id="shortcode6-2">
                <div class="shortcode-html">
                  <div class="dzsparallaxer auto-init height-is-based-on-content use-loading g-height-500" style="position: relative;"
                       data-options='{
                        mode_scroll: "fromtop",
                        animation_duration: 25,
                        direction: "reverse"
                       }'>
                    <!-- Parallax Video -->
                    <div class="dzsparallaxer--target w-100 u-bg-overlay g-bg-black-opacity-0_6--after" style="height: 130%;"
                         data-forcewidth_ratio="1.77">
                      <div class="js-bg-video g-pos-abs w-100 h-100"
                           data-hs-bgv-type="youtube"
                           data-hs-bgv-id="w2iPKMP2a-U"
                           data-hs-bgv-loop="1"></div>
                    </div>
                    <!-- End Parallax Video -->

                    <section class="g-flex-centered g-height-500 g-color-white g-py-20">
                      <div class="container u-bg-overlay__inner">
                        <div class="row">
                          <div class="col-md-6 align-self-center g-py-20">
                            <h2 class="h4 text-uppercase g-letter-spacing-1 g-mb-20">Content block</h2>
                            <p class="lead mb-0 g-line-height-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit rhoncus tempus. Donec id orci malesuada, finibus odio quis, tincidunt libero. Fusce in venenatis ligula. Etiam eget lacus id erat scelerisque tempor.</p>
                          </div>

                          <div class="col-md-6 align-self-center g-py-20">
                            <img class="w-100" src="{{ root }}assets/img-temp/400x270/img22.jpg" alt="Iamge Description">
                          </div>
                        </div>
                      </div>
                    </section>
                  </div>
                </div>

                <div class="shortcode-styles">
                  <!-- CSS Global Compulsory -->
                  <link type="text/plain" rel="stylesheet" href="{{ root }}assets/vendor/dzsparallaxer/dzsparallaxer.css">
                  <link type="text/plain" rel="stylesheet" href="{{ root }}assets/vendor/dzsparallaxer/dzsscroller/scroller.css">
                  <link type="text/plain" rel="stylesheet" href="{{ root }}assets/vendor/dzsparallaxer/advancedscroller/plugin.css">

                  <!-- CSS Implementing Plugins -->
                  <link type="text/plain" rel="stylesheet" href="{{ root }}assets/vendor/hs-bg-video/hs-bg-video.css">
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Implementing Plugins -->
                  <script type="text/plain" src="{{ root }}assets/vendor/dzsparallaxer/dzsparallaxer.js"></script>
                  <script type="text/plain" src="{{ root }}assets/vendor/dzsparallaxer/dzsscroller/scroller.js"></script>
                  <script type="text/plain" src="{{ root }}assets/vendor/dzsparallaxer/advancedscroller/plugin.js"></script>
                  <script type="text/plain" src="{{ root }}assets/vendor/hs-bg-video/hs-bg-video.js"></script>
                  <script type="text/plain" src="{{ root }}assets/vendor/hs-bg-video/vendor/player.min.js"></script>

                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/helpers/hs.bg-video.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).ready(function () {
                      // initialization of parallax
                      $('.dzsparallaxer').dzsparallaxer();

                      // initialization of video on background
                      $.HSCore.helpers.HSBgVideo.init('.js-bg-video');
                    });
                  </script>
                </div>
              </div>

              {% set SCExtendedClasses = "container" %}
              {% set contentTarget = "#shortcode6-2" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Tab panes -->
        </section>
        <!-- End Hero blocks #06 -->

        <!-- Hero blocks #07 -->
        <section class="g-py-30">
          <div class="text-center g-mb-50">
            <h2 class="h4">Hero blocks
              <span class="g-color-primary g-ml-5">#07</span>
            </h2>
            <p>BG video: Youtube, Vimeo, HTML5</p>
          </div>

          <!-- Nav tabs -->
          <ul class="nav justify-content-center u-nav-v2-1 u-nav-rounded-3 g-mb-50" role="tablist"
              data-target="hero-07"
              data-tabs-mobile-type="slide-up-down"
              data-btn-classes="btn btn-md btn-block u-btn-outline-primary">
            <li class="nav-item">
              <a class="nav-link active" data-toggle="tab" href="#hero-07-1" role="tab">Example 1</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-toggle="tab" href="#hero-07-2" role="tab">Example 2</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-toggle="tab" href="#hero-07-3" role="tab">Example 3</a>
            </li>
          </ul>
          <!-- End Nav tabs -->

          <!-- Tab panes -->
          <div id="hero-07" class="tab-content">
            <div id="hero-07-1" class="tab-pane fade show active" role="tabpanel">
              <div id="shortcode7-1">
                <div class="shortcode-html">
                  <section class="js-bg-video g-flex-centered g-height-500 g-color-white u-bg-overlay g-bg-black-opacity-0_6--after g-py-20 g-overflow-y-hidden" style="background-image: url({{ root }}assets/img-temp/1920x1080/img1.jpg);"
                           data-hs-bgv-type="youtube"
                           data-hs-bgv-id="w2iPKMP2a-U"
                           data-hs-bgv-loop="1">
                    <div class="container u-bg-overlay__inner">
                      <div class="row">
                        <div class="col-md-6 align-self-center g-py-20">
                          <h2 class="h4 text-uppercase g-letter-spacing-1 g-mb-20">Content block</h2>
                          <p class="lead mb-0 g-line-height-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit rhoncus tempus. Donec id orci malesuada, finibus odio quis, tincidunt libero. Fusce in venenatis ligula. Etiam eget lacus id erat scelerisque tempor.</p>
                        </div>

                        <div class="col-md-6 align-self-center g-py-20">
                          <img class="w-100" src="{{ root }}assets/img-temp/400x270/img4.jpg" alt="Iamge Description">
                        </div>
                      </div>
                    </div>
                  </section>
                </div>

                <div class="shortcode-styles">
                  <!-- CSS Implementing Plugins -->
                  <link type="text/plain" rel="stylesheet" href="{{ root }}assets/vendor/hs-bg-video/hs-bg-video.css">
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Implementing Plugins -->
                  <script type="text/plain" src="{{ root }}assets/vendor/hs-bg-video/hs-bg-video.js"></script>
                  <script type="text/plain" src="{{ root }}assets/vendor/hs-bg-video/vendor/player.min.js"></script>

                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/helpers/hs.bg-video.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).ready(function () {
                      // initialization of video on background
                      $.HSCore.helpers.HSBgVideo.init('.js-bg-video');
                    });
                  </script>
                </div>
              </div>

              {% set SCExtendedClasses = "container" %}
              {% set contentTarget = "#shortcode7-1" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>

            <div id="hero-07-2" class="tab-pane fade" role="tabpanel">
              <div id="shortcode7-2">
                <div class="shortcode-html">
                  <section class="js-bg-video g-flex-centered g-height-500 g-color-white u-bg-overlay g-bg-black-opacity-0_6--after g-py-20 g-overflow-y-hidden" style="background-image: url({{ root }}assets/img-temp/1920x1080/img1.jpg);"
                           data-hs-bgv-type="vimeo"
                           data-hs-bgv-id="111939668"
                           data-hs-bgv-loop="1">
                    <div class="container u-bg-overlay__inner">
                      <div class="row">
                        <div class="col-md-6 align-self-center g-py-20">
                          <h2 class="h4 text-uppercase g-letter-spacing-1 g-mb-20">Content block</h2>
                          <p class="lead mb-0 g-line-height-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit rhoncus tempus. Donec id orci malesuada, finibus odio quis, tincidunt libero. Fusce in venenatis ligula. Etiam eget lacus id erat scelerisque tempor.</p>
                        </div>

                        <div class="col-md-6 align-self-center g-py-20">
                          <img class="w-100" src="{{ root }}assets/img-temp/400x270/img12.jpg" alt="Iamge Description">
                        </div>
                      </div>
                    </div>
                  </section>
                </div>

                <div class="shortcode-styles">
                  <!-- CSS Implementing Plugins -->
                  <link type="text/plain" rel="stylesheet" href="{{ root }}assets/vendor/hs-bg-video/hs-bg-video.css">
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Implementing Plugins -->
                  <script type="text/plain" src="{{ root }}assets/vendor/hs-bg-video/hs-bg-video.js"></script>
                  <script type="text/plain" src="{{ root }}assets/vendor/hs-bg-video/vendor/player.min.js"></script>

                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/helpers/hs.bg-video.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).ready(function () {
                      // initialization of video on background
                      $.HSCore.helpers.HSBgVideo.init('.js-bg-video');
                    });
                  </script>
                </div>
              </div>

              {% set SCExtendedClasses = "container" %}
              {% set contentTarget = "#shortcode7-2" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>

            <div id="hero-07-3" class="tab-pane fade" role="tabpanel">
              <div id="shortcode7-3">
                <div class="shortcode-html">
                  <section class="js-bg-video g-flex-centered g-height-500 g-color-white u-bg-overlay g-bg-black-opacity-0_6--after g-py-20 g-overflow-y-hidden" style="background-image: url({{ root }}assets/img-temp/1920x1080/img1.jpg);"
                           data-hs-bgv-path="{{ root }}assets/media-temp/video-bg/video-bg"
                           data-hs-bgv-loop="1">
                    <div class="container u-bg-overlay__inner">
                      <div class="row">
                        <div class="col-md-6 align-self-center g-py-20">
                          <h2 class="h4 text-uppercase g-letter-spacing-1 g-mb-20">Content block</h2>
                          <p class="lead mb-0 g-line-height-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit rhoncus tempus. Donec id orci malesuada, finibus odio quis, tincidunt libero. Fusce in venenatis ligula. Etiam eget lacus id erat scelerisque tempor.</p>
                        </div>

                        <div class="col-md-6 align-self-center g-py-20">
                          <img class="w-100" src="{{ root }}assets/img-temp/400x270/img12.jpg" alt="Iamge Description">
                        </div>
                      </div>
                    </div>
                  </section>
                </div>

                <div class="shortcode-styles">
                  <!-- CSS Implementing Plugins -->
                  <link type="text/plain" rel="stylesheet" href="{{ root }}assets/vendor/hs-bg-video/hs-bg-video.css">
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Implementing Plugins -->
                  <script type="text/plain" src="{{ root }}assets/vendor/hs-bg-video/hs-bg-video.js"></script>
                  <script type="text/plain" src="{{ root }}assets/vendor/hs-bg-video/vendor/player.min.js"></script>

                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/helpers/hs.bg-video.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).ready(function () {
                      // initialization of video on background
                      $.HSCore.helpers.HSBgVideo.init('.js-bg-video');
                    });
                  </script>
                </div>
              </div>

              {% set SCExtendedClasses = "container" %}
              {% set contentTarget = "#shortcode7-3" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Tab panes -->
        </section>
        <!-- End Hero blocks #07 -->

        <!-- Hero blocks #08 -->
        <section class="g-overflow-x-hidden g-py-30">
          <div class="text-center g-mb-50">
            <h2 class="h4">Hero blocks
              <span class="g-color-primary g-ml-5">#07</span>
            </h2>
            <p>Animated content</p>
          </div>

          <!-- Nav tabs -->
          <ul class="nav justify-content-center u-nav-v2-1 u-nav-rounded-3 g-mb-50" role="tablist"
              data-target="hero-08"
              data-tabs-mobile-type="slide-up-down"
              data-btn-classes="btn btn-md btn-block u-btn-outline-primary">
            <li class="nav-item">
              <a class="nav-link active" data-toggle="tab" href="#hero-08-1" role="tab">Example 1</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-toggle="tab" href="#hero-08-2" role="tab">Example 2</a>
            </li>
          </ul>
          <!-- End Nav tabs -->

          <!-- Tab panes -->
          <div id="hero-08" class="tab-content">
            <div id="hero-08-1" class="tab-pane fade show active" role="tabpanel">
              <div id="shortcode8-1">
                <div class="shortcode-html">
                  <section class="g-flex-centered g-height-450 g-bg-gray-light-v5 g-py-30">
                    <div class="container">
                      <div class="row">
                        <div class="col-md-6 align-self-center g-py-20">
                          <h2 class="h4 text-uppercase g-letter-spacing-1 g-mb-20"
                              data-animation="fadeInLeft"
                              data-animation-delay="500"
                              data-animation-duration="2000">Content block</h2>
                          <p class="lead mb-0 g-line-height-2"
                             data-animation="fadeInLeft"
                             data-animation-delay="500"
                             data-animation-duration="2000">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit rhoncus tempus. Donec id orci malesuada, finibus odio quis, tincidunt libero. Fusce in venenatis ligula. Etiam eget lacus id erat scelerisque tempor.</p>
                        </div>

                        <div class="col-md-6 align-self-center g-py-20">
                          <img class="w-100" src="{{ root }}assets/img-temp/400x270/img28.jpg" alt="Iamge Description"
                               data-animation="fadeInRight"
                               data-animation-delay="500"
                               data-animation-duration="2000">
                        </div>
                      </div>
                    </div>
                  </section>
                </div>

                <div class="shortcode-styles">
                  <!-- CSS Implementing Plugins -->
                  <link type="text/plain" rel="stylesheet" href="{{ root }}assets/vendor/animate.css">
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Implementing Plugins -->
                  <script type="text/plain" src="{{ root }}assets/vendor/appear.js"></script>

                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/hs.onscroll-animation.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).ready(function () {
                      // initialization of scroll animation
                      $.HSCore.components.HSOnScrollAnimation.init('[data-animation]');
                    });
                  </script>
                </div>
              </div>

              {% set SCExtendedClasses = "container" %}
              {% set contentTarget = "#shortcode8-1" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>

            <div id="hero-08-2" class="tab-pane fade" role="tabpanel">
              <div id="shortcode8-2">
                <div class="shortcode-html">
                  <section class="g-flex-centered g-height-450 g-bg-primary g-color-white-opacity-0_9 g-py-30">
                    <div class="container">
                      <div class="row">
                        <div class="col-md-6 align-self-center g-py-20">
                          <h2 class="h4 text-uppercase g-letter-spacing-1 g-mb-20"
                              data-animation="fadeInUp"
                              data-animation-delay="500"
                              data-animation-duration="2000">Content block</h2>
                          <p class="lead mb-0 g-line-height-2"
                             data-animation="fadeInUp"
                             data-animation-delay="750"
                             data-animation-duration="2000">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit rhoncus tempus. Donec id orci malesuada, finibus odio quis, tincidunt libero. Fusce in venenatis ligula. Etiam eget lacus id erat scelerisque tempor.</p>
                        </div>

                        <div class="col-md-6 align-self-center g-py-20">
                          <img class="w-100" src="{{ root }}assets/img-temp/400x270/img12.jpg" alt="Iamge Description"
                               data-animation="fadeInUp"
                               data-animation-delay="1000"
                               data-animation-duration="2000">
                        </div>
                      </div>
                    </div>
                  </section>
                </div>

                <div class="shortcode-styles">
                  <!-- CSS Implementing Plugins -->
                  <link type="text/plain" rel="stylesheet" href="{{ root }}assets/vendor/animate.css">
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Implementing Plugins -->
                  <script type="text/plain" src="{{ root }}assets/vendor/appear.js"></script>

                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/hs.onscroll-animation.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).ready(function () {
                      // initialization of scroll animation
                      $.HSCore.components.HSOnScrollAnimation.init('[data-animation]');
                    });
                  </script>
                </div>
              </div>

              {% set SCExtendedClasses = "container" %}
              {% set contentTarget = "#shortcode8-2" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Tab panes -->
        </section>
        <!-- End Hero blocks #08 -->
      </section>
      <!-- End Hero blocks -->
    </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>

  {% include "html/assets/include/nunjucks/partials/blocks/modals/modal-markup.njk" %}

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

  <!-- JS Implementing Plugins -->
  <script src="{{ root }}assets/vendor/appear.js"></script>
  <script src="{{ root }}assets/vendor/hs-megamenu/src/hs.megamenu.js"></script>
  {% include "html/assets/include/nunjucks/partials/js/js-dzsparallaxer.njk" %}
  <script src="{{ root }}assets/vendor/hs-bg-video/hs-bg-video.js"></script>
  <script src="{{ root }}assets/vendor/hs-bg-video/vendor/player.min.js"></script>
  <script src="{{ root }}assets/vendor/slick-carousel/slick/slick.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>

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

  <!-- 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.onscroll-animation.js"></script>
  <script src="{{ root }}assets/js/helpers/hs.bg-video.js"></script>

  <script src="{{ root }}assets/js/components/hs.autocomplete-local-search.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.carousel.js"></script>

  <script src="{{ root }}assets/js/components/hs.go-to.js"></script>

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

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

  <!-- JS Plugins Init. -->
  <script>
    $(document).on('ready', function () {
      // initialization of go to
      $.HSCore.components.HSGoTo.init('.js-go-to');

      // initialization of parallax
      $('.dzsparallaxer').dzsparallaxer();

      // initialization of video on background
      $.HSCore.helpers.HSBgVideo.init('.js-bg-video');

      // initialization of scroll animation
      $.HSCore.components.HSOnScrollAnimation.init('[data-animation]');
    });

    $(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 HSMegaMenu component
      $('.js-mega-menu').HSMegaMenu({
        event: 'hover',
        pageContainer: $('.container'),
        breakpoint: 991
      });
    });
  </script>
</body>
</html>
