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

{% 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>
        <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="shortcode16">
          <div class="shortcode-html">
            <div class="row no-gutters">
              <div class="col-md-4 g-mb-30 g-mb-0--md">
                <article class="text-center u-block-hover g-bg-gray-dark-v2--hover g-transition-0_4">
                  <figure>
                    <img class="img-fluid" src="{{ root }}assets/img-temp/900x600/img1.jpg" alt="Image Description">
                  </figure>
                  <h3 class="h6 text-uppercase g-font-weight-600 g-letter-spacing-2 g-color-white--hover g-pa-30-20 g-mb-0">
                    <em class="d-block g-font-size-12 g-font-style-normal g-font-weight-300 g-color-primary--hover g-mb-10">Popularised</em> Ipsum passages
                  </h3>
                  <a class="js-fancybox u-link-v2" href="javascript:;"
                     data-fancybox="lightbox-gallery--16"
                     data-src="{{ root }}assets/img-temp/900x600/img1.jpg"
                     data-animate-in="bounceInDown"
                     data-animate-out="bounceOutDown"
                     data-speed="1000"
                     data-overlay-blur-bg="true"
                     data-caption="Lightbox Gallery">
                  </a>
                </article>
              </div>
              <div class="col-md-4 g-mb-30 g-mb-0--md">
                <article class="text-center u-block-hover g-bg-gray-dark-v2--hover g-transition-0_4">
                  <figure>
                    <img class="img-fluid" src="{{ root }}assets/img-temp/900x600/img2.jpg" alt="Image Description">
                  </figure>
                  <h3 class="h6 text-uppercase g-font-weight-600 g-letter-spacing-2 g-color-white--hover g-pa-30-20 g-mb-0">
                    <em class="d-block g-font-size-12 g-font-style-normal g-font-weight-300 g-color-primary--hover g-mb-10">Dictumst</em> Habitasse platea
                  </h3>
                  <a class="js-fancybox u-link-v2" href="javascript:;"
                     data-fancybox="lightbox-gallery--16"
                     data-src="{{ root }}assets/img-temp/900x600/img2.jpg"
                     data-animate-in="bounceInDown"
                     data-animate-out="bounceOutDown"
                     data-speed="1000"
                     data-overlay-blur-bg="true"
                     data-caption="Lightbox Gallery">
                  </a>
                </article>
              </div>
              <div class="col-md-4 g-mb-30 g-mb-0--md">
                <article class="text-center u-block-hover g-bg-gray-dark-v2--hover g-transition-0_4">
                  <figure>
                    <img class="img-fluid" src="{{ root }}assets/img-temp/900x600/img3.jpg" alt="Image Description">
                  </figure>
                  <h3 class="h6 text-uppercase g-font-weight-600 g-letter-spacing-2 g-color-white--hover g-pa-30-20 g-mb-0">
                    <em class="d-block g-font-size-12 g-font-style-normal g-font-weight-300 g-color-primary--hover g-mb-10">Simply dummy</em> Electronic typesetting
                  </h3>
                  <a class="js-fancybox u-link-v2" href="javascript:;"
                     data-fancybox="lightbox-gallery--16"
                     data-src="{{ root }}assets/img-temp/900x600/img3.jpg"
                     data-animate-in="bounceInDown"
                     data-animate-out="bounceOutDown"
                     data-speed="1000"
                     data-overlay-blur-bg="true"
                     data-caption="Lightbox Gallery">
                  </a>
                </article>
              </div>
              <div class="col-md-4 g-mb-30 g-mb-0--md">
                <article class="text-center u-block-hover g-bg-gray-dark-v2--hover g-transition-0_4">
                  <figure>
                    <img class="img-fluid" src="{{ root }}assets/img-temp/900x600/img4.jpg" alt="Image Description">
                  </figure>
                  <h3 class="h6 text-uppercase g-font-weight-600 g-letter-spacing-2 g-color-white--hover g-pa-30-20 g-mb-0">
                    <em class="d-block g-font-size-12 g-font-style-normal g-font-weight-300 g-color-primary--hover g-mb-10">In hac</em> Eleifend nisl
                  </h3>
                  <a class="js-fancybox u-link-v2" href="javascript:;"
                     data-fancybox="lightbox-gallery--16"
                     data-src="{{ root }}assets/img-temp/900x600/img4.jpg"
                     data-animate-in="bounceInDown"
                     data-animate-out="bounceOutDown"
                     data-speed="1000"
                     data-overlay-blur-bg="true"
                     data-caption="Lightbox Gallery">
                  </a>
                </article>
              </div>
              <div class="col-md-4 g-mb-30 g-mb-0--md">
                <article class="text-center u-block-hover g-bg-gray-dark-v2--hover g-transition-0_4">
                  <figure>
                    <img class="img-fluid" src="{{ root }}assets/img-temp/900x600/img5.jpg" alt="Image Description">
                  </figure>
                  <h3 class="h6 text-uppercase g-font-weight-600 g-letter-spacing-2 g-color-white--hover g-pa-30-20 g-mb-0">
                    <em class="d-block g-font-size-12 g-font-style-normal g-font-weight-300 g-color-primary--hover g-mb-10">Sit amet</em> Adipiscing elitut
                  </h3>
                  <a class="js-fancybox u-link-v2" href="javascript:;"
                     data-fancybox="lightbox-gallery--16"
                     data-src="{{ root }}assets/img-temp/900x600/img5.jpg"
                     data-animate-in="bounceInDown"
                     data-animate-out="bounceOutDown"
                     data-speed="1000"
                     data-overlay-blur-bg="true"
                     data-caption="Lightbox Gallery">
                  </a>
                </article>
              </div>
              <div class="col-md-4 g-mb-30 g-mb-0--md">
                <article class="text-center u-block-hover g-bg-gray-dark-v2--hover g-transition-0_4">
                  <figure>
                    <img class="img-fluid" src="{{ root }}assets/img-temp/900x600/img6.jpg" alt="Image Description">
                  </figure>
                  <h3 class="h6 text-uppercase g-font-weight-600 g-letter-spacing-2 g-color-white--hover g-pa-30-20 g-mb-0">
                    <em class="d-block g-font-size-12 g-font-style-normal g-font-weight-300 g-color-primary--hover g-mb-10">Nulla ipsum</em> Consectetur adipiscing
                  </h3>
                  <a class="js-fancybox u-link-v2" href="javascript:;"
                     data-fancybox="lightbox-gallery--16"
                     data-src="{{ root }}assets/img-temp/900x600/img6.jpg"
                     data-animate-in="bounceInDown"
                     data-animate-out="bounceOutDown"
                     data-speed="1000"
                     data-overlay-blur-bg="true"
                     data-caption="Lightbox Gallery">
                  </a>
                </article>
              </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">
          </div>

          <div class="shortcode-scripts">
            <!-- JS Implementing Plugins -->
            <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.popup.js"></script>

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

        {% set SCExtendedClasses = "container" %}
        {% set contentTarget = "#shortcode16" %}
        {% 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>
        <div class="text-center g-mb-50">
          <h2 class="h4">Gallery
            <span class="g-color-primary g-ml-5">#02</span>
          </h2>
        </div>

        <div id="shortcode7">
          <div class="shortcode-html">
            <div class="masonry-grid">
              <div class="masonry-grid-sizer g-width-16_6x--sm"></div>
              <div class="masonry-grid-item u-block-hover g-width-16_6x--sm">
                <a class="js-fancybox d-block u-bg-overlay g-bg-black-opacity-0_3--after g-opacity-0_8--hover g-transition-0_3" href="javascript:;"
                   data-fancybox="lightbox-gallery--07"
                   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">
                </a>
              </div>
              <div class="masonry-grid-item u-block-hover g-width-16_6x--sm">
                <a class="js-fancybox d-block u-bg-overlay g-bg-black-opacity-0_3--after g-opacity-0_8--hover g-transition-0_3" href="javascript:;"
                   data-fancybox="lightbox-gallery--07"
                   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">
                </a>
              </div>
              <div class="masonry-grid-item u-block-hover g-width-33_3x--sm">
                <a class="js-fancybox d-block u-bg-overlay g-bg-black-opacity-0_3--after g-opacity-0_8--hover g-transition-0_3" href="javascript:;"
                   data-fancybox="lightbox-gallery--07"
                   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">
                </a>
              </div>
              <div class="masonry-grid-item u-block-hover g-width-16_6x--sm">
                <a class="js-fancybox d-block u-bg-overlay g-bg-black-opacity-0_3--after g-opacity-0_8--hover g-transition-0_3" href="javascript:;"
                   data-fancybox="lightbox-gallery--07"
                   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">
                </a>
              </div>
              <div class="masonry-grid-item u-block-hover g-width-16_6x--sm">
                <a class="js-fancybox d-block u-bg-overlay g-bg-black-opacity-0_3--after g-opacity-0_8--hover g-transition-0_3" href="javascript:;"
                   data-fancybox="lightbox-gallery--07"
                   data-src="{{ root }}assets/img-temp/900x600/img13.jpg"
                   data-caption="Lightbox Gallery">
                  <img class="img-fluid" src="{{ root }}assets/img-temp/900x600/img3.jpg" alt="Image Description">
                </a>
              </div>
              <div class="masonry-grid-item u-block-hover g-width-33_3x--sm">
                <a class="js-fancybox d-block u-bg-overlay g-bg-black-opacity-0_3--after g-opacity-0_8--hover g-transition-0_3" href="javascript:;"
                   data-fancybox="lightbox-gallery--07"
                   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">
                </a>
              </div>
              <div class="masonry-grid-item u-block-hover g-width-16_6x--sm">
                <a class="js-fancybox d-block u-bg-overlay g-bg-black-opacity-0_3--after g-opacity-0_8--hover g-transition-0_3" href="javascript:;"
                   data-fancybox="lightbox-gallery--07"
                   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">
                </a>
              </div>
              <div class="masonry-grid-item u-block-hover g-width-16_6x--sm">
                <a class="js-fancybox d-block u-bg-overlay g-bg-black-opacity-0_3--after g-opacity-0_8--hover g-transition-0_3" href="javascript:;"
                   data-fancybox="lightbox-gallery--07"
                   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">
                </a>
              </div>
              <div class="masonry-grid-item u-block-hover g-width-33_3x--sm">
                <a class="js-fancybox d-block u-bg-overlay g-bg-black-opacity-0_3--after g-opacity-0_8--hover g-transition-0_3" href="javascript:;"
                   data-fancybox="lightbox-gallery--07"
                   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">
                </a>
              </div>
              <div class="masonry-grid-item u-block-hover g-width-16_6x--sm">
                <a class="js-fancybox d-block u-bg-overlay g-bg-black-opacity-0_3--after g-opacity-0_8--hover g-transition-0_3" href="javascript:;"
                   data-fancybox="lightbox-gallery--07"
                   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">
                </a>
              </div>
              <div class="masonry-grid-item u-block-hover g-width-16_6x--sm">
                <a class="js-fancybox d-block u-bg-overlay g-bg-black-opacity-0_3--after g-opacity-0_8--hover g-transition-0_3" href="javascript:;"
                   data-fancybox="lightbox-gallery--07"
                   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">
                </a>
              </div>
              <div class="masonry-grid-item u-block-hover g-width-16_6x--sm">
                <a class="js-fancybox d-block u-bg-overlay g-bg-black-opacity-0_3--after g-opacity-0_8--hover g-transition-0_3" href="javascript:;"
                   data-fancybox="lightbox-gallery--07"
                   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">
                </a>
              </div>
              <div class="masonry-grid-item u-block-hover g-width-16_6x--sm">
                <a class="js-fancybox d-block u-bg-overlay g-bg-black-opacity-0_3--after g-opacity-0_8--hover g-transition-0_3" href="javascript:;"
                   data-fancybox="lightbox-gallery--07"
                   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">
                </a>
              </div>
              <div class="masonry-grid-item u-block-hover g-width-16_6x--sm">
                <a class="js-fancybox d-block u-bg-overlay g-bg-black-opacity-0_3--after g-opacity-0_8--hover g-transition-0_3" href="javascript:;"
                   data-fancybox="lightbox-gallery--07"
                   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">
                </a>
              </div>
              <div class="masonry-grid-item u-block-hover g-width-16_6x--sm">
                <a class="js-fancybox d-block u-bg-overlay g-bg-black-opacity-0_3--after g-opacity-0_8--hover g-transition-0_3" href="javascript:;"
                   data-fancybox="lightbox-gallery--07"
                   data-src="{{ root }}assets/img-temp/900x600/img13.jpg"
                   data-caption="Lightbox Gallery">
                  <img class="img-fluid" src="{{ root }}assets/img-temp/900x600/img3.jpg" alt="Image Description">
                </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">
          </div>

          <div class="shortcode-scripts">
            <!-- JS Implementing Plugins -->
            <script type="text/plain" src="{{ root }}assets/vendor/masonry/dist/masonry.pkgd.min.js"></script>
            <script type="text/plain" src="{{ root }}assets/vendor/imagesloaded/imagesloaded.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.popup.js"></script>

            <!-- JS Plugins Init. -->
            <script type="text/plain">
              $(document).on('ready', function () {
                // 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');
              });
            </script>
          </div>
        </div>

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

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

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

        <div id="shortcode4">
          <div class="shortcode-html">
            <div class="js-carousel text-center"
                 data-infinite="true"
                 data-center-mode="true"
                 data-center-padding="60px"
                 data-slides-show="4"
                 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"
                 data-arrow-left-classes="fa fa-angle-left g-left-0"
                 data-arrow-right-classes="fa fa-angle-right g-right-0"
                 data-responsive='[{
                   "breakpoint": 768,
                   "settings": {
                     "slidesToShow": 2,
                     "slidesToScroll": 2,
                     "centerPadding": 0
                   }
                 }]'>
              <div class="js-slide g-px-10">
                <a class="js-fancybox d-block u-block-hover g-pos-rel" href="javascript:;"
                   data-fancybox="lightbox-gallery--04"
                   data-src="{{ root }}assets/img-temp/350x230/img1.jpg"
                   data-speed="350"
                   data-caption="Lightbox Gallery">
                  <img class="img-fluid u-block-hover__main--zoom-v1" src="{{ root }}assets/img-temp/350x230/img1.jpg" alt="Image Description">
                  <span class="u-icon-v3 u-icon-size--xs g-bg-white g-color-black g-rounded-50x g-cursor-pointer g-pos-abs g-bottom-10 g-right-10">
                    <i class="hs-icon hs-icon-magnifier"></i>
                  </span>
                </a>
              </div>

              <div class="js-slide g-px-10">
                <a class="js-fancybox d-block u-block-hover g-pos-rel" href="javascript:;"
                   data-fancybox="lightbox-gallery--04"
                   data-src="{{ root }}assets/img-temp/350x230/img2.jpg"
                   data-speed="350"
                   data-caption="Lightbox Gallery">
                  <img class="img-fluid u-block-hover__main--zoom-v1" src="{{ root }}assets/img-temp/350x230/img2.jpg" alt="Image Description">
                  <span class="u-icon-v3 u-icon-size--xs g-bg-white g-color-black g-rounded-50x g-cursor-pointer g-pos-abs g-bottom-10 g-right-10">
                    <i class="hs-icon hs-icon-magnifier"></i>
                  </span>
                </a>
              </div>

              <div class="js-slide g-px-10">
                <a class="js-fancybox d-block u-block-hover g-pos-rel" href="javascript:;"
                   data-fancybox="lightbox-gallery--04"
                   data-src="{{ root }}assets/img-temp/350x230/img3.jpg"
                   data-speed="350"
                   data-caption="Lightbox Gallery">
                  <img class="img-fluid u-block-hover__main--zoom-v1" src="{{ root }}assets/img-temp/350x230/img3.jpg" alt="Image Description">
                  <span class="u-icon-v3 u-icon-size--xs g-bg-white g-color-black g-rounded-50x g-cursor-pointer g-pos-abs g-bottom-10 g-right-10">
                    <i class="hs-icon hs-icon-magnifier"></i>
                  </span>
                </a>
              </div>

              <div class="js-slide g-px-10">
                <a class="js-fancybox d-block u-block-hover g-pos-rel" href="javascript:;"
                   data-fancybox="lightbox-gallery--04"
                   data-src="{{ root }}assets/img-temp/350x230/img4.jpg"
                   data-speed="350"
                   data-caption="Lightbox Gallery">
                  <img class="img-fluid u-block-hover__main--zoom-v1" src="{{ root }}assets/img-temp/350x230/img4.jpg" alt="Image Description">
                  <span class="u-icon-v3 u-icon-size--xs g-bg-white g-color-black g-rounded-50x g-cursor-pointer g-pos-abs g-bottom-10 g-right-10">
                    <i class="hs-icon hs-icon-magnifier"></i>
                  </span>
                </a>
              </div>

              <div class="js-slide g-px-10">
                <a class="js-fancybox d-block u-block-hover g-pos-rel" href="javascript:;"
                   data-fancybox="lightbox-gallery--04"
                   data-src="{{ root }}assets/img-temp/350x230/img5.jpg"
                   data-speed="350"
                   data-caption="Lightbox Gallery">
                  <img class="img-fluid u-block-hover__main--zoom-v1" src="{{ root }}assets/img-temp/350x230/img5.jpg" alt="Image Description">
                  <span class="u-icon-v3 u-icon-size--xs g-bg-white g-color-black g-rounded-50x g-cursor-pointer g-pos-abs g-bottom-10 g-right-10">
                    <i class="hs-icon hs-icon-magnifier"></i>
                  </span>
                </a>
              </div>

              <div class="js-slide g-px-10">
                <a class="js-fancybox d-block u-block-hover g-pos-rel" href="javascript:;"
                   data-fancybox="lightbox-gallery--04"
                   data-src="{{ root }}assets/img-temp/350x230/img6.jpg"
                   data-speed="350"
                   data-caption="Lightbox Gallery">
                  <img class="img-fluid u-block-hover__main--zoom-v1" src="{{ root }}assets/img-temp/350x230/img6.jpg" alt="Image Description">
                  <span class="u-icon-v3 u-icon-size--xs g-bg-white g-color-black g-rounded-50x g-cursor-pointer g-pos-abs g-bottom-10 g-right-10">
                    <i class="hs-icon hs-icon-magnifier"></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 SCExtendedClasses = "container" %}
        {% set contentTarget = "#shortcode4" %}
        {% set modalID = "#modalMarkup" %}
        {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
      </section>
      <!-- End Gallery #03 -->

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

      <!-- Gallery #04 -->
      <section>
        <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="shortcode11">
          <div class="shortcode-html">
            <div class="row no-gutters">
              <div class="col-md-3">
                <a class="js-fancybox d-block u-block-hover u-bg-overlay" href="javascript:;"
                   data-fancybox="lightbox-gallery--11"
                   data-src="{{ root }}assets/img-temp/900x600/img7.jpg"
                   data-caption="Lightbox Gallery">
                  <img class="img-fluid u-block-hover__main--grayscale" src="{{ root }}assets/img-temp/900x600/img7.jpg" alt="Image Description">
                </a>
              </div>
              <div class="col-md-3">
                <a class="js-fancybox d-block u-block-hover u-bg-overlay" href="javascript:;"
                   data-fancybox="lightbox-gallery--11"
                   data-src="{{ root }}assets/img-temp/900x600/img2.jpg"
                   data-caption="Lightbox Gallery">
                  <img class="img-fluid u-block-hover__main--grayscale" src="{{ root }}assets/img-temp/900x600/img2.jpg" alt="Image Description">
                </a>
              </div>
              <div class="col-md-3">
                <a class="js-fancybox d-block u-block-hover u-bg-overlay" href="javascript:;"
                   data-fancybox="lightbox-gallery--11"
                   data-src="{{ root }}assets/img-temp/900x600/img3.jpg"
                   data-caption="Lightbox Gallery">
                  <img class="img-fluid u-block-hover__main--grayscale" src="{{ root }}assets/img-temp/900x600/img3.jpg" alt="Image Description">
                </a>
              </div>
              <div class="col-md-3">
                <a class="js-fancybox d-block u-block-hover u-bg-overlay" href="javascript:;"
                   data-fancybox="lightbox-gallery--11"
                   data-src="{{ root }}assets/img-temp/900x600/img4.jpg"
                   data-caption="Lightbox Gallery">
                  <img class="img-fluid u-block-hover__main--grayscale" src="{{ root }}assets/img-temp/900x600/img4.jpg" alt="Image Description">
                </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">
          </div>

          <div class="shortcode-scripts">
            <!-- JS Implementing Plugins -->
            <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.popup.js"></script>

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

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

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

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

        <div id="shortcode14">
          <div class="shortcode-html">
            <div class="row no-gutters">
              <div class="col-md-2">
                <a class="js-fancybox d-block u-block-hover u-bg-overlay g-bg-black-opacity-0_3--after g-bg-transparent--hover--after" href="javascript:;"
                   data-fancybox="lightbox-gallery--14"
                   data-src="{{ root }}assets/img-temp/400x270/img1.jpg"
                   data-caption="Lightbox Gallery">
                  <img class="img-fluid u-block-hover__main--zoom-v1" src="{{ root }}assets/img-temp/400x270/img1.jpg" alt="Image Description">
                </a>
              </div>
              <div class="col-md-2">
                <a class="js-fancybox d-block u-block-hover u-bg-overlay g-bg-black-opacity-0_3--after g-bg-transparent--hover--after" href="javascript:;"
                   data-fancybox="lightbox-gallery--14"
                   data-src="{{ root }}assets/img-temp/400x270/img2.jpg"
                   data-caption="Lightbox Gallery">
                  <img class="img-fluid u-block-hover__main--zoom-v1" src="{{ root }}assets/img-temp/400x270/img2.jpg" alt="Image Description">
                </a>
              </div>
              <div class="col-md-2">
                <a class="js-fancybox d-block u-block-hover u-bg-overlay g-bg-black-opacity-0_3--after g-bg-transparent--hover--after" href="javascript:;"
                   data-fancybox="lightbox-gallery--14"
                   data-src="{{ root }}assets/img-temp/400x270/img3.jpg"
                   data-caption="Lightbox Gallery">
                  <img class="img-fluid u-block-hover__main--zoom-v1" src="{{ root }}assets/img-temp/400x270/img3.jpg" alt="Image Description">
                </a>
              </div>
              <div class="col-md-2">
                <a class="js-fancybox d-block u-block-hover u-bg-overlay g-bg-black-opacity-0_3--after g-bg-transparent--hover--after" href="javascript:;"
                   data-fancybox="lightbox-gallery--14"
                   data-src="{{ root }}assets/img-temp/400x270/img4.jpg"
                   data-caption="Lightbox Gallery">
                  <img class="img-fluid u-block-hover__main--zoom-v1" src="{{ root }}assets/img-temp/400x270/img4.jpg" alt="Image Description">
                </a>
              </div>
              <div class="col-md-2">
                <a class="js-fancybox d-block u-block-hover u-bg-overlay g-bg-black-opacity-0_3--after g-bg-transparent--hover--after" href="javascript:;"
                   data-fancybox="lightbox-gallery--14"
                   data-src="{{ root }}assets/img-temp/400x270/img5.jpg"
                   data-caption="Lightbox Gallery">
                  <img class="img-fluid u-block-hover__main--zoom-v1" src="{{ root }}assets/img-temp/400x270/img5.jpg" alt="Image Description">
                </a>
              </div>
              <div class="col-md-2">
                <a class="js-fancybox d-block u-block-hover u-bg-overlay g-bg-black-opacity-0_3--after g-bg-transparent--hover--after" href="javascript:;"
                   data-fancybox="lightbox-gallery--14"
                   data-src="{{ root }}assets/img-temp/400x270/img6.jpg"
                   data-caption="Lightbox Gallery">
                  <img class="img-fluid u-block-hover__main--zoom-v1" src="{{ root }}assets/img-temp/400x270/img6.jpg" alt="Image Description">
                </a>
              </div>

              <div class="col-md-2">
                <a class="js-fancybox d-block u-block-hover u-bg-overlay g-bg-black-opacity-0_3--after g-bg-transparent--hover--after" href="javascript:;"
                   data-fancybox="lightbox-gallery--14"
                   data-src="{{ root }}assets/img-temp/400x270/img6.jpg"
                   data-caption="Lightbox Gallery">
                  <img class="img-fluid u-block-hover__main--zoom-v1" src="{{ root }}assets/img-temp/400x270/img6.jpg" alt="Image Description">
                </a>
              </div>
              <div class="col-md-2">
                <a class="js-fancybox d-block u-block-hover u-bg-overlay g-bg-black-opacity-0_3--after g-bg-transparent--hover--after" href="javascript:;"
                   data-fancybox="lightbox-gallery--14"
                   data-src="{{ root }}assets/img-temp/400x270/img7.jpg"
                   data-caption="Lightbox Gallery">
                  <img class="img-fluid u-block-hover__main--zoom-v1" src="{{ root }}assets/img-temp/400x270/img7.jpg" alt="Image Description">
                </a>
              </div>
              <div class="col-md-2">
                <a class="js-fancybox d-block u-block-hover u-bg-overlay g-bg-black-opacity-0_3--after g-bg-transparent--hover--after" href="javascript:;"
                   data-fancybox="lightbox-gallery--14"
                   data-src="{{ root }}assets/img-temp/400x270/img8.jpg"
                   data-caption="Lightbox Gallery">
                  <img class="img-fluid u-block-hover__main--zoom-v1" src="{{ root }}assets/img-temp/400x270/img8.jpg" alt="Image Description">
                </a>
              </div>
              <div class="col-md-2">
                <a class="js-fancybox d-block u-block-hover u-bg-overlay g-bg-black-opacity-0_3--after g-bg-transparent--hover--after" href="javascript:;"
                   data-fancybox="lightbox-gallery--14"
                   data-src="{{ root }}assets/img-temp/400x270/img9.jpg"
                   data-caption="Lightbox Gallery">
                  <img class="img-fluid u-block-hover__main--zoom-v1" src="{{ root }}assets/img-temp/400x270/img9.jpg" alt="Image Description">
                </a>
              </div>
              <div class="col-md-2">
                <a class="js-fancybox d-block u-block-hover u-bg-overlay g-bg-black-opacity-0_3--after g-bg-transparent--hover--after" href="javascript:;"
                   data-fancybox="lightbox-gallery--14"
                   data-src="{{ root }}assets/img-temp/400x270/img10.jpg"
                   data-caption="Lightbox Gallery">
                  <img class="img-fluid u-block-hover__main--zoom-v1" src="{{ root }}assets/img-temp/400x270/img10.jpg" alt="Image Description">
                </a>
              </div>
              <div class="col-md-2">
                <a class="js-fancybox d-block u-block-hover u-bg-overlay g-bg-black-opacity-0_3--after g-bg-transparent--hover--after" href="javascript:;"
                   data-fancybox="lightbox-gallery--14"
                   data-src="{{ root }}assets/img-temp/400x270/img11.jpg"
                   data-caption="Lightbox Gallery">
                  <img class="img-fluid u-block-hover__main--zoom-v1" src="{{ root }}assets/img-temp/400x270/img11.jpg" alt="Image Description">
                </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">
          </div>

          <div class="shortcode-scripts">
            <!-- JS Implementing Plugins -->
            <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.popup.js"></script>

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

        {% set SCExtendedClasses = "container" %}
        {% set contentTarget = "#shortcode14" %}
        {% set modalID = "#modalMarkup" %}
        {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
      </section>
      <!-- End Gallery #05 -->
    </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>
