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

{% 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="shortcode1">
          <div class="shortcode-html">
            <div class="row">
              <div class="col-md-6 col-lg-4 g-mb-30">
                <!-- Article -->
                <article class="u-block-hover u-bg-overlay g-color-white g-bg-black-opacity-0_3--after text-center g-rounded-3 h-100">
                  <!-- Article Image -->
                  <img class="w-100 u-block-hover__main--zoom-v1" src="{{ root }}assets/img-temp/500x650/img1.jpg" alt="Image Description">
                  <!-- End Article Image -->

                  <!-- Article Content -->
                  <div class="u-block-hover__additional g-flex-middle g-z-index-2 g-brd-around g-brd-2 g-brd-white-opacity-0_3 g-pa-15 g-ma-20">
                    <div class="g-flex-middle-item">
                      <h3 class="h4 d-inline-block">Photography</h3>
                      <span class="d-block g-font-weight-600 g-font-size-40 text-uppercase g-mb-20">40% Off</span>
                      <a class="js-fancybox btn btn-md u-btn-primary g-font-weight-600 g-font-size-12 text-uppercase" href="javascript:;"
                         data-fancybox="lightbox-gallery-01-1"
                         data-src="{{ root }}assets/img-temp/400x270/img2.jpg">View portfolio
                      </a>
                    </div>
                  </div>
                  <!-- End Article Content -->
                </article>
                <!-- End Article -->

                <img class="g-hidden-xs-up" src="{{ root }}assets/img-temp/400x270/img4.jpg" alt="Image Description"
                     data-fancybox-gallery="lightbox-gallery-01-1">
                <img class="g-hidden-xs-up" src="{{ root }}assets/img-temp/400x270/img5.jpg" alt="Image Description"
                     data-fancybox-gallery="lightbox-gallery-01-1">
                <img class="g-hidden-xs-up" src="{{ root }}assets/img-temp/400x270/img6.jpg" alt="Image Description"
                     data-fancybox-gallery="lightbox-gallery-01-1">
              </div>

              <div class="col-md-6 col-lg-4 g-mb-30">
                <!-- Article -->
                <article class="u-block-hover u-bg-overlay g-color-white g-bg-black-opacity-0_3--after text-center g-rounded-3 h-100">
                  <!-- Article Image -->
                  <img class="w-100 u-block-hover__main--zoom-v1" src="{{ root }}assets/img-temp/500x650/img4.jpg" alt="Image Description">
                  <!-- End Article Image -->

                  <!-- Article Content -->
                  <div class="u-block-hover__additional g-flex-middle g-z-index-2 g-brd-around g-brd-2 g-brd-white-opacity-0_3 g-pa-15 g-ma-20">
                    <div class="g-flex-middle-item">
                      <h3 class="h4 d-inline-block">Videography</h3>
                      <span class="d-block g-font-weight-600 g-font-size-40 text-uppercase g-mb-20">25% Off</span>
                      <a class="js-fancybox-media btn btn-md u-btn-primary g-font-weight-600 g-font-size-12 text-uppercase" href="javascript:;"
                         data-fancybox="lightbox-gallery-01-2"
                         data-src="//www.youtube.com/embed/BNpiwOkKIJ8?autoplay=1">View portfolio
                      </a>
                    </div>
                  </div>
                  <!-- End Article Content -->
                </article>
                <!-- End Article -->

                <iframe class="g-hidden-xs-up" src="http://www.youtube.com/embed/p2_O6M1m6xg?autoplay=0"
                        data-fancybox-hidden-gallery="lightbox-gallery-01-2"
                        data-fancybox-type="iframe"></iframe>
                <iframe class="g-hidden-xs-up" src="http://www.youtube.com/embed/wbpBdMUrqV8?autoplay=0"
                        data-fancybox-hidden-gallery="lightbox-gallery-01-2"
                        data-fancybox-type="iframe"></iframe>
                <iframe class="g-hidden-xs-up" src="http://www.youtube.com/embed/R27KHLQ0cIU?autoplay=0"
                        data-fancybox-hidden-gallery="lightbox-gallery-01-2"
                        data-fancybox-type="iframe"></iframe>
              </div>

              <div class="col-lg-4 g-mb-30">
                <div class="row">
                  <div class="col-md-6 col-lg-12">
                    <!-- Article -->
                    <article class="u-block-hover g-color-white g-bg-cyan-gradient-opacity-v1 text-center rounded g-mb-30">
                      <div class="g-z-index-2 g-brd-around g-brd-2 g-brd-white-opacity-0_3 g-pa-30 g-ma-20">
                        <div class="g-flex-middle-item">
                          <span class="d-block g-color-white g-font-weight-700 g-font-size-25 mb-1">$99.00</span>
                          <h3 class="h4 d-inline-block g-mb-13">Web Design</h3>
                        </div>
                      </div>
                    </article>
                    <!-- End Article -->
                  </div>

                  <div class="col-md-6 col-lg-12">
                    <!-- Article -->
                    <article class="u-block-hover u-bg-overlay g-color-white g-bg-black-opacity-0_3--after text-center g-rounded-3">
                      <!-- Article Image -->
                      <img class="w-100 u-block-hover__main--zoom-v1" src="{{ root }}assets/img-temp/400x270/img1.jpg" alt="Image Description">
                      <!-- End Article Image -->

                      <!-- Article Content -->
                      <div class="u-block-hover__additional g-flex-middle g-z-index-2 g-brd-around g-brd-2 g-brd-white-opacity-0_3 g-pa-15 g-ma-20">
                        <div class="g-flex-middle-item">
                          <h3 class="h4 d-inline-block">Branding</h3>
                          <span class="d-block g-color-white-opacity-0_9">Understanding who you are and what you want is our strategy for your brand.</span>
                        </div>
                      </div>
                      <!-- End Article Content -->
                    </article>
                    <!-- End Article -->
                  </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">
          </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');

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

        {% set SCExtendedClasses = "container" %}
        {% set contentTarget = "#shortcode1" %}
        {% 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 id="shortcode5">
          <div class="shortcode-html">
            <div class="row">
              <div class="col-md-6">
                <a class="js-fancybox d-block u-bg-overlay g-bg-black-opacity-0_5--after g-mb-30 g-mb-0--md" href="javascript:;"
                   data-fancybox="lightbox-gallery--05"
                   data-src="{{ root }}assets/img-temp/800x700/img1.jpg"
                   data-speed="350"
                   data-caption="Lightbox Gallery">
                  <img class="img-fluid" src="{{ root }}assets/img-temp/800x700/img1.jpg" alt="Image Description">

                  <span class="u-bg-overlay__inner g-font-size-18 g-color-white g-pos-abs g-left-20 g-bottom-20">
                    Pipsum dolor sit amet
                  </span>
                </a>
              </div>
              <div class="col-md-3">
                <a class="js-fancybox d-block u-bg-overlay g-bg-black-opacity-0_5--after g-mb-30" href="javascript:;"
                   data-fancybox="lightbox-gallery--05"
                   data-src="{{ root }}assets/img-temp/500x450/img1.jpg"
                   data-speed="350"
                   data-caption="Lightbox Gallery">
                  <img class="img-fluid" src="{{ root }}assets/img-temp/500x450/img1.jpg" alt="Image Description">

                  <span class="u-bg-overlay__inner g-color-white g-pos-abs g-left-20 g-bottom-20">
                    Platea dictumst
                  </span>
                </a>

                <a class="js-fancybox d-block u-bg-overlay g-bg-black-opacity-0_5--after g-mb-30 g-mb-0--md" href="javascript:;"
                   data-fancybox="lightbox-gallery--05"
                   data-src="{{ root }}assets/img-temp/500x450/img2.jpg"
                   data-speed="350"
                   data-caption="Lightbox Gallery">
                  <img class="img-fluid" src="{{ root }}assets/img-temp/500x450/img2.jpg" alt="Image Description">

                  <span class="u-bg-overlay__inner g-color-white g-pos-abs g-left-20 g-bottom-20">
                    Hendrerit curabitur
                  </span>
                </a>
              </div>
              <div class="col-md-3">
                <a class="js-fancybox d-block u-bg-overlay g-bg-black-opacity-0_5--after g-mb-30" href="javascript:;"
                   data-fancybox="lightbox-gallery--05"
                   data-src="{{ root }}assets/img-temp/500x450/img3.jpg"
                   data-speed="350"
                   data-caption="Lightbox Gallery">
                  <img class="img-fluid" src="{{ root }}assets/img-temp/500x450/img3.jpg" alt="Image Description">

                  <span class="u-bg-overlay__inner g-color-white g-pos-abs g-left-20 g-bottom-20">
                    Consectetur adipiscing
                  </span>
                </a>

                <a class="js-fancybox d-block u-bg-overlay g-bg-black-opacity-0_5--after g-mb-30 g-mb-0--md" href="javascript:;"
                   data-fancybox="lightbox-gallery--05"
                   data-src="{{ root }}assets/img-temp/500x450/img4.jpg"
                   data-speed="350"
                   data-caption="Lightbox Gallery">
                  <img class="img-fluid" src="{{ root }}assets/img-temp/500x450/img4.jpg" alt="Image Description">

                  <span class="u-bg-overlay__inner g-absolute-centered g-color-white">
                    <span class="g-font-size-46">10+</span>
                    <br>
                    view photos
                  </span>
                </a>

                <img class="js-fancybox g-hidden-xs-up" href="javascript:;"
                     data-fancybox="lightbox-gallery--05"
                     data-src="{{ root }}assets/img-temp/500x450/img1.jpg"
                     data-speed="350"
                     data-caption="Lightbox Gallery">
                <img class="js-fancybox g-hidden-xs-up" href="javascript:;"
                     data-fancybox="lightbox-gallery--05"
                     data-src="{{ root }}assets/img-temp/500x450/img2.jpg"
                     data-speed="350"
                     data-caption="Lightbox Gallery">
                <img class="js-fancybox g-hidden-xs-up" href="javascript:;"
                     data-fancybox="lightbox-gallery--05"
                     data-src="{{ root }}assets/img-temp/500x450/img3.jpg"
                     data-speed="350"
                     data-caption="Lightbox Gallery">
              </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 contentTarget = "#shortcode5" %}
        {% 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 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 id="shortcode12">
          <div class="shortcode-html">
            <div class="row">
              <div class="col-md-6 g-mb-30--md">
                <article class="u-block-hover g-rounded-6">
                  <figure class="u-bg-overlay g-bg-black-opacity-0_4--after">
                    <img class="img-fluid u-block-hover__main--zoom-v1" src="{{ root }}assets/img-temp/900x600/img6.jpg" alt="Image Description">
                  </figure>
                  <header class="u-bg-overlay__inner g-pos-abs g-top-30 g-right-30 g-left-30 g-color-white">
                    <h3 class="h4">Nulla ipsum dolor sit amet</h3>
                    Consectetur adipiscing elitut eleifend nisl
                  </header>
                  <ul class="list-inline u-bg-overlay__inner g-pos-abs g-bottom-10 g-left-30 g-opacity-0_8">
                    <li class="list-inline-item">
                      <div class="g-brd-around g-brd-3 g-brd-white rounded-circle">
                        <img class="g-width-30 g-height-30 rounded-circle" src="{{ root }}assets/img-temp/100x100/img4.jpg" alt="Image Description">
                      </div>
                    </li>
                    <li class="list-inline-item g-ml-minus-20">
                      <div class="g-brd-around g-brd-3 g-brd-white rounded-circle">
                        <img class="g-width-30 g-height-30 rounded-circle" src="{{ root }}assets/img-temp/100x100/img5.jpg" alt="Image Description">
                      </div>
                    </li>
                    <li class="list-inline-item g-ml-minus-20">
                      <div class="g-brd-around g-brd-3 g-brd-white rounded-circle">
                        <img class="g-width-30 g-height-30 rounded-circle" src="{{ root }}assets/img-temp/100x100/img12.jpg" alt="Image Description">
                      </div>
                    </li>
                    <li class="list-inline-item g-font-size-12 g-color-white">+21</li>
                  </ul>
                  <a class="js-fancybox u-link-v2" href="javascript:;"
                     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">Read More
                  </a>
                </article>
              </div>
              <div class="col-md-6 g-mb-30--md">
                <article class="u-block-hover g-rounded-6">
                  <figure class="u-bg-overlay g-bg-black-opacity-0_4--after">
                    <img class="img-fluid u-block-hover__main--zoom-v1" src="{{ root }}assets/img-temp/900x600/img2.jpg" alt="Image Description">
                  </figure>
                  <header class="u-bg-overlay__inner g-pos-abs g-top-30 g-right-30 g-left-30 g-color-white">
                    <h3 class="h4">Adipiscing elitut</h3>
                    Consectetur adipiscing elitut eleifend nisl
                  </header>
                  <ul class="list-inline u-bg-overlay__inner g-pos-abs g-bottom-10 g-left-30 g-opacity-0_8">
                    <li class="list-inline-item">
                      <div class="g-brd-around g-brd-3 g-brd-white rounded-circle">
                        <img class="g-width-30 g-height-30 rounded-circle" src="{{ root }}assets/img-temp/100x100/img6.jpg" alt="Image Description">
                      </div>
                    </li>
                    <li class="list-inline-item g-ml-minus-20">
                      <div class="g-brd-around g-brd-3 g-brd-white rounded-circle">
                        <img class="g-width-30 g-height-30 rounded-circle" src="{{ root }}assets/img-temp/100x100/img5.jpg" alt="Image Description">
                      </div>
                    </li>
                    <li class="list-inline-item g-ml-minus-20">
                      <div class="g-brd-around g-brd-3 g-brd-white rounded-circle">
                        <img class="g-width-30 g-height-30 rounded-circle" src="{{ root }}assets/img-temp/100x100/img16.jpg" alt="Image Description">
                      </div>
                    </li>
                    <li class="list-inline-item g-font-size-12 g-color-white">+8</li>
                  </ul>
                  <a class="js-fancybox u-link-v2" href="javascript:;"
                     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">Read More
                  </a>
                </article>
              </div>
            </div>

            <div class="row">
              <div class="col-md-6 g-mb-30--md">
                <article class="u-block-hover g-rounded-6">
                  <figure class="u-bg-overlay g-bg-black-opacity-0_4--after">
                    <img class="img-fluid u-block-hover__main--zoom-v1" src="{{ root }}assets/img-temp/900x600/img1.jpg" alt="Image Description">
                  </figure>
                  <header class="u-bg-overlay__inner g-pos-abs g-top-30 g-right-30 g-left-30 g-color-white">
                    <h3 class="h4">Hac habitasse platea</h3>
                    Consectetur adipiscing elitut eleifend nisl
                  </header>
                  <ul class="list-inline u-bg-overlay__inner g-pos-abs g-bottom-10 g-left-30 g-opacity-0_8">
                    <li class="list-inline-item">
                      <div class="g-brd-around g-brd-3 g-brd-white rounded-circle">
                        <img class="g-width-30 g-height-30 rounded-circle" src="{{ root }}assets/img-temp/100x100/img5.jpg" alt="Image Description">
                      </div>
                    </li>
                    <li class="list-inline-item g-ml-minus-20">
                      <div class="g-brd-around g-brd-3 g-brd-white rounded-circle">
                        <img class="g-width-30 g-height-30 rounded-circle" src="{{ root }}assets/img-temp/100x100/img17.jpg" alt="Image Description">
                      </div>
                    </li>
                    <li class="list-inline-item g-ml-minus-20">
                      <div class="g-brd-around g-brd-3 g-brd-white rounded-circle">
                        <img class="g-width-30 g-height-30 rounded-circle" src="{{ root }}assets/img-temp/100x100/img4.jpg" alt="Image Description">
                      </div>
                    </li>
                    <li class="list-inline-item g-font-size-12 g-color-white">+13</li>
                  </ul>
                  <a class="js-fancybox u-link-v2" href="javascript:;"
                     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">Read More
                  </a>
                </article>
              </div>
              <div class="col-md-6 g-mb-30--md">
                <article class="u-block-hover g-rounded-6">
                  <figure class="u-bg-overlay g-bg-black-opacity-0_4--after">
                    <img class="img-fluid u-block-hover__main--zoom-v1" src="{{ root }}assets/img-temp/900x600/img5.jpg" alt="Image Description">
                  </figure>
                  <header class="u-bg-overlay__inner g-pos-abs g-top-30 g-right-30 g-left-30 g-color-white">
                    <h3 class="h4">Eleifend adipiscing elitut</h3>
                    Consectetur adipiscing elitut eleifend nisl
                  </header>
                  <ul class="list-inline u-bg-overlay__inner g-pos-abs g-bottom-10 g-left-30 g-opacity-0_8">
                    <li class="list-inline-item">
                      <div class="g-brd-around g-brd-3 g-brd-white rounded-circle">
                        <img class="g-width-30 g-height-30 rounded-circle" src="{{ root }}assets/img-temp/100x100/img2.jpg" alt="Image Description">
                      </div>
                    </li>
                    <li class="list-inline-item g-ml-minus-20">
                      <div class="g-brd-around g-brd-3 g-brd-white rounded-circle">
                        <img class="g-width-30 g-height-30 rounded-circle" src="{{ root }}assets/img-temp/100x100/img3.jpg" alt="Image Description">
                      </div>
                    </li>
                    <li class="list-inline-item g-ml-minus-20">
                      <div class="g-brd-around g-brd-3 g-brd-white rounded-circle">
                        <img class="g-width-30 g-height-30 rounded-circle" src="{{ root }}assets/img-temp/100x100/img1.jpg" alt="Image Description">
                      </div>
                    </li>
                    <li class="list-inline-item g-font-size-12 g-color-white">+6</li>
                  </ul>
                  <a class="js-fancybox u-link-v2" href="javascript:;"
                     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">Read More
                  </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 = "#shortcode12" %}
        {% 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 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="shortcode13">
          <div class="shortcode-html">
            <div class="row text-center">
              <div class="col-md-4 g-mb-30">
                <a class="js-fancybox d-block u-block-hover u-bg-overlay u-bg-overlay--v1 g-bg-black-opacity-0_5--after" href="javascript:;"
                   data-fancybox="lightbox-gallery-13-1-hidden"
                   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">
                  <strong class="h5 d-block w-100 u-bg-overlay__inner g-absolute-centered g-px-20 g-font-weight-400 g-color-white g-mt-10"> Nulla ipsum dolor sit amet </strong>
                </a>

                <img class="js-fancybox g-hidden-xs-up"
                     data-fancybox="lightbox-gallery-13-1-hidden"
                     data-src="{{ root }}assets/img-temp/400x270/img1.jpg"
                     data-caption="Lightbox Gallery">
                <img class="js-fancybox g-hidden-xs-up"
                     data-fancybox="lightbox-gallery-13-1-hidden"
                     data-src="{{ root }}assets/img-temp/400x270/img2.jpg"
                     data-caption="Lightbox Gallery">
                <img class="js-fancybox g-hidden-xs-up"
                     data-fancybox="lightbox-gallery-13-1-hidden"
                     data-src="{{ root }}assets/img-temp/400x270/img3.jpg"
                     data-caption="Lightbox Gallery">
              </div>
              <div class="col-md-4 g-mb-30">
                <a class="js-fancybox d-block u-block-hover u-bg-overlay u-bg-overlay--v1 g-bg-black-opacity-0_5--after" href="javascript:;"
                   data-fancybox="lightbox-gallery-13-2-hidden"
                   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">
                  <strong class="h5 d-block w-100 u-bg-overlay__inner g-absolute-centered g-px-20 g-font-weight-400 g-color-white g-mt-10"> Consectetur adipiscing </strong>
                </a>

                <img class="js-fancybox g-hidden-xs-up"
                     data-fancybox="lightbox-gallery-13-2-hidden"
                     data-src="{{ root }}assets/img-temp/400x270/img5.jpg"
                     data-caption="Lightbox Gallery">
                <img class="js-fancybox g-hidden-xs-up"
                     data-fancybox="lightbox-gallery-13-2-hidden"
                     data-src="{{ root }}assets/img-temp/400x270/img6.jpg"
                     data-caption="Lightbox Gallery">
                <img class="js-fancybox g-hidden-xs-up"
                     data-fancybox="lightbox-gallery-13-2-hidden"
                     data-src="{{ root }}assets/img-temp/400x270/img7.jpg"
                     data-caption="Lightbox Gallery">
              </div>
              <div class="col-md-4 g-mb-30">
                <a class="js-fancybox d-block u-block-hover u-bg-overlay u-bg-overlay--v1 g-bg-black-opacity-0_5--after" href="javascript:;"
                   data-fancybox="lightbox-gallery-13-3-hidden"
                   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">
                  <strong class="h5 d-block w-100 u-bg-overlay__inner g-absolute-centered g-px-20 g-font-weight-400 g-color-white g-mt-10"> Elitut eleifend nisl </strong>
                </a>

                <img class="js-fancybox g-hidden-xs-up"
                     data-fancybox="lightbox-gallery-13-3-hidden"
                     data-src="{{ root }}assets/img-temp/400x270/img8.jpg"
                     data-caption="Lightbox Gallery">
                <img class="js-fancybox g-hidden-xs-up"
                     data-fancybox="lightbox-gallery-13-3-hidden"
                     data-src="{{ root }}assets/img-temp/400x270/img9.jpg"
                     data-caption="Lightbox Gallery">
                <img class="js-fancybox g-hidden-xs-up"
                     data-fancybox="lightbox-gallery-13-3-hidden"
                     data-src="{{ root }}assets/img-temp/400x270/img10.jpg"
                     data-caption="Lightbox Gallery">
              </div>
              <div class="col-md-4 g-mb-30">
                <a class="js-fancybox d-block u-block-hover u-bg-overlay u-bg-overlay--v1 g-bg-black-opacity-0_5--after" href="javascript:;"
                   data-fancybox="lightbox-gallery-13-4-hidden"
                   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">
                  <strong class="h5 d-block w-100 u-bg-overlay__inner g-absolute-centered g-px-20 g-font-weight-400 g-color-white g-mt-10"> In hac habitasse </strong>
                </a>

                <img class="js-fancybox g-hidden-xs-up"
                     data-fancybox="lightbox-gallery-13-4-hidden"
                     data-src="{{ root }}assets/img-temp/400x270/img11.jpg"
                     data-caption="Lightbox Gallery">
                <img class="js-fancybox g-hidden-xs-up"
                     data-fancybox="lightbox-gallery-13-4-hidden"
                     data-src="{{ root }}assets/img-temp/400x270/img12.jpg"
                     data-caption="Lightbox Gallery">
                <img class="js-fancybox g-hidden-xs-up"
                     data-fancybox="lightbox-gallery-13-4-hidden"
                     data-src="{{ root }}assets/img-temp/400x270/img13.jpg"
                     data-caption="Lightbox Gallery">
              </div>
              <div class="col-md-4 g-mb-30">
                <a class="js-fancybox d-block u-block-hover u-bg-overlay u-bg-overlay--v1 g-bg-black-opacity-0_5--after" href="javascript:;"
                   data-fancybox="lightbox-gallery-13-5-hidden"
                   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">
                  <strong class="h5 d-block w-100 u-bg-overlay__inner g-absolute-centered g-px-20 g-font-weight-400 g-color-white g-mt-10"> Platea dictumst </strong>
                </a>

                <img class="js-fancybox g-hidden-xs-up"
                     data-fancybox="lightbox-gallery-13-5-hidden"
                     data-src="{{ root }}assets/img-temp/400x270/img1.jpg"
                     data-caption="Lightbox Gallery">
                <img class="js-fancybox g-hidden-xs-up"
                     data-fancybox="lightbox-gallery-13-5-hidden"
                     data-src="{{ root }}assets/img-temp/400x270/img3.jpg"
                     data-caption="Lightbox Gallery">
                <img class="js-fancybox g-hidden-xs-up"
                     data-fancybox="lightbox-gallery-13-5-hidden"
                     data-src="{{ root }}assets/img-temp/400x270/img4.jpg"
                     data-caption="Lightbox Gallery">
              </div>
              <div class="col-md-4 g-mb-30">
                <a class="js-fancybox d-block u-block-hover u-bg-overlay u-bg-overlay--v1 g-bg-black-opacity-0_5--after" href="javascript:;"
                   data-fancybox="lightbox-gallery-13-6-hidden"
                   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">
                  <strong class="h5 d-block w-100 u-bg-overlay__inner g-absolute-centered g-px-20 g-font-weight-400 g-color-white g-mt-10"> Curabitur hendrerit </strong>
                </a>

                <img class="js-fancybox g-hidden-xs-up"
                     data-fancybox="lightbox-gallery-13-6-hidden"
                     data-src="{{ root }}assets/img-temp/400x270/img5.jpg"
                     data-caption="Lightbox Gallery">
                <img class="js-fancybox g-hidden-xs-up"
                     data-fancybox="lightbox-gallery-13-6-hidden"
                     data-src="{{ root }}assets/img-temp/400x270/img7.jpg"
                     data-caption="Lightbox Gallery">
                <img class="js-fancybox g-hidden-xs-up"
                     data-fancybox="lightbox-gallery-13-6-hidden"
                     data-src="{{ root }}assets/img-temp/400x270/img8.jpg"
                     data-caption="Lightbox Gallery">
              </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 contentTarget = "#shortcode13" %}
        {% 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 class="container">
        <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="shortcode3">
          <div class="shortcode-html">
            <div class="row">
              <div class="col-md-3 g-mb-30">
                <a class="js-fancybox d-block u-block-hover" href="javascript:;"
                   data-fancybox="lightbox-gallery--03"
                   data-src="{{ root }}assets/img-temp/740x380/img1.jpg"
                   data-speed="350"
                   data-caption="Lightbox Gallery">
                  <img class="img-fluid u-block-hover__main--mover-right" src="{{ root }}assets/img-temp/740x380/img1.jpg" alt="Image Description">
                </a>
              </div>
              <div class="col-md-3 g-mb-30">
                <a class="js-fancybox d-block u-block-hover" href="javascript:;"
                   data-fancybox="lightbox-gallery--03"
                   data-src="{{ root }}assets/img-temp/740x380/img2.jpg"
                   data-speed="350"
                   data-caption="Lightbox Gallery">
                  <img class="img-fluid u-block-hover__main--mover-right" src="{{ root }}assets/img-temp/740x380/img2.jpg" alt="Image Description">
                </a>
              </div>
              <div class="col-md-3 g-mb-30">
                <a class="js-fancybox d-block u-block-hover" href="javascript:;"
                   data-fancybox="lightbox-gallery--03"
                   data-src="{{ root }}assets/img-temp/740x380/img3.jpg"
                   data-speed="350"
                   data-caption="Lightbox Gallery">
                  <img class="img-fluid u-block-hover__main--mover-right" src="{{ root }}assets/img-temp/740x380/img3.jpg" alt="Image Description">
                </a>
              </div>
              <div class="col-md-3 g-mb-30">
                <a class="js-fancybox d-block u-block-hover" href="javascript:;"
                   data-fancybox="lightbox-gallery--03"
                   data-src="{{ root }}assets/img-temp/740x380/img4.jpg"
                   data-speed="350"
                   data-caption="Lightbox Gallery">
                  <img class="img-fluid u-block-hover__main--mover-right" src="{{ root }}assets/img-temp/740x380/img4.jpg" alt="Image Description">
                </a>
              </div>
              <div class="col-md-3 g-mb-30">
                <a class="js-fancybox d-block u-block-hover" href="javascript:;"
                   data-fancybox="lightbox-gallery--03"
                   data-src="{{ root }}assets/img-temp/740x380/img5.jpg"
                   data-speed="350"
                   data-caption="Lightbox Gallery">
                  <img class="img-fluid u-block-hover__main--mover-right" src="{{ root }}assets/img-temp/740x380/img5.jpg" alt="Image Description">
                </a>
              </div>
              <div class="col-md-3 g-mb-30">
                <a class="js-fancybox d-block u-block-hover" href="javascript:;"
                   data-fancybox="lightbox-gallery--03"
                   data-src="{{ root }}assets/img-temp/740x380/img6.jpg"
                   data-speed="350"
                   data-caption="Lightbox Gallery">
                  <img class="img-fluid u-block-hover__main--mover-right" src="{{ root }}assets/img-temp/740x380/img6.jpg" alt="Image Description">
                </a>
              </div>
              <div class="col-md-3 g-mb-30">
                <a class="js-fancybox d-block u-block-hover" href="javascript:;"
                   data-fancybox="lightbox-gallery--03"
                   data-src="{{ root }}assets/img-temp/740x380/img1.jpg"
                   data-speed="350"
                   data-caption="Lightbox Gallery">
                  <img class="img-fluid u-block-hover__main--mover-right" src="{{ root }}assets/img-temp/740x380/img1.jpg" alt="Image Description">
                </a>
              </div>
              <div class="col-md-3 g-mb-30">
                <a class="js-fancybox d-block u-block-hover" href="javascript:;"
                   data-fancybox="lightbox-gallery--03"
                   data-src="{{ root }}assets/img-temp/740x380/img2.jpg"
                   data-speed="350"
                   data-caption="Lightbox Gallery">
                  <img class="img-fluid u-block-hover__main--mover-right" src="{{ root }}assets/img-temp/740x380/img2.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 contentTarget = "#shortcode3" %}
        {% set modalID = "#modalMarkup" %}
        {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
      </section>
      <!-- End Gallery #05 -->

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

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

        <div id="shortcode15">
          <div class="shortcode-html">
            <div class="row">
              <div class="col-md-3 g-mb-30--md">
                <div class="text-center u-block-hover g-bg-primary">
                  <img class="u-block-hover__img u-block-hover__main--blur" src="{{ root }}assets/img-temp/400x270/img1.jpg" alt="Image Description">
                  <a class="js-fancybox d-block u-block-hover__additional--blur g-bg-primary g-color-white g-pa-30" href="javascript:;"
                     data-fancybox="lightbox-gallery--15"
                     data-src="{{ root }}assets/img-temp/400x270/img1.jpg"
                     data-animate-in="bounceInDown"
                     data-animate-out="bounceOutDown"
                     data-speed="1000"
                     data-overlay-blur-bg="true"
                     data-caption="Lightbox Gallery">
                    <strong class="h5 d-block w-100 g-absolute-centered g-font-weight-400">Eleifend nisl</strong>
                  </a>
                </div>
              </div>
              <div class="col-md-3 g-mb-30--md">
                <div class="text-center u-block-hover g-bg-primary">
                  <img class="u-block-hover__img u-block-hover__main--blur" src="{{ root }}assets/img-temp/400x270/img2.jpg" alt="Image Description">
                  <a class="js-fancybox d-block u-block-hover__additional--blur g-bg-primary g-color-white g-pa-30" href="javascript:;"
                     data-fancybox="lightbox-gallery--15"
                     data-src="{{ root }}assets/img-temp/400x270/img2.jpg"
                     data-animate-in="bounceInDown"
                     data-animate-out="bounceOutDown"
                     data-speed="1000"
                     data-overlay-blur-bg="true"
                     data-caption="Lightbox Gallery">
                    <strong class="h5 d-block w-100 g-absolute-centered g-font-weight-400">Elitut</strong>
                  </a>
                </div>
              </div>
              <div class="col-md-3 g-mb-30--md">
                <div class="text-center u-block-hover g-bg-primary">
                  <img class="u-block-hover__img u-block-hover__main--blur" src="{{ root }}assets/img-temp/400x270/img4.jpg" alt="Image Description">
                  <a class="js-fancybox d-block u-block-hover__additional--blur g-bg-primary g-color-white g-pa-30" href="javascript:;"
                     data-fancybox="lightbox-gallery--15"
                     data-src="{{ root }}assets/img-temp/400x270/img4.jpg"
                     data-animate-in="bounceInDown"
                     data-animate-out="bounceOutDown"
                     data-speed="1000"
                     data-overlay-blur-bg="true"
                     data-caption="Lightbox Gallery">
                    <strong class="h5 d-block w-100 g-absolute-centered g-font-weight-400">Adipiscing</strong>
                  </a>
                </div>
              </div>
              <div class="col-md-3 g-mb-30--md">
                <div class="text-center u-block-hover g-bg-primary">
                  <img class="u-block-hover__img u-block-hover__main--blur" src="{{ root }}assets/img-temp/400x270/img5.jpg" alt="Image Description">
                  <a class="js-fancybox d-block u-block-hover__additional--blur g-bg-primary g-color-white g-pa-30" href="javascript:;"
                     data-fancybox="lightbox-gallery--15"
                     data-src="{{ root }}assets/img-temp/400x270/img5.jpg"
                     data-animate-in="bounceInDown"
                     data-animate-out="bounceOutDown"
                     data-speed="1000"
                     data-overlay-blur-bg="true"
                     data-caption="Lightbox Gallery">
                    <strong class="h5 d-block w-100 g-absolute-centered g-font-weight-400">Consectetur</strong>
                  </a>
                </div>
              </div>

              <div class="col-md-3 g-mb-30--md">
                <div class="text-center u-block-hover g-bg-primary">
                  <img class="u-block-hover__img u-block-hover__main--blur" src="{{ root }}assets/img-temp/400x270/img5.jpg" alt="Image Description">
                  <a class="js-fancybox d-block u-block-hover__additional--blur g-bg-primary g-color-white g-pa-30" href="javascript:;"
                     data-fancybox="lightbox-gallery--15"
                     data-src="{{ root }}assets/img-temp/400x270/img5.jpg"
                     data-animate-in="bounceInDown"
                     data-animate-out="bounceOutDown"
                     data-speed="1000"
                     data-overlay-blur-bg="true"
                     data-caption="Lightbox Gallery">
                    <strong class="h5 d-block w-100 g-absolute-centered g-font-weight-400">Curabitur hendrerit</strong>
                  </a>
                </div>
              </div>
              <div class="col-md-3 g-mb-30--md">
                <div class="text-center u-block-hover g-bg-primary">
                  <img class="u-block-hover__img u-block-hover__main--blur" src="{{ root }}assets/img-temp/400x270/img4.jpg" alt="Image Description">
                  <a class="js-fancybox d-block u-block-hover__additional--blur g-bg-primary g-color-white g-pa-30" href="javascript:;"
                     data-fancybox="lightbox-gallery--15"
                     data-src="{{ root }}assets/img-temp/400x270/img4.jpg"
                     data-animate-in="bounceInDown"
                     data-animate-out="bounceOutDown"
                     data-speed="1000"
                     data-overlay-blur-bg="true"
                     data-caption="Lightbox Gallery">
                    <strong class="h5 d-block w-100 g-absolute-centered g-font-weight-400">Platea dictumst</strong>
                  </a>
                </div>
              </div>
              <div class="col-md-3 g-mb-30--md">
                <div class="text-center u-block-hover g-bg-primary">
                  <img class="u-block-hover__img u-block-hover__main--blur" src="{{ root }}assets/img-temp/400x270/img3.jpg" alt="Image Description">
                  <a class="js-fancybox d-block u-block-hover__additional--blur g-bg-primary g-color-white g-pa-30" href="javascript:;"
                     data-fancybox="lightbox-gallery--15"
                     data-src="{{ root }}assets/img-temp/400x270/img3.jpg"
                     data-animate-in="bounceInDown"
                     data-animate-out="bounceOutDown"
                     data-speed="1000"
                     data-overlay-blur-bg="true"
                     data-caption="Lightbox Gallery">
                    <strong class="h5 d-block w-100 g-absolute-centered g-font-weight-400">In hac habitasse</strong>
                  </a>
                </div>
              </div>
              <div class="col-md-3 g-mb-30--md">
                <div class="text-center u-block-hover g-bg-primary">
                  <img class="u-block-hover__img u-block-hover__main--blur" src="{{ root }}assets/img-temp/400x270/img2.jpg" alt="Image Description">
                  <a class="js-fancybox d-block u-block-hover__additional--blur g-bg-primary g-color-white g-pa-30" href="javascript:;"
                     data-fancybox="lightbox-gallery--15"
                     data-src="{{ root }}assets/img-temp/400x270/img2.jpg"
                     data-animate-in="bounceInDown"
                     data-animate-out="bounceOutDown"
                     data-speed="1000"
                     data-overlay-blur-bg="true"
                     data-caption="Lightbox Gallery">
                    <strong class="h5 d-block w-100 g-absolute-centered g-font-weight-400">Elitut eleifend nisl</strong>
                  </a>
                </div>
              </div>

              <div class="col-md-3 g-mb-30--md">
                <div class="text-center u-block-hover g-bg-primary">
                  <img class="u-block-hover__img u-block-hover__main--blur" src="{{ root }}assets/img-temp/400x270/img7.jpg" alt="Image Description">
                  <a class="js-fancybox d-block u-block-hover__additional--blur g-bg-primary g-color-white g-pa-30" href="javascript:;"
                     data-fancybox="lightbox-gallery--15"
                     data-src="{{ root }}assets/img-temp/400x270/img7.jpg"
                     data-animate-in="bounceInDown"
                     data-animate-out="bounceOutDown"
                     data-speed="1000"
                     data-overlay-blur-bg="true"
                     data-caption="Lightbox Gallery">
                    <strong class="h5 d-block w-100 g-absolute-centered g-font-weight-400">Consectetur adipiscing</strong>
                  </a>
                </div>
              </div>
              <div class="col-md-3 g-mb-30--md">
                <div class="text-center u-block-hover g-bg-primary">
                  <img class="u-block-hover__img u-block-hover__main--blur" src="{{ root }}assets/img-temp/400x270/img5.jpg" alt="Image Description">
                  <a class="js-fancybox d-block u-block-hover__additional--blur g-bg-primary g-color-white g-pa-30" href="javascript:;"
                     data-fancybox="lightbox-gallery--15"
                     data-src="{{ root }}assets/img-temp/400x270/img5.jpg"
                     data-animate-in="bounceInDown"
                     data-animate-out="bounceOutDown"
                     data-speed="1000"
                     data-overlay-blur-bg="true"
                     data-caption="Lightbox Gallery">
                    <strong class="h5 d-block w-100 g-absolute-centered g-font-weight-400">Amet</strong>
                  </a>
                </div>
              </div>
              <div class="col-md-3 g-mb-30--md">
                <div class="text-center u-block-hover g-bg-primary">
                  <img class="u-block-hover__img u-block-hover__main--blur" src="{{ root }}assets/img-temp/400x270/img9.jpg" alt="Image Description">
                  <a class="js-fancybox d-block u-block-hover__additional--blur g-bg-primary g-color-white g-pa-30" href="javascript:;"
                     data-fancybox="lightbox-gallery--15"
                     data-src="{{ root }}assets/img-temp/400x270/img9.jpg"
                     data-animate-in="bounceInDown"
                     data-animate-out="bounceOutDown"
                     data-speed="1000"
                     data-overlay-blur-bg="true"
                     data-caption="Lightbox Gallery">
                    <strong class="h5 d-block w-100 g-absolute-centered g-font-weight-400">Dolor sit</strong>
                  </a>
                </div>
              </div>
              <div class="col-md-3 g-mb-30--md">
                <div class="text-center u-block-hover g-bg-primary">
                  <img class="u-block-hover__img u-block-hover__main--blur" src="{{ root }}assets/img-temp/400x270/img1.jpg" alt="Image Description">
                  <a class="js-fancybox d-block u-block-hover__additional--blur g-bg-primary g-color-white g-pa-30" href="javascript:;"
                     data-fancybox="lightbox-gallery--15"
                     data-src="{{ root }}assets/img-temp/400x270/img1.jpg"
                     data-animate-in="bounceInDown"
                     data-animate-out="bounceOutDown"
                     data-speed="1000"
                     data-overlay-blur-bg="true"
                     data-caption="Lightbox Gallery">
                    <strong class="h5 d-block w-100 g-absolute-centered g-font-weight-400">Nulla ipsum</strong>
                  </a>
                </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">
          </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 contentTarget = "#shortcode15" %}
        {% set modalID = "#modalMarkup" %}
        {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
      </section>
      <!-- End Gallery #06 -->

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

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

        <div id="shortcode17">
          <div class="shortcode-html">
            <div class="row">
              <div class="col-md-2 g-mb-30--md">
                <div class="g-brd-around g-brd-gray-light-v4--hover">
                  <a class="js-fancybox d-block u-block-hover u-block-hover--scale-down" href="javascript:;"
                     data-fancybox="lightbox-gallery--17"
                     data-src="{{ root }}assets/img-temp/400x270/img1.jpg"
                     data-animate-in="bounceInDown"
                     data-animate-out="bounceOutDown"
                     data-speed="1000"
                     data-overlay-blur-bg="true"
                     data-caption="Lightbox Gallery">
                    <img class="img-fluid u-block-hover__main--grayscale u-block-hover__img" src="{{ root }}assets/img-temp/400x270/img1.jpg" alt="example-image">
                  </a>
                </div>
              </div>
              <div class="col-md-2 g-mb-30--md">
                <div class="g-brd-around g-brd-gray-light-v4--hover">
                  <a class="js-fancybox d-block u-block-hover u-block-hover--scale-down" href="javascript:;"
                     data-fancybox="lightbox-gallery--17"
                     data-src="{{ root }}assets/img-temp/400x270/img2.jpg"
                     data-animate-in="bounceInDown"
                     data-animate-out="bounceOutDown"
                     data-speed="1000"
                     data-overlay-blur-bg="true"
                     data-caption="Lightbox Gallery">
                    <img class="img-fluid u-block-hover__main--grayscale u-block-hover__img" src="{{ root }}assets/img-temp/400x270/img2.jpg" alt="example-image">
                  </a>
                </div>
              </div>
              <div class="col-md-2 g-mb-30--md">
                <div class="g-brd-around g-brd-gray-light-v4--hover">
                  <a class="js-fancybox d-block u-block-hover u-block-hover--scale-down" href="javascript:;"
                     data-fancybox="lightbox-gallery--17"
                     data-src="{{ root }}assets/img-temp/400x270/img3.jpg"
                     data-animate-in="bounceInDown"
                     data-animate-out="bounceOutDown"
                     data-speed="1000"
                     data-overlay-blur-bg="true"
                     data-caption="Lightbox Gallery">
                    <img class="img-fluid u-block-hover__main--grayscale u-block-hover__img" src="{{ root }}assets/img-temp/400x270/img3.jpg" alt="example-image">
                  </a>
                </div>
              </div>
              <div class="col-md-2 g-mb-30--md">
                <div class="g-brd-around g-brd-gray-light-v4--hover">
                  <a class="js-fancybox d-block u-block-hover u-block-hover--scale-down" href="javascript:;"
                     data-fancybox="lightbox-gallery--17"
                     data-src="{{ root }}assets/img-temp/400x270/img4.jpg"
                     data-animate-in="bounceInDown"
                     data-animate-out="bounceOutDown"
                     data-speed="1000"
                     data-overlay-blur-bg="true"
                     data-caption="Lightbox Gallery">
                    <img class="img-fluid u-block-hover__main--grayscale u-block-hover__img" src="{{ root }}assets/img-temp/400x270/img4.jpg" alt="example-image">
                  </a>
                </div>
              </div>
              <div class="col-md-2 g-mb-30--md">
                <div class="g-brd-around g-brd-gray-light-v4--hover">
                  <a class="js-fancybox d-block u-block-hover u-block-hover--scale-down" href="javascript:;"
                     data-fancybox="lightbox-gallery--17"
                     data-src="{{ root }}assets/img-temp/400x270/img5.jpg"
                     data-animate-in="bounceInDown"
                     data-animate-out="bounceOutDown"
                     data-speed="1000"
                     data-overlay-blur-bg="true"
                     data-caption="Lightbox Gallery">
                    <img class="img-fluid u-block-hover__main--grayscale u-block-hover__img" src="{{ root }}assets/img-temp/400x270/img5.jpg" alt="example-image">
                  </a>
                </div>
              </div>
              <div class="col-md-2 g-mb-30--md">
                <div class="g-brd-around g-brd-gray-light-v4--hover">
                  <a class="js-fancybox d-block u-block-hover u-block-hover--scale-down" href="javascript:;"
                     data-fancybox="lightbox-gallery--17"
                     data-src="{{ root }}assets/img-temp/400x270/img6.jpg"
                     data-animate-in="bounceInDown"
                     data-animate-out="bounceOutDown"
                     data-speed="1000"
                     data-overlay-blur-bg="true"
                     data-caption="Lightbox Gallery">
                    <img class="img-fluid u-block-hover__main--grayscale u-block-hover__img" src="{{ root }}assets/img-temp/400x270/img6.jpg" alt="example-image">
                  </a>
                </div>
              </div>

              <div class="col-md-2 g-mb-30--md">
                <div class="g-brd-around g-brd-gray-light-v4--hover">
                  <a class="js-fancybox d-block u-block-hover u-block-hover--scale-down" href="javascript:;"
                     data-fancybox="lightbox-gallery--17"
                     data-src="{{ root }}assets/img-temp/400x270/img7.jpg"
                     data-animate-in="bounceInDown"
                     data-animate-out="bounceOutDown"
                     data-speed="1000"
                     data-overlay-blur-bg="true"
                     data-caption="Lightbox Gallery">
                    <img class="img-fluid u-block-hover__main--grayscale u-block-hover__img" src="{{ root }}assets/img-temp/400x270/img7.jpg" alt="example-image">
                  </a>
                </div>
              </div>
              <div class="col-md-2 g-mb-30--md">
                <div class="g-brd-around g-brd-gray-light-v4--hover">
                  <a class="js-fancybox d-block u-block-hover u-block-hover--scale-down" href="javascript:;"
                     data-fancybox="lightbox-gallery--17"
                     data-src="{{ root }}assets/img-temp/400x270/img8.jpg"
                     data-animate-in="bounceInDown"
                     data-animate-out="bounceOutDown"
                     data-speed="1000"
                     data-overlay-blur-bg="true"
                     data-caption="Lightbox Gallery">
                    <img class="img-fluid u-block-hover__main--grayscale u-block-hover__img" src="{{ root }}assets/img-temp/400x270/img8.jpg" alt="example-image">
                  </a>
                </div>
              </div>
              <div class="col-md-2 g-mb-30--md">
                <div class="g-brd-around g-brd-gray-light-v4--hover">
                  <a class="js-fancybox d-block u-block-hover u-block-hover--scale-down" href="javascript:;"
                     data-fancybox="lightbox-gallery--17"
                     data-src="{{ root }}assets/img-temp/400x270/img9.jpg"
                     data-animate-in="bounceInDown"
                     data-animate-out="bounceOutDown"
                     data-speed="1000"
                     data-overlay-blur-bg="true"
                     data-caption="Lightbox Gallery">
                    <img class="img-fluid u-block-hover__main--grayscale u-block-hover__img" src="{{ root }}assets/img-temp/400x270/img9.jpg" alt="example-image">
                  </a>
                </div>
              </div>
              <div class="col-md-2 g-mb-30--md">
                <div class="g-brd-around g-brd-gray-light-v4--hover">
                  <a class="js-fancybox d-block u-block-hover u-block-hover--scale-down" href="javascript:;"
                     data-fancybox="lightbox-gallery--17"
                     data-src="{{ root }}assets/img-temp/400x270/img10.jpg"
                     data-animate-in="bounceInDown"
                     data-animate-out="bounceOutDown"
                     data-speed="1000"
                     data-overlay-blur-bg="true"
                     data-caption="Lightbox Gallery">
                    <img class="img-fluid u-block-hover__main--grayscale u-block-hover__img" src="{{ root }}assets/img-temp/400x270/img10.jpg" alt="example-image">
                  </a>
                </div>
              </div>
              <div class="col-md-2 g-mb-30--md">
                <div class="g-brd-around g-brd-gray-light-v4--hover">
                  <a class="js-fancybox d-block u-block-hover u-block-hover--scale-down" href="javascript:;"
                     data-fancybox="lightbox-gallery--17"
                     data-src="{{ root }}assets/img-temp/400x270/img11.jpg"
                     data-animate-in="bounceInDown"
                     data-animate-out="bounceOutDown"
                     data-speed="1000"
                     data-overlay-blur-bg="true"
                     data-caption="Lightbox Gallery">
                    <img class="img-fluid u-block-hover__main--grayscale u-block-hover__img" src="{{ root }}assets/img-temp/400x270/img11.jpg" alt="example-image">
                  </a>
                </div>
              </div>
              <div class="col-md-2 g-mb-30--md">
                <div class="g-brd-around g-brd-gray-light-v4--hover">
                  <a class="js-fancybox d-block u-block-hover u-block-hover--scale-down" href="javascript:;"
                     data-fancybox="lightbox-gallery--17"
                     data-src="{{ root }}assets/img-temp/400x270/img12.jpg"
                     data-animate-in="bounceInDown"
                     data-animate-out="bounceOutDown"
                     data-speed="1000"
                     data-overlay-blur-bg="true"
                     data-caption="Lightbox Gallery">
                    <img class="img-fluid u-block-hover__main--grayscale u-block-hover__img" src="{{ root }}assets/img-temp/400x270/img12.jpg" alt="example-image">
                  </a>
                </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">
          </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 contentTarget = "#shortcode17" %}
        {% set modalID = "#modalMarkup" %}
        {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
      </section>
      <!-- End Gallery #07 -->
    </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>
