{# Settings #}
{% set root = "../../" %}
{% set mainNavActive_1 = "shortcodes" %}
{% set sidebarNavActive_1 = "shortcode-blocks-gallery-carousel" %}
{% set title = "Gallery Carousel" %}

{% 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/fancybox/jquery.fancybox.min.css">
<link rel="stylesheet" href="{{ root }}assets/vendor/slick-carousel/slick/slick.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 class="g-py-100">
      <!-- Gallery #01 -->
      <section class="container">
        <div class="text-center g-mb-50">
          <h2 class="h4">Gallery
            <span class="g-color-primary g-ml-5">#01</span>
          </h2>
        </div>

        <div id="shortcode6">
          <div class="shortcode-html">
            <div class="row">
              <div class="col-md-6 text-center g-mb-30">
                <div class="js-carousel text-center g-pb-30"
                     data-infinite="true"
                     data-arrows-classes="u-arrow-v1 g-absolute-centered--y g-width-35 g-height-40 g-font-size-18 g-color-gray g-bg-white g-mt-minus-10"
                     data-arrow-left-classes="fa fa-angle-left g-left-0"
                     data-arrow-right-classes="fa fa-angle-right g-right-0">
                  <div class="js-slide">
                    <a class="js-fancybox" href="javascript:;"
                       data-fancybox="lightbox-gallery--07-1"
                       data-src="{{ root }}assets/img-temp/900x600/img5.jpg"
                       data-caption="Lightbox Gallery"
                       data-animate-in="bounceInDown"
                       data-animate-out="bounceOutDown"
                       data-speed="1000"
                       data-overlay-blur-bg="true">
                      <img class="img-fluid g-rounded-6" src="{{ root }}assets/img-temp/900x600/img5.jpg" alt="Image Description">
                    </a>
                  </div>

                  <div class="js-slide">
                    <a class="js-fancybox" href="javascript:;"
                       data-fancybox="lightbox-gallery--07-1"
                       data-src="{{ root }}assets/img-temp/900x600/img4.jpg"
                       data-caption="Lightbox Gallery"
                       data-animate-in="bounceInDown"
                       data-animate-out="bounceOutDown"
                       data-speed="1000"
                       data-overlay-blur-bg="true">
                      <img class="img-fluid g-rounded-6" src="{{ root }}assets/img-temp/900x600/img4.jpg" alt="Image Description">
                    </a>
                  </div>
                </div>

                <h3 class="h4 g-color-black">Nulla ipsum dolor</h3>
                <p>Consectetur adipiscing elitut eleifend nisl</p>
              </div>
              <div class="col-md-6 text-center g-mb-30">
                <div class="js-carousel text-center g-pb-30"
                     data-infinite="true"
                     data-arrows-classes="u-arrow-v1 g-absolute-centered--y g-width-35 g-height-40 g-font-size-18 g-color-gray g-bg-white g-mt-minus-10"
                     data-arrow-left-classes="fa fa-angle-left g-left-0"
                     data-arrow-right-classes="fa fa-angle-right g-right-0">
                  <div class="js-slide">
                    <a class="js-fancybox" href="javascript:;"
                       data-fancybox="lightbox-gallery--07-2"
                       data-src="{{ root }}assets/img-temp/900x600/img6.jpg"
                       data-caption="Lightbox Gallery"
                       data-animate-in="bounceInDown"
                       data-animate-out="bounceOutDown"
                       data-speed="1000"
                       data-overlay-blur-bg="true">
                      <img class="img-fluid g-rounded-6" src="{{ root }}assets/img-temp/900x600/img6.jpg" alt="Image Description">
                    </a>
                  </div>

                  <div class="js-slide">
                    <a class="js-fancybox" href="javascript:;"
                       data-fancybox="lightbox-gallery--07-2"
                       data-src="{{ root }}assets/img-temp/900x600/img2.jpg"
                       data-caption="Lightbox Gallery"
                       data-animate-in="bounceInDown"
                       data-animate-out="bounceOutDown"
                       data-speed="1000"
                       data-overlay-blur-bg="true">
                      <img class="img-fluid g-rounded-6" src="{{ root }}assets/img-temp/900x600/img2.jpg" alt="Image Description">
                    </a>
                  </div>
                </div>

                <h3 class="h4 g-color-black">Habitasse platea</h3>
                <p>Consectetur adipiscing elitut eleifend nisl</p>
              </div>
            </div>

            <div class="row">
              <div class="col-md-6 text-center g-mb-30">
                <div class="js-carousel text-center g-pb-30"
                     data-infinite="true"
                     data-arrows-classes="u-arrow-v1 g-absolute-centered--y g-width-35 g-height-40 g-font-size-18 g-color-gray g-bg-white g-mt-minus-10"
                     data-arrow-left-classes="fa fa-angle-left g-left-0"
                     data-arrow-right-classes="fa fa-angle-right g-right-0">
                  <div class="js-slide">
                    <a class="js-fancybox" href="javascript:;"
                       data-fancybox="lightbox-gallery--07-3"
                       data-src="{{ root }}assets/img-temp/900x600/img7.jpg"
                       data-caption="Lightbox Gallery"
                       data-animate-in="bounceInDown"
                       data-animate-out="bounceOutDown"
                       data-speed="1000"
                       data-overlay-blur-bg="true">
                      <img class="img-fluid g-rounded-6" src="{{ root }}assets/img-temp/900x600/img7.jpg" alt="Image Description">
                    </a>
                  </div>

                  <div class="js-slide">
                    <a class="js-fancybox" href="javascript:;"
                       data-fancybox="lightbox-gallery--07-3"
                       data-src="{{ root }}assets/img-temp/900x600/img3.jpg"
                       data-caption="Lightbox Gallery"
                       data-animate-in="bounceInDown"
                       data-animate-out="bounceOutDown"
                       data-speed="1000"
                       data-overlay-blur-bg="true">
                      <img class="img-fluid g-rounded-6" src="{{ root }}assets/img-temp/900x600/img3.jpg" alt="Image Description">
                    </a>
                  </div>
                </div>

                <h3 class="h4 g-color-black">Adipiscing elitut</h3>
                <p>Consectetur adipiscing elitut eleifend nisl</p>
              </div>

              <div class="col-md-6 text-center g-mb-30">
                <div class="js-carousel text-center g-pb-30"
                     data-infinite="true"
                     data-arrows-classes="u-arrow-v1 g-absolute-centered--y g-width-35 g-height-40 g-font-size-18 g-color-gray g-bg-white g-mt-minus-10"
                     data-arrow-left-classes="fa fa-angle-left g-left-0"
                     data-arrow-right-classes="fa fa-angle-right g-right-0">
                  <div class="js-slide">
                    <a class="js-fancybox" href="javascript:;"
                       data-fancybox="lightbox-gallery--07-4"
                       data-src="{{ root }}assets/img-temp/900x600/img3.jpg"
                       data-caption="Lightbox Gallery"
                       data-animate-in="bounceInDown"
                       data-animate-out="bounceOutDown"
                       data-speed="1000"
                       data-overlay-blur-bg="true">
                      <img class="img-fluid g-rounded-6" src="{{ root }}assets/img-temp/900x600/img3.jpg" alt="Image Description">
                    </a>
                  </div>

                  <div class="js-slide">
                    <a class="js-fancybox" href="javascript:;"
                       data-fancybox="lightbox-gallery--07-4"
                       data-src="{{ root }}assets/img-temp/900x600/img4.jpg"
                       data-caption="Lightbox Gallery"
                       data-animate-in="bounceInDown"
                       data-animate-out="bounceOutDown"
                       data-speed="1000"
                       data-overlay-blur-bg="true">
                      <img class="img-fluid g-rounded-6" src="{{ root }}assets/img-temp/900x600/img4.jpg" alt="Image Description">
                    </a>
                  </div>
                </div>

                <h3 class="h4 g-color-black">Eleifend nisl</h3>
                <p>Consectetur adipiscing elitut eleifend nisl</p>
              </div>
            </div>
          </div>

          <div class="shortcode-styles">
            <!-- CSS Implementing Plugins -->
            <link type="text/plain" rel="stylesheet" href="{{ root }}assets/vendor/icon-hs/style.css">
            <link type="text/plain" rel="stylesheet" href="{{ root }}assets/vendor/fancybox/jquery.fancybox.min.css">
            <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/fancybox/jquery.fancybox.min.js"></script>
            <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.popup.js"></script>
            <script type="text/plain" src="{{ root }}assets/js/components/hs.carousel.js"></script>

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

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

        {% set SCExtendedClasses = "container" %}
        {% set contentTarget = "#shortcode6" %}
        {% set modalID = "#modalMarkup" %}
        {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
      </section>
      <!-- End Gallery #01 -->

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

      <!-- Gallery #02 -->
      <section class="container">
        <div class="text-center g-mb-50">
          <h2 class="h4">Gallery
            <span class="g-color-primary g-ml-5">#02</span>
          </h2>
        </div>

        <div class="row justify-content-md-center">
          <div class="col-md-6">
            <div id="shortcode8">
              <div class="shortcode-html">
                <div id="carousel-08-1" class="js-carousel text-center g-mb-20"
                     data-infinite="true"
                     data-arrows-classes="u-arrow-v1 g-absolute-centered--y g-width-35 g-height-40 g-font-size-18 g-color-gray g-bg-white g-mt-minus-10"
                     data-arrow-left-classes="fa fa-angle-left g-left-0"
                     data-arrow-right-classes="fa fa-angle-right g-right-0"
                     data-nav-for="#carousel-08-2">
                  <div class="js-slide">
                    <a class="js-fancybox d-block g-pos-rel" href="javascript:;"
                       data-fancybox="lightbox-gallery--08-1"
                       data-src="{{ root }}assets/img-temp/500x450/img1.jpg"
                       data-caption="Lightbox Gallery"
                       data-animate-in="bounceInDown"
                       data-animate-out="bounceOutDown"
                       data-speed="1000"
                       data-overlay-blur-bg="true">
                      <img class="img-fluid w-100" src="{{ root }}assets/img-temp/500x450/img1.jpg" alt="Image Description">
                    </a>
                  </div>

                  <div class="js-slide">
                    <a class="js-fancybox d-block g-pos-rel" href="javascript:;"
                       data-fancybox="lightbox-gallery--08-1"
                       data-src="{{ root }}assets/img-temp/500x450/img2.jpg"
                       data-caption="Lightbox Gallery"
                       data-animate-in="bounceInDown"
                       data-animate-out="bounceOutDown"
                       data-speed="1000"
                       data-overlay-blur-bg="true">
                      <img class="img-fluid w-100" src="{{ root }}assets/img-temp/500x450/img2.jpg" alt="Image Description">
                    </a>
                  </div>

                  <div class="js-slide">
                    <a class="js-fancybox d-block g-pos-rel" href="javascript:;"
                       data-fancybox="lightbox-gallery--08-1"
                       data-src="{{ root }}assets/img-temp/500x450/img3.jpg"
                       data-caption="Lightbox Gallery"
                       data-animate-in="bounceInDown"
                       data-animate-out="bounceOutDown"
                       data-speed="1000"
                       data-overlay-blur-bg="true">
                      <img class="img-fluid w-100" src="{{ root }}assets/img-temp/500x450/img3.jpg" alt="Image Description">
                    </a>
                  </div>

                  <div class="js-slide">
                    <a class="js-fancybox d-block g-pos-rel" href="javascript:;"
                       data-fancybox="lightbox-gallery--08-1"
                       data-src="{{ root }}assets/img-temp/500x450/img4.jpg"
                       data-caption="Lightbox Gallery"
                       data-animate-in="bounceInDown"
                       data-animate-out="bounceOutDown"
                       data-speed="1000"
                       data-overlay-blur-bg="true">
                      <img class="img-fluid w-100" src="{{ root }}assets/img-temp/500x450/img4.jpg" alt="Image Description">
                    </a>
                  </div>

                  <div class="js-slide">
                    <a class="js-fancybox d-block g-pos-rel" href="javascript:;"
                       data-fancybox="lightbox-gallery--08-1"
                       data-src="{{ root }}assets/img-temp/500x450/img5.jpg"
                       data-caption="Lightbox Gallery"
                       data-animate-in="bounceInDown"
                       data-animate-out="bounceOutDown"
                       data-speed="1000"
                       data-overlay-blur-bg="true">
                      <img class="img-fluid w-100" src="{{ root }}assets/img-temp/500x450/img5.jpg" alt="Image Description">
                    </a>
                  </div>

                  <div class="js-slide">
                    <a class="js-fancybox d-block g-pos-rel" href="javascript:;"
                       data-fancybox="lightbox-gallery--08-1"
                       data-src="{{ root }}assets/img-temp/500x450/img6.jpg"
                       data-caption="Lightbox Gallery"
                       data-animate-in="bounceInDown"
                       data-animate-out="bounceOutDown"
                       data-speed="1000"
                       data-overlay-blur-bg="true">
                      <img class="img-fluid w-100" src="{{ root }}assets/img-temp/500x450/img6.jpg" alt="Image Description">
                    </a>
                  </div>
                </div>

                <div id="carousel-08-2" class="js-carousel text-center g-mx-minus-10 u-carousel-v3"
                     data-infinite="true"
                     data-center-mode="true"
                     data-slides-show="4"
                     data-is-thumbs="true"
                     data-nav-for="#carousel-08-1">
                  <div class="js-slide g-px-10">
                    <img class="img-fluid w-100" src="{{ root }}assets/img-temp/500x450/img1.jpg" alt="Image Description">
                  </div>

                  <div class="js-slide g-px-10">
                    <img class="img-fluid w-100" src="{{ root }}assets/img-temp/500x450/img2.jpg" alt="Image Description">
                  </div>

                  <div class="js-slide g-px-10">
                    <img class="img-fluid w-100" src="{{ root }}assets/img-temp/500x450/img3.jpg" alt="Image Description">
                  </div>

                  <div class="js-slide g-px-10">
                    <img class="img-fluid w-100" src="{{ root }}assets/img-temp/500x450/img4.jpg" alt="Image Description">
                  </div>

                  <div class="js-slide g-px-10">
                    <img class="img-fluid w-100" src="{{ root }}assets/img-temp/500x450/img5.jpg" alt="Image Description">
                  </div>

                  <div class="js-slide g-px-10">
                    <img class="img-fluid w-100" src="{{ root }}assets/img-temp/500x450/img6.jpg" alt="Image Description">
                  </div>
                </div>
              </div>

              <div class="shortcode-styles">
                <!-- CSS Implementing Plugins -->
                <link type="text/plain" rel="stylesheet" href="{{ root }}assets/vendor/icon-hs/style.css">
                <link type="text/plain" rel="stylesheet" href="{{ root }}assets/vendor/fancybox/jquery.fancybox.min.css">
                <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/fancybox/jquery.fancybox.min.js"></script>
                <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.popup.js"></script>
                <script type="text/plain" src="{{ root }}assets/js/components/hs.carousel.js"></script>

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

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

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

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

      <!-- Gallery #03 -->
      <section class="container">
        <div class="text-center g-mb-50">
          <h2 class="h4">Gallery
            <span class="g-color-primary g-ml-5">#03</span>
          </h2>
        </div>

        <div class="row">
          <div class="col-md-8 ml-md-auto mr-md-auto">
            <div id="shortcode9">
              <div class="shortcode-html">
                <div class="row">
                  <div class="col-md-10">
                    <div id="carousel-09-1" class="js-carousel text-center g-font-size-0 g-mb-20 g-mb-0--sm"
                         data-infinite="true"
                         data-vertical="true"
                         data-arrows-classes="u-arrow-v1 g-absolute-centered--x g-width-35 g-height-35 g-font-size-18 g-color-gray g-bg-white"
                         data-arrow-left-classes="fa fa-angle-up g-top-0"
                         data-arrow-right-classes="fa fa-angle-down g-bottom-0"
                         data-nav-for="#carousel-09-2">
                      <div class="js-slide">
                        <a class="js-fancybox d-block g-pos-rel" href="javascript:;"
                           data-fancybox="lightbox-gallery--09-1"
                           data-src="{{ root }}assets/img-temp/900x600/img3.jpg"
                           data-caption="Lightbox Gallery"
                           data-animate-in="bounceInDown"
                           data-animate-out="bounceOutDown"
                           data-speed="1000"
                           data-overlay-blur-bg="true">
                          <img class="img-fluid w-100" src="{{ root }}assets/img-temp/900x600/img3.jpg" alt="Image Description">
                        </a>
                      </div>

                      <div class="js-slide">
                        <a class="js-fancybox d-block g-pos-rel" href="javascript:;"
                           data-fancybox="lightbox-gallery--09-1"
                           data-src="{{ root }}assets/img-temp/900x600/img4.jpg"
                           data-caption="Lightbox Gallery"
                           data-animate-in="bounceInDown"
                           data-animate-out="bounceOutDown"
                           data-speed="1000"
                           data-overlay-blur-bg="true">
                          <img class="img-fluid w-100" src="{{ root }}assets/img-temp/900x600/img4.jpg" alt="Image Description">
                        </a>
                      </div>

                      <div class="js-slide">
                        <a class="js-fancybox d-block g-pos-rel" href="javascript:;"
                           data-fancybox="lightbox-gallery--09-1"
                           data-src="{{ root }}assets/img-temp/900x600/img5.jpg"
                           data-caption="Lightbox Gallery"
                           data-animate-in="bounceInDown"
                           data-animate-out="bounceOutDown"
                           data-speed="1000"
                           data-overlay-blur-bg="true">
                          <img class="img-fluid w-100" src="{{ root }}assets/img-temp/900x600/img5.jpg" alt="Image Description">
                        </a>
                      </div>

                      <div class="js-slide">
                        <a class="js-fancybox d-block g-pos-rel" href="javascript:;"
                           data-fancybox="lightbox-gallery--09-1"
                           data-src="{{ root }}assets/img-temp/900x600/img6.jpg"
                           data-caption="Lightbox Gallery"
                           data-animate-in="bounceInDown"
                           data-animate-out="bounceOutDown"
                           data-speed="1000"
                           data-overlay-blur-bg="true">
                          <img class="img-fluid w-100" src="{{ root }}assets/img-temp/900x600/img6.jpg" alt="Image Description">
                        </a>
                      </div>

                      <div class="js-slide">
                        <a class="js-fancybox d-block g-pos-rel" href="javascript:;"
                           data-fancybox="lightbox-gallery--09-1"
                           data-src="{{ root }}assets/img-temp/900x600/img1.jpg"
                           data-caption="Lightbox Gallery"
                           data-animate-in="bounceInDown"
                           data-animate-out="bounceOutDown"
                           data-speed="1000"
                           data-overlay-blur-bg="true">
                          <img class="img-fluid w-100" src="{{ root }}assets/img-temp/900x600/img1.jpg" alt="Image Description">
                        </a>
                      </div>

                      <div class="js-slide">
                        <a class="js-fancybox d-block g-pos-rel" href="javascript:;"
                           data-fancybox="lightbox-gallery--09-1"
                           data-src="{{ root }}assets/img-temp/900x600/img2.jpg"
                           data-caption="Lightbox Gallery"
                           data-animate-in="bounceInDown"
                           data-animate-out="bounceOutDown"
                           data-speed="1000"
                           data-overlay-blur-bg="true">
                          <img class="img-fluid w-100" src="{{ root }}assets/img-temp/900x600/img2.jpg" alt="Image Description">
                        </a>
                      </div>
                    </div>
                  </div>

                  <div class="col-md-2">
                    <div id="carousel-09-2" class="js-carousel text-center u-carousel-v3 g-mx-minus-10 g-mx-minus-0--sm g-my-minus-5--sm"
                         data-infinite="true"
                         data-center-mode="true"
                         data-vertical="true"
                         data-slides-show="4"
                         data-is-thumbs="true"
                         data-nav-for="#carousel-09-1">
                      <div class="js-slide g-px-10 g-px-0--sm g-py-5--sm">
                        <img class="img-fluid w-100" src="{{ root }}assets/img-temp/900x600/img3.jpg" alt="Image Description">
                      </div>

                      <div class="js-slide g-px-10 g-px-0--sm g-py-5--sm">
                        <img class="img-fluid w-100" src="{{ root }}assets/img-temp/900x600/img4.jpg" alt="Image Description">
                      </div>

                      <div class="js-slide g-px-10 g-px-0--sm g-py-5--sm">
                        <img class="img-fluid w-100" src="{{ root }}assets/img-temp/900x600/img5.jpg" alt="Image Description">
                      </div>

                      <div class="js-slide g-px-10 g-px-0--sm g-py-5--sm">
                        <img class="img-fluid w-100" src="{{ root }}assets/img-temp/900x600/img6.jpg" alt="Image Description">
                      </div>

                      <div class="js-slide g-px-10 g-px-0--sm g-py-5--sm">
                        <img class="img-fluid w-100" src="{{ root }}assets/img-temp/900x600/img1.jpg" alt="Image Description">
                      </div>

                      <div class="js-slide g-px-10 g-px-0--sm g-py-5--sm">
                        <img class="img-fluid w-100" src="{{ root }}assets/img-temp/900x600/img2.jpg" alt="Image Description">
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="shortcode-styles">
                <!-- CSS Implementing Plugins -->
                <link type="text/plain" rel="stylesheet" href="{{ root }}assets/vendor/icon-hs/style.css">
                <link type="text/plain" rel="stylesheet" href="{{ root }}assets/vendor/fancybox/jquery.fancybox.min.css">
                <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/fancybox/jquery.fancybox.min.js"></script>
                <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.popup.js"></script>
                <script type="text/plain" src="{{ root }}assets/js/components/hs.carousel.js"></script>

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

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

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

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

      <!-- Gallery #04 -->
      <section class="container">
        <div class="text-center g-mb-50">
          <h2 class="h4">Gallery
            <span class="g-color-primary g-ml-5">#04</span>
          </h2>
        </div>

        <div id="shortcode10">
          <div class="shortcode-html">
            <div class="js-carousel text-center g-font-size-0 g-pb-20"
                 data-infinite="true"
                 data-center-padding="60px"
                 data-slides-show="5"
                 data-slides-scroll="5"
                 data-rows="3"
                 data-arrows-classes="u-arrow-v1 g-absolute-centered--y g-width-40 g-height-40 g-font-size-18 g-color-white g-bg-primary"
                 data-arrow-left-classes="fa fa-angle-left g-left-0"
                 data-arrow-right-classes="fa fa-angle-right g-right-0"
                 data-pagi-classes="u-carousel-indicators-v1 g-absolute-centered--x g-bottom-0"
                 data-responsive='[{
                   "breakpoint": 768,
                   "settings": {
                     "slidesToShow": 2,
                     "slidesToScroll": 2,
                     "centerPadding": 0
                   }
                 }]'>
              <div class="js-slide">
                <a class="js-fancybox d-block u-block-hover u-bg-overlay g-bg-black-opacity-0_3--after g-bg-primary-opacity-0_8--hover--after g-transition-0_3" href="javascript:;"
                   data-fancybox="lightbox-gallery--10"
                   data-src="{{ root }}assets/img-temp/900x600/img1.jpg"
                   data-caption="Lightbox Gallery">
                  <img class="img-fluid" src="{{ root }}assets/img-temp/900x600/img1.jpg" alt="Image Description">

                  <span class="u-block-hover__additional--fade g-color-white g-z-index-2">
                    <i class="hs-icon hs-icon-magnifier g-absolute-centered g-font-size-25"></i>
                  </span>
                </a>
              </div>

              <div class="js-slide">
                <a class="js-fancybox d-block u-block-hover u-bg-overlay g-bg-black-opacity-0_3--after g-bg-primary-opacity-0_8--hover--after g-transition-0_3" href="javascript:;"
                   data-fancybox="lightbox-gallery--10"
                   data-src="{{ root }}assets/img-temp/900x600/img2.jpg"
                   data-caption="Lightbox Gallery">
                  <img class="img-fluid" src="{{ root }}assets/img-temp/900x600/img2.jpg" alt="Image Description">

                  <span class="u-block-hover__additional--fade g-color-white g-z-index-2">
                    <i class="hs-icon hs-icon-magnifier g-absolute-centered g-font-size-25"></i>
                  </span>
                </a>
              </div>

              <div class="js-slide">
                <a class="js-fancybox d-block u-block-hover u-bg-overlay g-bg-black-opacity-0_3--after g-bg-primary-opacity-0_8--hover--after g-transition-0_3" href="javascript:;"
                   data-fancybox="lightbox-gallery--10"
                   data-src="{{ root }}assets/img-temp/900x600/img3.jpg"
                   data-caption="Lightbox Gallery">
                  <img class="img-fluid" src="{{ root }}assets/img-temp/900x600/img3.jpg" alt="Image Description">

                  <span class="u-block-hover__additional--fade g-color-white g-z-index-2">
                    <i class="hs-icon hs-icon-magnifier g-absolute-centered g-font-size-25"></i>
                  </span>
                </a>
              </div>

              <div class="js-slide">
                <a class="js-fancybox d-block u-block-hover u-bg-overlay g-bg-black-opacity-0_3--after g-bg-primary-opacity-0_8--hover--after g-transition-0_3" href="javascript:;"
                   data-fancybox="lightbox-gallery--10"
                   data-src="{{ root }}assets/img-temp/900x600/img4.jpg"
                   data-caption="Lightbox Gallery">
                  <img class="img-fluid" src="{{ root }}assets/img-temp/900x600/img4.jpg" alt="Image Description">

                  <span class="u-block-hover__additional--fade g-color-white g-z-index-2">
                    <i class="hs-icon hs-icon-magnifier g-absolute-centered g-font-size-25"></i>
                  </span>
                </a>
              </div>

              <div class="js-slide">
                <a class="js-fancybox d-block u-block-hover u-bg-overlay g-bg-black-opacity-0_3--after g-bg-primary-opacity-0_8--hover--after g-transition-0_3" href="javascript:;"
                   data-fancybox="lightbox-gallery--10"
                   data-src="{{ root }}assets/img-temp/900x600/img5.jpg"
                   data-caption="Lightbox Gallery">
                  <img class="img-fluid" src="{{ root }}assets/img-temp/900x600/img5.jpg" alt="Image Description">

                  <span class="u-block-hover__additional--fade g-color-white g-z-index-2">
                    <i class="hs-icon hs-icon-magnifier g-absolute-centered g-font-size-25"></i>
                  </span>
                </a>
              </div>

              <div class="js-slide">
                <a class="js-fancybox d-block u-block-hover u-bg-overlay g-bg-black-opacity-0_3--after g-bg-primary-opacity-0_8--hover--after g-transition-0_3" href="javascript:;"
                   data-fancybox="lightbox-gallery--10"
                   data-src="{{ root }}assets/img-temp/900x600/img6.jpg"
                   data-caption="Lightbox Gallery">
                  <img class="img-fluid" src="{{ root }}assets/img-temp/900x600/img6.jpg" alt="Image Description">

                  <span class="u-block-hover__additional--fade g-color-white g-z-index-2">
                    <i class="hs-icon hs-icon-magnifier g-absolute-centered g-font-size-25"></i>
                  </span>
                </a>
              </div>

              <div class="js-slide">
                <a class="js-fancybox d-block u-block-hover u-bg-overlay g-bg-black-opacity-0_3--after g-bg-primary-opacity-0_8--hover--after g-transition-0_3" href="javascript:;"
                   data-fancybox="lightbox-gallery--10"
                   data-src="{{ root }}assets/img-temp/900x600/img1.jpg"
                   data-caption="Lightbox Gallery">
                  <img class="img-fluid" src="{{ root }}assets/img-temp/900x600/img1.jpg" alt="Image Description">

                  <span class="u-block-hover__additional--fade g-color-white g-z-index-2">
                    <i class="hs-icon hs-icon-magnifier g-absolute-centered g-font-size-25"></i>
                  </span>
                </a>
              </div>

              <div class="js-slide">
                <a class="js-fancybox d-block u-block-hover u-bg-overlay g-bg-black-opacity-0_3--after g-bg-primary-opacity-0_8--hover--after g-transition-0_3" href="javascript:;"
                   data-fancybox="lightbox-gallery--10"
                   data-src="{{ root }}assets/img-temp/900x600/img2.jpg"
                   data-caption="Lightbox Gallery">
                  <img class="img-fluid" src="{{ root }}assets/img-temp/900x600/img2.jpg" alt="Image Description">

                  <span class="u-block-hover__additional--fade g-color-white g-z-index-2">
                    <i class="hs-icon hs-icon-magnifier g-absolute-centered g-font-size-25"></i>
                  </span>
                </a>
              </div>

              <div class="js-slide">
                <a class="js-fancybox d-block u-block-hover u-bg-overlay g-bg-black-opacity-0_3--after g-bg-primary-opacity-0_8--hover--after g-transition-0_3" href="javascript:;"
                   data-fancybox="lightbox-gallery--10"
                   data-src="{{ root }}assets/img-temp/900x600/img3.jpg"
                   data-caption="Lightbox Gallery">
                  <img class="img-fluid" src="{{ root }}assets/img-temp/900x600/img3.jpg" alt="Image Description">

                  <span class="u-block-hover__additional--fade g-color-white g-z-index-2">
                    <i class="hs-icon hs-icon-magnifier g-absolute-centered g-font-size-25"></i>
                  </span>
                </a>
              </div>

              <div class="js-slide">
                <a class="js-fancybox d-block u-block-hover u-bg-overlay g-bg-black-opacity-0_3--after g-bg-primary-opacity-0_8--hover--after g-transition-0_3" href="javascript:;"
                   data-fancybox="lightbox-gallery--10"
                   data-src="{{ root }}assets/img-temp/900x600/img4.jpg"
                   data-caption="Lightbox Gallery">
                  <img class="img-fluid" src="{{ root }}assets/img-temp/900x600/img4.jpg" alt="Image Description">

                  <span class="u-block-hover__additional--fade g-color-white g-z-index-2">
                    <i class="hs-icon hs-icon-magnifier g-absolute-centered g-font-size-25"></i>
                  </span>
                </a>
              </div>

              <div class="js-slide">
                <a class="js-fancybox d-block u-block-hover u-bg-overlay g-bg-black-opacity-0_3--after g-bg-primary-opacity-0_8--hover--after g-transition-0_3" href="javascript:;"
                   data-fancybox="lightbox-gallery--10"
                   data-src="{{ root }}assets/img-temp/900x600/img5.jpg"
                   data-caption="Lightbox Gallery">
                  <img class="img-fluid" src="{{ root }}assets/img-temp/900x600/img5.jpg" alt="Image Description">

                  <span class="u-block-hover__additional--fade g-color-white g-z-index-2">
                    <i class="hs-icon hs-icon-magnifier g-absolute-centered g-font-size-25"></i>
                  </span>
                </a>
              </div>

              <div class="js-slide">
                <a class="js-fancybox d-block u-block-hover u-bg-overlay g-bg-black-opacity-0_3--after g-bg-primary-opacity-0_8--hover--after g-transition-0_3" href="javascript:;"
                   data-fancybox="lightbox-gallery--10"
                   data-src="{{ root }}assets/img-temp/900x600/img6.jpg"
                   data-caption="Lightbox Gallery">
                  <img class="img-fluid" src="{{ root }}assets/img-temp/900x600/img6.jpg" alt="Image Description">

                  <span class="u-block-hover__additional--fade g-color-white g-z-index-2">
                    <i class="hs-icon hs-icon-magnifier g-absolute-centered g-font-size-25"></i>
                  </span>
                </a>
              </div>

              <div class="js-slide">
                <a class="js-fancybox d-block u-block-hover u-bg-overlay g-bg-black-opacity-0_3--after g-bg-primary-opacity-0_8--hover--after g-transition-0_3" href="javascript:;"
                   data-fancybox="lightbox-gallery--10"
                   data-src="{{ root }}assets/img-temp/900x600/img1.jpg"
                   data-caption="Lightbox Gallery">
                  <img class="img-fluid" src="{{ root }}assets/img-temp/900x600/img1.jpg" alt="Image Description">

                  <span class="u-block-hover__additional--fade g-color-white g-z-index-2">
                    <i class="hs-icon hs-icon-magnifier g-absolute-centered g-font-size-25"></i>
                  </span>
                </a>
              </div>

              <div class="js-slide">
                <a class="js-fancybox d-block u-block-hover u-bg-overlay g-bg-black-opacity-0_3--after g-bg-primary-opacity-0_8--hover--after g-transition-0_3" href="javascript:;"
                   data-fancybox="lightbox-gallery--10"
                   data-src="{{ root }}assets/img-temp/900x600/img2.jpg"
                   data-caption="Lightbox Gallery">
                  <img class="img-fluid" src="{{ root }}assets/img-temp/900x600/img2.jpg" alt="Image Description">

                  <span class="u-block-hover__additional--fade g-color-white g-z-index-2">
                    <i class="hs-icon hs-icon-magnifier g-absolute-centered g-font-size-25"></i>
                  </span>
                </a>
              </div>

              <div class="js-slide">
                <a class="js-fancybox d-block u-block-hover u-bg-overlay g-bg-black-opacity-0_3--after g-bg-primary-opacity-0_8--hover--after g-transition-0_3" href="javascript:;"
                   data-fancybox="lightbox-gallery--10"
                   data-src="{{ root }}assets/img-temp/900x600/img3.jpg"
                   data-caption="Lightbox Gallery">
                  <img class="img-fluid" src="{{ root }}assets/img-temp/900x600/img3.jpg" alt="Image Description">

                  <span class="u-block-hover__additional--fade g-color-white g-z-index-2">
                    <i class="hs-icon hs-icon-magnifier g-absolute-centered g-font-size-25"></i>
                  </span>
                </a>
              </div>

              <div class="js-slide">
                <a class="js-fancybox d-block u-block-hover u-bg-overlay g-bg-black-opacity-0_3--after g-bg-primary-opacity-0_8--hover--after g-transition-0_3" href="javascript:;"
                   data-fancybox="lightbox-gallery--10"
                   data-src="{{ root }}assets/img-temp/900x600/img4.jpg"
                   data-caption="Lightbox Gallery">
                  <img class="img-fluid" src="{{ root }}assets/img-temp/900x600/img4.jpg" alt="Image Description">

                  <span class="u-block-hover__additional--fade g-color-white g-z-index-2">
                    <i class="hs-icon hs-icon-magnifier g-absolute-centered g-font-size-25"></i>
                  </span>
                </a>
              </div>

              <div class="js-slide">
                <a class="js-fancybox d-block u-block-hover u-bg-overlay g-bg-black-opacity-0_3--after g-bg-primary-opacity-0_8--hover--after g-transition-0_3" href="javascript:;"
                   data-fancybox="lightbox-gallery--10"
                   data-src="{{ root }}assets/img-temp/900x600/img5.jpg"
                   data-caption="Lightbox Gallery">
                  <img class="img-fluid" src="{{ root }}assets/img-temp/900x600/img5.jpg" alt="Image Description">

                  <span class="u-block-hover__additional--fade g-color-white g-z-index-2">
                    <i class="hs-icon hs-icon-magnifier g-absolute-centered g-font-size-25"></i>
                  </span>
                </a>
              </div>

              <div class="js-slide">
                <a class="js-fancybox d-block u-block-hover u-bg-overlay g-bg-black-opacity-0_3--after g-bg-primary-opacity-0_8--hover--after g-transition-0_3" href="javascript:;"
                   data-fancybox="lightbox-gallery--10"
                   data-src="{{ root }}assets/img-temp/900x600/img6.jpg"
                   data-caption="Lightbox Gallery">
                  <img class="img-fluid" src="{{ root }}assets/img-temp/900x600/img6.jpg" alt="Image Description">

                  <span class="u-block-hover__additional--fade g-color-white g-z-index-2">
                    <i class="hs-icon hs-icon-magnifier g-absolute-centered g-font-size-25"></i>
                  </span>
                </a>
              </div>
            </div>
          </div>

          <div class="shortcode-styles">
            <!-- CSS Implementing Plugins -->
            <link type="text/plain" rel="stylesheet" href="{{ root }}assets/vendor/icon-hs/style.css">
            <link type="text/plain" rel="stylesheet" href="{{ root }}assets/vendor/fancybox/jquery.fancybox.min.css">
            <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/fancybox/jquery.fancybox.min.js"></script>
            <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.popup.js"></script>
            <script type="text/plain" src="{{ root }}assets/js/components/hs.carousel.js"></script>

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

                // 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" %}
      </section>
      <!-- End Gallery #04 -->
    </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/masonry/dist/masonry.pkgd.min.js"></script>
  <script src="{{ root }}assets/vendor/imagesloaded/imagesloaded.pkgd.min.js"></script>
  <script src="{{ root }}assets/vendor/fancybox/jquery.fancybox.min.js"></script>
  <script src="{{ root }}assets/vendor/slick-carousel/slick/slick.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.carousel.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 carousel
      $.HSCore.components.HSCarousel.init('.js-carousel');

      // initialization of masonry
      $('.masonry-grid').imagesLoaded().then(function () {
        $('.masonry-grid').masonry({
          columnWidth: '.masonry-grid-sizer',
          itemSelector: '.masonry-grid-item',
          percentPosition: true
        });
      });

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

      // initialization of popups with media
      $.HSCore.components.HSPopup.init('.js-fancybox-media', {
        helpers: {
          media: {},
          overlay: {
            css: {
              'background': 'rgba(255, 255, 255, .8)'
            }
          }
        }
      });
    });

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

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

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