{# Settings #}
{% set root = "../../" %}
{% set mainNavActive_1 = "shortcodes" %}
{% set sidebarNavActive_1 = "shortcode-blocks-team" %}
{% set title = "Team Blocks" %}

{% include "html/assets/include/nunjucks/partials/head.njk" %}
{% include "html/assets/include/nunjucks/partials/core-fonts.njk" %}
{% include "html/assets/include/nunjucks/partials/core-css.njk" %}
{% include "html/assets/include/nunjucks/partials/core-icons.njk" %}
{% include "html/assets/include/nunjucks/partials/css/css-dzsparallaxer.njk" %}
<link rel="stylesheet" href="{{ root }}assets/vendor/animate.css">
<link rel="stylesheet" href="{{ root }}assets/vendor/jquery-ui/themes/base/jquery-ui.min.css">
<link rel="stylesheet" href="{{ root }}assets/vendor/hs-megamenu/src/hs.megamenu.css">
<link rel="stylesheet" href="{{ root }}assets/vendor/hamburgers/hamburgers.min.css">

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

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

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

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

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

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

          <div id="shortcode1">
            <div class="shortcode-html">
              <!-- Team Block -->
              <div class="row">
                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <!-- Team Block -->
                  <div class="u-info-v1-2">
                    <!-- Figure -->
                    <figure class="u-block-hover">
                      <!-- Figure Image -->
                      <img class="w-100" src="{{ root }}assets/img-temp/400x450/img1.jpg" alt="Image Description">
                      <!-- End Figure Image-->

                      <!-- Figure Caption -->
                      <figcaption class="u-block-hover__additional--fade g-bg-primary-opacity-0_9 g-pa-30">
                        <div class="u-block-hover__additional--fade u-block-hover__additional--fade-down g-flex-middle">
                          <!-- Figure Social Icons -->
                          <ul class="list-inline text-center g-flex-middle-item">
                            <li class="list-inline-item align-middle g-mx-3">
                              <a class="u-icon-v2 u-icon-size--sm g-font-size-default g-color-white g-color-primary--hover g-brd-white g-bg-white rounded-circle" href="#">
                                <i class="fa fa-facebook"></i>
                              </a>
                            </li>
                            <li class="list-inline-item align-middle g-mx-3">
                              <a class="u-icon-v2 u-icon-size--sm g-font-size-default g-color-primary g-brd-white g-bg-white rounded-circle" href="#">
                                <i class="fa fa-twitter"></i>
                              </a>
                            </li>
                            <li class="list-inline-item align-middle g-mx-3">
                              <a class="u-icon-v2 u-icon-size--sm g-font-size-default g-color-white g-color-primary--hover g-brd-white g-bg-white rounded-circle" href="#">
                                <i class="fa fa-google-plus"></i>
                              </a>
                            </li>
                          </ul>
                          <!-- End Figure Social Icons -->
                        </div>
                      </figcaption>
                      <!-- End Figure Caption -->
                    </figure>
                    <!-- End Figure -->

                    <!-- Figure Info -->
                    <div class="g-bg-white g-py-25">
                      <div class="g-mb-15">
                        <h4 class="h5 g-color-black g-mb-5">Maria Olsson</h4>
                        <em class="d-block u-info-v1-2__item g-font-style-normal g-font-size-11 text-uppercase g-color-primary">Technical Director</em>
                      </div>
                      <p>I am an ambitious workaholic, but apart from that, pretty simple person.</p>
                    </div>
                    <!-- End Figure Info-->
                  </div>
                  <!-- End Team Block -->
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <!-- Team Block -->
                  <div class="u-info-v1-2">
                    <!-- Figure -->
                    <figure class="u-block-hover">
                      <!-- Figure Image -->
                      <img class="w-100" src="{{ root }}assets/img-temp/400x450/img2.jpg" alt="Image Description">
                      <!-- End Figure Image-->

                      <!-- Figure Caption -->
                      <figcaption class="u-block-hover__additional--fade g-bg-primary-opacity-0_9 g-pa-30">
                        <div class="u-block-hover__additional--fade u-block-hover__additional--fade-down g-flex-middle">
                          <!-- Figure Social Icons -->
                          <ul class="list-inline text-center g-flex-middle-item">
                            <li class="list-inline-item align-middle g-mx-3">
                              <a class="u-icon-v2 u-icon-size--sm g-font-size-default g-color-white g-color-primary--hover g-brd-white g-bg-white rounded-circle" href="#">
                                <i class="fa fa-facebook"></i>
                              </a>
                            </li>
                            <li class="list-inline-item align-middle g-mx-3">
                              <a class="u-icon-v2 u-icon-size--sm g-font-size-default g-color-primary g-brd-white g-bg-white rounded-circle" href="#">
                                <i class="fa fa-twitter"></i>
                              </a>
                            </li>
                            <li class="list-inline-item align-middle g-mx-3">
                              <a class="u-icon-v2 u-icon-size--sm g-font-size-default g-color-white g-color-primary--hover g-brd-white g-bg-white rounded-circle" href="#">
                                <i class="fa fa-google-plus"></i>
                              </a>
                            </li>
                          </ul>
                          <!-- End Figure Social Icons -->
                        </div>
                      </figcaption>
                      <!-- End Figure Caption -->
                    </figure>
                    <!-- End Figure -->

                    <!-- Figure Info -->
                    <div class="g-bg-white g-py-25">
                      <div class="g-mb-15">
                        <h4 class="h5 g-color-black g-mb-5">Tina Krueger</h4>
                        <em class="d-block u-info-v1-2__item g-font-style-normal g-font-size-11 text-uppercase g-color-primary">Lead Designer</em>
                      </div>
                      <p>I am an ambitious workaholic, but apart from that, pretty simple person.</p>
                    </div>
                    <!-- End Figure Info-->
                  </div>
                  <!-- End Team Block -->
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <!-- Team Block -->
                  <div class="u-info-v1-2">
                    <!-- Figure -->
                    <figure class="u-block-hover">
                      <!-- Figure Image -->
                      <img class="w-100" src="{{ root }}assets/img-temp/400x450/img3.jpg" alt="Image Description">
                      <!-- End Figure Image-->

                      <!-- Figure Caption -->
                      <figcaption class="u-block-hover__additional--fade g-bg-primary-opacity-0_9 g-pa-30">
                        <div class="u-block-hover__additional--fade u-block-hover__additional--fade-down g-flex-middle">
                          <!-- Figure Social Icons -->
                          <ul class="list-inline text-center g-flex-middle-item">
                            <li class="list-inline-item align-middle g-mx-3">
                              <a class="u-icon-v2 u-icon-size--sm g-font-size-default g-color-white g-color-primary--hover g-brd-white g-bg-white rounded-circle" href="#">
                                <i class="fa fa-facebook"></i>
                              </a>
                            </li>
                            <li class="list-inline-item align-middle g-mx-3">
                              <a class="u-icon-v2 u-icon-size--sm g-font-size-default g-color-primary g-brd-white g-bg-white rounded-circle" href="#">
                                <i class="fa fa-twitter"></i>
                              </a>
                            </li>
                            <li class="list-inline-item align-middle g-mx-3">
                              <a class="u-icon-v2 u-icon-size--sm g-font-size-default g-color-white g-color-primary--hover g-brd-white g-bg-white rounded-circle" href="#">
                                <i class="fa fa-google-plus"></i>
                              </a>
                            </li>
                          </ul>
                          <!-- End Figure Social Icons -->
                        </div>
                      </figcaption>
                      <!-- End Figure Caption -->
                    </figure>
                    <!-- End Figure -->

                    <!-- Figure Info -->
                    <div class="g-bg-white g-py-25">
                      <div class="g-mb-15">
                        <h4 class="h5 g-color-black g-mb-5">David Case</h4>
                        <em class="d-block u-info-v1-2__item g-font-style-normal g-font-size-11 text-uppercase g-color-primary">Web Developer</em>
                      </div>
                      <p>I am an ambitious workaholic, but apart from that, pretty simple person.</p>
                    </div>
                    <!-- End Figure Info-->
                  </div>
                  <!-- End Team Block -->
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <!-- Team Block -->
                  <div class="u-info-v1-2">
                    <!-- Figure -->
                    <figure class="u-block-hover">
                      <!-- Figure Image -->
                      <img class="w-100" src="{{ root }}assets/img-temp/400x450/img4.jpg" alt="Image Description">
                      <!-- End Figure Image-->

                      <!-- Figure Caption -->
                      <figcaption class="u-block-hover__additional--fade g-bg-primary-opacity-0_9 g-pa-30">
                        <div class="u-block-hover__additional--fade u-block-hover__additional--fade-down g-flex-middle">
                          <!-- Figure Social Icons -->
                          <ul class="list-inline text-center g-flex-middle-item">
                            <li class="list-inline-item align-middle g-mx-3">
                              <a class="u-icon-v2 u-icon-size--sm g-font-size-default g-color-white g-color-primary--hover g-brd-white g-bg-white rounded-circle" href="#">
                                <i class="fa fa-facebook"></i>
                              </a>
                            </li>
                            <li class="list-inline-item align-middle g-mx-3">
                              <a class="u-icon-v2 u-icon-size--sm g-font-size-default g-color-primary g-brd-white g-bg-white rounded-circle" href="#">
                                <i class="fa fa-twitter"></i>
                              </a>
                            </li>
                            <li class="list-inline-item align-middle g-mx-3">
                              <a class="u-icon-v2 u-icon-size--sm g-font-size-default g-color-white g-color-primary--hover g-brd-white g-bg-white rounded-circle" href="#">
                                <i class="fa fa-google-plus"></i>
                              </a>
                            </li>
                          </ul>
                          <!-- End Figure Social Icons -->
                        </div>
                      </figcaption>
                      <!-- End Figure Caption -->
                    </figure>
                    <!-- End Figure -->

                    <!-- Figure Info -->
                    <div class="g-bg-white g-py-25">
                      <div class="g-mb-15">
                        <h4 class="h5 g-color-black g-mb-5">Sara Lisbon</h4>
                        <em class="d-block u-info-v1-2__item g-font-style-normal g-font-size-11 text-uppercase g-color-primary">Support Manager</em>
                      </div>
                      <p>I am an ambitious workaholic, but apart from that, pretty simple person.</p>
                    </div>
                    <!-- End Figure Info-->
                  </div>
                  <!-- End Team Block -->
                </div>
              </div>
              <!-- End Team Block -->
            </div>
          </div>

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

      <!-- Team Blocks v2 -->
      <section class="g-bg-secondary g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">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="row">
                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <!-- Team Block -->
                  <div class="u-info-v6-1">
                    <!-- Figure -->
                    <figure class="u-block-hover">
                      <!-- Figure Image -->
                      <img class="w-100" src="{{ root }}assets/img-temp/400x450/img1.jpg" alt="Image Description">
                      <!-- End Figure Image-->

                      <!-- Figure Caption -->
                      <figcaption class="u-block-hover__additional--fade g-bg-primary-opacity-0_9 g-pa-30">
                        <div class="u-block-hover__additional--fade u-block-hover__additional--fade-down g-flex-middle">
                          <!-- Figure Social Icons -->
                          <ul class="list-inline text-center g-flex-middle-item">
                            <li class="list-inline-item align-middle g-mx-3">
                              <a class="u-icon-v2 u-icon-size--sm g-font-size-default g-color-white g-color-black--hover g-brd-white g-bg-white--hover rounded-circle" href="#">
                                <i class="fa fa-facebook"></i>
                              </a>
                            </li>
                            <li class="list-inline-item align-middle g-mx-3">
                              <a class="u-icon-v2 u-icon-size--sm g-font-size-default g-color-white g-color-black--hover g-brd-white g-bg-white--hover rounded-circle" href="#">
                                <i class="fa fa-twitter"></i>
                              </a>
                            </li>
                            <li class="list-inline-item align-middle g-mx-3">
                              <a class="u-icon-v2 u-icon-size--sm g-font-size-default g-color-white g-color-black--hover g-brd-white g-bg-white--hover rounded-circle" href="#">
                                <i class="fa fa-google-plus"></i>
                              </a>
                            </li>
                          </ul>
                          <!-- End Figure Social Icons -->
                        </div>
                      </figcaption>
                      <!-- End Figure Caption -->
                    </figure>
                    <!-- End Figure -->

                    <!-- Figure Info -->
                    <div class="g-bg-white g-pa-25">
                      <div class="g-mb-15">
                        <h4 class="h5 g-color-black g-mb-5">Maria Olsson</h4>
                        <em class="d-block u-info-v6-1__item g-font-style-normal g-font-size-11 text-uppercase g-color-primary">Technical Director</em>
                      </div>
                      <ul class="list-unstyled g-color-gray-dark-v5">
                        <li class="g-font-size-12">
                          <strong>Email:</strong> brown@gmail.com
                        </li>
                        <li class="g-font-size-12">
                          <strong>Mobile:</strong> +01 (1) 222 3344 5555
                        </li>
                      </ul>
                    </div>
                    <!-- End Figure Info-->
                  </div>
                  <!-- End Team Block -->
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <!-- Team Block -->
                  <div class="u-info-v6-1">
                    <!-- Figure -->
                    <figure class="u-block-hover">
                      <!-- Figure Image -->
                      <img class="w-100" src="{{ root }}assets/img-temp/400x450/img2.jpg" alt="Image Description">
                      <!-- End Figure Image-->

                      <!-- Figure Caption -->
                      <figcaption class="u-block-hover__additional--fade g-bg-primary-opacity-0_9 g-pa-30">
                        <div class="u-block-hover__additional--fade u-block-hover__additional--fade-down g-flex-middle">
                          <!-- Figure Social Icons -->
                          <ul class="list-inline text-center g-flex-middle-item">
                            <li class="list-inline-item align-middle g-mx-3">
                              <a class="u-icon-v2 u-icon-size--sm g-font-size-default g-color-white g-color-black--hover g-brd-white g-bg-white--hover rounded-circle" href="#">
                                <i class="fa fa-facebook"></i>
                              </a>
                            </li>
                            <li class="list-inline-item align-middle g-mx-3">
                              <a class="u-icon-v2 u-icon-size--sm g-font-size-default g-color-white g-color-black--hover g-brd-white g-bg-white--hover rounded-circle" href="#">
                                <i class="fa fa-twitter"></i>
                              </a>
                            </li>
                            <li class="list-inline-item align-middle g-mx-3">
                              <a class="u-icon-v2 u-icon-size--sm g-font-size-default g-color-white g-color-black--hover g-brd-white g-bg-white--hover rounded-circle" href="#">
                                <i class="fa fa-google-plus"></i>
                              </a>
                            </li>
                          </ul>
                          <!-- End Figure Social Icons -->
                        </div>
                      </figcaption>
                      <!-- End Figure Caption -->
                    </figure>
                    <!-- End Figure -->

                    <!-- Figure Info -->
                    <div class="g-bg-white g-pa-25">
                      <div class="g-mb-15">
                        <h4 class="h5 g-color-black g-mb-5">Tina Krueger</h4>
                        <em class="d-block u-info-v6-1__item g-font-style-normal g-font-size-11 text-uppercase g-color-primary">Lead Designer</em>
                      </div>
                      <ul class="list-unstyled g-color-gray-dark-v5">
                        <li class="g-font-size-12">
                          <strong>Email:</strong> krueger@gmail.com
                        </li>
                        <li class="g-font-size-12">
                          <strong>Mobile:</strong> +01 (1) 222 3344 5555
                        </li>
                      </ul>
                    </div>
                    <!-- End Figure Info-->
                  </div>
                  <!-- End Team Block -->
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <!-- Team Block -->
                  <div class="u-info-v6-1">
                    <!-- Figure -->
                    <figure class="u-block-hover">
                      <!-- Figure Image -->
                      <img class="w-100" src="{{ root }}assets/img-temp/400x450/img3.jpg" alt="Image Description">
                      <!-- End Figure Image-->

                      <!-- Figure Caption -->
                      <figcaption class="u-block-hover__additional--fade g-bg-primary-opacity-0_9 g-pa-30">
                        <div class="u-block-hover__additional--fade u-block-hover__additional--fade-down g-flex-middle">
                          <!-- Figure Social Icons -->
                          <ul class="list-inline text-center g-flex-middle-item">
                            <li class="list-inline-item align-middle g-mx-3">
                              <a class="u-icon-v2 u-icon-size--sm g-font-size-default g-color-white g-color-black--hover g-brd-white g-bg-white--hover rounded-circle" href="#">
                                <i class="fa fa-facebook"></i>
                              </a>
                            </li>
                            <li class="list-inline-item align-middle g-mx-3">
                              <a class="u-icon-v2 u-icon-size--sm g-font-size-default g-color-white g-color-black--hover g-brd-white g-bg-white--hover rounded-circle" href="#">
                                <i class="fa fa-twitter"></i>
                              </a>
                            </li>
                            <li class="list-inline-item align-middle g-mx-3">
                              <a class="u-icon-v2 u-icon-size--sm g-font-size-default g-color-white g-color-black--hover g-brd-white g-bg-white--hover rounded-circle" href="#">
                                <i class="fa fa-google-plus"></i>
                              </a>
                            </li>
                          </ul>
                          <!-- End Figure Social Icons -->
                        </div>
                      </figcaption>
                      <!-- End Figure Caption -->
                    </figure>
                    <!-- End Figure -->

                    <!-- Figure Info -->
                    <div class="g-bg-white g-pa-25">
                      <div class="g-mb-15">
                        <h4 class="h5 g-color-black g-mb-5">David Case</h4>
                        <em class="d-block u-info-v6-1__item g-font-style-normal g-font-size-11 text-uppercase g-color-primary">Web Developer</em>
                      </div>
                      <ul class="list-unstyled">
                        <li class="g-font-size-12 g-color-gray-dark-v5">
                          <strong>Email:</strong> case@gmail.com
                        </li>
                        <li class="g-font-size-12 g-color-gray-dark-v5">
                          <strong>Mobile:</strong> +01 (1) 222 3344 5555
                        </li>
                      </ul>
                    </div>
                    <!-- End Figure Info-->
                  </div>
                  <!-- End Team Block -->
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <!-- Team Block -->
                  <div class="u-info-v6-1">
                    <!-- Figure -->
                    <figure class="u-block-hover">
                      <!-- Figure Image -->
                      <img class="w-100" src="{{ root }}assets/img-temp/400x450/img4.jpg" alt="Image Description">
                      <!-- End Figure Image-->

                      <!-- Figure Caption -->
                      <figcaption class="u-block-hover__additional--fade g-bg-primary-opacity-0_9 g-pa-30">
                        <div class="u-block-hover__additional--fade u-block-hover__additional--fade-down g-flex-middle">
                          <!-- Figure Social Icons -->
                          <ul class="list-inline text-center g-flex-middle-item">
                            <li class="list-inline-item align-middle g-mx-3">
                              <a class="u-icon-v2 u-icon-size--sm g-font-size-default g-color-white g-color-black--hover g-brd-white g-bg-white--hover rounded-circle" href="#">
                                <i class="fa fa-facebook"></i>
                              </a>
                            </li>
                            <li class="list-inline-item align-middle g-mx-3">
                              <a class="u-icon-v2 u-icon-size--sm g-font-size-default g-color-white g-color-black--hover g-brd-white g-bg-white--hover rounded-circle" href="#">
                                <i class="fa fa-twitter"></i>
                              </a>
                            </li>
                            <li class="list-inline-item align-middle g-mx-3">
                              <a class="u-icon-v2 u-icon-size--sm g-font-size-default g-color-white g-color-black--hover g-brd-white g-bg-white--hover rounded-circle" href="#">
                                <i class="fa fa-google-plus"></i>
                              </a>
                            </li>
                          </ul>
                          <!-- End Figure Social Icons -->
                        </div>
                      </figcaption>
                      <!-- End Figure Caption -->
                    </figure>
                    <!-- End Figure -->

                    <!-- Figure Info -->
                    <div class="g-bg-white g-pa-25">
                      <div class="g-mb-15">
                        <h4 class="h5 g-color-black g-mb-5">Sara Lisbon</h4>
                        <em class="d-block u-info-v6-1__item g-font-style-normal g-font-size-11 text-uppercase g-color-primary">Support Manager</em>
                      </div>
                      <ul class="list-unstyled">
                        <li class="g-font-size-12 g-color-gray-dark-v5">
                          <strong>Email:</strong> lisbon@gmail.com
                        </li>
                        <li class="g-font-size-12 g-color-gray-dark-v5">
                          <strong>Mobile:</strong> +01 (1) 222 3344 5555
                        </li>
                      </ul>
                    </div>
                    <!-- End Figure Info-->
                  </div>
                  <!-- End Team Block -->
                </div>
              </div>
              <!-- End Team Block -->
            </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">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="row">
                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <!-- Team Block -->
                  <figure class="g-bg-blue g-pa-5">
                    <!-- Figure Image -->
                    <img class="w-100" src="{{ root }}assets/img-temp/400x450/img1.jpg" alt="Image Description">
                    <!-- End Figure Image-->

                    <!-- Figure Info -->
                    <div class="text-center g-bg-blue g-px-10 g-py-20">
                      <h4 class="h5 g-color-blue-dark-v1 g-mb-5">Maria Olsson</h4>
                      <em class="d-block g-font-style-normal g-font-size-11 g-font-weight-600 text-uppercase g-color-white-opacity-0_7">Technical Director</em>
                    </div>
                    <!-- End Figure Info-->

                    <!-- Figure Social Icons -->
                    <ul class="list-inline text-center">
                      <li class="list-inline-item align-middle u-shadow-v18 g-mx-3">
                        <a class="u-icon-v2 u-icon-size--xs g-color-white g-color-blue--hover g-bg-white--hover rounded-circle" href="#">
                          <i class="fa fa-facebook"></i>
                        </a>
                      </li>
                      <li class="list-inline-item align-middle u-shadow-v18 g-mx-3">
                        <a class="u-icon-v2 u-icon-size--xs g-color-white g-color-blue--hover g-bg-white--hover rounded-circle" href="#">
                          <i class="fa fa-twitter"></i>
                        </a>
                      </li>
                      <li class="list-inline-item align-middle u-shadow-v18 g-mx-3">
                        <a class="u-icon-v2 u-icon-size--xs g-color-white g-color-blue--hover g-bg-white--hover rounded-circle" href="#">
                          <i class="fa fa-google-plus"></i>
                        </a>
                      </li>
                    </ul>
                    <!-- End Figure Social Icons -->
                  </figure>
                  <!-- End Team Block -->
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <!-- Team Block -->
                  <figure class="g-bg-pink g-pa-5">
                    <!-- Figure Image -->
                    <img class="w-100" src="{{ root }}assets/img-temp/400x450/img2.jpg" alt="Image Description">
                    <!-- End Figure Image-->

                    <!-- Figure Info -->
                    <div class="text-center g-bg-pink g-px-10 g-py-20">
                      <h4 class="h5 g-color-pink-dark-v1 g-mb-5">Tina Krueger</h4>
                      <em class="d-block g-font-style-normal g-font-size-11 g-font-weight-600 text-uppercase g-color-white-opacity-0_7">Lead Designer</em>
                    </div>
                    <!-- End Figure Info-->

                    <!-- Figure Social Icons -->
                    <ul class="list-inline text-center">
                      <li class="list-inline-item align-middle u-shadow-v18 g-mx-3">
                        <a class="u-icon-v2 u-icon-size--xs g-color-white g-color-pink--hover g-bg-white--hover rounded-circle" href="#">
                          <i class="fa fa-facebook"></i>
                        </a>
                      </li>
                      <li class="list-inline-item align-middle u-shadow-v18 g-mx-3">
                        <a class="u-icon-v2 u-icon-size--xs g-color-white g-color-pink--hover g-bg-white--hover rounded-circle" href="#">
                          <i class="fa fa-twitter"></i>
                        </a>
                      </li>
                      <li class="list-inline-item align-middle u-shadow-v18 g-mx-3">
                        <a class="u-icon-v2 u-icon-size--xs g-color-white g-color-pink--hover g-bg-white--hover rounded-circle" href="#">
                          <i class="fa fa-google-plus"></i>
                        </a>
                      </li>
                    </ul>
                    <!-- End Figure Social Icons -->
                  </figure>
                  <!-- End Team Block -->
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <!-- Team Block -->
                  <figure class="g-bg-aqua g-pa-5">
                    <!-- Figure Image -->
                    <img class="w-100" src="{{ root }}assets/img-temp/400x450/img3.jpg" alt="Image Description">
                    <!-- End Figure Image-->

                    <!-- Figure Info -->
                    <div class="text-center g-bg-aqua g-px-10 g-py-20">
                      <h4 class="h5 g-color-aqua-dark-v1 g-mb-5">David Case</h4>
                      <em class="d-block g-font-style-normal g-font-size-11 g-font-weight-600 text-uppercase g-color-white-opacity-0_7">Web Developer</em>
                    </div>
                    <!-- End Figure Info-->

                    <!-- Figure Social Icons -->
                    <ul class="list-inline text-center">
                      <li class="list-inline-item align-middle u-shadow-v18 g-mx-3">
                        <a class="u-icon-v2 u-icon-size--xs g-color-white g-color-aqua--hover g-bg-white--hover rounded-circle" href="#">
                          <i class="fa fa-facebook"></i>
                        </a>
                      </li>
                      <li class="list-inline-item align-middle u-shadow-v18 g-mx-3">
                        <a class="u-icon-v2 u-icon-size--xs g-color-white g-color-aqua--hover g-bg-white--hover rounded-circle" href="#">
                          <i class="fa fa-twitter"></i>
                        </a>
                      </li>
                      <li class="list-inline-item align-middle u-shadow-v18 g-mx-3">
                        <a class="u-icon-v2 u-icon-size--xs g-color-white g-color-aqua--hover g-bg-white--hover rounded-circle" href="#">
                          <i class="fa fa-google-plus"></i>
                        </a>
                      </li>
                    </ul>
                    <!-- End Figure Social Icons -->
                  </figure>
                  <!-- End Team Block -->
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <!-- Team Block -->
                  <figure class="g-bg-purple g-pa-5">
                    <!-- Figure Image -->
                    <img class="w-100" src="{{ root }}assets/img-temp/400x450/img4.jpg" alt="Image Description">
                    <!-- End Figure Image-->

                    <!-- Figure Info -->
                    <div class="text-center g-bg-purple g-px-10 g-py-20">
                      <h4 class="h5 g-color-purple-dark-v1 g-mb-5">Sara Lisbon</h4>
                      <em class="d-block g-font-style-normal g-font-size-11 g-font-weight-600 text-uppercase g-color-white-opacity-0_7">Support Manager</em>
                    </div>
                    <!-- End Figure Info-->

                    <!-- Figure Social Icons -->
                    <ul class="list-inline text-center">
                      <li class="list-inline-item align-middle u-shadow-v18 g-mx-3">
                        <a class="u-icon-v2 u-icon-size--xs g-color-white g-color-purple--hover g-bg-white--hover rounded-circle" href="#">
                          <i class="fa fa-facebook"></i>
                        </a>
                      </li>
                      <li class="list-inline-item align-middle u-shadow-v18 g-mx-3">
                        <a class="u-icon-v2 u-icon-size--xs g-color-white g-color-purple--hover g-bg-white--hover rounded-circle" href="#">
                          <i class="fa fa-twitter"></i>
                        </a>
                      </li>
                      <li class="list-inline-item align-middle u-shadow-v18 g-mx-3">
                        <a class="u-icon-v2 u-icon-size--xs g-color-white g-color-purple--hover g-bg-white--hover rounded-circle" href="#">
                          <i class="fa fa-google-plus"></i>
                        </a>
                      </li>
                    </ul>
                    <!-- End Figure Social Icons -->
                  </figure>
                  <!-- End Team Block -->
                </div>
              </div>
              <!-- End Team Block -->
            </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-secondary g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Team Blocks
              <span class="g-color-primary g-ml-5">#04</span>
            </h2>
          </div>

          <div id="shortcode4">
            <div class="shortcode-html">
              <!-- Team Block -->
              <div class="row">
                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <!-- Team Block -->
                  <figure>
                    <!-- Figure Image -->
                    <img class="w-100" src="{{ root }}assets/img-temp/400x450/img1.jpg" alt="Image Description">
                    <!-- End Figure Image-->

                    <!-- Figure Info -->
                    <div class="text-center g-bg-white g-pa-25">
                      <div class="g-mb-15">
                        <h4 class="h5 g-color-black g-mb-5">Maria Olsson</h4>
                        <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary">Technical Director</em>
                      </div>
                      <p>I am an ambitious workaholic, but apart from that, pretty simple person.</p>

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

                      <!-- Figure Social Icons -->
                      <ul class="list-inline mb-0">
                        <li class="list-inline-item g-mx-2">
                          <a class="u-icon-v2 u-icon-size--xs g-color-facebook g-brd-facebook g-color-white--hover g-bg-facebook--hover rounded-circle" href="#" data-toggle="tooltip" data-original-title="Facebook">
                            <i class="fa fa-facebook"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mx-2">
                          <a class="u-icon-v2 u-icon-size--xs g-color-twitter g-brd-twitter g-color-white--hover g-bg-twitter--hover rounded-circle" href="#" data-toggle="tooltip" data-original-title="Twitter"
                          >
                            <i class="fa fa-twitter"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mx-2">
                          <a class="u-icon-v2 u-icon-size--xs g-color-google-plus g-brd-google-plus g-color-white--hover g-bg-google-plus--hover rounded-circle" href="#" data-toggle="tooltip" data-original-title="Google Plus"
                          >
                            <i class="fa fa-google-plus"></i>
                          </a>
                        </li>
                      </ul>
                      <!-- End Figure Social Icons -->
                    </div>
                    <!-- End Figure Info-->
                  </figure>
                  <!-- End Figure -->
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <!-- Team Block -->
                  <figure>
                    <!-- Figure Image -->
                    <img class="w-100" src="{{ root }}assets/img-temp/400x450/img2.jpg" alt="Image Description">
                    <!-- End Figure Image-->

                    <!-- Figure Info -->
                    <div class="text-center g-bg-white g-pa-25">
                      <div class="g-mb-15">
                        <h4 class="h5 g-color-black g-mb-5">Tina Krueger</h4>
                        <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary">Lead Designer</em>
                      </div>
                      <p>I am an ambitious workaholic, but apart from that, pretty simple person.</p>

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

                      <!-- Figure Social Icons -->
                      <ul class="list-inline mb-0">
                        <li class="list-inline-item g-mx-2">
                          <a class="u-icon-v2 u-icon-size--xs g-color-facebook g-brd-facebook g-color-white--hover g-bg-facebook--hover rounded-circle" href="#" data-toggle="tooltip" data-original-title="Facebook">
                            <i class="fa fa-facebook"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mx-2">
                          <a class="u-icon-v2 u-icon-size--xs g-color-twitter g-brd-twitter g-color-white--hover g-bg-twitter--hover rounded-circle" href="#" data-toggle="tooltip" data-original-title="Twitter"
                          >
                            <i class="fa fa-twitter"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mx-2">
                          <a class="u-icon-v2 u-icon-size--xs g-color-google-plus g-brd-google-plus g-color-white--hover g-bg-google-plus--hover rounded-circle" href="#" data-toggle="tooltip" data-original-title="Google Plus"
                          >
                            <i class="fa fa-google-plus"></i>
                          </a>
                        </li>
                      </ul>
                      <!-- End Figure Social Icons -->
                    </div>
                    <!-- End Figure Info-->
                  </figure>
                  <!-- End Figure -->
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <!-- Team Block -->
                  <figure>
                    <!-- Figure Image -->
                    <img class="w-100" src="{{ root }}assets/img-temp/400x450/img3.jpg" alt="Image Description">
                    <!-- End Figure Image-->

                    <!-- Figure Info -->
                    <div class="text-center g-bg-white g-pa-25">
                      <div class="g-mb-15">
                        <h4 class="h5 g-color-black g-mb-5">David Case</h4>
                        <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary">Web Developer</em>
                      </div>
                      <p>I am an ambitious workaholic, but apart from that, pretty simple person.</p>

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

                      <!-- Figure Social Icons -->
                      <ul class="list-inline mb-0">
                        <li class="list-inline-item g-mx-2">
                          <a class="u-icon-v2 u-icon-size--xs g-color-facebook g-brd-facebook g-color-white--hover g-bg-facebook--hover rounded-circle" href="#"
                             data-toggle="tooltip"
                             data-original-title="Facebook">
                            <i class="fa fa-facebook"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mx-2">
                          <a class="u-icon-v2 u-icon-size--xs g-color-twitter g-brd-twitter g-color-white--hover g-bg-twitter--hover rounded-circle" href="#"
                             data-toggle="tooltip"
                             data-original-title="Twitter">
                            <i class="fa fa-twitter"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mx-2">
                          <a class="u-icon-v2 u-icon-size--xs g-color-google-plus g-brd-google-plus g-color-white--hover g-bg-google-plus--hover rounded-circle" href="#"
                             data-toggle="tooltip"
                             data-original-title="Google Plus">
                            <i class="fa fa-google-plus"></i>
                          </a>
                        </li>
                      </ul>
                      <!-- End Figure Social Icons -->
                    </div>
                    <!-- End Figure Info-->
                  </figure>
                  <!-- End Figure -->
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <!-- Team Block -->
                  <figure>
                    <!-- Figure Image -->
                    <img class="w-100" src="{{ root }}assets/img-temp/400x450/img4.jpg" alt="Image Description">
                    <!-- End Figure Image-->

                    <!-- Figure Info -->
                    <div class="text-center g-bg-white g-pa-25">
                      <div class="g-mb-15">
                        <h4 class="h5 g-color-black g-mb-5">Sara Lisbon</h4>
                        <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary">Support Manager</em>
                      </div>
                      <p>I am an ambitious workaholic, but apart from that, pretty simple person.</p>

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

                      <!-- Figure Social Icons -->
                      <ul class="list-inline mb-0">
                        <li class="list-inline-item g-mx-2">
                          <a class="u-icon-v2 u-icon-size--xs g-color-facebook g-brd-facebook g-color-white--hover g-bg-facebook--hover rounded-circle" href="#"
                             data-toggle="tooltip"
                             data-original-title="Facebook">
                            <i class="fa fa-facebook"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mx-2">
                          <a class="u-icon-v2 u-icon-size--xs g-color-twitter g-brd-twitter g-color-white--hover g-bg-twitter--hover rounded-circle" href="#"
                             data-toggle="tooltip"
                             data-original-title="Twitter">
                            <i class="fa fa-twitter"></i>
                          </a>
                        </li>
                        <li class="list-inline-item g-mx-2">
                          <a class="u-icon-v2 u-icon-size--xs g-color-google-plus g-brd-google-plus g-color-white--hover g-bg-google-plus--hover rounded-circle" href="#"
                             data-toggle="tooltip"
                             data-original-title="Google Plus">
                            <i class="fa fa-google-plus"></i>
                          </a>
                        </li>
                      </ul>
                      <!-- End Figure Social Icons -->
                    </div>
                    <!-- End Figure Info-->
                  </figure>
                  <!-- End Figure -->
                </div>
              </div>
              <!-- End Team Block -->
            </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">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="row">
                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <!-- Team Block -->
                  <figure class="u-block-hover">
                    <!-- Figure Image -->
                    <img class="w-100" src="{{ root }}assets/img-temp/400x450/img1.jpg" alt="Image Description">
                    <!-- End Figure Image-->

                    <!-- Figure Caption -->
                    <figcaption class="u-block-hover__additional--v1 u-block-hover__additional--slide-down g-bg-blue-opacity-0_9 g-pa-30">
                      <div class="u-block-hover__additional--v1 g-flex-middle">
                        <div class="text-center g-flex-middle-item">
                          <h4 class="h4 g-color-white g-mb-5">Maria Olsson</h4>
                          <em class="d-block g-font-style-normal g-font-size-11 g-font-weight-600 text-uppercase g-color-white-opacity-0_9">brown@gmail.com</em>
                        </div>
                      </div>
                    </figcaption>
                    <!-- End Figure Caption -->
                  </figure>
                  <!-- End Team Block -->
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <!-- Team Block -->
                  <figure class="u-block-hover">
                    <!-- Figure Image -->
                    <img class="w-100" src="{{ root }}assets/img-temp/400x450/img2.jpg" alt="Image Description">
                    <!-- End Figure Image-->

                    <!-- Figure Caption -->
                    <figcaption class="u-block-hover__additional--v1 u-block-hover__additional--slide-up g-bg-pink-opacity-0_9 g-pa-30">
                      <div class="u-block-hover__additional--v1 g-flex-middle">
                        <div class="text-center g-flex-middle-item">
                          <h4 class="h4 g-color-white g-mb-5">Tina Krueger</h4>
                          <em class="d-block g-font-style-normal g-font-size-11 g-font-weight-600 text-uppercase g-color-white-opacity-0_9">krueger@gmail.com</em>
                        </div>
                      </div>
                    </figcaption>
                    <!-- End Figure Caption -->
                  </figure>
                  <!-- End Team Block -->
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <!-- Team Block -->
                  <figure class="u-block-hover">
                    <!-- Figure Image -->
                    <img class="w-100" src="{{ root }}assets/img-temp/400x450/img3.jpg" alt="Image Description">
                    <!-- End Figure Image-->

                    <!-- Figure Caption -->
                    <figcaption class="u-block-hover__additional--v1 u-block-hover__additional--slide-left g-bg-aqua-opacity-0_9 g-pa-30">
                      <div class="u-block-hover__additional--v1 g-flex-middle">
                        <div class="text-center g-flex-middle-item">
                          <h4 class="h4 g-color-white g-mb-5">David Case</h4>
                          <em class="d-block g-font-style-normal g-font-size-11 g-font-weight-600 text-uppercase g-color-white-opacity-0_9">case@gmail.com</em>
                        </div>
                      </div>
                    </figcaption>
                    <!-- End Figure Caption -->
                  </figure>
                  <!-- End Team Block -->
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <!-- Team Block -->
                  <figure class="u-block-hover">
                    <!-- Figure Image -->
                    <img class="w-100" src="{{ root }}assets/img-temp/400x450/img4.jpg" alt="Image Description">
                    <!-- End Figure Image-->

                    <!-- Figure Caption -->
                    <figcaption class="u-block-hover__additional--v1 u-block-hover__additional--slide-right g-bg-purple-opacity-0_9 g-pa-30">
                      <div class="u-block-hover__additional--v1 g-flex-middle">
                        <div class="text-center g-flex-middle-item">
                          <h4 class="h4 g-color-white g-mb-5">Sara Lisbon</h4>
                          <em class="d-block g-font-style-normal g-font-size-11 g-font-weight-600 text-uppercase g-color-white-opacity-0_9">lisbon@gmail.com</em>
                        </div>
                      </div>
                    </figcaption>
                    <!-- End Figure Caption -->
                  </figure>
                  <!-- End Team Block -->
                </div>
              </div>
              <!-- End Team Block -->
            </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-secondary g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">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="row">
                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <!-- Team Block -->
                  <figure class="u-block-hover">
                    <!-- Figure Image -->
                    <img class="w-100" src="{{ root }}assets/img-temp/400x550/img1.jpg" alt="Image Description">
                    <!-- End Figure Image-->

                    <!-- Figure Info -->
                    <figcaption class="u-block-hover__additional--partially-slide-up g-mx-15">
                      <div class="text-center g-bg-white g-pb-20">
                        <!-- Figure Info -->
                        <div class="u-block-hover__visible g-pt-20 g-pb-15 g-y-20">
                          <h4 class="h5 g-color-black g-mb-5">Maria Olsson</h4>
                          <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary">Technical Director</em>
                        </div>
                        <!-- End Info -->

                        <!-- Figure Social Icons -->
                        <ul class="list-inline mb-0">
                          <li class="list-inline-item">
                            <a href="#" class="u-icon-v1 u-icon-size--sm g-color-gray-light-v1 g-color-twitter--hover g-bg-transparent">
                              <i class="fa fa-twitter"></i>
                            </a>
                          </li>
                          <li class="list-inline-item">
                            <a href="#" class="u-icon-v1 u-icon-size--sm g-color-gray-light-v1 g-color-dribbble--hover g-bg-transparent">
                              <i class="fa fa-dribbble"></i>
                            </a>
                          </li>
                          <li class="list-inline-item">
                            <a href="#" class="u-icon-v1 u-icon-size--sm g-color-gray-light-v1 g-color-facebook--hover g-bg-transparent">
                              <i class="fa fa-facebook"></i>
                            </a>
                          </li>
                        </ul>
                        <!-- Figure Social Icons -->
                      </div>
                    </figcaption>
                    <!-- End Figure Info-->
                  </figure>
                  <!-- End Team Block -->
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <!-- Team Block -->
                  <figure class="u-block-hover">
                    <!-- Figure Image -->
                    <img class="w-100" src="{{ root }}assets/img-temp/400x550/img2.jpg" alt="Image Description">
                    <!-- End Figure Image-->

                    <!-- Figure Info -->
                    <figcaption class="u-block-hover__additional--partially-slide-up g-mx-15">
                      <div class="text-center g-bg-white g-pb-20">
                        <!-- Figure Info -->
                        <div class="u-block-hover__visible g-pt-20 g-pb-15 g-y-20">
                          <h4 class="h5 g-color-black g-mb-5">Tina Krueger</h4>
                          <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary">Lead Designer</em>
                        </div>
                        <!-- End Info -->

                        <!-- Figure Social Icons -->
                        <ul class="list-inline mb-0">
                          <li class="list-inline-item">
                            <a href="#" class="u-icon-v1 u-icon-size--sm g-color-gray-light-v1 g-color-twitter--hover g-bg-transparent">
                              <i class="fa fa-twitter"></i>
                            </a>
                          </li>
                          <li class="list-inline-item">
                            <a href="#" class="u-icon-v1 u-icon-size--sm g-color-gray-light-v1 g-color-dribbble--hover g-bg-transparent">
                              <i class="fa fa-dribbble"></i>
                            </a>
                          </li>
                          <li class="list-inline-item">
                            <a href="#" class="u-icon-v1 u-icon-size--sm g-color-gray-light-v1 g-color-facebook--hover g-bg-transparent">
                              <i class="fa fa-facebook"></i>
                            </a>
                          </li>
                        </ul>
                        <!-- Figure Social Icons -->
                      </div>
                    </figcaption>
                    <!-- End Figure Info-->
                  </figure>
                  <!-- End Team Block -->
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <!-- Team Block -->
                  <figure class="u-block-hover">
                    <!-- Figure Image -->
                    <img class="w-100" src="{{ root }}assets/img-temp/400x550/img3.jpg" alt="Image Description">
                    <!-- End Figure Image-->

                    <!-- Figure Info -->
                    <figcaption class="u-block-hover__additional--partially-slide-up g-mx-15">
                      <div class="text-center g-bg-white g-pb-20">
                        <!-- Figure Info -->
                        <div class="u-block-hover__visible g-pt-20 g-pb-15 g-y-20">
                          <h4 class="h5 g-color-black g-mb-5">David Case</h4>
                          <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary">Web Developer</em>
                        </div>
                        <!-- End Info -->

                        <!-- Figure Social Icons -->
                        <ul class="list-inline mb-0">
                          <li class="list-inline-item">
                            <a href="#" class="u-icon-v1 u-icon-size--sm g-color-gray-light-v1 g-color-twitter--hover g-bg-transparent">
                              <i class="fa fa-twitter"></i>
                            </a>
                          </li>
                          <li class="list-inline-item">
                            <a href="#" class="u-icon-v1 u-icon-size--sm g-color-gray-light-v1 g-color-dribbble--hover g-bg-transparent">
                              <i class="fa fa-dribbble"></i>
                            </a>
                          </li>
                          <li class="list-inline-item">
                            <a href="#" class="u-icon-v1 u-icon-size--sm g-color-gray-light-v1 g-color-facebook--hover g-bg-transparent">
                              <i class="fa fa-facebook"></i>
                            </a>
                          </li>
                        </ul>
                        <!-- Figure Social Icons -->
                      </div>
                    </figcaption>
                    <!-- End Figure Info-->
                  </figure>
                  <!-- End Team Block -->
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <!-- Team Block -->
                  <figure class="u-block-hover">
                    <!-- Figure Image -->
                    <img class="w-100" src="{{ root }}assets/img-temp/400x550/img4.jpg" alt="Image Description">
                    <!-- End Figure Image-->

                    <!-- Figure Info -->
                    <figcaption class="u-block-hover__additional--partially-slide-up g-mx-15">
                      <div class="text-center g-bg-white g-pb-20">
                        <!-- Figure Info -->
                        <div class="u-block-hover__visible g-pt-20 g-pb-15 g-y-20">
                          <h4 class="h5 g-color-black g-mb-5">Sara Lisbon</h4>
                          <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary">Support Manager</em>
                        </div>
                        <!-- End Info -->

                        <!-- Figure Social Icons -->
                        <ul class="list-inline mb-0">
                          <li class="list-inline-item">
                            <a href="#" class="u-icon-v1 u-icon-size--sm g-color-gray-light-v1 g-color-twitter--hover g-bg-transparent">
                              <i class="fa fa-twitter"></i>
                            </a>
                          </li>
                          <li class="list-inline-item">
                            <a href="#" class="u-icon-v1 u-icon-size--sm g-color-gray-light-v1 g-color-dribbble--hover g-bg-transparent">
                              <i class="fa fa-dribbble"></i>
                            </a>
                          </li>
                          <li class="list-inline-item">
                            <a href="#" class="u-icon-v1 u-icon-size--sm g-color-gray-light-v1 g-color-facebook--hover g-bg-transparent">
                              <i class="fa fa-facebook"></i>
                            </a>
                          </li>
                        </ul>
                        <!-- Figure Social Icons -->
                      </div>
                    </figcaption>
                    <!-- End Figure Info-->
                  </figure>
                  <!-- End Team Block -->
                </div>
              </div>
              <!-- End Team Block -->
            </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="text-center g-mb-50">
          <h2 class="h4">Team Blocks
            <span class="g-color-primary g-ml-5">#07</span>
          </h2>
        </div>

        <div class="container">
          <div id="shortcode7">
            <div class="shortcode-html">
              <!-- Team Block -->
              <div class="row">
                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <!-- Figure -->
                  <figure class="text-center">
                    <!-- 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-20">
                      <h4 class="h5 g-color-black g-mb-5">Maria Olsson</h4>
                      <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary g-mb-12">Graphic Designer</em>
                    </div>
                    <!-- End Info -->

                    <!-- Figure Social Icons -->
                    <ul class="list-unstyled mb-0">
                      <li class="list-inline-item g-mx-5">
                        <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-5">
                        <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-5">
                        <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>

                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <!-- Figure -->
                  <figure class="text-center">
                    <!-- 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-20">
                      <h4 class="h5 g-color-black g-mb-5">Sara Lisbon</h4>
                      <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary g-mb-12">Community</em>
                    </div>
                    <!-- End Info -->

                    <!-- Figure Social Icons -->
                    <ul class="list-unstyled mb-0">
                      <li class="list-inline-item g-mx-5">
                        <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-5">
                        <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-5">
                        <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>

                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <!-- Figure -->
                  <figure class="text-center">
                    <!-- 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-20">
                      <h4 class="h5 g-color-black g-mb-5">David Case</h4>
                      <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary g-mb-12">Support</em>
                    </div>
                    <!-- End Info -->

                    <!-- Figure Social Icons -->
                    <ul class="list-unstyled mb-0">
                      <li class="list-inline-item g-mx-5">
                        <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-5">
                        <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-5">
                        <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>

                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <!-- Figure -->
                  <figure class="text-center">
                    <!-- 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-20">
                      <h4 class="h5 g-color-black g-mb-5">Alice Williams</h4>
                      <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary g-mb-12">Marketing</em>
                    </div>
                    <!-- End Info -->

                    <!-- Figure Social Icons -->
                    <ul class="list-unstyled mb-0">
                      <li class="list-inline-item g-mx-5">
                        <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-5">
                        <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-5">
                        <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>
              </div>
              <!-- End Team Block -->
            </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-secondary g-py-100">
        <div class="text-center g-mb-50">
          <h2 class="h4">Team Blocks
            <span class="g-color-primary g-ml-5">#08</span>
          </h2>
        </div>

        <div class="container">
          <div id="shortcode8">
            <div class="shortcode-html">
              <!-- Team Block -->
              <div class="row">
                <div class="col-lg-3 col-sm-6 g-mb-20">
                  <div class="text-center">
                    <!-- Figure -->
                    <figure class="u-block-hover g-mb-20">
                      <!-- Figure Image -->
                      <img class="w-100 u-block-hover__img" src="{{ root }}assets/img-temp/400x450/img1.jpg" alt="Image Description">
                      <!-- Figure Image -->

                      <!-- Figure Caption -->
                      <figcaption class="u-block-hover__additional--fade g-bg-primary-opacity-0_9">
                        <div class="u-block-hover__additional--fade u-block-hover__additional--fade-down g-flex-middle">
                          <!-- Figure Social Icons -->
                          <ul class="list-inline text-center g-flex-middle-item">
                            <li class="list-inline-item align-middle g-mx-3">
                              <a class="u-icon-v2 u-icon-size--sm g-font-size-default g-color-white g-color-black--hover g-brd-white g-bg-white--hover rounded-circle" href="#">
                                <i class="fa fa-facebook"></i>
                              </a>
                            </li>
                            <li class="list-inline-item align-middle g-mx-3">
                              <a class="u-icon-v2 u-icon-size--sm g-font-size-default g-color-white g-color-black--hover g-brd-white g-bg-white--hover rounded-circle" href="#">
                                <i class="fa fa-twitter"></i>
                              </a>
                            </li>
                            <li class="list-inline-item align-middle g-mx-3">
                              <a class="u-icon-v2 u-icon-size--sm g-font-size-default g-color-white g-color-black--hover g-brd-white g-bg-white--hover rounded-circle" href="#">
                                <i class="fa fa-google-plus"></i>
                              </a>
                            </li>
                          </ul>
                          <!-- End Figure Social Icons -->
                        </div>
                      </figcaption>
                      <!-- End Figure Caption-->
                    </figure>
                    <!-- End Figure -->

                    <!-- Figure Info -->
                    <h4 class="h5 g-color-black g-mb-5">Maria Olsson</h4>
                    <em class="d-block u-info-v1-3__item g-font-style-normal g-font-size-11 text-uppercase g-color-primary g-mb-13">Technical Director</em>
                    <p>I am an ambitious workaholic, but apart from that, pretty simple person.</p>
                    <!-- End Figure Info-->
                  </div>
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-20">
                  <div class="text-center">
                    <!-- Figure -->
                    <figure class="u-block-hover g-mb-20">
                      <!-- Figure Image -->
                      <img class="w-100 u-block-hover__img" src="{{ root }}assets/img-temp/400x450/img2.jpg" alt="Image Description">
                      <!-- Figure Image -->

                      <!-- Figure Caption -->
                      <figcaption class="u-block-hover__additional--fade g-bg-primary-opacity-0_9">
                        <div class="u-block-hover__additional--fade u-block-hover__additional--fade-down g-flex-middle">
                          <!-- Figure Social Icons -->
                          <ul class="list-inline text-center g-flex-middle-item">
                            <li class="list-inline-item align-middle g-mx-3">
                              <a class="u-icon-v2 u-icon-size--sm g-font-size-default g-color-white g-color-black--hover g-brd-white g-bg-white--hover rounded-circle" href="#">
                                <i class="fa fa-facebook"></i>
                              </a>
                            </li>
                            <li class="list-inline-item align-middle g-mx-3">
                              <a class="u-icon-v2 u-icon-size--sm g-font-size-default g-color-white g-color-black--hover g-brd-white g-bg-white--hover rounded-circle" href="#">
                                <i class="fa fa-twitter"></i>
                              </a>
                            </li>
                            <li class="list-inline-item align-middle g-mx-3">
                              <a class="u-icon-v2 u-icon-size--sm g-font-size-default g-color-white g-color-black--hover g-brd-white g-bg-white--hover rounded-circle" href="#">
                                <i class="fa fa-google-plus"></i>
                              </a>
                            </li>
                          </ul>
                          <!-- End Figure Social Icons -->
                        </div>
                      </figcaption>
                      <!-- End Figure Caption-->
                    </figure>
                    <!-- End Figure -->

                    <!-- Figure Info -->
                    <h4 class="h5 g-color-black g-mb-5">Sara Lisbon</h4>
                    <em class="d-block u-info-v1-3__item g-font-style-normal g-font-size-11 text-uppercase g-color-primary g-mb-13">Developer</em>
                    <p>I am an ambitious workaholic, but apart from that, pretty simple person.</p>
                    <!-- End Figure Info-->
                  </div>
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-20">
                  <div class="text-center">
                    <!-- Figure -->
                    <figure class="u-block-hover g-mb-20">
                      <!-- Figure Image -->
                      <img class="w-100 u-block-hover__img" src="{{ root }}assets/img-temp/400x450/img3.jpg" alt="Image Description">
                      <!-- Figure Image -->

                      <!-- Figure Caption -->
                      <figcaption class="u-block-hover__additional--fade g-bg-primary-opacity-0_9">
                        <div class="u-block-hover__additional--fade u-block-hover__additional--fade-down g-flex-middle">
                          <!-- Figure Social Icons -->
                          <ul class="list-inline text-center g-flex-middle-item">
                            <li class="list-inline-item align-middle g-mx-3">
                              <a class="u-icon-v2 u-icon-size--sm g-font-size-default g-color-white g-color-black--hover g-brd-white g-bg-white--hover rounded-circle" href="#">
                                <i class="fa fa-facebook"></i>
                              </a>
                            </li>
                            <li class="list-inline-item align-middle g-mx-3">
                              <a class="u-icon-v2 u-icon-size--sm g-font-size-default g-color-white g-color-black--hover g-brd-white g-bg-white--hover rounded-circle" href="#">
                                <i class="fa fa-twitter"></i>
                              </a>
                            </li>
                            <li class="list-inline-item align-middle g-mx-3">
                              <a class="u-icon-v2 u-icon-size--sm g-font-size-default g-color-white g-color-black--hover g-brd-white g-bg-white--hover rounded-circle" href="#">
                                <i class="fa fa-google-plus"></i>
                              </a>
                            </li>
                          </ul>
                          <!-- End Figure Social Icons -->
                        </div>
                      </figcaption>
                      <!-- End Figure Caption-->
                    </figure>
                    <!-- End Figure -->

                    <!-- Figure Info -->
                    <h4 class="h5 g-color-black g-mb-5">David Case</h4>
                    <em class="d-block u-info-v1-3__item g-font-style-normal g-font-size-11 text-uppercase g-color-primary g-mb-13">Designer</em>
                    <p>I am an ambitious workaholic, but apart from that, pretty simple person.</p>
                    <!-- End Figure Info-->
                  </div>
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-20">
                  <div class="text-center">
                    <!-- Figure -->
                    <figure class="u-block-hover g-mb-20">
                      <!-- Figure Image -->
                      <img class="w-100 u-block-hover__img" src="{{ root }}assets/img-temp/400x450/img4.jpg" alt="Image Description">
                      <!-- Figure Image -->

                      <!-- Figure Caption -->
                      <figcaption class="u-block-hover__additional--fade g-bg-primary-opacity-0_9">
                        <div class="u-block-hover__additional--fade u-block-hover__additional--fade-down g-flex-middle">
                          <!-- Figure Social Icons -->
                          <ul class="list-inline text-center g-flex-middle-item">
                            <li class="list-inline-item align-middle g-mx-3">
                              <a class="u-icon-v2 u-icon-size--sm g-font-size-default g-color-white g-color-black--hover g-brd-white g-bg-white--hover rounded-circle" href="#">
                                <i class="fa fa-facebook"></i>
                              </a>
                            </li>
                            <li class="list-inline-item align-middle g-mx-3">
                              <a class="u-icon-v2 u-icon-size--sm g-font-size-default g-color-white g-color-black--hover g-brd-white g-bg-white--hover rounded-circle" href="#">
                                <i class="fa fa-twitter"></i>
                              </a>
                            </li>
                            <li class="list-inline-item align-middle g-mx-3">
                              <a class="u-icon-v2 u-icon-size--sm g-font-size-default g-color-white g-color-black--hover g-brd-white g-bg-white--hover rounded-circle" href="#">
                                <i class="fa fa-google-plus"></i>
                              </a>
                            </li>
                          </ul>
                          <!-- End Figure Social Icons -->
                        </div>
                      </figcaption>
                      <!-- End Figure Caption-->
                    </figure>
                    <!-- End Figure -->

                    <!-- Figure Info -->
                    <h4 class="h5 g-color-black g-mb-5">Sara Lisbon</h4>
                    <em class="d-block u-info-v1-3__item g-font-style-normal g-font-size-11 text-uppercase g-color-primary g-mb-13">Developer</em>
                    <p>I am an ambitious workaholic, but apart from that, pretty simple person.</p>
                    <!-- End Figure Info-->
                  </div>
                </div>
              </div>
              <!-- End Team Block -->
            </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="g-py-100">
        <div class="text-center g-mb-50">
          <h2 class="h4">Team Blocks
            <span class="g-color-primary g-ml-5">#09</span>
          </h2>
        </div>

        <div class="container">
          <div id="shortcode9">
            <div class="shortcode-html">
              <!-- Team Block -->
              <div class="row">
                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <!-- Figure -->
                  <figure class="text-center u-block-hover mb-0">
                    <!-- Figure Image -->
                    <img class="w-100 u-block-hover__img" src="{{ root }}assets/img-temp/400x450/img1.jpg" alt="Image Description">
                    <!-- End Figure Image -->

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

                          <!-- Figure Social Icons -->
                          <ul class="list-unstyled mb-0">
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v2 u-icon-size--xs g-color-white g-brd-white g-bg-white--hover g-color-black--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-brd-white g-bg-white--hover g-color-black--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-brd-white g-bg-white--hover g-color-black--hover rounded-circle" href="#">
                                <i class="fa fa-google-plus"></i>
                              </a>
                            </li>
                          </ul>
                          <!-- End Figure Social Icons -->
                        </div>
                      </div>
                    </figcaption>
                    <!-- End Figure Caption-->
                  </figure>
                  <!-- End Figure -->
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <!-- Figure -->
                  <figure class="text-center u-block-hover mb-0">
                    <!-- Figure Image -->
                    <img class="w-100 u-block-hover__img" src="{{ root }}assets/img-temp/400x450/img2.jpg" alt="Image Description">
                    <!-- End Figure Image -->

                    <!-- Figure Caption -->
                    <figcaption class="u-block-hover__additional--fade g-bg-primary-opacity-0_9 g-font-weight-200">
                      <div class="u-block-hover__additional--fade u-block-hover__additional--fade-down g-flex-middle">
                        <div class="g-flex-middle-item g-pa-20">
                          <!-- Figure Info -->
                          <h4 class="h5 g-color-white g-mb-2">Sara Lisbon</h4>
                          <em class="d-block g-color-white-opacity-0_9 g-font-style-normal g-font-size-11 text-uppercase g-font-weight-200 g-mb-10">Technical Director</em>
                          <p class="g-color-white-opacity-0_9">I am an ambitious workaholic, but apart from that, pretty simple person.</p>
                          <!-- End Info -->

                          <!-- Figure Social Icons -->
                          <ul class="list-unstyled mb-0">
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v2 u-icon-size--xs g-color-white g-brd-white g-bg-white--hover g-color-black--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-brd-white g-bg-white--hover g-color-black--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-brd-white g-bg-white--hover g-color-black--hover rounded-circle" href="#">
                                <i class="fa fa-google-plus"></i>
                              </a>
                            </li>
                          </ul>
                          <!-- End Figure Social Icons -->
                        </div>
                      </div>
                    </figcaption>
                    <!-- End Figure Caption-->
                  </figure>
                  <!-- End Figure -->
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <!-- Figure -->
                  <figure class="text-center u-block-hover mb-0">
                    <!-- Figure Image -->
                    <img class="w-100 u-block-hover__img" src="{{ root }}assets/img-temp/400x450/img3.jpg" alt="Image Description">
                    <!-- End Figure Image -->

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

                          <!-- Figure Social Icons -->
                          <ul class="list-unstyled mb-0">
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v2 u-icon-size--xs g-color-white g-brd-white g-bg-white--hover g-color-black--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-brd-white g-bg-white--hover g-color-black--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-brd-white g-bg-white--hover g-color-black--hover rounded-circle" href="#">
                                <i class="fa fa-google-plus"></i>
                              </a>
                            </li>
                          </ul>
                          <!-- End Figure Social Icons -->
                        </div>
                      </div>
                    </figcaption>
                    <!-- End Figure Caption-->
                  </figure>
                  <!-- End Figure -->
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <!-- Figure -->
                  <figure class="text-center u-block-hover mb-0">
                    <!-- Figure Image -->
                    <img class="w-100 u-block-hover__img" src="{{ root }}assets/img-temp/400x450/img4.jpg" alt="Image Description">
                    <!-- End Figure Image -->

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

                          <!-- Figure Social Icons -->
                          <ul class="list-unstyled mb-0">
                            <li class="list-inline-item g-mx-3">
                              <a class="u-icon-v2 u-icon-size--xs g-color-white g-brd-white g-bg-white--hover g-color-black--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-brd-white g-bg-white--hover g-color-black--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-brd-white g-bg-white--hover g-color-black--hover rounded-circle" href="#">
                                <i class="fa fa-google-plus"></i>
                              </a>
                            </li>
                          </ul>
                          <!-- End Figure Social Icons -->
                        </div>
                      </div>
                    </figcaption>
                    <!-- End Figure Caption-->
                  </figure>
                  <!-- End Figure -->
                </div>
              </div>
              <!-- End Team Block -->
            </div>
          </div>

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

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

          <div id="shortcode10">
            <div class="shortcode-html">
              <!-- Team Block -->
              <div class="row">
                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <!-- Figure -->
                  <figure class="text-center">
                    <!-- 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-10">
                      <h4 class="h5 g-color-black g-mb-5">Maria Olsson</h4>
                      <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary">- Technical Director -</em>
                    </div>
                    <p>I am an ambitious workaholic, but apart from that, pretty simple person.</p>
                    <!-- End Info -->

                    <!-- Figure Social Icons -->
                    <ul class="list-unstyled mb-0">
                      <li class="list-inline-item mx-0">
                        <a class="u-icon-v1 u-icon-size--sm g-font-size-default g-color-gray-dark-v1 g-color-primary--hover" href="#">
                          <i class="fa fa-facebook"></i>
                        </a>
                      </li>
                      <li class="list-inline-item mx-0">
                        <a class="u-icon-v1 u-icon-size--sm g-font-size-default g-color-gray-dark-v1 g-color-primary--hover" href="#">
                          <i class="fa fa-twitter"></i>
                        </a>
                      </li>
                      <li class="list-inline-item mx-0">
                        <a class="u-icon-v1 u-icon-size--sm g-font-size-default g-color-gray-dark-v1 g-color-primary--hover" href="#">
                          <i class="fa fa-linkedin"></i>
                        </a>
                      </li>
                    </ul>
                    <!-- End Figure Social Icons -->
                  </figure>
                  <!-- End Figure -->
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <!-- Figure -->
                  <figure class="text-center">
                    <!-- 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-10">
                      <h4 class="h5 g-color-black g-mb-5">Sara Lisbon</h4>
                      <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary">- UI Designer -</em>
                    </div>
                    <p>I am an ambitious workaholic, but apart from that, pretty simple person.</p>
                    <!-- End Info -->

                    <!-- Figure Social Icons -->
                    <ul class="list-unstyled mb-0">
                      <li class="list-inline-item mx-0">
                        <a class="u-icon-v1 u-icon-size--sm g-font-size-default g-color-gray-dark-v1 g-color-primary--hover" href="#">
                          <i class="fa fa-facebook"></i>
                        </a>
                      </li>
                      <li class="list-inline-item mx-0">
                        <a class="u-icon-v1 u-icon-size--sm g-font-size-default g-color-gray-dark-v1 g-color-primary--hover" href="#">
                          <i class="fa fa-twitter"></i>
                        </a>
                      </li>
                      <li class="list-inline-item mx-0">
                        <a class="u-icon-v1 u-icon-size--sm g-font-size-default g-color-gray-dark-v1 g-color-primary--hover" href="#">
                          <i class="fa fa-linkedin"></i>
                        </a>
                      </li>
                    </ul>
                    <!-- End Figure Social Icons -->
                  </figure>
                  <!-- End Figure -->
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <!-- Figure -->
                  <figure class="text-center">
                    <!-- 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-10">
                      <h4 class="h5 g-color-black g-mb-5">David Case</h4>
                      <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary">- Backend Developer -</em>
                    </div>
                    <p>I am an ambitious workaholic, but apart from that, pretty simple person.</p>
                    <!-- End Info -->

                    <!-- Figure Social Icons -->
                    <ul class="list-unstyled mb-0">
                      <li class="list-inline-item mx-0">
                        <a class="u-icon-v1 u-icon-size--sm g-font-size-default g-color-gray-dark-v1 g-color-primary--hover" href="#">
                          <i class="fa fa-facebook"></i>
                        </a>
                      </li>
                      <li class="list-inline-item mx-0">
                        <a class="u-icon-v1 u-icon-size--sm g-font-size-default g-color-gray-dark-v1 g-color-primary--hover" href="#">
                          <i class="fa fa-twitter"></i>
                        </a>
                      </li>
                      <li class="list-inline-item mx-0">
                        <a class="u-icon-v1 u-icon-size--sm g-font-size-default g-color-gray-dark-v1 g-color-primary--hover" href="#">
                          <i class="fa fa-linkedin"></i>
                        </a>
                      </li>
                    </ul>
                    <!-- End Figure Social Icons -->
                  </figure>
                  <!-- End Figure -->
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <!-- Figure -->
                  <figure class="text-center">
                    <!-- 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-10">
                      <h4 class="h5 g-color-black g-mb-5">Alice Williams</h4>
                      <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary">- Customer Support -</em>
                    </div>
                    <p>I am an ambitious workaholic, but apart from that, pretty simple person.</p>
                    <!-- End Info -->

                    <!-- Figure Social Icons -->
                    <ul class="list-unstyled mb-0">
                      <li class="list-inline-item mx-0">
                        <a class="u-icon-v1 u-icon-size--sm g-font-size-default g-color-gray-dark-v1 g-color-primary--hover" href="#">
                          <i class="fa fa-facebook"></i>
                        </a>
                      </li>
                      <li class="list-inline-item mx-0">
                        <a class="u-icon-v1 u-icon-size--sm g-font-size-default g-color-gray-dark-v1 g-color-primary--hover" href="#">
                          <i class="fa fa-twitter"></i>
                        </a>
                      </li>
                      <li class="list-inline-item mx-0">
                        <a class="u-icon-v1 u-icon-size--sm g-font-size-default g-color-gray-dark-v1 g-color-primary--hover" href="#">
                          <i class="fa fa-linkedin"></i>
                        </a>
                      </li>
                    </ul>
                    <!-- End Figure Social Icons -->
                  </figure>
                  <!-- End Figure -->
                </div>
              </div>
              <!-- End Team Block -->
            </div>
          </div>

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

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

          <div id="shortcode11">
            <div class="shortcode-html">
              <!-- Figure -->
              <figure class="row">
                <!-- Figure Image -->
                <div class="col-md-8 col-lg-4 g-mb-30">
                  <img class="w-100" src="{{ root }}assets/img-temp/400x450/img2.jpg" alt="Image Description">
                </div>
                <!-- End Figure Image -->

                <!-- Figure Body -->
                <div class="col-lg-8">
                  <div class="d-flex justify-content-between g-mb-10">
                    <div class="g-mb-20">
                      <h4 class="h5 g-mb-5">Maria Watson</h4>
                      <em class="d-block g-font-style-normal g-font-size-default text-uppercase g-color-primary">CEO, Director</em>
                    </div>

                    <!-- Figure Social Icons -->
                    <ul class="list-inline">
                      <li class="list-inline-item g-mx-2">
                        <a class="u-icon-v3 u-icon-size--xs g-color-gray-light-v1 g-bg-gray-light-v5 g-color-white--hover g-bg-primary--hover rounded-circle" href="#">
                          <i class="fa fa-facebook"></i>
                        </a>
                      </li>
                      <li class="list-inline-item g-mx-2">
                        <a class="u-icon-v3 u-icon-size--xs g-color-gray-light-v1 g-bg-gray-light-v5 g-color-white--hover g-bg-primary--hover rounded-circle" href="#">
                          <i class="fa fa-twitter"></i>
                        </a>
                      </li>
                      <li class="list-inline-item g-mx-2">
                        <a class="u-icon-v3 u-icon-size--xs g-color-gray-light-v1 g-bg-gray-light-v5 g-color-white--hover g-bg-primary--hover rounded-circle" href="#">
                          <i class="fa fa-google-plus"></i>
                        </a>
                      </li>
                      <li class="list-inline-item g-mx-2">
                        <a class="u-icon-v3 u-icon-size--xs g-color-gray-light-v1 g-bg-gray-light-v5 g-color-white--hover g-bg-primary--hover rounded-circle" href="#">
                          <i class="fa fa-linkedin"></i>
                        </a>
                      </li>
                    </ul>
                    <!-- End Figure Social Icons -->
                  </div>

                  <!-- Figure Info -->
                  <div class="g-mb-50">
                    <p>I am an ambitious workaholic, but apart from that, pretty simple person. Whether it's branding, print, UI + UX I've got you covered. I strive to figure out the right solutions for your look to stand out amongst the rest.</p>
                    <p>As creatives, it's important that I strive to do work outside of obligation. This lets us stay ahead of the curve for our clients and internal projects. At the end of the day, it's important to not let being busy distract us from having fun. Smiling, laughing, and hanging helps us work together to achieve this.</p>
                  </div>
                  <!-- End Info -->

                  <div class="row">
                    <div class="col-sm-6">
                      <!-- Progress Bar v2 -->
                      <h4 class="h6 g-mb-5">Web Design - 80%</h4>
                      <div class="js-hr-progress-bar progress rounded-0 g-height-4 mb-5">
                        <div class="js-hr-progress-bar-indicator progress-bar" role="progressbar" style="width: 80%;" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
                      </div>
                      <!-- End Progress Bar v2 -->

                      <!-- Progress Bar v2 -->
                      <h4 class="h6 g-mb-5">PHP/WordPress - 76%</h4>
                      <div class="js-hr-progress-bar progress rounded-0 g-height-4 mb-5">
                        <div class="js-hr-progress-bar-indicator progress-bar" role="progressbar" style="width: 76%;" aria-valuenow="76" aria-valuemin="0" aria-valuemax="100"></div>
                      </div>
                      <!-- End Progress Bar v2 -->
                    </div>

                    <div class="col-sm-6">
                      <!-- Progress Bar v2 -->
                      <h4 class="h6 g-mb-5">jQuery - 80%</h4>
                      <div class="js-hr-progress-bar progress rounded-0 g-height-4 mb-5">
                        <div class="js-hr-progress-bar-indicator progress-bar" role="progressbar" style="width: 80%;" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
                      </div>
                      <!-- End Progress Bar v2 -->

                      <!-- Progress Bar v2 -->
                      <h4 class="h6 g-mb-5">CSS - 76%</h4>
                      <div class="js-hr-progress-bar progress rounded-0 g-height-4 mb-5">
                        <div class="js-hr-progress-bar-indicator progress-bar" role="progressbar" style="width: 76%;" aria-valuenow="76" aria-valuemin="0" aria-valuemax="100"></div>
                      </div>
                      <!-- End Progress Bar v2 -->
                    </div>
                  </div>
                </div>
                <!-- End Figure Body -->
              </figure>
              <!-- End Figure -->
            </div>

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

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

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).on('ready', function () {
                  // initialization of horizontal progress bars
                  var horizontalProgressBars = $.HSCore.components.HSProgressBar.init('.js-hr-progress-bar', {
                    direction: 'horizontal',
                    indicatorSelector: '.js-hr-progress-bar-indicator'
                  });
                });
              </script>
            </div>
          </div>

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

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

        <div class="container">
          <div id="shortcode12">
            <div class="shortcode-html">
              <!-- Team Block -->
              <div class="row">
                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <!-- Figure -->
                  <figure class="g-color-gray-dark-v2">
                    <!-- Figure Image -->
                    <img class="w-100 g-mb-30" src="{{ root }}assets/img-temp/400x450/img4.jpg" alt="Image Description">
                    <!-- End Figure Image -->

                    <!-- Figure Info -->
                    <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary g-mb-5">Partner</em>
                    <h4 class="h5 g-color-black-light-v3 g-mb-5">Sara Lisbon</h4>
                    <p class="g-font-size-13 g-color-gray-dark-v4">civil and criminal law</p>
                    <!-- End Info -->

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

                    <!-- Contact Info -->
                    <ul class="list-unstyled g-font-size-13 g-color-gray-dark-v4">
                      <li class="g-mb-5">
                        <i class="fa fa-envelope g-mr-10"></i>
                        eric@unify.com
                      </li>
                      <li class="g-mb-5">
                        <i class="fa fa-phone-square g-mr-10"></i>
                        +48 555 2566 112
                      </li>
                    </ul>
                    <!-- End Contact Info -->
                  </figure>
                  <!-- End Figure -->
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <!-- Figure -->
                  <figure class="g-color-gray-dark-v2">
                    <!-- Figure Image -->
                    <img class="w-100 g-mb-30" src="{{ root }}assets/img-temp/400x450/img1.jpg" alt="Image Description">
                    <!-- End Figure Image -->

                    <!-- Figure Info -->
                    <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary g-mb-5">Partner</em>
                    <h4 class="h5 g-color-black-light-v3 g-mb-5">Maria Olsson</h4>
                    <p class="g-font-size-13 g-color-gray-dark-v4">business and criminal law</p>
                    <!-- End Info -->

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

                    <!-- Contact Info -->
                    <ul class="list-unstyled g-font-size-13 g-color-gray-dark-v4">
                      <li class="g-mb-5">
                        <i class="fa fa-envelope g-mr-10"></i>
                        sam@unify.com
                      </li>
                      <li class="g-mb-5">
                        <i class="fa fa-phone-square g-mr-10"></i>
                        +48 555 2566 114
                      </li>
                    </ul>
                    <!-- End Contact Info -->
                  </figure>
                  <!-- End Figure -->
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <!-- Figure -->
                  <figure class="g-color-gray-dark-v2">
                    <!-- Figure Image -->
                    <img class="w-100 g-mb-30" src="{{ root }}assets/img-temp/400x450/img2.jpg" alt="Image Description">
                    <!-- End Figure Image -->

                    <!-- Figure Info -->
                    <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary g-mb-5">Partner</em>
                    <h4 class="h5 g-color-black-light-v3 g-mb-5">Alice Williams</h4>
                    <p class="g-font-size-13 g-color-gray-dark-v4">business and criminal law</p>
                    <!-- End Info -->

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

                    <!-- Contact Info -->
                    <ul class="list-unstyled g-font-size-13 g-color-gray-dark-v4">
                      <li class="g-mb-5">
                        <i class="fa fa-envelope g-mr-10"></i>
                        tomas@unify.com
                      </li>
                      <li class="g-mb-5">
                        <i class="fa fa-phone-square g-mr-10"></i>
                        +48 555 2566 115
                      </li>
                    </ul>
                    <!-- End Contact Info -->
                  </figure>
                  <!-- End Figure -->
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <!-- Figure -->
                  <figure class="g-color-gray-dark-v2">
                    <!-- Figure Image -->
                    <img class="w-100 g-mb-30" src="{{ root }}assets/img-temp/400x450/img3.jpg" alt="Image Description">
                    <!-- End Figure Image -->

                    <!-- Figure Info -->
                    <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary g-mb-5">Partner</em>
                    <h4 class="h5 g-color-black-light-v3 g-mb-5">Tomas Klepton</h4>
                    <p class="g-font-size-13 g-color-gray-dark-v4">business and criminal law</p>
                    <!-- End Info -->

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

                    <!-- Contact Info -->
                    <ul class="list-unstyled g-font-size-13 g-color-gray-dark-v4">
                      <li class="g-mb-5">
                        <i class="fa fa-envelope g-mr-10"></i>
                        tomas@unify.com
                      </li>
                      <li class="g-mb-5">
                        <i class="fa fa-phone-square g-mr-10"></i>
                        +48 555 2566 115
                      </li>
                    </ul>
                    <!-- End Contact Info -->
                  </figure>
                  <!-- End Figure -->
                </div>
              </div>
              <!-- End Team Block -->
            </div>
          </div>

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

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

        <div class="container">
          <div id="shortcode13">
            <div class="shortcode-html">
              <!-- Team Block -->
              <div class="row">
                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <div class="text-center u-block-hover">
                    <!-- Figure -->
                    <figure class="u-block-hover g-mb-25">
                      <!-- 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 g-px-10">
                        <q class="u-quote-v1 g-flex-middle-item g-color-white g-font-weight-700 g-font-size-16 text-uppercase">changing your mind and changing world</q>

                        <!-- Figure Social Icons -->
                        <ul class="list-inline g-flex-middle-item--bottom g-mb-30 mt-0">
                          <li class="list-inline-item g-mx-3">
                            <a class="u-icon-v3 u-icon-size--xs g-bg-white g-color-primary g-color-primary--hover 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-bg-white g-color-primary g-color-primary--hover 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-bg-white g-color-primary g-color-primary--hover 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-bg-white g-color-primary g-color-primary--hover g-bg-black--hover" href="#">
                              <i class="fa fa-linkedin"></i>
                            </a>
                          </li>
                        </ul>
                        <!-- End Figure Social Icons -->
                      </figcaption>
                      <!-- End Figure Caption -->
                    </figure>
                    <!-- End Figure -->

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

                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <div class="text-center u-block-hover">
                    <!-- Figure -->
                    <figure class="u-block-hover g-mb-25">
                      <!-- 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 g-px-10">
                        <q class="u-quote-v1 g-flex-middle-item g-color-white g-font-weight-700 g-font-size-16 text-uppercase">changing your mind and changing world</q>

                        <!-- Figure Social Icons -->
                        <ul class="list-inline g-flex-middle-item--bottom g-mb-30 mt-0">
                          <li class="list-inline-item g-mx-3">
                            <a class="u-icon-v3 u-icon-size--xs g-bg-white g-color-primary g-color-primary--hover 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-bg-white g-color-primary g-color-primary--hover 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-bg-white g-color-primary g-color-primary--hover 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-bg-white g-color-primary g-color-primary--hover g-bg-black--hover" href="#">
                              <i class="fa fa-linkedin"></i>
                            </a>
                          </li>
                        </ul>
                        <!-- End Figure Social Icons -->
                      </figcaption>
                      <!-- End Figure Caption -->
                    </figure>
                    <!-- End Figure -->

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

                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <div class="text-center u-block-hover">
                    <!-- Figure -->
                    <figure class="u-block-hover g-mb-25">
                      <!-- 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 g-px-10">
                        <q class="u-quote-v1 g-flex-middle-item g-color-white g-font-weight-700 g-font-size-16 text-uppercase">changing your mind and changing world</q>

                        <!-- Figure Social Icons -->
                        <ul class="list-inline g-flex-middle-item--bottom g-mb-30 mt-0">
                          <li class="list-inline-item g-mx-3">
                            <a class="u-icon-v3 u-icon-size--xs g-bg-white g-color-primary g-color-primary--hover 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-bg-white g-color-primary g-color-primary--hover 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-bg-white g-color-primary g-color-primary--hover 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-bg-white g-color-primary g-color-primary--hover g-bg-black--hover" href="#">
                              <i class="fa fa-linkedin"></i>
                            </a>
                          </li>
                        </ul>
                        <!-- End Figure Social Icons -->
                      </figcaption>
                      <!-- End Figure Caption -->
                    </figure>
                    <!-- End Figure -->

                    <!-- Figure Info -->
                    <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary g-mb-5">Co-Founder</em>
                    <h4 class="h5 g-color-black g-mb-5">Alexandr Williams</h4>
                    <p class="g-font-size-12">creative director</p>
                    <!-- End Figure Info-->
                  </div>
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <div class="text-center u-block-hover">
                    <!-- Figure -->
                    <figure class="u-block-hover g-mb-25">
                      <!-- 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 g-px-10">
                        <q class="u-quote-v1 g-flex-middle-item g-color-white g-font-weight-700 g-font-size-16 text-uppercase">changing your mind and changing world</q>

                        <!-- Figure Social Icons -->
                        <ul class="list-inline g-flex-middle-item--bottom g-mb-30 mt-0">
                          <li class="list-inline-item g-mx-3">
                            <a class="u-icon-v3 u-icon-size--xs g-bg-white g-color-primary g-color-primary--hover 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-bg-white g-color-primary g-color-primary--hover 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-bg-white g-color-primary g-color-primary--hover 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-bg-white g-color-primary g-color-primary--hover g-bg-black--hover" href="#">
                              <i class="fa fa-linkedin"></i>
                            </a>
                          </li>
                        </ul>
                        <!-- End Figure Social Icons -->
                      </figcaption>
                      <!-- End Figure Caption -->
                    </figure>
                    <!-- End Figure -->

                    <!-- Figure Info -->
                    <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary g-mb-5">Co-Founder</em>
                    <h4 class="h5 g-color-black g-mb-5">Katarina Assange</h4>
                    <p class="g-font-size-12">marketing director</p>
                    <!-- End Figure Info-->
                  </div>
                </div>
              </div>
              <!-- End Team Block -->
            </div>
          </div>

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

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

        <div class="container">
          <div id="shortcode14">
            <div class="shortcode-html">
              <!-- Team Block -->
              <div class="row">
                <div class="col-sm-4 g-mb-60">
                  <!-- Figure -->
                  <figure class="text-center">
                    <!-- Figure Image -->
                    <div class="d-block mx-auto rounded-circle g-max-width-200 g-bg-white g-pa-5 g-mb-15">
                      <img class="rounded-circle g-max-width-190" src="{{ root }}assets/img-temp/200x200/img3.jpg" alt="Image Description">
                    </div>
                    <!-- End Figure Image -->

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

                    <!-- Figure Social Icons -->
                    <ul class="text-center list-inline mb-0">
                      <li class="list-inline-item g-mx-4">
                        <a href="#" class="u-icon-v3 u-icon-size--sm g-bg-gray-light-v5 g-color-gray-light-v2 g-bg-primary--hover g-color-white--hover rounded-circle">
                          <i class="fa fa-twitter"></i>
                        </a>
                      </li>
                      <li class="list-inline-item g-mx-4">
                        <a href="#" class="u-icon-v3 u-icon-size--sm g-bg-gray-light-v5 g-color-gray-light-v2 g-bg-primary--hover g-color-white--hover rounded-circle">
                          <i class="fa fa-facebook"></i>
                        </a>
                      </li>
                      <li class="list-inline-item g-mx-4">
                        <a href="#" class="u-icon-v3 u-icon-size--sm g-bg-gray-light-v5 g-color-gray-light-v2 g-bg-primary--hover g-color-white--hover rounded-circle">
                          <i class="fa fa-dribbble"></i>
                        </a>
                      </li>
                    </ul>
                    <!-- End Figure Social Icons -->
                  </figure>
                  <!-- End Figure -->
                </div>

                <div class="col-sm-4 g-mb-60">
                  <!-- Figure -->
                  <figure class="text-center">
                    <!-- Figure Image -->
                    <div class="d-block mx-auto rounded-circle g-max-width-200 g-bg-white g-pa-5 g-mb-15">
                      <img class="rounded-circle g-max-width-190" src="{{ root }}assets/img-temp/200x200/img4.jpg" alt="Image Description">
                    </div>
                    <!-- End Figure Image -->

                    <!-- Figure Info -->
                    <div class="g-mb-15">
                      <h4 class="h4 g-color-black g-mb-5">Dorian Black</h4>
                      <em class="g-font-style-normal g-font-size-11 text-uppercase g-color-primary">Photography</em>
                    </div>
                    <p>I am an ambitious workaholic, but apart from that, pretty simple person.</p>
                    <!-- End Info -->

                    <!-- Figure Social Icons -->
                    <ul class="text-center list-inline mb-0">
                      <li class="list-inline-item g-mx-4">
                        <a href="#" class="u-icon-v3 u-icon-size--sm g-bg-gray-light-v5 g-color-gray-light-v2 g-bg-primary--hover g-color-white--hover rounded-circle">
                          <i class="fa fa-twitter"></i>
                        </a>
                      </li>
                      <li class="list-inline-item g-mx-4">
                        <a href="#" class="u-icon-v3 u-icon-size--sm g-bg-gray-light-v5 g-color-gray-light-v2 g-bg-primary--hover g-color-white--hover rounded-circle">
                          <i class="fa fa-facebook"></i>
                        </a>
                      </li>
                      <li class="list-inline-item g-mx-4">
                        <a href="#" class="u-icon-v3 u-icon-size--sm g-bg-gray-light-v5 g-color-gray-light-v2 g-bg-primary--hover g-color-white--hover rounded-circle">
                          <i class="fa fa-dribbble"></i>
                        </a>
                      </li>
                    </ul>
                    <!-- End Figure Social Icons -->
                  </figure>
                  <!-- End Figure -->
                </div>

                <div class="col-sm-4 g-mb-60">
                  <!-- Figure -->
                  <figure class="text-center">
                    <!-- Figure Image -->
                    <div class="d-block mx-auto rounded-circle g-max-width-200 g-bg-white g-pa-5 g-mb-15">
                      <img class="rounded-circle g-max-width-190" src="{{ root }}assets/img-temp/200x200/img6.jpg" alt="Image Description">
                    </div>
                    <!-- End Figure Image -->

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

                    <!-- Figure Social Icons -->
                    <ul class="text-center list-inline mb-0">
                      <li class="list-inline-item g-mx-4">
                        <a href="#" class="u-icon-v3 u-icon-size--sm g-bg-gray-light-v5 g-color-gray-light-v2 g-bg-primary--hover g-color-white--hover rounded-circle">
                          <i class="fa fa-twitter"></i>
                        </a>
                      </li>
                      <li class="list-inline-item g-mx-4">
                        <a href="#" class="u-icon-v3 u-icon-size--sm g-bg-gray-light-v5 g-color-gray-light-v2 g-bg-primary--hover g-color-white--hover rounded-circle">
                          <i class="fa fa-facebook"></i>
                        </a>
                      </li>
                      <li class="list-inline-item g-mx-4">
                        <a href="#" class="u-icon-v3 u-icon-size--sm g-bg-gray-light-v5 g-color-gray-light-v2 g-bg-primary--hover g-color-white--hover rounded-circle">
                          <i class="fa fa-dribbble"></i>
                        </a>
                      </li>
                    </ul>
                    <!-- End Figure Social Icons -->
                  </figure>
                  <!-- End Figure -->
                </div>
              </div>
              <!-- End Team Block -->
            </div>
          </div>

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

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

        <div class="container">
          <div id="shortcode15">
            <div class="shortcode-html">
              <div class="row g-mx-minus-25 g-mb-40">
                <div class="col-6 col-lg-3 g-px-25 g-mb-50">
                  <!-- Team -->
                  <div class="text-center">
                    <img class="u-shadow-v29 g-width-110 g-height-110 rounded-circle mb-5" src="{{ root }}assets/img-temp/200x200/img1.jpg" alt="Image Description">
                    <h4 class="h5 g-font-weight-600 mb-1">Alex Taylor</h4>
                    <span class="d-block g-color-primary">Founder</span>
                    <hr class="g-brd-gray-light-v4 g-my-15">
                    <a class="u-link-v5 g-color-gray-dark-v4 g-color-black--hover g-font-size-13" href="#">alex@gmail.com</a>
                  </div>
                  <!-- End Team -->
                </div>

                <div class="col-6 col-lg-3 g-px-25 g-mb-50">
                  <!-- Team -->
                  <div class="text-center">
                    <img class="u-shadow-v29 g-width-110 g-height-110 rounded-circle mb-5" src="{{ root }}assets/img-temp/200x200/img3.jpg" alt="Image Description">
                    <h4 class="h5 g-font-weight-600 mb-1">Kate Metu</h4>
                    <span class="d-block g-color-primary">Manager</span>
                    <hr class="g-brd-gray-light-v4 g-my-15">
                    <a class="u-link-v5 g-color-gray-dark-v4 g-color-black--hover g-font-size-13" href="#">kate@gmail.com</a>
                  </div>
                  <!-- End Team -->
                </div>

                <div class="col-6 col-lg-3 g-px-25 g-mb-50">
                  <!-- Team -->
                  <div class="text-center">
                    <img class="u-shadow-v29 g-width-110 g-height-110 rounded-circle mb-5" src="{{ root }}assets/img-temp/200x200/img4.jpg" alt="Image Description">
                    <h4 class="h5 g-font-weight-600 mb-1">Daniel Wearne</h4>
                    <span class="d-block g-color-primary">Developer</span>
                    <hr class="g-brd-gray-light-v4 g-my-15">
                    <a class="u-link-v5 g-color-gray-dark-v4 g-color-black--hover g-font-size-13" href="#">daniel@gmail.com</a>
                  </div>
                  <!-- End Team -->
                </div>

                <div class="col-6 col-lg-3 g-px-25 g-mb-50">
                  <!-- Team -->
                  <div class="text-center">
                    <img class="u-shadow-v29 g-width-110 g-height-110 rounded-circle mb-5" src="{{ root }}assets/img-temp/200x200/img2.jpg" alt="Image Description">
                    <h4 class="h5 g-font-weight-600 mb-1">Tina Krueger</h4>
                    <span class="d-block g-color-primary">Designer</span>
                    <hr class="g-brd-gray-light-v4 g-my-15">
                    <a class="u-link-v5 g-color-gray-dark-v4 g-color-black--hover g-font-size-13" href="#">tina@gmail.com</a>
                  </div>
                  <!-- End Team -->
                </div>
              </div>
            </div>
          </div>

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

      <!-- Team Blocks v16 -->
      <section class="g-bg-secondary g-py-100">
        <div class="text-center g-mb-50">
          <h2 class="h4">Team Blocks
            <span class="g-color-primary g-ml-5">#16</span>
          </h2>
        </div>

        <div class="container">
          <div id="shortcode16">
            <div class="shortcode-html">
              <!-- Consultants - Content -->
              <div class="row">
                <div class="col-lg-6 g-mb-60">
                  <!-- Accordion -->
                  <div id="accordion-12-1" class="u-accordion u-accordion-color-primary" role="tablist" aria-multiselectable="true">
                    <!-- Card -->
                    <div class="card g-brd-none g-bg-transparent rounded-0">
                      <div class="row">
                        <div class="col-md-5">
                          <!-- Consultants Info -->
                          <div class="g-bg-secondary text-center g-pa-20">
                            <div class="u-shadow-v19 g-width-110 g-height-110 g-brd-around g-brd-5 g-brd-white rounded-circle mx-auto mb-4">
                              <img class="img-fluid rounded-circle" src="{{ root }}assets/img-temp/200x200/img3.jpg" alt="Image description">
                            </div>
                            <h3 class="h6 mb-3">&#171;Do you find it difficult to choose? - I will assist you.&#187;</h3>
                            <span class="d-block g-font-size-11 g-color-gray-dark-v5">Maria Olsson</span>
                            <span class="d-block g-font-size-11 g-color-gray-dark-v5">Expert in US Marketing</span>
                          </div>
                          <!-- End Consultants Info -->

                          <!-- Accordion - Trigger -->
                          <div id="accordion-12-1-heading-01" class="g-pa-0" role="tab">
                            <a class="btn btn-block u-btn-primary g-font-weight-600 g-font-size-12 text-uppercase rounded-0 g-px-25 g-py-13" href="#accordion-12-1-body-01" data-toggle="collapse" data-parent="#accordion-12-1" aria-expanded="false" aria-controls="accordion-12-1-body-01">
                              Contact Me
                            </a>
                          </div>
                          <!-- End Accordion - Trigger -->
                        </div>

                        <div class="col-md-7">
                          <!-- Consultants Content -->
                          <h3 class="h5">Expert in US</h3>
                          <p class="g-line-height-2">This is where I sit down, grab a cup of coffee and dial in the details. Understanding the task at hand and ironing out the wrinkles is key.</p>
                          <ul class="list-unstyled g-color-gray-dark-v5 mb-0">
                            <li class="my-2"><span class="g-color-primary g-font-size-20 g-pos-rel g-top-2">&triangleright;</span> Business transformation</li>
                            <li class="my-2"><span class="g-color-primary g-font-size-20 g-pos-rel g-top-2">&triangleright;</span> Growth strategy</li>
                            <li class="my-2"><span class="g-color-primary g-font-size-20 g-pos-rel g-top-2">&triangleright;</span> M&amp;A transaction support</li>
                            <li class="my-2"><span class="g-color-primary g-font-size-20 g-pos-rel g-top-2">&triangleright;</span> Restructuring and turnaround</li>
                            <li class="my-2"><span class="g-color-primary g-font-size-20 g-pos-rel g-top-2">&triangleright;</span> Growth strategy</li>
                          </ul>
                          <!-- End Consultants Content -->
                        </div>
                      </div>

                      <!-- Accordion - Content -->
                      <div id="accordion-12-1-body-01" class="collapse" role="tabpanel" aria-labelledby="accordion-12-1-heading-01"
                           data-parent="#accordion-12-1">
                        <div class="u-accordion__body g-color-gray-dark-v4 g-pl-0">
                          <!-- Accordion Form -->
                          <form class="g-bg-gray-light-v5 g-pa-20 g-pb-0">
                            <div class="row g-mx-minus-10">
                              <div class="col-sm-6 g-px-5 g-mb-20">
                                <input class="form-control g-color-main g-brd-gray-light-v4 g-brd-primary--focus g-bg-white g-font-size-13 rounded g-py-13 g-px-15" type="text" placeholder="John">
                              </div>
                              <div class="col-sm-6 g-px-5 g-mb-20">
                                <input class="form-control g-color-main g-brd-gray-light-v4 g-brd-primary--focus g-bg-white g-font-size-13 rounded g-py-13 g-px-15" type="email" placeholder="johndoe@gmail.com">
                              </div>
                            </div>

                            <div class="row g-mx-minus-10">
                              <div class="col-sm-6 g-px-5 g-mb-20">
                                <input class="form-control g-color-main g-brd-gray-light-v4 g-brd-primary--focus g-bg-white g-font-size-13 rounded g-py-13 g-px-15" type="tel" placeholder="+ (01) 222 33 44">
                              </div>

                              <div class="col-sm-6 g-px-5 g-mb-20">
                                <input class="form-control g-color-main g-brd-gray-light-v4 g-brd-primary--focus g-bg-white g-font-size-13 rounded g-py-13 g-px-15" type="text" placeholder="Partnership">
                              </div>
                            </div>

                            <div class="row g-mx-minus-10">
                              <div class="col-sm-8 g-px-5 g-mb-20">
                                <textarea class="form-control g-color-main g-brd-gray-light-v4 g-brd-primary--focus g-bg-white g-font-size-13 rounded g-py-13 g-px-15" rows="4" placeholder="Hi there, I would like to ..."></textarea>
                              </div>

                              <div class="col-md-4 align-self-end g-mb-20">
                                <button class="btn btn-block u-btn-primary g-font-weight-600 g-font-size-13 text-uppercase rounded-3 g-py-12 g-px-35" type="submit" role="button">Submit</button>
                              </div>
                            </div>
                          </form>
                          <!-- End Accordion Form -->
                        </div>
                      </div>
                      <!-- End Accordion - Content -->
                    </div>
                    <!-- End Card -->
                  </div>
                  <!-- End Accordion -->
                </div>

                <div class="col-lg-6 g-mb-60">
                  <!-- Accordion -->
                  <div id="accordion-12-2" class="u-accordion u-accordion-color-primary" role="tablist" aria-multiselectable="true">
                    <!-- Card -->
                    <div class="card g-brd-none g-bg-transparent rounded-0">
                      <div class="row">
                        <div class="col-md-5">
                          <!-- Consultants Info -->
                          <div class="g-bg-secondary text-center g-pa-20">
                            <div class="u-shadow-v19 g-width-110 g-height-110 g-brd-around g-brd-5 g-brd-white rounded-circle mx-auto mb-4">
                              <img class="img-fluid rounded-circle" src="{{ root }}assets/img-temp/200x200/img4.jpg" alt="Image description">
                            </div>
                            <h3 class="h6 mb-3">&#171;Do you find it difficult to choose? - I will assist you.&#187;</h3>
                            <span class="d-block g-font-size-11 g-color-gray-dark-v5">Alex Clarson</span>
                            <span class="d-block g-font-size-11 g-color-gray-dark-v5">Expert in Europe Marketing</span>
                          </div>
                          <!-- End Consultants Info -->

                          <!-- Accordion - Trigger -->
                          <div id="accordion-12-2-heading-01" class="g-pa-0" role="tab">
                            <a class="btn btn-block u-btn-primary g-font-weight-600 g-font-size-12 text-uppercase rounded-0 g-px-25 g-py-13" href="#accordion-12-2-body-01" data-toggle="collapse" data-parent="#accordion-12-2" aria-expanded="false" aria-controls="accordion-12-2-body-01">
                              Contact Me
                            </a>
                          </div>
                          <!-- End Accordion - Trigger -->
                        </div>

                        <div class="col-md-7">
                          <!-- Consultants Content -->
                          <h3 class="h5">Expert in Europe</h3>
                          <p class="g-line-height-2">This is where I sit down, grab a cup of coffee and dial in the details. Understanding the task at hand and ironing out the wrinkles is key.</p>
                          <ul class="list-unstyled g-color-gray-dark-v5 mb-0">
                            <li class="my-2"><span class="g-color-primary g-font-size-20 g-pos-rel g-top-2">&triangleright;</span> Business transformation</li>
                            <li class="my-2"><span class="g-color-primary g-font-size-20 g-pos-rel g-top-2">&triangleright;</span> M&amp;A transaction support</li>
                            <li class="my-2"><span class="g-color-primary g-font-size-20 g-pos-rel g-top-2">&triangleright;</span> Restructuring and turnaround</li>
                          </ul>
                          <!-- End Consultants Content -->
                        </div>
                      </div>

                      <!-- Accordion - Content -->
                      <div id="accordion-12-2-body-01" class="collapse" role="tabpanel" aria-labelledby="accordion-12-2-heading-01"
                           data-parent="#accordion-12-2">
                        <div class="u-accordion__body g-color-gray-dark-v4 g-pl-0">
                          <!-- Accordion Form -->
                          <form class="g-bg-secondary g-pa-20 g-pb-0">
                            <div class="row g-mx-minus-10">
                              <div class="col-sm-6 g-px-5 g-mb-20">
                                <input class="form-control g-color-main g-brd-gray-light-v4 g-brd-primary--focus g-bg-white g-font-size-13 rounded g-py-13 g-px-15" type="text" placeholder="John">
                              </div>
                              <div class="col-sm-6 g-px-5 g-mb-20">
                                <input class="form-control g-color-main g-brd-gray-light-v4 g-brd-primary--focus g-bg-white g-font-size-13 rounded g-py-13 g-px-15" type="email" placeholder="johndoe@gmail.com">
                              </div>
                            </div>

                            <div class="row g-mx-minus-10">
                              <div class="col-sm-6 g-px-5 g-mb-20">
                                <input class="form-control g-color-main g-brd-gray-light-v4 g-brd-primary--focus g-bg-white g-font-size-13 rounded g-py-13 g-px-15" type="tel" placeholder="+ (01) 222 33 44">
                              </div>

                              <div class="col-sm-6 g-px-5 g-mb-20">
                                <input class="form-control g-color-main g-brd-gray-light-v4 g-brd-primary--focus g-bg-white g-font-size-13 rounded g-py-13 g-px-15" type="text" placeholder="Partnership">
                              </div>
                            </div>

                            <div class="row g-mx-minus-10">
                              <div class="col-sm-8 g-px-5 g-mb-20">
                                <textarea class="form-control g-color-main g-brd-gray-light-v4 g-brd-primary--focus g-bg-white g-font-size-13 rounded g-py-13 g-px-15" rows="4" placeholder="Hi there, I would like to ..."></textarea>
                              </div>

                              <div class="col-md-4 align-self-end g-mb-20">
                                <button class="btn btn-block u-btn-primary g-font-weight-600 g-font-size-13 text-uppercase rounded-3 g-py-12 g-px-35" type="submit" role="button">Submit</button>
                              </div>
                            </div>
                          </form>
                          <!-- End Accordion Form -->
                        </div>
                      </div>
                      <!-- End Accordion - Content -->
                    </div>
                    <!-- End Card -->
                  </div>
                  <!-- End Accordion -->
                </div>
              </div>
              <!-- End Consultants - Content -->
            </div>
          </div>

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

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

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

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

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

  <!-- JS Implementing Plugins -->
  <script src="{{ root }}assets/vendor/appear.js"></script>
  <script src="{{ root }}assets/vendor/hs-megamenu/src/hs.megamenu.js"></script>
  {% include "html/assets/include/nunjucks/partials/js/js-dzsparallaxer.njk" %}

  {% 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.progress-bar.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');
    });

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

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

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

      // initialization of horizontal progress bars
      setTimeout(function () { // important in this case
        var horizontalProgressBars = $.HSCore.components.HSProgressBar.init('.js-hr-progress-bar', {
          direction: 'horizontal',
          indicatorSelector: '.js-hr-progress-bar-indicator'
        });
      }, 1);
    });
  </script>
</body>
</html>
