{# Settings #}
{% set root = "../../" %}
{% set mainNavActive_1 = "shortcodes" %}
{% set sidebarNavActive_1 = "shortcode-blocks-team-advanced" %}
{% set title = "Team 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" %}
{% 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">
<link rel="stylesheet" href="{{ root }}assets/vendor/cubeportfolio-full/cubeportfolio/css/cubeportfolio.min.css">

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

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

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

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

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

    <section>
      <!-- Team Blocks v1 -->
      <section class="container g-py-100">
        <div class="text-center g-mb-50">
          <h2 class="h4">Advanced Team Blocks
            <span class="g-color-primary g-ml-5">#01</span>
          </h2>
        </div>

        <div id="shortcode1">
          <div class="shortcode-html">
            <!-- Figure -->
            <figure class="row flex-md-row align-items-center">
              <!-- Figure Body -->
              <div class="col-md-6 px-0">
                <div class="u-ns-bg-v1-bottom u-ns-bg-v1-right--md g-bg-white g-py-30 g-px-50">
                  <!-- Figure Info -->
                  <div class="g-mb-25">
                    <div class="g-mb-20">
                      <h4 class="h5 g-color-black g-mb-5">Daniel Wearne</h4>
                      <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary">Co-Founder / CEO</em>
                    </div>
                    <p>I am an ambitious workaholic, but apart from that, pretty simple person. Understanding who you are and what you want is my strategy for your brand. I am always figuring out ways to capture your vision, so people can get on board.</p>
                  </div>
                  <!-- End Figure Info -->

                  <!-- Figure Social Icons -->
                  <ul class="list-inline mb-0">
                    <li class="list-inline-item g-mx-3">
                      <a class="u-icon-v2 u-icon-size--xs g-color-main g-bg-gray-light-v5 g-brd-gray-light-v5 g-bg-primary--hover g-color-white--hover rounded-circle" href="#">
                        <i class="fa fa-facebook"></i>
                      </a>
                    </li>
                    <li class="list-inline-item g-mx-3">
                      <a class="u-icon-v2 u-icon-size--xs g-color-main g-bg-gray-light-v5 g-brd-gray-light-v5 g-bg-primary--hover g-color-white--hover rounded-circle" href="#">
                        <i class="fa fa-twitter"></i>
                      </a>
                    </li>
                    <li class="list-inline-item g-mx-3">
                      <a class="u-icon-v2 u-icon-size--xs g-color-main g-bg-gray-light-v5 g-brd-gray-light-v5 g-bg-primary--hover g-color-white--hover rounded-circle" href="#">
                        <i class="fa fa-google-plus"></i>
                      </a>
                    </li>
                  </ul>
                  <!-- End Figure Social Icons -->
                </div>
              </div>
              <!-- End Figure Body -->

              <!-- Figure Image -->
              <div class="col-md-6 px-0">
                <img class="w-100" src="{{ root }}assets/img-temp/500x450/img7.jpg" alt="Image Description">
              </div>
              <!-- End Figure Image -->
            </figure>
            <!-- End Figure -->

            <!-- Figure -->
            <figure class="row flex-md-row align-items-center">
              <!-- Figure Body -->
              <div class="col-md-6 order-md-2 px-0">
                <div class="u-ns-bg-v1-bottom u-ns-bg-v1-left--md g-bg-white g-py-30 g-px-50">
                  <!-- Figure Info -->
                  <div class="g-mb-25">
                    <div class="g-mb-20">
                      <h4 class="h5 g-color-black g-mb-5">Kate Metu</h4>
                      <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary">Co-Founder / UX Designer</em>
                    </div>
                    <p>I am an ambitious workaholic, but apart from that, pretty simple person. Understanding who you are and what you want is my strategy for your brand. I am always figuring out ways to capture your vision, so people can get on board.</p>
                  </div>
                  <!-- End Figure Info -->

                  <!-- Figure Social Icons -->
                  <ul class="list-inline mb-0">
                    <li class="list-inline-item g-mx-3">
                      <a class="u-icon-v2 u-icon-size--xs g-color-main g-bg-gray-light-v5 g-brd-gray-light-v5 g-bg-primary--hover g-color-white--hover rounded-circle" href="#">
                        <i class="fa fa-facebook"></i>
                      </a>
                    </li>
                    <li class="list-inline-item g-mx-3">
                      <a class="u-icon-v2 u-icon-size--xs g-color-main g-bg-gray-light-v5 g-brd-gray-light-v5 g-bg-primary--hover g-color-white--hover rounded-circle" href="#">
                        <i class="fa fa-twitter"></i>
                      </a>
                    </li>
                    <li class="list-inline-item g-mx-3">
                      <a class="u-icon-v2 u-icon-size--xs g-color-main g-bg-gray-light-v5 g-brd-gray-light-v5 g-bg-primary--hover g-color-white--hover rounded-circle" href="#">
                        <i class="fa fa-google-plus"></i>
                      </a>
                    </li>
                  </ul>
                  <!-- End Figure Social Icons -->
                </div>
              </div>
              <!-- End Figure Body -->

              <!-- Figure Image -->
              <div class="col-md-6 order-md-1 px-0">
                <img class="w-100" src="{{ root }}assets/img-temp/500x450/img11.jpg" alt="Image Description">
              </div>
              <!-- End Figure Image -->
            </figure>
            <!-- End Figure -->
          </div>
        </div>

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

      <!-- Team Blocks v2 -->
      <section class="g-bg-gray-light-v5 g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Advanced Team Blocks
              <span class="g-color-primary g-ml-5">#02</span>
            </h2>
          </div>

          <div id="shortcode2">
            <div class="shortcode-html">
              <!-- Team Block -->
              <div class="cube-portfolio">
                <!-- Cubeportfolio Filter -->
                <ul id="filter-container" class="text-center u-filter-v1 g-mb-40">
                  <li class="list-inline-item cbp-filter-item cbp-filter-item-active g-cursor-pointer g-transition-0_2" data-filter="*">All</li>
                  <li class="list-inline-item cbp-filter-item g-cursor-pointer g-transition-0_2" data-filter=".js-marketing">Marketing</li>
                  <li class="list-inline-item cbp-filter-item g-cursor-pointer g-transition-0_2" data-filter=".js-designer">Designer</li>
                  <li class="list-inline-item cbp-filter-item g-cursor-pointer g-transition-0_2" data-filter=".js-developer">Developer</li>
                  <li class="list-inline-item cbp-filter-item g-cursor-pointer g-transition-0_2" data-filter=".js-support">Support</li>
                </ul>
                <!-- End Cubeportfolio Filter -->

                <!-- Cubeportfolio container -->
                <div id="grid-container" class="cbp"
                     data-controls="#filter-container"
                     data-layout="grid"
                     data-animation="slideLeft"
                     data-caption-animation="fadeIn"
                     data-x-gap="0"
                     data-y-gap="0">
                  <div class="cbp-item js-marketing js-designer">
                    <!-- Figure -->
                    <figure class="u-info-v1-4 g-overflow-hidden mb-0">
                      <!-- Figure Image -->
                      <img class="w-100 u-info-v1-4__item-regular g-transition-0_2" src="{{ root }}assets/img-temp/400x450/img1.jpg" alt="Image Description">
                      <!-- End Figure Image-->

                      <a class="cbp-caption cbp-singlePageInline u-link-v2" href="../ajax/team/team_member_1.html"></a>

                      <!-- Figure Caption -->
                      <figcaption class="u-info-v1-4__item-hidden g-transition-0_2 g-bg-black g-color-white g-px-30 g-py-10">
                        <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary">Developer</em>
                        <h4 class="h5 g-font-weight-500 mb-0">Perry Flavius</h4>
                      </figcaption>
                      <!-- End Figure Caption-->
                    </figure>
                    <!-- End Figure -->
                  </div>

                  <div class="cbp-item js-designer js-support">
                    <!-- Figure -->
                    <figure class="u-info-v1-4 g-overflow-hidden mb-0">
                      <!-- Figure Image -->
                      <img class="w-100 u-info-v1-4__item-regular g-transition-0_2" src="{{ root }}assets/img-temp/400x450/img2.jpg" alt="Image Description">
                      <!-- End Figure Image-->

                      <a class="cbp-caption cbp-singlePageInline u-link-v2" href="../ajax/team/team_member_2.html"></a>

                      <!-- Figure Caption -->
                      <figcaption class="u-info-v1-4__item-hidden g-transition-0_2 g-bg-black g-color-white g-px-30 g-py-10">
                        <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary">Designer</em>
                        <h4 class="h5 g-font-weight-500 mb-0">Kate Metu</h4>
                      </figcaption>
                      <!-- End Figure Caption-->
                    </figure>
                    <!-- End Figure -->
                  </div>

                  <div class="cbp-item js-marketing js-designer">
                    <!-- Figure -->
                    <figure class="u-info-v1-4 g-overflow-hidden mb-0">
                      <!-- Figure Image -->
                      <img class="w-100 u-info-v1-4__item-regular g-transition-0_2" src="{{ root }}assets/img-temp/400x450/img3.jpg" alt="Image Description">
                      <!-- End Figure Image-->

                      <a class="cbp-caption cbp-singlePageInline u-link-v2" href="../ajax/team/team_member_3.html"></a>

                      <!-- Figure Caption -->
                      <figcaption class="u-info-v1-4__item-hidden g-transition-0_2 g-bg-black g-color-white g-px-30 g-py-10">
                        <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary">Illustration</em>
                        <h4 class="h5 g-font-weight-500 mb-0">Daniel Wearne</h4>
                      </figcaption>
                      <!-- End Figure Caption-->
                    </figure>
                    <!-- End Figure -->
                  </div>

                  <div class="cbp-item js-designer js-marketing">
                    <!-- Figure -->
                    <figure class="u-info-v1-4 g-overflow-hidden mb-0">
                      <!-- Figure Image -->
                      <img class="w-100 u-info-v1-4__item-regular g-transition-0_2" src="{{ root }}assets/img-temp/400x450/img4.jpg" alt="Image Description">
                      <!-- End Figure Image-->

                      <a class="cbp-caption cbp-singlePageInline u-link-v2" href="../ajax/team/team_member_4.html"></a>

                      <!-- Figure Caption -->
                      <figcaption class="u-info-v1-4__item-hidden g-transition-0_2 g-bg-black g-color-white g-px-30 g-py-10">
                        <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary">Financial Manager</em>
                        <h4 class="h5 g-font-weight-500 mb-0">Tina Krueger</h4>
                      </figcaption>
                      <!-- End Figure Caption-->
                    </figure>
                    <!-- End Figure -->
                  </div>

                  <div class="cbp-item js-designer js-developer">
                    <!-- Figure -->
                    <figure class="u-info-v1-4 g-overflow-hidden mb-0">
                      <!-- Figure Image -->
                      <img class="w-100 u-info-v1-4__item-regular g-transition-0_2" src="{{ root }}assets/img-temp/400x450/img5.jpg" alt="Image Description">
                      <!-- End Figure Image-->

                      <a class="cbp-caption cbp-singlePageInline u-link-v2" href="../ajax/team/team_member_5.html"></a>

                      <!-- Figure Caption -->
                      <figcaption class="u-info-v1-4__item-hidden g-transition-0_2 g-bg-black g-color-white g-px-30 g-py-10">
                        <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary">Illustration</em>
                        <h4 class="h5 g-font-weight-500 mb-0">David Case</h4>
                      </figcaption>
                      <!-- End Figure Caption-->
                    </figure>
                    <!-- End Figure -->
                  </div>

                  <div class="cbp-item js-marketing js-designer js-developer">
                    <!-- Figure -->
                    <figure class="u-info-v1-4 g-overflow-hidden mb-0">
                      <!-- Figure Image -->
                      <img class="w-100 u-info-v1-4__item-regular g-transition-0_2" src="{{ root }}assets/img-temp/400x450/img6.jpg" alt="Image Description">
                      <!-- End Figure Image-->

                      <a class="cbp-caption cbp-singlePageInline u-link-v2" href="../ajax/team/team_member_6.html"></a>

                      <!-- Figure Caption -->
                      <figcaption class="u-info-v1-4__item-hidden g-transition-0_2 g-bg-black g-color-white g-px-30 g-py-10">
                        <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary">Sales manager</em>
                        <h4 class="h5 g-font-weight-500 mb-0">Sara Lisbon</h4>
                      </figcaption>
                      <!-- End Figure Caption-->
                    </figure>
                    <!-- End Figure -->
                  </div>
                </div>
                <!-- End Cubeportfolio container -->
              </div>
              <!-- End Team Block -->
            </div>

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

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

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

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

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

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

          <div id="shortcode3">
            <div class="shortcode-html">
              <!-- Team Block -->
              <div class="g-mx-minus-9--sm">
                <div class="js-carousel g-pb-90"
                     data-slides-show="4"
                     data-slides-scroll="4"
                     data-arrows-classes="u-arrow-v1 g-pos-abs g-bottom-0 g-width-45 g-height-45 g-font-size-default g-color-gray-dark-v5 g-bg-gray-light-v5 g-color-white--hover g-bg-primary--hover"
                     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"
                     data-responsive='[{
                       "breakpoint": 992,
                       "settings": {
                         "slidesToShow": 3
                       }
                     }, {
                       "breakpoint": 768,
                       "settings": {
                         "slidesToShow": 2
                       }
                     }, {
                       "breakpoint": 576,
                       "settings": {
                         "slidesToShow": 1
                       }
                     }]'>
                  <!-- Team Block -->
                  <div class="js-slide">
                    <!-- Figure -->
                    <figure class="text-center g-px-15">
                      <!-- Figure Image -->
                      <img class="w-100 g-mb-20" src="{{ root }}assets/img-temp/400x450/img1.jpg" alt="Image Description">
                      <!-- End Figure Image -->

                      <!-- Figure Info -->
                      <div class="g-mb-15">
                        <h4 class="h5 g-color-black g-mb-5">Marina Olsson</h4>
                        <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary">Support</em>
                      </div>
                      <!-- End Figure Info -->

                      <!-- Figure Social Icons -->
                      <ul class="list-inline mb-0">
                        <li class="list-inline-item g-mx-3">
                          <a class="u-icon-v2 u-icon-size--xs g-color-main g-bg-gray-light-v5 g-brd-gray-light-v5 g-bg-primary--hover g-color-white--hover rounded-circle" href="#">
                            <i class="fa fa-facebook"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mx-3">
                          <a class="u-icon-v2 u-icon-size--xs g-color-main g-bg-gray-light-v5 g-brd-gray-light-v5 g-bg-primary--hover g-color-white--hover rounded-circle" href="#">
                            <i class="fa fa-twitter"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mx-3">
                          <a class="u-icon-v2 u-icon-size--xs g-color-main g-bg-gray-light-v5 g-brd-gray-light-v5 g-bg-primary--hover g-color-white--hover rounded-circle" href="#">
                            <i class="fa fa-google-plus"></i>
                          </a>
                        </li>
                      </ul>
                      <!-- End Figure Social Icons -->
                    </figure>
                    <!-- End Figure -->
                  </div>
                  <!-- End Team Block -->

                  <!-- Team Block -->
                  <div class="js-slide">
                    <!-- Figure -->
                    <figure class="text-center g-px-15">
                      <!-- Figure Image -->
                      <img class="w-100 g-mb-20" src="{{ root }}assets/img-temp/400x450/img2.jpg" alt="Image Description">
                      <!-- End Figure Image -->

                      <!-- Figure Info -->
                      <div class="g-mb-15">
                        <h4 class="h5 g-color-black g-mb-5">Katie Gonzalez</h4>
                        <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary">Support</em>
                      </div>
                      <!-- End Figure Info -->

                      <!-- Figure Social Icons -->
                      <ul class="list-inline mb-0">
                        <li class="list-inline-item g-mx-3">
                          <a class="u-icon-v2 u-icon-size--xs g-color-main g-bg-gray-light-v5 g-brd-gray-light-v5 g-bg-primary--hover g-color-white--hover rounded-circle" href="#">
                            <i class="fa fa-facebook"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mx-3">
                          <a class="u-icon-v2 u-icon-size--xs g-color-main g-bg-gray-light-v5 g-brd-gray-light-v5 g-bg-primary--hover g-color-white--hover rounded-circle" href="#">
                            <i class="fa fa-twitter"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mx-3">
                          <a class="u-icon-v2 u-icon-size--xs g-color-main g-bg-gray-light-v5 g-brd-gray-light-v5 g-bg-primary--hover g-color-white--hover rounded-circle" href="#">
                            <i class="fa fa-google-plus"></i>
                          </a>
                        </li>
                      </ul>
                      <!-- End Figure Social Icons -->
                    </figure>
                    <!-- End Figure -->
                  </div>
                  <!-- End Team Block -->

                  <!-- Team Block -->
                  <div class="js-slide">
                    <!-- Figure -->
                    <figure class="text-center g-px-15">
                      <!-- Figure Image -->
                      <img class="w-100 g-mb-20" src="{{ root }}assets/img-temp/400x450/img3.jpg" alt="Image Description">
                      <!-- End Figure Image -->

                      <!-- Figure Info -->
                      <div class="g-mb-15">
                        <h4 class="h5 g-color-black g-mb-5">John Brown</h4>
                        <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary">Financial Manager</em>
                      </div>
                      <!-- End Figure Info -->

                      <!-- Figure Social Icons -->
                      <ul class="list-inline mb-0">
                        <li class="list-inline-item g-mx-3">
                          <a class="u-icon-v2 u-icon-size--xs g-color-main g-bg-gray-light-v5 g-brd-gray-light-v5 g-bg-primary--hover g-color-white--hover rounded-circle" href="#">
                            <i class="fa fa-facebook"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mx-3">
                          <a class="u-icon-v2 u-icon-size--xs g-color-main g-bg-gray-light-v5 g-brd-gray-light-v5 g-bg-primary--hover g-color-white--hover rounded-circle" href="#">
                            <i class="fa fa-twitter"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mx-3">
                          <a class="u-icon-v2 u-icon-size--xs g-color-main g-bg-gray-light-v5 g-brd-gray-light-v5 g-bg-primary--hover g-color-white--hover rounded-circle" href="#">
                            <i class="fa fa-google-plus"></i>
                          </a>
                        </li>
                      </ul>
                      <!-- End Figure Social Icons -->
                    </figure>
                    <!-- End Figure -->
                  </div>
                  <!-- End Team Block -->

                  <!-- Team Block -->
                  <div class="js-slide">
                    <!-- Figure -->
                    <figure class="text-center g-px-15">
                      <!-- Figure Image -->
                      <img class="w-100 g-mb-20" src="{{ root }}assets/img-temp/400x450/img4.jpg" alt="Image Description">
                      <!-- End Figure Image -->

                      <!-- Figure Info -->
                      <div class="g-mb-15">
                        <h4 class="h5 g-color-black g-mb-5">Monica Gaudy</h4>
                        <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary">Head Manager</em>
                      </div>
                      <!-- End Figure Info -->

                      <!-- Figure Social Icons -->
                      <ul class="list-inline mb-0">
                        <li class="list-inline-item g-mx-3">
                          <a class="u-icon-v2 u-icon-size--xs g-color-main g-bg-gray-light-v5 g-brd-gray-light-v5 g-bg-primary--hover g-color-white--hover rounded-circle" href="#">
                            <i class="fa fa-facebook"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mx-3">
                          <a class="u-icon-v2 u-icon-size--xs g-color-main g-bg-gray-light-v5 g-brd-gray-light-v5 g-bg-primary--hover g-color-white--hover rounded-circle" href="#">
                            <i class="fa fa-twitter"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mx-3">
                          <a class="u-icon-v2 u-icon-size--xs g-color-main g-bg-gray-light-v5 g-brd-gray-light-v5 g-bg-primary--hover g-color-white--hover rounded-circle" href="#">
                            <i class="fa fa-google-plus"></i>
                          </a>
                        </li>
                      </ul>
                      <!-- End Figure Social Icons -->
                    </figure>
                    <!-- End Figure -->
                  </div>
                  <!-- End Team Block -->

                  <!-- Team Block -->
                  <div class="js-slide">
                    <!-- Figure -->
                    <figure class="text-center g-px-15">
                      <!-- Figure Image -->
                      <img class="w-100 g-mb-20" src="{{ root }}assets/img-temp/400x450/img5.jpg" alt="Image Description">
                      <!-- End Figure Image -->

                      <!-- Figure Info -->
                      <div class="g-mb-15">
                        <h4 class="h5 g-color-black g-mb-5">John Watson</h4>
                        <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary">Marketing manager</em>
                      </div>
                      <!-- End Figure Info -->

                      <!-- Figure Social Icons -->
                      <ul class="list-inline mb-0">
                        <li class="list-inline-item g-mx-3">
                          <a class="u-icon-v2 u-icon-size--xs g-color-main g-bg-gray-light-v5 g-brd-gray-light-v5 g-bg-primary--hover g-color-white--hover rounded-circle" href="#">
                            <i class="fa fa-facebook"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mx-3">
                          <a class="u-icon-v2 u-icon-size--xs g-color-main g-bg-gray-light-v5 g-brd-gray-light-v5 g-bg-primary--hover g-color-white--hover rounded-circle" href="#">
                            <i class="fa fa-twitter"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mx-3">
                          <a class="u-icon-v2 u-icon-size--xs g-color-main g-bg-gray-light-v5 g-brd-gray-light-v5 g-bg-primary--hover g-color-white--hover rounded-circle" href="#">
                            <i class="fa fa-google-plus"></i>
                          </a>
                        </li>
                      </ul>
                      <!-- End Figure Social Icons -->
                    </figure>
                    <!-- End Figure -->
                  </div>
                  <!-- End Team Block -->

                  <!-- Team Block -->
                  <div class="js-slide">
                    <!-- Figure -->
                    <figure class="text-center g-px-15">
                      <!-- Figure Image -->
                      <img class="w-100 g-mb-20" src="{{ root }}assets/img-temp/400x450/img6.jpg" alt="Image Description">
                      <!-- End Figure Image -->

                      <!-- Figure Info -->
                      <div class="g-mb-15">
                        <h4 class="h5 g-color-black g-mb-5">Monica Gaudy</h4>
                        <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary">Sales manager</em>
                      </div>
                      <!-- End Figure Info -->

                      <!-- Figure Social Icons -->
                      <ul class="list-inline mb-0">
                        <li class="list-inline-item g-mx-3">
                          <a class="u-icon-v2 u-icon-size--xs g-color-main g-bg-gray-light-v5 g-brd-gray-light-v5 g-bg-primary--hover g-color-white--hover rounded-circle" href="#">
                            <i class="fa fa-facebook"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mx-3">
                          <a class="u-icon-v2 u-icon-size--xs g-color-main g-bg-gray-light-v5 g-brd-gray-light-v5 g-bg-primary--hover g-color-white--hover rounded-circle" href="#">
                            <i class="fa fa-twitter"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mx-3">
                          <a class="u-icon-v2 u-icon-size--xs g-color-main g-bg-gray-light-v5 g-brd-gray-light-v5 g-bg-primary--hover g-color-white--hover rounded-circle" href="#">
                            <i class="fa fa-google-plus"></i>
                          </a>
                        </li>
                      </ul>
                      <!-- End Figure Social Icons -->
                    </figure>
                    <!-- End Figure -->
                  </div>
                  <!-- End Team Block -->
                </div>
              </div>
              <!-- End Team Block -->
            </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('[class*="js-carousel"]');
                });
              </script>
            </div>
          </div>

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

      <!-- Team Blocks v4 -->
      <section class="g-bg-gray-light-v5 g-py-100">
        <div class="text-center g-mb-50">
          <h2 class="h4">Advanced Team Blocks
            <span class="g-color-primary g-ml-5">#04</span>
          </h2>
        </div>

        <div class="container">
          <div id="shortcode4">
            <div class="shortcode-html">
              <!-- Team Block -->
              <div class="g-mx-minus-9--sm">
                <div class="js-carousel"
                     data-slides-show="3"
                     data-arrows-classes="u-arrow-v1 g-absolute-centered--y 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"
                     data-arrow-left-classes="fa fa-angle-left g-left-minus-25"
                     data-arrow-right-classes="fa fa-angle-right g-right-minus-25"
                     data-responsive='[{
                       "breakpoint": 992,
                       "settings": {
                         "slidesToShow": 3
                       }
                     }, {
                       "breakpoint": 768,
                       "settings": {
                         "slidesToShow": 2
                       }
                     }, {
                       "breakpoint": 576,
                       "settings": {
                         "slidesToShow": 1
                       }
                     }]'>
                  <div class="js-slide">
                    <div class="text-center u-block-hover g-transition-0_3 g-bg-white--hover g-pa-20">
                      <!-- Figure -->
                      <figure class="g-pos-rel g-mb-30">
                        <!-- Figure Image -->
                        <img class="w-100" src="{{ root }}assets/img-temp/400x550/img1.jpg" alt="Image Description">
                        <!-- End Figure Image -->

                        <!-- Figure Caption -->
                        <figcaption class="u-block-hover__additional--fade">
                          <ul class="list-unstyled g-transition-0_3 g-absolute-centered mb-0">
                            <li class="g-mb-5">
                              <a class="u-icon-v3 u-icon-size--sm g-bg-primary--hover g-color-white--hover" href="#">
                                <i class="fa fa-twitter"></i>
                              </a>
                            </li>
                            <li class="g-mb-5">
                              <a class="u-icon-v3 u-icon-size--sm g-bg-primary--hover g-color-white--hover" href="#">
                                <i class="fa fa-pinterest-p"></i>
                              </a>
                            </li>
                            <li class="g-mb-5">
                              <a class="u-icon-v3 u-icon-size--sm g-bg-primary--hover g-color-white--hover" href="#">
                                <i class="fa fa-facebook"></i>
                              </a>
                            </li>
                            <li class="mb-0">
                              <a class="u-icon-v3 u-icon-size--sm g-bg-primary--hover g-color-white--hover" href="#">
                                <i class="fa fa-linkedin"></i>
                              </a>
                            </li>
                          </ul>
                        </figcaption>
                        <!-- Figure Caption -->
                      </figure>
                      <!-- End Figure -->

                      <!-- Info -->
                      <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary g-mb-5">Teacher, Piano</em>
                      <h4 class="h5 g-color-black g-mb-15">Marina
                        <br>
                        Rubapa
                      </h4>
                      <p>I am an ambitious workaholic, but apart from that, pretty simple person.</p>
                      <!-- End Info-->
                    </div>
                  </div>

                  <div class="js-slide">
                    <div class="text-center u-block-hover g-transition-0_3 g-bg-white--hover g-pa-20">
                      <!-- Figure -->
                      <figure class="g-pos-rel g-mb-30">
                        <!-- Figure Image -->
                        <img class="w-100" src="{{ root }}assets/img-temp/400x550/img2.jpg" alt="Image Description">
                        <!-- End Figure Image -->

                        <!-- Figure Caption -->
                        <figcaption class="u-block-hover__additional--fade">
                          <ul class="list-unstyled g-transition-0_3 g-absolute-centered mb-0">
                            <li class="g-mb-5">
                              <a class="u-icon-v3 u-icon-size--sm g-bg-primary--hover g-color-white--hover" href="#">
                                <i class="fa fa-twitter"></i>
                              </a>
                            </li>
                            <li class="g-mb-5">
                              <a class="u-icon-v3 u-icon-size--sm g-bg-primary--hover g-color-white--hover" href="#">
                                <i class="fa fa-pinterest-p"></i>
                              </a>
                            </li>
                            <li class="g-mb-5">
                              <a class="u-icon-v3 u-icon-size--sm g-bg-primary--hover g-color-white--hover" href="#">
                                <i class="fa fa-facebook"></i>
                              </a>
                            </li>
                            <li class="mb-0">
                              <a class="u-icon-v3 u-icon-size--sm g-bg-primary--hover g-color-white--hover" href="#">
                                <i class="fa fa-linkedin"></i>
                              </a>
                            </li>
                          </ul>
                        </figcaption>
                        <!-- Figure Caption -->
                      </figure>
                      <!-- End Figure -->

                      <!-- Info -->
                      <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary g-mb-5">Artist, Dancer</em>
                      <h4 class="h5 g-color-black g-mb-15">Leyla
                        <br>
                        Olsson
                      </h4>
                      <p>I am an ambitious workaholic, but apart from that, pretty simple person.</p>
                      <!-- End Info-->
                    </div>
                  </div>

                  <div class="js-slide">
                    <div class="text-center u-block-hover g-transition-0_3 g-bg-white--hover g-pa-20">
                      <!-- Figure -->
                      <figure class="g-pos-rel g-mb-30">
                        <!-- Figure Image -->
                        <img class="w-100" src="{{ root }}assets/img-temp/400x550/img3.jpg" alt="Image Description">
                        <!-- End Figure Image -->

                        <!-- Figure Caption -->
                        <figcaption class="u-block-hover__additional--fade">
                          <ul class="list-unstyled g-transition-0_3 g-absolute-centered mb-0">
                            <li class="g-mb-5">
                              <a class="u-icon-v3 u-icon-size--sm g-bg-primary--hover g-color-white--hover" href="#">
                                <i class="fa fa-twitter"></i>
                              </a>
                            </li>
                            <li class="g-mb-5">
                              <a class="u-icon-v3 u-icon-size--sm g-bg-primary--hover g-color-white--hover" href="#">
                                <i class="fa fa-pinterest-p"></i>
                              </a>
                            </li>
                            <li class="g-mb-5">
                              <a class="u-icon-v3 u-icon-size--sm g-bg-primary--hover g-color-white--hover" href="#">
                                <i class="fa fa-facebook"></i>
                              </a>
                            </li>
                            <li class="mb-0">
                              <a class="u-icon-v3 u-icon-size--sm g-bg-primary--hover g-color-white--hover" href="#">
                                <i class="fa fa-linkedin"></i>
                              </a>
                            </li>
                          </ul>
                        </figcaption>
                        <!-- Figure Caption -->
                      </figure>
                      <!-- End Figure -->

                      <!-- Info -->
                      <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary g-mb-5">Cook</em>
                      <h4 class="h5 g-color-black g-mb-15">John
                        <br>
                        Smith
                      </h4>
                      <p>I am an ambitious workaholic, but apart from that, pretty simple person.</p>
                      <!-- End Info-->
                    </div>
                  </div>

                  <div class="js-slide">
                    <div class="text-center u-block-hover g-transition-0_3 g-bg-white--hover g-pa-20">
                      <!-- Figure -->
                      <figure class="g-pos-rel g-mb-30">
                        <!-- Figure Image -->
                        <img class="w-100" src="{{ root }}assets/img-temp/400x550/img4.jpg" alt="Image Description">
                        <!-- End Figure Image -->

                        <!-- Figure Caption -->
                        <figcaption class="u-block-hover__additional--fade">
                          <ul class="list-unstyled g-transition-0_3 g-absolute-centered mb-0">
                            <li class="g-mb-5">
                              <a class="u-icon-v3 u-icon-size--sm g-bg-primary--hover g-color-white--hover" href="#">
                                <i class="fa fa-twitter"></i>
                              </a>
                            </li>
                            <li class="g-mb-5">
                              <a class="u-icon-v3 u-icon-size--sm g-bg-primary--hover g-color-white--hover" href="#">
                                <i class="fa fa-pinterest-p"></i>
                              </a>
                            </li>
                            <li class="g-mb-5">
                              <a class="u-icon-v3 u-icon-size--sm g-bg-primary--hover g-color-white--hover" href="#">
                                <i class="fa fa-facebook"></i>
                              </a>
                            </li>
                            <li class="mb-0">
                              <a class="u-icon-v3 u-icon-size--sm g-bg-primary--hover g-color-white--hover" href="#">
                                <i class="fa fa-linkedin"></i>
                              </a>
                            </li>
                          </ul>
                        </figcaption>
                        <!-- Figure Caption -->
                      </figure>
                      <!-- End Figure -->

                      <!-- Info -->
                      <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary g-mb-5">Artist, Sculptor</em>
                      <h4 class="h5 g-color-black g-mb-15">Samantha
                        <br>
                        Fox
                      </h4>
                      <p>I am an ambitious workaholic, but apart from that, pretty simple person.</p>
                      <!-- End Info-->
                    </div>
                  </div>

                  <div class="js-slide">
                    <div class="text-center u-block-hover g-transition-0_3 g-bg-white--hover g-pa-20">
                      <!-- Figure -->
                      <figure class="g-pos-rel g-mb-30">
                        <!-- Figure Image -->
                        <img class="w-100" src="{{ root }}assets/img-temp/400x550/img1.jpg" alt="Image Description">
                        <!-- End Figure Image -->

                        <!-- Figure Caption -->
                        <figcaption class="u-block-hover__additional--fade">
                          <ul class="list-unstyled g-transition-0_3 g-absolute-centered mb-0">
                            <li class="g-mb-5">
                              <a class="u-icon-v3 u-icon-size--sm g-bg-primary--hover g-color-white--hover" href="#">
                                <i class="fa fa-twitter"></i>
                              </a>
                            </li>
                            <li class="g-mb-5">
                              <a class="u-icon-v3 u-icon-size--sm g-bg-primary--hover g-color-white--hover" href="#">
                                <i class="fa fa-pinterest-p"></i>
                              </a>
                            </li>
                            <li class="g-mb-5">
                              <a class="u-icon-v3 u-icon-size--sm g-bg-primary--hover g-color-white--hover" href="#">
                                <i class="fa fa-facebook"></i>
                              </a>
                            </li>
                            <li class="mb-0">
                              <a class="u-icon-v3 u-icon-size--sm g-bg-primary--hover g-color-white--hover" href="#">
                                <i class="fa fa-linkedin"></i>
                              </a>
                            </li>
                          </ul>
                        </figcaption>
                        <!-- Figure Caption -->
                      </figure>
                      <!-- End Figure -->

                      <!-- Info -->
                      <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary g-mb-5">Teacher, Piano</em>
                      <h4 class="h5 g-color-black g-mb-15">Marina
                        <br>
                        Rubapa
                      </h4>
                      <p>I am an ambitious workaholic, but apart from that, pretty simple person.</p>
                      <!-- End Info-->
                    </div>
                  </div>

                  <div class="js-slide">
                    <div class="text-center u-block-hover g-transition-0_3 g-bg-white--hover g-pa-20">
                      <!-- Figure -->
                      <figure class="g-pos-rel g-mb-30">
                        <!-- Figure Image -->
                        <img class="w-100" src="{{ root }}assets/img-temp/400x550/img2.jpg" alt="Image Description">
                        <!-- End Figure Image -->

                        <!-- Figure Caption -->
                        <figcaption class="u-block-hover__additional--fade">
                          <ul class="list-unstyled g-transition-0_3 g-absolute-centered mb-0">
                            <li class="g-mb-5">
                              <a class="u-icon-v3 u-icon-size--sm g-bg-primary--hover g-color-white--hover" href="#">
                                <i class="fa fa-twitter"></i>
                              </a>
                            </li>
                            <li class="g-mb-5">
                              <a class="u-icon-v3 u-icon-size--sm g-bg-primary--hover g-color-white--hover" href="#">
                                <i class="fa fa-pinterest-p"></i>
                              </a>
                            </li>
                            <li class="g-mb-5">
                              <a class="u-icon-v3 u-icon-size--sm g-bg-primary--hover g-color-white--hover" href="#">
                                <i class="fa fa-facebook"></i>
                              </a>
                            </li>
                            <li class="mb-0">
                              <a class="u-icon-v3 u-icon-size--sm g-bg-primary--hover g-color-white--hover" href="#">
                                <i class="fa fa-linkedin"></i>
                              </a>
                            </li>
                          </ul>
                        </figcaption>
                        <!-- Figure Caption -->
                      </figure>
                      <!-- End Figure -->

                      <!-- Info -->
                      <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary g-mb-5">Artist, Dancer</em>
                      <h4 class="h5 g-color-black g-mb-15">Leyla
                        <br>
                        Olsson
                      </h4>
                      <p>I am an ambitious workaholic, but apart from that, pretty simple person.</p>
                      <!-- End Info-->
                    </div>
                  </div>

                  <div class="js-slide">
                    <div class="text-center u-block-hover g-transition-0_3 g-bg-white--hover g-pa-20">
                      <!-- Figure -->
                      <figure class="g-pos-rel g-mb-30">
                        <!-- Figure Image -->
                        <img class="w-100" src="{{ root }}assets/img-temp/400x550/img3.jpg" alt="Image Description">
                        <!-- End Figure Image -->

                        <!-- Figure Caption -->
                        <figcaption class="u-block-hover__additional--fade">
                          <ul class="list-unstyled g-transition-0_3 g-absolute-centered mb-0">
                            <li class="g-mb-5">
                              <a class="u-icon-v3 u-icon-size--sm g-bg-primary--hover g-color-white--hover" href="#">
                                <i class="fa fa-twitter"></i>
                              </a>
                            </li>
                            <li class="g-mb-5">
                              <a class="u-icon-v3 u-icon-size--sm g-bg-primary--hover g-color-white--hover" href="#">
                                <i class="fa fa-pinterest-p"></i>
                              </a>
                            </li>
                            <li class="g-mb-5">
                              <a class="u-icon-v3 u-icon-size--sm g-bg-primary--hover g-color-white--hover" href="#">
                                <i class="fa fa-facebook"></i>
                              </a>
                            </li>
                            <li class="mb-0">
                              <a class="u-icon-v3 u-icon-size--sm g-bg-primary--hover g-color-white--hover" href="#">
                                <i class="fa fa-linkedin"></i>
                              </a>
                            </li>
                          </ul>
                        </figcaption>
                        <!-- Figure Caption -->
                      </figure>
                      <!-- End Figure -->

                      <!-- Info -->
                      <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary g-mb-5">Cook</em>
                      <h4 class="h5 g-color-black g-mb-15">John
                        <br>
                        Smith
                      </h4>
                      <p>I am an ambitious workaholic, but apart from that, pretty simple person.</p>
                      <!-- End Info-->
                    </div>
                  </div>

                  <div class="js-slide">
                    <div class="text-center u-block-hover g-transition-0_3 g-bg-white--hover g-pa-20">
                      <!-- Figure -->
                      <figure class="g-pos-rel g-mb-30">
                        <!-- Figure Image -->
                        <img class="w-100" src="{{ root }}assets/img-temp/400x550/img4.jpg" alt="Image Description">
                        <!-- End Figure Image -->

                        <!-- Figure Caption -->
                        <figcaption class="u-block-hover__additional--fade">
                          <ul class="list-unstyled g-transition-0_3 g-absolute-centered mb-0">
                            <li class="g-mb-5">
                              <a class="u-icon-v3 u-icon-size--sm g-bg-primary--hover g-color-white--hover" href="#">
                                <i class="fa fa-twitter"></i>
                              </a>
                            </li>
                            <li class="g-mb-5">
                              <a class="u-icon-v3 u-icon-size--sm g-bg-primary--hover g-color-white--hover" href="#">
                                <i class="fa fa-pinterest-p"></i>
                              </a>
                            </li>
                            <li class="g-mb-5">
                              <a class="u-icon-v3 u-icon-size--sm g-bg-primary--hover g-color-white--hover" href="#">
                                <i class="fa fa-facebook"></i>
                              </a>
                            </li>
                            <li class="mb-0">
                              <a class="u-icon-v3 u-icon-size--sm g-bg-primary--hover g-color-white--hover" href="#">
                                <i class="fa fa-linkedin"></i>
                              </a>
                            </li>
                          </ul>
                        </figcaption>
                        <!-- Figure Caption -->
                      </figure>
                      <!-- End Figure -->

                      <!-- Info -->
                      <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary g-mb-5">Artist, Sculptor</em>
                      <h4 class="h5 g-color-black g-mb-15">Samantha
                        <br>
                        Fox
                      </h4>
                      <p>I am an ambitious workaholic, but apart from that, pretty simple person.</p>
                      <!-- End Info-->
                    </div>
                  </div>
                </div>
              </div>
              <!-- End Team Block -->
            </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('[class*="js-carousel"]');
                });
              </script>
            </div>
          </div>

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

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

          <div id="shortcode5">
            <div class="shortcode-html">
              <!-- Team Block -->
              <div class="g-mx-minus-9--sm">
                <div class="js-carousel"
                     data-arrows-classes="u-arrow-v1 g-absolute-centered--y g-width-50 g-height-50 g-font-size-default g-color-gray-dark-v5 g-bg-gray-light-v5 g-color-white--hover g-bg-primary--hover"
                     data-arrow-left-classes="fa fa-angle-left g-left-minus-25"
                     data-arrow-right-classes="fa fa-angle-right g-right-minus-25"
                     data-slides-show="3"
                     data-responsive='[{
                       "breakpoint": 992,
                       "settings": {
                         "slidesToShow": 2
                       }
                     }, {
                       "breakpoint": 576,
                       "settings": {
                         "slidesToShow": 1
                       }
                     }]'>
                  <div class="js-slide">
                    <!-- Figure -->
                    <figure class="text-center g-px-5">
                      <!-- Figure Image -->
                      <img class="w-100 g-mb-35" src="{{ root }}assets/img-temp/400x450/img1.jpg" alt="Image Description">
                      <!-- End Figure Image -->

                      <!-- Figure Info -->
                      <div class="g-mb-20">
                        <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary g-mb-5">Technical Supervisor</em>
                        <h4 class="h5 g-color-black">Maria Olsson</h4>
                      </div>
                      <!-- End Figure Info -->

                      <!-- Figure Social Icons -->
                      <ul class="list-inline mb-0">
                        <li class="list-inline-item g-mx-3">
                          <a class="u-icon-v2 u-icon-size--sm g-font-size-default g-color-gray-dark-v5 g-bg-gray-light-v5 g-brd-gray-light-v5 g-bg-primary--hover g-color-white--hover rounded-circle" href="#">
                            <i class="fa fa-facebook"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mx-3">
                          <a class="u-icon-v2 u-icon-size--sm g-font-size-default g-color-gray-dark-v5 g-bg-gray-light-v5 g-brd-gray-light-v5 g-bg-primary--hover g-color-white--hover rounded-circle" href="#">
                            <i class="fa fa-twitter"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mx-3">
                          <a class="u-icon-v2 u-icon-size--sm g-font-size-default g-color-gray-dark-v5 g-bg-gray-light-v5 g-brd-gray-light-v5 g-bg-primary--hover g-color-white--hover rounded-circle" href="#">
                            <i class="fa fa-google-plus"></i>
                          </a>
                        </li>
                      </ul>
                      <!-- End Figure Social Icons -->
                    </figure>
                    <!-- End Figure -->
                  </div>

                  <div class="js-slide">
                    <!-- Figure -->
                    <figure class="text-center g-px-5">
                      <!-- Figure Image -->
                      <img class="w-100 g-mb-35" src="{{ root }}assets/img-temp/400x450/img2.jpg" alt="Image Description">
                      <!-- End Figure Image -->

                      <!-- Figure Info -->
                      <div class="g-mb-20">
                        <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary g-mb-5">Technical Director</em>
                        <h4 class="h5 g-color-black">Catrina Wearner</h4>
                      </div>
                      <!-- End Figure Info -->

                      <!-- Figure Social Icons -->
                      <ul class="list-inline mb-0">
                        <li class="list-inline-item g-mx-3">
                          <a class="u-icon-v2 u-icon-size--sm g-font-size-default g-color-gray-dark-v5 g-bg-gray-light-v5 g-brd-gray-light-v5 g-bg-primary--hover g-color-white--hover rounded-circle" href="#">
                            <i class="fa fa-facebook"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mx-3">
                          <a class="u-icon-v2 u-icon-size--sm g-font-size-default g-color-gray-dark-v5 g-bg-gray-light-v5 g-brd-gray-light-v5 g-bg-primary--hover g-color-white--hover rounded-circle" href="#">
                            <i class="fa fa-twitter"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mx-3">
                          <a class="u-icon-v2 u-icon-size--sm g-font-size-default g-color-gray-dark-v5 g-bg-gray-light-v5 g-brd-gray-light-v5 g-bg-primary--hover g-color-white--hover rounded-circle" href="#">
                            <i class="fa fa-google-plus"></i>
                          </a>
                        </li>
                      </ul>
                      <!-- End Figure Social Icons -->
                    </figure>
                    <!-- End Figure -->
                  </div>

                  <div class="js-slide">
                    <!-- Figure -->
                    <figure class="text-center g-px-5">
                      <!-- Figure Image -->
                      <img class="w-100 g-mb-35" src="{{ root }}assets/img-temp/400x450/img3.jpg" alt="Image Description">
                      <!-- End Figure Image -->

                      <!-- Figure Info -->
                      <div class="g-mb-20">
                        <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary g-mb-5">Technical Manager</em>
                        <h4 class="h5 g-color-black">James Novel</h4>
                      </div>
                      <!-- End Figure Info -->

                      <!-- Figure Social Icons -->
                      <ul class="list-inline mb-0">
                        <li class="list-inline-item g-mx-3">
                          <a class="u-icon-v2 u-icon-size--sm g-font-size-default g-color-gray-dark-v5 g-bg-gray-light-v5 g-brd-gray-light-v5 g-bg-primary--hover g-color-white--hover rounded-circle" href="#">
                            <i class="fa fa-facebook"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mx-3">
                          <a class="u-icon-v2 u-icon-size--sm g-font-size-default g-color-gray-dark-v5 g-bg-gray-light-v5 g-brd-gray-light-v5 g-bg-primary--hover g-color-white--hover rounded-circle" href="#">
                            <i class="fa fa-twitter"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mx-3">
                          <a class="u-icon-v2 u-icon-size--sm g-font-size-default g-color-gray-dark-v5 g-bg-gray-light-v5 g-brd-gray-light-v5 g-bg-primary--hover g-color-white--hover rounded-circle" href="#">
                            <i class="fa fa-google-plus"></i>
                          </a>
                        </li>
                      </ul>
                      <!-- End Figure Social Icons -->
                    </figure>
                    <!-- End Figure -->
                  </div>

                  <div class="js-slide">
                    <!-- Figure -->
                    <figure class="text-center g-px-5">
                      <!-- Figure Image -->
                      <img class="w-100 g-mb-35" src="{{ root }}assets/img-temp/400x450/img4.jpg" alt="Image Description">
                      <!-- End Figure Image -->

                      <!-- Figure Info -->
                      <div class="g-mb-20">
                        <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary g-mb-5">Head of Secretory</em>
                        <h4 class="h5 g-color-black">Fiona Biloti</h4>
                      </div>
                      <!-- End Figure Info -->

                      <!-- Figure Social Icons -->
                      <ul class="list-inline mb-0">
                        <li class="list-inline-item g-mx-3">
                          <a class="u-icon-v2 u-icon-size--sm g-font-size-default g-color-gray-dark-v5 g-bg-gray-light-v5 g-brd-gray-light-v5 g-bg-primary--hover g-color-white--hover rounded-circle" href="#">
                            <i class="fa fa-facebook"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mx-3">
                          <a class="u-icon-v2 u-icon-size--sm g-font-size-default g-color-gray-dark-v5 g-bg-gray-light-v5 g-brd-gray-light-v5 g-bg-primary--hover g-color-white--hover rounded-circle" href="#">
                            <i class="fa fa-twitter"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mx-3">
                          <a class="u-icon-v2 u-icon-size--sm g-font-size-default g-color-gray-dark-v5 g-bg-gray-light-v5 g-brd-gray-light-v5 g-bg-primary--hover g-color-white--hover rounded-circle" href="#">
                            <i class="fa fa-google-plus"></i>
                          </a>
                        </li>
                      </ul>
                      <!-- End Figure Social Icons -->
                    </figure>
                    <!-- End Figure -->
                  </div>
                </div>
              </div>
              <!-- End Team Block -->
            </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('[class*="js-carousel"]');
                });
              </script>
            </div>
          </div>

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

      <!-- Team Blocks v6 -->
      <section class="g-bg-gray-light-v5 g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Advanced Team Blocks
              <span class="g-color-primary g-ml-5">#06</span>
            </h2>
          </div>

          <div id="shortcode6">
            <div class="shortcode-html">
              <!-- Team Block -->
              <div class="g-mx-minus-9--sm">
                <div class="js-carousel g-pb-90"
                     data-slides-show="4"
                     data-slides-scroll="4"
                     data-arrows-classes="u-arrow-v1 g-pos-abs g-bottom-0 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"
                     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"
                     data-responsive='[{
                       "breakpoint": 1200,
                       "settings": {
                         "slidesToShow": 5
                       }
                     }, {
                       "breakpoint": 992,
                       "settings": {
                         "slidesToShow": 4
                       }
                     }, {
                       "breakpoint": 768,
                       "settings": {
                         "slidesToShow": 3
                       }
                     }, {
                       "breakpoint": 576,
                       "settings": {
                         "slidesToShow": 2
                       }
                     }, {
                       "breakpoint": 446,
                       "settings": {
                         "slidesToShow": 2
                       }
                     }]'>
                  <div class="js-slide g-px-15">
                    <!-- Figure -->
                    <figure class="text-center u-block-hover g-color-white mb-0">
                      <!-- Figure Image -->
                      <img class="w-100" src="{{ root }}assets/img-temp/400x550/img1.jpg" alt="Image Description">
                      <!-- End Figure Image -->

                      <!-- Figure Caption -->
                      <figcaption class="u-block-hover__additional--fade g-bg-primary-opacity-0_9 g-flex-middle">
                        <div class="g-flex-middle-item g-pa-20">
                          <!-- Figure Info -->
                          <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-white-opacity-0_7 g-mb-5">Designer</em>
                          <h4 class="h5 g-mb-15">Maria Olsson</h4>
                          <p class="g-color-white-opacity-0_7 g-mb-20">I am an ambitious workaholic, but apart from that, pretty simple person.</p>
                          <!-- End Figure Info -->

                          <!-- Figure Social Icons -->
                          <ul class="list-inline mb-0">
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v3 u-icon-size--xs g-color-primary g-bg-white g-bg-black--hover" href="#">
                                <i class="fa fa-twitter"></i>
                              </a>
                            </li>
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v3 u-icon-size--xs g-color-primary g-bg-white g-bg-black--hover" href="#">
                                <i class="fa fa-pinterest"></i>
                              </a>
                            </li>
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v3 u-icon-size--xs g-color-primary g-bg-white g-bg-black--hover" href="#">
                                <i class="fa fa-facebook"></i>
                              </a>
                            </li>
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v3 u-icon-size--xs g-color-primary g-bg-white g-bg-black--hover" href="#">
                                <i class="fa fa-linkedin"></i>
                              </a>
                            </li>
                          </ul>
                          <!-- End Figure Social Icons -->
                        </div>
                      </figcaption>
                      <!-- End Figure Caption-->
                    </figure>
                    <!-- End Figure -->
                  </div>

                  <div class="js-slide g-px-15">
                    <!-- Figure -->
                    <figure class="text-center u-block-hover g-color-white mb-0">
                      <!-- Figure Image -->
                      <img class="w-100" src="{{ root }}assets/img-temp/400x550/img2.jpg" alt="Image Description">
                      <!-- End Figure Image -->

                      <!-- Figure Caption -->
                      <figcaption class="u-block-hover__additional--fade g-bg-primary-opacity-0_9 g-flex-middle">
                        <div class="g-flex-middle-item g-pa-20">
                          <!-- Figure Info -->
                          <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-white-opacity-0_7 g-mb-5">Support</em>
                          <h4 class="h5 g-mb-15">Hilary Johnson</h4>
                          <p class="g-color-white-opacity-0_7 g-mb-20">I am an ambitious workaholic, but apart from that, pretty simple person.</p>
                          <!-- End Figure Info -->

                          <!-- Figure Social Icons -->
                          <ul class="list-inline mb-0">
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v3 u-icon-size--xs g-color-primary g-bg-white g-bg-black--hover" href="#">
                                <i class="fa fa-twitter"></i>
                              </a>
                            </li>
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v3 u-icon-size--xs g-color-primary g-bg-white g-bg-black--hover" href="#">
                                <i class="fa fa-pinterest"></i>
                              </a>
                            </li>
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v3 u-icon-size--xs g-color-primary g-bg-white g-bg-black--hover" href="#">
                                <i class="fa fa-facebook"></i>
                              </a>
                            </li>
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v3 u-icon-size--xs g-color-primary g-bg-white g-bg-black--hover" href="#">
                                <i class="fa fa-linkedin"></i>
                              </a>
                            </li>
                          </ul>
                          <!-- End Figure Social Icons -->
                        </div>
                      </figcaption>
                      <!-- End Figure Caption-->
                    </figure>
                    <!-- End Figure -->
                  </div>

                  <div class="js-slide g-px-15">
                    <!-- Figure -->
                    <figure class="text-center u-block-hover g-color-white mb-0">
                      <!-- Figure Image -->
                      <img class="w-100" src="{{ root }}assets/img-temp/400x550/img3.jpg" alt="Image Description">
                      <!-- End Figure Image -->

                      <!-- Figure Caption -->
                      <figcaption class="u-block-hover__additional--fade g-bg-primary-opacity-0_9 g-flex-middle">
                        <div class="g-flex-middle-item g-pa-20">
                          <!-- Figure Info -->
                          <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-white-opacity-0_7 g-mb-5">Developer</em>
                          <h4 class="h5 g-mb-15">George Freeman</h4>
                          <p class="g-color-white-opacity-0_7 g-mb-20">I am an ambitious workaholic, but apart from that, pretty simple person.</p>
                          <!-- End Figure Info -->

                          <!-- Figure Social Icons -->
                          <ul class="list-inline mb-0">
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v3 u-icon-size--xs g-color-primary g-bg-white g-bg-black--hover" href="#">
                                <i class="fa fa-twitter"></i>
                              </a>
                            </li>
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v3 u-icon-size--xs g-color-primary g-bg-white g-bg-black--hover" href="#">
                                <i class="fa fa-pinterest"></i>
                              </a>
                            </li>
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v3 u-icon-size--xs g-color-primary g-bg-white g-bg-black--hover" href="#">
                                <i class="fa fa-facebook"></i>
                              </a>
                            </li>
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v3 u-icon-size--xs g-color-primary g-bg-white g-bg-black--hover" href="#">
                                <i class="fa fa-linkedin"></i>
                              </a>
                            </li>
                          </ul>
                          <!-- End Figure Social Icons -->
                        </div>
                      </figcaption>
                      <!-- End Figure Caption-->
                    </figure>
                    <!-- End Figure -->
                  </div>

                  <div class="js-slide g-px-15">
                    <!-- Figure -->
                    <figure class="text-center u-block-hover g-color-white mb-0">
                      <!-- Figure Image -->
                      <img class="w-100" src="{{ root }}assets/img-temp/400x550/img4.jpg" alt="Image Description">
                      <!-- End Figure Image -->

                      <!-- Figure Caption -->
                      <figcaption class="u-block-hover__additional--fade g-bg-primary-opacity-0_9 g-flex-middle">
                        <div class="g-flex-middle-item g-pa-20">
                          <!-- Figure Info -->
                          <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-white-opacity-0_7 g-mb-5">Manager</em>
                          <h4 class="h5 g-mb-15">Alice Regen</h4>
                          <p class="g-color-white-opacity-0_7 g-mb-20">I am an ambitious workaholic, but apart from that, pretty simple person.</p>
                          <!-- End Figure Info -->

                          <!-- Figure Social Icons -->
                          <ul class="list-inline mb-0">
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v3 u-icon-size--xs g-color-primary g-bg-white g-bg-black--hover" href="#">
                                <i class="fa fa-twitter"></i>
                              </a>
                            </li>
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v3 u-icon-size--xs g-color-primary g-bg-white g-bg-black--hover" href="#">
                                <i class="fa fa-pinterest"></i>
                              </a>
                            </li>
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v3 u-icon-size--xs g-color-primary g-bg-white g-bg-black--hover" href="#">
                                <i class="fa fa-facebook"></i>
                              </a>
                            </li>
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v3 u-icon-size--xs g-color-primary g-bg-white g-bg-black--hover" href="#">
                                <i class="fa fa-linkedin"></i>
                              </a>
                            </li>
                          </ul>
                          <!-- End Figure Social Icons -->
                        </div>
                      </figcaption>
                      <!-- End Figure Caption-->
                    </figure>
                    <!-- End Figure -->
                  </div>

                  <div class="js-slide g-px-15">
                    <!-- Figure -->
                    <figure class="text-center u-block-hover g-color-white mb-0">
                      <!-- Figure Image -->
                      <img class="w-100" src="{{ root }}assets/img-temp/400x550/img1.jpg" alt="Image Description">
                      <!-- End Figure Image -->

                      <!-- Figure Caption -->
                      <figcaption class="u-block-hover__additional--fade g-bg-primary-opacity-0_9 g-flex-middle">
                        <div class="g-flex-middle-item g-pa-20">
                          <!-- Figure Info -->
                          <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-white-opacity-0_7 g-mb-5">Designer</em>
                          <h4 class="h5 g-mb-15">Maria Olsson</h4>
                          <p class="g-color-white-opacity-0_7 g-mb-20">I am an ambitious workaholic, but apart from that, pretty simple person.</p>
                          <!-- End Figure Info -->

                          <!-- Figure Social Icons -->
                          <ul class="list-inline mb-0">
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v3 u-icon-size--xs g-color-primary g-bg-white g-bg-black--hover" href="#">
                                <i class="fa fa-twitter"></i>
                              </a>
                            </li>
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v3 u-icon-size--xs g-color-primary g-bg-white g-bg-black--hover" href="#">
                                <i class="fa fa-pinterest"></i>
                              </a>
                            </li>
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v3 u-icon-size--xs g-color-primary g-bg-white g-bg-black--hover" href="#">
                                <i class="fa fa-facebook"></i>
                              </a>
                            </li>
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v3 u-icon-size--xs g-color-primary g-bg-white g-bg-black--hover" href="#">
                                <i class="fa fa-linkedin"></i>
                              </a>
                            </li>
                          </ul>
                          <!-- End Figure Social Icons -->
                        </div>
                      </figcaption>
                      <!-- End Figure Caption-->
                    </figure>
                    <!-- End Figure -->
                  </div>

                  <div class="js-slide g-px-15">
                    <!-- Figure -->
                    <figure class="text-center u-block-hover g-color-white mb-0">
                      <!-- Figure Image -->
                      <img class="w-100" src="{{ root }}assets/img-temp/400x550/img2.jpg" alt="Image Description">
                      <!-- End Figure Image -->

                      <!-- Figure Caption -->
                      <figcaption class="u-block-hover__additional--fade g-bg-primary-opacity-0_9 g-flex-middle">
                        <div class="g-flex-middle-item g-pa-20">
                          <!-- Figure Info -->
                          <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-white-opacity-0_7 g-mb-5">Support</em>
                          <h4 class="h5 g-mb-15">Hilary Johnson</h4>
                          <p class="g-color-white-opacity-0_7 g-mb-20">I am an ambitious workaholic, but apart from that, pretty simple person.</p>
                          <!-- End Figure Info -->

                          <!-- Figure Social Icons -->
                          <ul class="list-inline mb-0">
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v3 u-icon-size--xs g-color-primary g-bg-white g-bg-black--hover" href="#">
                                <i class="fa fa-twitter"></i>
                              </a>
                            </li>
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v3 u-icon-size--xs g-color-primary g-bg-white g-bg-black--hover" href="#">
                                <i class="fa fa-pinterest"></i>
                              </a>
                            </li>
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v3 u-icon-size--xs g-color-primary g-bg-white g-bg-black--hover" href="#">
                                <i class="fa fa-facebook"></i>
                              </a>
                            </li>
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v3 u-icon-size--xs g-color-primary g-bg-white g-bg-black--hover" href="#">
                                <i class="fa fa-linkedin"></i>
                              </a>
                            </li>
                          </ul>
                          <!-- End Figure Social Icons -->
                        </div>
                      </figcaption>
                      <!-- End Figure Caption-->
                    </figure>
                    <!-- End Figure -->
                  </div>

                  <div class="js-slide g-px-15">
                    <!-- Figure -->
                    <figure class="text-center u-block-hover g-color-white mb-0">
                      <!-- Figure Image -->
                      <img class="w-100" src="{{ root }}assets/img-temp/400x550/img3.jpg" alt="Image Description">
                      <!-- End Figure Image -->

                      <!-- Figure Caption -->
                      <figcaption class="u-block-hover__additional--fade g-bg-primary-opacity-0_9 g-flex-middle">
                        <div class="g-flex-middle-item g-pa-20">
                          <!-- Figure Info -->
                          <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-white-opacity-0_7 g-mb-5">Developer</em>
                          <h4 class="h5 g-mb-15">George Freeman</h4>
                          <p class="g-color-white-opacity-0_7 g-mb-20">I am an ambitious workaholic, but apart from that, pretty simple person.</p>
                          <!-- End Figure Info -->

                          <!-- Figure Social Icons -->
                          <ul class="list-inline mb-0">
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v3 u-icon-size--xs g-color-primary g-bg-white g-bg-black--hover" href="#">
                                <i class="fa fa-twitter"></i>
                              </a>
                            </li>
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v3 u-icon-size--xs g-color-primary g-bg-white g-bg-black--hover" href="#">
                                <i class="fa fa-pinterest"></i>
                              </a>
                            </li>
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v3 u-icon-size--xs g-color-primary g-bg-white g-bg-black--hover" href="#">
                                <i class="fa fa-facebook"></i>
                              </a>
                            </li>
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v3 u-icon-size--xs g-color-primary g-bg-white g-bg-black--hover" href="#">
                                <i class="fa fa-linkedin"></i>
                              </a>
                            </li>
                          </ul>
                          <!-- End Figure Social Icons -->
                        </div>
                      </figcaption>
                      <!-- End Figure Caption-->
                    </figure>
                    <!-- End Figure -->
                  </div>

                  <div class="js-slide g-px-15">
                    <!-- Figure -->
                    <figure class="text-center u-block-hover g-color-white mb-0">
                      <!-- Figure Image -->
                      <img class="w-100" src="{{ root }}assets/img-temp/400x550/img4.jpg" alt="Image Description">
                      <!-- End Figure Image -->

                      <!-- Figure Caption -->
                      <figcaption class="u-block-hover__additional--fade g-bg-primary-opacity-0_9 g-flex-middle">
                        <div class="g-flex-middle-item g-pa-20">
                          <!-- Figure Info -->
                          <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-white-opacity-0_7 g-mb-5">Manager</em>
                          <h4 class="h5 g-mb-15">Alice Regen</h4>
                          <p class="g-color-white-opacity-0_7 g-mb-20">I am an ambitious workaholic, but apart from that, pretty simple person.</p>
                          <!-- End Figure Info -->

                          <!-- Figure Social Icons -->
                          <ul class="list-inline mb-0">
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v3 u-icon-size--xs g-color-primary g-bg-white g-bg-black--hover" href="#">
                                <i class="fa fa-twitter"></i>
                              </a>
                            </li>
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v3 u-icon-size--xs g-color-primary g-bg-white g-bg-black--hover" href="#">
                                <i class="fa fa-pinterest"></i>
                              </a>
                            </li>
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v3 u-icon-size--xs g-color-primary g-bg-white g-bg-black--hover" href="#">
                                <i class="fa fa-facebook"></i>
                              </a>
                            </li>
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v3 u-icon-size--xs g-color-primary g-bg-white g-bg-black--hover" href="#">
                                <i class="fa fa-linkedin"></i>
                              </a>
                            </li>
                          </ul>
                          <!-- End Figure Social Icons -->
                        </div>
                      </figcaption>
                      <!-- End Figure Caption-->
                    </figure>
                    <!-- End Figure -->
                  </div>
                </div>
              </div>
              <!-- End Team Block -->
            </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('[class*="js-carousel"]');
                });
              </script>
            </div>
          </div>

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

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

          <div id="shortcode7">
            <div class="shortcode-html">
              <!-- Team Block -->
              <div class="g-mx-minus-9--sm">
                <div class="js-carousel g-pb-90"
                     data-slides-show="4"
                     data-slides-scroll="4"
                     data-arrows-classes="u-arrow-v1 g-pos-abs g-bottom-0 g-width-45 g-height-45 g-font-size-default g-color-gray-dark-v5 g-bg-gray-light-v5 g-color-white--hover g-bg-primary--hover"
                     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"
                     data-responsive='[{
                       "breakpoint": 992,
                       "settings": {
                         "slidesToShow": 3
                       }
                     }, {
                       "breakpoint": 768,
                       "settings": {
                         "slidesToShow": 2
                       }
                     }, {
                       "breakpoint": 576,
                       "settings": {
                         "slidesToShow": 1
                       }
                     }]'>
                  <div class="js-slide g-px-15">
                    <!-- Figure -->
                    <figure class="u-block-hover g-bg-cover g-bg-black-opacity-0_3--hover--after g-bg-primary--hover g-color-white g-transition-0_2 mb-0">
                      <div class="g-pos-rel">
                        <!-- Figure Image -->
                        <img class="w-100" src="{{ root }}assets/img-temp/400x550/img1.jpg" alt="Image Description">
                        <!-- End Figure Image -->

                        <div class="u-block-hover__additional--fade g-flex-middle g-z-index-1">
                          <!-- Figure Social Icons -->
                          <ul class="list-inline text-center u-block-hover__additional--fade u-block-hover__additional--fade-down g-flex-middle-item--top g-mt-25">
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v2 u-icon-size--xs g-color-white g-color-white--hover g-brd-primary--hover g-bg-primary--hover rounded-circle" href="#">
                                <i class="fa fa-twitter"></i>
                              </a>
                            </li>
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v2 u-icon-size--xs g-color-white g-color-white--hover g-brd-primary--hover g-bg-primary--hover rounded-circle" href="#">
                                <i class="fa fa-pinterest"></i>
                              </a>
                            </li>
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v2 u-icon-size--xs g-color-white g-color-white--hover g-brd-primary--hover g-bg-primary--hover rounded-circle" href="#">
                                <i class="fa fa-facebook"></i>
                              </a>
                            </li>
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v2 u-icon-size--xs g-color-white g-color-white--hover g-brd-primary--hover g-bg-primary--hover rounded-circle" href="#">
                                <i class="fa fa-linkedin"></i>
                              </a>
                            </li>
                          </ul>
                          <!-- End Figure Social Icons -->

                          <!-- Figure Contacts -->
                          <ul class="list-unstyled g-flex-middle-item--bottom g-pa-30">
                            <li class="g-mb-5">
                              <i class="fa fa-envelope g-color-primary g-mr-10"></i>
                              maria@unify.com
                            </li>
                            <li class="mb-0">
                              <i class="fa fa-phone-square g-color-primary g-mr-10"></i>
                              +44 555 2566 112
                            </li>
                          </ul>
                          <!-- End Figure Contacts -->
                        </div>
                      </div>

                      <!-- Figure Info -->
                      <div class="g-pa-20 g-pos-rel g-z-index-1">
                        <h4 class="h5 g-mb-0">Maria Olsson</h4>
                        <em class="g-font-style-normal g-font-size-11 text-uppercase g-color-white-opacity-0_7">Yoga, Cardio, Pilates, Crossfit</em>
                      </div>
                      <!-- End Figure Info-->
                    </figure>
                    <!-- End Figure -->
                  </div>

                  <div class="js-slide g-px-15">
                    <!-- Figure -->
                    <figure class="u-block-hover g-bg-cover g-bg-black-opacity-0_3--hover--after g-bg-primary--hover g-color-white g-transition-0_2 mb-0">
                      <div class="g-pos-rel">
                        <!-- Figure Image -->
                        <img class="w-100" src="{{ root }}assets/img-temp/400x550/img2.jpg" alt="Image Description">
                        <!-- End Figure Image -->

                        <div class="u-block-hover__additional--fade g-flex-middle g-z-index-1">
                          <!-- Figure Social Icons -->
                          <ul class="list-inline text-center u-block-hover__additional--fade u-block-hover__additional--fade-down g-flex-middle-item--top g-mt-25">
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v2 u-icon-size--xs g-color-white g-color-white--hover g-brd-primary--hover g-bg-primary--hover rounded-circle" href="#">
                                <i class="fa fa-twitter"></i>
                              </a>
                            </li>
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v2 u-icon-size--xs g-color-white g-color-white--hover g-brd-primary--hover g-bg-primary--hover rounded-circle" href="#">
                                <i class="fa fa-pinterest"></i>
                              </a>
                            </li>
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v2 u-icon-size--xs g-color-white g-color-white--hover g-brd-primary--hover g-bg-primary--hover rounded-circle" href="#">
                                <i class="fa fa-facebook"></i>
                              </a>
                            </li>
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v2 u-icon-size--xs g-color-white g-color-white--hover g-brd-primary--hover g-bg-primary--hover rounded-circle" href="#">
                                <i class="fa fa-linkedin"></i>
                              </a>
                            </li>
                          </ul>
                          <!-- End Figure Social Icons -->

                          <!-- Figure Contacts -->
                          <ul class="list-unstyled g-flex-middle-item--bottom g-pa-30">
                            <li class="g-mb-5">
                              <i class="fa fa-envelope g-color-primary g-mr-10"></i>
                              sara@unify.com
                            </li>
                            <li class="mb-0">
                              <i class="fa fa-phone-square g-color-primary g-mr-10"></i>
                              +44 242 2566 343
                            </li>
                          </ul>
                          <!-- End Figure Contacts -->
                        </div>
                      </div>

                      <!-- Figure Info -->
                      <div class="g-pa-20 g-pos-rel g-z-index-1">
                        <h4 class="h5 g-mb-0">Sara Lisbon</h4>
                        <em class="g-font-style-normal g-font-size-11 text-uppercase g-color-white-opacity-0_7">Gym, Boxing, Crossfit, Cardio</em>
                      </div>
                      <!-- End Figure Info-->
                    </figure>
                    <!-- End Figure -->
                  </div>

                  <div class="js-slide g-px-15">
                    <!-- Figure -->
                    <figure class="u-block-hover g-bg-cover g-bg-black-opacity-0_3--hover--after g-bg-primary--hover g-color-white g-transition-0_2 mb-0">
                      <div class="g-pos-rel">
                        <!-- Figure Image -->
                        <img class="w-100" src="{{ root }}assets/img-temp/400x550/img3.jpg" alt="Image Description">
                        <!-- End Figure Image -->

                        <div class="u-block-hover__additional--fade g-flex-middle g-z-index-1">
                          <!-- Figure Social Icons -->
                          <ul class="list-inline text-center u-block-hover__additional--fade u-block-hover__additional--fade-down g-flex-middle-item--top g-mt-25">
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v2 u-icon-size--xs g-color-white g-color-white--hover g-brd-primary--hover g-bg-primary--hover rounded-circle" href="#">
                                <i class="fa fa-twitter"></i>
                              </a>
                            </li>
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v2 u-icon-size--xs g-color-white g-color-white--hover g-brd-primary--hover g-bg-primary--hover rounded-circle" href="#">
                                <i class="fa fa-pinterest"></i>
                              </a>
                            </li>
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v2 u-icon-size--xs g-color-white g-color-white--hover g-brd-primary--hover g-bg-primary--hover rounded-circle" href="#">
                                <i class="fa fa-facebook"></i>
                              </a>
                            </li>
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v2 u-icon-size--xs g-color-white g-color-white--hover g-brd-primary--hover g-bg-primary--hover rounded-circle" href="#">
                                <i class="fa fa-linkedin"></i>
                              </a>
                            </li>
                          </ul>
                          <!-- End Figure Social Icons -->

                          <!-- Figure Contacts -->
                          <ul class="list-unstyled g-flex-middle-item--bottom g-pa-30">
                            <li class="g-mb-5">
                              <i class="fa fa-envelope g-color-primary g-mr-10"></i>
                              tammy@unify.com
                            </li>
                            <li class="mb-0">
                              <i class="fa fa-phone-square g-color-primary g-mr-10"></i>
                              +44 093 4142 545
                            </li>
                          </ul>
                          <!-- End Figure Contacts -->
                        </div>
                      </div>

                      <!-- Figure Info -->
                      <div class="g-pa-20 g-pos-rel g-z-index-1">
                        <h4 class="h5 g-mb-0">Tammy Exon</h4>
                        <em class="g-font-style-normal g-font-size-11 text-uppercase g-color-white-opacity-0_7">Cardio, Pilates, Zymba</em>
                      </div>
                      <!-- End Figure Info-->
                    </figure>
                    <!-- End Figure -->
                  </div>

                  <div class="js-slide g-px-15">
                    <!-- Figure -->
                    <figure class="u-block-hover g-bg-cover g-bg-black-opacity-0_3--hover--after g-bg-primary--hover g-color-white g-transition-0_2 mb-0">
                      <div class="g-pos-rel">
                        <!-- Figure Image -->
                        <img class="w-100" src="{{ root }}assets/img-temp/400x550/img4.jpg" alt="Image Description">
                        <!-- End Figure Image -->

                        <div class="u-block-hover__additional--fade g-flex-middle g-z-index-1">
                          <!-- Figure Social Icons -->
                          <ul class="list-inline text-center u-block-hover__additional--fade u-block-hover__additional--fade-down g-flex-middle-item--top g-mt-25">
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v2 u-icon-size--xs g-color-white g-color-white--hover g-brd-primary--hover g-bg-primary--hover rounded-circle" href="#">
                                <i class="fa fa-twitter"></i>
                              </a>
                            </li>
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v2 u-icon-size--xs g-color-white g-color-white--hover g-brd-primary--hover g-bg-primary--hover rounded-circle" href="#">
                                <i class="fa fa-pinterest"></i>
                              </a>
                            </li>
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v2 u-icon-size--xs g-color-white g-color-white--hover g-brd-primary--hover g-bg-primary--hover rounded-circle" href="#">
                                <i class="fa fa-facebook"></i>
                              </a>
                            </li>
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v2 u-icon-size--xs g-color-white g-color-white--hover g-brd-primary--hover g-bg-primary--hover rounded-circle" href="#">
                                <i class="fa fa-linkedin"></i>
                              </a>
                            </li>
                          </ul>
                          <!-- End Figure Social Icons -->

                          <!-- Figure Contacts -->
                          <ul class="list-unstyled g-flex-middle-item--bottom g-pa-30">
                            <li class="g-mb-5">
                              <i class="fa fa-envelope g-color-primary g-mr-10"></i>
                              monica@unify.com
                            </li>
                            <li class="mb-0">
                              <i class="fa fa-phone-square g-color-primary g-mr-10"></i>
                              +44 049 3636 132
                            </li>
                          </ul>
                          <!-- End Figure Contacts -->
                        </div>
                      </div>

                      <!-- Figure Info -->
                      <div class="g-pa-20 g-pos-rel g-z-index-1">
                        <h4 class="h5 g-mb-0">Monica Notrom</h4>
                        <em class="g-font-style-normal g-font-size-11 text-uppercase g-color-white-opacity-0_7">Box, Kickboxing, Gym, Crossfit</em>
                      </div>
                      <!-- End Figure Info-->
                    </figure>
                    <!-- End Figure -->
                  </div>

                  <div class="js-slide g-px-15">
                    <!-- Figure -->
                    <figure class="u-block-hover g-bg-cover g-bg-black-opacity-0_3--hover--after g-bg-primary--hover g-color-white g-transition-0_2 mb-0">
                      <div class="g-pos-rel">
                        <!-- Figure Image -->
                        <img class="w-100" src="{{ root }}assets/img-temp/400x550/img1.jpg" alt="Image Description">
                        <!-- End Figure Image -->

                        <div class="u-block-hover__additional--fade g-flex-middle g-z-index-1">
                          <!-- Figure Social Icons -->
                          <ul class="list-inline text-center u-block-hover__additional--fade u-block-hover__additional--fade-down g-flex-middle-item--top g-mt-25">
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v2 u-icon-size--xs g-color-white g-color-white--hover g-brd-primary--hover g-bg-primary--hover rounded-circle" href="#">
                                <i class="fa fa-twitter"></i>
                              </a>
                            </li>
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v2 u-icon-size--xs g-color-white g-color-white--hover g-brd-primary--hover g-bg-primary--hover rounded-circle" href="#">
                                <i class="fa fa-pinterest"></i>
                              </a>
                            </li>
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v2 u-icon-size--xs g-color-white g-color-white--hover g-brd-primary--hover g-bg-primary--hover rounded-circle" href="#">
                                <i class="fa fa-facebook"></i>
                              </a>
                            </li>
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v2 u-icon-size--xs g-color-white g-color-white--hover g-brd-primary--hover g-bg-primary--hover rounded-circle" href="#">
                                <i class="fa fa-linkedin"></i>
                              </a>
                            </li>
                          </ul>
                          <!-- End Figure Social Icons -->

                          <!-- Figure Contacts -->
                          <ul class="list-unstyled g-flex-middle-item--bottom g-pa-30">
                            <li class="g-mb-5">
                              <i class="fa fa-envelope g-color-primary g-mr-10"></i>
                              maria@unify.com
                            </li>
                            <li class="mb-0">
                              <i class="fa fa-phone-square g-color-primary g-mr-10"></i>
                              +44 555 2566 112
                            </li>
                          </ul>
                          <!-- End Figure Contacts -->
                        </div>
                      </div>

                      <!-- Figure Info -->
                      <div class="g-pa-20 g-pos-rel g-z-index-1">
                        <h4 class="h5 g-mb-0">Maria Olsson</h4>
                        <em class="g-font-style-normal g-font-size-11 text-uppercase g-color-white-opacity-0_7">Yoga, Cardio, Pilates, Crossfit</em>
                      </div>
                      <!-- End Figure Info-->
                    </figure>
                    <!-- End Figure -->
                  </div>

                  <div class="js-slide g-px-15">
                    <!-- Figure -->
                    <figure class="u-block-hover g-bg-cover g-bg-black-opacity-0_3--hover--after g-bg-primary--hover g-color-white g-transition-0_2 mb-0">
                      <div class="g-pos-rel">
                        <!-- Figure Image -->
                        <img class="w-100" src="{{ root }}assets/img-temp/400x550/img2.jpg" alt="Image Description">
                        <!-- End Figure Image -->

                        <div class="u-block-hover__additional--fade g-flex-middle g-z-index-1">
                          <!-- Figure Social Icons -->
                          <ul class="list-inline text-center u-block-hover__additional--fade u-block-hover__additional--fade-down g-flex-middle-item--top g-mt-25">
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v2 u-icon-size--xs g-color-white g-color-white--hover g-brd-primary--hover g-bg-primary--hover rounded-circle" href="#">
                                <i class="fa fa-twitter"></i>
                              </a>
                            </li>
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v2 u-icon-size--xs g-color-white g-color-white--hover g-brd-primary--hover g-bg-primary--hover rounded-circle" href="#">
                                <i class="fa fa-pinterest"></i>
                              </a>
                            </li>
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v2 u-icon-size--xs g-color-white g-color-white--hover g-brd-primary--hover g-bg-primary--hover rounded-circle" href="#">
                                <i class="fa fa-facebook"></i>
                              </a>
                            </li>
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v2 u-icon-size--xs g-color-white g-color-white--hover g-brd-primary--hover g-bg-primary--hover rounded-circle" href="#">
                                <i class="fa fa-linkedin"></i>
                              </a>
                            </li>
                          </ul>
                          <!-- End Figure Social Icons -->

                          <!-- Figure Contacts -->
                          <ul class="list-unstyled g-flex-middle-item--bottom g-pa-30">
                            <li class="g-mb-5">
                              <i class="fa fa-envelope g-color-primary g-mr-10"></i>
                              sara@unify.com
                            </li>
                            <li class="mb-0">
                              <i class="fa fa-phone-square g-color-primary g-mr-10"></i>
                              +44 242 2566 343
                            </li>
                          </ul>
                          <!-- End Figure Contacts -->
                        </div>
                      </div>

                      <!-- Figure Info -->
                      <div class="g-pa-20 g-pos-rel g-z-index-1">
                        <h4 class="h5 g-mb-0">Sara Lisbon</h4>
                        <em class="g-font-style-normal g-font-size-11 text-uppercase g-color-white-opacity-0_7">Gym, Boxing, Crossfit, Cardio</em>
                      </div>
                      <!-- End Figure Info-->
                    </figure>
                    <!-- End Figure -->
                  </div>

                  <div class="js-slide g-px-15">
                    <!-- Figure -->
                    <figure class="u-block-hover g-bg-cover g-bg-black-opacity-0_3--hover--after g-bg-primary--hover g-color-white g-transition-0_2 mb-0">
                      <div class="g-pos-rel">
                        <!-- Figure Image -->
                        <img class="w-100" src="{{ root }}assets/img-temp/400x550/img3.jpg" alt="Image Description">
                        <!-- End Figure Image -->

                        <div class="u-block-hover__additional--fade g-flex-middle g-z-index-1">
                          <!-- Figure Social Icons -->
                          <ul class="list-inline text-center u-block-hover__additional--fade u-block-hover__additional--fade-down g-flex-middle-item--top g-mt-25">
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v2 u-icon-size--xs g-color-white g-color-white--hover g-brd-primary--hover g-bg-primary--hover rounded-circle" href="#">
                                <i class="fa fa-twitter"></i>
                              </a>
                            </li>
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v2 u-icon-size--xs g-color-white g-color-white--hover g-brd-primary--hover g-bg-primary--hover rounded-circle" href="#">
                                <i class="fa fa-pinterest"></i>
                              </a>
                            </li>
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v2 u-icon-size--xs g-color-white g-color-white--hover g-brd-primary--hover g-bg-primary--hover rounded-circle" href="#">
                                <i class="fa fa-facebook"></i>
                              </a>
                            </li>
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v2 u-icon-size--xs g-color-white g-color-white--hover g-brd-primary--hover g-bg-primary--hover rounded-circle" href="#">
                                <i class="fa fa-linkedin"></i>
                              </a>
                            </li>
                          </ul>
                          <!-- End Figure Social Icons -->

                          <!-- Figure Contacts -->
                          <ul class="list-unstyled g-flex-middle-item--bottom g-pa-30">
                            <li class="g-mb-5">
                              <i class="fa fa-envelope g-color-primary g-mr-10"></i>
                              tammy@unify.com
                            </li>
                            <li class="mb-0">
                              <i class="fa fa-phone-square g-color-primary g-mr-10"></i>
                              +44 093 4142 545
                            </li>
                          </ul>
                          <!-- End Figure Contacts -->
                        </div>
                      </div>

                      <!-- Figure Info -->
                      <div class="g-pa-20 g-pos-rel g-z-index-1">
                        <h4 class="h5 g-mb-0">Tammy Exon</h4>
                        <em class="g-font-style-normal g-font-size-11 text-uppercase g-color-white-opacity-0_7">Cardio, Pilates, Zymba</em>
                      </div>
                      <!-- End Figure Info-->
                    </figure>
                    <!-- End Figure -->
                  </div>

                  <div class="js-slide g-px-15">
                    <!-- Figure -->
                    <figure class="u-block-hover g-bg-cover g-bg-black-opacity-0_3--hover--after g-bg-primary--hover g-color-white g-transition-0_2 mb-0">
                      <div class="g-pos-rel">
                        <!-- Figure Image -->
                        <img class="w-100" src="{{ root }}assets/img-temp/400x550/img4.jpg" alt="Image Description">
                        <!-- End Figure Image -->

                        <div class="u-block-hover__additional--fade g-flex-middle g-z-index-1">
                          <!-- Figure Social Icons -->
                          <ul class="list-inline text-center u-block-hover__additional--fade u-block-hover__additional--fade-down g-flex-middle-item--top g-mt-25">
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v2 u-icon-size--xs g-color-white g-color-white--hover g-brd-primary--hover g-bg-primary--hover rounded-circle" href="#">
                                <i class="fa fa-twitter"></i>
                              </a>
                            </li>
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v2 u-icon-size--xs g-color-white g-color-white--hover g-brd-primary--hover g-bg-primary--hover rounded-circle" href="#">
                                <i class="fa fa-pinterest"></i>
                              </a>
                            </li>
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v2 u-icon-size--xs g-color-white g-color-white--hover g-brd-primary--hover g-bg-primary--hover rounded-circle" href="#">
                                <i class="fa fa-facebook"></i>
                              </a>
                            </li>
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v2 u-icon-size--xs g-color-white g-color-white--hover g-brd-primary--hover g-bg-primary--hover rounded-circle" href="#">
                                <i class="fa fa-linkedin"></i>
                              </a>
                            </li>
                          </ul>
                          <!-- End Figure Social Icons -->

                          <!-- Figure Contacts -->
                          <ul class="list-unstyled g-flex-middle-item--bottom g-pa-30">
                            <li class="g-mb-5">
                              <i class="fa fa-envelope g-color-primary g-mr-10"></i>
                              monica@unify.com
                            </li>
                            <li class="mb-0">
                              <i class="fa fa-phone-square g-color-primary g-mr-10"></i>
                              +44 049 3636 132
                            </li>
                          </ul>
                          <!-- End Figure Contacts -->
                        </div>
                      </div>

                      <!-- Figure Info -->
                      <div class="g-pa-20 g-pos-rel g-z-index-1">
                        <h4 class="h5 g-mb-0">Monica Notrom</h4>
                        <em class="g-font-style-normal g-font-size-11 text-uppercase g-color-white-opacity-0_7">Box, Kickboxing, Gym, Crossfit</em>
                      </div>
                      <!-- End Figure Info-->
                    </figure>
                    <!-- End Figure -->
                  </div>
                </div>
              </div>
              <!-- End Team Block -->
            </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('[class*="js-carousel"]');
                });
              </script>
            </div>
          </div>

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

      <!-- Team Blocks v8 -->
      <section class="g-bg-gray-light-v5 g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Advanced Team Blocks
              <span class="g-color-primary g-ml-5">#08</span>
            </h2>
          </div>

          <div id="shortcode8">
            <div class="shortcode-html">
              <!-- Team Block -->
              <div class="u-carousel-v10 g-max-width-800 mx-auto">
                <div id="js-carousel-sync-for" class="js-carousel"
                  data-slides-show="1"
                  data-slides-scroll="1"
                  data-infinite="true"
                  data-fade="true"
                  data-center-mode="true"
                  data-pagi="true"
                  data-adaptive-height="true"
                  data-nav-for="#js-carousel-sync-nav">
                  <div class="js-slide">
                    <!-- Figure -->
                    <figure class="row">
                      <div class="col-sm-6 order-sm-2">
                        <!-- Figure Info -->
                        <div class="g-mb-30">
                          <h4 class="h5 g-color-black g-mb-5">Maria Olsson</h4>
                          <em class="d-block u-info-v1-5__item g-color-primary g-font-style-normal g-font-size-11 text-uppercase">Phd in Healthcare</em>
                        </div>
                        <p>I am an ambitious workaholic, but apart from that, pretty simple person. Understanding who you are and what you want is my strategy for your brand. I am always figuring out ways to capture your vision, so people can get on board.</p>
                        <!-- End Figure Info -->
                      </div>

                      <!-- Figure Image -->
                      <div class="col-sm-5 order-sm-1">
                        <img class="w-100" src="{{ root }}assets/img-temp/400x450/img1.jpg" alt="Image Description">
                      </div>
                      <!-- End Figure Image -->
                    </figure>
                    <!-- End Figure -->
                  </div>

                  <div class="js-slide">
                    <!-- Figure -->
                    <figure class="row">
                      <div class="col-sm-6 order-sm-2">
                        <!-- Figure Info -->
                        <div class="g-mb-30">
                          <h4 class="h5 g-color-black g-mb-5">Sara Lisbon</h4>
                          <em class="d-block u-info-v1-5__item g-color-primary g-font-style-normal g-font-size-11 text-uppercase">Phd in Healthcare</em>
                        </div>
                        <p>I am an ambitious workaholic, but apart from that, pretty simple person. Understanding who you are and what you want is my strategy for your brand. I am always figuring out ways to capture your vision, so people can get on board.</p>
                        <!-- End Figure Info -->
                      </div>

                      <!-- Figure Image -->
                      <div class="col-sm-5 order-sm-1">
                        <img class="w-100" src="{{ root }}assets/img-temp/400x450/img2.jpg" alt="Image Description">
                      </div>
                      <!-- End Figure Image -->
                    </figure>
                    <!-- End Figure -->
                  </div>

                  <div class="js-slide">
                    <!-- Figure -->
                    <figure class="row">
                      <div class="col-sm-6 order-sm-2">
                        <!-- Figure Info -->
                        <div class="g-mb-30">
                          <h4 class="h5 g-color-black g-mb-5">Evan Bohringer</h4>
                          <em class="d-block u-info-v1-5__item g-color-primary g-font-style-normal g-font-size-11 text-uppercase">Phd in Healthcare</em>
                        </div>
                        <p>I am an ambitious workaholic, but apart from that, pretty simple person. Understanding who you are and what you want is my strategy for your brand. I am always figuring out ways to capture your vision, so people can get on board.</p>
                        <!-- End Figure Info -->
                      </div>

                      <!-- Figure Image -->
                      <div class="col-sm-5 order-sm-1">
                        <img class="w-100" src="{{ root }}assets/img-temp/400x450/img3.jpg" alt="Image Description">
                      </div>
                      <!-- End Figure Image -->
                    </figure>
                    <!-- End Figure -->
                  </div>

                  <div class="js-slide">
                    <!-- Figure -->
                    <figure class="row">
                      <div class="col-sm-6 order-sm-2">
                        <!-- Figure Info -->
                        <div class="g-mb-30">
                          <h4 class="h5 g-color-black g-mb-5">Jane Wearne</h4>
                          <em class="d-block u-info-v1-5__item g-color-primary g-font-style-normal g-font-size-11 text-uppercase">Phd in Healthcare</em>
                        </div>
                        <p>I am an ambitious workaholic, but apart from that, pretty simple person. Understanding who you are and what you want is my strategy for your brand. I am always figuring out ways to capture your vision, so people can get on board.</p>
                        <!-- End Figure Info -->
                      </div>

                      <!-- Figure Image -->
                      <div class="col-sm-5 order-sm-1">
                        <img class="w-100" src="{{ root }}assets/img-temp/400x450/img4.jpg" alt="Image Description">
                      </div>
                      <!-- End Figure Image -->
                    </figure>
                    <!-- End Figure -->
                  </div>

                  <div class="js-slide">
                    <!-- Figure -->
                    <figure class="row">
                      <div class="col-sm-6 order-sm-2">
                        <!-- Figure Info -->
                        <div class="g-mb-30">
                          <h4 class="h5 g-color-black g-mb-5">Nicholas Robertson</h4>
                          <em class="d-block u-info-v1-5__item g-color-primary g-font-style-normal g-font-size-11 text-uppercase">Phd in Healthcare</em>
                        </div>
                        <p>I am an ambitious workaholic, but apart from that, pretty simple person. Understanding who you are and what you want is my strategy for your brand. I am always figuring out ways to capture your vision, so people can get on board.</p>
                        <!-- End Figure Info -->
                      </div>

                      <!-- Figure Image -->
                      <div class="col-sm-5 order-sm-1">
                        <img class="w-100" src="{{ root }}assets/img-temp/400x450/img5.jpg" alt="Image Description">
                      </div>
                      <!-- End Figure Image -->
                    </figure>
                    <!-- End Figure -->
                  </div>
                </div>

                <div class="row">
                  <div class="col-md-6 ml-md-auto">
                    <!-- Carousel Nav -->
                    <div id="js-carousel-sync-nav" class="js-carousel u-carousel-v10-nav"
                      data-slides-show="4"
                      data-slides-scroll="1"
                      data-focus-on-select="true"
                      data-center-mode="true"
                      data-nav-for="#js-carousel-sync-for">
                      <div class="js-slide g-mx-3">
                        <img class="w-100" src="{{ root }}assets/img-temp/400x450/img1.jpg" alt="Image Description">
                      </div>

                      <div class="js-slide g-mx-3">
                        <img class="w-100" src="{{ root }}assets/img-temp/400x450/img2.jpg" alt="Image Description">
                      </div>

                      <div class="js-slide g-mx-3">
                        <img class="w-100" src="{{ root }}assets/img-temp/400x450/img3.jpg" alt="Image Description">
                      </div>

                      <div class="js-slide g-mx-3">
                        <img class="w-100" src="{{ root }}assets/img-temp/400x450/img4.jpg" alt="Image Description">
                      </div>

                      <div class="js-slide g-mx-3">
                        <img class="w-100" src="{{ root }}assets/img-temp/400x450/img5.jpg" alt="Image Description">
                      </div>
                    </div>
                    <!-- End Carousel Nav -->
                  </div>
                </div>
              </div>
              <!-- End Team Block -->
            </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('[class*="js-carousel"]');

                  $('#js-carousel-sync-for').on('init', function (event, slick) {
                    $(slick.$slides).css('height', 'auto');
                  });

                  $('#js-carousel-sync-nav').on('init', function (event, slick) {
                    $(slick.$slides).css('height', 'auto');
                  });
                });
              </script>
            </div>
          </div>

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

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

        <div id="shortcode9">
          <div class="shortcode-html">
            <!-- Carousel -->
            <div id="carouselCus3" class="js-carousel g-mb-50--lg"
                 data-infinite="true"
                 data-fade="true"
                 data-lazy-load="ondemand"
                 data-arrows-classes="u-arrow-v1 g-absolute-centered--y g-width-45 g-height-45 g-font-size-30 g-color-gray-dark-v4 g-color-primary--hover"
                 data-arrow-left-classes="fa fa-angle-left g-left-0 g-left-40--lg"
                 data-arrow-right-classes="fa fa-angle-right g-right-0 g-right-40--lg"
                 data-nav-for="#carouselCus4">
              <div class="js-slide">
                <!-- Team -->
                <div class="row justify-content-center align-items-center no-gutters">
                  <div class="col-sm-6 col-lg-4 g-bg-size-cover g-bg-pos-top-center g-min-height-400" data-bg-img-src="{{ root }}assets/img-temp/400x450/img1.jpg"></div>
                  <div class="col-sm-6 col-lg-4">
                    <div class="g-px-30 g-px-50--lg g-py-60">
                      <h3 class="h4 mb-1">Jessica Lisbon</h3>
                      <span class="d-block mb-4">Support Manager</span>
                      <p class="mb-4">I've got your front end and back end needs covered. I'm always looking for strategies to make your brand's needs fit with today's development languages.</p>

                      <!-- Social Icons -->
                      <ul class="list-inline mb-3">
                        <li class="list-inline-item g-mx-2">
                          <a class="u-icon-v1 u-icon-size--sm u-icon-slide-up--hover g-color-blue g-bg-blue-opacity-0_1 g-color-blue--hover rounded-circle" href="https://www.facebook.com/htmlstream">
                            <i class="g-font-size-default g-line-height-1 u-icon__elem-regular fa fa-facebook"></i>
                            <i class="g-font-size-default g-line-height-0_8 u-icon__elem-hover fa fa-facebook"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mx-2">
                          <a class="u-icon-v1 u-icon-size--sm u-icon-slide-up--hover g-color-cyan g-bg-cyan-opacity-0_1 g-color-cyan--hover rounded-circle" href="https://twitter.com/htmlstream">
                            <i class="g-font-size-default g-line-height-1 u-icon__elem-regular fa fa-twitter"></i>
                            <i class="g-font-size-default g-line-height-0_8 u-icon__elem-hover fa fa-twitter"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mx-2">
                          <a class="u-icon-v1 u-icon-size--sm u-icon-slide-up--hover g-color-bluegray g-bg-bluegray-opacity-0_1 g-color-bluegray--hover rounded-circle" href="https://github.com/htmlstream">
                            <i class="g-font-size-default g-line-height-1 u-icon__elem-regular fa fa-github"></i>
                            <i class="g-font-size-default g-line-height-0_8 u-icon__elem-hover fa fa-github"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mx-2">
                          <a class="u-icon-v1 u-icon-size--sm u-icon-slide-up--hover g-color-red g-bg-red-opacity-0_1 g-color-red--hover rounded-circle" href="https://dribbble.com/htmlstream">
                            <i class="g-font-size-default g-line-height-1 u-icon__elem-regular fa fa-dribbble"></i>
                            <i class="g-font-size-default g-line-height-0_8 u-icon__elem-hover fa fa-dribbble"></i>
                          </a>
                        </li>
                      </ul>
                      <!-- End Social Icons -->

                      <a class="u-link-v5 g-color-gray-dark-v4 g-color-primary--hover g-font-weight-700" href="#">See Projects</a>
                    </div>
                  </div>
                </div>
                <!-- End Team -->
              </div>

              <div class="js-slide">
                <!-- Team -->
                <div class="row justify-content-center align-items-center no-gutters">
                  <div class="col-sm-6 col-lg-4 g-bg-size-cover g-bg-pos-top-center g-min-height-400" data-bg-img-src="{{ root }}assets/img-temp/400x450/img3.jpg"></div>
                  <div class="col-sm-6 col-lg-4">
                    <div class="g-px-30 g-px-50--lg g-py-60">
                      <h3 class="h4 mb-1">David Case</h3>
                      <span class="d-block mb-4">Web Developer</span>
                      <p class="mb-4">I am a 32-year old man from Canada and I am passionate about everything related to web development. I strive to figure out the right solutions for your look to stand out amongst the rest.</p>

                      <!-- Social Icons -->
                      <ul class="list-inline mb-3">
                        <li class="list-inline-item g-mx-2">
                          <a class="u-icon-v1 u-icon-size--sm u-icon-slide-up--hover g-color-blue g-bg-blue-opacity-0_1 g-color-blue--hover rounded-circle" href="https://www.facebook.com/htmlstream">
                            <i class="g-font-size-default g-line-height-1 u-icon__elem-regular fa fa-facebook"></i>
                            <i class="g-font-size-default g-line-height-0_8 u-icon__elem-hover fa fa-facebook"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mx-2">
                          <a class="u-icon-v1 u-icon-size--sm u-icon-slide-up--hover g-color-cyan g-bg-cyan-opacity-0_1 g-color-cyan--hover rounded-circle" href="https://twitter.com/htmlstream">
                            <i class="g-font-size-default g-line-height-1 u-icon__elem-regular fa fa-twitter"></i>
                            <i class="g-font-size-default g-line-height-0_8 u-icon__elem-hover fa fa-twitter"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mx-2">
                          <a class="u-icon-v1 u-icon-size--sm u-icon-slide-up--hover g-color-bluegray g-bg-bluegray-opacity-0_1 g-color-bluegray--hover rounded-circle" href="https://github.com/htmlstream">
                            <i class="g-font-size-default g-line-height-1 u-icon__elem-regular fa fa-github"></i>
                            <i class="g-font-size-default g-line-height-0_8 u-icon__elem-hover fa fa-github"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mx-2">
                          <a class="u-icon-v1 u-icon-size--sm u-icon-slide-up--hover g-color-red g-bg-red-opacity-0_1 g-color-red--hover rounded-circle" href="https://dribbble.com/htmlstream">
                            <i class="g-font-size-default g-line-height-1 u-icon__elem-regular fa fa-dribbble"></i>
                            <i class="g-font-size-default g-line-height-0_8 u-icon__elem-hover fa fa-dribbble"></i>
                          </a>
                        </li>
                      </ul>
                      <!-- End Social Icons -->

                      <a class="u-link-v5 g-color-gray-dark-v4 g-color-primary--hover g-font-weight-700" href="#">See Projects</a>
                    </div>
                  </div>
                </div>
                <!-- End Team -->
              </div>

              <div class="js-slide">
                <!-- Team -->
                <div class="row justify-content-center align-items-center no-gutters">
                  <div class="col-sm-6 col-lg-4 g-bg-size-cover g-bg-pos-top-center g-min-height-400" data-bg-img-src="{{ root }}assets/img-temp/400x450/img4.jpg"></div>
                  <div class="col-sm-6 col-lg-4">
                    <div class="g-px-30 g-px-50--lg g-py-60">
                      <h3 class="h4 mb-1">Maria Olsson</h3>
                      <span class="d-block mb-4">Technical Director</span>
                      <p class="mb-4">I am an ambitious workaholic, but apart from that, pretty simple person. Whether it's branding, print, UI + UX I've got you covered.</p>

                      <!-- Social Icons -->
                      <ul class="list-inline mb-3">
                        <li class="list-inline-item g-mx-2">
                          <a class="u-icon-v1 u-icon-size--sm u-icon-slide-up--hover g-color-blue g-bg-blue-opacity-0_1 g-color-blue--hover rounded-circle" href="https://www.facebook.com/htmlstream">
                            <i class="g-font-size-default g-line-height-1 u-icon__elem-regular fa fa-facebook"></i>
                            <i class="g-font-size-default g-line-height-0_8 u-icon__elem-hover fa fa-facebook"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mx-2">
                          <a class="u-icon-v1 u-icon-size--sm u-icon-slide-up--hover g-color-cyan g-bg-cyan-opacity-0_1 g-color-cyan--hover rounded-circle" href="https://twitter.com/htmlstream">
                            <i class="g-font-size-default g-line-height-1 u-icon__elem-regular fa fa-twitter"></i>
                            <i class="g-font-size-default g-line-height-0_8 u-icon__elem-hover fa fa-twitter"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mx-2">
                          <a class="u-icon-v1 u-icon-size--sm u-icon-slide-up--hover g-color-bluegray g-bg-bluegray-opacity-0_1 g-color-bluegray--hover rounded-circle" href="https://github.com/htmlstream">
                            <i class="g-font-size-default g-line-height-1 u-icon__elem-regular fa fa-github"></i>
                            <i class="g-font-size-default g-line-height-0_8 u-icon__elem-hover fa fa-github"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mx-2">
                          <a class="u-icon-v1 u-icon-size--sm u-icon-slide-up--hover g-color-red g-bg-red-opacity-0_1 g-color-red--hover rounded-circle" href="https://dribbble.com/htmlstream">
                            <i class="g-font-size-default g-line-height-1 u-icon__elem-regular fa fa-dribbble"></i>
                            <i class="g-font-size-default g-line-height-0_8 u-icon__elem-hover fa fa-dribbble"></i>
                          </a>
                        </li>
                      </ul>
                      <!-- End Social Icons -->

                      <a class="u-link-v5 g-color-gray-dark-v4 g-color-primary--hover g-font-weight-700" href="#">See Projects</a>
                    </div>
                  </div>
                </div>
                <!-- End Team -->
              </div>

              <div class="js-slide">
                <!-- Team -->
                <div class="row justify-content-center align-items-center no-gutters">
                  <div class="col-sm-6 col-lg-4 g-bg-size-cover g-bg-pos-top-center g-min-height-400" data-bg-img-src="{{ root }}assets/img-temp/400x450/img2.jpg"></div>
                  <div class="col-sm-6 col-lg-4">
                    <div class="g-px-30 g-px-50--lg g-py-60">
                      <h3 class="h4 mb-1">Tina Krueger</h3>
                      <span class="d-block mb-4">Lead Designer</span>
                      <p class="mb-4">I'm Tina Krueger, an excitable lead designer. I live with an intense passion for web development.</p>

                      <!-- Social Icons -->
                      <ul class="list-inline mb-3">
                        <li class="list-inline-item g-mx-2">
                          <a class="u-icon-v1 u-icon-size--sm u-icon-slide-up--hover g-color-blue g-bg-blue-opacity-0_1 g-color-blue--hover rounded-circle" href="https://www.facebook.com/htmlstream">
                            <i class="g-font-size-default g-line-height-1 u-icon__elem-regular fa fa-facebook"></i>
                            <i class="g-font-size-default g-line-height-0_8 u-icon__elem-hover fa fa-facebook"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mx-2">
                          <a class="u-icon-v1 u-icon-size--sm u-icon-slide-up--hover g-color-cyan g-bg-cyan-opacity-0_1 g-color-cyan--hover rounded-circle" href="https://twitter.com/htmlstream">
                            <i class="g-font-size-default g-line-height-1 u-icon__elem-regular fa fa-twitter"></i>
                            <i class="g-font-size-default g-line-height-0_8 u-icon__elem-hover fa fa-twitter"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mx-2">
                          <a class="u-icon-v1 u-icon-size--sm u-icon-slide-up--hover g-color-bluegray g-bg-bluegray-opacity-0_1 g-color-bluegray--hover rounded-circle" href="https://github.com/htmlstream">
                            <i class="g-font-size-default g-line-height-1 u-icon__elem-regular fa fa-github"></i>
                            <i class="g-font-size-default g-line-height-0_8 u-icon__elem-hover fa fa-github"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mx-2">
                          <a class="u-icon-v1 u-icon-size--sm u-icon-slide-up--hover g-color-red g-bg-red-opacity-0_1 g-color-red--hover rounded-circle" href="https://dribbble.com/htmlstream">
                            <i class="g-font-size-default g-line-height-1 u-icon__elem-regular fa fa-dribbble"></i>
                            <i class="g-font-size-default g-line-height-0_8 u-icon__elem-hover fa fa-dribbble"></i>
                          </a>
                        </li>
                      </ul>
                      <!-- End Social Icons -->

                      <a class="u-link-v5 g-color-gray-dark-v4 g-color-primary--hover g-font-weight-700" href="#">See Projects</a>
                    </div>
                  </div>
                </div>
                <!-- End Team -->
              </div>

              <div class="js-slide">
                <!-- Team -->
                <div class="row justify-content-center align-items-center no-gutters">
                  <div class="col-sm-6 col-lg-4 g-bg-size-cover g-bg-pos-top-center g-min-height-400" data-bg-img-src="{{ root }}assets/img-temp/400x450/img5.jpg"></div>
                  <div class="col-sm-6 col-lg-4">
                    <div class="g-px-30 g-px-50--lg g-py-60">
                      <h3 class="h4 mb-1">John Watson</h3>
                      <span class="d-block mb-4">Marketing Manager</span>
                      <p class="mb-4">Understanding who you are and what you want is my strategy for your brand. I am always figuring out ways to capture your vision, so people can get on board.</p>

                      <!-- Social Icons -->
                      <ul class="list-inline mb-3">
                        <li class="list-inline-item g-mx-2">
                          <a class="u-icon-v1 u-icon-size--sm u-icon-slide-up--hover g-color-blue g-bg-blue-opacity-0_1 g-color-blue--hover rounded-circle" href="https://www.facebook.com/htmlstream">
                            <i class="g-font-size-default g-line-height-1 u-icon__elem-regular fa fa-facebook"></i>
                            <i class="g-font-size-default g-line-height-0_8 u-icon__elem-hover fa fa-facebook"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mx-2">
                          <a class="u-icon-v1 u-icon-size--sm u-icon-slide-up--hover g-color-cyan g-bg-cyan-opacity-0_1 g-color-cyan--hover rounded-circle" href="https://twitter.com/htmlstream">
                            <i class="g-font-size-default g-line-height-1 u-icon__elem-regular fa fa-twitter"></i>
                            <i class="g-font-size-default g-line-height-0_8 u-icon__elem-hover fa fa-twitter"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mx-2">
                          <a class="u-icon-v1 u-icon-size--sm u-icon-slide-up--hover g-color-bluegray g-bg-bluegray-opacity-0_1 g-color-bluegray--hover rounded-circle" href="https://github.com/htmlstream">
                            <i class="g-font-size-default g-line-height-1 u-icon__elem-regular fa fa-github"></i>
                            <i class="g-font-size-default g-line-height-0_8 u-icon__elem-hover fa fa-github"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mx-2">
                          <a class="u-icon-v1 u-icon-size--sm u-icon-slide-up--hover g-color-red g-bg-red-opacity-0_1 g-color-red--hover rounded-circle" href="https://dribbble.com/htmlstream">
                            <i class="g-font-size-default g-line-height-1 u-icon__elem-regular fa fa-dribbble"></i>
                            <i class="g-font-size-default g-line-height-0_8 u-icon__elem-hover fa fa-dribbble"></i>
                          </a>
                        </li>
                      </ul>
                      <!-- End Social Icons -->

                      <a class="u-link-v5 g-color-gray-dark-v4 g-color-primary--hover g-font-weight-700" href="#">See Projects</a>
                    </div>
                  </div>
                </div>
                <!-- End Team -->
              </div>

              <div class="js-slide">
                <!-- Team -->
                <div class="row justify-content-center align-items-center no-gutters">
                  <div class="col-sm-6 col-lg-4 g-bg-size-cover g-bg-pos-top-center g-min-height-400" data-bg-img-src="{{ root }}assets/img-temp/400x450/img6.jpg"></div>
                  <div class="col-sm-6 col-lg-4">
                    <div class="g-px-30 g-px-50--lg g-py-60">
                      <h3 class="h4 mb-1">Monica Gaudy</h3>
                      <span class="d-block mb-4">Sales Manager</span>
                      <p class="mb-4">I am Monica and I aim high at being focused on building relationships with our clients and community.</p>

                      <!-- Social Icons -->
                      <ul class="list-inline mb-3">
                        <li class="list-inline-item g-mx-2">
                          <a class="u-icon-v1 u-icon-size--sm u-icon-slide-up--hover g-color-blue g-bg-blue-opacity-0_1 g-color-blue--hover rounded-circle" href="https://www.facebook.com/htmlstream">
                            <i class="g-font-size-default g-line-height-1 u-icon__elem-regular fa fa-facebook"></i>
                            <i class="g-font-size-default g-line-height-0_8 u-icon__elem-hover fa fa-facebook"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mx-2">
                          <a class="u-icon-v1 u-icon-size--sm u-icon-slide-up--hover g-color-cyan g-bg-cyan-opacity-0_1 g-color-cyan--hover rounded-circle" href="https://twitter.com/htmlstream">
                            <i class="g-font-size-default g-line-height-1 u-icon__elem-regular fa fa-twitter"></i>
                            <i class="g-font-size-default g-line-height-0_8 u-icon__elem-hover fa fa-twitter"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mx-2">
                          <a class="u-icon-v1 u-icon-size--sm u-icon-slide-up--hover g-color-bluegray g-bg-bluegray-opacity-0_1 g-color-bluegray--hover rounded-circle" href="https://github.com/htmlstream">
                            <i class="g-font-size-default g-line-height-1 u-icon__elem-regular fa fa-github"></i>
                            <i class="g-font-size-default g-line-height-0_8 u-icon__elem-hover fa fa-github"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mx-2">
                          <a class="u-icon-v1 u-icon-size--sm u-icon-slide-up--hover g-color-red g-bg-red-opacity-0_1 g-color-red--hover rounded-circle" href="https://dribbble.com/htmlstream">
                            <i class="g-font-size-default g-line-height-1 u-icon__elem-regular fa fa-dribbble"></i>
                            <i class="g-font-size-default g-line-height-0_8 u-icon__elem-hover fa fa-dribbble"></i>
                          </a>
                        </li>
                      </ul>
                      <!-- End Social Icons -->

                      <a class="u-link-v5 g-color-gray-dark-v4 g-color-primary--hover g-font-weight-700" href="#">See Projects</a>
                    </div>
                  </div>
                </div>
                <!-- End Team -->
              </div>
            </div>

            <div id="carouselCus4" class="js-carousel text-center u-carousel-v3 g-mx-minus-15"
                 data-infinite="true"
                 data-center-mode="true"
                 data-slides-show="5"
                 data-is-thumbs="true"
                 data-lazy-load="ondemand"
                 data-nav-for="#carouselCus3">
              <div class="js-slide g-opacity-1 g-cursor-pointer g-px-15">
                <img class="img-fluid mb-3" src="{{ root }}assets/img-temp/400x450/img1.jpg" alt="Image Description">
                <h3 class="h6 g-color-gray-dark-v4">Jessica Lisbon</h3>
              </div>

              <div class="js-slide g-opacity-1 g-cursor-pointer g-px-15">
                <img class="img-fluid mb-3" src="{{ root }}assets/img-temp/400x450/img3.jpg" alt="Image Description">
                <h3 class="h6 g-color-gray-dark-v4">David Case</h3>
              </div>

              <div class="js-slide g-opacity-1 g-cursor-pointer g-px-15">
                <img class="img-fluid mb-3" src="{{ root }}assets/img-temp/400x450/img4.jpg" alt="Image Description">
                <h3 class="h6 g-color-gray-dark-v4">Maria Olsson</h3>
              </div>

              <div class="js-slide g-opacity-1 g-cursor-pointer g-px-15">
                <img class="img-fluid mb-3" src="{{ root }}assets/img-temp/400x450/img2.jpg" alt="Image Description">
                <h3 class="h6 g-color-gray-dark-v4">Tina Krueger</h3>
              </div>

              <div class="js-slide g-opacity-1 g-cursor-pointer g-px-15">
                <img class="img-fluid mb-3" src="{{ root }}assets/img-temp/400x450/img5.jpg" alt="Image Description">
                <h3 class="h6 g-color-gray-dark-v4">John Watson</h3>
              </div>

              <div class="js-slide g-opacity-1 g-cursor-pointer g-px-15">
                <img class="img-fluid mb-3" src="{{ root }}assets/img-temp/400x450/img6.jpg" alt="Image Description">
                <h3 class="h6 g-color-gray-dark-v4">Monica Gaudy</h3>
              </div>
            </div>
            <!-- End Carousel -->
          </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('[class*="js-carousel"]');
              });
            </script>
          </div>
        </div>

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

      <!-- Team Blocks v10 -->
      <section class="g-bg-gray-light-v5 g-py-100">
        <div class="text-center g-mb-50">
          <h2 class="h4">Advanced Team Blocks
            <span class="g-color-primary g-ml-5">#10</span>
          </h2>
        </div>

        <div id="shortcode10">
          <div class="shortcode-html">
            <!-- Faculty Professors -->
            <div class="clearfix">
              <!-- Faculty Professors Carousel -->
              <div class="js-carousel"
                   data-infinite="true"
                   data-slides-show="3"
                   data-slides-scroll="1"
                   data-arrows-classes="u-icon-v3 g-width-45 g-height-45 g-absolute-centered--y g-color-white g-color-white--hover g-bg-black g-bg-primary--hover rounded g-pa-12"
                   data-arrow-left-classes="fa fa-angle-left g-left-40"
                   data-arrow-right-classes="fa fa-angle-right g-right-40"
                   data-center-mode="true"
                   data-center-padding="100px"
                   data-responsive='[{
                     "breakpoint": 992,
                     "settings": {
                       "slidesToShow": 2,
                       "centerPadding": 30
                     }
                   }, {
                     "breakpoint": 768,
                     "settings": {
                       "slidesToShow": 2,
                       "centerPadding": 30
                     }
                   }, {
                     "breakpoint": 554,
                     "settings": {
                       "slidesToShow": 1,
                       "centerPadding": 30
                     }
                   }]'>
                <!-- Faculty Professors -->
                <div class="js-slide u-block-hover g-pb-10 g-mx-15">
                  <div class="g-overflow-hidden">
                    <img class="img-fluid w-100 u-block-hover__main--zoom-v1 g-transition-0_5" src="{{ root }}assets/img-temp/400x500/img10.jpg" alt="Image Description">
                  </div>
                  <div class="u-shadow-v32 g-bg-white g-pa-30">
                    <h3 class="h3 g-font-weight-500 mb-1">Alex Teseira</h3>
                    <span class="d-block g-color-gray-dark-v5">Professor in Ecosystem Ecology</span>
                  </div>
                  <a class="u-link-v2" href="#"></a>
                </div>
                <!-- End Faculty Professors -->

                <!-- Faculty Professors -->
                <div class="js-slide u-block-hover g-pb-10 g-mx-15">
                  <div class="g-overflow-hidden">
                    <img class="img-fluid w-100 u-block-hover__main--zoom-v1 g-transition-0_5" src="{{ root }}assets/img-temp/400x500/img11.jpg" alt="Image Description">
                  </div>
                  <div class="u-shadow-v32 g-bg-white g-pa-30">
                    <h3 class="h3 g-font-weight-500 mb-1">Marina Rubapa</h3>
                    <span class="d-block g-color-gray-dark-v5">Associate Professor in Biology</span>
                  </div>
                  <a class="u-link-v2" href="#"></a>
                </div>
                <!-- End Faculty Professors -->

                <!-- Faculty Professors -->
                <div class="js-slide u-block-hover g-pb-10 g-mx-15">
                  <div class="g-overflow-hidden">
                    <img class="img-fluid w-100 u-block-hover__main--zoom-v1 g-transition-0_5" src="{{ root }}assets/img-temp/400x500/img12.jpg" alt="Image Description">
                  </div>
                  <div class="u-shadow-v32 g-bg-white g-pa-30">
                    <h3 class="h3 g-font-weight-500 mb-1">John Smith</h3>
                    <span class="d-block g-color-gray-dark-v5">Assistant Professor</span>
                  </div>
                  <a class="u-link-v2" href="#"></a>
                </div>
                <!-- End Faculty Professors -->

                <!-- Faculty Professors -->
                <div class="js-slide u-block-hover g-pb-10 g-mx-15">
                  <div class="g-overflow-hidden">
                    <img class="img-fluid w-100 u-block-hover__main--zoom-v1 g-transition-0_5" src="{{ root }}assets/img-temp/400x500/img13.jpg" alt="Image Description">
                  </div>
                  <div class="u-shadow-v32 g-bg-white g-pa-30">
                    <h3 class="h3 g-font-weight-500 mb-1">Samantha Fox</h3>
                    <span class="d-block g-color-gray-dark-v5">Professorship in Thoracic Surgery</span>
                  </div>
                  <a class="u-link-v2" href="#"></a>
                </div>
                <!-- End Faculty Professors -->

                <!-- Faculty Professors -->
                <div class="js-slide u-block-hover g-pb-10 g-mx-15">
                  <div class="g-overflow-hidden">
                    <img class="img-fluid w-100 u-block-hover__main--zoom-v1 g-transition-0_5" src="{{ root }}assets/img-temp/400x500/img14.jpg" alt="Image Description">
                  </div>
                  <div class="u-shadow-v32 g-bg-white g-pa-30">
                    <h3 class="h3 g-font-weight-500 mb-1">James Novel</h3>
                    <span class="d-block g-color-gray-dark-v5">Teaching Assistant Professor</span>
                  </div>
                  <a class="u-link-v2" href="#"></a>
                </div>
                <!-- End Faculty Professors -->

                <!-- Faculty Professors -->
                <div class="js-slide u-block-hover g-pb-10 g-mx-15">
                  <div class="g-overflow-hidden">
                    <img class="img-fluid w-100 u-block-hover__main--zoom-v1 g-transition-0_5" src="{{ root }}assets/img-temp/400x500/img15.jpg" alt="Image Description">
                  </div>
                  <div class="u-shadow-v32 g-bg-white g-pa-30">
                    <h3 class="h3 g-font-weight-500 mb-1">George Freeman</h3>
                    <span class="d-block g-color-gray-dark-v5">Health Educator</span>
                  </div>
                  <a class="u-link-v2" href="#"></a>
                </div>
                <!-- End Faculty Professors -->
              </div>
            </div>
            <!-- End Faculty Professors -->
          </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('[class*="js-carousel"]');

                $('#js-carousel-sync-for').on('init', function (event, slick) {
                  $(slick.$slides).css('height', 'auto');
                });

                $('#js-carousel-sync-nav').on('init', function (event, slick) {
                  $(slick.$slides).css('height', 'auto');
                });
              });
            </script>
          </div>
        </div>

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

    {% include "html/assets/include/nunjucks/partials/blocks/cta/cta-main.njk" %}

    {% include "html/assets/include/nunjucks/partials/blocks/footers/footer-main.njk" %}
    {% include "html/assets/include/nunjucks/partials/blocks/footers/copyright-footer-main.njk" %}
    {% include "html/assets/include/nunjucks/partials/blocks/go-to-top/go-to-top-1.njk" %}
  </main>

  {% include "html/assets/include/nunjucks/partials/blocks/modals/modal-markup.njk" %}

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

  <!-- JS Implementing Plugins -->
  <script src="{{ root }}assets/vendor/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.min.js"></script>
  <script src="{{ root }}assets/vendor/cubeportfolio-full/cubeportfolio/js/jquery.cubeportfolio.min.js"></script>

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

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

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

  <!-- JS Unify -->
  <script src="{{ root }}assets/js/hs.core.js"></script>

  <script src="{{ root }}assets/js/components/hs.header.js"></script>
  <script src="{{ root }}assets/js/helpers/hs.hamburgers.js"></script>
  <script src="{{ root }}assets/js/components/hs.header-side.js"></script>

  <script src="{{ root }}assets/js/components/hs.carousel.js"></script>
  <script src="{{ root }}assets/js/components/hs.cubeportfolio.js"></script>

  <script src="{{ root }}assets/js/components/hs.autocomplete-local-search.js"></script>
  <script src="{{ root }}assets/style-switcher/vendor/cookiejs/jquery.cookie.js"></script>
  <script src="{{ root }}assets/js/helpers/hs.shortcode-filter.js"></script>

  <script src="{{ root }}assets/js/components/hs.go-to.js"></script>

  {% include "html/assets/include/nunjucks/partials/js/js-show-code.njk" %}

  <!-- JS Custom -->
  <script src="{{ root }}assets/js/custom.js"></script>

  <!-- JS Plugins Init. -->
  <script>
    $(document).on('ready', function () {
      // initialization of go to
      $.HSCore.components.HSGoTo.init('.js-go-to');

      // initialization of carousel
      $.HSCore.components.HSCarousel.init('[class*="js-carousel"]');

      $('#js-carousel-sync-for').on('init', function (event, slick) {
        $(slick.$slides).css('height', 'auto');
      });

      $('#js-carousel-sync-nav').on('init', function (event, slick) {
        $(slick.$slides).css('height', 'auto');
      });
    });

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

      // initialization of autocomplet
      $.HSCore.components.HSLocalSearchAutocomplete.init('#u-sidebar-navigation__search-autocomplete');

      // initialization of HSMegaMenu plugin
      $('.js-mega-menu').HSMegaMenu({
        event: 'hover',
        pageContainer: $('.container'),
        breakpoint: 991
      });

      // initialization of cubeportfolio
      $.HSCore.components.HSCubeportfolio.init('.cbp');
    });
  </script>
</body>
</html>
