{# Settings #}
{% set root = "../../" %}
{% set mainNavActive_1 = "shortcodes" %}
{% set sidebarNavActive_1 = "shortcode-locks-products-advanced" %}
{% set title = "Product Blocks - Advanced" %}

{% 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/fancybox/jquery.fancybox.min.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>
      <!-- Product Blocks v1 -->
      <section class="container g-py-100">
        <div class="text-center g-mb-50">
          <h2 class="h4">Products
            <span class="g-color-primary g-ml-5">#01</span>
          </h2>
        </div>

        <div id="shortcode01">
          <div class="shortcode-html">
            <!-- Products Block -->
            <div class="g-mx-minus-15">
              <div class="js-carousel g-pb-90"
                   data-slides-show="2"
                   data-slides-scroll="2"
                   data-infinite="true"
                   data-arrows-classes="u-arrow-v1 g-pos-abs g-bottom-0 g-width-45 g-height-45 g-font-size-default g-color-gray-dark-v5 g-bg-gray-light-v5 g-color-white--hover g-bg-primary--hover rounded"
                   data-arrow-left-classes="fa fa-angle-left g-left-35x--lg g-left-15"
                   data-arrow-right-classes="fa fa-angle-right g-right-35x--lg g-right-15"
                   data-pagi-classes="u-carousel-indicators-v1 g-absolute-centered--x g-bottom-20 text-center">
                <div class="js-slide g-px-15">
                  <!-- Article -->
                  <article class="g-bg-size-cover g-pos-rel" data-bg-img-src="{{ root }}assets/img-temp/900x600/img1.jpg">
                    <!-- Article Content -->
                    <div class="ml-auto g-width-50x--sm g-bg-black-opacity-0_7 g-pa-30">
                      <div class="g-mb-50">
                        <h3 class="h4 g-color-white g-mb-15">Water Project</h3>
                        <p class="g-color-white-opacity-0_9">Now that we've aligned the details, it's time to get things mapped out and organized.et.</p>
                      </div>

                      <!-- Progress Bar -->
                      <div class="g-pos-rel g-mb-20">
                        <div class="js-hr-progress-bar progress g-height-4 g-bg-black rounded-0 g-overflow-visible g-mb-20">
                          <div class="js-hr-progress-bar-indicator progress-bar g-pos-rel" role="progressbar" style="width: 33%;" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100">
                            <div class="text-center u-progress__pointer-v2 g-font-size-11 g-color-white g-bg-primary">33%</div>
                          </div>
                        </div>
                      </div>
                      <!-- End Progress Bar -->

                      <div class="g-mb-30">
                        <em class="d-block g-color-white g-font-style-normal g-font-size-11 text-uppercase"> 199
                          <span class="g-color-primary">Days Left</span>
                        </em>
                        <em class="d-block g-color-white g-font-style-normal g-font-size-11 text-uppercase g-mb-5"> Our Goal:
                          <span class="g-color-primary">$2 600 000</span>
                        </em>
                      </div>

                      <a class="btn btn-md btn-block u-btn-primary g-font-weight-600 g-font-size-11 text-uppercase" href="#">
                        <i class="g-font-size-18 g-pos-rel g-top-2 g-mr-5 fa fa-heart"></i>
                        Donate Now
                      </a>
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="js-slide g-px-15">
                  <!-- Article -->
                  <article class="g-bg-size-cover g-pos-rel" data-bg-img-src="{{ root }}assets/img-temp/900x600/img6.jpg">
                    <!-- Article Content -->
                    <div class="ml-auto g-width-50x--sm g-bg-black-opacity-0_7 g-pa-30">
                      <div class="g-mb-45">
                        <h3 class="h4 g-color-white g-mb-15">Education Project</h3>
                        <p class="g-color-white-opacity-0_9">Now that we've aligned the details, it's time to get things mapped out and organized.</p>
                      </div>

                      <!-- Progress Bar -->
                      <div class="g-pos-rel g-mb-20">
                        <div class="js-hr-progress-bar progress g-height-4 g-bg-black rounded-0 g-overflow-visible g-mb-20">
                          <div class="js-hr-progress-bar-indicator progress-bar g-pos-rel" role="progressbar" style="width: 56%;" aria-valuenow="56" aria-valuemin="0" aria-valuemax="100">
                            <div class="text-center u-progress__pointer-v2 g-font-size-11 g-color-white g-bg-primary">56%</div>
                          </div>
                        </div>
                      </div>
                      <!-- End Progress Bar -->

                      <div class="g-mb-30">
                        <em class="d-block g-color-white g-font-style-normal g-font-size-11 text-uppercase"> 274
                          <span class="g-color-primary">Days Left</span>
                        </em>
                        <em class="d-block g-color-white g-font-style-normal g-font-size-11 text-uppercase g-mb-5"> Our Goal:
                          <span class="g-color-primary">$760 000</span>
                        </em>
                      </div>

                      <a class="btn btn-md btn-block u-btn-primary g-font-weight-600 g-font-size-11 text-uppercase" href="#">
                        <i class="g-font-size-18 g-pos-rel g-top-2 g-mr-5 fa fa-heart"></i>
                        Donate Now
                      </a>
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="js-slide g-px-15">
                  <!-- Article -->
                  <article class="g-bg-size-cover g-pos-rel" data-bg-img-src="{{ root }}assets/img-temp/900x600/img4.jpg">
                    <!-- Article Content -->
                    <div class="ml-auto g-width-50x--sm g-bg-black-opacity-0_7 g-pa-30">
                      <div class="g-mb-45">
                        <h3 class="h4 g-color-white g-mb-15">Water Project</h3>
                        <p class="g-color-white-opacity-0_9">Now that we've aligned the details, it's time to get things mapped out and organized.</p>
                      </div>

                      <!-- Progress Bar -->
                      <div class="g-pos-rel g-mb-20">
                        <div class="js-hr-progress-bar progress g-height-4 g-bg-black rounded-0 g-overflow-visible g-mb-20">
                          <div class="js-hr-progress-bar-indicator progress-bar g-pos-rel" role="progressbar" style="width: 84%;" aria-valuenow="84" aria-valuemin="0" aria-valuemax="100">
                            <div class="text-center u-progress__pointer-v2 g-font-size-11 g-color-white g-bg-primary">84%</div>
                          </div>
                        </div>
                      </div>
                      <!-- End Progress Bar -->

                      <div class="g-mb-30">
                        <em class="d-block g-color-white g-font-style-normal g-font-size-11 text-uppercase"> 199
                          <span class="g-color-primary">Days Left</span>
                        </em>
                        <em class="d-block g-color-white g-font-style-normal g-font-size-11 text-uppercase g-mb-5"> Our Goal:
                          <span class="g-color-primary">$2 600 000</span>
                        </em>
                      </div>

                      <a class="btn btn-md btn-block u-btn-primary g-font-weight-600 g-font-size-11 text-uppercase" href="#">
                        <i class="g-font-size-18 g-pos-rel g-top-2 g-mr-5 fa fa-heart"></i>
                        Donate Now
                      </a>
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="js-slide g-px-15">
                  <!-- Article -->
                  <article class="g-bg-size-cover g-pos-rel" data-bg-img-src="{{ root }}assets/img-temp/900x600/img5.jpg">
                    <!-- Article Content -->
                    <div class="ml-auto g-width-50x--sm g-bg-black-opacity-0_7 g-pa-30">
                      <div class="g-mb-45">
                        <h3 class="h4 g-color-white g-mb-15">Education Project</h3>
                        <p class="g-color-white-opacity-0_9">Now that we've aligned the details, it's time to get things mapped out and organized.</p>
                      </div>

                      <!-- Progress Bar -->
                      <div class="g-pos-rel g-mb-20">
                        <div class="js-hr-progress-bar progress g-height-4 g-bg-black rounded-0 g-overflow-visible g-mb-20">
                          <div class="js-hr-progress-bar-indicator progress-bar g-pos-rel" role="progressbar" style="width: 91%;" aria-valuenow="91" aria-valuemin="0" aria-valuemax="100">
                            <div class="text-center u-progress__pointer-v2 g-font-size-11 g-color-white g-bg-primary">91%</div>
                          </div>
                        </div>
                      </div>
                      <!-- End Progress Bar -->

                      <div class="g-mb-30">
                        <em class="d-block g-color-white g-font-style-normal g-font-size-11 text-uppercase"> 274
                          <span class="g-color-primary">Days Left</span>
                        </em>
                        <em class="d-block g-color-white g-font-style-normal g-font-size-11 text-uppercase g-mb-5"> Our Goal:
                          <span class="g-color-primary">$760 000</span>
                        </em>
                      </div>

                      <a class="btn btn-md btn-block u-btn-primary g-font-weight-600 g-font-size-11 text-uppercase" href="#">
                        <i class="g-font-size-18 g-pos-rel g-top-2 g-mr-5 fa fa-heart"></i>
                        Donate Now
                      </a>
                    </div>
                    <!-- End Article Content -->
                  </article>
                  <!-- End Article -->
                </div>
              </div>
            </div>
            <!-- End Products Block -->
          </div>

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

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

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

            <!-- JS Plugins Init. -->
            <script type="text/plain">
              $(document).ready(function () {
                // initialization of carousel
                $.HSCore.components.HSCarousel.init('.js-carousel');

                // initialization of horizontal progress bars
                var horizontalProgressBars = $.HSCore.components.HSProgressBar.init('.js-hr-progress-bar', {
                  direction: 'horizontal',
                  indicatorSelector: '.js-hr-progress-bar-indicator'
                });
              });
            </script>
          </div>
        </div>

        {% set contentTarget = "#shortcode01" %}
        {% set modalID = "#modalMarkup" %}
        {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
      </section>
      <!-- End Product Blocks v1 -->

      <!-- Product Blocks v2 -->
      <section class="g-bg-secondary g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Products
              <span class="g-color-primary g-ml-5">#02</span>
            </h2>
          </div>

          <div id="shortcode02">
            <div class="shortcode-html">
              <!-- Products Block -->
              <div class="g-mx-minus-15">
                <div class="js-carousel g-pb-90"
                     data-slides-show="4"
                     data-slides-scroll="4"
                     data-arrows-classes="u-arrow-v1 g-pos-abs g-bottom-0 g-width-45 g-height-45 g-font-size-default g-color-gray-dark-v5 g-bg-gray-light-v5 g-color-white--hover g-bg-primary--hover rounded"
                     data-arrow-left-classes="fa fa-angle-left g-left-35x--lg g-left-15"
                     data-arrow-right-classes="fa fa-angle-right g-right-35x--lg g-right-15"
                     data-pagi-classes="u-carousel-indicators-v1 g-absolute-centered--x g-bottom-20 text-center"
                     data-responsive='[{
                       "breakpoint": 992,
                       "settings": {
                         "slidesToShow": 3
                       }
                     }, {
                       "breakpoint": 768,
                       "settings": {
                         "slidesToShow": 2
                       }
                     }, {
                       "breakpoint": 554,
                       "settings": {
                         "slidesToShow": 1
                       }
                     }]'>
                  <div class="js-slide g-px-15">
                    <!-- Article -->
                    <article class="u-shadow-v19 g-bg-white text-center rounded g-px-20 g-py-40 g-mb-5">
                      <!-- Article Image -->
                      <img class="d-inline-block img-fluid mb-4" src="{{ root }}assets/img-temp/425x250/img1.png" alt="Image Description">
                      <!-- End Article Image -->

                      <!-- Article Content -->
                      <h4 class="h5 g-color-black g-font-weight-600 g-mb-10">Corata</h4>
                      <p>Finding your perfect product</p>
                      <span class="d-block g-color-primary g-font-size-16">$50.00</span>
                      <!-- End Article Content -->
                    </article>
                    <!-- End Article -->
                  </div>

                  <div class="js-slide g-px-15">
                    <!-- Article -->
                    <article class="u-shadow-v19 g-bg-white text-center rounded g-px-20 g-py-40 g-mb-5">
                      <!-- Article Image -->
                      <img class="d-inline-block img-fluid mb-4" src="{{ root }}assets/img-temp/425x250/img2.png" alt="Image Description">
                      <!-- End Article Image -->

                      <!-- Article Content -->
                      <h4 class="h5 g-color-black g-font-weight-600 g-mb-10">Morbi</h4>
                      <p>Finding your perfect product</p>
                      <span class="d-block g-color-primary g-font-size-16">$50.00</span>
                      <!-- End Article Content -->
                    </article>
                    <!-- End Article -->
                  </div>

                  <div class="js-slide g-px-15">
                    <!-- Article -->
                    <article class="u-shadow-v19 g-bg-white text-center rounded g-px-20 g-py-40 g-mb-5">
                      <!-- Article Image -->
                      <img class="d-inline-block img-fluid mb-4" src="{{ root }}assets/img-temp/425x250/img10.png" alt="Image Description">
                      <!-- End Article Image -->

                      <!-- Article Content -->
                      <h4 class="h5 g-color-black g-font-weight-600 g-mb-10">Proin</h4>
                      <p>Finding your perfect product</p>
                      <span class="d-block g-color-primary g-font-size-16">$50.00</span>
                      <!-- End Article Content -->
                    </article>
                    <!-- End Article -->
                  </div>

                  <div class="js-slide g-px-15">
                    <!-- Article -->
                    <article class="u-shadow-v19 g-bg-white text-center rounded g-px-20 g-py-40 g-mb-5">
                      <!-- Article Image -->
                      <img class="d-inline-block img-fluid mb-4" src="{{ root }}assets/img-temp/425x250/img4.png" alt="Image Description">
                      <!-- End Article Image -->

                      <!-- Article Content -->
                      <h4 class="h5 g-color-black g-font-weight-600 g-10b-5">Aliquim</h4>
                      <p>Finding your perfect product</p>
                      <span class="d-block g-color-primary g-font-size-16">$50.00</span>
                      <!-- End Article Content -->
                    </article>
                    <!-- End Article -->
                  </div>

                  <div class="js-slide g-px-15">
                    <!-- Article -->
                    <article class="u-shadow-v19 g-bg-white text-center rounded g-px-20 g-py-40 g-mb-5">
                      <!-- Article Image -->
                      <img class="d-inline-block img-fluid mb-4" src="{{ root }}assets/img-temp/425x250/img6.png" alt="Image Description">
                      <!-- End Article Image -->

                      <!-- Article Content -->
                      <h4 class="h5 g-color-black g-font-weight-600 g-mb-10">Corata</h4>
                      <p>Finding your perfect product</p>
                      <span class="d-block g-color-primary g-font-size-16">$50.00</span>
                      <!-- End Article Content -->
                    </article>
                    <!-- End Article -->
                  </div>

                  <div class="js-slide g-px-15">
                    <!-- Article -->
                    <article class="u-shadow-v19 g-bg-white text-center rounded g-px-20 g-py-40 g-mb-5">
                      <!-- Article Image -->
                      <img class="d-inline-block img-fluid mb-4" src="{{ root }}assets/img-temp/425x250/img7.png" alt="Image Description">
                      <!-- End Article Image -->

                      <!-- Article Content -->
                      <h4 class="h5 g-color-black g-font-weight-600 g-mb-10">Morbi</h4>
                      <p>Finding your perfect product</p>
                      <span class="d-block g-color-primary g-font-size-16">$50.00</span>
                      <!-- End Article Content -->
                    </article>
                    <!-- End Article -->
                  </div>

                  <div class="js-slide g-px-15">
                    <!-- Article -->
                    <article class="u-shadow-v19 g-bg-white text-center rounded g-px-20 g-py-40 g-mb-5">
                      <!-- Article Image -->
                      <img class="d-inline-block img-fluid mb-4" src="{{ root }}assets/img-temp/425x250/img8.png" alt="Image Description">
                      <!-- End Article Image -->

                      <!-- Article Content -->
                      <h4 class="h5 g-color-black g-font-weight-600 g-mb-10">Proin</h4>
                      <p>Finding your perfect product</p>
                      <span class="d-block g-color-primary g-font-size-16">$50.00</span>
                      <!-- End Article Content -->
                    </article>
                    <!-- End Article -->
                  </div>

                  <div class="js-slide g-px-15">
                    <!-- Article -->
                    <article class="u-shadow-v19 g-bg-white text-center rounded g-px-20 g-py-40 g-mb-5">
                      <!-- Article Image -->
                      <img class="d-inline-block img-fluid mb-4" src="{{ root }}assets/img-temp/425x250/img9.png" alt="Image Description">
                      <!-- End Article Image -->

                      <!-- Article Content -->
                      <h4 class="h5 g-color-black g-font-weight-600 g-10b-5">Aliquim</h4>
                      <p>Finding your perfect product</p>
                      <span class="d-block g-color-primary g-font-size-16">$50.00</span>
                      <!-- End Article Content -->
                    </article>
                    <!-- End Article -->
                  </div>
                </div>
              </div>
              <!-- End Products Block -->
            </div>

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

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

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

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).ready(function () {
                  // initialization of carousel
                  $.HSCore.components.HSCarousel.init('.js-carousel');
                });
              </script>
            </div>
          </div>

          {% set contentTarget = "#shortcode02" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Product Blocks v2 -->

      <!-- Product Blocks v3 -->
      <section class="container g-py-100">
        <div class="text-center g-mb-50">
          <h2 class="h4">Products
            <span class="g-color-primary g-ml-5">#03</span>
          </h2>
        </div>

        <div id="shortcode03">
          <div class="shortcode-html">
            <!-- Product Blocks -->
            <div class="js-carousel g-pb-90"
                 data-slides-show="4"
                 data-slides-scroll="4"
                 data-arrows-classes="u-arrow-v1 g-pos-abs g-bottom-0 g-width-45 g-height-45 g-font-size-default g-color-gray-dark-v5 g-bg-gray-light-v5 g-color-white--hover g-bg-primary--hover rounded"
                 data-arrow-left-classes="fa fa-angle-left g-left-35x--lg g-left-15"
                 data-arrow-right-classes="fa fa-angle-right g-right-35x--lg g-right-15"
                 data-pagi-classes="u-carousel-indicators-v1 g-absolute-centered--x g-bottom-20 text-center"
                 data-responsive='[{
                   "breakpoint": 1350,
                   "settings": {
                     "slidesToShow": 5
                   }
                 }, {
                   "breakpoint": 1200,
                   "settings": {
                     "slidesToShow": 4
                   }
                 }, {
                   "breakpoint": 992,
                   "settings": {
                     "slidesToShow": 3
                   }
                 }, {
                   "breakpoint": 670,
                   "settings": {
                     "slidesToShow": 2
                   }
                 }, {
                   "breakpoint": 500,
                   "settings": {
                     "slidesToShow": 1
                   }
                 }]'>
              <div class="js-slide g-px-15">
                <!-- Article -->
                <article class="info-v5-6 g-pos-rel g-bg-gray-dark-v2 g-bg-primary--hover g-color-white g-rounded-4 g-transition-0_3">
                  <!-- Article Image -->
                  <img class="w-100" src="{{ root }}assets/img-temp/500x450/img1.jpg" alt="Image Description">
                  <!-- End Article Image -->

                  <!-- Article Content -->
                  <div class="g-pa-25">
                    <div class="g-mb-20">
                      <h3 class="h5 g-mb-5">Branding work</h3>
                      <div class="js-rating info-v5-6__rating g-transition-0_3 g-color-primary g-color-gray-light-v5--hover g-font-size-11 g-mb-10" data-rating="2.5" data-spacing="5"></div>
                      <p class="g-opacity-0_8">More Than a Look, Design is Functional. Examples of our branding projects.</p>
                    </div>
                    <a class="btn btn-md u-btn-primary g-color-primary--hover g-bg-white--hover g-font-weight-600 g-font-size-11 text-uppercase" href="#">Explore</a>
                  </div>
                  <!-- End Article Content -->

                  <a href="#" class="u-link-v2"></a>
                </article>
                <!-- End Article -->
              </div>

              <div class="js-slide g-px-15">
                <!-- Article -->
                <article class="info-v5-6 g-pos-rel g-bg-gray-dark-v2 g-bg-primary--hover g-color-white g-rounded-4 g-transition-0_3">
                  <!-- Article Image -->
                  <img class="w-100" src="{{ root }}assets/img-temp/500x450/img2.jpg" alt="Image Description">
                  <!-- End Article Image -->

                  <!-- Article Content -->
                  <div class="g-pa-25">
                    <div class="g-mb-20">
                      <h3 class="h5 g-mb-5">Branding work</h3>
                      <div class="js-rating info-v5-6__rating g-transition-0_3 g-color-primary g-color-gray-light-v5--hover g-font-size-11 g-mb-10" data-rating="3" data-spacing="5"></div>
                      <p class="g-opacity-0_8">More Than a Look, Design is Functional. Examples of our branding projects.</p>
                    </div>
                    <a class="btn btn-md u-btn-primary g-color-primary--hover g-bg-white--hover g-font-weight-600 g-font-size-11 text-uppercase" href="#">Explore</a>
                  </div>
                  <!-- End Article Content -->

                  <a href="#" class="u-link-v2"></a>
                </article>
                <!-- End Article -->
              </div>

              <div class="js-slide g-px-15">
                <!-- Article -->
                <article class="info-v5-6 g-pos-rel g-bg-gray-dark-v2 g-bg-primary--hover g-color-white g-rounded-4 g-transition-0_3">
                  <!-- Article Image -->
                  <img class="w-100" src="{{ root }}assets/img-temp/500x450/img3.jpg" alt="Image Description">
                  <!-- End Article Image -->

                  <!-- Article Content -->
                  <div class="g-pa-25">
                    <div class="g-mb-20">
                      <h3 class="h5 g-mb-5">Branding work</h3>
                      <div class="js-rating info-v5-6__rating g-transition-0_3 g-color-primary g-color-gray-light-v5--hover g-font-size-11 g-mb-10" data-rating="5" data-spacing="5"></div>
                      <p class="g-opacity-0_8">More Than a Look, Design is Functional. Examples of our branding projects.</p>
                    </div>
                    <a class="btn btn-md u-btn-primary g-color-primary--hover g-bg-white--hover g-font-weight-600 g-font-size-11 text-uppercase" href="#">Explore</a>
                  </div>
                  <!-- End Article Content -->

                  <a href="#" class="u-link-v2"></a>
                </article>
                <!-- End Article -->
              </div>

              <div class="js-slide g-px-15">
                <!-- Article -->
                <article class="info-v5-6 g-pos-rel g-bg-gray-dark-v2 g-bg-primary--hover g-color-white g-rounded-4 g-transition-0_3">
                  <!-- Article Image -->
                  <img class="w-100" src="{{ root }}assets/img-temp/500x450/img10.jpg" alt="Image Description">
                  <!-- End Article Image -->

                  <!-- Article Content -->
                  <div class="g-pa-25">
                    <div class="g-mb-20">
                      <h3 class="h5 g-mb-5">Branding work</h3>
                      <div class="js-rating info-v5-6__rating g-transition-0_3 g-color-primary g-color-gray-light-v5--hover g-font-size-11 g-mb-10" data-rating="3.5" data-spacing="5"></div>
                      <p class="g-opacity-0_8">More Than a Look, Design is Functional. Examples of our branding projects.</p>
                    </div>
                    <a class="btn btn-md u-btn-primary g-color-primary--hover g-bg-white--hover g-font-weight-600 g-font-size-11 text-uppercase" href="#">Explore</a>
                  </div>
                  <!-- End Article Content -->

                  <a href="#" class="u-link-v2"></a>
                </article>
                <!-- End Article -->
              </div>

              <div class="js-slide g-px-15">
                <!-- Article -->
                <article class="info-v5-6 g-pos-rel g-bg-gray-dark-v2 g-bg-primary--hover g-color-white g-rounded-4 g-transition-0_3">
                  <!-- Article Image -->
                  <img class="w-100" src="{{ root }}assets/img-temp/500x450/img11.jpg" alt="Image Description">
                  <!-- End Article Image -->

                  <!-- Article Content -->
                  <div class="g-pa-25">
                    <div class="g-mb-20">
                      <h3 class="h5 g-mb-5">Branding work</h3>
                      <div class="js-rating info-v5-6__rating g-transition-0_3 g-color-primary g-color-gray-light-v5--hover g-font-size-11 g-mb-10" data-rating="2.5" data-spacing="5"></div>
                      <p class="g-opacity-0_8">More Than a Look, Design is Functional. Examples of our branding projects.</p>
                    </div>
                    <a class="btn btn-md u-btn-primary g-color-primary--hover g-bg-white--hover g-font-weight-600 g-font-size-11 text-uppercase" href="#">Explore</a>
                  </div>
                  <!-- End Article Content -->

                  <a href="#" class="u-link-v2"></a>
                </article>
                <!-- End Article -->
              </div>

              <div class="js-slide g-px-15">
                <!-- Article -->
                <article class="info-v5-6 g-pos-rel g-bg-gray-dark-v2 g-bg-primary--hover g-color-white g-rounded-4 g-transition-0_3">
                  <!-- Article Image -->
                  <img class="w-100" src="{{ root }}assets/img-temp/500x450/img4.jpg" alt="Image Description">
                  <!-- End Article Image -->

                  <!-- Article Content -->
                  <div class="g-pa-25">
                    <div class="g-mb-20">
                      <h3 class="h5 g-mb-5">Branding work</h3>
                      <div class="js-rating info-v5-6__rating g-transition-0_3 g-color-primary g-color-gray-light-v5--hover g-font-size-11 g-mb-10" data-rating="3" data-spacing="5"></div>
                      <p class="g-opacity-0_8">More Than a Look, Design is Functional. Examples of our branding projects.</p>
                    </div>
                    <a class="btn btn-md u-btn-primary g-color-primary--hover g-bg-white--hover g-font-weight-600 g-font-size-11 text-uppercase" href="#">Explore</a>
                  </div>
                  <!-- End Article Content -->

                  <a href="#" class="u-link-v2"></a>
                </article>
                <!-- End Article -->
              </div>

              <div class="js-slide g-px-15">
                <!-- Article -->
                <article class="info-v5-6 g-pos-rel g-bg-gray-dark-v2 g-bg-primary--hover g-color-white g-rounded-4 g-transition-0_3">
                  <!-- Article Image -->
                  <img class="w-100" src="{{ root }}assets/img-temp/500x450/img5.jpg" alt="Image Description">
                  <!-- End Article Image -->

                  <!-- Article Content -->
                  <div class="g-pa-25">
                    <div class="g-mb-20">
                      <h3 class="h5 g-mb-5">Branding work</h3>
                      <div class="js-rating info-v5-6__rating g-transition-0_3 g-color-primary g-color-gray-light-v5--hover g-font-size-11 g-mb-10" data-rating="5" data-spacing="5"></div>
                      <p class="g-opacity-0_8">More Than a Look, Design is Functional. Examples of our branding projects.</p>
                    </div>
                    <a class="btn btn-md u-btn-primary g-color-primary--hover g-bg-white--hover g-font-weight-600 g-font-size-11 text-uppercase" href="#">Explore</a>
                  </div>
                  <!-- End Article Content -->

                  <a href="#" class="u-link-v2"></a>
                </article>
                <!-- End Article -->
              </div>
            </div>
            <!-- Product Blocks -->
          </div>

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

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

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

            <!-- JS Plugins Init. -->
            <script type="text/plain">
              $(document).ready(function () {
                // initialization of rating
                $.HSCore.components.HSRating.init($('.js-rating'), {
                  spacing: 4
                });

                // initialization of carousel
                $.HSCore.components.HSCarousel.init('.js-carousel');
              });
            </script>
          </div>
        </div>

        {% set contentTarget = "#shortcode03" %}
        {% set modalID = "#modalMarkup" %}
        {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
      </section>
      <!-- End Product Blocks v3 -->

      <!-- Product Blocks v4 -->
      <section class="g-bg-secondary g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Products
              <span class="g-color-primary g-ml-5">#04</span>
            </h2>
          </div>

          <div id="shortcode04">
            <div class="shortcode-html">
              <!-- Products Block -->
              <div class="g-mx-minus-15">
                <div class="js-carousel g-pb-90"
                     data-slides-show="4"
                     data-slides-scroll="4"
                     data-arrows-classes="u-arrow-v1 g-pos-abs g-bottom-0 g-width-45 g-height-45 g-font-size-default g-color-gray-dark-v5 g-bg-white g-color-white--hover g-bg-primary--hover rounded"
                     data-arrow-left-classes="fa fa-angle-left g-left-35x--lg g-left-15"
                     data-arrow-right-classes="fa fa-angle-right g-right-35x--lg g-right-15"
                     data-pagi-classes="u-carousel-indicators-v1 g-absolute-centered--x g-bottom-20 text-center"
                     data-responsive='[{
                       "breakpoint": 1350,
                       "settings": {
                         "slidesToShow": 5
                       }
                     }, {
                       "breakpoint": 1200,
                       "settings": {
                         "slidesToShow": 4
                       }
                     }, {
                       "breakpoint": 992,
                       "settings": {
                         "slidesToShow": 3
                       }
                     }, {
                       "breakpoint": 670,
                       "settings": {
                         "slidesToShow": 2
                       }
                     }, {
                       "breakpoint": 500,
                       "settings": {
                         "slidesToShow": 1
                       }
                     }]'>
                  <div class="js-slide g-px-15">
                    <!-- Article -->
                    <article class="u-shadow-v19 g-bg-white text-center rounded g-mb-5">
                      <!-- Article Header -->
                      <header class="g-pa-25">
                        <h3 class="h5 g-mb-5">
                          <a class="g-color-black g-text-underline--none--hover" href="#">Delux house</a>
                        </h3>

                        <span class="d-block g-color-black g-font-weight-600 g-letter-spacing-1 text-uppercase g-mb-0">
                          $3.500 <em class="g-font-style-normal g-font-weight-300 g-font-size-10">/ per month</em>
                        </span>

                        <div class="g-font-size-12">
                          <div class="js-rating d-inline-block g-color-primary g-font-size-10 g-mr-5" data-rating="3.5"></div>
                          <a class="g-color-gray-dark-v5 g-color-primary--hover g-font-style-normal g-font-size-10 g-text-underline--none--hover" href="#">12 Reviews</a>
                        </div>
                      </header>
                      <!-- End Article Header -->

                      <!-- Article Image -->
                      <img class="w-100" src="{{ root }}assets/img-temp/400x270/img6.jpg" alt="Image Description">
                      <!-- End Article Image -->

                      <!-- Article Footer -->
                      <footer class="d-table w-100">
                        <div class="d-table-cell align-middle g-font-size-12 g-brd-right g-brd-gray-light-v3 g-px-10 g-pt-15 g-pb-10">
                          <i class="align-middle u-line-icon-pro g-font-size-18 g-mr-5 icon-hotel-restaurant-022"></i>
                          4
                        </div>
                        <div class="d-table-cell align-middle g-font-size-12 g-brd-right g-brd-gray-light-v3 g-px-10 g-pt-15 g-pb-10">
                          <i class="align-middle u-line-icon-pro g-font-size-18 g-mr-5 icon-hotel-restaurant-158"></i>
                          2
                        </div>
                        <div class="d-table-cell align-middle g-font-size-12 g-px-10 g-pt-15 g-pb-10">
                          <i class="align-middle u-line-icon-pro g-font-size-18 g-mr-5 icon-real-estate-017"></i>
                          130 sqft
                        </div>
                      </footer>
                      <!-- End Article Footer -->
                    </article>
                    <!-- End Article -->
                  </div>

                  <div class="js-slide g-px-15">
                    <!-- Article -->
                    <article class="u-shadow-v19 g-bg-white text-center rounded g-mb-5">
                      <!-- Article Header -->
                      <header class="g-pa-25">
                        <h3 class="h5 g-mb-5">
                          <a class="g-color-black g-text-underline--none--hover" href="#">Delux house</a>
                        </h3>

                        <span class="d-block g-color-black g-font-weight-600 g-letter-spacing-1 text-uppercase g-mb-0">
                          $3.500 <em class="g-font-style-normal g-font-weight-300 g-font-size-10">/ per month</em>
                        </span>

                        <div class="g-font-size-12">
                          <div class="js-rating d-inline-block g-color-primary g-font-size-10 g-mr-5" data-rating="3.5"></div>
                          <a class="g-color-gray-dark-v5 g-color-primary--hover g-font-style-normal g-font-size-10 g-text-underline--none--hover" href="#">12 Reviews</a>
                        </div>
                      </header>
                      <!-- End Article Header -->

                      <!-- Article Image -->
                      <img class="w-100" src="{{ root }}assets/img-temp/400x270/img2.jpg" alt="Image Description">
                      <!-- End Article Image -->

                      <!-- Article Footer -->
                      <footer class="d-table w-100">
                        <div class="d-table-cell align-middle g-font-size-12 g-brd-right g-brd-gray-light-v3 g-px-10 g-pt-15 g-pb-10">
                          <i class="align-middle u-line-icon-pro g-font-size-18 g-mr-5 icon-hotel-restaurant-022"></i>
                          4
                        </div>
                        <div class="d-table-cell align-middle g-font-size-12 g-brd-right g-brd-gray-light-v3 g-px-10 g-pt-15 g-pb-10">
                          <i class="align-middle u-line-icon-pro g-font-size-18 g-mr-5 icon-hotel-restaurant-158"></i>
                          2
                        </div>
                        <div class="d-table-cell align-middle g-font-size-12 g-px-10 g-pt-15 g-pb-10">
                          <i class="align-middle u-line-icon-pro g-font-size-18 g-mr-5 icon-real-estate-017"></i>
                          130 sqft
                        </div>
                      </footer>
                      <!-- End Article Footer -->
                    </article>
                    <!-- End Article -->
                  </div>

                  <div class="js-slide g-px-15">
                    <!-- Article -->
                    <article class="u-shadow-v19 g-bg-white text-center rounded g-mb-5">
                      <!-- Article Header -->
                      <header class="g-pa-25">
                        <h3 class="h5 g-mb-5">
                          <a class="g-color-black g-text-underline--none--hover" href="#">Delux house</a>
                        </h3>

                        <span class="d-block g-color-black g-font-weight-600 g-letter-spacing-1 text-uppercase g-mb-0">
                          $3.500 <em class="g-font-style-normal g-font-weight-300 g-font-size-10">/ per month</em>
                        </span>

                        <div class="g-font-size-12">
                          <div class="js-rating d-inline-block g-color-primary g-font-size-10 g-mr-5" data-rating="3.5"></div>
                          <a class="g-color-gray-dark-v5 g-color-primary--hover g-font-style-normal g-font-size-10 g-text-underline--none--hover" href="#">12 Reviews</a>
                        </div>
                      </header>
                      <!-- End Article Header -->

                      <!-- Article Image -->
                      <img class="w-100" src="{{ root }}assets/img-temp/400x270/img3.jpg" alt="Image Description">
                      <!-- End Article Image -->

                      <!-- Article Footer -->
                      <footer class="d-table w-100">
                        <div class="d-table-cell align-middle g-font-size-12 g-brd-right g-brd-gray-light-v3 g-px-10 g-pt-15 g-pb-10">
                          <i class="align-middle u-line-icon-pro g-font-size-18 g-mr-5 icon-hotel-restaurant-022"></i>
                          4
                        </div>
                        <div class="d-table-cell align-middle g-font-size-12 g-brd-right g-brd-gray-light-v3 g-px-10 g-pt-15 g-pb-10">
                          <i class="align-middle u-line-icon-pro g-font-size-18 g-mr-5 icon-hotel-restaurant-158"></i>
                          2
                        </div>
                        <div class="d-table-cell align-middle g-font-size-12 g-px-10 g-pt-15 g-pb-10">
                          <i class="align-middle u-line-icon-pro g-font-size-18 g-mr-5 icon-real-estate-017"></i>
                          130 sqft
                        </div>
                      </footer>
                      <!-- End Article Footer -->
                    </article>
                    <!-- End Article -->
                  </div>

                  <div class="js-slide g-px-15">
                    <!-- Article -->
                    <article class="u-shadow-v19 g-bg-white text-center rounded g-mb-5">
                      <!-- Article Header -->
                      <header class="g-pa-25">
                        <h3 class="h5 g-mb-5">
                          <a class="g-color-black g-text-underline--none--hover" href="#">Delux house</a>
                        </h3>

                        <span class="d-block g-color-black g-font-weight-600 g-letter-spacing-1 text-uppercase g-mb-0">
                          $3.500 <em class="g-font-style-normal g-font-weight-300 g-font-size-10">/ per month</em>
                        </span>

                        <div class="g-font-size-12">
                          <div class="js-rating d-inline-block g-color-primary g-font-size-10 g-mr-5" data-rating="3.5"></div>
                          <a class="g-color-gray-dark-v5 g-color-primary--hover g-font-style-normal g-font-size-10 g-text-underline--none--hover" href="#">12 Reviews</a>
                        </div>
                      </header>
                      <!-- End Article Header -->

                      <!-- Article Image -->
                      <img class="w-100" src="{{ root }}assets/img-temp/400x270/img6.jpg" alt="Image Description">
                      <!-- End Article Image -->

                      <!-- Article Footer -->
                      <footer class="d-table w-100">
                        <div class="d-table-cell align-middle g-font-size-12 g-brd-right g-brd-gray-light-v3 g-px-10 g-pt-15 g-pb-10">
                          <i class="align-middle u-line-icon-pro g-font-size-18 g-mr-5 icon-hotel-restaurant-022"></i>
                          4
                        </div>
                        <div class="d-table-cell align-middle g-font-size-12 g-brd-right g-brd-gray-light-v3 g-px-10 g-pt-15 g-pb-10">
                          <i class="align-middle u-line-icon-pro g-font-size-18 g-mr-5 icon-hotel-restaurant-158"></i>
                          2
                        </div>
                        <div class="d-table-cell align-middle g-font-size-12 g-px-10 g-pt-15 g-pb-10">
                          <i class="align-middle u-line-icon-pro g-font-size-18 g-mr-5 icon-real-estate-017"></i>
                          130 sqft
                        </div>
                      </footer>
                      <!-- End Article Footer -->
                    </article>
                    <!-- End Article -->
                  </div>

                  <div class="js-slide g-px-15">
                    <!-- Article -->
                    <article class="u-shadow-v19 g-bg-white text-center rounded g-mb-5">
                      <!-- Article Header -->
                      <header class="g-pa-25">
                        <h3 class="h5 g-mb-5">
                          <a class="g-color-black g-text-underline--none--hover" href="#">Delux house</a>
                        </h3>

                        <span class="d-block g-color-black g-font-weight-600 g-letter-spacing-1 text-uppercase g-mb-0">
                          $3.500 <em class="g-font-style-normal g-font-weight-300 g-font-size-10">/ per month</em>
                        </span>

                        <div class="g-font-size-12">
                          <div class="js-rating d-inline-block g-color-primary g-font-size-10 g-mr-5" data-rating="3.5"></div>
                          <a class="g-color-gray-dark-v5 g-color-primary--hover g-font-style-normal g-font-size-10 g-text-underline--none--hover" href="#">12 Reviews</a>
                        </div>
                      </header>
                      <!-- End Article Header -->

                      <!-- Article Image -->
                      <img class="w-100" src="{{ root }}assets/img-temp/400x270/img5.jpg" alt="Image Description">
                      <!-- End Article Image -->

                      <!-- Article Footer -->
                      <footer class="d-table w-100">
                        <div class="d-table-cell align-middle g-font-size-12 g-brd-right g-brd-gray-light-v3 g-px-10 g-pt-15 g-pb-10">
                          <i class="align-middle u-line-icon-pro g-font-size-18 g-mr-5 icon-hotel-restaurant-022"></i>
                          4
                        </div>
                        <div class="d-table-cell align-middle g-font-size-12 g-brd-right g-brd-gray-light-v3 g-px-10 g-pt-15 g-pb-10">
                          <i class="align-middle u-line-icon-pro g-font-size-18 g-mr-5 icon-hotel-restaurant-158"></i>
                          2
                        </div>
                        <div class="d-table-cell align-middle g-font-size-12 g-px-10 g-pt-15 g-pb-10">
                          <i class="align-middle u-line-icon-pro g-font-size-18 g-mr-5 icon-real-estate-017"></i>
                          130 sqft
                        </div>
                      </footer>
                      <!-- End Article Footer -->
                    </article>
                    <!-- End Article -->
                  </div>

                  <div class="js-slide g-px-15">
                    <!-- Article -->
                    <article class="u-shadow-v19 g-bg-white text-center rounded g-mb-5">
                      <!-- Article Header -->
                      <header class="g-pa-25">
                        <h3 class="h5 g-mb-5">
                          <a class="g-color-black g-text-underline--none--hover" href="#">Delux house</a>
                        </h3>

                        <span class="d-block g-color-black g-font-weight-600 g-letter-spacing-1 text-uppercase g-mb-0">
                          $3.500 <em class="g-font-style-normal g-font-weight-300 g-font-size-10">/ per month</em>
                        </span>

                        <div class="g-font-size-12">
                          <div class="js-rating d-inline-block g-color-primary g-font-size-10 g-mr-5" data-rating="3.5"></div>
                          <a class="g-color-gray-dark-v5 g-color-primary--hover g-font-style-normal g-font-size-10 g-text-underline--none--hover" href="#">12 Reviews</a>
                        </div>
                      </header>
                      <!-- End Article Header -->

                      <!-- Article Image -->
                      <img class="w-100" src="{{ root }}assets/img-temp/400x270/img4.jpg" alt="Image Description">
                      <!-- End Article Image -->

                      <!-- Article Footer -->
                      <footer class="d-table w-100">
                        <div class="d-table-cell align-middle g-font-size-12 g-brd-right g-brd-gray-light-v3 g-px-10 g-pt-15 g-pb-10">
                          <i class="align-middle u-line-icon-pro g-font-size-18 g-mr-5 icon-hotel-restaurant-022"></i>
                          4
                        </div>
                        <div class="d-table-cell align-middle g-font-size-12 g-brd-right g-brd-gray-light-v3 g-px-10 g-pt-15 g-pb-10">
                          <i class="align-middle u-line-icon-pro g-font-size-18 g-mr-5 icon-hotel-restaurant-158"></i>
                          2
                        </div>
                        <div class="d-table-cell align-middle g-font-size-12 g-px-10 g-pt-15 g-pb-10">
                          <i class="align-middle u-line-icon-pro g-font-size-18 g-mr-5 icon-real-estate-017"></i>
                          130 sqft
                        </div>
                      </footer>
                      <!-- End Article Footer -->
                    </article>
                    <!-- End Article -->
                  </div>
                </div>
              </div>
              <!-- End Products Block -->
            </div>

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

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

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

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).ready(function () {
                  // initialization of rating
                  $.HSCore.components.HSRating.init($('.js-rating'), {
                    spacing: 4
                  });

                  // initialization of carousel
                  $.HSCore.components.HSCarousel.init('.js-carousel');
                });
              </script>
            </div>
          </div>

          {% set contentTarget = "#shortcode04" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Product Blocks v4 -->

      <!-- Product Blocks v5 -->
      <section class="container g-py-100">
        <div class="text-center g-mb-50">
          <h2 class="h4">Products
            <span class="g-color-primary g-ml-5">#05</span>
          </h2>
        </div>

        <div id="shortcode05">
          <div class="shortcode-html">
            <!-- Products Block -->
            <div class="g-mx-minus-15">
              <div class="js-carousel g-pb-90"
                   data-slides-show="4"
                   data-slides-scroll="4"
                   data-arrows-classes="u-arrow-v1 g-pos-abs g-bottom-0 g-width-45 g-height-45 g-font-size-default g-color-gray-dark-v5 g-bg-gray-light-v5 g-color-white--hover g-bg-primary--hover rounded"
                   data-arrow-left-classes="fa fa-angle-left g-left-35x--lg g-left-15"
                   data-arrow-right-classes="fa fa-angle-right g-right-35x--lg g-right-15"
                   data-pagi-classes="u-carousel-indicators-v1 g-absolute-centered--x g-bottom-20 text-center"
                   data-responsive='[{
                     "breakpoint": 992,
                     "settings": {
                       "slidesToShow": 2,
                       "slidesToScroll": 2
                     }
                   }, {
                     "breakpoint": 554,
                     "settings": {
                       "slidesToShow": 1,
                       "slidesToScroll": 1
                     }
                   }]'>
                <div class="js-slide g-px-15 g-pt-20">
                  <!-- Article -->
                  <article class="u-block-hover u-block-hover--uncroped text-center">
                    <!-- Article Image -->
                    <a class="d-block u-block-hover__additional--jump g-mb-10" href="#">
                      <img class="w-100" src="{{ root }}assets/img-temp/425x250/img1.png" alt="Image Description">
                    </a>
                    <!-- End Article Image -->

                    <!-- Article Info -->
                    <em class="d-block g-color-gray-dark-v5 g-font-style-normal g-font-size-12 g-mb-0">2013</em>
                    <div class="js-rating g-color-primary g-font-size-11 g-mb-10" data-rating="3.5" data-spacing="5"></div>
                    <h3 class="h5">
                      <a class="g-color-main g-color-primary--hover g-text-underline--none--hover" href="#">Radio Music Society</a>
                    </h3>
                    <!-- End Article Info -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="js-slide g-px-15 g-pt-20">
                  <!-- Article -->
                  <article class="u-block-hover u-block-hover--uncroped text-center">
                    <!-- Article Image -->
                    <a class="d-block u-block-hover__additional--jump g-mb-10" href="#">
                      <img class="w-100" src="{{ root }}assets/img-temp/425x250/img2.png" alt="Image Description">
                    </a>
                    <!-- End Article Image -->

                    <!-- Article Info -->
                    <em class="d-block g-color-gray-dark-v5 g-font-style-normal g-font-size-12 g-mb-0">2014</em>
                    <div class="js-rating g-color-primary g-font-size-11 g-mb-10" data-rating="5" data-spacing="5"></div>
                    <h3 class="h5">
                      <a class="g-color-main g-color-primary--hover g-text-underline--none--hover" href="#">Girls</a>
                    </h3>
                    <!-- End Article Info -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="js-slide g-px-15 g-pt-20">
                  <!-- Article -->
                  <article class="u-block-hover u-block-hover--uncroped text-center">
                    <!-- Article Image -->
                    <a class="d-block u-block-hover__additional--jump g-mb-10" href="#">
                      <img class="w-100" src="{{ root }}assets/img-temp/425x250/img7.png" alt="Image Description">
                    </a>
                    <!-- End Article Image -->

                    <!-- Article Info -->
                    <em class="d-block g-color-gray-dark-v5 g-font-style-normal g-font-size-12 g-mb-0">2015</em>
                    <div class="js-rating g-color-primary g-font-size-11 g-mb-10" data-rating="5" data-spacing="5"></div>
                    <h3 class="h5">
                      <a class="g-color-main g-color-primary--hover g-text-underline--none--hover" href="#">Break Throuch The Silence</a>
                    </h3>
                    <!-- End Article Info -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="js-slide g-px-15 g-pt-20">
                  <!-- Article -->
                  <article class="u-block-hover u-block-hover--uncroped text-center">
                    <!-- Article Image -->
                    <a class="d-block u-block-hover__additional--jump g-mb-10" href="#">
                      <img class="w-100" src="{{ root }}assets/img-temp/425x250/img1.png" alt="Image Description">
                    </a>
                    <!-- End Article Image -->

                    <!-- Article Info -->
                    <em class="d-block g-color-gray-dark-v5 g-font-style-normal g-font-size-12 g-mb-0">2013</em>
                    <div class="js-rating g-color-primary g-font-size-11 g-mb-10" data-rating="3.5" data-spacing="5"></div>
                    <h3 class="h5">
                      <a class="g-color-main g-color-primary--hover g-text-underline--none--hover" href="#">Radio Music Society</a>
                    </h3>
                    <!-- End Article Info -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="js-slide g-px-15 g-pt-20">
                  <!-- Article -->
                  <article class="u-block-hover u-block-hover--uncroped text-center">
                    <!-- Article Image -->
                    <a class="d-block u-block-hover__additional--jump g-mb-10" href="#">
                      <img class="w-100" src="{{ root }}assets/img-temp/425x250/img10.png" alt="Image Description">
                    </a>
                    <!-- End Article Image -->

                    <!-- Article Info -->
                    <em class="d-block g-color-gray-dark-v5 g-font-style-normal g-font-size-12 g-mb-0">2014</em>
                    <div class="js-rating g-color-primary g-font-size-11 g-mb-10" data-rating="5" data-spacing="5"></div>
                    <h3 class="h5">
                      <a class="g-color-main g-color-primary--hover g-text-underline--none--hover" href="#">Girls</a>
                    </h3>
                    <!-- End Article Info -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="js-slide g-px-15 g-pt-20">
                  <!-- Article -->
                  <article class="u-block-hover u-block-hover--uncroped text-center">
                    <!-- Article Image -->
                    <a class="d-block u-block-hover__additional--jump g-mb-10" href="#">
                      <img class="w-100" src="{{ root }}assets/img-temp/425x250/img6.png" alt="Image Description">
                    </a>
                    <!-- End Article Image -->

                    <!-- Article Info -->
                    <em class="d-block g-color-gray-dark-v5 g-font-style-normal g-font-size-12 g-mb-0">2015</em>
                    <div class="js-rating g-color-primary g-font-size-11 g-mb-10" data-rating="5" data-spacing="5"></div>
                    <h3 class="h5">
                      <a class="g-color-main g-color-primary--hover g-text-underline--none--hover" href="#">Break Throuch The Silence</a>
                    </h3>
                    <!-- End Article Info -->
                  </article>
                  <!-- End Article -->
                </div>
              </div>
            </div>
            <!-- End Products Block -->
          </div>

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

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

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

            <!-- JS Plugins Init. -->
            <script type="text/plain">
              $(document).ready(function () {
                // initialization of rating
                $.HSCore.components.HSRating.init($('.js-rating'), {
                  spacing: 4
                });

                // initialization of carousel
                $.HSCore.components.HSCarousel.init('.js-carousel');
              });
            </script>
          </div>
        </div>

        {% set contentTarget = "#shortcode05" %}
        {% set modalID = "#modalMarkup" %}
        {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
      </section>
      <!-- End Product Blocks v5 -->

      <!-- Product Blocks v6 -->
      <section class="g-bg-secondary g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Products
              <span class="g-color-primary g-ml-5">#06</span>
            </h2>
          </div>

          <div id="shortcode06">
            <div class="shortcode-html">
              <!-- Products Block -->
              <div class="g-mx-minus-15">
                <div class="js-carousel"
                     data-arrows-classes="u-arrow-v1 g-absolute-centered--y g-width-50 g-height-50 g-font-size-default g-color-gray-dark-v5 g-bg-white g-color-white--hover g-bg-primary--hover rounded"
                     data-arrow-left-classes="fa fa-angle-left g-left-minus-10"
                     data-arrow-right-classes="fa fa-angle-right g-right-minus-10"
                     data-slides-show="3"
                     data-responsive='[{
                       "breakpoint": 992,
                       "settings": {
                         "slidesToShow": 3
                       }
                     }, {
                       "breakpoint": 768,
                       "settings": {
                         "slidesToShow": 2
                       }
                     }, {
                       "breakpoint": 554,
                       "settings": {
                         "slidesToShow": 1
                       }
                     }]'>
                  <div class="js-slide g-px-20">
                    <!-- Article -->
                    <article class="u-shadow-v19 g-bg-white">
                      <!-- Article Image -->
                      <img class="w-100" src="{{ root }}assets/img-temp/400x270/img1.jpg" alt="Image Description">
                      <!-- End Article Image -->

                      <!-- Article Content -->
                      <div class="g-rounded-bottom-3 g-pa-30">
                        <em class="d-block g-color-primary g-font-style-normal g-font-size-11 text-uppercase g-mb-5">Template</em>
                        <h3 class="h6 g-color-black g-font-weight-700 text-uppercase g-mb-20">Unify template</h3>
                        <p class="g-mb-20">Understanding who you are and what you want is our strategy for your health.</p>
                        <span class="g-color-primary g-font-weight-700 g-font-size-16">$12.99</span>
                      </div>
                      <!-- End Article Content -->
                    </article>
                    <!-- End Article -->
                  </div>

                  <div class="js-slide g-px-20">
                    <!-- Article -->
                    <article class="u-shadow-v19 g-bg-white">
                      <!-- Article Image -->
                      <img class="w-100" src="{{ root }}assets/img-temp/400x270/img2.jpg" alt="Image Description">
                      <!-- End Article Image -->

                      <!-- Article Content -->
                      <div class="g-rounded-bottom-3 g-pa-30">
                        <em class="d-block g-color-primary g-font-style-normal g-font-size-11 text-uppercase g-mb-5">Template</em>
                        <h3 class="h6 g-color-black g-font-weight-700 text-uppercase g-mb-20">Unify template</h3>
                        <p class="g-mb-20">Understanding who you are and what you want is our strategy for your health.</p>
                        <span class="g-color-primary g-font-weight-700 g-font-size-16">$12.99</span>
                      </div>
                      <!-- End Article Content -->
                    </article>
                    <!-- End Article -->
                  </div>

                  <div class="js-slide g-px-20">
                    <!-- Article -->
                    <article class="u-shadow-v19 g-bg-white">
                      <!-- Article Image -->
                      <img class="w-100" src="{{ root }}assets/img-temp/400x270/img3.jpg" alt="Image Description">
                      <!-- End Article Image -->

                      <!-- Article Content -->
                      <div class="g-rounded-bottom-3 g-pa-30">
                        <em class="d-block g-color-primary g-font-style-normal g-font-size-11 text-uppercase g-mb-5">Template</em>
                        <h3 class="h6 g-color-black g-font-weight-700 text-uppercase g-mb-20">Unify template</h3>
                        <p class="g-mb-20">Understanding who you are and what you want is our strategy for your health.</p>
                        <span class="g-color-primary g-font-weight-700 g-font-size-16">$12.99</span>
                      </div>
                      <!-- End Article Content -->
                    </article>
                    <!-- End Article -->
                  </div>

                  <div class="js-slide g-px-20">
                    <!-- Article -->
                    <article class="u-shadow-v19 g-bg-white">
                      <!-- Article Image -->
                      <img class="w-100" src="{{ root }}assets/img-temp/400x270/img4.jpg" alt="Image Description">
                      <!-- End Article Image -->

                      <!-- Article Content -->
                      <div class="g-rounded-bottom-3 g-pa-30">
                        <em class="d-block g-color-primary g-font-style-normal g-font-size-11 text-uppercase g-mb-5">Template</em>
                        <h3 class="h6 g-color-black g-font-weight-700 text-uppercase g-mb-20">Unify template</h3>
                        <p class="g-mb-20">Understanding who you are and what you want is our strategy for your health.</p>
                        <span class="g-color-primary g-font-weight-700 g-font-size-16">$12.99</span>
                      </div>
                      <!-- End Article Content -->
                    </article>
                    <!-- End Article -->
                  </div>

                  <div class="js-slide g-px-20">
                    <!-- Article -->
                    <article class="u-shadow-v19 g-bg-white">
                      <!-- Article Image -->
                      <img class="w-100" src="{{ root }}assets/img-temp/400x270/img1.jpg" alt="Image Description">
                      <!-- End Article Image -->

                      <!-- Article Content -->
                      <div class="g-rounded-bottom-3 g-pa-30">
                        <em class="d-block g-color-primary g-font-style-normal g-font-size-11 text-uppercase g-mb-5">Template</em>
                        <h3 class="h6 g-color-black g-font-weight-700 text-uppercase g-mb-20">Unify template</h3>
                        <p class="g-mb-20">Understanding who you are and what you want is our strategy for your health.</p>
                        <span class="g-color-primary g-font-weight-700 g-font-size-16">$12.99</span>
                      </div>
                      <!-- End Article Content -->
                    </article>
                    <!-- End Article -->
                  </div>

                  <div class="js-slide g-px-20">
                    <!-- Article -->
                    <article class="u-shadow-v19 g-bg-white">
                      <!-- Article Image -->
                      <img class="w-100" src="{{ root }}assets/img-temp/400x270/img2.jpg" alt="Image Description">
                      <!-- End Article Image -->

                      <!-- Article Content -->
                      <div class="g-rounded-bottom-3 g-pa-30">
                        <em class="d-block g-color-primary g-font-style-normal g-font-size-11 text-uppercase g-mb-5">Template</em>
                        <h3 class="h6 g-color-black g-font-weight-700 text-uppercase g-mb-20">Unify template</h3>
                        <p class="g-mb-20">Understanding who you are and what you want is our strategy for your health.</p>
                        <span class="g-color-primary g-font-weight-700 g-font-size-16">$12.99</span>
                      </div>
                      <!-- End Article Content -->
                    </article>
                    <!-- End Article -->
                  </div>

                  <div class="js-slide g-px-20">
                    <!-- Article -->
                    <article class="u-shadow-v19 g-bg-white">
                      <!-- Article Image -->
                      <img class="w-100" src="{{ root }}assets/img-temp/400x270/img3.jpg" alt="Image Description">
                      <!-- End Article Image -->

                      <!-- Article Content -->
                      <div class="g-rounded-bottom-3 g-pa-30">
                        <em class="d-block g-color-primary g-font-style-normal g-font-size-11 text-uppercase g-mb-5">Template</em>
                        <h3 class="h6 g-color-black g-font-weight-700 text-uppercase g-mb-20">Unify template</h3>
                        <p class="g-mb-20">Understanding who you are and what you want is our strategy for your health.</p>
                        <span class="g-color-primary g-font-weight-700 g-font-size-16">$12.99</span>
                      </div>
                      <!-- End Article Content -->
                    </article>
                    <!-- End Article -->
                  </div>

                  <div class="js-slide g-px-20">
                    <!-- Article -->
                    <article class="u-shadow-v19 g-bg-white">
                      <!-- Article Image -->
                      <img class="w-100" src="{{ root }}assets/img-temp/400x270/img4.jpg" alt="Image Description">
                      <!-- End Article Image -->

                      <!-- Article Content -->
                      <div class="g-rounded-bottom-3 g-pa-30">
                        <em class="d-block g-color-primary g-font-style-normal g-font-size-11 text-uppercase g-mb-5">Template</em>
                        <h3 class="h6 g-color-black g-font-weight-700 text-uppercase g-mb-25">Unify template</h3>
                        <p class="g-mb-20">Curabitur eget tortor sed urna faucibus iaculis id et nulla. Aliquam erat volutpat.</p>
                        <span class="g-color-primary g-font-weight-700 g-font-size-16">$12.99</span>
                      </div>
                      <!-- End Article Content -->
                    </article>
                    <!-- End Article -->
                  </div>
                </div>
              </div>
              <!-- End Products Block -->
            </div>

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

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

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

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).ready(function () {
                  // initialization of carousel
                  $.HSCore.components.HSCarousel.init('.js-carousel');
                });
              </script>
            </div>
          </div>

          {% set contentTarget = "#shortcode06" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Product Blocks v6 -->

      <!-- Product Blocks v7 -->
      <section class="container g-py-100">
        <div class="text-center g-mb-50">
          <h2 class="h4">Products
            <span class="g-color-primary g-ml-5">#07</span>
          </h2>
        </div>

        <div id="shortcode07">
          <div class="shortcode-html">
            <!-- Products Block -->
            <div class="js-carousel"
                 data-vertical="true"
                 data-pagi-classes="u-carousel-indicators-v28 text-center">
              <div class="js-slide">
                <!-- Article -->
                <article class="row text-center">
                  <div class="col-lg-6 g-mb-50">
                    <!-- Article Info -->
                    <span class="d-block g-color-gray-dark-v5 g-font-weight-700 g-font-size-12 text-uppercase g-mb-20">By Htmlstream</span>
                    <h3 class="h1 g-color-black g-font-weight-700 text-uppercase g-line-height-1_2 g-mb-35">Vivo Pencil</h3>
                    <i class="d-block fa fa-circle g-mb-30"></i>
                    <div class="g-px-70--md g-mb-20">
                      <p>Understanding who you are and what you want is our strategy for your health.</p>
                    </div>
                    <span class="d-block g-font-weight-700 g-font-size-26 g-mb-20">$14.00</span>
                    <button type="button" class="btn btn-md u-btn-primary g-font-weight-600 g-font-size-13 text-uppercase">Book Now</button>
                    <!-- End Article Info -->
                  </div>

                  <div class="col-lg-6 g-mb-50">
                    <!-- Article Image -->
                    <img class="img-fluid" src="{{ root }}assets/img-temp/525x300/img1.png" alt="Image Description">
                    <!-- End Article Image -->
                  </div>
                </article>
                <!-- End Article -->
              </div>

              <div class="js-slide">
                <!-- Article -->
                <article class="row text-center">
                  <div class="col-lg-6 g-mb-50">
                    <!-- Article Info -->
                    <span class="d-block g-color-gray-dark-v5 g-font-weight-700 g-font-size-12 text-uppercase g-mb-20">By Htmlstream</span>
                    <h3 class="h1 g-color-black g-font-weight-700 text-uppercase g-line-height-1_2 g-mb-35">Leather Gloves</h3>
                    <i class="d-block fa fa-circle g-mb-30"></i>
                    <div class="g-px-70--md g-mb-20">
                      <p>Understanding who you are and what you want is our strategy for your health.</p>
                    </div>
                    <span class="d-block g-font-weight-700 g-font-size-26 g-mb-20">$14.00</span>
                    <button type="button" class="btn btn-md u-btn-primary g-font-weight-600 g-font-size-13 text-uppercase">Book Now</button>
                    <!-- End Article Info -->
                  </div>

                  <div class="col-lg-6 g-mb-50">
                    <!-- Article Image -->
                    <img class="img-fluid mx-auto g-width-60x" src="{{ root }}assets/img-temp/725x725/img1.png" alt="Image Description">
                    <!-- End Article Image -->
                  </div>
                </article>
                <!-- End Article -->
              </div>
            </div>
            <!-- End Products Block -->
          </div>

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

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

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

            <!-- JS Plugins Init. -->
            <script type="text/plain">
              $(document).ready(function () {
                // initialization of carousel
                $.HSCore.components.HSCarousel.init('.js-carousel');
              });
            </script>
          </div>
        </div>

        {% set contentTarget = "#shortcode07" %}
        {% set modalID = "#modalMarkup" %}
        {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
      </section>
      <!-- End Product Blocks v7 -->

      <!-- Product Blocks v8 -->
      <section class="g-bg-secondary g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Products
              <span class="g-color-primary g-ml-5">#08</span>
            </h2>
          </div>

          <div id="shortcode08">
            <div class="shortcode-html">
              <!-- Products Block -->
              <div class="g-mx-minus-15">
                <div class="js-carousel g-pb-90"
                     data-slides-show="3"
                     data-slides-scroll="3"
                     data-arrows-classes="u-arrow-v1 g-pos-abs g-bottom-0 g-width-45 g-height-45 g-font-size-default g-color-gray-dark-v5 g-bg-white g-color-white--hover g-bg-primary--hover rounded"
                     data-arrow-left-classes="fa fa-angle-left g-left-35x--lg g-left-15"
                     data-arrow-right-classes="fa fa-angle-right g-right-35x--lg g-right-15"
                     data-pagi-classes="u-carousel-indicators-v1 g-absolute-centered--x g-bottom-20 text-center"
                     data-responsive='[{
                       "breakpoint": 992,
                       "settings": {
                         "slidesToShow": 3
                       }
                     }, {
                       "breakpoint": 768,
                       "settings": {
                         "slidesToShow": 2
                       }
                     }, {
                       "breakpoint": 554,
                       "settings": {
                         "slidesToShow": 1
                       }
                     }]'>
                  <div class="js-slide g-px-15">
                    <!-- Article -->
                    <article class="info-v5-3 g-parent g-pos-rel">
                      <!-- Article Image -->
                      <div class="g-bg-cover g-bg-black-opacity-0_4--after">
                        <img class="w-100" src="{{ root }}assets/img-temp/500x650/img1.jpg" alt="Image Description">
                      </div>
                      <!-- End Article Image -->

                      <a class="u-ribbon-v1 g-color-main g-bg-white g-color-white--hover g-bg-primary--hover g-font-weight-700 g-font-size-11 text-uppercase g-top-30 g-left-30 g-text-underline--none--hover rounded g-transition-0_5" href="#">Photography</a>

                      <!-- Article Content -->
                      <div class="info-v5-3__info g-pos-rel g-pa-30 g-mt-minus-80 g-transition-0_5">
                        <!-- Article Header -->
                        <header class="g-pos-rel g-color-white g-mb-40">
                          <span class="info-v5-3__info-price g-font-size-16 g-transition-0_5">
                            From
                            <span class="g-font-weight-700">$150</span>
                            <span class="g-font-size-12">Per Course</span>
                          </span>
                          <h3 class="info-v5-3__info-title g-color-white g-font-size-16 g-transition-0_5">
                            <a class="g-color-white g-color-white--hover" href="#">Photography For Travelers</a>
                          </h3>
                        </header>
                        <!-- End Article Header -->

                        <p class="g-mb-25">This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.</p>

                        <!-- Article Info -->
                        <ul class="list-unstyled info-v5-3__info-list g-font-weight-700 g-color-black g-color-white--parent-hover g-font-size-12 text-uppercase g-mb-0">
                          <li class="g-mb-20">
                            <i class="g-color-primary g-color-white--parent-hover g-font-size-18 g-mr-10 fa fa-calendar"></i>
                            Duration: 6 months
                          </li>
                          <li class="g-mb-20">
                            <i class="g-color-primary g-color-white--parent-hover g-font-size-18 g-mr-10 fa fa-certificate"></i>
                            Degree level: Advanced
                          </li>
                        </ul>
                        <!-- End Article Info -->
                      </div>
                      <!-- End Article Content -->
                    </article>
                    <!-- End Article -->
                  </div>

                  <div class="js-slide g-px-15">
                    <!-- Article -->
                    <article class="info-v5-3 g-parent g-pos-rel">
                      <!-- Article Image -->
                      <div class="g-bg-cover g-bg-black-opacity-0_4--after">
                        <img class="w-100" src="{{ root }}assets/img-temp/500x650/img2.jpg" alt="Image Description">
                      </div>
                      <!-- End Article Image -->

                      <a class="u-ribbon-v1 g-color-main g-bg-white g-color-white--hover g-bg-primary--hover g-font-weight-700 g-font-size-11 text-uppercase g-top-30 g-left-30 g-text-underline--none--hover rounded g-transition-0_5" href="#">Dance</a>

                      <!-- Article Content -->
                      <div class="info-v5-3__info g-pos-rel g-pa-30 g-mt-minus-80 g-transition-0_5">
                        <!-- Article Header -->
                        <header class="g-pos-rel g-color-white g-mb-40">
                          <span class="info-v5-3__info-price g-font-size-16 g-transition-0_5">
                            From
                            <span class="g-font-weight-700">$135</span>
                            <span class="g-font-size-12">Per Course</span>
                          </span>
                          <h3 class="info-v5-3__info-title g-color-white g-font-size-16 g-transition-0_5">
                            <a class="g-color-white g-color-white--hover" href="#">Ballet Lessons</a>
                          </h3>
                        </header>
                        <!-- End Article Header -->

                        <p class="g-mb-25">This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.</p>

                        <!-- Article Info -->
                        <ul class="list-unstyled info-v5-3__info-list g-font-weight-700 g-color-black g-color-white--parent-hover g-font-size-12 text-uppercase g-mb-0">
                          <li class="g-mb-20">
                            <i class="g-color-primary g-color-white--parent-hover g-font-size-18 g-mr-10 fa fa-calendar"></i>
                            Duration: 4 months
                          </li>
                          <li class="g-mb-20">
                            <i class="g-color-primary g-color-white--parent-hover g-font-size-18 g-mr-10 fa fa-certificate"></i>
                            Degree level: Intermediate
                          </li>
                        </ul>
                        <!-- End Article Info -->
                      </div>
                      <!-- End Article Content -->
                    </article>
                    <!-- End Article -->
                  </div>

                  <div class="js-slide g-px-15">
                    <!-- Article -->
                    <article class="info-v5-3 g-parent g-pos-rel">
                      <!-- Article Image -->
                      <div class="g-bg-cover g-bg-black-opacity-0_4--after">
                        <img class="w-100" src="{{ root }}assets/img-temp/500x650/img3.jpg" alt="Image Description">
                      </div>
                      <!-- End Article Image -->

                      <a class="u-ribbon-v1 g-color-main g-bg-white g-color-white--hover g-bg-primary--hover g-font-weight-700 g-font-size-11 text-uppercase g-top-30 g-left-30 g-text-underline--none--hover rounded g-transition-0_5" href="#">Art</a>

                      <!-- Article Content -->
                      <div class="info-v5-3__info g-pos-rel g-pa-30 g-mt-minus-80 g-transition-0_5">
                        <!-- Article Header -->
                        <header class="g-pos-rel g-color-white g-mb-40">
                          <span class="info-v5-3__info-price g-font-size-16 g-transition-0_5">
                            From
                            <span class="g-font-weight-700">$200</span>
                            <span class="g-font-size-12">Per Course</span>
                          </span>
                          <h3 class="info-v5-3__info-title g-color-white g-font-size-16 g-transition-0_5">
                            <a class="g-color-white g-color-white--hover" href="#">Quality Street Art</a>
                          </h3>
                        </header>
                        <!-- End Article Header -->

                        <p class="g-mb-25">This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.</p>

                        <!-- Article Info -->
                        <ul class="list-unstyled info-v5-3__info-list g-font-weight-700 g-color-black g-color-white--parent-hover g-font-size-12 text-uppercase g-mb-0">
                          <li class="g-mb-20">
                            <i class="g-color-primary g-color-white--parent-hover g-font-size-18 g-mr-10 fa fa-calendar"></i>
                            Duration: 6 months
                          </li>
                          <li class="g-mb-20">
                            <i class="g-color-primary g-color-white--parent-hover g-font-size-18 g-mr-10 fa fa-certificate"></i>
                            Degree level: Advanced
                          </li>
                        </ul>
                        <!-- End Article Info -->
                      </div>
                      <!-- End Article Content -->
                    </article>
                    <!-- End Article -->
                  </div>

                  <div class="js-slide g-px-15">
                    <!-- Article -->
                    <article class="info-v5-3 g-parent g-pos-rel">
                      <!-- Article Image -->
                      <div class="g-bg-cover g-bg-black-opacity-0_4--after">
                        <img class="w-100" src="{{ root }}assets/img-temp/500x650/img4.jpg" alt="Image Description">
                      </div>
                      <!-- End Article Image -->

                      <a class="u-ribbon-v1 g-color-main g-bg-white g-color-white--hover g-bg-primary--hover g-font-weight-700 g-font-size-11 text-uppercase g-top-30 g-left-30 g-text-underline--none--hover rounded g-transition-0_5" href="#">Design</a>

                      <!-- Article Content -->
                      <div class="info-v5-3__info g-pos-rel g-pa-30 g-mt-minus-80 g-transition-0_5">
                        <!-- Article Header -->
                        <header class="g-pos-rel g-color-white g-mb-40">
                          <span class="info-v5-3__info-price g-font-size-16 g-transition-0_5">
                            From
                            <span class="g-font-weight-700">$280</span>
                            <span class="g-font-size-12">Per Course</span>
                          </span>
                          <h3 class="info-v5-3__info-title g-color-white g-font-size-16 g-transition-0_5">
                            <a class="g-color-white g-color-white--hover" href="#">Creative Photographs</a>
                          </h3>
                        </header>
                        <!-- End Article Header -->

                        <p class="g-mb-25">This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.</p>

                        <!-- Article Info -->
                        <ul class="list-unstyled info-v5-3__info-list g-font-weight-700 g-color-black g-color-white--parent-hover g-font-size-12 text-uppercase g-mb-0">
                          <li class="g-mb-20">
                            <i class="g-color-primary g-color-white--parent-hover g-font-size-18 g-mr-10 fa fa-calendar"></i>
                            Duration: 7 months
                          </li>
                          <li class="g-mb-20">
                            <i class="g-color-primary g-color-white--parent-hover g-font-size-18 g-mr-10 fa fa-certificate"></i>
                            Degree level: Intermediate
                          </li>
                        </ul>
                        <!-- End Article Info -->
                      </div>
                      <!-- End Article Content -->
                    </article>
                    <!-- End Article -->
                  </div>

                  <div class="js-slide g-px-15">
                    <!-- Article -->
                    <article class="info-v5-3 g-parent g-pos-rel">
                      <!-- Article Image -->
                      <div class="g-bg-cover g-bg-black-opacity-0_4--after">
                        <img class="w-100" src="{{ root }}assets/img-temp/500x650/img5.jpg" alt="Image Description">
                      </div>
                      <!-- End Article Image -->

                      <a class="u-ribbon-v1 g-color-main g-bg-white g-color-white--hover g-bg-primary--hover g-font-weight-700 g-font-size-11 text-uppercase g-top-30 g-left-30 g-text-underline--none--hover rounded g-transition-0_5" href="#">Photography</a>

                      <!-- Article Content -->
                      <div class="info-v5-3__info g-pos-rel g-pa-30 g-mt-minus-80 g-transition-0_5">
                        <!-- Article Header -->
                        <header class="g-pos-rel g-color-white g-mb-40">
                          <span class="info-v5-3__info-price g-font-size-16 g-transition-0_5">
                            From
                            <span class="g-font-weight-700">$150</span>
                            <span class="g-font-size-12">Per Course</span>
                          </span>
                          <h3 class="info-v5-3__info-title g-color-white g-font-size-16 g-transition-0_5">
                            <a class="g-color-white g-color-white--hover" href="#">Photography For Travelers</a>
                          </h3>
                        </header>
                        <!-- End Article Header -->

                        <p class="g-mb-25">This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.</p>

                        <!-- Article Info -->
                        <ul class="list-unstyled info-v5-3__info-list g-font-weight-700 g-color-black g-color-white--parent-hover g-font-size-12 text-uppercase g-mb-0">
                          <li class="g-mb-20">
                            <i class="g-color-primary g-color-white--parent-hover g-font-size-18 g-mr-10 fa fa-calendar"></i>
                            Duration: 6 months
                          </li>
                          <li class="g-mb-20">
                            <i class="g-color-primary g-color-white--parent-hover g-font-size-18 g-mr-10 fa fa-certificate"></i>
                            Degree level: Advanced
                          </li>
                        </ul>
                        <!-- End Article Info -->
                      </div>
                      <!-- End Article Content -->
                    </article>
                    <!-- End Article -->
                  </div>

                  <div class="js-slide g-px-15">
                    <!-- Article -->
                    <article class="info-v5-3 g-parent g-pos-rel">
                      <!-- Article Image -->
                      <div class="g-bg-cover g-bg-black-opacity-0_4--after">
                        <img class="w-100" src="{{ root }}assets/img-temp/500x650/img6.jpg" alt="Image Description">
                      </div>
                      <!-- End Article Image -->

                      <a class="u-ribbon-v1 g-color-main g-bg-white g-color-white--hover g-bg-primary--hover g-font-weight-700 g-font-size-11 text-uppercase g-top-30 g-left-30 g-text-underline--none--hover rounded g-transition-0_5" href="#">Design</a>

                      <!-- Article Content -->
                      <div class="info-v5-3__info g-pos-rel g-pa-30 g-mt-minus-80 g-transition-0_5">
                        <!-- Article Header -->
                        <header class="g-pos-rel g-color-white g-mb-40">
                          <span class="info-v5-3__info-price g-font-size-16 g-transition-0_5">
                            From
                            <span class="g-font-weight-700">$280</span>
                            <span class="g-font-size-12">Per Course</span>
                          </span>
                          <h3 class="info-v5-3__info-title g-color-white g-font-size-16 g-transition-0_5">
                            <a class="g-color-white g-color-white--hover" href="#">Creative Photographs</a>
                          </h3>
                        </header>
                        <!-- End Article Header -->

                        <p class="g-mb-25">This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.</p>

                        <!-- Article Info -->
                        <ul class="list-unstyled info-v5-3__info-list g-font-weight-700 g-color-black g-color-white--parent-hover g-font-size-12 text-uppercase g-mb-0">
                          <li class="g-mb-20">
                            <i class="g-color-primary g-color-white--parent-hover g-font-size-18 g-mr-10 fa fa-calendar"></i>
                            Duration: 7 months
                          </li>
                          <li class="g-mb-20">
                            <i class="g-color-primary g-color-white--parent-hover g-font-size-18 g-mr-10 fa fa-certificate"></i>
                            Degree level: Intermediate
                          </li>
                        </ul>
                        <!-- End Article Info -->
                      </div>
                      <!-- End Article Content -->
                    </article>
                    <!-- End Article -->
                  </div>
                </div>
              </div>
              <!-- End Products Block -->
            </div>

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

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

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

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).ready(function () {
                  // initialization of carousel
                  $.HSCore.components.HSCarousel.init('.js-carousel');
                });
              </script>
            </div>
          </div>

          {% set contentTarget = "#shortcode08" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Product Blocks v8 -->

      <!-- Product Blocks v9 -->
      <section class="container g-py-100">
        <div class="text-center g-mb-50">
          <h2 class="h4">Products
            <span class="g-color-primary g-ml-5">#09</span>
          </h2>
        </div>

        <div id="shortcode09">
          <div class="shortcode-html">
            <!-- Product Block -->
            <div class="g-mx-minus-15">
              <div class="js-carousel g-pb-90"
                   data-slides-show="4"
                   data-slides-scroll="4"
                   data-arrows-classes="u-arrow-v1 g-pos-abs g-bottom-0 g-width-45 g-height-45 g-font-size-default g-color-gray-dark-v5 g-bg-gray-light-v5 g-color-white--hover g-bg-primary--hover rounded"
                   data-arrow-left-classes="fa fa-angle-left g-left-35x--lg g-left-15"
                   data-arrow-right-classes="fa fa-angle-right g-right-35x--lg g-right-15"
                   data-pagi-classes="u-carousel-indicators-v1 g-absolute-centered--x g-bottom-20 text-center"
                   data-responsive='[{
                     "breakpoint": 1350,
                     "settings": {
                       "slidesToShow": 5
                     }
                   }, {
                     "breakpoint": 1200,
                     "settings": {
                       "slidesToShow": 4
                     }
                   }, {
                     "breakpoint": 992,
                     "settings": {
                       "slidesToShow": 3
                     }
                   }, {
                     "breakpoint": 670,
                     "settings": {
                       "slidesToShow": 2
                     }
                   }, {
                     "breakpoint": 500,
                     "settings": {
                       "slidesToShow": 1
                     }
                   }]'>
                <div class="js-slide g-px-15">
                  <!-- Article -->
                  <article class="g-color-gray-dark-v4">
                    <!-- Article Image -->
                    <a class="d-block text-center g-mb-10" href="#">
                      <img class="w-100" src="{{ root }}assets/img-temp/425x250/img4.png" alt="Image Description">
                    </a>
                    <!-- End Article Image -->

                    <!-- Article Info -->
                    <h3 class="h6 g-font-weight-600 text-uppercase g-mb-10">
                      <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#">Double-breasted</a>
                    </h3>
                    <div class="d-flex justify-content-between">
                      <span class="g-color-black g-font-size-16">$95.00</span>
                      <div class="js-rating g-color-primary g-font-size-11" data-rating="3" data-spacing="2"></div>
                    </div>
                    <!-- End Article Info -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="js-slide g-px-15">
                  <!-- Article -->
                  <article>
                    <!-- Article Image -->
                    <a href="#" class="d-block g-mb-10">
                      <img class="w-100" src="{{ root }}assets/img-temp/425x250/img5.png" alt="Image Description">
                    </a>
                    <!-- End Article Image -->

                    <!-- Article Info -->
                    <h3 class="h6 g-font-weight-600 text-uppercase g-mb-10">
                      <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#">Double-breasted</a>
                    </h3>
                    <div class="d-flex justify-content-between">
                      <div class="d-block">
                        <span class="g-color-black g-font-size-16">$60.00</span>
                        <s class="d-block g-color-red g-font-size-13">$95.00</s>
                      </div>
                      <div class="js-rating g-color-primary g-font-size-11" data-rating="3" data-spacing="2"></div>
                    </div>
                    <!-- End Article Info -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="js-slide g-px-15">
                  <!-- Article -->
                  <article class="g-color-gray-dark-v4">
                    <!-- Article Image -->
                    <a class="d-block text-center g-mb-10" href="#">
                      <img class="w-100" src="{{ root }}assets/img-temp/425x250/img6.png" alt="Image Description">
                    </a>
                    <!-- End Article Image -->

                    <!-- Article Info -->
                    <h3 class="h6 g-font-weight-600 text-uppercase g-mb-10">
                      <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#">Double-breasted</a>
                    </h3>
                    <div class="d-flex justify-content-between">
                      <span class="g-color-black g-font-size-16">$95.00</span>
                      <div class="js-rating g-color-primary g-font-size-11" data-rating="3" data-spacing="2"></div>
                    </div>
                    <!-- End Article Info -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="js-slide g-px-15">
                  <!-- Article -->
                  <article class="g-color-gray-dark-v4">
                    <!-- Article Image -->
                    <a class="d-block text-center g-mb-10" href="#">
                      <img class="w-100" src="{{ root }}assets/img-temp/425x250/img7.png" alt="Image Description">
                    </a>
                    <!-- End Article Image -->

                    <!-- Article Info -->
                    <h3 class="h6 g-font-weight-600 text-uppercase g-mb-10">
                      <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#">Double-breasted</a>
                    </h3>
                    <div class="d-flex justify-content-between">
                      <span class="g-color-black g-font-size-16">$95.00</span>
                      <div class="js-rating g-color-primary g-font-size-11" data-rating="3" data-spacing="2"></div>
                    </div>
                    <!-- End Article Info -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="js-slide g-px-15">
                  <!-- Article -->
                  <article class="g-color-gray-dark-v4">
                    <!-- Article Image -->
                    <a class="d-block text-center g-mb-10" href="#">
                      <img class="w-100" src="{{ root }}assets/img-temp/425x250/img10.png" alt="Image Description">
                    </a>
                    <!-- End Article Image -->

                    <!-- Article Info -->
                    <h3 class="h6 g-font-weight-600 text-uppercase g-mb-10">
                      <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#">Double-breasted</a>
                    </h3>
                    <div class="d-flex justify-content-between">
                      <span class="g-color-black g-font-size-16">$95.00</span>
                      <div class="js-rating g-color-primary g-font-size-11" data-rating="3" data-spacing="2"></div>
                    </div>
                    <!-- End Article Info -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="js-slide g-px-15">
                  <!-- Article -->
                  <article class="g-color-gray-dark-v4">
                    <!-- Article Image -->
                    <a class="d-block text-center g-mb-10" href="#">
                      <img class="w-100" src="{{ root }}assets/img-temp/425x250/img4.png" alt="Image Description">
                    </a>
                    <!-- End Article Image -->

                    <!-- Article Info -->
                    <h3 class="h6 g-font-weight-600 text-uppercase g-mb-10">
                      <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#">Double-breasted</a>
                    </h3>
                    <div class="d-flex justify-content-between">
                      <span class="g-color-black g-font-size-16">$95.00</span>
                      <div class="js-rating g-color-primary g-font-size-11" data-rating="3" data-spacing="2"></div>
                    </div>
                    <!-- End Article Info -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="js-slide g-px-15">
                  <!-- Article -->
                  <article>
                    <!-- Article Image -->
                    <a href="#" class="d-block g-mb-10">
                      <img class="w-100" src="{{ root }}assets/img-temp/425x250/img5.png" alt="Image Description">
                    </a>
                    <!-- End Article Image -->

                    <!-- Article Info -->
                    <h3 class="h6 g-font-weight-600 text-uppercase g-mb-10">
                      <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#">Double-breasted</a>
                    </h3>
                    <div class="d-flex justify-content-between">
                      <div class="d-block">
                        <span class="g-color-black g-font-size-16">$60.00</span>
                        <s class="d-block g-color-red g-font-size-13">$95.00</s>
                      </div>
                      <div class="js-rating g-color-primary g-font-size-11" data-rating="3" data-spacing="2"></div>
                    </div>
                    <!-- End Article Info -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="js-slide g-px-15">
                  <!-- Article -->
                  <article class="g-color-gray-dark-v4">
                    <!-- Article Image -->
                    <a class="d-block text-center g-mb-10" href="#">
                      <img class="w-100" src="{{ root }}assets/img-temp/425x250/img6.png" alt="Image Description">
                    </a>
                    <!-- End Article Image -->

                    <!-- Article Info -->
                    <h3 class="h6 g-font-weight-600 text-uppercase g-mb-10">
                      <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#">Double-breasted</a>
                    </h3>
                    <div class="d-flex justify-content-between">
                      <span class="g-color-black g-font-size-16">$95.00</span>
                      <div class="js-rating g-color-primary g-font-size-11" data-rating="3" data-spacing="2"></div>
                    </div>
                    <!-- End Article Info -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="js-slide g-px-15">
                  <!-- Article -->
                  <article class="g-color-gray-dark-v4">
                    <!-- Article Image -->
                    <a class="d-block text-center g-mb-10" href="#">
                      <img class="w-100" src="{{ root }}assets/img-temp/425x250/img7.png" alt="Image Description">
                    </a>
                    <!-- End Article Image -->

                    <!-- Article Info -->
                    <h3 class="h6 g-font-weight-600 text-uppercase g-mb-10">
                      <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#">Double-breasted</a>
                    </h3>
                    <div class="d-flex justify-content-between">
                      <span class="g-color-black g-font-size-16">$95.00</span>
                      <div class="js-rating g-color-primary g-font-size-11" data-rating="3" data-spacing="2"></div>
                    </div>
                    <!-- End Article Info -->
                  </article>
                  <!-- End Article -->
                </div>

                <div class="js-slide g-px-15">
                  <!-- Article -->
                  <article class="g-color-gray-dark-v4">
                    <!-- Article Image -->
                    <a class="d-block text-center g-mb-10" href="#">
                      <img class="w-100" src="{{ root }}assets/img-temp/425x250/img11.png" alt="Image Description">
                    </a>
                    <!-- End Article Image -->

                    <!-- Article Info -->
                    <h3 class="h6 g-font-weight-600 text-uppercase g-mb-10">
                      <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#">Double-breasted</a>
                    </h3>
                    <div class="d-flex justify-content-between">
                      <span class="g-color-black g-font-size-16">$95.00</span>
                      <div class="js-rating g-color-primary g-font-size-11" data-rating="3" data-spacing="2"></div>
                    </div>
                    <!-- End Article Info -->
                  </article>
                  <!-- End Article -->
                </div>
              </div>
            </div>
            <!-- End Product Block -->
          </div>

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

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

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

            <!-- JS Plugins Init. -->
            <script type="text/plain">
              $(document).ready(function () {
                // initialization of rating
                $.HSCore.components.HSRating.init($('.js-rating'), {
                  spacing: 4
                });

                // initialization of carousel
                $.HSCore.components.HSCarousel.init('.js-carousel');
              });
            </script>
          </div>
        </div>

        {% set contentTarget = "#shortcode09" %}
        {% set modalID = "#modalMarkup" %}
        {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
      </section>
      <!-- End Product Blocks v9 -->

      <!-- Product Blocks v10 -->
      <section class="g-bg-secondary g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Products
              <span class="g-color-primary g-ml-5">#10</span>
            </h2>
          </div>

          <div id="shortcode10">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-lg-6">
                  <div class="g-flex-middle h-100 g-bg-black">
                    <div class="g-flex-middle-item">
                      <!-- Products Carousel -->
                      <div class="js-carousel"
                           data-infinite="true"
                           data-fade="true"
                           data-arrows-classes="u-arrow-v1 g-pos-abs g-left-75 g-bottom-30 g-width-45 g-height-45 g-font-size-default g-color-gray-dark-v5 g-bg-white g-color-white--hover g-bg-primary--hover rounded"
                           data-arrow-left-classes="fa fa-angle-left g-ml-minus-45"
                           data-arrow-right-classes="fa fa-angle-right g-ml-5">
                        <!-- Article -->
                        <article class="g-bg-cover g-bg-black-opacity-0_3--after">
                          <!-- Article Image -->
                          <img class="w-100" src="{{ root }}assets/img-temp/500x650/img5.jpg" alt="Image Description">
                          <!-- End Article Image -->

                          <!-- Article Content -->
                          <div class="w-100 g-color-white-opacity-0_8 g-pos-abs g-left-0 g-bottom-0 g-z-index-1 g-px-30 g-pb-100--sm g-pb-70">
                            <span class="d-block g-font-weight-700 g-font-size-20 g-color-primary">$19.50</span>
                            <h3 class="h3 g-font-weight-700 text-uppercase g-color-white">Unify template</h3>
                            <p>Understanding who you are and what you want is our strategy for your health.</p>
                          </div>
                          <!-- End Article Content -->
                        </article>
                        <!-- End Article -->

                        <!-- Article -->
                        <article class="g-bg-cover g-bg-black-opacity-0_3--after">
                          <!-- Article Image -->
                          <img class="w-100" src="{{ root }}assets/img-temp/500x650/img2.jpg" alt="Image Description">
                          <!-- End Article Image -->

                          <!-- Article Content -->
                          <div class="w-100 g-color-white-opacity-0_8 g-pos-abs g-left-0 g-bottom-0 g-z-index-1 g-px-30 g-pb-100--sm g-pb-70">
                            <span class="d-block g-font-weight-700 g-font-size-20 g-color-primary">$10.30</span>
                            <h3 class="h3 g-font-weight-700 text-uppercase g-color-white">Template with vegetables</h3>
                            <p>Understanding who you are and what you want is our strategy for your health.</p>
                          </div>
                          <!-- End Article Content -->
                        </article>
                        <!-- End Article -->
                      </div>
                      <!-- End Products Carousel -->
                    </div>
                  </div>
                </div>

                <div class="col-lg-6">
                  <div class="g-flex-middle h-100 g-bg-black">
                    <div class="g-flex-middle-item">
                      <!-- Products Carousel -->
                      <div class="js-carousel"
                           data-infinite="true"
                           data-fade="true"
                           data-arrows-classes="u-arrow-v1 g-pos-abs g-left-75 g-bottom-30 g-width-45 g-height-45 g-font-size-default g-color-gray-dark-v5 g-bg-white g-color-white--hover g-bg-primary--hover rounded"
                           data-arrow-left-classes="fa fa-angle-left g-ml-minus-45"
                           data-arrow-right-classes="fa fa-angle-right g-ml-5">
                        <!-- Article -->
                        <article class="g-bg-cover g-bg-black-opacity-0_3--after">
                          <!-- Article Image -->
                          <img class="w-100" src="{{ root }}assets/img-temp/500x650/img10.jpg" alt="Image Description">
                          <!-- End Article Image -->

                          <!-- Article Content -->
                          <div class="w-100 g-color-white-opacity-0_8 g-pos-abs g-left-0 g-bottom-0 g-z-index-1 g-px-30 g-pb-100--sm g-pb-70">
                            <span class="d-block g-font-weight-700 g-font-size-20 g-color-primary">$9.50</span>
                            <h3 class="h3 g-font-weight-700 text-uppercase g-color-white">Template with special sauce</h3>
                            <p>Understanding who you are and what you want is our strategy for your health.</p>
                          </div>
                          <!-- End Article Content -->
                        </article>
                        <!-- End Article -->

                        <!-- Article -->
                        <article class="g-bg-cover g-bg-black-opacity-0_3--after">
                          <!-- Article Image -->
                          <img class="w-100" src="{{ root }}assets/img-temp/500x650/img3.jpg" alt="Image Description">
                          <!-- End Article Image -->

                          <!-- Article Content -->
                          <div class="w-100 g-color-white-opacity-0_8 g-pos-abs g-left-0 g-bottom-0 g-z-index-1 g-px-30 g-pb-100--sm g-pb-70">
                            <span class="d-block g-font-weight-700 g-font-size-20 g-color-primary">$10.30</span>
                            <h3 class="h3 g-font-weight-700 text-uppercase g-color-white">Template with vegetables</h3>
                            <p>Understanding who you are and what you want is our strategy for your health.</p>
                          </div>
                          <!-- End Article Content -->
                        </article>
                        <!-- End Article -->
                      </div>
                      <!-- End Products Carousel -->
                    </div>
                  </div>
                </div>
              </div>
            </div>

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

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

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

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).ready(function () {
                  // initialization of carousel
                  $.HSCore.components.HSCarousel.init('.js-carousel');
                });
              </script>
            </div>
          </div>

          {% set contentTarget = "#shortcode10" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Product Blocks v10 -->

      <!-- Product Blocks v11 -->
      <section class="container g-py-100">
        <div class="text-center g-mb-50">
          <h2 class="h4">Products
            <span class="g-color-primary g-ml-5">#11</span>
          </h2>
        </div>

        <div id="shortcode11">
          <div class="shortcode-html">
            <!-- Article -->
            <article class="row justify-content-between g-color-gray-dark-v5">
              <div class="col-lg-5 g-mb-30">
                <!-- Carousel Images -->
                <div id="js-carousel-11" class="js-carousel g-mb-5"
                     data-infinite="true"
                     data-fade="true"
                     data-arrows-classes="u-arrow-square g-font-size-50 g-pos-abs g-top-50x g-color-white"
                     data-arrow-left-classes="fa fa-angle-left g-left-30 g-mt-minus-30"
                     data-arrow-right-classes="fa fa-angle-right g-right-30 g-mt-minus-30"
                     data-nav-for="#js-carousel-11-nav">
                  <div class="js-slide">
                    <img class="w-100" src="{{ root }}assets/img-temp/650x750/img1.jpg" alt="Image Description">
                  </div>
                  <div class="js-slide">
                    <img class="w-100" src="{{ root }}assets/img-temp/650x750/img2.jpg" alt="Image Description">
                  </div>
                  <div class="js-slide">
                    <img class="w-100" src="{{ root }}assets/img-temp/650x750/img3.jpg" alt="Image Description">
                  </div>
                </div>
                <!-- End Carousel Images -->

                <!-- Carousel Nav -->
                <div id="js-carousel-11-nav" class="js-carousel u-carousel-v11"
                     data-infinite="true"
                     data-center-mode="true"
                     data-slides-show="3"
                     data-is-thumbs="true"
                     data-nav-for="#js-carousel-11">
                  <div class="js-slide g-cursor-pointer g-transition-0_3 g-mx-3">
                    <img class="w-100" src="{{ root }}assets/img-temp/650x750/img1.jpg" alt="Image Description">
                  </div>
                  <div class="js-slide g-cursor-pointer g-transition-0_3 g-mx-3">
                    <img class="w-100" src="{{ root }}assets/img-temp/650x750/img2.jpg" alt="Image Description">
                  </div>
                  <div class="js-slide g-cursor-pointer g-transition-0_3 g-mx-3">
                    <img class="w-100" src="{{ root }}assets/img-temp/650x750/img3.jpg" alt="Image Description">
                  </div>
                  <div class="js-slide g-cursor-pointer g-transition-0_3 g-mx-3">
                    <img class="w-100" src="{{ root }}assets/img-temp/650x750/img1.jpg" alt="Image Description">
                  </div>
                  <div class="js-slide g-cursor-pointer g-transition-0_3 g-mx-3">
                    <img class="w-100" src="{{ root }}assets/img-temp/650x750/img2.jpg" alt="Image Description">
                  </div>
                  <div class="js-slide g-cursor-pointer g-transition-0_3 g-mx-3">
                    <img class="w-100" src="{{ root }}assets/img-temp/650x750/img3.jpg" alt="Image Description">
                  </div>
                </div>
                <!-- End Carousel Nav -->
              </div>

              <!-- Article Content -->
              <div class="col-lg-6 g-mb-30">
                <header class="d-flex justify-content-between">
                  <!-- Article Icons -->
                  <h2 class="h2 g-color-black mb-0">Corinna Foley</h2>
                  <ul class="list-inline g-mb-0">
                    <li class="list-inline-item">
                      <a class="u-icon-v1 u-icon-size--sm g-color-gray-light-v2 g-color-primary--hover" href="#">
                        <i class="fa fa-facebook"></i>
                      </a>
                    </li>
                    <li class="list-inline-item">
                      <a class="u-icon-v1 u-icon-size--sm g-color-gray-light-v2 g-color-primary--hover" href="#">
                        <i class="fa fa-twitter"></i>
                      </a>
                    </li>
                    <li class="list-inline-item">
                      <a class="u-icon-v1 u-icon-size--sm g-color-gray-light-v2 g-color-primary--hover" href="#">
                        <i class="fa fa-google-plus"></i>
                      </a>
                    </li>
                    <li class="list-inline-item">
                      <a class="u-icon-v1 u-icon-size--sm g-color-gray-light-v2 g-color-primary--hover" href="#">
                        <i class="fa fa-pinterest"></i>
                      </a>
                    </li>
                  </ul>
                  <!-- End Article Icons -->
                </header>

                <hr class="g-brd-gray-light-v3 g-my-15">

                <!-- Article Review -->
                <div class="g-mb-30">
                  <div class="js-rating d-inline-block g-color-primary g-font-size-13 g-mr-10" data-rating="3" data-spacing="2"></div>
                  <span class="g-color-gray-dark-v5">
                    (1)
                    <a class="g-color-gray-dark-v5" href="#">Review</a>
                    |
                    <a class="g-color-gray-dark-v5" href="#">Add Review</a>
                  </span>
                </div>
                <!-- End Article Review -->

                <p class="g-mb-25">Whether through commerce or just an experience to tell your brand's story, the time has come to start using development languages that fit your projects needs.</p>

                <!-- Article Prices -->
                <div class="g-mb-30">
                  <span class="d-inline-block align-middle g-color-primary g-font-size-25 g-mr-10">$57.00</span>
                  <s class="d-inline-block align-middle g-color-gray-light-v1 g-font-size-20 g-mr-50">$70.00</s>
                  <span class="d-inline-block align-middle g-bg-red g-color-white g-font-size-12 g-py-3 g-px-8">4 days left</span>
                </div>
                <!-- End Article Prices -->

                <!-- Article Form -->
                <form>
                  <div class="d-flex justify-content-start">
                    <!-- Article Size -->
                    <fieldset class="g-mr-60 g-mb-25">
                      <legend class="h6 g-color-main text-uppercase g-mb-15">Size:</legend>
                      <input type="radio" id="size-s" name="size" value="s" class="u-checkbox-v1--checked-color-primary u-checkbox-v1--checked-brd-primary">
                      <label for="size-s" class="d-inline-block text-center g-width-40 g-height-40 g-brd-around g-brd-2 g-brd-gray-light-v3 g-color-gray-light-v3 g-brd-primary--hover g-color-primary--hover g-font-size-18 g-transition-0_3 g-py-4 g-mr-3">S</label>
                      <input type="radio" id="size-m" name="size" value="m" class="u-checkbox-v1--checked-color-primary u-checkbox-v1--checked-brd-primary">
                      <label for="size-m" class="d-inline-block text-center g-width-40 g-height-40 g-brd-around g-brd-2 g-brd-gray-light-v3 g-color-gray-light-v3 g-brd-primary--hover g-color-primary--hover g-font-size-18 g-transition-0_3 g-py-4 g-mr-3">M</label>
                      <input type="radio" id="size-l" name="size" value="l" checked class="u-checkbox-v1--checked-color-primary u-checkbox-v1--checked-brd-primary">
                      <label for="size-l" class="d-inline-block text-center g-width-40 g-height-40 g-brd-around g-brd-2 g-brd-gray-light-v3 g-color-gray-light-v3 g-brd-primary--hover g-color-primary--hover g-font-size-18 g-transition-0_3 g-py-4 g-mr-3">L</label>
                      <input type="radio" id="size-xl" name="size" value="xl" class="u-checkbox-v1--checked-color-primary u-checkbox-v1--checked-brd-primary">
                      <label for="size-xl" class="d-inline-block text-center g-width-40 g-height-40 g-brd-around g-brd-2 g-brd-gray-light-v3 g-color-gray-light-v3 g-brd-primary--hover g-color-primary--hover g-font-size-18 g-transition-0_3 g-py-4 g-mr-3">XL</label>
                    </fieldset>
                    <!-- End Article Size -->

                    <!-- Article Color -->
                    <fieldset class="g-mb-25">
                      <legend class="h6 g-color-main text-uppercase g-mb-15">Color:</legend>
                      <input type="radio" id="color-gray" name="color" value="s" checked class="u-checkbox-v1--checked-brd-primary">
                      <label for="color-gray" class="d-inline-block text-center g-width-40 g-height-40 g-brd-gray g-brd-around g-brd-2 g-bg-secondary g-font-size-24 g-transition-0_3 g-mr-3"></label>
                      <input type="radio" id="color-red" name="color" value="m" class="u-checkbox-v1--checked-brd-primary">
                      <label for="color-red" class="d-inline-block text-center g-width-40 g-height-40 g-brd-around g-brd-2 g-bg-red g-brd-red g-font-size-24 g-transition-0_3 g-mr-3"></label>
                      <input type="radio" id="color-pink" name="color" value="l" class="u-checkbox-v1--checked-brd-primary">
                      <label for="color-pink" class="d-inline-block text-center g-width-40 g-height-40 g-brd-around g-brd-2 g-brd-pink g-bg-pink g-font-size-24 g-transition-0_3 g-mr-3"></label>
                    </fieldset>
                    <!-- End Article Color -->
                  </div>

                  <!-- Article Quantity -->
                  <fieldset class="g-mb-40">
                    <legend class="h6 g-color-main text-uppercase g-mb-15">Quantity</legend>
                    <div class="g-mx-minus-15">
                      <div class="d-inline-block g-pos-rel g-top-5 g-mx-15">
                        <div class="js-quantity input-group u-quantity-v1 g-width-150 g-height-45 g-brd-gray-light-v4 g-brd-primary--focus">
                          <div class="js-minus input-group-prepend g-font-size-15 g-width-45 g-color-gray-dark-v4 g-bg-gray-light-v4 g-rounded-0">
                            <span class="input-group-text justify-content-center rounded-0 w-100 border-0">&minus;</span>
                          </div>
                          <input class="js-result form-control text-center rounded-0 g-pa-15 g-brd-gray-light-v4" value="0" readonly="" type="text">
                          <div class="js-plus input-group-append g-font-size-15 g-width-45 g-color-gray-dark-v4 g-bg-gray-light-v4 g-rounded-0">
                            <span class="input-group-text justify-content-center rounded-0 w-100 border-0">&plus;</span>
                          </div>
                        </div>
                      </div>
                      <button type="button" class="btn btn-lg u-btn-primary g-font-weight-600 g-font-size-12 text-uppercase g-mx-5 g-mt-10">Add to Cart</button>
                    </div>
                  </fieldset>
                  <!-- End Article Quantity -->
                </form>
                <!-- End Article Form -->

                <!-- Article Add -->
                <ul class="list-inline g-mx-minus-20 mb-0">
                  <li class="list-inline-item info-v5-4__action g-brd-right g-brd-gray-light-v3 g-color-gray-dark-v5 g-pr-20 g-pl-15">
                    <i class="align-middle g-font-size-16 g-transition-0_3 g-mr-7 icon-medical-022 u-line-icon-pro"></i>
                    <a class="g-color-gray-dark-v5 g-color-primary--hover g-text-underline--none--hover" href="#">Add to Wishlist</a>
                  </li>
                  <li class="list-inline-item info-v5-4__action g-color-gray-dark-v5 g-pr-20 g-pl-15">
                    <i class="align-middle g-font-size-16 g-transition-0_3 g-mr-7 icon-finance-149 u-line-icon-pro"></i>
                    <a class="g-color-gray-dark-v5 g-color-primary--hover g-text-underline--none--hover" href="#">Add to Compare</a>
                  </li>
                </ul>
                <!-- End Article Add -->

                <hr class="g-brd-gray-light-v3 g-my-15">

                <!-- Article Footer -->
                <footer>
                  <strong>Categories:</strong>
                  <a href="#">Clothing</a>
                  ,
                  <a href="#">Shoes</a>
                </footer>
                <!-- End Article Footer -->
              </div>
              <!-- End Article Content -->
            </article>
            <!-- End Article -->
          </div>

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

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

            <!-- JS Unify -->
            <script type="text/plain" src="{{ root }}assets/js/components/hs.rating.js"></script>
            <script type="text/plain" src="{{ root }}assets/js/components/hs.count-qty.js"></script>
            <script type="text/plain" src="{{ root }}assets/js/components/hs.carousel.js"></script>

            <!-- JS Plugins Init. -->
            <script type="text/plain">
              $(document).ready(function () {
                // initialization of rating
                $.HSCore.components.HSRating.init($('.js-rating'), {
                  spacing: 4
                });

                // initialization of qty
                $.HSCore.components.HSCountQty.init('.js-quantity');

                // initialization of carousel
                $.HSCore.components.HSCarousel.init('.js-carousel');
              });
            </script>
          </div>
        </div>

        {% set contentTarget = "#shortcode11" %}
        {% set modalID = "#modalMarkup" %}
        {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
      </section>
      <!-- End Product Blocks v11 -->

      <!-- Product Blocks v12 -->
      <section class="g-bg-secondary g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Products
              <span class="g-color-primary g-ml-5">#12</span>
            </h2>
          </div>

          <div id="shortcode12">
            <div class="shortcode-html">
              <div class="js-carousel g-pb-100 g-mx-minus-10"
                   data-infinite="true"
                   data-slides-show="4"
                   data-arrows-classes="u-arrow-v1 g-pos-abs g-bottom-0 g-width-45 g-height-45 g-font-size-default g-color-gray-dark-v5 g-bg-white g-color-white--hover g-bg-primary--hover rounded"
                   data-arrow-left-classes="fa fa-angle-left g-left-10"
                   data-arrow-right-classes="fa fa-angle-right g-right-10"
                   data-pagi-classes="u-carousel-indicators-v1 g-absolute-centered--x g-bottom-20 text-center">
                <div class="js-slide">
                  <!-- Product -->
                  <figure class="g-px-10">
                    <div class="g-pos-rel g-mb-20">
                      <img class="img-fluid" src="{{ root }}assets/img-temp/480x700/img1.jpg" alt="Image Description">

                      <!-- Ribbon -->
                      <figcaption>
                        <span class="u-ribbon-v1 g-width-40 g-height-40 g-color-white g-bg-primary g-font-size-11 text-center text-uppercase g-rounded-50x g-top-10 g-left-10 g-px-2 g-py-12">New</span>
                      </figcaption>
                      <!-- End Ribbon -->
                    </div>

                    <div class="media">
                      <!-- Product Info -->
                      <div class="d-flex flex-column">
                        <h4 class="h6 g-color-black mb-1">
                          <a class="u-link-v5 g-color-black g-color-primary--hover" href="#">
                            Summer shorts
                          </a>
                        </h4>
                        <a class="d-inline-block g-color-gray-dark-v5 g-font-size-13" href="#">Man</a>
                        <span class="d-block g-color-black g-font-size-17">$52.00</span>
                      </div>
                      <!-- End Product Info -->

                      <!-- Products Icons -->
                      <ul class="list-inline media-body text-right">
                        <li class="list-inline-item align-middle mx-0">
                          <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-color-primary--hover g-font-size-15 rounded-circle" href="#" data-toggle="tooltip" data-placement="top" title="Add to Cart">
                            <i class="icon-finance-100 u-line-icon-pro"></i>
                          </a>
                        </li>
                        <li class="list-inline-item align-middle mx-0">
                          <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-color-primary--hover g-font-size-15 rounded-circle" href="#" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
                            <i class="icon-medical-022 u-line-icon-pro"></i>
                          </a>
                        </li>
                      </ul>
                      <!-- End Products Icons -->
                    </div>
                  </figure>
                  <!-- End Product -->
                </div>

                <div class="js-slide">
                  <!-- Product -->
                  <figure class="g-px-10">
                    <div class="g-pos-rel g-mb-20">
                      <img class="img-fluid" src="{{ root }}assets/img-temp/480x700/img2.jpg" alt="Image Description">
                    </div>

                    <div class="media">
                      <!-- Product Info -->
                      <div class="d-flex flex-column">
                        <h4 class="h6 g-color-black mb-1">
                          <a class="u-link-v5 g-color-black g-color-primary--hover" href="#">
                            Stylish shirt
                          </a>
                        </h4>
                        <a class="d-inline-block g-color-gray-dark-v5 g-font-size-13" href="#">Woman</a>
                        <s class="d-block g-color-lightred g-font-weight-500 g-font-size-13">$101.00</s>
                        <span class="d-block g-color-black g-font-size-17">$99.00</span>
                      </div>
                      <!-- End Product Info -->

                      <!-- Products Icons -->
                      <ul class="list-inline media-body text-right">
                        <li class="list-inline-item align-middle mx-0">
                          <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-color-primary--hover g-font-size-15 rounded-circle" href="#" data-toggle="tooltip" data-placement="top" title="Add to Cart">
                            <i class="icon-finance-100 u-line-icon-pro"></i>
                          </a>
                        </li>
                        <li class="list-inline-item align-middle mx-0">
                          <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-color-primary--hover g-font-size-15 rounded-circle" href="#" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
                            <i class="icon-medical-022 u-line-icon-pro"></i>
                          </a>
                        </li>
                      </ul>
                      <!-- End Products Icons -->
                    </div>
                  </figure>
                  <!-- End Product -->
                </div>

                <div class="js-slide">
                  <!-- Product -->
                  <figure class="g-px-10">
                    <div class="g-pos-rel g-mb-20">
                      <img class="img-fluid" src="{{ root }}assets/img-temp/480x700/img3.jpg" alt="Image Description">

                      <!-- Ribbon -->
                      <figcaption>
                        <span class="u-ribbon-v1 g-width-40 g-height-40 g-color-white g-bg-lightred g-font-size-11 text-center text-uppercase g-rounded-50x g-top-10 g-left-10 g-px-2 g-py-12">Sold</span>
                      </figcaption>
                      <!-- End Ribbon -->
                    </div>

                    <div class="media">
                      <!-- Product Info -->
                      <div class="d-flex flex-column">
                        <h4 class="h6 g-color-black mb-1">
                          <a class="u-link-v5 g-color-black g-color-primary--hover" href="#">
                            Classic jacket
                          </a>
                        </h4>
                        <a class="d-inline-block g-color-gray-dark-v5 g-font-size-13" href="#">Man</a>
                        <span class="d-block g-color-black g-font-size-17">$49.99</span>
                      </div>
                      <!-- End Product Info -->

                      <!-- Products Icons -->
                      <ul class="list-inline media-body text-right">
                        <li class="list-inline-item align-middle mx-0">
                          <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-color-primary--hover g-font-size-15 rounded-circle" href="#" data-toggle="tooltip" data-placement="top" title="Add to Cart">
                            <i class="icon-finance-100 u-line-icon-pro"></i>
                          </a>
                        </li>
                        <li class="list-inline-item align-middle mx-0">
                          <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-color-primary--hover g-font-size-15 rounded-circle" href="#" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
                            <i class="icon-medical-022 u-line-icon-pro"></i>
                          </a>
                        </li>
                      </ul>
                      <!-- End Products Icons -->
                    </div>
                  </figure>
                  <!-- End Product -->
                </div>

                <div class="js-slide">
                  <!-- Product -->
                  <figure class="g-px-10">
                    <div class="g-pos-rel g-mb-20">
                      <img class="img-fluid" src="{{ root }}assets/img-temp/480x700/img4.jpg" alt="Image Description">
                    </div>

                    <div class="media">
                      <!-- Product Info -->
                      <div class="d-flex flex-column">
                        <h4 class="h6 g-color-black mb-1">
                          <a class="u-link-v5 g-color-black g-color-primary--hover" href="#">
                            Wool lined parka
                          </a>
                        </h4>
                        <a class="d-inline-block g-color-gray-dark-v5 g-font-size-13" href="#">Woman</a>
                        <span class="d-block g-color-black g-font-size-17">$82.37</span>
                      </div>
                      <!-- End Product Info -->

                      <!-- Products Icons -->
                      <ul class="list-inline media-body text-right">
                        <li class="list-inline-item align-middle mx-0">
                          <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-color-primary--hover g-font-size-15 rounded-circle" href="#" data-toggle="tooltip" data-placement="top" title="Add to Cart">
                            <i class="icon-finance-100 u-line-icon-pro"></i>
                          </a>
                        </li>
                        <li class="list-inline-item align-middle mx-0">
                          <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-color-primary--hover g-font-size-15 rounded-circle" href="#" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
                            <i class="icon-medical-022 u-line-icon-pro"></i>
                          </a>
                        </li>
                      </ul>
                      <!-- End Products Icons -->
                    </div>
                  </figure>
                  <!-- End Product -->
                </div>

                <div class="js-slide">
                  <!-- Product -->
                  <figure class="g-px-10">
                    <div class="g-pos-rel g-mb-20">
                      <img class="img-fluid" src="{{ root }}assets/img-temp/480x700/img5.jpg" alt="Image Description">

                      <!-- Ribbon -->
                      <figcaption>
                        <span class="u-ribbon-v1 g-width-40 g-height-40 g-color-white g-bg-lightred g-font-size-11 text-center text-uppercase g-rounded-50x g-top-10 g-left-10 g-px-2 g-py-12">Sold</span>
                      </figcaption>
                      <!-- End Ribbon -->
                    </div>

                    <div class="media">
                      <!-- Product Info -->
                      <div class="d-flex flex-column">
                        <h4 class="h6 g-color-black mb-1">
                          <a class="u-link-v5 g-color-black g-color-primary--hover" href="#">
                            Hooded jeans
                          </a>
                        </h4>
                        <a class="d-inline-block g-color-gray-dark-v5 g-font-size-13" href="#">Man</a>
                        <s class="d-block g-color-lightred g-font-weight-500 g-font-size-13">$55.00</s>
                        <span class="d-block g-color-black g-font-size-17">$35.99</span>
                      </div>
                      <!-- End Product Info -->

                      <!-- Products Icons -->
                      <ul class="list-inline media-body text-right">
                        <li class="list-inline-item align-middle mx-0">
                          <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-color-primary--hover g-font-size-15 rounded-circle" href="#" data-toggle="tooltip" data-placement="top" title="Add to Cart">
                            <i class="icon-finance-100 u-line-icon-pro"></i>
                          </a>
                        </li>
                        <li class="list-inline-item align-middle mx-0">
                          <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-color-primary--hover g-font-size-15 rounded-circle" href="#" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
                            <i class="icon-medical-022 u-line-icon-pro"></i>
                          </a>
                        </li>
                      </ul>
                      <!-- End Products Icons -->
                    </div>
                  </figure>
                  <!-- End Product -->
                </div>

                <div class="js-slide">
                  <!-- Product -->
                  <figure class="g-px-10">
                    <div class="g-pos-rel g-mb-20">
                      <img class="img-fluid" src="{{ root }}assets/img-temp/480x700/img6.jpg" alt="Image Description">
                    </div>

                    <div class="media">
                      <!-- Product Info -->
                      <div class="d-flex flex-column">
                        <h4 class="h6 g-color-black mb-1">
                          <a class="u-link-v5 g-color-black g-color-primary--hover" href="#">
                            Waterproof jacket
                          </a>
                        </h4>
                        <a class="d-inline-block g-color-gray-dark-v5 g-font-size-13" href="#">Woman</a>
                        <span class="d-block g-color-black g-font-size-17">$105.99</span>
                      </div>
                      <!-- End Product Info -->

                      <!-- Products Icons -->
                      <ul class="list-inline media-body text-right">
                        <li class="list-inline-item align-middle mx-0">
                          <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-color-primary--hover g-font-size-15 rounded-circle" href="#" data-toggle="tooltip" data-placement="top" title="Add to Cart">
                            <i class="icon-finance-100 u-line-icon-pro"></i>
                          </a>
                        </li>
                        <li class="list-inline-item align-middle mx-0">
                          <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-color-primary--hover g-font-size-15 rounded-circle" href="#" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
                            <i class="icon-medical-022 u-line-icon-pro"></i>
                          </a>
                        </li>
                      </ul>
                      <!-- End Products Icons -->
                    </div>
                  </figure>
                  <!-- End Product -->
                </div>

                <div class="js-slide">
                  <!-- Product -->
                  <figure class="g-px-10">
                    <div class="g-pos-rel g-mb-20">
                      <img class="img-fluid" src="{{ root }}assets/img-temp/480x700/img7.jpg" alt="Image Description">

                      <!-- Ribbon -->
                      <figcaption>
                        <span class="u-ribbon-v1 g-width-40 g-height-40 g-color-white g-bg-primary g-font-size-11 text-center text-uppercase g-rounded-50x g-top-10 g-left-10 g-px-2 g-py-12">New</span>
                      </figcaption>
                      <!-- End Ribbon -->
                    </div>

                    <div class="media">
                      <!-- Product Info -->
                      <div class="d-flex flex-column">
                        <h4 class="h6 g-color-black mb-1">
                          <a class="u-link-v5 g-color-black g-color-primary--hover" href="#">
                            Classic T-shirt
                          </a>
                        </h4>
                        <a class="d-inline-block g-color-gray-dark-v5 g-font-size-13" href="#">Man</a>
                        <span class="d-block g-color-black g-font-size-17">$11.00</span>
                      </div>
                      <!-- End Product Info -->

                      <!-- Products Icons -->
                      <ul class="list-inline media-body text-right">
                        <li class="list-inline-item align-middle mx-0">
                          <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-color-primary--hover g-font-size-15 rounded-circle" href="#" data-toggle="tooltip" data-placement="top" title="Add to Cart">
                            <i class="icon-finance-100 u-line-icon-pro"></i>
                          </a>
                        </li>
                        <li class="list-inline-item align-middle mx-0">
                          <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-color-primary--hover g-font-size-15 rounded-circle" href="#" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
                            <i class="icon-medical-022 u-line-icon-pro"></i>
                          </a>
                        </li>
                      </ul>
                      <!-- End Products Icons -->
                    </div>
                  </figure>
                  <!-- End Product -->
                </div>

                <div class="js-slide">
                  <!-- Product -->
                  <figure class="g-px-10">
                    <div class="g-pos-rel g-mb-20">
                      <img class="img-fluid" src="{{ root }}assets/img-temp/480x700/img8.jpg" alt="Image Description">
                    </div>

                    <div class="media">
                      <!-- Product Info -->
                      <div class="d-flex flex-column">
                        <h4 class="h6 g-color-black mb-1">
                          <a class="u-link-v5 g-color-black g-color-primary--hover" href="#">
                            Blue skirt
                          </a>
                        </h4>
                        <a class="d-inline-block g-color-gray-dark-v5 g-font-size-13" href="#">Woman</a>
                        <span class="d-block g-color-black g-font-size-17">$34.00</span>
                      </div>
                      <!-- End Product Info -->

                      <!-- Products Icons -->
                      <ul class="list-inline media-body text-right">
                        <li class="list-inline-item align-middle mx-0">
                          <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-color-primary--hover g-font-size-15 rounded-circle" href="#" data-toggle="tooltip" data-placement="top" title="Add to Cart">
                            <i class="icon-finance-100 u-line-icon-pro"></i>
                          </a>
                        </li>
                        <li class="list-inline-item align-middle mx-0">
                          <a class="u-icon-v1 u-icon-size--sm g-color-gray-dark-v5 g-color-primary--hover g-font-size-15 rounded-circle" href="#" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
                            <i class="icon-medical-022 u-line-icon-pro"></i>
                          </a>
                        </li>
                      </ul>
                      <!-- End Products Icons -->
                    </div>
                  </figure>
                  <!-- End Product -->
                </div>
              </div>
            </div>

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

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

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

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).ready(function () {
                  // initialization of carousel
                  $.HSCore.components.HSCarousel.init('.js-carousel');
                });
              </script>
            </div>
          </div>

          {% set contentTarget = "#shortcode12" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Product Blocks v12 -->

      <!-- Product Blocks v13 -->
      <section class="container g-py-100">
        <div class="text-center g-mb-50">
          <h2 class="h4">Products
            <span class="g-color-primary g-ml-5">#13</span>
          </h2>
        </div>

        <div id="shortcode13">
          <div class="shortcode-html">
            <!-- Product Description -->
            <div class="row">
              <div class="col-lg-7">
                <!-- Carousel -->
                <div id="carousel1" class="js-carousel g-pt-10 g-mb-10"
                     data-infinite="true"
                     data-fade="true"
                     data-arrows-classes="u-arrow-v1 g-brd-around g-brd-white g-absolute-centered--y g-width-45 g-height-45 g-font-size-14 g-color-white g-color-primary--hover rounded-circle"
                     data-arrow-left-classes="fa fa-angle-left g-left-40"
                     data-arrow-right-classes="fa fa-angle-right g-right-40"
                     data-nav-for="#carousel2">
                  <div class="js-slide g-bg-cover g-bg-black-opacity-0_1--after">
                    <img class="img-fluid w-100" src="{{ root }}assets/img-temp/650x750/img1.jpg" alt="Image Description">
                  </div>
                  <div class="js-slide g-bg-cover g-bg-black-opacity-0_1--after">
                    <img class="img-fluid w-100" src="{{ root }}assets/img-temp/650x750/img2.jpg" alt="Image Description">
                  </div>
                  <div class="js-slide g-bg-cover g-bg-black-opacity-0_1--after">
                    <img class="img-fluid w-100" src="{{ root }}assets/img-temp/650x750/img3.jpg" alt="Image Description">
                  </div>
                </div>

                <div id="carousel2" class="js-carousel text-center u-carousel-v3 g-mx-minus-5 g-mb-10"
                     data-infinite="true"
                     data-center-mode="true"
                     data-slides-show="3"
                     data-is-thumbs="true"
                     data-nav-for="#carousel1">
                  <div class="js-slide g-cursor-pointer g-px-5">
                    <img class="img-fluid" src="{{ root }}assets/img-temp/250x170/img1.jpg" alt="Image Description">
                  </div>

                  <div class="js-slide g-cursor-pointer g-px-5">
                    <img class="img-fluid" src="{{ root }}assets/img-temp/250x170/img2.jpg" alt="Image Description">
                  </div>

                  <div class="js-slide g-cursor-pointer g-px-5">
                    <img class="img-fluid" src="{{ root }}assets/img-temp/250x170/img3.jpg" alt="Image Description">
                  </div>

                  <div class="js-slide g-cursor-pointer g-px-5">
                    <img class="img-fluid" src="{{ root }}assets/img-temp/250x170/img1.jpg" alt="Image Description">
                  </div>

                  <div class="js-slide g-cursor-pointer g-px-5">
                    <img class="img-fluid" src="{{ root }}assets/img-temp/250x170/img2.jpg" alt="Image Description">
                  </div>

                  <div class="js-slide g-cursor-pointer g-px-5">
                    <img class="img-fluid" src="{{ root }}assets/img-temp/250x170/img3.jpg" alt="Image Description">
                  </div>
                </div>
                <!-- End Carousel -->
              </div>

              <div class="col-lg-5">
                <div class="g-px-40--lg g-py-70">
                  <!-- Product Info -->
                  <div class="g-mb-30">
                    <h1 class="g-font-weight-300 mb-4">Men's Water
                      <br>
                      Resistant Jacket
                    </h1>
                    <p>Dress is the "rain mac" version of our beloved essential the Unify Parka. Crafted from a water resistant fluid memory fabric to create an elegant draped effect when thrown on, this lightweight shell will take you from season to season and protect you from that unexpected shower.</p>
                  </div>
                  <!-- End Product Info -->

                  <!-- Price -->
                  <div class="g-mb-30">
                    <h2 class="g-color-gray-dark-v5 g-font-weight-400 g-font-size-12 text-uppercase mb-2">Price</h2>
                    <span class="g-color-black g-font-weight-500 g-font-size-30 mr-2">$99.00</span>
                    <s class="g-color-gray-dark-v4 g-font-weight-500 g-font-size-16">$101.00</s>
                  </div>
                  <!-- End Price -->

                  <!-- Accordion -->
                  <div id="accordion-01" role="tablist" aria-multiselectable="true">
                    <div id="accordion-01-heading-01" class="g-brd-y g-brd-gray-light-v3 py-3" role="tab">
                      <h5 class="g-font-weight-400 g-font-size-default mb-0">
                        <a class="d-block g-color-gray-dark-v5 g-text-underline--none--hover" href="#accordion-01-body-01" data-toggle="collapse" data-parent="#accordion-01" aria-expanded="false" aria-controls="accordion-01-body-01">Details
                          <span class="float-right g-pos-rel g-top-3 mr-1 fa fa-angle-down"></span>
                        </a>
                      </h5>
                    </div>
                    <div id="accordion-01-body-01" class="collapse" role="tabpanel" aria-labelledby="accordion-01-heading-01"
                         data-parent="#accordion-01">
                      <div class="g-py-10">
                        <p class="g-font-size-12 mb-2">SHELL: 100% POLYESTER</p>
                        <p class="g-font-size-12 mb-2">Always check the care label instructions.</p>
                        <p class="g-font-size-12 mb-2">Professional dry clean only. Remove all detachable parts before cleaning. Do not iron.</p>
                        <p class="g-font-size-12 mb-2">(Navy: Avoid contact with light coloured fabrics and upholstery especially whilst damp.)</p>
                      </div>
                    </div>
                  </div>
                  <!-- End Accordion -->

                  <!-- Colour -->
                  <div class="d-flex justify-content-between align-items-center g-brd-bottom g-brd-gray-light-v3 py-3" role="tab">
                    <h5 class="g-color-gray-dark-v5 g-font-weight-400 g-font-size-default mb-0">Colour</h5>

                    <!-- Checkbox -->
                    <ul class="list-inline mb-0">
                      <li class="list-inline-item g-mx-10">
                        <label class="form-check-inline u-check">
                          <input class="g-hidden-xs-up g-pos-abs g-top-0 g-left-0" name="radInline1_1" type="radio">
                          <div class="u-check-icon-checkbox-v4 g-brd-transparent g-brd-gray-dark-v4--checked rounded-circle g-absolute-centered--y g-left-0 g-mt-3">
                            <i class="d-block g-absolute-centered g-width-12 g-height-12 g-bg-primary rounded-circle"></i>
                          </div>
                        </label>
                      </li>
                      <li class="list-inline-item g-mx-10">
                        <label class="form-check-inline u-check">
                          <input class="g-hidden-xs-up g-pos-abs g-top-0 g-left-0" name="radInline1_1" type="radio">
                          <div class="u-check-icon-checkbox-v4 g-brd-transparent g-brd-gray-dark-v4--checked rounded-circle g-absolute-centered--y g-left-0 g-mt-3">
                            <i class="d-block g-absolute-centered g-width-12 g-height-12 g-bg-beige rounded-circle"></i>
                          </div>
                        </label>
                      </li>
                      <li class="list-inline-item g-mx-10">
                        <label class="form-check-inline u-check">
                          <input class="g-hidden-xs-up g-pos-abs g-top-0 g-left-0" name="radInline1_1" type="radio">
                          <div class="u-check-icon-checkbox-v4 g-brd-transparent g-brd-gray-dark-v4--checked rounded-circle g-absolute-centered--y g-left-0 g-mt-3">
                            <i class="d-block g-absolute-centered g-width-12 g-height-12 g-bg-black rounded-circle"></i>
                          </div>
                        </label>
                      </li>
                      <li class="list-inline-item g-ml-10 g-mr-20">
                        <label class="form-check-inline u-check">
                          <input class="g-hidden-xs-up g-pos-abs g-top-0 g-left-0" name="radInline1_1" type="radio">
                          <div class="u-check-icon-checkbox-v4 g-brd-transparent g-brd-gray-dark-v4--checked rounded-circle g-absolute-centered--y g-left-0 g-mt-3">
                            <i class="d-block g-absolute-centered g-width-12 g-height-12 g-bg-gray-dark-v4 rounded-circle"></i>
                          </div>
                        </label>
                      </li>
                    </ul>
                    <!-- End Checkbox -->
                  </div>
                  <!-- End Colour -->

                  <!-- Size -->
                  <div class="d-flex justify-content-between align-items-center g-brd-bottom g-brd-gray-light-v3 py-3" role="tab">
                    <h5 class="g-color-gray-dark-v5 g-font-weight-400 g-font-size-default mb-0">Size</h5>

                    <!-- Checkbox -->
                    <ul class="list-inline mb-0">
                      <li class="list-inline-item g-mx-15">
                        <label class="form-check-inline u-check">
                          <input class="g-hidden-xs-up g-pos-abs g-top-0 g-left-0" name="radInline2_1" type="radio">
                          <div class="u-check-icon-checkbox-v4 g-brd-none g-absolute-centered--y g-left-0">
                            S
                          </div>
                        </label>
                      </li>
                      <li class="list-inline-item g-mx-15">
                        <label class="form-check-inline u-check">
                          <input class="g-hidden-xs-up g-pos-abs g-top-0 g-left-0" name="radInline2_1" type="radio">
                          <div class="u-check-icon-checkbox-v4 g-brd-none g-absolute-centered--y g-left-0">
                            M
                          </div>
                        </label>
                      </li>
                      <li class="list-inline-item g-mx-15">
                        <label class="form-check-inline u-check">
                          <input class="g-hidden-xs-up g-pos-abs g-top-0 g-left-0" name="radInline2_1" type="radio">
                          <div class="u-check-icon-checkbox-v4 g-brd-none g-absolute-centered--y g-left-0">
                            L
                          </div>
                        </label>
                      </li>
                      <li class="list-inline-item g-mx-15">
                        <label class="form-check-inline u-check">
                          <input class="g-hidden-xs-up g-pos-abs g-top-0 g-left-0" name="radInline2_1" type="radio">
                          <div class="u-check-icon-checkbox-v4 g-brd-none g-absolute-centered--y g-left-0">
                            XL
                          </div>
                        </label>
                      </li>
                      <li class="list-inline-item g-ml-15 g-mr-20">
                        <label class="form-check-inline u-check">
                          <input class="g-hidden-xs-up g-pos-abs g-top-0 g-left-0" name="radInline2_1" type="radio">
                          <div class="u-check-icon-checkbox-v4 g-brd-none g-absolute-centered--y g-left-0">
                            XXL
                          </div>
                        </label>
                      </li>
                    </ul>
                    <!-- End Checkbox -->
                  </div>
                  <!-- End Size -->

                  <!-- Quantity -->
                  <div class="d-flex justify-content-between align-items-center g-brd-bottom g-brd-gray-light-v3 py-3 g-mb-30" role="tab">
                    <h5 class="g-color-gray-dark-v5 g-font-weight-400 g-font-size-default mb-0">Quantity</h5>

                    <div class="js-quantity input-group u-quantity-v1 g-width-80 g-brd-primary--focus">
                      <input class="js-result form-control text-center g-font-size-13 rounded-0" type="text" value="1" readonly>

                      <div class="input-group-addon d-flex align-items-center g-width-30 g-bg-white g-font-size-13 rounded-0 g-pa-5">
                        <i class="js-plus g-color-gray g-color-primary--hover fa fa-angle-up"></i>
                        <i class="js-minus g-color-gray g-color-primary--hover fa fa-angle-down"></i>
                      </div>
                    </div>
                  </div>
                  <!-- End Quantity -->

                  <!-- Buttons -->
                  <div class="row g-mx-minus-5 g-mb-20">
                    <div class="col g-px-5 g-mb-10">
                      <button class="btn btn-block u-btn-primary g-font-size-12 text-uppercase g-py-15 g-px-25" type="button">
                        Add to Cart
                        <i class="align-middle ml-2 icon-finance-100 u-line-icon-pro"></i>
                      </button>
                    </div>
                    <div class="col g-px-5 g-mb-10">
                      <button class="btn btn-block u-btn-outline-black g-brd-gray-dark-v5 g-brd-black--hover g-color-gray-dark-v4 g-color-white--hover g-font-size-12 text-uppercase g-py-15 g-px-25" type="button">
                        Add to Wishlist
                        <i class="align-middle ml-2 icon-medical-022 u-line-icon-pro"></i>
                      </button>
                    </div>
                  </div>
                  <!-- End Buttons -->

                  <!-- Nav Tabs -->
                  <ul class="nav d-flex justify-content-between g-font-size-12 text-uppercase" role="tablist" data-target="nav-1-1-default-hor-left">
                    <li class="nav-item g-brd-bottom g-brd-gray-dark-v4">
                      <a class="nav-link active g-color-primary--active g-pa-0 g-pb-1" data-toggle="tab" href="#nav-1-1-default-hor-left--3" role="tab">Returns</a>
                    </li>
                    <li class="nav-item g-brd-bottom g-brd-gray-dark-v4">
                      <a class="nav-link g-color-primary--active g-pa-0 g-pb-1" data-toggle="tab" href="#nav-1-1-default-hor-left--1" role="tab">View Size Guide</a>
                    </li>
                    <li class="nav-item g-brd-bottom g-brd-gray-dark-v4">
                      <a class="nav-link g-color-primary--active g-pa-0 g-pb-1" data-toggle="tab" href="#nav-1-1-default-hor-left--2" role="tab">Delivery</a>
                    </li>
                  </ul>
                  <!-- End Nav Tabs -->

                  <!-- Tab Panes -->
                  <div id="nav-1-1-default-hor-left" class="tab-content">
                    <div class="tab-pane fade show active g-pt-30" id="nav-1-1-default-hor-left--3" role="tabpanel">
                      <p class="g-color-gray-dark-v4 g-font-size-13 mb-0">You can return/exchange your orders in Unify E-commerce. For more information, read our
                        <a href="#">FAQ</a>
                        .
                      </p>
                    </div>

                    <div class="tab-pane fade g-pt-30" id="nav-1-1-default-hor-left--1" role="tabpanel"
                         data-parent="#nav-1-1-default-hor-left">
                      <h4 class="g-font-size-15 mb-3">General Clothing Size Guide</h4>

                      <!-- Size -->
                      <table>
                        <tbody>
                          <tr class="g-color-gray-dark-v4 g-font-size-12">
                            <td class="align-top g-width-150 g-py-5">Unify Size (UK)</td>
                            <td class="align-top g-width-50 g-py-5">S</td>
                            <td class="align-top g-width-50 g-py-5">M</td>
                            <td class="align-top g-width-50 g-py-5">L</td>
                            <td class="align-top g-width-50 g-py-5">XL</td>
                            <td class="align-top g-width-50 g-py-5">XXL</td>
                          </tr>
                          <tr class="g-color-gray-dark-v4 g-font-size-12">
                            <td class="align-top g-width-150 g-py-5">UK</td>
                            <td class="align-top g-width-50 g-py-5">6</td>
                            <td class="align-top g-width-50 g-py-5">8</td>
                            <td class="align-top g-width-50 g-py-5">10</td>
                            <td class="align-top g-width-50 g-py-5">12</td>
                            <td class="align-top g-width-50 g-py-5">14</td>
                          </tr>
                          <tr class="g-color-gray-dark-v4 g-font-size-12">
                            <td class="align-top g-width-150 g-py-5">Europe</td>
                            <td class="align-top g-width-50 g-py-5">32</td>
                            <td class="align-top g-width-50 g-py-5">34</td>
                            <td class="align-top g-width-50 g-py-5">36</td>
                            <td class="align-top g-width-50 g-py-5">38</td>
                            <td class="align-top g-width-50 g-py-5">40</td>
                          </tr>
                          <tr class="g-color-gray-dark-v4 g-font-size-12">
                            <td class="align-top g-width-150 g-py-5">US</td>
                            <td class="align-top g-width-50 g-py-5">2</td>
                            <td class="align-top g-width-50 g-py-5">4</td>
                            <td class="align-top g-width-50 g-py-5">6</td>
                            <td class="align-top g-width-50 g-py-5">8</td>
                            <td class="align-top g-width-50 g-py-5">10</td>
                          </tr>
                          <tr class="g-color-gray-dark-v4 g-font-size-12">
                            <td class="align-top g-width-150 g-py-5">Australia</td>
                            <td class="align-top g-width-50 g-py-5">6</td>
                            <td class="align-top g-width-50 g-py-5">8</td>
                            <td class="align-top g-width-50 g-py-5">10</td>
                            <td class="align-top g-width-50 g-py-5">12</td>
                            <td class="align-top g-width-50 g-py-5">14</td>
                          </tr>
                          <tr class="g-color-gray-dark-v4 g-font-size-12">
                            <td class="align-top g-width-150 g-py-5">Japan</td>
                            <td class="align-top g-width-50 g-py-5">7</td>
                            <td class="align-top g-width-50 g-py-5">9</td>
                            <td class="align-top g-width-50 g-py-5">11</td>
                            <td class="align-top g-width-50 g-py-5">13</td>
                            <td class="align-top g-width-50 g-py-5">15</td>
                          </tr>
                        </tbody>
                      </table>
                      <!-- End Size -->
                    </div>

                    <div class="tab-pane fade g-pt-30" id="nav-1-1-default-hor-left--2" role="tabpanel"
                         data-parent="#nav-1-1-default-hor-left">
                      <!-- Shipping Mehtod -->
                      <table>
                        <thead class="h6 g-brd-bottom g-brd-gray-light-v3 g-color-gray-dark-v3 g-font-size-13">
                          <tr>
                            <th class="g-width-100 g-font-weight-500 g-pa-0 g-pb-10">Destination</th>
                            <th class="g-width-140 g-font-weight-500 g-pa-0 g-pb-10">Delivery type</th>
                            <th class="g-width-150 g-font-weight-500 g-pa-0 g-pb-10">Delivery time</th>
                            <th class="g-font-weight-500 text-right g-pa-0 g-pb-10">Cost</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr class="g-color-gray-dark-v4 g-font-size-12">
                            <td class="align-top g-py-10">UK</td>
                            <td class="align-top g-py-10">Standard delivery</td>
                            <td class="align-top g-font-size-11 g-py-10">2-3 Working days</td>
                            <td class="align-top text-right g-py-10">$5.5</td>
                          </tr>
                          <tr class="g-color-gray-dark-v4 g-font-size-12">
                            <td class="align-top g-py-10"></td>
                            <td class="align-top g-py-10">Next day</td>
                            <td class="align-top g-font-size-11 g-py-10">Order before 12pm monday - thursday and receive it the next day</td>
                            <td class="align-top text-right g-py-10">$9.5</td>
                          </tr>
                          <tr class="g-color-gray-dark-v4 g-font-size-12">
                            <td class="align-top g-py-10"></td>
                            <td class="align-top g-py-10">Saturday delivery</td>
                            <td class="align-top g-font-size-11 g-py-10">Saturday delivery for orders placed before 12pm on friday</td>
                            <td class="align-top text-right g-py-10">$12.00</td>
                          </tr>
                          <tr class="g-color-gray-dark-v4 g-font-size-12">
                            <td class="align-top g-py-10">Europe</td>
                            <td class="align-top g-py-10">Standard delivery</td>
                            <td class="align-top g-font-size-11 g-py-10">3-9 Working days</td>
                            <td class="align-top text-right g-py-10">$20.00</td>
                          </tr>
                          <tr class="g-color-gray-dark-v4 g-font-size-12">
                            <td class="align-top g-py-10">America</td>
                            <td class="align-top g-py-10">Standard delivery</td>
                            <td class="align-top g-font-size-11 g-py-10">3-9 Working days</td>
                            <td class="align-top text-right g-py-10">$25.00</td>
                          </tr>
                        </tbody>
                      </table>
                      <!-- End Shipping Mehtod -->
                    </div>
                  </div>
                  <!-- End Tab Panes -->
                </div>
              </div>
            </div>
            <!-- End Product Description -->
          </div>

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

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

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

            <!-- JS Plugins Init. -->
            <script type="text/plain">
              $(document).ready(function () {
                // initialization of carousel
                $.HSCore.components.HSCarousel.init('.js-carousel');
              });
            </script>
          </div>
        </div>

        {% set contentTarget = "#shortcode13" %}
        {% set modalID = "#modalMarkup" %}
        {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
      </section>
      <!-- End Product Blocks v13 -->

      <!-- Product Blocks v14 -->
      <section class="g-bg-secondary g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Products
              <span class="g-color-primary g-ml-5">#14</span>
            </h2>
          </div>

          <div id="shortcode14">
            <div class="shortcode-html">
              <!-- Products Advanced -->
              <div class="row g-mb-40">
                <div class="col-lg-8 g-mb-30">
                  <!-- Products -->
                  <article>
                    <!-- Products - Carousel Image -->
                    <div class="js-carousel"
                         data-infinite="true"
                         data-arrows-classes="u-arrow-v1 g-pos-abs g-bottom-0 g-width-30 g-height-30 g-color-black g-bg-primary-opacity-0_4 g-bg-primary--hover g-color-white"
                         data-arrow-left-classes="fa fa-angle-left g-right-30 g-brd-right g-brd-white-opacity-0_1"
                         data-arrow-right-classes="fa fa-angle-right g-right-0">
                      <div class="js-slide g-pos-rel">
                        <a class="js-fancybox d-block u-icon-v3 g-width-30 g-height-30 g-color-black g-bg-primary-opacity-0_6 g-bg-primary--hover g-color-white g-font-size-14 g-pos-abs g-bottom-0 g-right-65" href="javascript:;"
                           data-fancybox="lightbox-gallery--01"
                           data-src="{{ root }}assets/img-temp/900x400/img7.jpg"
                           data-caption="Lightbox Gallery">
                          <i class="icon-size-fullscreen"></i>
                        </a>
                        <img class="img-fluid" src="{{ root }}assets/img-temp/900x400/img7.jpg" alt="Image Description">
                      </div>
                      <div class="js-slide g-pos-rel">
                        <a class="js-fancybox d-block u-icon-v3 g-width-30 g-height-30 g-color-black g-bg-primary-opacity-0_6 g-bg-primary--hover g-color-white g-font-size-14 g-pos-abs g-bottom-0 g-right-65" href="javascript:;"
                           data-fancybox="lightbox-gallery--01"
                           data-src="{{ root }}assets/img-temp/900x400/img8.jpg"
                           data-caption="Lightbox Gallery">
                          <i class="icon-size-fullscreen"></i>
                        </a>
                        <img class="img-fluid" src="{{ root }}assets/img-temp/900x400/img8.jpg" alt="Image Description">
                      </div>
                      <div class="js-slide g-pos-rel">
                        <a class="js-fancybox d-block u-icon-v3 g-width-30 g-height-30 g-color-black g-bg-primary-opacity-0_6 g-bg-primary--hover g-color-white g-font-size-14 g-pos-abs g-bottom-0 g-right-65" href="javascript:;"
                           data-fancybox="lightbox-gallery--01"
                           data-src="{{ root }}assets/img-temp/900x400/img9.jpg"
                           data-caption="Lightbox Gallery">
                          <i class="icon-size-fullscreen"></i>
                        </a>
                        <img class="img-fluid" src="{{ root }}assets/img-temp/900x400/img9.jpg" alt="Image Description">
                      </div>
                    </div>
                    <!-- Products - Carousel Image -->

                    <div class="g-brd-x g-brd-gray-light-v3 g-bg-white">
                      <!-- Products - List of Details -->
                      <ul class="d-flex list-inline g-brd-y g-brd-gray-light-v3 mb-0">
                        <li class="list-inline-item col-4 g-font-weight-500 g-font-size-13 text-center g-px-0 g-py-17 mr-0">
                          <i class="align-middle g-color-gray-dark-v5 mr-1 icon-hotel-restaurant-022 u-line-icon-pro"></i>
                          7 Bed rm.
                        </li>
                        <li class="list-inline-item col-4 g-font-weight-500 g-font-size-13 text-center g-px-0 g-brd-x g-brd-gray-light-v3 g-py-17 mr-0">
                          <i class="align-middle g-color-gray-dark-v5 mr-1 icon-hotel-restaurant-008 u-line-icon-pro"></i>
                          5 Bath rm.
                        </li>
                        <li class="list-inline-item col-4 g-font-weight-500 g-font-size-13 text-center g-px-0 g-py-17 mr-0">
                          <i class="align-middle g-color-gray-dark-v5 mr-1 icon-real-estate-047 u-line-icon-pro"></i>
                          3,725 SQFT
                        </li>
                      </ul>
                      <!-- End Products - List of Details -->

                      <!-- Products - Address -->
                      <div class="g-pa-25">
                        <h3 class="g-font-weight-600 g-font-size-16">Flat 60, Ross Green, South Lilyberg, Q7M 8ZV</h3>
                        <p class="g-font-size-13 mb-4">Milan, Italy</p>
                        <p class="g-color-gray-dark-v5 g-font-weight-500 g-font-size-13 mb-1">Agency: <a class="g-color-gray-dark-v5 g-color-primary--hover g-font-weight-400 g-text-underline--none--hover" href="#">Real Estate State</a></p>
                        <p class="g-color-gray-dark-v5 g-font-weight-500 g-font-size-13 mb-0">Posted: <span class="g-color-gray-dark-v5 g-font-weight-400">12 days ago</a></p>
                      </div>
                      <!-- End Products - Address -->

                      <!-- Products - List of Details -->
                      <ul class="d-flex list-inline align-items-center g-brd-top g-brd-gray-light-v3 mb-0">
                        <li class="list-inline-item col-8 g-font-weight-600 g-font-size-17 text-center g-px-0 g-py-13 mr-0">
                          $14,999<span class="g-font-size-13">/mo</span>
                        </li>
                        <li class="list-inline-item col-2 g-px-0 mr-0">
                          <a class="d-block g-brd-x g-brd-gray-light-v3 g-color-gray-dark-v5 g-color-primary--hover g-font-weight-500 g-font-size-17 text-center g-text-underline--none--hover g-py-13" href="javascript:void(0);"
                             data-toggle="tooltip"
                             data-placement="top"
                             title="Add to Compare">
                            <i class="icon-finance-149 u-line-icon-pro"></i>
                          </a>
                        </li>
                        <li class="list-inline-item col-2 g-px-0 mr-0">
                          <a class="d-block g-color-gray-dark-v5 g-color-primary--hover g-font-weight-500 g-font-size-17 text-center g-text-underline--none--hover g-py-13" href="javascript:void(0);"
                             data-toggle="tooltip"
                             data-placement="top"
                             title="Save to Wishlist">
                            <i class="icon-medical-022 u-line-icon-pro"></i>
                          </a>
                        </li>
                      </ul>
                      <!-- End Products - List of Details -->
                    </div>
                    <a class="btn btn-block g-brd-top-none g-brd-gray-light-v3 g-brd-primary--hover g-color-white--hover g-bg-secondary g-bg-primary--hover g-font-weight-600 rounded-0 g-px-18 g-py-15" href="page-single-item-1.html">
                      See Details
                      <i class="align-middle ml-2 fa fa-angle-right"></i>
                    </a>
                  </article>
                  <!-- End Products -->
                </div>

                <div class="col-sm-6 col-lg-4 g-mb-30">
                  <!-- Products -->
                  <article>
                    <!-- Products - Carousel Image -->
                    <div class="js-carousel"
                         data-infinite="true"
                         data-arrows-classes="u-arrow-v1 g-pos-abs g-bottom-0 g-width-30 g-height-30 g-color-black g-bg-primary-opacity-0_4 g-bg-primary--hover g-color-white"
                         data-arrow-left-classes="fa fa-angle-left g-right-30 g-brd-right g-brd-white-opacity-0_1"
                         data-arrow-right-classes="fa fa-angle-right g-right-0">
                      <div class="js-slide g-pos-rel">
                        <a class="js-fancybox d-block u-icon-v3 g-width-30 g-height-30 g-color-black g-bg-primary-opacity-0_6 g-bg-primary--hover g-color-white g-font-size-14 g-pos-abs g-bottom-0 g-right-65" href="javascript:;"
                           data-fancybox="lightbox-gallery--02"
                           data-src="{{ root }}assets/img-temp/600x550/img1.jpg"
                           data-caption="Lightbox Gallery">
                          <i class="icon-size-fullscreen"></i>
                        </a>
                        <img class="img-fluid" src="{{ root }}assets/img-temp/600x550/img1.jpg" alt="Image Description">
                      </div>
                      <div class="js-slide g-pos-rel">
                        <a class="js-fancybox d-block u-icon-v3 g-width-30 g-height-30 g-color-black g-bg-primary-opacity-0_6 g-bg-primary--hover g-color-white g-font-size-14 g-pos-abs g-bottom-0 g-right-65" href="javascript:;"
                           data-fancybox="lightbox-gallery--02"
                           data-src="{{ root }}assets/img-temp/600x550/img2.jpg"
                           data-caption="Lightbox Gallery">
                          <i class="icon-size-fullscreen"></i>
                        </a>
                        <img class="img-fluid" src="{{ root }}assets/img-temp/600x550/img2.jpg" alt="Image Description">
                      </div>
                      <div class="js-slide g-pos-rel">
                        <a class="js-fancybox d-block u-icon-v3 g-width-30 g-height-30 g-color-black g-bg-primary-opacity-0_6 g-bg-primary--hover g-color-white g-font-size-14 g-pos-abs g-bottom-0 g-right-65" href="javascript:;"
                           data-fancybox="lightbox-gallery--02"
                           data-src="{{ root }}assets/img-temp/600x550/img3.jpg"
                           data-caption="Lightbox Gallery">
                          <i class="icon-size-fullscreen"></i>
                        </a>
                        <img class="img-fluid" src="{{ root }}assets/img-temp/600x550/img3.jpg" alt="Image Description">
                      </div>
                      <div class="js-slide g-pos-rel">
                        <a class="js-fancybox d-block u-icon-v3 g-width-30 g-height-30 g-color-black g-bg-primary-opacity-0_6 g-bg-primary--hover g-color-white g-font-size-14 g-pos-abs g-bottom-0 g-right-65" href="javascript:;"
                           data-fancybox="lightbox-gallery--02"
                           data-src="{{ root }}assets/img-temp/600x550/img4.jpg"
                           data-caption="Lightbox Gallery">
                          <i class="icon-size-fullscreen"></i>
                        </a>
                        <img class="img-fluid" src="{{ root }}assets/img-temp/600x550/img4.jpg" alt="Image Description">
                      </div>
                    </div>
                    <!-- Products - Carousel Image -->

                    <div class="g-brd-x g-brd-gray-light-v3 g-bg-white">
                      <!-- Products - List of Details -->
                      <ul class="d-flex list-inline g-brd-y g-brd-gray-light-v3 mb-0">
                        <li class="list-inline-item col-4 g-font-weight-500 g-font-size-13 text-center g-px-0 g-py-17 mr-0">
                          <i class="align-middle g-color-gray-dark-v5 mr-1 icon-hotel-restaurant-022 u-line-icon-pro"></i>
                          4 Bed rm.
                        </li>
                        <li class="list-inline-item col-4 g-font-weight-500 g-font-size-13 text-center g-px-0 g-brd-x g-brd-gray-light-v3 g-py-17 mr-0">
                          <i class="align-middle g-color-gray-dark-v5 mr-1 icon-hotel-restaurant-008 u-line-icon-pro"></i>
                          3 Bath rm.
                        </li>
                        <li class="list-inline-item col-4 g-font-weight-500 g-font-size-13 text-center g-px-0 g-py-17 mr-0">
                          <i class="align-middle g-color-gray-dark-v5 mr-1 icon-real-estate-047 u-line-icon-pro"></i>
                          2,020 SQFT
                        </li>
                      </ul>
                      <!-- End Products - List of Details -->

                      <!-- Products - Address -->
                      <div class="g-pa-25">
                        <h3 class="g-font-weight-600 g-font-size-16">90 Karl Walk, Port Layla, BL2 0UR</h3>
                        <p class="g-font-size-13 mb-4">London, England</p>
                        <p class="g-color-gray-dark-v5 g-font-weight-500 g-font-size-13 mb-1">Agency: <a class="g-color-gray-dark-v5 g-color-primary--hover g-font-weight-400 g-text-underline--none--hover" href="#">Excellent Estate</a></p>
                        <p class="g-color-gray-dark-v5 g-font-weight-500 g-font-size-13 mb-0">Posted: <span class="g-color-gray-dark-v5 g-font-weight-400">12 days ago</a></p>
                      </div>
                      <!-- End Products - Address -->

                      <!-- Products - List of Details -->
                      <ul class="d-flex list-inline align-items-center g-brd-top g-brd-gray-light-v3 mb-0">
                        <li class="list-inline-item col-8 g-font-weight-600 g-font-size-17 text-center g-px-0 g-py-13 mr-0">
                          $7,800<span class="g-font-size-13">/mo</span>
                        </li>
                        <li class="list-inline-item col-2 g-px-0 mr-0">
                          <a class="d-block g-brd-x g-brd-gray-light-v3 g-color-gray-dark-v5 g-color-primary--hover g-font-weight-500 g-font-size-17 text-center g-text-underline--none--hover g-py-13" href="javascript:void(0);"
                             data-toggle="tooltip"
                             data-placement="top"
                             title="Add to Compare">
                            <i class="icon-finance-149 u-line-icon-pro"></i>
                          </a>
                        </li>
                        <li class="list-inline-item col-2 g-px-0 mr-0">
                          <a class="d-block g-color-gray-dark-v5 g-color-primary--hover g-font-weight-500 g-font-size-17 text-center g-text-underline--none--hover g-py-13" href="javascript:void(0);"
                             data-toggle="tooltip"
                             data-placement="top"
                             title="Save to Wishlist">
                            <i class="icon-medical-022 u-line-icon-pro"></i>
                          </a>
                        </li>
                      </ul>
                      <!-- End Products - List of Details -->
                    </div>
                    <a class="btn btn-block g-brd-top-none g-brd-gray-light-v3 g-brd-primary--hover g-color-white--hover g-bg-secondary g-bg-primary--hover g-font-weight-600 rounded-0 g-px-18 g-py-15" href="page-single-item-1.html">
                      See Details
                      <i class="align-middle ml-2 fa fa-angle-right"></i>
                    </a>
                  </article>
                  <!-- End Products -->
                </div>
              </div>
              <!-- End Products Advanced -->
            </div>

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

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

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

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).ready(function () {
                  // initialization of carousel
                  $.HSCore.components.HSCarousel.init('.js-carousel');
                });
              </script>
            </div>
          </div>

          {% set contentTarget = "#shortcode14" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Product Blocks v14 -->
    </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/slick-carousel/slick/slick.js"></script>
  <script src="{{ root }}assets/vendor/circles/circles.min.js"></script>
  <script src="{{ root }}assets/vendor/fancybox/jquery.fancybox.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>

  <!-- 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.rating.js"></script>
  <script src="{{ root }}assets/js/components/hs.carousel.js"></script>
  <script src="{{ root }}assets/js/components/hs.progress-bar.js"></script>
  <script src="{{ root }}assets/js/components/hs.count-qty.js"></script>
  <script src="{{ root }}assets/js/components/hs.popup.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.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 carousels
      $.HSCore.components.HSCarousel.init('.js-carousel');

      // initialization of rating
      $.HSCore.components.HSRating.init($('.js-rating'), {
        spacing: 4
      });

      // initialization of qty
      $.HSCore.components.HSCountQty.init('.js-quantity');

      // initialization of popups
      $.HSCore.components.HSPopup.init('.js-fancybox');
    });

    $(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
      });

      // initialization of horizontal progress bars
      var horizontalProgressBars = $.HSCore.components.HSProgressBar.init('.js-hr-progress-bar', {
        direction: 'horizontal',
        indicatorSelector: '.js-hr-progress-bar-indicator'
      });
    });
  </script>
</body>
</html>
