{# Settings #}
{% set root = "../../" %}
{% set mainNavActive_1 = "shortcodes" %}
{% set sidebarNavActive_1 = "shortcode-base-lightbox-options" %}
{% set title = "Lightbox Options" %}

{% 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/custombox/custombox.min.css">

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

{% include "html/assets/include/nunjucks/partials/css/css-unify.njk" %}
{% include "html/assets/include/nunjucks/partials/css/css-custom.njk" %}
</head>

<body class="u-body--header-side-push-left u-body--header-side-opened u-has-sidebar-navigation g-overflow-x-hidden">
  <main>
    {% include "html/assets/include/nunjucks/partials/blocks/headers/header-main.njk" %}

    {% include "html/assets/include/nunjucks/partials/blocks/sidebars/sidebar-shortcode-nav.njk" %}

    {% include "html/assets/include/nunjucks/partials/blocks/page-title/shortcode-page-title/shortcode-page-title-base.njk" %}

    <section>
      <div class="g-py-100">
        <div class="container">
          <!-- Lightbox Types -->
          <section>
            <!-- Heading -->
            <header class="g-mb-80">
              <div class="u-heading-v6-2  text-uppercase">
                <h2 class="h4 u-heading-v6__title g-font-weight-300">Lightbox Types</h2>
              </div>

              <div class="g-line-height-2 g-pl-90">
                <p>Nulla ipsum dolor sit amet, consectetur adipiscing elitut eleifend nisl. In hac habitasse platea dictumst. Curabitur hendrerit.</p>
              </div>
            </header>
            <!-- End Heading -->

            <!-- Lightbox Single Image -->
            <div class="row">
              <div class="col-md-3">
                <h3 class="h4 g-font-weight-300 g-mb-30">Lightbox Single Image</h3>
              </div>

              <div class="col-md-9">
                <div id="shortcode1">
                  <div class="shortcode-html">
                    <div class="row">
                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox" href="javascript:;"
                           data-type="image"
                           data-src="{{ root }}assets/img-temp/400x270/img4.jpg"
                           data-animate-in="zoomIn"
                           data-animate-out="zoomOut"
                           data-speed="1000"
                           data-overlay-bg="rgba(0, 0, 0, 0.5)">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/400x270/img4.jpg" alt="Image Description">
                        </a>
                      </div>

                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox" href="javascript:;"
                           data-src="{{ root }}assets/img-temp/400x270/img9.jpg"
                           data-animate-in="bounceIn"
                           data-animate-out="bounceOut"
                           data-speed="1000"
                           data-overlay-bg="rgba(0, 0, 0, 1)">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/400x270/img9.jpg" alt="Image Description">
                        </a>
                      </div>

                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox" href="javascript:;"
                           data-src="{{ root }}assets/img-temp/400x270/img13.jpg"
                           data-animate-in="zoomIn"
                           data-animate-out="zoomOut"
                           data-speed="1000"
                           data-overlay-bg="rgba(0, 0, 0, 1)">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/400x270/img13.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/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 = "#shortcode1" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End Lightbox Single Image -->

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

            <!-- Lightbox Gallery (without thumbnails) -->
            <div class="row">
              <div class="col-md-3">
                <h3 class="h4 g-font-weight-300 g-mb-30">Lightbox Gallery (without thumbnails)</h3>
              </div>
              <div class="col-md-9">
                <div id="shortcode2">
                  <div class="shortcode-html">
                    <div class="row">
                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox" href="javascript:;"
                           data-fancybox="lightbox-gallery"
                           data-src="{{ root }}assets/img-temp/400x270/img1.jpg"
                           data-caption="Lightbox Gallery"
                           data-speed="500"
                           data-is-infinite="true"
                           data-slideshow-speed="5000">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/400x270/img1.jpg" alt="Image Description">
                        </a>
                      </div>

                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox" href="javascript:;"
                           data-fancybox="lightbox-gallery"
                           data-src="{{ root }}assets/img-temp/400x270/img2.jpg"
                           data-caption="Lightbox Gallery"
                           data-is-infinite="true"
                           data-slideshow-speed="5000">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/400x270/img2.jpg" alt="Image Description">
                        </a>
                      </div>

                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox" href="javascript:;"
                           data-fancybox="lightbox-gallery"
                           data-src="{{ root }}assets/img-temp/400x270/img3.jpg"
                           data-caption="Lightbox Gallery"
                           data-speed="500"
                           data-is-infinite="true"
                           data-slideshow-speed="5000">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/400x270/img3.jpg" alt="Image Description">
                        </a>
                      </div>
                    </div>

                    <div class="row">
                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox" href="javascript:;"
                           data-fancybox="lightbox-gallery"
                           data-src="{{ root }}assets/img-temp/400x270/img4.jpg"
                           data-caption="Lightbox Gallery"
                           data-speed="500"
                           data-is-infinite="true"
                           data-slideshow-speed="5000">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/400x270/img4.jpg" alt="Image Description">
                        </a>
                      </div>

                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox" href="javascript:;"
                           data-fancybox="lightbox-gallery"
                           data-src="{{ root }}assets/img-temp/400x270/img5.jpg"
                           data-caption="Lightbox Gallery"
                           data-speed="500"
                           data-is-infinite="true"
                           data-slideshow-speed="5000">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/400x270/img5.jpg" alt="Image Description">
                        </a>
                      </div>

                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox" href="javascript:;"
                           data-fancybox="lightbox-gallery"
                           data-src="{{ root }}assets/img-temp/400x270/img6.jpg"
                           data-caption="Lightbox Gallery"
                           data-speed="500"
                           data-is-infinite="true"
                           data-slideshow-speed="5000">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/400x270/img6.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/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 = "#shortcode2" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End Lightbox Gallery (without thumbnails) -->

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

            <!-- Lightbox Gallery (with thumbnails) -->
            <div class="row">
              <div class="col-md-3">
                <h3 class="h4 g-font-weight-300 g-mb-30">Lightbox Gallery (with thumbnails)</h3>
              </div>

              <div class="col-md-9">
                <div id="shortcode3">
                  <div class="shortcode-html">
                    <div class="row">
                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox-thumbs" href="javascript:;"
                           data-fancybox="lightbox-gallery-2"
                           data-src="{{ root }}assets/img-temp/500x450/img1.jpg"
                           data-caption="Lightbox Gallery"
                           data-speed="500"
                           data-slideshow-speed="1000">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/500x450/img1.jpg" alt="Image Description">
                        </a>
                      </div>

                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox-thumbs" href="javascript:;"
                           data-fancybox="lightbox-gallery-2"
                           data-src="{{ root }}assets/img-temp/500x450/img2.jpg"
                           data-caption="Lightbox Gallery"
                           data-speed="500"
                           data-slideshow-speed="1000">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/500x450/img2.jpg" alt="Image Description">
                        </a>
                      </div>

                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox-thumbs" href="javascript:;"
                           data-fancybox="lightbox-gallery-2"
                           data-src="{{ root }}assets/img-temp/500x450/img3.jpg"
                           data-caption="Lightbox Gallery"
                           data-speed="500"
                           data-slideshow-speed="1000">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/500x450/img3.jpg" alt="Image Description">
                        </a>
                      </div>
                    </div>

                    <div class="row">
                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox-thumbs" href="javascript:;"
                           data-fancybox="lightbox-gallery-2"
                           data-src="{{ root }}assets/img-temp/500x450/img4.jpg"
                           data-caption="Lightbox Gallery"
                           data-speed="500"
                           data-slideshow-speed="1000">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/500x450/img4.jpg" alt="Image Description">
                        </a>
                      </div>

                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox-thumbs" href="javascript:;"
                           data-fancybox="lightbox-gallery-2"
                           data-src="{{ root }}assets/img-temp/500x450/img5.jpg"
                           data-caption="Lightbox Gallery"
                           data-speed="500"
                           data-slideshow-speed="1000">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/500x450/img5.jpg" alt="Image Description">
                        </a>
                      </div>

                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox-thumbs" href="javascript:;"
                           data-fancybox="lightbox-gallery-2"
                           data-src="{{ root }}assets/img-temp/500x450/img6.jpg"
                           data-caption="Lightbox Gallery"
                           data-speed="500"
                           data-slideshow-speed="1000">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/500x450/img6.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/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 gallery with thumbs
                        $.HSCore.components.HSPopup.init('.js-fancybox-thumbs', {
                          thumbs: {
                            showOnStart: true
                          }
                        });
                      });
                    </script>
                  </div>
                </div>

                {% set contentTarget = "#shortcode3" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End Lightbox Gallery (with thumbnails) -->

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

            <!-- Lightbox Gallery (with hidden images) -->
            <div class="row">
              <div class="col-md-3">
                <h3 class="h4 g-font-weight-300 g-mb-30">Lightbox Gallery (with hidden images)</h3>
              </div>

              <div class="col-md-9">
                <div id="shortcode4">
                  <div class="shortcode-html">
                    <div class="row">
                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox" href="javascript:;"
                           data-fancybox="lightbox-gallery-hidden"
                           data-src="{{ root }}assets/img-temp/500x650/img1.jpg"
                           data-caption="Image Description 1"
                           data-speed="500"
                           data-slideshow-speed="1000">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/500x650/img1.jpg" alt="Image Description">
                        </a>
                      </div>

                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox" href="javascript:;"
                           data-fancybox="lightbox-gallery-hidden"
                           data-src="{{ root }}assets/img-temp/500x650/img2.jpg"
                           data-caption="Image Description 2"
                           data-speed="500"
                           data-slideshow-speed="1000">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/500x650/img2.jpg" alt="Image Description">
                        </a>
                      </div>

                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox d-block u-bg-overlay g-bg-black-opacity-0_5--after" href="javascript:;"
                           data-fancybox="lightbox-gallery-hidden"
                           data-src="{{ root }}assets/img-temp/500x650/img3.jpg"
                           data-caption="Image Description 3"
                           data-speed="500"
                           data-slideshow-speed="1000">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/500x650/img3.jpg" alt="Image Description">
                          <span class="u-bg-overlay__inner g-absolute-centered g-color-white">
                          <span class="g-font-size-46">3+</span>
                          <br>
                          view photos
                        </span>
                        </a>
                      </div>

                      <img class="js-fancybox g-hidden-xs-up"
                           data-fancybox="lightbox-gallery-hidden"
                           data-src="{{ root }}assets/img-temp/500x650/img4.jpg"
                           data-caption="Image Description 4"
                           data-speed="500"
                           data-slideshow-speed="1000">
                      <img class="js-fancybox g-hidden-xs-up"
                           data-caption="Image Description 5"
                           data-src="{{ root }}assets/img-temp/500x650/img5.jpg"
                           data-fancybox="lightbox-gallery-hidden"
                           data-speed="500"
                           data-slideshow-speed="1000">
                      <img class="js-fancybox g-hidden-xs-up"
                           data-fancybox="lightbox-gallery-hidden"
                           data-src="{{ root }}assets/img-temp/500x650/img6.jpg"
                           data-caption="Image Description 6"
                           data-speed="500"
                           data-slideshow-speed="1000">
                    </div>
                  </div>

                  <div class="shortcode-styles">
                    <!-- CSS Implementing Plugins -->
                    <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 = "#shortcode4" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End Lightbox Gallery (with hidden images) -->

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

            <!-- Lightbox Gallery (with hidden videos) -->
            <div class="row">
              <div class="col-md-3">
                <h3 class="h4 g-font-weight-300 g-mb-30">Lightbox Gallery (with hidden videos)</h3>
              </div>

              <div class="col-md-9">
                <div id="shortcode5">
                  <div class="shortcode-html">
                    <div class="row">
                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox d-block u-bg-overlay g-bg-black-opacity-0_5--after" href="javascript:;"
                           data-fancybox="lightbox-gallery-hidden-2"
                           data-src="//www.youtube.com/embed/BNpiwOkKIJ8?autoplay=0">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/400x270/img8.jpg" alt="Image Description">
                          <span class="u-bg-overlay__inner g-absolute-centered g-color-white">
                          <span class="g-font-size-46">2</span>
                          <br>
                          videos
                        </span>
                        </a>
                      </div>

                      <iframe class="js-fancybox g-hidden-xs-up"
                              data-src="//www.youtube.com/embed/vlDzYIIOYmM?autoplay=0"
                              data-fancybox="lightbox-gallery-hidden-2"
                              data-type="iframe"></iframe>
                    </div>
                  </div>

                  <div class="shortcode-styles">
                    <!-- CSS Implementing Plugins -->
                    <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" %}
              </div>
            </div>
            <!-- End Lightbox Gallery (with hidden videos) -->

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

            <!-- Additional Lightbox Types -->
            <div class="row">
              <div class="col-md-3">
                <h3 class="h4 g-font-weight-300 g-mb-30">Additional Lightbox Types</h3>
              </div>

              <div class="col-md-9">
                <div id="shortcode6">
                  <div class="shortcode-html">
                    <a class="js-fancybox btn btn-md u-btn-primary g-mr-10 g-mb-15" href="javascript:;"
                       data-src="#fancybox-form"
                       data-speed="350">Open Form
                    </a>

                    <div id="fancybox-form" class="clearfix rounded-0 g-pa-30" style="display: none; min-width: 400px;">
                      <h4 class="h5 text-uppercase g-letter-spacing-1 g-mb-20">Fancybox with Form</h4>

                      <form>
                        <div class="form-group g-mb-20">
                          <label class="g-mb-5" for="alt-login">Login</label>
                          <input id="alt-login" class="form-control rounded-0 u-form-control g-px-15" type="email" placeholder="Enter email">
                        </div>

                        <div class="form-group g-mb-20">
                          <label class="g-mb-5" for="alt-password">Password</label>
                          <input id="alt-password" class="form-control rounded-0 u-form-control g-px-15 g-mb-5" type="email" placeholder="Enter email">
                        </div>

                        <a class="btn btn-md u-btn-primary pull-right" href="#">Log In</a>
                        <a class="d-inline-block g-color-gray-dark-v3 g-font-size-90x g-pt-10" href="#">Forgotten password?</a>
                      </form>
                    </div>

                    <a class="js-fancybox btn btn-md u-btn-primary g-mr-10 g-mb-15" href="javascript:;"
                       data-src="//www.youtube.com/embed/BNpiwOkKIJ8?autoplay=0"
                       data-speed="350">Open Video
                    </a>

                    <a class="js-fancybox btn btn-md u-btn-primary g-mr-10 g-mb-15" href="javascript:;"
                       data-src="//www.google.com/maps/@51.504155,-0.117749,17z"
                       data-speed="350">Open Google Map
                    </a>

<!--                     <a class="js-fancybox btn btn-md u-btn-primary g-mr-10 g-mb-15" href="#"
                       data-type="ajax"
                       data-src="../ajax/fancybox/iconblock.php"
                       data-filter="#one"
                       data-speed="350">Ajax
                    </a> -->
                  </div>

                  <div class="shortcode-styles">
                    <!-- CSS Implementing Plugins -->
                    <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 = "#shortcode6" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End Additional Lightbox Types -->
          </section>
          <!-- End Lightbox Types -->

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

          <!-- Popup Animations -->
          <section>
            <!-- Heading -->
            <header class="g-mb-80">
              <div class="u-heading-v6-2  text-uppercase">
                <h2 class="h4 u-heading-v6__title g-font-weight-300">Popup Animations</h2>
              </div>

              <div class="g-line-height-2 g-pl-90">
                <p>Nulla ipsum dolor sit amet, consectetur adipiscing elitut eleifend nisl. In hac habitasse platea dictumst. Curabitur hendrerit.</p>
              </div>
            </header>
            <!-- End Heading -->

            <!-- FlipInX/FlipOutX -->
            <div class="row">
              <div class="col-md-3">
                <h3 class="h4 g-font-weight-300 g-mb-30">FlipInX/FlipOutX</h3>
              </div>

              <div class="col-md-9">
                <div id="shortcode7">
                  <div class="shortcode-html">
                    <div class="row">
                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox" href="javascript:;"
                           data-src="{{ root }}assets/img-temp/350x230/img4.jpg"
                           data-caption="Single Image"
                           data-animate-in="flipInX"
                           data-animate-out="flipOutX"
                           data-speed="1000"
                           data-overlay-blur-bg="true">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/350x230/img4.jpg" alt="Image Description">
                        </a>
                      </div>

                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox" href="javascript:;"
                           data-src="{{ root }}assets/img-temp/350x230/img1.jpg"
                           data-caption="Single Image"
                           data-animate-in="flipInX"
                           data-animate-out="flipOutX"
                           data-speed="1000"
                           data-overlay-blur-bg="true">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/350x230/img1.jpg" alt="Image Description">
                        </a>
                      </div>

                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox" href="javascript:;"
                           data-src="{{ root }}assets/img-temp/350x230/img3.jpg"
                           data-caption="Single Image"
                           data-animate-in="flipInX"
                           data-animate-out="flipOutX"
                           data-speed="1000"
                           data-overlay-blur-bg="true">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/350x230/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/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 = "#shortcode7" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End FlipInX/FlipOutX -->

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

            <!-- FlipInY/FlipOutY -->
            <div class="row">
              <div class="col-md-3">
                <h3 class="h4 g-font-weight-300 g-mb-30">FlipInY/FlipOutY</h3>
              </div>

              <div class="col-md-9">
                <div id="shortcode8">
                  <div class="shortcode-html">
                    <div class="row">
                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox" href="javascript:;"
                           data-src="{{ root }}assets/img-temp/400x270/img14.jpg"
                           data-caption="Single Image"
                           data-animate-in="flipInY"
                           data-animate-out="flipOutY"
                           data-speed="1000"
                           data-overlay-blur-bg="true">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/400x270/img14.jpg" alt="Image Description">
                        </a>
                      </div>

                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox" href="javascript:;"
                           data-src="{{ root }}assets/img-temp/400x270/img11.jpg"
                           data-caption="Single Image"
                           data-animate-in="flipInY"
                           data-animate-out="flipOutY"
                           data-speed="1000"
                           data-overlay-blur-bg="true">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/400x270/img11.jpg" alt="Image Description">
                        </a>
                      </div>

                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox" href="javascript:;"
                           data-src="{{ root }}assets/img-temp/400x270/img13.jpg"
                           data-caption="Single Image"
                           data-animate-in="flipInY"
                           data-animate-out="flipOutY"
                           data-speed="1000"
                           data-overlay-blur-bg="true">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/400x270/img13.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/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 = "#shortcode8" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End FlipInY/FlipOutY -->

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

            <!-- BounceInRight/BounceOutLeft -->
            <div class="row">
              <div class="col-md-3">
                <h3 class="h4 g-font-weight-300 g-mb-30">BounceInRight/ BounceOutLeft</h3>
              </div>

              <div class="col-md-9">
                <div id="shortcode9">
                  <div class="shortcode-html">
                    <div class="row">
                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox" href="javascript:;"
                           data-src="{{ root }}assets/img-temp/230x230/img4.jpg"
                           data-caption="Single Image"
                           data-animate-in="bounceInRight"
                           data-animate-out="bounceOutLeft"
                           data-speed="1000"
                           data-overlay-blur-bg="true">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/230x230/img4.jpg" alt="Image Description">
                        </a>
                      </div>

                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox" href="javascript:;"
                           data-src="{{ root }}assets/img-temp/230x230/img1.jpg"
                           data-caption="Single Image"
                           data-animate-in="bounceInRight"
                           data-animate-out="bounceOutLeft"
                           data-speed="2000"
                           data-overlay-blur-bg="true">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/230x230/img1.jpg" alt="Image Description">
                        </a>
                      </div>

                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox" href="javascript:;"
                           data-src="{{ root }}assets/img-temp/230x230/img3.jpg"
                           data-caption="Single Image"
                           data-animate-in="bounceInRight"
                           data-animate-out="bounceOutLeft"
                           data-speed="400"
                           data-overlay-blur-bg="true">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/230x230/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/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 = "#shortcode9" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End BounceInRight/BounceOutLeft -->

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

            <!-- BounceInRight/BounceOutRight -->
            <div class="row">
              <div class="col-md-3">
                <h3 class="h4 g-font-weight-300 g-mb-30">BounceInRight/ BounceOutRight</h3>
              </div>

              <div class="col-md-9">
                <div id="shortcode10">
                  <div class="shortcode-html">
                    <div class="row">
                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox" href="javascript:;"
                           data-src="{{ root }}assets/img-temp/500x450/img4.jpg"
                           data-caption="Single Image"
                           data-animate-in="bounceInRight"
                           data-animate-out="bounceOutRight"
                           data-speed="1000"
                           data-overlay-blur-bg="true">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/500x450/img4.jpg" alt="Image Description">
                        </a>
                      </div>

                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox" href="javascript:;"
                           data-src="{{ root }}assets/img-temp/500x450/img1.jpg"
                           data-caption="Single Image"
                           data-animate-in="bounceInRight"
                           data-animate-out="bounceOutRight"
                           data-speed="1000"
                           data-overlay-blur-bg="true">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/500x450/img1.jpg" alt="Image Description">
                        </a>
                      </div>

                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox" href="javascript:;"
                           data-src="{{ root }}assets/img-temp/500x450/img3.jpg"
                           data-caption="Single Image"
                           data-animate-in="bounceInRight"
                           data-animate-out="bounceOutRight"
                           data-speed="1000"
                           data-overlay-blur-bg="true">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/500x450/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/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 = "#shortcode10" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End BounceInRight/BounceOutRight -->

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

            <!-- BounceInDown/BounceOutDown -->
            <div class="row">
              <div class="col-md-3">
                <h3 class="h4 g-font-weight-300 g-mb-30">BounceInDown/ BounceOutDown</h3>
              </div>

              <div class="col-md-9">
                <div id="shortcode11">
                  <div class="shortcode-html">
                    <div class="row">
                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox" href="javascript:;"
                           data-src="{{ root }}assets/img-temp/400x270/img4.jpg"
                           data-caption="Single Image"
                           data-animate-in="bounceInDown"
                           data-animate-out="bounceOutDown"
                           data-speed="1000"
                           data-overlay-blur-bg="true">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/400x270/img4.jpg" alt="Image Description">
                        </a>
                      </div>

                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox" href="javascript:;"
                           data-src="{{ root }}assets/img-temp/400x270/img1.jpg"
                           data-caption="Single Image"
                           data-animate-in="bounceInDown"
                           data-animate-out="bounceOutDown"
                           data-speed="1000"
                           data-overlay-blur-bg="true">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/400x270/img1.jpg" alt="Image Description">
                        </a>
                      </div>

                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox" href="javascript:;"
                           data-src="{{ root }}assets/img-temp/400x270/img3.jpg"
                           data-caption="Single Image"
                           data-animate-in="bounceInDown"
                           data-animate-out="bounceOutDown"
                           data-speed="1000"
                           data-overlay-blur-bg="true">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/400x270/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/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 = "#shortcode11" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End BounceInDown/BounceOutDown -->

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

            <!-- ZoomIn/ZoomOut -->
            <div class="row">
              <div class="col-md-3">
                <h3 class="h4 g-font-weight-300 g-mb-30">ZoomIn/ZoomOut</h3>
              </div>

              <div class="col-md-9">
                <div id="shortcode12">
                  <div class="shortcode-html">
                    <div class="row">
                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox" href="javascript:;"
                           data-src="{{ root }}assets/img-temp/500x320/img2.jpg"
                           data-caption="Single Image"
                           data-animate-in="zoomIn"
                           data-animate-out="zoomOut"
                           data-overlay-blur-bg="true">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/500x320/img2.jpg" alt="Image Description">
                        </a>
                      </div>

                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox" href="javascript:;"
                           data-src="{{ root }}assets/img-temp/500x320/img1.jpg"
                           data-caption="Single Image"
                           data-animate-in="zoomIn"
                           data-animate-out="zoomOut"
                           data-overlay-blur-bg="true">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/500x320/img1.jpg" alt="Image Description">
                        </a>
                      </div>

                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox" href="javascript:;"
                           data-src="{{ root }}assets/img-temp/500x320/img3.jpg"
                           data-caption="Single Image"
                           data-animate-in="zoomIn"
                           data-animate-out="zoomOut"
                           data-overlay-blur-bg="true">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/500x320/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/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 = "#shortcode12" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End ZoomIn/ZoomOut -->

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

            <!-- FadeInRightBig/FadeOutLeftBig -->
            <div class="row">
              <div class="col-md-3">
                <h3 class="h4 g-font-weight-300 g-mb-30">FadeInRightBig/ FadeOutLeftBig</h3>
              </div>

              <div class="col-md-9">
                <div id="shortcode13">
                  <div class="shortcode-html">
                    <div class="row">
                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox" href="javascript:;"
                           data-src="{{ root }}assets/img-temp/900x400/img4.jpg"
                           data-caption="Single Image"
                           data-animate-in="fadeInRightBig"
                           data-animate-out="fadeOutLeftBig"
                           data-speed="1000"
                           data-overlay-blur-bg="true">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/900x400/img4.jpg" alt="Image Description">
                        </a>
                      </div>

                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox" href="javascript:;"
                           data-src="{{ root }}assets/img-temp/900x400/img1.jpg"
                           data-caption="Single Image"
                           data-animate-in="fadeInRightBig"
                           data-animate-out="fadeOutLeftBig"
                           data-speed="1000"
                           data-overlay-blur-bg="true">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/900x400/img1.jpg" alt="Image Description">
                        </a>
                      </div>

                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox" href="javascript:;"
                           data-src="{{ root }}assets/img-temp/900x400/img3.jpg"
                           data-caption="Single Image"
                           data-animate-in="fadeInRightBig"
                           data-animate-out="fadeOutLeftBig"
                           data-speed="1000"
                           data-overlay-blur-bg="true">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/900x400/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/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" %}
              </div>
            </div>
            <!-- End FadeInRightBig/FadeOutLeftBig -->

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

            <!-- FadeInDownBig/FadeOutDownBig -->
            <div class="row">
              <div class="col-md-3">
                <h3 class="h4 g-font-weight-300 g-mb-30">FadeInDownBig/ FadeOutDownBig</h3>
              </div>

              <div class="col-md-9">
                <div id="shortcode14">
                  <div class="shortcode-html">
                    <div class="row">
                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox" href="javascript:;"
                           data-src="{{ root }}assets/img-temp/400x270/img12.jpg"
                           data-caption="Single Image"
                           data-animate-in="fadeInDownBig"
                           data-animate-out="fadeOutDownBig"
                           data-speed="1000"
                           data-overlay-blur-bg="true">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/400x270/img12.jpg" alt="Image Description">
                        </a>
                      </div>

                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox" href="javascript:;"
                           data-src="{{ root }}assets/img-temp/400x270/img15.jpg"
                           data-caption="Single Image"
                           data-animate-in="fadeInDownBig"
                           data-animate-out="fadeOutDownBig"
                           data-speed="1000"
                           data-overlay-blur-bg="true">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/400x270/img15.jpg" alt="Image Description">
                        </a>
                      </div>

                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox" href="javascript:;"
                           data-src="{{ root }}assets/img-temp/400x270/img9.jpg"
                           data-caption="Single Image"
                           data-animate-in="fadeInDownBig"
                           data-animate-out="fadeOutDownBig"
                           data-speed="1000"
                           data-overlay-blur-bg="true">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/400x270/img9.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/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 = "#shortcode14" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End FadeInDownBig/FadeOutDownBig -->

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

            <!-- LightSpeedIn/LightSpeedOut -->
            <div class="row">
              <div class="col-md-3">
                <h3 class="h4 g-font-weight-300 g-mb-30">LightSpeedIn/ LightSpeedOut</h3>
              </div>

              <div class="col-md-9">
                <div id="shortcode15">
                  <div class="shortcode-html">
                    <div class="row">
                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox" href="javascript:;"
                           data-src="{{ root }}assets/img-temp/400x270/img7.jpg"
                           data-caption="Single Image"
                           data-animate-in="lightSpeedIn"
                           data-animate-out="lightSpeedOut"
                           data-speed="1000"
                           data-overlay-blur-bg="true">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/400x270/img7.jpg" alt="Image Description">
                        </a>
                      </div>

                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox" href="javascript:;"
                           data-src="{{ root }}assets/img-temp/400x270/img8.jpg"
                           data-caption="Single Image"
                           data-animate-in="lightSpeedIn"
                           data-animate-out="lightSpeedOut"
                           data-speed="1000"
                           data-overlay-blur-bg="true">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/400x270/img8.jpg" alt="Image Description">
                        </a>
                      </div>

                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox" href="javascript:;"
                           data-src="{{ root }}assets/img-temp/400x270/img6.jpg"
                           data-caption="Single Image"
                           data-animate-in="lightSpeedIn"
                           data-animate-out="lightSpeedOut"
                           data-speed="1000"
                           data-overlay-blur-bg="true">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/400x270/img6.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/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" %}
              </div>
            </div>
            <!-- End LightSpeedIn/LightSpeedOut -->

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

            <!-- RotateIn/RotateOut -->
            <div class="row">
              <div class="col-md-3">
                <h3 class="h4 g-font-weight-300 g-mb-30">RotateIn/RotateOut</h3>
              </div>

              <div class="col-md-9">
                <div id="shortcode16">
                  <div class="shortcode-html">
                    <div class="row">
                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox" href="javascript:;"
                           data-src="{{ root }}assets/img-temp/500x450/img11.jpg"
                           data-caption="Single Image"
                           data-animate-in="rotateIn"
                           data-animate-out="rotateOut"
                           data-speed="1000"
                           data-overlay-blur-bg="true">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/500x450/img11.jpg" alt="Image Description">
                        </a>
                      </div>

                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox" href="javascript:;"
                           data-src="{{ root }}assets/img-temp/500x450/img10.jpg"
                           data-caption="Single Image"
                           data-animate-in="rotateIn"
                           data-animate-out="rotateOut"
                           data-speed="1000"
                           data-overlay-blur-bg="true">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/500x450/img10.jpg" alt="Image Description">
                        </a>
                      </div>

                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox" href="javascript:;"
                           data-src="{{ root }}assets/img-temp/500x450/img6.jpg"
                           data-caption="Single Image"
                           data-animate-in="rotateIn"
                           data-animate-out="rotateOut"
                           data-speed="1000"
                           data-overlay-blur-bg="true">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/500x450/img6.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/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 = "#shortcode16" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End RotateIn/RotateOut -->

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

            <!-- SlideInUp/SlideOutUp -->
            <div class="row">
              <div class="col-md-3">
                <h3 class="h4 g-font-weight-300 g-mb-30">SlideInUp/SlideOutUp</h3>
              </div>

              <div class="col-md-9">
                <div id="shortcode17">
                  <div class="shortcode-html">
                    <div class="row">
                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox" href="javascript:;"
                           data-src="{{ root }}assets/img-temp/500x450/img7.jpg"
                           data-caption="Single Image"
                           data-animate-in="slideInUp"
                           data-animate-out="slideOutUp"
                           data-speed="1000"
                           data-overlay-bg="rgba(0, 0, 0, 0.4)"
                           data-overlay-blur-bg="true">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/500x450/img7.jpg" alt="Image Description">
                        </a>
                      </div>

                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox" href="javascript:;"
                           data-src="{{ root }}assets/img-temp/500x450/img8.jpg"
                           data-caption="Single Image"
                           data-animate-in="slideInUp"
                           data-animate-out="slideOutUp"
                           data-speed="1000"
                           data-overlay-bg="rgba(0, 0, 0, 0.4)"
                           data-overlay-blur-bg="true">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/500x450/img8.jpg" alt="Image Description">
                        </a>
                      </div>

                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox" href="javascript:;"
                           data-src="{{ root }}assets/img-temp/500x450/img5.jpg"
                           data-caption="Single Image"
                           data-animate-in="slideInUp"
                           data-animate-out="slideOutUp"
                           data-speed="1000"
                           data-overlay-bg="rgba(0, 0, 0, 0.4)"
                           data-overlay-blur-bg="true">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/500x450/img5.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/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" %}
              </div>
            </div>
            <!-- End SlideInUp/SlideOutUp -->

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

            <!-- SlideInLeft/SlideOutRight -->
            <div class="row">
              <div class="col-md-3">
                <h3 class="h4 g-font-weight-300 g-mb-30">SlideInLeft/ SlideOutRight</h3>
              </div>

              <div class="col-md-9">
                <div id="shortcode18">
                  <div class="shortcode-html">
                    <div class="row">
                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox" href="javascript:;"
                           data-src="{{ root }}assets/img-temp/400x270/img4.jpg"
                           data-caption="Single Image"
                           data-animate-in="slideInLeft"
                           data-animate-out="slideOutRight"
                           data-speed="1000"
                           data-overlay-blur-bg="true">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/400x270/img4.jpg" alt="Image Description">
                        </a>
                      </div>

                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox" href="javascript:;"
                           data-src="{{ root }}assets/img-temp/400x270/img1.jpg"
                           data-caption="Single Image"
                           data-animate-in="slideInLeft"
                           data-animate-out="slideOutRight"
                           data-speed="1000"
                           data-overlay-blur-bg="true">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/400x270/img1.jpg" alt="Image Description">
                        </a>
                      </div>

                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox" href="javascript:;"
                           data-src="{{ root }}assets/img-temp/400x270/img3.jpg"
                           data-caption="Single Image"
                           data-animate-in="slideInLeft"
                           data-animate-out="slideOutRight"
                           data-speed="1000"
                           data-overlay-blur-bg="true">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/400x270/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/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 = "#shortcode18" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End SlideInLeft/SlideOutRight -->

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

            <!-- RollIn/RollOut -->
            <div class="row">
              <div class="col-md-3">
                <h3 class="h4 g-font-weight-300 g-mb-30">RollIn/RollOut</h3>
              </div>

              <div class="col-md-9">
                <div id="shortcode19">
                  <div class="shortcode-html">
                    <div class="row">
                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox" href="javascript:;"
                           data-src="{{ root }}assets/img-temp/400x270/img5.jpg"
                           data-caption="Single Image"
                           data-animate-in="rollIn"
                           data-animate-out="rollOut"
                           data-speed="1000"
                           data-overlay-blur-bg="true">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/400x270/img5.jpg" alt="Image Description">
                        </a>
                      </div>

                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox" href="javascript:;"
                           data-src="{{ root }}assets/img-temp/400x270/img6.jpg"
                           data-caption="Single Image"
                           data-animate-in="rollIn"
                           data-animate-out="rollOut"
                           data-speed="1000"
                           data-overlay-blur-bg="true">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/400x270/img6.jpg" alt="Image Description">
                        </a>
                      </div>

                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox" href="javascript:;"
                           data-src="{{ root }}assets/img-temp/400x270/img7.jpg"
                           data-caption="Single Image"
                           data-animate-in="rollIn"
                           data-animate-out="rollOut"
                           data-speed="1000"
                           data-overlay-blur-bg="true">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/400x270/img7.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/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 = "#shortcode19" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End RollIn/RollOut -->
          </section>
          <!-- End Popup Animations -->

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

          <!-- Examples -->
          <section>
            <!-- Heading -->
            <header class="g-mb-80">
              <div class="u-heading-v6-2  text-uppercase">
                <h2 class="h4 u-heading-v6__title g-font-weight-300">Examples</h2>
              </div>
              <div class="g-line-height-2 g-pl-90">
                <p>Nulla ipsum dolor sit amet, consectetur adipiscing elitut eleifend nisl. In hac habitasse platea dictumst. Curabitur hendrerit.</p>
              </div>
            </header>
            <!-- End Heading -->

            <!-- With Icon -->
            <div class="row">
              <div class="col-md-3">
                <h3 class="h4 g-font-weight-300 g-mb-30">With Icon</h3>
              </div>

              <div class="col-md-9 g-mb-60">
                <div id="shortcode20">
                  <div class="shortcode-html">
                    <div class="row">
                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox d-block g-pos-rel" href="javascript:;"
                           data-src="{{ root }}assets/img-temp/500x450/img1.jpg"
                           data-caption="Single Image">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/500x450/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="col-md-4 g-mb-30">
                        <a class="js-fancybox d-block g-pos-rel" href="javascript:;"
                           data-src="{{ root }}assets/img-temp/500x450/img2.jpg"
                           data-caption="Single Image">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/500x450/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="col-md-4 g-mb-30">
                        <a class="js-fancybox d-block g-pos-rel" href="javascript:;"
                           data-src="{{ root }}assets/img-temp/500x450/img3.jpg"
                           data-caption="Single Image">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/500x450/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>
                  </div>

                  <div class="shortcode-styles">
                    <!-- CSS Implementing Plugins -->
                    <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 = "#shortcode20" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div class="col-md-9 ml-md-auto">
                <div id="shortcode21">
                  <div class="shortcode-html">
                    <div class="row">
                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox d-block u-block-hover g-pos-rel" href="javascript:;"
                           data-src="//www.youtube.com/embed/BNpiwOkKIJ8?autoplay=0"
                           data-caption="Single Image">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/500x450/img4.jpg" alt="Image Description">
                          <span class="u-icon-v3 u-icon-size--sm g-bg-white-opacity-0_7 g-bg-primary--hover g-color-black g-color-white--hover g-font-size-12 g-rounded-50x g-cursor-pointer g-absolute-centered">
                          <i class="fa fa-play g-left-2"></i>
                        </span>
                        </a>
                      </div>

                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox d-block u-block-hover g-pos-rel" href="javascript:;"
                           data-src="//www.youtube.com/embed/BNpiwOkKIJ8?autoplay=0"
                           data-caption="Single Image">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/500x450/img6.jpg" alt="Image Description">
                          <span class="u-icon-v3 u-icon-size--sm g-bg-white-opacity-0_7 g-bg-primary--hover g-color-black g-color-white--hover g-font-size-12 g-rounded-50x g-cursor-pointer g-absolute-centered">
                          <i class="fa fa-play g-left-2"></i>
                        </span>
                        </a>
                      </div>

                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox d-block u-block-hover g-pos-rel" href="javascript:;"
                           data-src="//www.youtube.com/embed/BNpiwOkKIJ8?autoplay=0"
                           data-caption="Single Image">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/500x450/img8.jpg" alt="Image Description">
                          <span class="u-icon-v3 u-icon-size--sm g-bg-white-opacity-0_7 g-bg-primary--hover g-color-black g-color-white--hover g-font-size-12 g-rounded-50x g-cursor-pointer g-absolute-centered">
                          <i class="fa fa-play g-left-2"></i>
                        </span>
                        </a>
                      </div>
                    </div>
                  </div>

                  <div class="shortcode-styles">
                    <!-- CSS Implementing Plugins -->
                    <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 = "#shortcode21" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End With Icon -->

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

            <!-- With Hover Effect -->
            <div class="row">
              <div class="col-md-3">
                <h3 class="h4 g-font-weight-300">With Hover Effect</h3>
                <p>More block hover effects – shortcode-blocks-block-hovers.html</p>
              </div>

              <div class="col-md-9 g-mb-60">
                <div id="shortcode22">
                  <div class="shortcode-html">
                    <div class="row">
                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox d-block u-block-hover" href="javascript:;"
                           data-src="{{ root }}assets/img-temp/500x600/img4.jpg"
                           data-caption="Single Image">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/500x600/img4.jpg" alt="Image Description">
                          <span class="u-block-hover__additional--fade g-bg-black-opacity-0_8 g-color-white">
                          <i class="hs-icon hs-icon-plus g-absolute-centered g-font-size-25"></i>
                        </span>
                        </a>
                      </div>

                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox d-block u-block-hover" href="javascript:;"
                           data-src="{{ root }}assets/img-temp/500x600/img1.jpg"
                           data-caption="Single Image">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/500x600/img1.jpg" alt="Image Description">
                          <span class="u-block-hover__additional--fade g-bg-black-opacity-0_8 g-color-white">
                          <i class="hs-icon hs-icon-plus g-absolute-centered g-font-size-25"></i>
                        </span>
                        </a>
                      </div>

                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox d-block u-block-hover" href="javascript:;"
                           data-src="{{ root }}assets/img-temp/500x600/img3.jpg"
                           data-caption="Single Image">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/500x600/img3.jpg" alt="Image Description">
                          <span class="u-block-hover__additional--fade g-bg-black-opacity-0_8 g-color-white">
                          <i class="hs-icon hs-icon-plus g-absolute-centered g-font-size-25"></i>
                        </span>
                        </a>
                      </div>
                    </div>
                  </div>

                  <div class="shortcode-styles">
                    <!-- CSS Implementing Plugins -->
                    <link type="text/plain" rel="stylesheet" href="{{ root }}assets/vendor/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 = "#shortcode22" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div class="col-md-9 ml-md-auto">
                <div id="shortcode23">
                  <div class="shortcode-html">
                    <div class="row">
                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox d-block u-block-hover" href="javascript:;"
                           data-src="//www.youtube.com/embed/BNpiwOkKIJ8?autoplay=0">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/500x600/img2.jpg" alt="Image Description">
                          <span class="u-block-hover__additional--fade g-bg-black-opacity-0_8 g-color-white">
                          <i class="hs-icon hs-icon-play g-absolute-centered g-font-size-25"></i>
                        </span>
                        </a>
                      </div>

                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox d-block u-block-hover" href="javascript:;"
                           data-src="//www.youtube.com/embed/BNpiwOkKIJ8?autoplay=0">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/500x600/img3.jpg" alt="Image Description">
                          <span class="u-block-hover__additional--fade g-bg-black-opacity-0_8 g-color-white">
                          <i class="hs-icon hs-icon-play g-absolute-centered g-font-size-25"></i>
                        </span>
                        </a>
                      </div>

                      <div class="col-md-4 g-mb-30">
                        <a class="js-fancybox d-block u-block-hover" href="javascript:;"
                           data-src="http://www.youtube.com/embed/BNpiwOkKIJ8?autoplay=0">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/500x600/img4.jpg" alt="Image Description">
                          <span class="u-block-hover__additional--fade g-bg-black-opacity-0_8 g-color-white">
                          <i class="hs-icon hs-icon-play g-absolute-centered g-font-size-25"></i>
                        </span>
                        </a>
                      </div>
                    </div>
                  </div>

                  <div class="shortcode-styles">
                    <!-- CSS Implementing Plugins -->
                    <link type="text/plain" rel="stylesheet" href="{{ root }}assets/vendor/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 = "#shortcode23" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End With Hover Effect -->
          </section>
          <!-- End Examples -->
        </div>
      </div>
    </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/fancybox/jquery.fancybox.min.js"></script>

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

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

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

  <!-- JS Unify -->
  <script src="{{ root }}assets/js/hs.core.js"></script>
  <script src="{{ root }}assets/js/components/hs.header.js"></script>
  <script src="{{ root }}assets/js/helpers/hs.hamburgers.js"></script>
  <script src="{{ root }}assets/js/components/hs.header-side.js"></script>
  <script src="{{ root }}assets/js/components/hs.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 popups
      $.HSCore.components.HSPopup.init('.js-fancybox');

      // initialization of gallery with thumbs
      $.HSCore.components.HSPopup.init('.js-fancybox-thumbs', {
        thumbs: {
          autoStart: true
        }
      });
    });

    $(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>
