{# Settings #}
{% set root = "../../" %}
{% set mainNavActive_1 = "shortcodes" %}
{% set sidebarNavActive_1 = "shortcode-blocks-testimonials-advanced" %}
{% set title = "Testimonials - Advanced | " %}

{% 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" %}
<link rel="stylesheet" href="{{ root }}assets/vendor/bootstrap/offcanvas.css">
{% 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/slick-carousel/slick/slick.css">

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

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

<body>
  <main>
    {% include "html/assets/include/nunjucks/partials/blocks/headers/header-main-fullwidth.njk" %}

    <section class="container-fluid">
      <div class="row row-offcanvas row-offcanvas-left">
        <div class="col-auto sidebar-offcanvas u-sidebar-navigation g-bg-secondary g-px-0 g-py-20">
          {% include "html/assets/include/nunjucks/partials/blocks/sidebars/sidebar-local-search.njk" %}
        </div>

        <div class="col g-py-30 g-pa-30--md">
          <div class="g-hidden-md-up">
            <button type="button" class="btn btn-primary btn-sm"
                    data-toggle="offcanvas">Toggle shocrtcode nav
            </button>
          </div>

          <h1 class="g-font-weight-300 g-letter-spacing-1 g-pt-30 g-mb-35">Testimonials Advanced</h1>

          <!-- Testimonials v1 -->
          <section class="g-pb-50">
            <div class="text-center g-mb-50">
              <h2 class="h4 g-mb-0">Testimonials
                <span class="g-color-primary g-ml-5">#01</span>
              </h2>
            </div>

            <div id="shortcode1">
              <div class="shortcode-html">
                <div class="dzsparallaxer auto-init height-is-based-on-content use-loading g-bg-cover g-bg-black-opacity-0_7--after">
                  <div class="divimage dzsparallaxer--target w-100" style="height: 140%; background-image: url({{ root }}assets/img-temp/1920x800/img8.jpg);"></div>

                  <div class="container g-bg-cover__inner g-py-120">
                    <div class="js-carousel g-pb-80"
                         data-infinite="true"
                         data-arrows-classes="u-arrow-v1 g-width-40 g-height-40 g-brd-1 g-brd-style-solid g-brd-white-opacity-0_6 g-brd-primary--hover g-color-white-opacity-0_5 g-bg-primary--hover g-color-white--hover g-absolute-centered--x g-bottom-0"
                         data-arrow-left-classes="fa fa-angle-left g-ml-minus-25"
                         data-arrow-right-classes="fa fa-angle-right g-ml-25">
                      <div class="js-slide">
                        <!-- Testimonials Advanced -->
                        <div class="text-center g-px-100--lg">
                          <i class="d-block g-color-primary g-font-size-60 g-line-height-0_7 g-pos-rel g-top-20">&#8220;</i>
                          <blockquote class="g-color-white g-font-size-25 g-py-40">Dear Htmlstream team, I just bought the Unify template some weeks ago. The template is really nice and offers quite a large set of options.</blockquote>
                          <h4 class="h6 g-color-white-opacity-0_7 text-uppercase g-mb-0">
                            Bastian, <em class="g-font-style-normal g-color-primary">Client</em>
                          </h4>
                        </div>
                        <!-- End Testimonials Advanced -->
                      </div>

                      <div class="js-slide">
                        <!-- Testimonials Advanced -->
                        <div class="text-center g-px-100--lg">
                          <i class="d-block g-color-primary g-font-size-60 g-line-height-0_7 g-pos-rel g-top-20">&#8220;</i>
                          <blockquote class="g-color-white g-font-size-25 g-py-40">Dear Htmlstream team, I just bought the Unify template some weeks ago. The template is really nice and offers quite a large set of options.</blockquote>
                          <h4 class="h6 g-color-white-opacity-0_7 text-uppercase g-mb-0">
                            Bastian, <em class="g-font-style-normal g-color-primary">Client</em>
                          </h4>
                        </div>
                        <!-- End Testimonials Advanced -->
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="shortcode-styles">
                <!-- CSS Implementing Plugins -->
                <link type="text/plain" rel="stylesheet" href="{{ root }}assets/vendor/dzsparallaxer/dzsparallaxer.css">
                <link type="text/plain" rel="stylesheet" href="{{ root }}assets/vendor/dzsparallaxer/dzsscroller/scroller.css">
                <link type="text/plain" rel="stylesheet" href="{{ root }}assets/vendor/dzsparallaxer/advancedscroller/plugin.css">
                <link type="text/plain" rel="stylesheet" href="{{ root }}assets/vendor/slick-carousel/slick/slick.css">
              </div>

              <div class="shortcode-scripts">
                <!-- JS Implementing Plugins -->
                <script type="text/plain" src="{{ root }}assets/vendor/dzsparallaxer/dzsparallaxer.js"></script>
                <script type="text/plain" src="{{ root }}assets/vendor/dzsparallaxer/dzsscroller/scroller.js"></script>
                <script type="text/plain" src="{{ root }}assets/vendor/dzsparallaxer/advancedscroller/plugin.js"></script>
                <script type="text/plain" src="{{ root }}assets/vendor/slick-carousel/slick/slick.js"></script>

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

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

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

          <!-- Testimonials Advanced v2 -->
          <section class="g-bg-secondary g-py-100">
            <div class="container">
              <div class="text-center g-mb-50">
                <h2 class="h4 g-mb-0">Testimonials
                  <span class="g-color-primary g-ml-5">#02</span>
                </h2>
              </div>

              <div id="shortcode2">
                <div class="shortcode-html">
                  <div class="js-carousel g-pb-70"
                       data-infinite="true"
                       data-arrows-classes="u-arrow-v1 g-width-40 g-height-40 g-color-gray-dark-v5 g-bg-white g-color-white--hover g-bg-primary--hover rounded g-absolute-centered--x g-bottom-0"
                       data-arrow-left-classes="fa fa-angle-left g-ml-minus-25"
                       data-arrow-right-classes="fa fa-angle-right g-ml-25">
                    <div class="js-slide">
                      <!-- Testimonials Advanced -->
                      <div class="row justify-content-center">
                        <div class="col-lg-8">
                          <div class="text-center">
                            <img class="d-inline-block g-width-120 g-height-120 g-brd-around g-brd-5 g-brd-white rounded-circle" src="{{ root }}assets/img-temp/125x125/img4.jpg" alt="Image Description">

                            <div class="g-py-25">
                              <h4 class="h5 g-color-black text-uppercase g-mb-0">Mary Brown</h4>
                              <em class="g-color-primary">Designer</em>
                            </div>

                            <blockquote class="lead g-line-height-1_8 g-mb-25">" Thanks a lot. You have no idea how much I appreciate all your help. You are not just a great designer but an amazing human being, because so many people won't give a rat ass about what happen to their clients AFTER THE SALE, and you are not. Again, thanks a lot. "</blockquote>

                            <div class="js-rating align-self-center g-color-yellow" data-rating="5" data-spacing="5" data-backward-icons-classes="fa fa-star"></div>
                          </div>
                        </div>
                      </div>
                      <!-- End Testimonials Advanced -->
                    </div>

                    <div class="js-slide">
                      <!-- Testimonials Advanced -->
                      <div class="row justify-content-center">
                        <div class="col-lg-8">
                          <div class="text-center">
                            <img class="d-inline-block g-width-120 g-height-120 g-brd-around g-brd-5 g-brd-white rounded-circle" src="{{ root }}assets/img-temp/125x125/img5.jpg" alt="Image Description">

                            <div class="g-py-25">
                              <h4 class="h5 g-color-black text-uppercase g-mb-0">Alex Moura</h4>
                              <em class="g-color-primary">Developer</em>
                            </div>

                            <blockquote class="lead g-line-height-1_8 g-mb-25">" Your customer support is the best I have experienced with any theme I have purchased. You have a theme that far exceeds all others. Thanks for providing such a fantastic theme, all your efforts are greatly appreciated on our end. "</blockquote>

                            <div class="js-rating align-self-center g-color-yellow" data-rating="5" data-spacing="5" data-backward-icons-classes="fa fa-star"></div>
                          </div>
                        </div>
                      </div>
                      <!-- End Testimonials Advanced -->
                    </div>
                  </div>
                </div>

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

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

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

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

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

          <!-- Testimonials Advanced v3 -->
          <section class="container g-py-100">
            <div class="text-center g-mb-50">
              <h2 class="h4 g-mb-0">Testimonials
                <span class="g-color-primary g-ml-5">#03</span>
              </h2>
            </div>

            <div id="shortcode3">
              <div class="shortcode-html">
                <div id="carousel5" class="js-carousel js-carousel_single-item-thumbs5__thumbs text-center mx-auto g-max-width-645 g-mb-35"
                     data-infinite="true"
                     data-slides-show="5"
                     data-center-mode="true"
                     data-nav-for="#carousel6">
                  <div class="js-thumb g-px-15--sm">
                    <img class="rounded-circle" src="{{ root }}assets/img-temp/100x100/img6.jpg" alt="Image Description">
                  </div>

                  <div class="js-thumb g-px-15--sm">
                    <img class="rounded-circle" src="{{ root }}assets/img-temp/100x100/img7.jpg" alt="Image Description">
                  </div>

                  <div class="js-thumb g-px-15--sm">
                    <img class="rounded-circle" src="{{ root }}assets/img-temp/100x100/img5.jpg" alt="Image Description">
                  </div>

                  <div class="js-thumb g-px-15--sm">
                    <img class="rounded-circle" src="{{ root }}assets/img-temp/100x100/img4.jpg" alt="Image Description">
                  </div>

                  <div class="js-thumb g-px-15--sm">
                    <img class="rounded-circle" src="{{ root }}assets/img-temp/100x100/img16.jpg" alt="Image Description">
                  </div>

                  <div class="js-thumb g-px-15--sm">
                    <img class="rounded-circle" src="{{ root }}assets/img-temp/100x100/img12.jpg" alt="Image Description">
                  </div>
                </div>

                <div id="carousel6" class="js-carousel js-carousel_single-item-thumbs5__slides text-center mx-auto g-max-width-645 g-pb-50"
                     data-infinite="true"
                     data-fade="true"
                     data-animation="linear"
                     data-pagi-classes="u-carousel-indicators-v1 g-absolute-centered--x g-bottom-0"
                     data-nav-for="#carousel5">
                  <div class="js-slide">
                    <h4 class="h4 text-uppercase g-font-weight-600er g-mb-15">
                      Mary Brown, <em class="g-font-style-normal g-color-primary">CTO Jiope</em>
                    </h4>
                    <blockquote class="lead g-mb-0">Your customer support is the best I have experienced with any theme I have purchased. You have a theme that far exceeds all others. Thanks for providing such a fantastic theme, all your efforts are greatly appreciated on our end.</blockquote>
                  </div>

                  <div class="js-slide">
                    <h4 class="h4 text-uppercase g-font-weight-600er g-mb-15">
                      Bob Cristopher, <em class="g-font-style-normal g-color-primary">CEO Unifex</em>
                    </h4>
                    <blockquote class="lead g-mb-0">Thanks a lot. You have no idea how much I appreciate all your help. You are not just a great designer but an amazing human being, because so many people won't give a rat ass about what happen to their clients AFTER THE SALE, and you are not. Again, thanks a lot.</blockquote>
                  </div>

                  <div class="js-slide">
                    <h4 class="h4 text-uppercase g-font-weight-600er g-mb-15">
                      Helena Jordany, <em class="g-font-style-normal g-color-primary">SMM AquaWater</em>
                    </h4>
                    <blockquote class="lead g-mb-0">Dear Htmlstream team, I just bought the Unify template some weeks ago. The template is really nice and offers quite a large set of options.</blockquote>
                  </div>

                  <div class="js-slide">
                    <h4 class="h4 text-uppercase g-font-weight-600er g-mb-15">
                      Rebecca Kenton, <em class="g-font-style-normal g-color-primary">Molestie ullamcorper</em>
                    </h4>
                    <blockquote class="lead g-mb-0">Thanks for this great update!!! However it's somewhat always a bit frustrating when I spent a lot of time trying to add features that were missing by myself and seeing updates including it in a way which is 300% nicer. Great job guys! Keep up with the good work!</blockquote>
                  </div>

                  <div class="js-slide">
                    <h4 class="h4 text-uppercase g-font-weight-600er g-mb-15">
                      Melani Shnaider, <em class="g-font-style-normal g-color-primary">Account manager Undex</em>
                    </h4>
                    <blockquote class="lead g-mb-0">Your customer support is the best I have experienced with any theme I have purchased. You have a theme that far exceeds all others. Thanks for providing such a fantastic theme, all your efforts are greatly appreciated on our end.</blockquote>
                  </div>

                  <div class="js-slide">
                    <h4 class="h4 text-uppercase g-font-weight-600er g-mb-15">
                      John Armstrong, <em class="g-font-style-normal g-color-primary">Manager Moogle</em>
                    </h4>
                    <blockquote class="lead g-mb-0">Thanks a lot. You have no idea how much I appreciate all your help. You are not just a great designer but an amazing human being, because so many people won't give a rat ass about what happen to their clients AFTER THE SALE, and you are not. Again, thanks a lot.</blockquote>
                  </div>
                </div>
              </div>

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

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

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

                <!-- JS Plugins Init. -->
                <script type="text/plain">
                  $(document).ready(function () {
                    // custom functions
                    $('#carousel5').on('click', '.js-thumb', function (e) {
                      e.stopPropagation();

                      var i = $(this).data('slick-index');

                      if ($('#carousel5').slick('slickCurrentSlide') !== i) {
                        $('#carousel5').slick('slickGoTo', i);
                      }
                    });

                    // initialization of carousel
                    $.HSCore.components.HSCarousel.init('.js-carousel');

                    $('#carousel5').slick('setOption', 'responsive', [{
                      breakpoint: 768,
                      settings: {
                        slidesToShow: 3
                      }
                    }, {
                      breakpoint: 576,
                      settings: {
                        slidesToShow: 1
                      }
                    }], true);
                  });
                </script>
              </div>
            </div>

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

          <!-- Testimonials Advanced v4 -->
          <div class="g-bg-secondary g-py-100">
            <div class="container">
              <div class="text-center g-mb-50">
                <h2 class="h4 g-mb-0">Testimonials
                  <span class="g-color-primary g-ml-5">#04</span>
                </h2>
              </div>

              <div id="shortcode4">
                <div class="shortcode-html">
                  <!-- Testimonials Advanced -->
                  <div class="row justify-content-center">
                    <div class="col-lg-8">
                      <div class="js-carousel"
                           data-infinite="true"
                           data-arrows-classes="hidden-down u-arrow-v1 g-width-40 g-height-40 g-color-gray-dark-v5 g-bg-white g-color-white--hover g-bg-primary--hover rounded g-pos-abs g-right-0 g-top-0 g-mt-15"
                           data-arrow-left-classes="fa fa-angle-left g-mr-50"
                           data-arrow-right-classes="fa fa-angle-right">
                        <div class="js-slide">
                          <!-- Testimonial Advanced -->
                          <div class="media g-mb-25">
                            <img class="d-flex align-self-center g-brd-around g-brd-4 g-brd-white rounded-circle mr-4" src="{{ root }}assets/img-temp/100x100/img5.jpg" alt="Image Description">

                            <div class="media-body align-self-center">
                              <h4 class="h5 g-font-weight-700 text-uppercase g-mb-3">Alisa Brown</h4>
                              <em class="d-block g-color-gray-dark-v5 g-font-style-normal g-font-size-13">Gray Consultion Corp.</em>

                              <div class="js-rating align-self-center g-color-yellow" data-rating="5" data-spacing="3" data-backward-icons-classes="fa fa-star"></div>
                            </div>
                          </div>
                          <blockquote class="lead g-mb-0">Thanks for this great update!!! However it's somewhat always a bit frustrating when I spent a lot of time trying to add features that were missing by myself and seeing updates including it in a way which is 300% nicer. Great job guys! Keep up with the good work!</blockquote>
                          <!-- End Testimonial Advanced -->
                        </div>

                        <div class="js-slide">
                          <!-- Testimonial Advanced -->
                          <div class="media g-mb-25">
                            <img class="d-flex align-self-center g-brd-around g-brd-4 g-brd-white rounded-circle mr-4" src="{{ root }}assets/img-temp/100x100/img7.jpg" alt="Image Description">

                            <div class="media-body align-self-center">
                              <h4 class="h5 g-font-weight-700 text-uppercase g-mb-3">Joe Armstrong</h4>
                              <em class="d-block g-color-gray-dark-v5 g-font-style-normal g-font-size-13">Blue Yellow Sky Corp.</em>

                              <div class="js-rating align-self-center g-color-yellow" data-rating="5" data-spacing="3" data-backward-icons-classes="fa fa-star"></div>
                            </div>
                          </div>

                          <blockquote class="lead g-mb-0">Your customer support is the best I have experienced with any theme I have purchased. You have a theme that far exceeds all others. Thanks for providing such a fantastic theme, all your efforts are greatly appreciated on our end.</blockquote>
                          <!-- End Testimonial Advanced -->
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- End Testimonials Advanced -->
                </div>

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

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

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

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

              {% set contentTarget = "#shortcode4" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Testimonials Advanced v4 -->

          <!-- Testimonials Advanced v5 -->
          <section class="g-py-100">
            <div class="container">
              <div class="text-center g-mb-50">
                <h2 class="h4 g-mb-0">Testimonials
                  <span class="g-color-primary g-ml-5">#05</span>
                </h2>
              </div>

              <div id="shortcode5">
                <div class="shortcode-html">
                  <!-- Testimonials Advanced -->
                  <div class="js-carousel"
                       data-infinite="true"
                       data-arrows-classes="u-arrow-v1 g-width-40 g-height-40 g-brd-1 g-brd-style-solid g-brd-gray-light-v1 g-brd-primary--hover g-color-gray-dark-v5 g-bg-primary--hover g-color-white--hover g-absolute-centered--y rounded-circle g-mt-minus-25"
                       data-arrow-left-classes="fa fa-angle-left g-left-0"
                       data-arrow-right-classes="fa fa-angle-right g-right-0">
                    <div class="js-slide">
                      <div class="row justify-content-center">
                        <div class="col-lg-7">
                          <!-- Testimonial Advanced -->
                          <div class="g-pos-rel g-pt-40">
                            <em class="g-color-gray-light-v5 g-font-size-120 g-pos-abs g-top-minus-15 g-left-minus-15 g-z-index-minus-1"> &#8220; </em>
                            <blockquote class="lead g-font-style-italic g-line-height-2 g-pl-30 g-mb-30">Dear Htmlstream team, I just bought the Unify template some weeks ago. The template is really nice and offers quite a large set of options.</blockquote>

                            <div class="media">
                              <img class="d-flex align-self-center g-width-50 g-height-50 rounded-circle mr-3" src="{{ root }}assets/img-temp/100x100/img7.jpg" alt="Image Description">

                              <div class="media-body align-self-center">
                                <h4 class="h5 g-font-weight-700 g-mb-0">Daniel Ramirez</h4>
                                <span class="d-block g-color-gray-dark-v4">Designer</span>
                              </div>
                            </div>
                          </div>
                          <!-- End Testimonial Advanced -->
                        </div>
                      </div>
                    </div>

                    <div class="js-slide">
                      <div class="row justify-content-center">
                        <div class="col-lg-7">
                          <!-- Testimonial Advanced -->
                          <div class="g-pos-rel g-pt-40">
                            <em class="g-color-gray-light-v5 g-font-size-120 g-pos-abs g-top-minus-15 g-left-minus-15 g-z-index-minus-1"> &#8220; </em>
                            <blockquote class="lead g-font-style-italic g-line-height-2 g-pl-30 g-mb-30">Hi there purchased a couple of days ago and the site looks great, big thanks to the htmlstream guys, they gave me some great help with some fiddly setup issues.</blockquote>

                            <div class="media">
                              <img class="d-flex align-self-center g-width-50 g-height-50 rounded-circle mr-3" src="{{ root }}assets/img-temp/100x100/img5.jpg" alt="Image Description">

                              <div class="media-body align-self-center">
                                <h4 class="h5 g-font-weight-700 g-mb-0">Sara Anderson</h4>
                                <span class="d-block g-color-gray-dark-v4">Designer</span>
                              </div>
                            </div>
                          </div>
                          <!-- End Testimonial Advanced -->
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- End Testimonials Advanced -->
                </div>

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

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

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

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

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

          <!-- Testimonials Advanced v6 -->
          <section class="g-bg-secondary g-py-100">
            <div class="container">
              <div class="text-center g-mb-50">
                <h2 class="h4 g-mb-0">Testimonials
                  <span class="g-color-primary g-ml-5">#06</span>
                </h2>
              </div>

              <div id="shortcode6">
                <div class="shortcode-html">
                  <!-- Testimonials Advanced -->
                  <div id="carousel7" class="js-carousel g-pb-60"
                       data-slides-show="3"
                       data-slides-scroll="3"
                       data-arrows-classes="u-arrow-v1 g-width-45 g-height-45 g-font-size-default g-color-gray-dark-v5 g-bg-white g-color-white--hover g-bg-primary--hover rounded g-pos-abs g-bottom-0"
                       data-arrow-left-classes="fa fa-angle-left g-left-35x--lg g-left-15"
                       data-arrow-right-classes="fa fa-angle-right g-right-35x--lg g-right-15"
                       data-pagi-classes="u-carousel-indicators-v1 g-absolute-centered--x g-bottom-20 text-center">
                    <div class="js-slide g-px-15 g-mb-5">
                      <!-- Testimonials Advanced -->
                      <div class="u-shadow-v19 g-bg-white text-center rounded g-pb-40 g-px-30 g-mt-50">
                        <img class="d-inline-block g-brd-7 g-brd-style-solid g-brd-white g-width-100 g-height-100 rounded-circle g-pull-50x-up" src="{{ root }}assets/img-temp/100x100/img6.jpg" alt="Image Description">

                        <div class="g-mt-minus-20">
                          <h4 class="h6 g-color-primary g-font-weight-600 text-uppercase g-mb-5">Carla Harris</h4>
                          <em class="d-block g-color-gray-dark-v4 g-font-style-normal g-font-size-13 g-mb-20">Happy customer</em>
                          <i class="d-block g-color-primary g-font-size-50 g-line-height-0_7 g-pos-rel g-top-15 g-mb-20">&#8220;</i>
                          <blockquote class="g-color-black g-font-style-italic g-font-size-20 g-line-height-1_4">Great theme maker. I wish they would create more themes.</blockquote>
                        </div>
                      </div>
                      <!-- End Testimonials Advanced -->
                    </div>

                    <div class="js-slide g-px-15 g-mb-5">
                      <!-- Testimonials Advanced -->
                      <div class="u-shadow-v19 g-bg-white text-center rounded g-pb-40 g-px-30 g-mt-50">
                        <img class="d-inline-block g-brd-7 g-brd-style-solid g-brd-white g-width-100 g-height-100 rounded-circle g-pull-50x-up" src="{{ root }}assets/img-temp/100x100/img7.jpg" alt="Image Description">

                        <div class="g-mt-minus-20">
                          <h4 class="h6 g-color-primary g-font-weight-600 text-uppercase g-mb-5">Simone Gomez</h4>
                          <em class="d-block g-color-gray-dark-v4 g-font-style-normal g-font-size-13 g-mb-20">Happy customer</em>
                          <i class="d-block g-color-primary g-font-size-50 g-line-height-0_7 g-pos-rel g-top-15 g-mb-20">&#8220;</i>
                          <blockquote class="g-color-black g-font-style-italic g-font-size-20 g-line-height-1_4">I'm very impressed with the theme and customer support! Thanks</blockquote>
                        </div>
                      </div>
                      <!-- End Testimonials Advanced -->
                    </div>

                    <div class="js-slide g-px-15 g-mb-5">
                      <!-- Testimonials Advanced -->
                      <div class="u-shadow-v19 g-bg-white text-center rounded g-pb-40 g-px-30 g-mt-50">
                        <img class="d-inline-block g-brd-7 g-brd-style-solid g-brd-white g-width-100 g-height-100 rounded-circle g-pull-50x-up" src="{{ root }}assets/img-temp/100x100/img5.jpg" alt="Image Description">

                        <div class="g-mt-minus-20">
                          <h4 class="h6 g-color-primary g-font-weight-600 text-uppercase g-mb-5">Dianna Kimwealth</h4>
                          <em class="d-block g-color-gray-dark-v4 g-font-style-normal g-font-size-13 g-mb-20">Happy customer</em>
                          <i class="d-block g-color-primary g-font-size-50 g-line-height-0_7 g-pos-rel g-top-15 g-mb-20">&#8220;</i>
                          <blockquote class="g-color-black g-font-style-italic g-font-size-20 g-line-height-1_4">Unify - The best template i have ever found in the last 10 years! Great!</blockquote>
                        </div>
                      </div>
                      <!-- End Testimonials Advanced -->
                    </div>

                    <div class="js-slide g-px-15 g-mb-5">
                      <!-- Testimonials Advanced -->
                      <div class="u-shadow-v19 g-bg-white text-center rounded g-pb-40 g-px-30 g-mt-50">
                        <img class="d-inline-block g-brd-7 g-brd-style-solid g-brd-white g-width-100 g-height-100 rounded-circle g-pull-50x-up" src="{{ root }}assets/img-temp/100x100/img4.jpg" alt="Image Description">

                        <div class="g-mt-minus-20">
                          <h4 class="h6 g-color-primary g-font-weight-600 text-uppercase g-mb-5">Carla Harris</h4>
                          <em class="d-block g-color-gray-dark-v4 g-font-style-normal g-font-size-13 g-mb-20">Happy customer</em>
                          <i class="d-block g-color-primary g-font-size-50 g-line-height-0_7 g-pos-rel g-top-15 g-mb-20">&#8220;</i>
                          <blockquote class="g-color-black g-font-style-italic g-font-size-20 g-line-height-1_4">Great theme maker. I wish they would create more themes.</blockquote>
                        </div>
                      </div>
                      <!-- End Testimonials Advanced -->
                    </div>
                  </div>
                  <!-- End Testimonials Advanced -->
                </div>

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

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

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

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

                      $('#carousel7').slick('setOption', 'responsive', [{
                        breakpoint: 992,
                        settings: {
                          slidesToShow: 2
                        }
                      }, {
                        breakpoint: 576,
                        settings: {
                          slidesToShow: 1
                        }
                      }], true);
                    });
                  </script>
                </div>
              </div>

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

          <!-- Testimonials Advanced v7 -->
          <section class="container g-py-100">
            <div class="text-center g-mb-50">
              <h2 class="h4 g-mb-0">Testimonials
                <span class="g-color-primary g-ml-5">#07</span>
              </h2>
            </div>

            <div id="shortcode7">
              <div class="shortcode-html">
                <div id="carousel3" class="js-carousel js-carousel_single-item-thumbs5--v2__thumbs u-carousel-v1 g-max-width-645 mx-auto g-mb-50"
                     data-infinite="true"
                     data-center-mode="true"
                     data-variable-width="true"
                     data-slides-show="5"
                     data-arrows-classes="u-arrow-v1 g-absolute-centered g-width-35 g-height-40 g-font-size-26 g-color-gray g-bg-white"
                     data-arrow-left-classes="fa fa-angle-left g-ml-minus-82"
                     data-arrow-right-classes="fa fa-angle-right g-ml-82"
                     data-nav-for="#carousel4">
                  <div class="js-thumb">
                    <img class="g-width-130 g-height-130" src="{{ root }}assets/img-temp/125x125/img7.jpg" alt="Image Description">
                  </div>

                  <div class="js-thumb">
                    <img class="g-width-130 g-height-130" src="{{ root }}assets/img-temp/125x125/img2.jpg" alt="Image Description">
                  </div>

                  <div class="js-thumb">
                    <img class="g-width-130 g-height-130" src="{{ root }}assets/img-temp/125x125/img3.jpg" alt="Image Description">
                  </div>

                  <div class="js-thumb">
                    <img class="g-width-130 g-height-130" src="{{ root }}assets/img-temp/125x125/img9.jpg" alt="Image Description">
                  </div>

                  <div class="js-thumb">
                    <img class="g-width-130 g-height-130" src="{{ root }}assets/img-temp/125x125/img8.jpg" alt="Image Description">
                  </div>

                  <div class="js-thumb">
                    <img class="g-width-130 g-height-130" src="{{ root }}assets/img-temp/125x125/img7.jpg" alt="Image Description">
                  </div>

                  <div class="js-thumb">
                    <img class="g-width-130 g-height-130" src="{{ root }}assets/img-temp/125x125/img2.jpg" alt="Image Description">
                  </div>

                  <div class="js-thumb">
                    <img class="g-width-130 g-height-130" src="{{ root }}assets/img-temp/125x125/img3.jpg" alt="Image Description">
                  </div>

                  <div class="js-thumb">
                    <img class="g-width-130 g-height-130" src="{{ root }}assets/img-temp/125x125/img9.jpg" alt="Image Description">
                  </div>

                  <div class="js-thumb">
                    <img class="g-width-130 g-height-130" src="{{ root }}assets/img-temp/125x125/img8.jpg" alt="Image Description">
                  </div>
                </div>

                <div class="row">
                  <div id="carousel4" class="js-carousel js-carousel_single-item-thumbs5--v2__slides g-max-width-645 text-center mx-auto"
                       data-infinite="true"
                       data-fade="true"
                       data-animation="linear"
                       data-nav-for="#carousel3">
                    <div class="js-slide">
                      <h4 class="text-uppercase g-font-weight-600 g-font-size-16 g-mb-0">Julia B. Mcraflane</h4>
                      <em class="d-block g-font-size-12 text-uppercase g-mb-20">Spencet Group</em>
                      <blockquote class="lead g-font-style-italic">Thanks for this great update!!! However it's somewhat always a bit frustrating when I spent a lot of time trying to add features that were missing by myself and seeing updates including it in a way which is 300% nicer. Great job guys! Keep up with the good work!</blockquote>
                    </div>

                    <div class="js-slide">
                      <h4 class="text-uppercase g-font-weight-600 g-font-size-16 g-mb-0">Amy Clayton</h4>
                      <em class="d-block g-font-size-12 text-uppercase g-mb-20">Abibas</em>
                      <blockquote class="lead g-font-style-italic">Your customer support is the best I have experienced with any theme I have purchased. You have a theme that far exceeds all others. Thanks for providing such a fantastic theme, all your efforts are greatly appreciated on our end.</blockquote>
                    </div>

                    <div class="js-slide">
                      <h4 class="text-uppercase g-font-weight-600 g-font-size-16 g-mb-0">Fred Penner</h4>
                      <em class="d-block g-font-size-12 text-uppercase g-mb-20">Ruma</em>
                      <blockquote class="lead g-font-style-italic">Dear Htmlstream team, I just bought the Unify template some weeks ago. The template is really nice and offers quite a large set of options.</blockquote>
                    </div>

                    <div class="js-slide">
                      <h4 class="text-uppercase g-font-weight-600 g-font-size-16 g-mb-0">Martina Saiz</h4>
                      <em class="d-block g-font-size-12 text-uppercase g-mb-20">Jonda</em>
                      <blockquote class="lead g-font-style-italic">Thanks for this great update!!! However it's somewhat always a bit frustrating when I spent a lot of time trying to add features that were missing by myself and seeing updates including it in a way which is 300% nicer. Great job guys! Keep up with the good work!</blockquote>
                    </div>

                    <div class="js-slide">
                      <h4 class="text-uppercase g-font-weight-600 g-font-size-16 g-mb-0">Joseph B. Seward</h4>
                      <em class="d-block g-font-size-12 text-uppercase g-mb-20">Aodi</em>
                      <blockquote class="lead g-font-style-italic">Great theme maker. I wish they would create more themes.</blockquote>
                    </div>

                    <div class="js-slide">
                      <h4 class="text-uppercase g-font-weight-600 g-font-size-16 g-mb-0">Julia B. Mcraflane</h4>
                      <em class="d-block g-font-size-12 text-uppercase g-mb-20">Spencet Group</em>
                      <blockquote class="lead g-font-style-italic">I'm very impressed with the theme and customer support! Thanks</blockquote>
                    </div>

                    <div class="js-slide">
                      <h4 class="text-uppercase g-font-weight-600 g-font-size-16 g-mb-0">Amy Clayton</h4>
                      <em class="d-block g-font-size-12 text-uppercase g-mb-20">Abibas</em>
                      <blockquote class="lead g-font-style-italic">Unify - The best template i have ever found in the last 10 years! Great!</blockquote>
                    </div>
                  </div>
                </div>
              </div>

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

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

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

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

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

          <!-- Testimonials v8 -->
          <section class="g-py-50">
            <div class="text-center g-mb-50">
              <h2 class="h4 g-mb-0">Testimonials
                <span class="g-color-primary g-ml-5">#08</span>
              </h2>
            </div>

            <div id="shortcode8">
              <div class="shortcode-html">
                <div class="g-bg-cover g-bg-size-cover g-bg-pos-center g-bg-black-opacity-0_7--after" style="background-image: url({{ root }}assets/img-temp/1200x900/img1.jpg);">
                  <div class="container g-bg-cover__inner g-py-120">
                    <div class="js-carousel g-pb-80"
                         data-infinite="true"
                         data-arrows-classes="u-arrow-v1 g-width-40 g-height-40 g-brd-1 g-brd-style-solid g-brd-white-opacity-0_6 g-brd-primary--hover g-color-white-opacity-0_5 g-bg-primary--hover g-color-white--hover g-absolute-centered--x g-bottom-0 rounded-circle"
                         data-arrow-left-classes="fa fa-angle-left g-ml-minus-25"
                         data-arrow-right-classes="fa fa-angle-right g-ml-25">
                      <div class="js-slide">
                        <!-- Testimonials Advanced -->
                        <div class="row justify-content-center">
                          <div class="col-lg-8">
                            <div class="d-flex justify-content-between">
                              <img class="align-self-center g-brd-around g-brd-4 g-brd-primary g-width-100 g-height-100 rounded-circle mr-5" src="{{ root }}assets/img-temp/125x125/img2.jpg" alt="Image Description">

                              <div class="align-self-center g-color-white text-sm-left">
                                <blockquote class="media lead">Hi there purchased a couple of days ago and the site looks great, big thanks to the htmlstream guys, they gave me some great help with some fiddly setup issues.</blockquote>
                                <h4 class="h5 g-color-primary g-mb-0">Daniella Ramirez</h4>
                              </div>
                            </div>
                          </div>
                        </div>
                        <!-- End Testimonials Advanced -->
                      </div>

                      <div class="js-slide">
                        <!-- Testimonials Advanced -->
                        <div class="row justify-content-center">
                          <div class="col-lg-8">
                            <div class="d-flex justify-content-between">
                              <img class="align-self-center g-brd-around g-brd-4 g-brd-primary g-width-100 g-height-100 rounded-circle mr-5" src="{{ root }}assets/img-temp/125x125/img3.jpg" alt="Image Description">

                              <div class="align-self-center g-color-white text-sm-left">
                                <blockquote class="media lead">Dear Htmlstream team, I just bought the Unify template some weeks ago. The template is really nice and offers quite a large set of options.</blockquote>
                                <h4 class="h5 g-color-primary g-mb-0">Alisa Moura</h4>
                              </div>
                            </div>
                          </div>
                        </div>
                        <!-- End Testimonials Advanced -->
                      </div>
                    </div>
                  </div>
                </div>
              </div>

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

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

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

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

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

          <!-- Testimonials Advanced v9 -->
          <section class="g-bg-secondary g-py-100">
            <div class="container">
              <div class="text-center g-mb-50">
                <h2 class="h4 g-mb-0">Testimonials
                  <span class="g-color-primary g-ml-5">#09</span>
                </h2>
              </div>

              <div id="shortcode9">
                <div class="shortcode-html">
                  <div id="carousel1" class="js-carousel js-carousel_single-item-thumbs5--v3__thumbs u-carousel-v1 g-mx-minus-15 g-mb-50"
                       data-infinite="true"
                       data-center-mode="true"
                       data-variable-width="true"
                       data-slides-show="5"
                       data-arrows-classes="u-arrow-v1 g-absolute-centered g-width-35 g-height-40 g-font-size-26 g-color-gray g-bg-white"
                       data-arrow-left-classes="fa fa-angle-left g-ml-minus-118"
                       data-arrow-right-classes="fa fa-angle-right g-ml-118"
                       data-nav-for="#carousel2">
                    <div class="js-thumb">
                      <img class="g-width-200 g-height-200" src="{{ root }}assets/img-temp/200x200/img2.jpg" alt="Image Description">
                    </div>

                    <div class="js-thumb">
                      <img class="g-width-200 g-height-200" src="{{ root }}assets/img-temp/200x200/img3.jpg" alt="Image Description">
                    </div>

                    <div class="js-thumb">
                      <img class="g-width-200 g-height-200" src="{{ root }}assets/img-temp/200x200/img1.jpg" alt="Image Description">
                    </div>

                    <div class="js-thumb">
                      <img class="g-width-200 g-height-200" src="{{ root }}assets/img-temp/200x200/img6.jpg" alt="Image Description">
                    </div>

                    <div class="js-thumb">
                      <img class="g-width-200 g-height-200" src="{{ root }}assets/img-temp/200x200/img4.jpg" alt="Image Description">
                    </div>

                    <div class="js-thumb">
                      <img class="g-width-200 g-height-200" src="{{ root }}assets/img-temp/200x200/img6.jpg" alt="Image Description">
                    </div>

                    <div class="js-thumb">
                      <img class="g-width-200 g-height-200" src="{{ root }}assets/img-temp/200x200/img5.jpg" alt="Image Description">
                    </div>

                    <div class="js-thumb">
                      <img class="g-width-200 g-height-200" src="{{ root }}assets/img-temp/200x200/img7.jpg" alt="Image Description">
                    </div>
                  </div>

                  <div id="carousel2" class="js-carousel g-max-width-645 text-center mx-auto"
                       data-infinite="true"
                       data-fade="true"
                       data-animation="linear"
                       data-nav-for="#carousel1">
                    <div class="js-slide">
                      <h4 class="h5 text-uppercase g-font-weight-600">Amy Clayton</h4>
                      <em class="text-uppercase d-block g-font-style-normal g-font-size-default g-color-primary g-mb-15">Programmer</em>
                      <blockquote class="lead g-font-style-italic">Your customer support is the best I have experienced with any theme I have purchased. You have a theme that far exceeds all others. Thanks for providing such a fantastic theme, all your efforts are greatly appreciated on our end.</blockquote>
                    </div>

                    <div class="js-slide">
                      <h4 class="h5 text-uppercase g-font-weight-600">Fred Penner</h4>
                      <em class="text-uppercase d-block g-font-style-normal g-font-size-default g-color-primary g-mb-15">Web Developer</em>
                      <blockquote class="lead g-font-style-italic">Dear Htmlstream team, I just bought the Unify template some weeks ago. The template is really nice and offers quite a large set of options.</blockquote>
                    </div>

                    <div class="js-slide">
                      <h4 class="h5 text-uppercase g-font-weight-600">Martina Saiz</h4>
                      <em class="text-uppercase d-block g-font-style-normal g-font-size-default g-color-primary g-mb-15">UI Designer</em>
                      <blockquote class="lead g-font-style-italic">Thanks for this great update!!! However it's somewhat always a bit frustrating when I spent a lot of time trying to add features that were missing by myself and seeing updates including it in a way which is 300% nicer. Great job guys! Keep up with the good work!</blockquote>
                    </div>

                    <div class="js-slide">
                      <h4 class="h5 text-uppercase g-font-weight-600">Joseph B. Seward</h4>
                      <em class="text-uppercase d-block g-font-style-normal g-font-size-default g-color-primary g-mb-15">Developer</em>
                      <blockquote class="lead g-font-style-italic">Great theme maker. I wish they would create more themes.</blockquote>
                    </div>

                    <div class="js-slide">
                      <h4 class="h5 text-uppercase g-font-weight-600">Jane Lopex</h4>
                      <em class="text-uppercase d-block g-font-style-normal g-font-size-default g-color-primary g-mb-15">Company CEO</em>
                      <blockquote class="lead g-font-style-italic">I'm very impressed with the theme and customer support! Thanks</blockquote>
                    </div>

                    <div class="js-slide">
                      <h4 class="h5 text-uppercase g-font-weight-600">James Ridgway</h4>
                      <em class="text-uppercase d-block g-font-style-normal g-font-size-default g-color-primary g-mb-15">IT Manager</em>
                      <blockquote class="lead g-font-style-italic">Unify - The best template i have ever found in the last 10 years! Great!</blockquote>
                    </div>
                  </div>
                </div>

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

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

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

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

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

          <!-- Testimonials v10 -->
          <section class="g-py-50">
            <div class="text-center g-mb-50">
              <h2 class="h4 g-mb-0">Testimonials
                <span class="g-color-primary g-ml-5">#10</span>
              </h2>
            </div>

            <div id="shortcode10">
              <div class="shortcode-html">
                <div class="dzsparallaxer auto-init height-is-based-on-content use-loading g-bg-cover g-bg-black-opacity-0_7--after">
                  <div class="divimage dzsparallaxer--target w-100" style="height: 140%; background-image: url({{ root }}assets/img-temp/1500x1000/img1.jpg);"></div>
                  <div class="container g-z-index-1 g-py-120">
                    <div class="js-carousel"
                         data-infinite="true"
                         data-slides-show="3"
                         data-slides-scroll="3"
                         data-arrows-classes="u-arrow-v1 g-width-40 g-height-40 g-brd-1 g-brd-style-solid g-brd-white g-brd-primary--hover g-bg-white g-color-black g-bg-primary--hover g-color-white--hover g-absolute-centered--y g-bottom-0 rounded"
                         data-arrow-left-classes="fa fa-angle-left g-left-0"
                         data-arrow-right-classes="fa fa-angle-right g-right-0">
                      <div class="js-slide g-px-15">
                        <!-- Testimonials Advanced -->
                        <article class="g-bg-cyan-gradient-opacity-v1 g-pa-5">
                          <div class="g-pa-30">
                            <header class="g-mb-20">
                              <h3 class="h4 g-color-white g-mb-0">Alex Peterson</h3>
                              <em class="d-block g-color-white-opacity-0_7 g-font-style-normal g-font-size-12 text-uppercase">Google Inc.</em>
                            </header>

                            <blockquote class="lead g-color-white g-mb-25">Your customer support is the best I have experienced with any theme I have purchased. You have a theme that far exceeds all others.</blockquote>
                            <em class="d-block g-color-white-opacity-0_7 g-font-style-normal g-font-size-12 text-uppercase">Support</em>

                            <div class="js-rating align-self-center g-color-white" data-rating="5" data-spacing="2" data-backward-icons-classes="fa fa-star"></div>
                          </div>
                        </article>
                        <!-- End Testimonials Advanced -->
                      </div>

                      <div class="js-slide g-px-15">
                        <!-- Testimonials Advanced -->
                        <article class="g-bg-cyan-gradient-opacity-v1 g-pa-5">
                          <div class="g-pa-30">
                            <header class="g-mb-20">
                              <h3 class="h4 g-color-white g-mb-0">Emma Watson</h3>
                              <em class="d-block g-color-white-opacity-0_7 g-font-style-normal g-font-size-12 text-uppercase">Apple Inc.</em>
                            </header>

                            <blockquote class="lead g-color-white g-mb-25">Dear Htmlstream Inc., I just bought the Unify template some weeks ago. The template is really nice and offers quite a large set of options.</blockquote>
                            <em class="d-block g-color-white-opacity-0_7 g-font-style-normal g-font-size-12 text-uppercase">Design</em>

                            <div class="js-rating align-self-center g-color-white" data-rating="5" data-spacing="2" data-backward-icons-classes="fa fa-star"></div>
                          </div>
                        </article>
                        <!-- End Testimonials Advanced -->
                      </div>

                      <div class="js-slide g-px-15">
                        <!-- Testimonials Advanced -->
                        <article class="g-bg-cyan-gradient-opacity-v1 g-pa-5">
                          <div class="g-pa-30">
                            <header class="g-mb-20">
                              <h3 class="h4 g-color-white g-mb-0">Leyla Mour</h3>
                              <em class="d-block g-color-white-opacity-0_7 g-font-style-normal g-font-size-12 text-uppercase">Microsoft Inc.</em>
                            </header>

                            <blockquote class="lead g-color-white g-mb-25">Hi there purchased a couple of days ago and the site looks great, big thanks to the htmlstream guys, they gave me some great help.</blockquote>
                            <em class="d-block g-color-white-opacity-0_7 g-font-style-normal g-font-size-12 text-uppercase">Code</em>

                            <div class="js-rating align-self-center g-color-white" data-rating="5" data-spacing="2" data-backward-icons-classes="fa fa-star"></div>
                          </div>
                        </article>
                        <!-- End Testimonials Advanced -->
                      </div>

                      <div class="js-slide g-px-15">
                        <!-- Testimonials Advanced -->
                        <article class="g-bg-cyan-gradient-opacity-v1 g-pa-5">
                          <div class="g-pa-30">
                            <header class="g-mb-20">
                              <h3 class="h4 g-color-white g-mb-0">Alex Peterson</h3>
                              <em class="d-block g-color-white-opacity-0_7 g-font-style-normal g-font-size-12 text-uppercase">Google Inc.</em>
                            </header>

                            <blockquote class="lead g-color-white g-mb-25">Your customer support is the best I have experienced with any theme I have purchased. You have a theme that far exceeds all others.</blockquote>
                            <em class="d-block g-color-white-opacity-0_7 g-font-style-normal g-font-size-12 text-uppercase">Support</em>

                            <div class="js-rating align-self-center g-color-white" data-rating="5" data-spacing="2" data-backward-icons-classes="fa fa-star"></div>
                          </div>
                        </article>
                        <!-- End Testimonials Advanced -->
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="shortcode-styles">
                <!-- CSS Implementing Plugins -->
                <link type="text/plain" rel="stylesheet" href="{{ root }}assets/vendor/dzsparallaxer/dzsparallaxer.css">
                <link type="text/plain" rel="stylesheet" href="{{ root }}assets/vendor/dzsparallaxer/dzsscroller/scroller.css">
                <link type="text/plain" rel="stylesheet" href="{{ root }}assets/vendor/dzsparallaxer/advancedscroller/plugin.css">
                <link type="text/plain" rel="stylesheet" href="{{ root }}assets/vendor/slick-carousel/slick/slick.css">
              </div>

              <div class="shortcode-scripts">
                <!-- JS Implementing Plugins -->
                <script type="text/plain" src="{{ root }}assets/vendor/dzsparallaxer/dzsparallaxer.js"></script>
                <script type="text/plain" src="{{ root }}assets/vendor/dzsparallaxer/dzsscroller/scroller.js"></script>
                <script type="text/plain" src="{{ root }}assets/vendor/dzsparallaxer/advancedscroller/plugin.js"></script>
                <script type="text/plain" src="{{ root }}assets/vendor/slick-carousel/slick/slick.js"></script>

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

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

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

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

          <!-- Testimonials v11 -->
          <section class="g-py-50">
            <div class="text-center g-mb-50">
              <h2 class="h4 g-mb-0">Testimonials
                <span class="g-color-primary g-ml-5">#11</span>
              </h2>
            </div>

            <div id="shortcode11">
              <div class="shortcode-html">
                <!-- Testimonials Advanced -->
                <div class="dzsparallaxer auto-init height-is-based-on-content use-loading g-bg-cover g-bg-black-opacity-0_7--after">
                  <div class="divimage dzsparallaxer--target w-100" style="height: 140%; background-image: url({{ root }}assets/img-temp/1500x1000/img1.jpg);"></div>

                  <div class="container g-z-index-1 g-py-120">
                    <div class="js-carousel"
                         data-infinite="true"
                         data-arrows-classes="u-arrow-v1 g-width-40 g-height-40 g-brd-1 g-brd-style-solid g-brd-white g-brd-primary--hover g-bg-white g-color-black g-bg-primary--hover g-color-white--hover g-absolute-centered--y g-bottom-0 rounded"
                         data-arrow-left-classes="fa fa-angle-left g-left-0"
                         data-arrow-right-classes="fa fa-angle-right g-right-0">
                      <div class="js-slide">
                        <!-- Testimonials Advanced -->
                        <div class="row justify-content-center">
                          <div class="col-md-5">
                            <div class="text-center">
                              <i class="d-block g-color-white-opacity-0_5 g-font-size-50 g-line-height-0_7 g-pos-rel g-top-15 g-mb-20">&#8220;</i>
                              <blockquote class="g-color-white g-font-style-italic g-font-weight-600 g-font-size-20 g-mb-30">Unify - The best template i have ever found in the last 10 years! Great!</blockquote>
                              <h4 class="h6 g-color-gray-dark-v5 g-font-weight-600 g-mb-30">Twitter / 7 hours ago</h4>
                              <i class="d-block g-color-twitter g-font-size-30 fa fa-twitter"></i>
                            </div>
                          </div>
                        </div>
                        <!-- End Testimonials Advanced -->
                      </div>

                      <div class="js-slide">
                        <!-- Testimonials Advanced -->
                        <div class="row justify-content-center">
                          <div class="col-md-5">
                            <div class="text-center">
                              <i class="d-block g-color-white-opacity-0_5 g-font-size-50 g-line-height-0_7 g-pos-rel g-top-15 g-mb-20">&#8220;</i>
                              <blockquote class="g-color-white g-font-style-italic g-font-weight-600 g-font-size-20 g-mb-30">Great theme maker. I wish they would create more themes.</blockquote>
                              <h4 class="h6 g-color-gray-dark-v5 g-font-weight-600 g-mb-30">Twitter / 2 days ago</h4>
                              <i class="d-block g-color-twitter g-font-size-30 fa fa-twitter"></i>
                            </div>
                          </div>
                        </div>
                        <!-- End Testimonials Advanced -->
                      </div>
                    </div>
                  </div>
                </div>
                <!-- End Testimonials Advanced -->
              </div>

              <div class="shortcode-styles">
                <!-- CSS Implementing Plugins -->
                <link type="text/plain" rel="stylesheet" href="{{ root }}assets/vendor/dzsparallaxer/dzsparallaxer.css">
                <link type="text/plain" rel="stylesheet" href="{{ root }}assets/vendor/dzsparallaxer/dzsscroller/scroller.css">
                <link type="text/plain" rel="stylesheet" href="{{ root }}assets/vendor/dzsparallaxer/advancedscroller/plugin.css">
                <link type="text/plain" rel="stylesheet" href="{{ root }}assets/vendor/slick-carousel/slick/slick.css">
              </div>

              <div class="shortcode-scripts">
                <!-- JS Implementing Plugins -->
                <script type="text/plain" src="{{ root }}assets/vendor/dzsparallaxer/dzsparallaxer.js"></script>
                <script type="text/plain" src="{{ root }}assets/vendor/dzsparallaxer/dzsscroller/scroller.js"></script>
                <script type="text/plain" src="{{ root }}assets/vendor/dzsparallaxer/advancedscroller/plugin.js"></script>
                <script type="text/plain" src="{{ root }}assets/vendor/slick-carousel/slick/slick.js"></script>

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

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

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

          <!-- Testimonials v12 -->
          <section class="g-bg-secondary g-py-100">
            <div class="text-center g-mb-50">
              <h2 class="h4 g-mb-0">Testimonials
                <span class="g-color-primary g-ml-5">#12</span>
              </h2>
            </div>

            <div id="shortcode12">
              <div class="shortcode-html">
                <div class="container">
                  <div class="row justify-content-center">
                    <div class="col-lg-10">
                      <div class="text-center">
                        <span class="g-color-gray-dark-v2 g-font-size-90 g-pos-abs g-top-minus-40">
                          &#8220;
                        </span>
                      </div>

                      <div class="js-carousel text-center g-pt-60"
                           data-infinite="true"
                           data-autoplay="true"
                           data-speed="5000"
                           data-fade="true">
                        <div class="js-slide">
                          <blockquote class="lead g-color-black g-font-size-22 g-line-height-2 mb-4">Dear Htmlstream team, I just bought the Unify template some weeks ago. The template is really nice and offers quite a large set of options.</blockquote>
                          <span class="d-block g-color-black g-font-size-17 mb-4">Daniel Ramirez, Designer</span>
                          <img class="d-inline-block g-width-60 g-height-60 g-brd-around g-brd-3 g-brd-white rounded-circle" src="{{ root }}assets/img-temp/100x100/img7.jpg" alt="Image Description">
                        </div>

                        <div class="js-slide">
                          <blockquote class="lead g-color-black g-font-size-22 g-line-height-2 mb-4">Hi there purchased a couple of days ago and the site looks great, big thanks to the htmlstream guys, they gave me some great help with some fiddly setup issues.</blockquote>
                          <span class="d-block g-color-black g-font-size-17 mb-4">Sara Anderson, Developer</span>
                          <img class="d-inline-block g-width-60 g-height-60 g-brd-around g-brd-3 g-brd-white rounded-circle" src="{{ root }}assets/img-temp/100x100/img7.jpg" alt="Image Description">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

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

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

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

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

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

          <!-- Testimonials Advanced v13 -->
          <section class="container g-py-100">
            <div class="text-center g-mb-50">
              <h2 class="h4 g-mb-0">Testimonials
                <span class="g-color-primary g-ml-5">#13</span>
              </h2>
            </div>

            <div id="shortcode13">
              <div class="shortcode-html">
                <!-- Testimonials Advanced -->
                <div class="js-carousel g-mb-50"
                     data-infinite="true"
                     data-arrows-classes="u-arrow-v1 g-width-35 g-height-35 g-brd-around g-brd-gray-light-v1 g-color-gray-dark-v5 g-brd-black--hover g-color-white--hover g-bg-black--hover rounded g-pos-abs g-right-0 g-bottom-0 g-mb-25"
                     data-arrow-left-classes="fa fa-angle-left g-mr-40"
                     data-arrow-right-classes="fa fa-angle-right">
                  <div class="js-slide">
                    <!-- Testimonials Advanced -->
                    <blockquote class="u-ns-bg-v3-bottom g-font-style-italic g-color-white g-bg-black g-font-weight-300 g-font-size-16 g-pa-40 g-mb-30">Thanks a lot. You have no idea how much I appreciate all your help. You are not just a great designer but an amazing human being, because so many people won't give a rat ass about what happen to their clients AFTER THE SALE, and you are not. Again, thanks a lot</blockquote>

                    <div class="media">
                      <img class="d-flex align-self-center g-width-55 g-height-55 rounded-circle mx-3" src="{{ root }}assets/img-temp/100x100/img7.jpg" alt="Image Description">

                      <div class="media-body align-self-center">
                        <h4 class="h5 g-color-black g-mb-0">Alex Moura</h4>
                        <em class="g-color-gray-dark-v4 g-font-size-13">Web Developer</em>
                      </div>
                    </div>
                    <!-- End Testimonials Advanced -->
                  </div>

                  <div class="js-slide">
                    <!-- Testimonials Advanced -->
                    <blockquote class="u-ns-bg-v3-bottom g-font-style-italic g-color-white g-bg-primary g-font-weight-300 g-font-size-16 g-pa-25 g-mb-20">Thanks for this great update!!! However it's somewhat always a bit frustrating when I spent a lot of time trying to add features that were missing by myself and seeing updates including it in a way which is 300% nicer. Great job guys! Keep up with the good work!</blockquote>

                    <div class="media">
                      <img class="d-flex align-self-center g-width-55 g-height-55 rounded-circle mx-3" src="{{ root }}assets/img-temp/100x100/img5.jpg" alt="Image Description">

                      <div class="media-body align-self-center">
                        <h4 class="h5 g-color-black g-mb-0">Nastia Valchova</h4>
                        <em class="g-color-gray-dark-v4 g-font-size-13">Customer</em>
                      </div>
                    </div>
                    <!-- End Testimonials Advanced -->
                  </div>
                </div>
                <!-- End Testimonials Advanced -->

                <!-- Testimonials Advanced -->
                <div class="row">
                  <div class="col-md-6">
                    <div class="js-carousel g-mb-50"
                         data-infinite="true"
                         data-arrows-classes="u-arrow-v1 g-width-30 g-height-30 g-brd-around g-brd-gray-light-v1 g-color-gray-dark-v5 g-brd-lightred--hover g-color-white--hover g-bg-lightred--hover g-pos-abs g-right-0 g-bottom-0 g-mb-25"
                         data-arrow-left-classes="fa fa-angle-left g-mr-35"
                         data-arrow-right-classes="fa fa-angle-right">
                      <div class="js-slide">
                        <!-- Testimonials Advanced -->
                        <blockquote class="u-ns-bg-v3-bottom g-font-style-italic g-color-white g-bg-lightred g-font-weight-300 g-font-size-16 g-pa-25 g-mb-20">Dear Htmlstream team, I just bought the Unify template some weeks ago. The template is really nice and offers quite a large set of options.</blockquote>

                        <div class="media">
                          <img class="d-flex align-self-center g-width-55 g-height-55 mx-3" src="{{ root }}assets/img-temp/100x100/img7.jpg" alt="Image Description">

                          <div class="media-body align-self-center">
                            <h4 class="h5 g-color-black g-mb-0">Alex Moura</h4>
                            <em class="g-color-gray-dark-v4 g-font-size-13">Web Developer</em>
                          </div>
                        </div>
                        <!-- End Testimonials Advanced -->
                      </div>

                      <div class="js-slide">
                        <!-- Testimonials Advanced -->
                        <blockquote class="u-ns-bg-v3-bottom g-font-style-italic g-color-white g-bg-lightred g-font-weight-300 g-font-size-16 g-pa-25 g-mb-20">Hi there purchased a couple of days ago and the site looks great, big thanks to the htmlstream guys, they gave me some great help with some fiddly setup issues.</blockquote>

                        <div class="media">
                          <img class="d-flex align-self-center g-width-55 g-height-55 mx-3" src="{{ root }}assets/img-temp/100x100/img5.jpg" alt="Image Description">

                          <div class="media-body align-self-center">
                            <h4 class="h5 g-color-black g-mb-0">Nastia Valchova</h4>
                            <em class="g-color-gray-dark-v4 g-font-size-13">Customer</em>
                          </div>
                        </div>
                        <!-- End Testimonials Advanced -->
                      </div>
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="js-carousel g-mb-50"
                         data-infinite="true"
                         data-arrows-classes="u-arrow-v1 g-width-30 g-height-30 g-brd-around g-brd-gray-light-v1 g-color-gray-dark-v5 g-brd-blue--hover g-color-white--hover g-bg-blue--hover g-pos-abs g-right-0 g-bottom-0 g-mb-25"
                         data-arrow-left-classes="fa fa-angle-left g-mr-35"
                         data-arrow-right-classes="fa fa-angle-right">
                      <div class="js-slide">
                        <!-- Testimonials Advanced -->
                        <blockquote class="u-ns-bg-v3-bottom g-font-style-italic g-color-white g-bg-blue g-font-weight-300 g-font-size-16 g-pa-25 g-mb-20">Hi there purchased a couple of days ago and the site looks great, big thanks to the htmlstream guys, they gave me some great help with some fiddly setup issues.</blockquote>

                        <div class="media">
                          <img class="d-flex align-self-center g-width-55 g-height-55 rounded-circle mx-3" src="{{ root }}assets/img-temp/100x100/img5.jpg" alt="Image Description">

                          <div class="media-body align-self-center">
                            <h4 class="h5 g-color-black g-mb-0">Nastia Valchova</h4>
                            <em class="g-color-gray-dark-v4 g-font-size-13">Customer</em>
                          </div>
                        </div>
                        <!-- End Testimonials Advanced -->
                      </div>

                      <div class="js-slide">
                        <!-- Testimonials Advanced -->
                        <blockquote class="u-ns-bg-v3-bottom g-font-style-italic g-color-white g-bg-blue g-font-weight-300 g-font-size-16 g-pa-25 g-mb-20">Dear Htmlstream team, I just bought the Unify template some weeks ago. The template is really nice and offers quite a large set of options.</blockquote>

                        <div class="media">
                          <img class="d-flex align-self-center g-width-55 g-height-55 rounded-circle mx-3" src="{{ root }}assets/img-temp/100x100/img14.jpg" alt="Image Description">

                          <div class="media-body align-self-center">
                            <h4 class="h5 g-color-black g-mb-0">Alex Moura</h4>
                            <em class="g-color-gray-dark-v4 g-font-size-13">Web Developer</em>
                          </div>
                        </div>
                        <!-- End Testimonials Advanced -->
                      </div>
                    </div>
                  </div>
                </div>
                <!-- End Testimonials Advanced -->

                <!-- Testimonials Advanced -->
                <div class="row">
                  <div class="col-md-6">
                    <div class="js-carousel g-mb-50"
                         data-infinite="true"
                         data-arrows-classes="u-arrow-v1 g-width-30 g-height-30 g-brd-around g-brd-gray-light-v1 g-color-gray-dark-v5 g-brd-purple--hover g-color-white--hover g-bg-purple--hover rounded-circle g-pos-abs g-right-0 g-bottom-0 g-mb-25"
                         data-arrow-left-classes="fa fa-angle-left g-mr-35"
                         data-arrow-right-classes="fa fa-angle-right">
                      <div class="js-slide">
                        <!-- Testimonials Advanced -->
                        <blockquote class="u-ns-bg-v3-bottom g-font-style-italic g-color-white g-bg-purple g-font-weight-300 g-font-size-16 rounded g-pa-25 g-mb-20">Dear Htmlstream team, I just bought the Unify template some weeks ago. The template is really nice and offers quite a large set of options.</blockquote>

                        <div class="media">
                          <img class="d-flex align-self-center g-width-55 g-height-55 mx-3" src="{{ root }}assets/img-temp/100x100/img14.jpg" alt="Image Description">

                          <div class="media-body align-self-center">
                            <h4 class="h5 g-color-black g-mb-0">Alex Moura</h4>
                            <em class="g-color-gray-dark-v4 g-font-size-13">Web Developer</em>
                          </div>
                        </div>
                        <!-- End Testimonials Advanced -->
                      </div>

                      <div class="js-slide">
                        <!-- Testimonials Advanced -->
                        <blockquote class="u-ns-bg-v3-bottom g-font-style-italic g-color-white g-bg-purple g-font-weight-300 g-font-size-16 rounded g-pa-25 g-mb-20">Hi there purchased a couple of days ago and the site looks great, big thanks to the htmlstream guys, they gave me some great help with some fiddly setup issues.</blockquote>

                        <div class="media">
                          <img class="d-flex align-self-center g-width-55 g-height-55 mx-3" src="{{ root }}assets/img-temp/100x100/img5.jpg" alt="Image Description">

                          <div class="media-body align-self-center">
                            <h4 class="h5 g-color-black g-mb-0">Nastia Valchova</h4>
                            <em class="g-color-gray-dark-v4 g-font-size-13">Customer</em>
                          </div>
                        </div>
                        <!-- End Testimonials Advanced -->
                      </div>
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="js-carousel g-mb-50"
                         data-infinite="true"
                         data-arrows-classes="u-arrow-v1 g-width-30 g-height-30 g-brd-around g-brd-gray-light-v1 g-color-gray-dark-v5 g-brd-cyan--hover g-color-white--hover g-bg-cyan--hover rounded g-pos-abs g-right-0 g-bottom-0 g-mb-25"
                         data-arrow-left-classes="fa fa-angle-left g-mr-35"
                         data-arrow-right-classes="fa fa-angle-right">
                      <div class="js-slide">
                        <!-- Testimonials Advanced -->
                        <blockquote class="u-ns-bg-v3-bottom g-font-style-italic g-color-white g-bg-cyan g-font-weight-300 g-font-size-16 g-rounded-10 g-pa-25 g-mb-20">Hi there purchased a couple of days ago and the site looks great, big thanks to the htmlstream guys, they gave me some great help with some fiddly setup issues.</blockquote>

                        <div class="media">
                          <img class="d-flex align-self-center g-width-55 g-height-55 g-rounded-5 mx-3" src="{{ root }}assets/img-temp/100x100/img5.jpg" alt="Image Description">

                          <div class="media-body align-self-center">
                            <h4 class="h5 g-color-black g-mb-0">Nastia Valchova</h4>
                            <em class="g-color-gray-dark-v4 g-font-size-13">Customer</em>
                          </div>
                        </div>
                        <!-- End Testimonials Advanced -->
                      </div>

                      <div class="js-slide">
                        <!-- Testimonials Advanced -->
                        <blockquote class="u-ns-bg-v3-bottom g-font-style-italic g-color-white g-bg-cyan g-font-weight-300 g-font-size-16 g-rounded-10 g-pa-25 g-mb-20">Dear Htmlstream team, I just bought the Unify template some weeks ago. The template is really nice and offers quite a large set of options.</blockquote>

                        <div class="media">
                          <img class="d-flex align-self-center g-width-55 g-height-55 g-rounded-5 mx-3" src="{{ root }}assets/img-temp/100x100/img14.jpg" alt="Image Description">

                          <div class="media-body align-self-center">
                            <h4 class="h5 g-color-black g-mb-0">Alex Moura</h4>
                            <em class="g-color-gray-dark-v4 g-font-size-13">Web Developer</em>
                          </div>
                        </div>
                        <!-- End Testimonials Advanced -->
                      </div>
                    </div>
                  </div>
                </div>
                <!-- End Testimonials Advanced -->

                <!-- Testimonials Advanced -->
                <div class="row">
                  <div class="col-md-4">
                    <div class="js-carousel g-mb-50"
                         data-autoplay="true"
                         data-infinite="true">
                      <div class="js-slide">
                        <!-- Testimonials Advanced -->
                        <blockquote class="u-ns-bg-v3-bottom g-font-style-italic g-color-white g-bg-teal g-font-weight-300 g-font-size-16 g-pa-25 g-mb-20">Dear Htmlstream team, I just bought the Unify template some weeks ago. The template is really nice and offers quite a large set of options.</blockquote>

                        <div class="ml-4">
                          <h4 class="h5 g-color-black g-mb-0">Alex Moura</h4>
                          <em class="g-color-gray-dark-v4 g-font-size-13">Web Developer</em>
                        </div>
                        <!-- End Testimonials Advanced -->
                      </div>

                      <div class="js-slide">
                        <!-- Testimonials Advanced -->
                        <blockquote class="u-ns-bg-v3-bottom g-font-style-italic g-color-white g-bg-teal g-font-weight-300 g-font-size-16 g-pa-25 g-mb-20">Hi there purchased a couple of days ago and the site looks great, big thanks to the htmlstream guys, they gave me some great help with some fiddly setup issues.</blockquote>

                        <div class="ml-4">
                          <h4 class="h5 g-color-black g-mb-0">Nastia Valchova</h4>
                          <em class="g-color-gray-dark-v4 g-font-size-13">Customer</em>
                        </div>
                        <!-- End Testimonials Advanced -->
                      </div>
                    </div>
                  </div>

                  <div class="col-md-8">
                    <div class="js-carousel g-mb-50"
                         data-autoplay="true"
                         data-infinite="true"
                         data-arrows-classes="u-arrow-v1 g-width-30 g-height-30 g-brd-around g-brd-gray-light-v1 g-color-gray-dark-v5 g-brd-pink--hover g-color-white--hover g-bg-pink--hover g-pos-abs g-right-0 g-bottom-0 g-mb-25"
                         data-arrow-left-classes="fa fa-angle-left g-mr-35"
                         data-arrow-right-classes="fa fa-angle-right">
                      <div class="js-slide">
                        <!-- Testimonials Advanced -->
                        <blockquote class="u-ns-bg-v3-bottom g-font-style-italic g-color-white g-bg-pink g-font-weight-300 g-font-size-16 g-pa-25 g-mb-20">Hi there purchased a couple of days ago and the site looks great, big thanks to the htmlstream guys, they gave me some great help with some fiddly setup issues.</blockquote>

                        <div class="ml-4">
                          <h4 class="h5 g-color-black g-mb-0">Nastia Valchova</h4>
                          <em class="g-color-gray-dark-v4 g-font-size-13">Customer</em>
                        </div>
                        <!-- End Testimonials Advanced -->
                      </div>

                      <div class="js-slide">
                        <!-- Testimonials Advanced -->
                        <blockquote class="u-ns-bg-v3-bottom g-font-style-italic g-color-white g-bg-pink g-font-weight-300 g-font-size-16 g-pa-25 g-mb-20">Dear Htmlstream team, I just bought the Unify template some weeks ago. The template is really nice and offers quite a large set of options.</blockquote>

                        <div class="ml-4">
                          <h4 class="h5 g-color-black g-mb-0">Alex Moura</h4>
                          <em class="g-color-gray-dark-v4 g-font-size-13">Web Developer</em>
                        </div>
                        <!-- End Testimonials Advanced -->
                      </div>
                    </div>
                  </div>
                </div>
                <!-- End Testimonials Advanced -->

                <!-- Testimonials Advanced -->
                <div class="row">
                  <div class="col-md-8">
                    <div class="js-carousel g-mb-50"
                         data-autoplay="true"
                         data-infinite="true"
                         data-arrows-classes="u-arrow-v1 g-width-30 g-height-30 g-brd-around g-brd-gray-light-v1 g-color-gray-dark-v5 g-brd-red--hover g-color-white--hover g-bg-red--hover g-pos-abs g-right-0 g-bottom-0 g-mb-25"
                         data-arrow-left-classes="fa fa-angle-left g-mr-35"
                         data-arrow-right-classes="fa fa-angle-right">
                      <div class="js-slide">
                        <!-- Testimonials Advanced -->
                        <blockquote class="u-ns-bg-v3-bottom g-font-style-italic g-color-white g-bg-red g-font-weight-300 g-font-size-16 g-rounded-15 g-pa-25 g-mb-20">Dear Htmlstream team, I just bought the Unify template some weeks ago. The template is really nice and offers quite a large set of options.</blockquote>

                        <div class="ml-4">
                          <h4 class="h5 g-color-black g-mb-0">Alex Moura</h4>
                          <em class="g-color-gray-dark-v4 g-font-size-13">Web Developer</em>
                        </div>
                        <!-- End Testimonials Advanced -->
                      </div>

                      <div class="js-slide">
                        <!-- Testimonials Advanced -->
                        <blockquote class="u-ns-bg-v3-bottom g-font-style-italic g-color-white g-bg-red g-font-weight-300 g-font-size-16 g-rounded-15 g-pa-25 g-mb-20">Hi there purchased a couple of days ago and the site looks great, big thanks to the htmlstream guys, they gave me some great help with some fiddly setup issues.</blockquote>

                        <div class="ml-4">
                          <h4 class="h5 g-color-black g-mb-0">Nastia Valchova</h4>
                          <em class="g-color-gray-dark-v4 g-font-size-13">Customer</em>
                        </div>
                        <!-- End Testimonials Advanced -->
                      </div>
                    </div>
                  </div>

                  <div class="col-md-4">
                    <div class="js-carousel g-mb-50"
                         data-autoplay="true"
                         data-infinite="true">
                      <div class="js-slide">
                        <!-- Testimonials Advanced -->
                        <blockquote class="u-ns-bg-v3-bottom g-font-style-italic g-color-white g-bg-primary g-font-weight-300 g-font-size-16 g-rounded-15 g-pa-25 g-mb-20">Hi there purchased a couple of days ago and the site looks great, big thanks to the htmlstream guys, they gave me some great help with some fiddly setup issues.</blockquote>

                        <div class="ml-4">
                          <h4 class="h5 g-color-black g-mb-0">Nastia Valchova</h4>
                          <em class="g-color-gray-dark-v4 g-font-size-13">Customer</em>
                        </div>
                        <!-- End Testimonials Advanced -->
                      </div>

                      <div class="js-slide">
                        <!-- Testimonials Advanced -->
                        <blockquote class="u-ns-bg-v3-bottom g-font-style-italic g-color-white g-bg-primary g-font-weight-300 g-font-size-16 g-rounded-15 g-pa-25 g-mb-20">Dear Htmlstream team, I just bought the Unify template some weeks ago. The template is really nice and offers quite a large set of options.</blockquote>

                        <div class="ml-4">
                          <h4 class="h5 g-color-black g-mb-0">Alex Moura</h4>
                          <em class="g-color-gray-dark-v4 g-font-size-13">Web Developer</em>
                        </div>
                        <!-- End Testimonials Advanced -->
                      </div>
                    </div>
                  </div>
                </div>
                <!-- End Testimonials Advanced -->
              </div>

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

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

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

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

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

          <!-- Testimonials Advanced v14 -->
          <section class="g-bg-secondary g-py-100">
            <div class="text-center g-mb-50">
              <h2 class="h4 g-mb-0">Testimonials
                <span class="g-color-primary g-ml-5">#14</span>
              </h2>
            </div>

            <div id="shortcode14">
              <div class="shortcode-html">
                <!-- Testimonials -->
                <div id="carouselCus1" class="js-carousel g-pb-60"
                     data-infinite="true"
                     data-autoplay="true"
                     data-speed="7000"
                     data-lazy-load="progressive"
                     data-slides-show="3"
                     data-pagi-classes="u-carousel-indicators-v31 g-absolute-centered--x g-bottom-0 text-center">
                  <div class="js-slide g-px-15 mb-1">
                    <!-- Testimonials -->
                    <blockquote class="u-blockquote-v8 g-font-weight-300 g-font-size-15 rounded g-pa-25 g-mb-25">Dear Htmlstream team, I just bought the Unify template some weeks ago. The template is really nice and offers quite a large set of options.</blockquote>
                    <div class="media">
                      <img class="d-flex align-self-center rounded-circle u-shadow-v19 g-brd-around g-brd-3 g-brd-white g-width-50 mr-3" src="{{ root }}assets/img-temp/100x100/img7.jpg" alt="Image Description">
                      <div class="media-body align-self-center">
                        <h4 class="g-color-black g-font-weight-600 g-font-size-15 g-mb-0">Alex Pottorf</h4>
                        <span class="d-block g-color-gray-dark-v4 g-font-size-13">Reason: Template Quality</span>
                      </div>
                    </div>
                    <!-- End Testimonials -->
                  </div>

                  <div class="js-slide g-px-15 mb-1">
                    <!-- Testimonials -->
                    <blockquote class="u-blockquote-v8 g-font-weight-300 g-font-size-15 rounded g-pa-25 g-mb-25">Hi there purchased a couple of days ago and the site looks great, big thanks to the htmlstream guys, they gave me some great help with some fiddly setup issues.</blockquote>
                    <div class="media">
                      <img class="d-flex align-self-center rounded-circle u-shadow-v19 g-brd-around g-brd-3 g-brd-white g-width-50 mr-3" src="{{ root }}assets/img-temp/100x100/img5.jpg" alt="Image Description">
                      <div class="media-body align-self-center">
                        <h4 class="g-color-black g-font-weight-600 g-font-size-15 g-mb-0">Bastien Rojanawisut</h4>
                        <span class="d-block g-color-gray-dark-v4 g-font-size-13">Reason: Template Quality</span>
                      </div>
                    </div>
                    <!-- End Testimonials -->
                  </div>

                  <div class="js-slide g-px-15 mb-1">
                    <!-- Testimonials -->
                    <blockquote class="u-blockquote-v8 g-font-weight-300 g-font-size-15 rounded g-pa-25 g-mb-25">The Unify package made my life easier. I will advice programmers to buy it even it cost 140$ - because it shorten hunderds of hours in front of your pc designing your layout.</blockquote>
                    <div class="media">
                      <img class="d-flex align-self-center rounded-circle u-shadow-v19 g-brd-around g-brd-3 g-brd-white g-width-50 mr-3" src="{{ root }}assets/img-temp/100x100/img17.jpg" alt="Image Description">
                      <div class="media-body align-self-center">
                        <h4 class="g-color-black g-font-weight-600 g-font-size-15 g-mb-0">Massalha Shady</h4>
                        <span class="d-block g-color-gray-dark-v4 g-font-size-13">Reason: Code Quality</span>
                      </div>
                    </div>
                    <!-- End Testimonials -->
                  </div>

                  <div class="js-slide g-px-15 mb-1">
                    <!-- Testimonials -->
                    <blockquote class="u-blockquote-v8 g-font-weight-300 g-font-size-15 rounded g-pa-25 g-mb-25">New Unify template looks great!. Love the multiple layout examples for Shortcodes and the new Show code Copy code snippet feature is brilliant</blockquote>
                    <div class="media">
                      <img class="d-flex align-self-center rounded-circle u-shadow-v19 g-brd-around g-brd-3 g-brd-white g-width-50 mr-3" src="{{ root }}assets/img-temp/100x100/img14.jpg" alt="Image Description">
                      <div class="media-body align-self-center">
                        <h4 class="g-color-black g-font-weight-600 g-font-size-15 g-mb-0">Mark Mcmanus</h4>
                        <span class="d-block g-color-gray-dark-v4 g-font-size-13">Reason: Code Quality</span>
                      </div>
                    </div>
                    <!-- End Testimonials -->
                  </div>

                  <div class="js-slide g-px-15 mb-1">
                    <!-- Testimonials -->
                    <blockquote class="u-blockquote-v8 g-font-weight-300 g-font-size-15 rounded g-pa-25 g-mb-25">Great templates, I'm currently using Unify 2.0 for work. It's beautiful and the coding is done quickly and seamlessly. Thank you!</blockquote>
                    <div class="media">
                      <img class="d-flex align-self-center rounded-circle u-shadow-v19 g-brd-around g-brd-3 g-brd-white g-width-50 mr-3" src="{{ root }}assets/img-temp/100x100/img6.jpg" alt="Image Description">
                      <div class="media-body align-self-center">
                        <h4 class="g-color-black g-font-weight-600 g-font-size-15 g-mb-0">Zuza Muszyńska</h4>
                        <span class="d-block g-color-gray-dark-v4 g-font-size-13">Reason: Unify Quality</span>
                      </div>
                    </div>
                    <!-- End Testimonials -->
                  </div>
                </div>
                <!-- End Testimonials -->
              </div>

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

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

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

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

                    $('#carouselCus1').slick('setOption', 'responsive', [{
                      breakpoint: 1200,
                      settings: {
                        slidesToShow: 3
                      }
                    }, {
                      breakpoint: 992,
                      settings: {
                        slidesToShow: 2
                      }
                    }, {
                      breakpoint: 768,
                      settings: {
                        slidesToShow: 2
                      }
                    }, {
                      breakpoint: 576,
                      settings: {
                        slidesToShow: 1
                      }
                    }], true);
                  });
                </script>
              </div>
            </div>

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

          <!-- Testimonials Advanced v15 -->
          <section class="g-py-100">
            <div class="text-center g-mb-50">
              <h2 class="h4 g-mb-0">Testimonials
                <span class="g-color-primary g-ml-5">#15</span>
              </h2>
            </div>

            <div id="shortcode15">
              <div class="shortcode-html">
                <!-- Testimonials -->
                <div class="container">
                  <div id="carouselCus2" class="js-carousel u-carousel-indicators-v32 g-pos-stc g-width-200 text-center mx-auto g-mb-20"
                       data-infinite="true"
                       data-center-mode="true"
                       data-slides-show="3"
                       data-is-thumbs="true"
                       data-nav-for="#carouselCus1">
                    <div class="js-slide d-flex text-center g-opacity-1 g-cursor-pointer g-px-13 g-py-50">
                      <img class="u-shadow-v22 u-carousel-indicators-v32-img g-width-40 g-height-40 g-brd-around g-brd-2 g-brd-transparent rounded-circle" src="{{ root }}assets/img-temp/100x100/img7.jpg" alt="Image Description">
                    </div>

                    <div class="js-slide d-flex text-center g-opacity-1 g-cursor-pointer g-px-13 g-py-50">
                      <img class="u-shadow-v22 u-carousel-indicators-v32-img g-width-40 g-height-40 g-brd-around g-brd-2 g-brd-transparent rounded-circle" src="{{ root }}assets/img-temp/100x100/img17.jpg" alt="Image Description">
                    </div>

                    <div class="js-slide d-flex text-center g-opacity-1 g-cursor-pointer g-px-13 g-py-50">
                      <img class="u-shadow-v22 u-carousel-indicators-v32-img g-width-40 g-height-40 g-brd-around g-brd-2 g-brd-transparent rounded-circle" src="{{ root }}assets/img-temp/100x100/img14.jpg" alt="Image Description">
                    </div>

                    <div class="js-slide d-flex text-center g-opacity-1 g-cursor-pointer g-px-13 g-py-50">
                      <img class="u-shadow-v22 u-carousel-indicators-v32-img g-width-40 g-height-40 g-brd-around g-brd-2 g-brd-transparent rounded-circle" src="{{ root }}assets/img-temp/100x100/img12.jpg" alt="Image Description">
                    </div>
                  </div>

                  <div id="carouselCus1" class="js-carousel g-px-50 g-px-200--lg"
                       data-infinite="true"
                       data-arrows-classes="u-arrow-v1 g-absolute-centered--y g-width-45 g-height-45 g-font-size-30 g-color-main-light-v1 g-color-primary--hover"
                       data-arrow-left-classes="fa fa-angle-left g-left-0 g-left-40--lg g-mt-minus-50"
                       data-arrow-right-classes="fa fa-angle-right g-right-0 g-right-40--lg g-mt-minus-50"
                       data-nav-for="#carouselCus2">

                    <div class="js-slide text-center">
                      <blockquote class="g-font-size-default g-font-size-18--md g-mb-60">Your customer support is the best I have experienced with any theme I have purchased. You have a theme that far exceeds all others. Thanks for providing such a fantastic theme, all your efforts are greatly appreciated on our end.</blockquote>
                      <h4 class="g-font-weight-700 g-font-size-15 g-mb-1">Dick Pottorf</h4>
                      <span class="d-block g-font-size-13">Reason: Unify Support</span>
                    </div>

                    <div class="js-slide text-center">
                      <blockquote class="g-font-size-default g-font-size-18--md g-mb-60">Hi there purchased a couple of days ago and the site looks great, big thanks to the htmlstream guys, they gave me some great help with some fiddly setup issues.</blockquote>
                      <h4 class="g-font-weight-700 g-font-size-15 g-mb-1">Bastien Rojanawisut</h4>
                      <span class="d-block g-font-size-13">Reason: Template Quality</span>
                    </div>

                    <div class="js-slide text-center">
                      <blockquote class="g-font-size-default g-font-size-18--md g-mb-60">Dear Htmlstream team, I just bought the Unify template some weeks ago. The template is really nice and offers quite a large set of options.</blockquote>
                      <h4 class="g-font-weight-700 g-font-size-15 g-mb-1">Alex Pottorf</h4>
                      <span class="d-block g-font-size-13">Reason: Template Quality</span>
                    </div>

                    <div class="js-slide text-center">
                      <blockquote class="g-font-size-default g-font-size-18--md g-mb-60">New Unify template looks great!. Love the multiple layout examples for Shortcodes and the new Show code Copy code snippet feature is brilliant.</blockquote>
                      <h4 class="g-font-weight-700 g-font-size-15 g-mb-1">Mark Mcmanus</h4>
                      <span class="d-block g-font-size-13">Reason: Code Quality</span>
                    </div>
                  </div>
                  <!-- End Carousel -->
                </div>
                <!-- End Testimonials -->
              </div>

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

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

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

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

            {% set contentTarget = "#shortcode15" %}
            {% set modalID = "#modalMarkup" %}
            {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
          </section>
          <!-- End Testimonials Advanced v15 -->
        </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" %}
  <script src="{{ root }}assets/vendor/bootstrap/offcanvas.js"></script>

  <!-- JS Implementing Plugins -->
  <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/slick-carousel/slick/slick.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.carousel.js"></script>
  <script src="{{ root }}assets/js/components/hs.rating.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');

      // custom functions
      $('#carousel5').on('click', '.js-thumb', function (e) {
        e.stopPropagation();
        //Variables
        var i;

        //Variables values
        i = $(this).data('slick-index');

        if ($('#carousel5').slick('slickCurrentSlide') !== i) {
          $('#carousel5').slick('slickGoTo', i);
        }
      });

      // initialization of carousel
      $.HSCore.components.HSCarousel.init('.js-carousel');

      $('#carousel5').slick('setOption', 'responsive', [{
        breakpoint: 768,
        settings: {
          slidesToShow: 3
        }
      }, {
        breakpoint: 576,
        settings: {
          slidesToShow: 1
        }
      }], true);

      $('#carousel7').slick('setOption', 'responsive', [{
        breakpoint: 992,
        settings: {
          slidesToShow: 2
        }
      }, {
        breakpoint: 576,
        settings: {
          slidesToShow: 1
        }
      }], true);

      $('#carouselCus1').slick('setOption', 'responsive', [{
        breakpoint: 1200,
        settings: {
          slidesToShow: 3
        }
      }, {
        breakpoint: 992,
        settings: {
          slidesToShow: 2
        }
      }, {
        breakpoint: 768,
        settings: {
          slidesToShow: 2
        }
      }, {
        breakpoint: 576,
        settings: {
          slidesToShow: 1
        }
      }], true);

      // initialization of rating
      $.HSCore.components.HSRating.init($('.js-rating'), {
        spacing: 4
      });
    });

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

      // initialization of autocomplet
      $.HSCore.components.HSLocalSearchAutocomplete.init('#autocomplete1');

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