{# Settings #}
{% set root = "../../" %}
{% set mainNavActive_1 = "shortcodes" %}
{% set sidebarNavActive_1 = "shortcode-base-onscroll-animations" %}
{% set title = "Animations on Scroll" %}

{% 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">

{% 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" %}

    <!-- Animations -->
    <section>
      <div class="container g-py-70">
        <!-- Animation Tada -->
        <section class="g-py-30">
          <div class="text-center g-mb-50">
            <h2 class="h4">Animation Tada</h2>
          </div>

          <div id="shortcode1">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-md-8 g-pr-50--md g-mb-30 g-mb-0--md">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div>

                <div class="col-md-4">
                  <img class="w-100 g-px-50" src="{{ root }}assets/img-temp/125x115/img1.png" alt="Image Description"
                       data-animation="tada"
                       data-animation-out="zoomOutDown"
                       data-animation-delay="0"
                       data-animation-duration="1000">
                </div>
              </div>
            </div>

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

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

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

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).on('ready', function () {
                  // initialization of scroll animation
                  $.HSCore.components.HSOnScrollAnimation.init('[data-animation]');
                });
              </script>
            </div>
          </div>

          {% set contentTarget = "#shortcode1" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </section>
        <!-- End Animation Tada -->

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

        <!-- Animation Swing -->
        <section class="g-py-30">
          <div class="text-center g-mb-50">
            <h2 class="h4">Animation Swing</h2>
          </div>

          <div id="shortcode2">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-md-4 g-pr-30--md g-mb-30 g-mb-0--md">
                  <img class="w-100 g-px-50" src="{{ root }}assets/img-temp/125x115/img1.png" alt="Image Description"
                       data-animation="swing"
                       data-animation-duration="1000">
                </div>

                <div class="col-md-8">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div>
              </div>
            </div>

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

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

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

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).on('ready', function () {
                  // initialization of scroll animation
                  $.HSCore.components.HSOnScrollAnimation.init('[data-animation]');
                });
              </script>
            </div>
          </div>

          {% set contentTarget = "#shortcode2" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </section>
        <!-- End Animation Swing -->

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

        <!-- Animation Wobble -->
        <section class="g-py-30">
          <div class="text-center g-mb-50">
            <h2 class="h4">Animation Wobble</h2>
          </div>

          <div id="shortcode3">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-md-8 g-pr-50--md g-mb-30 g-mb-0--md">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div>

                <div class="col-md-4">
                  <img class="w-100 g-px-50" src="{{ root }}assets/img-temp/125x115/img1.png" alt="Image Description"
                       data-animation="wobble"
                       data-animation-delay="0"
                       data-animation-duration="1000">
                </div>
              </div>
            </div>

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

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

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

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).on('ready', function () {
                  // initialization of scroll animation
                  $.HSCore.components.HSOnScrollAnimation.init('[data-animation]');
                });
              </script>
            </div>
          </div>

          {% set contentTarget = "#shortcode3" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </section>
        <!-- End Animation Wobble -->

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

        <!-- Animation Rubber Band -->
        <section class="g-py-30">
          <div class="text-center g-mb-50">
            <h2 class="h4">Animation Rubber Band</h2>
          </div>

          <div id="shortcode4">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-md-4 g-pr-30--md g-mb-30 g-mb-0--md">
                  <img class="w-100 g-px-50" src="{{ root }}assets/img-temp/125x115/img1.png" alt="Image Description"
                       data-animation="rubberBand"
                       data-animation-delay="0"
                       data-animation-duration="1000">
                </div>

                <div class="col-md-8">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div>
              </div>
            </div>

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

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

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

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).on('ready', function () {
                  // initialization of scroll animation
                  $.HSCore.components.HSOnScrollAnimation.init('[data-animation]');
                });
              </script>
            </div>
          </div>

          {% set contentTarget = "#shortcode4" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </section>
        <!-- End Animation Rubber Band -->

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

        <!-- Animation Shake -->
        <section class="g-py-30">
          <div class="text-center g-mb-50">
            <h2 class="h4">Animation Shake</h2>
          </div>

          <div id="shortcode5">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-md-8 g-pr-50--md g-mb-30 g-mb-0--md">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div>

                <div class="col-md-4">
                  <img class="w-100 g-px-50" src="{{ root }}assets/img-temp/125x115/img1.png" alt="Image Description"
                       data-animation="shake"
                       data-animation-delay="0"
                       data-animation-duration="1000">
                </div>
              </div>
            </div>

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

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

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

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).on('ready', function () {
                  // initialization of scroll animation
                  $.HSCore.components.HSOnScrollAnimation.init('[data-animation]');
                });
              </script>
            </div>
          </div>

          {% set contentTarget = "#shortcode5" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </section>
        <!-- End Animation Shake -->

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

        <!-- Animation Pulse -->
        <section class="g-py-30">
          <div class="text-center g-mb-50">
            <h2 class="h4">Animation Pulse</h2>
          </div>

          <div id="shortcode6">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-md-4 g-pr-30--md g-mb-30 g-mb-0--md">
                  <img class="w-100 g-px-50" src="{{ root }}assets/img-temp/125x115/img1.png" alt="Image Description"
                       data-animation="pulse"
                       data-animation-delay="0"
                       data-animation-duration="1000">
                </div>

                <div class="col-md-8">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div>
              </div>
            </div>

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

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

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

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).on('ready', function () {
                  // initialization of scroll animation
                  $.HSCore.components.HSOnScrollAnimation.init('[data-animation]');
                });
              </script>
            </div>
          </div>

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

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

        <!-- Animation Bounce -->
        <section class="g-py-30">
          <div class="text-center g-mb-50">
            <h2 class="h4">Animation Bounce</h2>
          </div>

          <div id="shortcode7">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-md-8 g-pr-50--md g-mb-30 g-mb-0--md">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div>

                <div class="col-md-4">
                  <img class="w-100 g-px-50" src="{{ root }}assets/img-temp/125x115/img1.png" alt="Image Description"
                       data-animation="bounce"
                       data-animation-delay="0"
                       data-animation-duration="1000">
                </div>
              </div>
            </div>

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

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

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

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).on('ready', function () {
                  // initialization of scroll animation
                  $.HSCore.components.HSOnScrollAnimation.init('[data-animation]');
                });
              </script>
            </div>
          </div>

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

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

        <!-- Animation Bounce In -->
        <section class="g-py-30">
          <div class="text-center g-mb-50">
            <h2 class="h4">Animation Bounce In</h2>
          </div>

          <div id="shortcode8">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-md-4 g-pr-30--md g-mb-30 g-mb-0--md">
                  <img class="w-100 g-px-50" src="{{ root }}assets/img-temp/125x115/img1.png" alt="Image Description"
                       data-animation="bounceIn"
                       data-animation-delay="0"
                       data-animation-duration="1000">
                </div>

                <div class="col-md-8">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div>
              </div>
            </div>

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

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

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

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).on('ready', function () {
                  // initialization of scroll animation
                  $.HSCore.components.HSOnScrollAnimation.init('[data-animation]');
                });
              </script>
            </div>
          </div>

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

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

        <!-- Animation Bounce In Left -->
        <section class="g-py-30">
          <div class="text-center g-mb-50">
            <h2 class="h4">Animation Bounce In Left</h2>
          </div>

          <div id="shortcode9">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-md-8 g-pr-50--md g-mb-30 g-mb-0--md">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div>

                <div class="col-md-4">
                  <img class="w-100 g-px-50" src="{{ root }}assets/img-temp/125x115/img1.png" alt="Image Description"
                       data-animation="bounceInLeft"
                       data-animation-delay="0"
                       data-animation-duration="1000">
                </div>
              </div>
            </div>

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

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

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

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).on('ready', function () {
                  // initialization of scroll animation
                  $.HSCore.components.HSOnScrollAnimation.init('[data-animation]');
                });
              </script>
            </div>
          </div>

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

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

        <!-- Animation Bounce In Right -->
        <section class="g-py-30">
          <div class="text-center g-mb-50">
            <h2 class="h4">Animation Bounce In Right</h2>
          </div>

          <div id="shortcode10">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-md-4 g-pr-30--md g-mb-30 g-mb-0--md">
                  <img class="w-100 g-px-50" src="{{ root }}assets/img-temp/125x115/img1.png" alt="Image Description"
                       data-animation="bounceInRight"
                       data-animation-delay="0"
                       data-animation-duration="1000">
                </div>

                <div class="col-md-8">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div>
              </div>
            </div>

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

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

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

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).on('ready', function () {
                  // initialization of scroll animation
                  $.HSCore.components.HSOnScrollAnimation.init('[data-animation]');
                });
              </script>
            </div>
          </div>

          {% set contentTarget = "#shortcode10" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </section>
        <!-- End Animation Bounce In Right -->

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

        <!-- Animation Bounce In Down -->
        <section class="g-py-30">
          <div class="text-center g-mb-50">
            <h2 class="h4">Animation Bounce In Down</h2>
          </div>

          <div id="shortcode11">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-md-8 g-pr-50--md g-mb-30 g-mb-0--md">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div>

                <div class="col-md-4">
                  <img class="w-100 g-px-50" src="{{ root }}assets/img-temp/125x115/img1.png" alt="Image Description"
                       data-animation="bounceInDown"
                       data-animation-delay="0"
                       data-animation-duration="1000">
                </div>
              </div>
            </div>

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

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

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

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).on('ready', function () {
                  // initialization of scroll animation
                  $.HSCore.components.HSOnScrollAnimation.init('[data-animation]');
                });
              </script>
            </div>
          </div>

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

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

        <!-- Animation Fade In -->
        <section class="g-py-30">
          <div class="text-center g-mb-50">
            <h2 class="h4">Animation Fade In</h2>
          </div>

          <div id="shortcode12">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-md-4 g-pr-30--md g-mb-30 g-mb-0--md">
                  <img class="w-100 g-px-50" src="{{ root }}assets/img-temp/125x115/img1.png" alt="Image Description"
                       data-animation="fadeIn"
                       data-animation-delay="0"
                       data-animation-duration="1000">
                </div>

                <div class="col-md-8">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div>
              </div>
            </div>

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

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

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

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).on('ready', function () {
                  // initialization of scroll animation
                  $.HSCore.components.HSOnScrollAnimation.init('[data-animation]');
                });
              </script>
            </div>
          </div>

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

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

        <!-- Animation Fade In Left -->
        <section class="g-py-30">
          <div class="text-center g-mb-50">
            <h2 class="h4">Animation Fade In Left</h2>
          </div>

          <div id="shortcode13">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-md-8 g-pr-50--md g-mb-30 g-mb-0--md">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div>

                <div class="col-md-4">
                  <img class="w-100 g-px-50" src="{{ root }}assets/img-temp/125x115/img1.png" alt="Image Description"
                       data-animation="fadeInLeft"
                       data-animation-delay="0"
                       data-animation-duration="1000">
                </div>
              </div>
            </div>

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

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

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

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).on('ready', function () {
                  // initialization of scroll animation
                  $.HSCore.components.HSOnScrollAnimation.init('[data-animation]');
                });
              </script>
            </div>
          </div>

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

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

        <!-- Animation Fade In Right -->
        <section class="g-py-30">
          <div class="text-center g-mb-50">
            <h2 class="h4">Animation Fade In Right</h2>
          </div>

          <div id="shortcode14">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-md-4 g-pr-30--md g-mb-30 g-mb-0--md">
                  <img class="w-100 g-px-50" src="{{ root }}assets/img-temp/125x115/img1.png" alt="Image Description"
                       data-animation="fadeInRight"
                       data-animation-delay="0"
                       data-animation-duration="1000">
                </div>

                <div class="col-md-8">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div>
              </div>
            </div>

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

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

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

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).on('ready', function () {
                  // initialization of scroll animation
                  $.HSCore.components.HSOnScrollAnimation.init('[data-animation]');
                });
              </script>
            </div>
          </div>

          {% set contentTarget = "#shortcode14" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </section>
        <!-- End Animation Fade In Right -->

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

        <!-- Animation Fade In Down -->
        <section class="g-py-30">
          <div class="text-center g-mb-50">
            <h2 class="h4">Animation Fade In Down</h2>
          </div>

          <div id="shortcode15">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-md-8 g-pr-50--md g-mb-30 g-mb-0--md">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div>

                <div class="col-md-4">
                  <img class="w-100 g-px-50" src="{{ root }}assets/img-temp/125x115/img1.png" alt="Image Description"
                       data-animation="fadeInDown"
                       data-animation-delay="0"
                       data-animation-duration="1000">
                </div>
              </div>
            </div>

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

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

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

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).on('ready', function () {
                  // initialization of scroll animation
                  $.HSCore.components.HSOnScrollAnimation.init('[data-animation]');
                });
              </script>
            </div>
          </div>

          {% set contentTarget = "#shortcode15" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </section>
        <!-- End Animation Fade In Down -->

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

        <!-- Animation Fade In Up -->
        <section class="g-py-30">
          <div class="text-center g-mb-50">
            <h2 class="h4">Animation Fade In Up</h2>
          </div>

          <div id="shortcode16">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-md-4 g-pr-30--md g-mb-30 g-mb-0--md">
                  <img class="w-100 g-px-50" src="{{ root }}assets/img-temp/125x115/img1.png" alt="Image Description"
                       data-animation="fadeInUp"
                       data-animation-delay="0"
                       data-animation-duration="1000">
                </div>

                <div class="col-md-8">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div>
              </div>
            </div>

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

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

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

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).on('ready', function () {
                  // initialization of scroll animation
                  $.HSCore.components.HSOnScrollAnimation.init('[data-animation]');
                });
              </script>
            </div>
          </div>

          {% set contentTarget = "#shortcode16" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </section>
        <!-- End Animation Fade In Up -->

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

        <!-- Animation Flip In X -->
        <section class="g-py-30">
          <div class="text-center g-mb-50">
            <h2 class="h4">Animation Flip In X</h2>
          </div>

          <div id="shortcode17">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-md-8 g-pr-50--md g-mb-30 g-mb-0--md">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div>

                <div class="col-md-4">
                  <img class="w-100 g-px-50" src="{{ root }}assets/img-temp/125x115/img1.png" alt="Image Description"
                       data-animation="flipInX"
                       data-animation-delay="0"
                       data-animation-duration="1000">
                </div>
              </div>
            </div>

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

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

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

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).on('ready', function () {
                  // initialization of scroll animation
                  $.HSCore.components.HSOnScrollAnimation.init('[data-animation]');
                });
              </script>
            </div>
          </div>

          {% set contentTarget = "#shortcode17" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </section>
        <!-- End Animation Flip In X -->

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

        <!-- Animation Flip In Y -->
        <section class="g-py-30">
          <div class="text-center g-mb-50">
            <h2 class="h4">Animation Flip In Y</h2>
          </div>

          <div id="shortcode18">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-md-4 g-pr-30--md g-mb-30 g-mb-0--md">
                  <img class="w-100 g-px-50" src="{{ root }}assets/img-temp/125x115/img1.png" alt="Image Description"
                       data-animation="flipInY"
                       data-animation-delay="0"
                       data-animation-duration="1000">
                </div>

                <div class="col-md-8">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div>
              </div>
            </div>

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

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

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

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).on('ready', function () {
                  // initialization of scroll animation
                  $.HSCore.components.HSOnScrollAnimation.init('[data-animation]');
                });
              </script>
            </div>
          </div>

          {% set contentTarget = "#shortcode18" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </section>
        <!-- End Animation Flip In Y -->

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

        <!-- Animation Light Speed In -->
        <section class="g-py-30">
          <div class="text-center g-mb-50">
            <h2 class="h4">Animation Light Speed In</h2>
          </div>

          <div id="shortcode19">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-md-8 g-pr-50--md g-mb-30 g-mb-0--md">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div>

                <div class="col-md-4">
                  <img class="w-100 g-px-50" src="{{ root }}assets/img-temp/125x115/img1.png" alt="Image Description"
                       data-animation="lightSpeedIn"
                       data-animation-delay="0"
                       data-animation-duration="1000">
                </div>
              </div>
            </div>

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

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

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

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).on('ready', function () {
                  // initialization of scroll animation
                  $.HSCore.components.HSOnScrollAnimation.init('[data-animation]');
                });
              </script>
            </div>
          </div>

          {% set contentTarget = "#shortcode19" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </section>
        <!-- End Animation Light Speed In -->

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

        <!-- Animation Rotate In -->
        <section class="g-py-30">
          <div class="text-center g-mb-50">
            <h2 class="h4">Animation Rotate In</h2>
          </div>

          <div id="shortcode20">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-md-4 g-pr-30--md g-mb-30 g-mb-0--md">
                  <img class="w-100 g-px-50" src="{{ root }}assets/img-temp/125x115/img1.png" alt="Image Description"
                       data-animation="rotateIn"
                       data-animation-delay="0"
                       data-animation-duration="1000">
                </div>

                <div class="col-md-8">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div>
              </div>
            </div>

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

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

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

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).on('ready', function () {
                  // initialization of scroll animation
                  $.HSCore.components.HSOnScrollAnimation.init('[data-animation]');
                });
              </script>
            </div>
          </div>

          {% set contentTarget = "#shortcode20" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </section>
        <!-- End Animation Rotate In -->

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

        <!-- Animation Rotate Down Left -->
        <section class="g-py-30">
          <div class="text-center g-mb-50">
            <h2 class="h4">Animation Rotate Down Left</h2>
          </div>

          <div id="shortcode21">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-md-8 g-pr-50--md g-mb-30 g-mb-0--md">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div>

                <div class="col-md-4">
                  <img class="w-100 g-px-50" src="{{ root }}assets/img-temp/125x115/img1.png" alt="Image Description"
                       data-animation="rotateInDownLeft"
                       data-animation-delay="0"
                       data-animation-duration="1000">
                </div>
              </div>
            </div>

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

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

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

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).on('ready', function () {
                  // initialization of scroll animation
                  $.HSCore.components.HSOnScrollAnimation.init('[data-animation]');
                });
              </script>
            </div>
          </div>

          {% set contentTarget = "#shortcode21" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </section>
        <!-- End Animation Rotate Down Left -->

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

        <!-- Animation Rotate Down Right -->
        <section class="g-py-30">
          <div class="text-center g-mb-50">
            <h2 class="h4">Animation Rotate Down Right</h2>
          </div>

          <div id="shortcode22">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-md-4 g-pr-30--md g-mb-30 g-mb-0--md">
                  <img class="w-100 g-px-50" src="{{ root }}assets/img-temp/125x115/img1.png" alt="Image Description"
                       data-animation="rotateInDownRight"
                       data-animation-delay="0"
                       data-animation-duration="1000">
                </div>

                <div class="col-md-8">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div>
              </div>
            </div>

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

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

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

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).on('ready', function () {
                  // initialization of scroll animation
                  $.HSCore.components.HSOnScrollAnimation.init('[data-animation]');
                });
              </script>
            </div>
          </div>

          {% set contentTarget = "#shortcode22" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </section>
        <!-- End Animation Rotate Down Right -->

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

        <!-- Animation Rotate Up Left -->
        <section class="g-py-30">
          <div class="text-center g-mb-50">
            <h2 class="h4">Animation Rotate Up Left</h2>
          </div>

          <div id="shortcode23">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-md-8 g-pr-50--md g-mb-30 g-mb-0--md">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div>

                <div class="col-md-4">
                  <img class="w-100 g-px-50" src="{{ root }}assets/img-temp/125x115/img1.png" alt="Image Description"
                       data-animation="rotateInUpLeft"
                       data-animation-delay="0"
                       data-animation-duration="1000">
                </div>
              </div>
            </div>

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

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

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

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).on('ready', function () {
                  // initialization of scroll animation
                  $.HSCore.components.HSOnScrollAnimation.init('[data-animation]');
                });
              </script>
            </div>
          </div>

          {% set contentTarget = "#shortcode23" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </section>
        <!-- End Animation Rotate Up Left -->

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

        <!-- Animation Rotate Up Right -->
        <section class="g-py-30">
          <div class="text-center g-mb-50">
            <h2 class="h4">Animation Rotate Up Right</h2>
          </div>

          <div id="shortcode24">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-md-4 g-pr-30--md g-mb-30 g-mb-0--md">
                  <img class="w-100 g-px-50" src="{{ root }}assets/img-temp/125x115/img1.png" alt="Image Description"
                       data-animation="rotateInUpRight"
                       data-animation-delay="0"
                       data-animation-duration="1000">
                </div>

                <div class="col-md-8">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div>
              </div>
            </div>

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

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

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

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).on('ready', function () {
                  // initialization of scroll animation
                  $.HSCore.components.HSOnScrollAnimation.init('[data-animation]');
                });
              </script>
            </div>
          </div>

          {% set contentTarget = "#shortcode24" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </section>
        <!-- End Animation Rotate Up Right -->

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

        <!-- Animation Roll In -->
        <section class="g-py-30">
          <div class="text-center g-mb-50">
            <h2 class="h4">Animation Roll In</h2>
          </div>

          <div id="shortcode25">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-md-8 g-pr-50--md g-mb-30 g-mb-0--md">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div>

                <div class="col-md-4">
                  <img class="w-100 g-px-50" src="{{ root }}assets/img-temp/125x115/img1.png" alt="Image Description"
                       data-animation="rollIn"
                       data-animation-delay="0"
                       data-animation-duration="1000">
                </div>
              </div>
            </div>

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

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

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

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).on('ready', function () {
                  // initialization of scroll animation
                  $.HSCore.components.HSOnScrollAnimation.init('[data-animation]');
                });
              </script>
            </div>
          </div>

          {% set contentTarget = "#shortcode25" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </section>
        <!-- End Animation Roll In -->

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

        <!-- Animation Zoom In -->
        <section class="g-py-30">
          <div class="text-center g-mb-50">
            <h2 class="h4">Animation Zoom In</h2>
          </div>

          <div id="shortcode26">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-md-4 g-pr-30--md g-mb-30 g-mb-0--md">
                  <img class="w-100 g-px-50" src="{{ root }}assets/img-temp/125x115/img1.png" alt="Image Description"
                       data-animation="zoomIn"
                       data-animation-delay="0"
                       data-animation-duration="1000">
                </div>

                <div class="col-md-8">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div>
              </div>
            </div>

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

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

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

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).on('ready', function () {
                  // initialization of scroll animation
                  $.HSCore.components.HSOnScrollAnimation.init('[data-animation]');
                });
              </script>
            </div>
          </div>

          {% set contentTarget = "#shortcode26" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </section>
        <!-- End Animation Zoom In -->

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

        <!-- Animation Zoom In Left -->
        <section class="g-py-30">
          <div class="text-center g-mb-50">
            <h2 class="h4">Animation Zoom In Left</h2>
          </div>

          <div id="shortcode27">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-md-8 g-pr-50--md g-mb-30 g-mb-0--md">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div>

                <div class="col-md-4">
                  <img class="w-100 g-px-50" src="{{ root }}assets/img-temp/125x115/img1.png" alt="Image Description"
                       data-animation="zoomInLeft"
                       data-animation-delay="0"
                       data-animation-duration="1000">
                </div>
              </div>
            </div>

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

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

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

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).on('ready', function () {
                  // initialization of scroll animation
                  $.HSCore.components.HSOnScrollAnimation.init('[data-animation]');
                });
              </script>
            </div>
          </div>

          {% set contentTarget = "#shortcode27" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </section>
        <!-- End Animation Zoom In Left -->

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

        <!-- Animation Zoom In Right -->
        <section class="g-py-30">
          <div class="text-center g-mb-50">
            <h2 class="h4">Animation Zoom In Right</h2>
          </div>

          <div id="shortcode28">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-md-4 g-pr-30--md g-mb-30 g-mb-0--md">
                  <img class="w-100 g-px-50" src="{{ root }}assets/img-temp/125x115/img1.png" alt="Image Description"
                       data-animation="zoomInRight"
                       data-animation-delay="0"
                       data-animation-duration="1000">
                </div>

                <div class="col-md-8">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div>
              </div>
            </div>

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

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

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

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).on('ready', function () {
                  // initialization of scroll animation
                  $.HSCore.components.HSOnScrollAnimation.init('[data-animation]');
                });
              </script>
            </div>
          </div>

          {% set contentTarget = "#shortcode28" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </section>
        <!-- End Animation Zoom In Right -->

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

        <!-- Animation Zoom In Down -->
        <section class="g-py-30">
          <div class="text-center g-mb-50">
            <h2 class="h4">Animation Zoom In Down</h2>
          </div>

          <div id="shortcode29">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-md-8 g-pr-50--md g-mb-30 g-mb-0--md">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                  <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </div>

                <div class="col-md-4">
                  <img class="w-100 g-px-50" src="{{ root }}assets/img-temp/125x115/img1.png" alt="Image Description"
                       data-animation="zoomInDown"
                       data-animation-delay="0"
                       data-animation-duration="1000">
                </div>
              </div>
            </div>

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

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

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

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).on('ready', function () {
                  // initialization of scroll animation
                  $.HSCore.components.HSOnScrollAnimation.init('[data-animation]');
                });
              </script>
            </div>
          </div>

          {% set contentTarget = "#shortcode29" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </section>
        <!-- End Animation Zoom In Down -->
      </div>
    </section>
    <!-- End Animations -->

    {% 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" %}

  {% 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.onscroll-animation.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 scroll animation
      $.HSCore.components.HSOnScrollAnimation.init('[data-animation]');
    });

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