{# Settings #}
{% set root = "../../../" %}
{% set sidebarNavActive_1 = "shortcode-base-tabs" %}
{% set title = "Tabs v8-1 | " %}

{% include "html/assets/include/nunjucks/partials/head.njk" %}
{% include "html/assets/include/nunjucks/partials/core-fonts.njk" %}
{% include "html/assets/include/nunjucks/partials/core-css.njk" %}
<link rel="stylesheet" href="{{ root }}assets/vendor/bootstrap/offcanvas.css">
{% include "html/assets/include/nunjucks/partials/core-icons.njk" %}
{% include "html/assets/include/nunjucks/partials/css/css-dzsparallaxer.njk" %}
<link rel="stylesheet" href="{{ root }}assets/vendor/animate.css">
<link rel="stylesheet" href="{{ root }}assets/vendor/jquery-ui/themes/base/jquery-ui.min.css">
<link rel="stylesheet" href="{{ root }}assets/vendor/wait-animate.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>
  <main>
    {% include "html/assets/include/nunjucks/partials/blocks/headers/header-main-fullwidth.njk" %}

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

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

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

          <section class="g-pb-100">
            <div class="container">
              <!-- Tab v8-1 (slide-up-down) -->
              <section>
                <header class="g-mb-60">
                  <div class="u-heading-v6-2 text-uppercase">
                    <h2 class="h4 u-heading-v6__title g-font-weight-300">Tab v8-1</h2>
                  </div>

                  <div class="g-pl-90">
                    <p>slide-up-down</p>
                  </div>
                </header>

                <!-- Default color, horizontal, align-left -->
                <div class="row">
                  <div class="col-md-3">
                    <h3 class="h4 g-font-weight-300 g-mb-20">Default color, horizontal, align-left</h3>
                  </div>

                  <div class="col-md-9">
                    <div id="shortcode1">
                      <div class="shortcode-html">
                        <!-- Nav tabs -->
                        <ul class="nav u-nav-v8-1" role="tablist"
                            data-target="nav-8-1-default-hor-left"
                            data-tabs-mobile-type="slide-up-down"
                            data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-lightgray">
                          <li class="nav-item">
                            <a class="nav-link active" data-toggle="tab" href="#nav-8-1-default-hor-left--1" role="tab">
                              <span class="u-nav-v8__icon u-icon-v3 u-icon-size--lg g-rounded-50x g-brd-around g-brd-4 g-brd-white">
                                <i class="fa fa-binoculars"></i>
                              </span>
                              <strong class="text-uppercase u-nav-v8__title">Detracto</strong>
                              <em class="u-nav-v8__description">Lorem ipsum dolor sit amet.</em>
                            </a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#nav-8-1-default-hor-left--2" role="tab">
                              <span class="u-nav-v8__icon u-icon-v3 u-icon-size--lg g-rounded-50x g-brd-around g-brd-4 g-brd-white">
                                <i class="fa fa-coffee"></i>
                              </span>
                              <strong class="text-uppercase u-nav-v8__title">Sea et</strong>
                              <em class="u-nav-v8__description">Lorem ipsum dolor sit amet.</em>
                            </a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#nav-8-1-default-hor-left--3" role="tab">
                              <span class="u-nav-v8__icon u-icon-v3 u-icon-size--lg g-rounded-50x g-brd-around g-brd-4 g-brd-white">
                                <i class="fa fa-birthday-cake"></i>
                              </span>
                              <strong class="text-uppercase u-nav-v8__title">Omittantur</strong>
                              <em class="u-nav-v8__description">Lorem ipsum dolor sit amet.</em>
                            </a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#nav-8-1-default-hor-left--4" role="tab">
                              <span class="u-nav-v8__icon u-icon-v3 u-icon-size--lg g-rounded-50x g-brd-around g-brd-4 g-brd-white">
                                <i class="fa fa-heart"></i>
                              </span>
                              <strong class="text-uppercase u-nav-v8__title">Accommodare</strong>
                              <em class="u-nav-v8__description">Lorem ipsum dolor sit amet.</em>
                            </a>
                          </li>
                        </ul>
                        <!-- End Nav tabs -->

                        <!-- Tab panes -->
                        <div id="nav-8-1-default-hor-left" class="tab-content g-pt-20">
                          <div class="tab-pane fade show active" id="nav-8-1-default-hor-left--1" role="tabpanel">
                            <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                            <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                          </div>

                          <div class="tab-pane fade" id="nav-8-1-default-hor-left--2" role="tabpanel">
                            <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                            <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                          </div>

                          <div class="tab-pane fade" id="nav-8-1-default-hor-left--3" role="tabpanel">
                            <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                            <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                          </div>

                          <div class="tab-pane fade" id="nav-8-1-default-hor-left--4" role="tabpanel">
                            <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                            <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                          </div>
                        </div>
                        <!-- End Tab panes -->
                      </div>

                      <div class="shortcode-scripts">
                        <!-- JS Unify -->
                        <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                        <!-- JS Plugins Init. -->
                        <script type="text/plain">
                          $(document).on('ready', function () {
                            // initialization of tabs
                            $.HSCore.components.HSTabs.init('[role="tablist"]');
                          });

                          $(window).on('resize', function () {
                            setTimeout(function () {
                              $.HSCore.components.HSTabs.init('[role="tablist"]');
                            }, 200);
                          });
                        </script>
                      </div>
                    </div>

                    {% set contentTarget = "#shortcode1" %}
                    {% set modalID = "#modalMarkup" %}
                    {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
                  </div>
                </div>
                <!-- End Default color, horizontal, align-left -->

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

                <!-- Primary color, horizontal, align-center -->
                <div class="row">
                  <div class="col-md-3">
                    <h3 class="h4 g-font-weight-300 g-mb-20">Primary color, horizontal, align-center</h3>
                  </div>

                  <div class="col-md-9">
                    <div id="shortcode2">
                      <div class="shortcode-html">
                        <!-- Nav tabs -->
                        <ul class="nav text-center justify-content-center u-nav-v8-1" role="tablist"
                            data-target="nav-8-1-primary-hor-center"
                            data-tabs-mobile-type="slide-up-down"
                            data-btn-classes="btn btn-md btn-block u-btn-outline-primary">
                          <li class="nav-item">
                            <a class="nav-link active" data-toggle="tab" href="#nav-8-1-primary-hor-center--1" role="tab">
                              <span class="u-nav-v8__icon u-icon-v3 u-icon-size--lg g-rounded-50x g-brd-around g-brd-4 g-brd-white">
                                <i class="fa fa-binoculars"></i>
                              </span>
                              <strong class="text-uppercase u-nav-v8__title">Detracto</strong>
                              <em class="u-nav-v8__description">Lorem ipsum dolor sit amet.</em>
                            </a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#nav-8-1-primary-hor-center--2" role="tab">
                              <span class="u-nav-v8__icon u-icon-v3 u-icon-size--lg g-rounded-50x g-brd-around g-brd-4 g-brd-white">
                                <i class="fa fa-coffee"></i>
                              </span>
                              <strong class="text-uppercase u-nav-v8__title">Sea et</strong>
                              <em class="u-nav-v8__description">Lorem ipsum dolor sit amet.</em>
                            </a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#nav-8-1-primary-hor-center--3" role="tab">
                              <span class="u-nav-v8__icon u-icon-v3 u-icon-size--lg g-rounded-50x g-brd-around g-brd-4 g-brd-white">
                                <i class="fa fa-birthday-cake"></i>
                              </span>
                              <strong class="text-uppercase u-nav-v8__title">Omittantur</strong>
                              <em class="u-nav-v8__description">Lorem ipsum dolor sit amet.</em>
                            </a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#nav-8-1-primary-hor-center--4" role="tab">
                              <span class="u-nav-v8__icon u-icon-v3 u-icon-size--lg g-rounded-50x g-brd-around g-brd-4 g-brd-white">
                                <i class="fa fa-heart"></i>
                              </span>
                              <strong class="text-uppercase u-nav-v8__title">Accommodare</strong>
                              <em class="u-nav-v8__description">Lorem ipsum dolor sit amet.</em>
                            </a>
                          </li>
                        </ul>
                        <!-- End Nav tabs -->

                        <!-- Tab panes -->
                        <div id="nav-8-1-primary-hor-center" class="tab-content g-pt-20">
                          <div class="tab-pane fade show active" id="nav-8-1-primary-hor-center--1" role="tabpanel">
                            <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                            <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                          </div>

                          <div class="tab-pane fade" id="nav-8-1-primary-hor-center--2" role="tabpanel">
                            <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                            <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                          </div>

                          <div class="tab-pane fade" id="nav-8-1-primary-hor-center--3" role="tabpanel">
                            <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                            <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                          </div>

                          <div class="tab-pane fade" id="nav-8-1-primary-hor-center--4" role="tabpanel">
                            <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                            <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                          </div>
                        </div>
                        <!-- End Tab panes -->
                      </div>

                      <div class="shortcode-scripts">
                        <!-- JS Unify -->
                        <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                        <!-- JS Plugins Init. -->
                        <script type="text/plain">
                          $(document).on('ready', function () {
                            // initialization of tabs
                            $.HSCore.components.HSTabs.init('[role="tablist"]');
                          });

                          $(window).on('resize', function () {
                            setTimeout(function () {
                              $.HSCore.components.HSTabs.init('[role="tablist"]');
                            }, 200);
                          });
                        </script>
                      </div>
                    </div>

                    {% set contentTarget = "#shortcode2" %}
                    {% set modalID = "#modalMarkup" %}
                    {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
                  </div>
                </div>
                <!-- End Primary color, horizontal, align-center -->

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

                <!-- Dark color, horizontal, align-right -->
                <div class="row">
                  <div class="col-md-3">
                    <h3 class="h4 g-font-weight-300 g-mb-20">Dark color, horizontal, align-right</h3>
                  </div>

                  <div class="col-md-9">
                    <div id="shortcode3">
                      <div class="shortcode-html">
                        <!-- Nav tabs -->
                        <ul class="nav text-md-right justify-content-end u-nav-v8-1 u-nav-dark" role="tablist"
                            data-target="nav-8-1-dark-hor-right"
                            data-tabs-mobile-type="slide-up-down"
                            data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-darkgray">
                          <li class="nav-item">
                            <a class="nav-link active" data-toggle="tab" href="#nav-8-1-dark-hor-right--1" role="tab">
                              <span class="u-nav-v8__icon u-icon-v3 u-icon-size--lg g-rounded-50x g-brd-around g-brd-4 g-brd-white">
                                <i class="fa fa-binoculars"></i>
                              </span>
                              <strong class="text-uppercase u-nav-v8__title">Detracto</strong>
                              <em class="u-nav-v8__description">Lorem ipsum dolor sit amet.</em>
                            </a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#nav-8-1-dark-hor-right--2" role="tab">
                              <span class="u-nav-v8__icon u-icon-v3 u-icon-size--lg g-rounded-50x g-brd-around g-brd-4 g-brd-white">
                                <i class="fa fa-coffee"></i>
                              </span>
                              <strong class="text-uppercase u-nav-v8__title">Sea et</strong>
                              <em class="u-nav-v8__description">Lorem ipsum dolor sit amet.</em>
                            </a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#nav-8-1-dark-hor-right--3" role="tab">
                              <span class="u-nav-v8__icon u-icon-v3 u-icon-size--lg g-rounded-50x g-brd-around g-brd-4 g-brd-white">
                                <i class="fa fa-birthday-cake"></i>
                              </span>
                              <strong class="text-uppercase u-nav-v8__title">Omittantur</strong>
                              <em class="u-nav-v8__description">Lorem ipsum dolor sit amet.</em>
                            </a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#nav-8-1-dark-hor-right--4" role="tab">
                              <span class="u-nav-v8__icon u-icon-v3 u-icon-size--lg g-rounded-50x g-brd-around g-brd-4 g-brd-white">
                                <i class="fa fa-heart"></i>
                              </span>
                              <strong class="text-uppercase u-nav-v8__title">Accommodare</strong>
                              <em class="u-nav-v8__description">Lorem ipsum dolor sit amet.</em>
                            </a>
                          </li>
                        </ul>
                        <!-- End Nav tabs -->

                        <!-- Tab panes -->
                        <div id="nav-8-1-dark-hor-right" class="tab-content g-pt-20">
                          <div class="tab-pane fade show active" id="nav-8-1-dark-hor-right--1" role="tabpanel">
                            <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                            <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                          </div>

                          <div class="tab-pane fade" id="nav-8-1-dark-hor-right--2" role="tabpanel">
                            <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                            <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                          </div>

                          <div class="tab-pane fade" id="nav-8-1-dark-hor-right--3" role="tabpanel">
                            <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                            <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                          </div>

                          <div class="tab-pane fade" id="nav-8-1-dark-hor-right--4" role="tabpanel">
                            <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                            <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                          </div>
                        </div>
                        <!-- End Tab panes -->
                      </div>

                      <div class="shortcode-scripts">
                        <!-- JS Unify -->
                        <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                        <!-- JS Plugins Init. -->
                        <script type="text/plain">
                          $(document).on('ready', function () {
                            // initialization of tabs
                            $.HSCore.components.HSTabs.init('[role="tablist"]');
                          });

                          $(window).on('resize', function () {
                            setTimeout(function () {
                              $.HSCore.components.HSTabs.init('[role="tablist"]');
                            }, 200);
                          });
                        </script>
                      </div>
                    </div>

                    {% set contentTarget = "#shortcode3" %}
                    {% set modalID = "#modalMarkup" %}
                    {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
                  </div>
                </div>
                <!-- End Dark color, horizontal, align-right -->

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

                <!-- Light color, horizontal -->
                <div class="row">
                  <div class="col-md-3">
                    <h3 class="h4 g-font-weight-300 g-mb-20">Light color, horizontal, navigation fill</h3>
                  </div>

                  <div class="col-md-9">
                    <div id="shortcode4">
                      <div class="shortcode-html">
                        <div class="g-bg-gray-dark-v2 g-color-white g-px-15 g-py-50">
                          <!-- Nav tabs -->
                          <ul class="nav nav-fill u-nav-v8-1 u-nav-light" role="tablist"
                              data-target="nav-8-1-primary-hor-fill"
                              data-tabs-mobile-type="slide-up-down"
                              data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-white">
                            <li class="nav-item">
                              <a class="nav-link active" data-toggle="tab" href="#nav-8-1-primary-hor-fill--1" role="tab">
                                <span class="u-nav-v8__icon u-icon-v3 u-icon-size--lg g-rounded-50x g-brd-around g-brd-4 g-brd-gray-dark-v2">
                                  <i class="fa fa-binoculars"></i>
                                </span>
                                <strong class="text-uppercase u-nav-v8__title">Detracto</strong>
                                <em class="u-nav-v8__description">Lorem ipsum dolor sit amet.</em>
                              </a>
                            </li>
                            <li class="nav-item">
                              <a class="nav-link" data-toggle="tab" href="#nav-8-1-primary-hor-fill--2" role="tab">
                                <span class="u-nav-v8__icon u-icon-v3 u-icon-size--lg g-rounded-50x g-brd-around g-brd-4 g-brd-gray-dark-v2">
                                  <i class="fa fa-coffee"></i>
                                </span>
                                <strong class="text-uppercase u-nav-v8__title">Sea et</strong>
                                <em class="u-nav-v8__description">Lorem ipsum dolor sit amet.</em>
                              </a>
                            </li>
                            <li class="nav-item">
                              <a class="nav-link" data-toggle="tab" href="#nav-8-1-primary-hor-fill--3" role="tab">
                                <span class="u-nav-v8__icon u-icon-v3 u-icon-size--lg g-rounded-50x g-brd-around g-brd-4 g-brd-gray-dark-v2">
                                  <i class="fa fa-birthday-cake"></i>
                                </span>
                                <strong class="text-uppercase u-nav-v8__title">Omittantur</strong>
                                <em class="u-nav-v8__description">Lorem ipsum dolor sit amet.</em>
                              </a>
                            </li>
                            <li class="nav-item">
                              <a class="nav-link" data-toggle="tab" href="#nav-8-1-primary-hor-fill--4" role="tab">
                                <span class="u-nav-v8__icon u-icon-v3 u-icon-size--lg g-rounded-50x g-brd-around g-brd-4 g-brd-gray-dark-v2">
                                  <i class="fa fa-heart"></i>
                                </span>
                                <strong class="text-uppercase u-nav-v8__title">Accommodare</strong>
                                <em class="u-nav-v8__description">Lorem ipsum dolor sit amet.</em>
                              </a>
                            </li>
                          </ul>
                          <!-- End Nav tabs -->

                          <!-- Tab panes -->
                          <div id="nav-8-1-primary-hor-fill" class="tab-content g-pt-20">
                            <div class="tab-pane fade show active" id="nav-8-1-primary-hor-fill--1" role="tabpanel">
                              <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                              <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                            </div>

                            <div class="tab-pane fade" id="nav-8-1-primary-hor-fill--2" role="tabpanel">
                              <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                              <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                            </div>

                            <div class="tab-pane fade" id="nav-8-1-primary-hor-fill--3" role="tabpanel">
                              <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                              <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                            </div>

                            <div class="tab-pane fade" id="nav-8-1-primary-hor-fill--4" role="tabpanel">
                              <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                              <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                            </div>
                          </div>
                          <!-- End Tab panes -->
                        </div>
                      </div>

                      <div class="shortcode-scripts">
                        <!-- JS Unify -->
                        <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                        <!-- JS Plugins Init. -->
                        <script type="text/plain">
                          $(document).on('ready', function () {
                            // initialization of tabs
                            $.HSCore.components.HSTabs.init('[role="tablist"]');
                          });

                          $(window).on('resize', function () {
                            setTimeout(function () {
                              $.HSCore.components.HSTabs.init('[role="tablist"]');
                            }, 200);
                          });
                        </script>
                      </div>
                    </div>

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

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

                <!-- Primary color, vertical -->
                <div class="row">
                  <div class="col-md-3">
                    <h3 class="h4 g-font-weight-300 g-mb-20">Primary color, vertical</h3>
                  </div>

                  <div class="col-md-9">
                    <div id="shortcode5">
                      <div class="shortcode-html">
                        <div class="row">
                          <div class="col-md-4">
                            <!-- Nav tabs -->
                            <ul class="nav flex-column u-nav-v8-1" role="tablist"
                                data-target="nav-8-1-primary-ver"
                                data-tabs-mobile-type="slide-up-down"
                                data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-primary">
                              <li class="nav-item">
                                <a class="nav-link active" data-toggle="tab" href="#nav-8-1-primary-ver--1" role="tab">
                                  <span class="u-nav-v8__icon u-icon-v3 u-icon-size--lg g-rounded-50x g-brd-around g-brd-4 g-brd-white">
                                    <i class="fa fa-binoculars"></i>
                                  </span>
                                  <strong class="text-uppercase u-nav-v8__title">Detracto</strong>
                                  <em class="u-nav-v8__description">Lorem ipsum dolor sit amet.</em>
                                </a>
                              </li>
                              <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#nav-8-1-primary-ver--2" role="tab">
                                  <span class="u-nav-v8__icon u-icon-v3 u-icon-size--lg g-rounded-50x g-brd-around g-brd-4 g-brd-white">
                                    <i class="fa fa-coffee"></i>
                                  </span>
                                  <strong class="text-uppercase u-nav-v8__title">Sea et</strong>
                                  <em class="u-nav-v8__description">Lorem ipsum dolor sit amet.</em>
                                </a>
                              </li>
                              <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#nav-8-1-primary-ver--3" role="tab">
                                  <span class="u-nav-v8__icon u-icon-v3 u-icon-size--lg g-rounded-50x g-brd-around g-brd-4 g-brd-white">
                                    <i class="fa fa-birthday-cake"></i>
                                  </span>
                                  <strong class="text-uppercase u-nav-v8__title">Omittantur</strong>
                                  <em class="u-nav-v8__description">Lorem ipsum dolor sit amet.</em>
                                </a>
                              </li>
                              <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#nav-8-1-primary-ver--4" role="tab">
                                  <span class="u-nav-v8__icon u-icon-v3 u-icon-size--lg g-rounded-50x g-brd-around g-brd-4 g-brd-white">
                                    <i class="fa fa-heart"></i>
                                  </span>
                                  <strong class="text-uppercase u-nav-v8__title">Accommodare</strong>
                                  <em class="u-nav-v8__description">Lorem ipsum dolor sit amet.</em>
                                </a>
                              </li>
                            </ul>
                            <!-- End Nav tabs -->
                          </div>

                          <div class="col-md-8">
                            <!-- Tab panes -->
                            <div id="nav-8-1-primary-ver" class="tab-content g-pt-20 g-pt-md--0">
                              <div class="tab-pane fade show active" id="nav-8-1-primary-ver--1" role="tabpanel">
                                <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                                <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                              </div>

                              <div class="tab-pane fade" id="nav-8-1-primary-ver--2" role="tabpanel">
                                <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                                <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                              </div>

                              <div class="tab-pane fade" id="nav-8-1-primary-ver--3" role="tabpanel">
                                <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                                <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                              </div>

                              <div class="tab-pane fade" id="nav-8-1-primary-ver--4" role="tabpanel">
                                <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                                <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                              </div>
                            </div>
                            <!-- End Tab panes -->
                          </div>
                        </div>
                      </div>

                      <div class="shortcode-scripts">
                        <!-- JS Unify -->
                        <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                        <!-- JS Plugins Init. -->
                        <script type="text/plain">
                          $(document).on('ready', function () {
                            // initialization of tabs
                            $.HSCore.components.HSTabs.init('[role="tablist"]');
                          });

                          $(window).on('resize', function () {
                            setTimeout(function () {
                              $.HSCore.components.HSTabs.init('[role="tablist"]');
                            }, 200);
                          });
                        </script>
                      </div>
                    </div>

                    {% set contentTarget = "#shortcode5" %}
                    {% set modalID = "#modalMarkup" %}
                    {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
                  </div>
                </div>
                <!-- End Primary color, vertical -->

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

                <!-- Default color, horizontal, navigation justified, with big icons, without text -->
                <div class="row">
                  <div class="col-md-3">
                    <h3 class="h4 g-font-weight-300 g-mb-20">Default color, horizontal, navigation justified, with big icons, without text</h3>
                  </div>

                  <div class="col-md-9">
                    <div id="shortcode6">
                      <div class="shortcode-html">
                        <!-- Nav tabs -->
                        <ul class="nav text-center nav-justified u-nav-v8-1" role="tablist"
                            data-target="nav-8-1-default-hor-nav-justified-big-icons-notext"
                            data-tabs-mobile-type="slide-up-down"
                            data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-lightgray">
                          <li class="nav-item">
                            <a class="nav-link g-pa-20 active" data-toggle="tab" href="#nav-8-1-default-hor-nav-justified-big-icons-notext--1" role="tab">
                              <i class="icon-christmas-037 d-block g-pos-rel g-z-index-2 g-font-size-25 u-tab-line-icon-pro"></i>
                            </a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link g-pa-20" data-toggle="tab" href="#nav-8-1-default-hor-nav-justified-big-icons-notext--2" role="tab">
                              <i class="icon-communication-025 d-block g-pos-rel g-z-index-2 g-font-size-25 u-tab-line-icon-pro"></i>
                            </a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link g-pa-20" data-toggle="tab" href="#nav-8-1-default-hor-nav-justified-big-icons-notext--3" role="tab">
                              <i class="icon-communication-017 d-block g-pos-rel g-z-index-2 g-font-size-25 u-tab-line-icon-pro"></i>
                            </a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link g-pa-20" data-toggle="tab" href="#nav-8-1-default-hor-nav-justified-big-icons-notext--4" role="tab">
                              <i class="icon-communication-010 d-block g-pos-rel g-z-index-2 g-font-size-25 u-tab-line-icon-pro"></i>
                            </a>
                          </li>
                        </ul>
                        <!-- End Nav tabs -->

                        <!-- Tab panes -->
                        <div id="nav-8-1-default-hor-nav-justified-big-icons-notext" class="tab-content g-pt-20">
                          <div class="tab-pane fade show active" id="nav-8-1-default-hor-nav-justified-big-icons-notext--1" role="tabpanel">
                            <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                            <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                          </div>

                          <div class="tab-pane fade" id="nav-8-1-default-hor-nav-justified-big-icons-notext--2" role="tabpanel">
                            <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                            <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                          </div>

                          <div class="tab-pane fade" id="nav-8-1-default-hor-nav-justified-big-icons-notext--3" role="tabpanel">
                            <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                            <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                          </div>

                          <div class="tab-pane fade" id="nav-8-1-default-hor-nav-justified-big-icons-notext--4" role="tabpanel">
                            <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                            <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                          </div>
                        </div>
                        <!-- End Tab panes -->
                      </div>

                      <div class="shortcode-scripts">
                        <!-- JS Unify -->
                        <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                        <!-- JS Plugins Init. -->
                        <script type="text/plain">
                          $(document).on('ready', function () {
                            // initialization of tabs
                            $.HSCore.components.HSTabs.init('[role="tablist"]');
                          });

                          $(window).on('resize', function () {
                            setTimeout(function () {
                              $.HSCore.components.HSTabs.init('[role="tablist"]');
                            }, 200);
                          });
                        </script>
                      </div>
                    </div>

                    {% set contentTarget = "#shortcode6" %}
                    {% set modalID = "#modalMarkup" %}
                    {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
                  </div>
                </div>
                <!-- End Default color, horizontal, navigation justified, with big icons, without text -->

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

                <!-- Default color, vertical, with big icons -->
                <div class="row">
                  <div class="col-md-3">
                    <h3 class="h4 g-font-weight-300 g-mb-20">Default color, vertical, with big icons</h3>
                  </div>
                  <div class="col-md-9">
                    <div id="shortcode7">
                      <div class="shortcode-html">
                        <div class="row">
                          <div class="col-md-3">
                            <!-- Nav tabs -->
                            <ul class="nav text-center flex-column u-nav-v8-1" role="tablist"
                                data-target="nav-8-1-default-ver-big-icons"
                                data-tabs-mobile-type="slide-up-down"
                                data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-lightgray">
                              <li class="nav-item">
                                <a class="nav-link g-pa-20 active" data-toggle="tab" href="#nav-8-1-default-ver-big-icons--1" role="tab">
                                  <i class="icon-christmas-037 d-block g-pos-rel g-z-index-2 g-font-size-25 u-tab-line-icon-pro"></i>
                                  <span class="g-pos-rel g-z-index-2">Detracto</span>
                                </a>
                              </li>
                              <li class="nav-item">
                                <a class="nav-link g-pa-20" data-toggle="tab" href="#nav-8-1-default-ver-big-icons--2" role="tab">
                                  <i class="icon-communication-025 d-block g-pos-rel g-z-index-2 g-font-size-25 u-tab-line-icon-pro"></i>
                                  <span class="g-pos-rel g-z-index-2">Sea et</span>
                                </a>
                              </li>
                              <li class="nav-item">
                                <a class="nav-link g-pa-20" data-toggle="tab" href="#nav-8-1-default-ver-big-icons--3" role="tab">
                                  <i class="icon-communication-017 d-block g-pos-rel g-z-index-2 g-font-size-25 u-tab-line-icon-pro"></i>
                                  <span class="g-pos-rel g-z-index-2">Omittantur</span>
                                </a>
                              </li>
                              <li class="nav-item">
                                <a class="nav-link g-pa-20" data-toggle="tab" href="#nav-8-1-default-ver-big-icons--4" role="tab">
                                  <i class="icon-communication-010 d-block g-pos-rel g-z-index-2 g-font-size-25 u-tab-line-icon-pro"></i>
                                  <span class="g-pos-rel g-z-index-2">Accommodare</span>
                                </a>
                              </li>
                            </ul>
                            <!-- End Nav tabs -->
                          </div>

                          <div class="col-md-9">
                            <!-- Tab panes -->
                            <div id="nav-8-1-default-ver-big-icons" class="tab-content g-pt-20 g-pt-md--0">
                              <div class="tab-pane fade show active" id="nav-8-1-default-ver-big-icons--1" role="tabpanel">
                                <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                                <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                              </div>

                              <div class="tab-pane fade" id="nav-8-1-default-ver-big-icons--2" role="tabpanel">
                                <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                                <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                              </div>

                              <div class="tab-pane fade" id="nav-8-1-default-ver-big-icons--3" role="tabpanel">
                                <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                                <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                              </div>

                              <div class="tab-pane fade" id="nav-8-1-default-ver-big-icons--4" role="tabpanel">
                                <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                                <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                              </div>
                            </div>
                            <!-- End Tab panes -->
                          </div>
                        </div>
                      </div>

                      <div class="shortcode-scripts">
                        <!-- JS Unify -->
                        <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                        <!-- JS Plugins Init. -->
                        <script type="text/plain">
                          $(document).on('ready', function () {
                            // initialization of tabs
                            $.HSCore.components.HSTabs.init('[role="tablist"]');
                          });

                          $(window).on('resize', function () {
                            setTimeout(function () {
                              $.HSCore.components.HSTabs.init('[role="tablist"]');
                            }, 200);
                          });
                        </script>
                      </div>
                    </div>

                    {% set contentTarget = "#shortcode7" %}
                    {% set modalID = "#modalMarkup" %}
                    {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
                  </div>
                </div>
                <!-- End Default color, vertical, with big icons -->

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

                <!-- Default color, vertical, with big icons, without text -->
                <div class="row">
                  <div class="col-md-3">
                    <h3 class="h4 g-font-weight-300 g-mb-20">Default color, vertical, with big icons, without text</h3>
                  </div>

                  <div class="col-md-9">
                    <div id="shortcode8">
                      <div class="shortcode-html">
                        <div class="row">
                          <div class="col-md-3">
                            <!-- Nav tabs -->
                            <ul class="nav text-center flex-column u-nav-v8-1" role="tablist"
                                data-target="nav-8-1-default-ver-big-icons-notext"
                                data-tabs-mobile-type="slide-up-down"
                                data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-lightgray">
                              <li class="nav-item">
                                <a class="nav-link g-pa-20 active" data-toggle="tab" href="#nav-8-1-default-ver-big-icons-notext--1" role="tab">
                                  <i class="icon-christmas-037 d-block g-pos-rel g-z-index-2 g-font-size-25 u-tab-line-icon-pro"></i>
                                </a>
                              </li>
                              <li class="nav-item">
                                <a class="nav-link g-pa-20" data-toggle="tab" href="#nav-8-1-default-ver-big-icons-notext--2" role="tab">
                                  <i class="icon-communication-025 d-block g-pos-rel g-z-index-2 g-font-size-25 u-tab-line-icon-pro"></i>
                                </a>
                              </li>
                              <li class="nav-item">
                                <a class="nav-link g-pa-20" data-toggle="tab" href="#nav-8-1-default-ver-big-icons-notext--3" role="tab">
                                  <i class="icon-communication-017 d-block g-pos-rel g-z-index-2 g-font-size-25 u-tab-line-icon-pro"></i>
                                </a>
                              </li>
                              <li class="nav-item">
                                <a class="nav-link g-pa-20" data-toggle="tab" href="#nav-8-1-default-ver-big-icons-notext--4" role="tab">
                                  <i class="icon-communication-010 d-block g-pos-rel g-z-index-2 g-font-size-25 u-tab-line-icon-pro"></i>
                                </a>
                              </li>
                            </ul>
                            <!-- End Nav tabs -->
                          </div>

                          <div class="col-md-9">
                            <!-- Tab panes -->
                            <div id="nav-8-1-default-ver-big-icons-notext" class="tab-content g-pt-20 g-pt-md--0">
                              <div class="tab-pane fade show active" id="nav-8-1-default-ver-big-icons-notext--1" role="tabpanel">
                                <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                                <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                              </div>

                              <div class="tab-pane fade" id="nav-8-1-default-ver-big-icons-notext--2" role="tabpanel">
                                <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                                <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                              </div>

                              <div class="tab-pane fade" id="nav-8-1-default-ver-big-icons-notext--3" role="tabpanel">
                                <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                                <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                              </div>

                              <div class="tab-pane fade" id="nav-8-1-default-ver-big-icons-notext--4" role="tabpanel">
                                <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                                <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                              </div>
                            </div>
                            <!-- End Tab panes -->
                          </div>
                        </div>
                      </div>

                      <div class="shortcode-scripts">
                        <!-- JS Unify -->
                        <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                        <!-- JS Plugins Init. -->
                        <script type="text/plain">
                          $(document).on('ready', function () {
                            // initialization of tabs
                            $.HSCore.components.HSTabs.init('[role="tablist"]');
                          });

                          $(window).on('resize', function () {
                            setTimeout(function () {
                              $.HSCore.components.HSTabs.init('[role="tablist"]');
                            }, 200);
                          });
                        </script>
                      </div>
                    </div>

                    {% set contentTarget = "#shortcode8" %}
                    {% set modalID = "#modalMarkup" %}
                    {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
                  </div>
                </div>
                <!-- End Default color, vertical, with big icons, without text -->
              </section>
              <!-- End Tab v8-1 (slide-up-down) -->

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

              <!-- Tab v8-1 (accordion) -->
              <section>
                <header class="g-mb-60">
                  <div class="u-heading-v6-2 text-uppercase">
                    <h2 class="h4 u-heading-v6__title g-font-weight-300">Tab v8-1</h2>
                  </div>

                  <div class="g-pl-90">
                    <p>accordion</p>
                  </div>
                </header>

                <!-- Default color, horizontal, align-left -->
                <div class="row">
                  <div class="col-md-3">
                    <h3 class="h4 g-font-weight-300 g-mb-20">Default color, horizontal, align-left</h3>
                  </div>

                  <div class="col-md-9">
                    <div id="shortcode9">
                      <div class="shortcode-html">
                        <!-- Nav tabs -->
                        <ul class="nav u-nav-v8-1" role="tablist"
                            data-target="nav-8-1-accordion-hor-left"
                            data-tabs-mobile-type="accordion"
                            data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-lightgray g-mb-20">
                          <li class="nav-item">
                            <a class="nav-link active" data-toggle="tab" href="#nav-8-1-accordion-hor-left--1" role="tab">
                              <span class="u-nav-v8__icon u-icon-v3 u-icon-size--lg g-rounded-50x g-brd-around g-brd-4 g-brd-white">
                                <i class="fa fa-binoculars"></i>
                              </span>
                              <strong class="text-uppercase u-nav-v8__title">Detracto</strong>
                              <em class="u-nav-v8__description">Lorem ipsum dolor sit amet.</em>
                            </a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#nav-8-1-accordion-hor-left--2" role="tab">
                              <span class="u-nav-v8__icon u-icon-v3 u-icon-size--lg g-rounded-50x g-brd-around g-brd-4 g-brd-white">
                                <i class="fa fa-coffee"></i>
                              </span>
                              <strong class="text-uppercase u-nav-v8__title">Sea et</strong>
                              <em class="u-nav-v8__description">Lorem ipsum dolor sit amet.</em>
                            </a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#nav-8-1-accordion-hor-left--3" role="tab">
                              <span class="u-nav-v8__icon u-icon-v3 u-icon-size--lg g-rounded-50x g-brd-around g-brd-4 g-brd-white">
                                <i class="fa fa-birthday-cake"></i>
                              </span>
                              <strong class="text-uppercase u-nav-v8__title">Omittantur</strong>
                              <em class="u-nav-v8__description">Lorem ipsum dolor sit amet.</em>
                            </a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#nav-8-1-accordion-hor-left--4" role="tab">
                              <span class="u-nav-v8__icon u-icon-v3 u-icon-size--lg g-rounded-50x g-brd-around g-brd-4 g-brd-white">
                                <i class="fa fa-heart"></i>
                              </span>
                              <strong class="text-uppercase u-nav-v8__title">Accommodare</strong>
                              <em class="u-nav-v8__description">Lorem ipsum dolor sit amet.</em>
                            </a>
                          </li>
                        </ul>
                        <!-- End Nav tabs -->

                        <!-- Tab panes -->
                        <div id="nav-8-1-accordion-hor-left" class="tab-content g-pt-20--md">
                          <div class="tab-pane fade show active" id="nav-8-1-accordion-hor-left--1" role="tabpanel">
                            <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                            <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                          </div>

                          <div class="tab-pane fade" id="nav-8-1-accordion-hor-left--2" role="tabpanel">
                            <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                            <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                          </div>

                          <div class="tab-pane fade" id="nav-8-1-accordion-hor-left--3" role="tabpanel">
                            <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                            <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                          </div>

                          <div class="tab-pane fade" id="nav-8-1-accordion-hor-left--4" role="tabpanel">
                            <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                            <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                          </div>
                        </div>
                        <!-- End Tab panes -->
                      </div>

                      <div class="shortcode-scripts">
                        <!-- JS Unify -->
                        <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                        <!-- JS Plugins Init. -->
                        <script type="text/plain">
                          $(document).on('ready', function () {
                            // initialization of tabs
                            $.HSCore.components.HSTabs.init('[role="tablist"]');
                          });

                          $(window).on('resize', function () {
                            setTimeout(function () {
                              $.HSCore.components.HSTabs.init('[role="tablist"]');
                            }, 200);
                          });
                        </script>
                      </div>
                    </div>

                    {% set contentTarget = "#shortcode9" %}
                    {% set modalID = "#modalMarkup" %}
                    {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
                  </div>
                </div>
                <!-- End Default color, horizontal, align-left -->

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

                <!-- Primary color, horizontal, align-center -->
                <div class="row">
                  <div class="col-md-3">
                    <h3 class="h4 g-font-weight-300 g-mb-20">Primary color, horizontal, align-center</h3>
                  </div>

                  <div class="col-md-9">
                    <div id="shortcode10">
                      <div class="shortcode-html">
                        <!-- Nav tabs -->
                        <ul class="nav text-center justify-content-center u-nav-v8-1" role="tablist"
                            data-target="nav-8-1-accordion-primary-hor-center"
                            data-tabs-mobile-type="accordion"
                            data-btn-classes="btn btn-md btn-block u-btn-outline-primary g-mb-20">
                          <li class="nav-item">
                            <a class="nav-link active" data-toggle="tab" href="#nav-8-1-accordion-primary-hor-center--1" role="tab">
                              <span class="u-nav-v8__icon u-icon-v3 u-icon-size--lg g-rounded-50x g-brd-around g-brd-4 g-brd-white">
                                <i class="fa fa-binoculars"></i>
                              </span>
                              <strong class="text-uppercase u-nav-v8__title">Detracto</strong>
                              <em class="u-nav-v8__description">Lorem ipsum dolor sit amet.</em>
                            </a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#nav-8-1-accordion-primary-hor-center--2" role="tab">
                              <span class="u-nav-v8__icon u-icon-v3 u-icon-size--lg g-rounded-50x g-brd-around g-brd-4 g-brd-white">
                                <i class="fa fa-coffee"></i>
                              </span>
                              <strong class="text-uppercase u-nav-v8__title">Sea et</strong>
                              <em class="u-nav-v8__description">Lorem ipsum dolor sit amet.</em>
                            </a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#nav-8-1-accordion-primary-hor-center--3" role="tab">
                              <span class="u-nav-v8__icon u-icon-v3 u-icon-size--lg g-rounded-50x g-brd-around g-brd-4 g-brd-white">
                                <i class="fa fa-birthday-cake"></i>
                              </span>
                              <strong class="text-uppercase u-nav-v8__title">Omittantur</strong>
                              <em class="u-nav-v8__description">Lorem ipsum dolor sit amet.</em>
                            </a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#nav-8-1-accordion-primary-hor-center--4" role="tab">
                              <span class="u-nav-v8__icon u-icon-v3 u-icon-size--lg g-rounded-50x g-brd-around g-brd-4 g-brd-white">
                                <i class="fa fa-heart"></i>
                              </span>
                              <strong class="text-uppercase u-nav-v8__title">Accommodare</strong>
                              <em class="u-nav-v8__description">Lorem ipsum dolor sit amet.</em>
                            </a>
                          </li>
                        </ul>
                        <!-- End Nav tabs -->

                        <!-- Tab panes -->
                        <div id="nav-8-1-accordion-primary-hor-center" class="tab-content g-pt-20--md">
                          <div class="tab-pane fade show active" id="nav-8-1-accordion-primary-hor-center--1" role="tabpanel">
                            <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                            <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                          </div>

                          <div class="tab-pane fade" id="nav-8-1-accordion-primary-hor-center--2" role="tabpanel">
                            <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                            <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                          </div>

                          <div class="tab-pane fade" id="nav-8-1-accordion-primary-hor-center--3" role="tabpanel">
                            <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                            <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                          </div>

                          <div class="tab-pane fade" id="nav-8-1-accordion-primary-hor-center--4" role="tabpanel">
                            <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                            <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                          </div>
                        </div>
                        <!-- End Tab panes -->
                      </div>

                      <div class="shortcode-scripts">
                        <!-- JS Unify -->
                        <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                        <!-- JS Plugins Init. -->
                        <script type="text/plain">
                          $(document).on('ready', function () {
                            // initialization of tabs
                            $.HSCore.components.HSTabs.init('[role="tablist"]');
                          });

                          $(window).on('resize', function () {
                            setTimeout(function () {
                              $.HSCore.components.HSTabs.init('[role="tablist"]');
                            }, 200);
                          });
                        </script>
                      </div>
                    </div>

                    {% set contentTarget = "#shortcode10" %}
                    {% set modalID = "#modalMarkup" %}
                    {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
                  </div>
                </div>
                <!-- End Primary color, horizontal, align-center -->

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

                <!-- Dark color, horizontal, align-right -->
                <div class="row">
                  <div class="col-md-3">
                    <h3 class="h4 g-font-weight-300 g-mb-20">Dark color, horizontal, align-right</h3>
                  </div>

                  <div class="col-md-9">
                    <div id="shortcode11">
                      <div class="shortcode-html">
                        <!-- Nav tabs -->
                        <ul class="nav text-md-right justify-content-end u-nav-v8-1 u-nav-dark" role="tablist"
                            data-target="nav-8-1-accordion-dark-hor-right"
                            data-tabs-mobile-type="accordion"
                            data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-darkgray g-mb-20">
                          <li class="nav-item">
                            <a class="nav-link active" data-toggle="tab" href="#nav-8-1-accordion-dark-hor-right--1" role="tab">
                              <span class="u-nav-v8__icon u-icon-v3 u-icon-size--lg g-rounded-50x g-brd-around g-brd-4 g-brd-white">
                                <i class="fa fa-binoculars"></i>
                              </span>
                              <strong class="text-uppercase u-nav-v8__title">Detracto</strong>
                              <em class="u-nav-v8__description">Lorem ipsum dolor sit amet.</em>
                            </a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#nav-8-1-accordion-dark-hor-right--2" role="tab">
                              <span class="u-nav-v8__icon u-icon-v3 u-icon-size--lg g-rounded-50x g-brd-around g-brd-4 g-brd-white">
                                <i class="fa fa-coffee"></i>
                              </span>
                              <strong class="text-uppercase u-nav-v8__title">Sea et</strong>
                              <em class="u-nav-v8__description">Lorem ipsum dolor sit amet.</em>
                            </a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#nav-8-1-accordion-dark-hor-right--3" role="tab">
                              <span class="u-nav-v8__icon u-icon-v3 u-icon-size--lg g-rounded-50x g-brd-around g-brd-4 g-brd-white">
                                <i class="fa fa-birthday-cake"></i>
                              </span>
                              <strong class="text-uppercase u-nav-v8__title">Omittantur</strong>
                              <em class="u-nav-v8__description">Lorem ipsum dolor sit amet.</em>
                            </a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#nav-8-1-accordion-dark-hor-right--4" role="tab">
                              <span class="u-nav-v8__icon u-icon-v3 u-icon-size--lg g-rounded-50x g-brd-around g-brd-4 g-brd-white">
                                <i class="fa fa-heart"></i>
                              </span>
                              <strong class="text-uppercase u-nav-v8__title">Accommodare</strong>
                              <em class="u-nav-v8__description">Lorem ipsum dolor sit amet.</em>
                            </a>
                          </li>
                        </ul>
                        <!-- End Nav tabs -->

                        <!-- Tab panes -->
                        <div id="nav-8-1-accordion-dark-hor-right" class="tab-content g-pt-20--md">
                          <div class="tab-pane fade show active" id="nav-8-1-accordion-dark-hor-right--1" role="tabpanel">
                            <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                            <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                          </div>

                          <div class="tab-pane fade" id="nav-8-1-accordion-dark-hor-right--2" role="tabpanel">
                            <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                            <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                          </div>

                          <div class="tab-pane fade" id="nav-8-1-accordion-dark-hor-right--3" role="tabpanel">
                            <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                            <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                          </div>

                          <div class="tab-pane fade" id="nav-8-1-accordion-dark-hor-right--4" role="tabpanel">
                            <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                            <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                          </div>
                        </div>
                        <!-- End Tab panes -->
                      </div>

                      <div class="shortcode-scripts">
                        <!-- JS Unify -->
                        <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                        <!-- JS Plugins Init. -->
                        <script type="text/plain">
                          $(document).on('ready', function () {
                            // initialization of tabs
                            $.HSCore.components.HSTabs.init('[role="tablist"]');
                          });

                          $(window).on('resize', function () {
                            setTimeout(function () {
                              $.HSCore.components.HSTabs.init('[role="tablist"]');
                            }, 200);
                          });
                        </script>
                      </div>
                    </div>

                    {% set contentTarget = "#shortcode11" %}
                    {% set modalID = "#modalMarkup" %}
                    {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
                  </div>
                </div>
                <!-- End Dark color, horizontal, align-right -->

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

                <!-- Light color, horizontal -->
                <div class="row">
                  <div class="col-md-3">
                    <h3 class="h4 g-font-weight-300 g-mb-20">Light color, horizontal, navigation fill</h3>
                  </div>

                  <div class="col-md-9">
                    <div id="shortcode12">
                      <div class="shortcode-html">
                        <div class="g-bg-gray-dark-v2 g-color-white g-px-15 g-py-50">
                          <!-- Nav tabs -->
                          <ul class="nav nav-fill u-nav-v8-1 u-nav-light" role="tablist"
                              data-target="nav-8-1-accordion-primary-hor-fill"
                              data-tabs-mobile-type="accordion"
                              data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-white g-mb-20">
                            <li class="nav-item">
                              <a class="nav-link active" data-toggle="tab" href="#nav-8-1-accordion-primary-hor-fill--1" role="tab">
                                <span class="u-nav-v8__icon u-icon-v3 u-icon-size--lg g-rounded-50x g-brd-around g-brd-4 g-brd-gray-dark-v2">
                                  <i class="fa fa-binoculars"></i>
                                </span>
                                <strong class="text-uppercase u-nav-v8__title">Detracto</strong>
                                <em class="u-nav-v8__description">Lorem ipsum dolor sit amet.</em>
                              </a>
                            </li>
                            <li class="nav-item">
                              <a class="nav-link" data-toggle="tab" href="#nav-8-1-accordion-primary-hor-fill--2" role="tab">
                                <span class="u-nav-v8__icon u-icon-v3 u-icon-size--lg g-rounded-50x g-brd-around g-brd-4 g-brd-gray-dark-v2">
                                  <i class="fa fa-coffee"></i>
                                </span>
                                <strong class="text-uppercase u-nav-v8__title">Sea et</strong>
                                <em class="u-nav-v8__description">Lorem ipsum dolor sit amet.</em>
                              </a>
                            </li>
                            <li class="nav-item">
                              <a class="nav-link" data-toggle="tab" href="#nav-8-1-accordion-primary-hor-fill--3" role="tab">
                                <span class="u-nav-v8__icon u-icon-v3 u-icon-size--lg g-rounded-50x g-brd-around g-brd-4 g-brd-gray-dark-v2">
                                  <i class="fa fa-birthday-cake"></i>
                                </span>
                                <strong class="text-uppercase u-nav-v8__title">Omittantur</strong>
                                <em class="u-nav-v8__description">Lorem ipsum dolor sit amet.</em>
                              </a>
                            </li>
                            <li class="nav-item">
                              <a class="nav-link" data-toggle="tab" href="#nav-8-1-accordion-primary-hor-fill--4" role="tab">
                                <span class="u-nav-v8__icon u-icon-v3 u-icon-size--lg g-rounded-50x g-brd-around g-brd-4 g-brd-gray-dark-v2">
                                  <i class="fa fa-heart"></i>
                                </span>
                                <strong class="text-uppercase u-nav-v8__title">Accommodare</strong>
                                <em class="u-nav-v8__description">Lorem ipsum dolor sit amet.</em>
                              </a>
                            </li>
                          </ul>
                          <!-- End Nav tabs -->

                          <!-- Tab panes -->
                          <div id="nav-8-1-accordion-primary-hor-fill" class="tab-content g-pt-20--md">
                            <div class="tab-pane fade show active" id="nav-8-1-accordion-primary-hor-fill--1" role="tabpanel">
                              <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                              <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                            </div>

                            <div class="tab-pane fade" id="nav-8-1-accordion-primary-hor-fill--2" role="tabpanel">
                              <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                              <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                            </div>

                            <div class="tab-pane fade" id="nav-8-1-accordion-primary-hor-fill--3" role="tabpanel">
                              <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                              <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                            </div>

                            <div class="tab-pane fade" id="nav-8-1-accordion-primary-hor-fill--4" role="tabpanel">
                              <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                              <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                            </div>
                          </div>
                          <!-- End Tab panes -->
                        </div>
                      </div>

                      <div class="shortcode-scripts">
                        <!-- JS Unify -->
                        <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                        <!-- JS Plugins Init. -->
                        <script type="text/plain">
                          $(document).on('ready', function () {
                            // initialization of tabs
                            $.HSCore.components.HSTabs.init('[role="tablist"]');
                          });

                          $(window).on('resize', function () {
                            setTimeout(function () {
                              $.HSCore.components.HSTabs.init('[role="tablist"]');
                            }, 200);
                          });
                        </script>
                      </div>
                    </div>

                    {% set contentTarget = "#shortcode12" %}
                    {% set modalID = "#modalMarkup" %}
                    {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
                  </div>
                </div>
                <!-- End Light color, horizontal -->

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

                <!-- Primary color, vertical -->
                <div class="row">
                  <div class="col-md-3">
                    <h3 class="h4 g-font-weight-300 g-mb-20">Primary color, vertical</h3>
                  </div>

                  <div class="col-md-9">
                    <div id="shortcode13">
                      <div class="shortcode-html">
                        <div class="row">
                          <div class="col-md-4">
                            <!-- Nav tabs -->
                            <ul class="nav flex-column u-nav-v8-1" role="tablist"
                                data-target="nav-8-1-accordion-primary-ver"
                                data-tabs-mobile-type="accordion"
                                data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-primary g-mb-20">
                              <li class="nav-item">
                                <a class="nav-link active" data-toggle="tab" href="#nav-8-1-accordion-primary-ver--1" role="tab">
                                  <span class="u-nav-v8__icon u-icon-v3 u-icon-size--lg g-rounded-50x g-brd-around g-brd-4 g-brd-white">
                                    <i class="fa fa-binoculars"></i>
                                  </span>
                                  <strong class="text-uppercase u-nav-v8__title">Detracto</strong>
                                  <em class="u-nav-v8__description">Lorem ipsum dolor sit amet.</em>
                                </a>
                              </li>
                              <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#nav-8-1-accordion-primary-ver--2" role="tab">
                                  <span class="u-nav-v8__icon u-icon-v3 u-icon-size--lg g-rounded-50x g-brd-around g-brd-4 g-brd-white">
                                    <i class="fa fa-coffee"></i>
                                  </span>
                                  <strong class="text-uppercase u-nav-v8__title">Sea et</strong>
                                  <em class="u-nav-v8__description">Lorem ipsum dolor sit amet.</em>
                                </a>
                              </li>
                              <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#nav-8-1-accordion-primary-ver--3" role="tab">
                                  <span class="u-nav-v8__icon u-icon-v3 u-icon-size--lg g-rounded-50x g-brd-around g-brd-4 g-brd-white">
                                    <i class="fa fa-birthday-cake"></i>
                                  </span>
                                  <strong class="text-uppercase u-nav-v8__title">Omittantur</strong>
                                  <em class="u-nav-v8__description">Lorem ipsum dolor sit amet.</em>
                                </a>
                              </li>
                              <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#nav-8-1-accordion-primary-ver--4" role="tab">
                                  <span class="u-nav-v8__icon u-icon-v3 u-icon-size--lg g-rounded-50x g-brd-around g-brd-4 g-brd-white">
                                    <i class="fa fa-heart"></i>
                                  </span>
                                  <strong class="text-uppercase u-nav-v8__title">Accommodare</strong>
                                  <em class="u-nav-v8__description">Lorem ipsum dolor sit amet.</em>
                                </a>
                              </li>
                            </ul>
                            <!-- End Nav tabs -->
                          </div>

                          <div class="col-md-8">
                            <!-- Tab panes -->
                            <div id="nav-8-1-accordion-primary-ver" class="tab-content">
                              <div class="tab-pane fade show active" id="nav-8-1-accordion-primary-ver--1" role="tabpanel">
                                <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                                <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                              </div>

                              <div class="tab-pane fade" id="nav-8-1-accordion-primary-ver--2" role="tabpanel">
                                <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                                <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                              </div>

                              <div class="tab-pane fade" id="nav-8-1-accordion-primary-ver--3" role="tabpanel">
                                <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                                <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                              </div>

                              <div class="tab-pane fade" id="nav-8-1-accordion-primary-ver--4" role="tabpanel">
                                <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                                <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                              </div>
                            </div>
                            <!-- End Tab panes -->
                          </div>
                        </div>
                      </div>

                      <div class="shortcode-scripts">
                        <!-- JS Unify -->
                        <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                        <!-- JS Plugins Init. -->
                        <script type="text/plain">
                          $(document).on('ready', function () {
                            // initialization of tabs
                            $.HSCore.components.HSTabs.init('[role="tablist"]');
                          });

                          $(window).on('resize', function () {
                            setTimeout(function () {
                              $.HSCore.components.HSTabs.init('[role="tablist"]');
                            }, 200);
                          });
                        </script>
                      </div>
                    </div>

                    {% set contentTarget = "#shortcode13" %}
                    {% set modalID = "#modalMarkup" %}
                    {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
                  </div>
                </div>
                <!-- End Primary color, vertical -->

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

                <!-- Default color, horizontal, navigation justified, with big icons, without text -->
                <div class="row">
                  <div class="col-md-3">
                    <h3 class="h4 g-font-weight-300 g-mb-20">Default color, horizontal, navigation justified, with big icons, without text</h3>
                  </div>

                  <div class="col-md-9">
                    <div id="shortcode14">
                      <div class="shortcode-html">
                        <!-- Nav tabs -->
                        <ul class="nav text-center nav-justified u-nav-v8-1" role="tablist"
                            data-target="nav-8-1-accordion-hor-nav-justified-big-icons-notext"
                            data-tabs-mobile-type="accordion"
                            data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-lightgray g-mb-20">
                          <li class="nav-item">
                            <a class="nav-link g-pa-20 active" data-toggle="tab" href="#nav-8-1-accordion-hor-nav-justified-big-icons-notext--1" role="tab">
                              <i class="icon-christmas-037 d-block g-pos-rel g-z-index-2 g-font-size-25 u-tab-line-icon-pro"></i>
                            </a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link g-pa-20" data-toggle="tab" href="#nav-8-1-accordion-hor-nav-justified-big-icons-notext--2" role="tab">
                              <i class="icon-communication-025 d-block g-pos-rel g-z-index-2 g-font-size-25 u-tab-line-icon-pro"></i>
                            </a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link g-pa-20" data-toggle="tab" href="#nav-8-1-accordion-hor-nav-justified-big-icons-notext--3" role="tab">
                              <i class="icon-communication-017 d-block g-pos-rel g-z-index-2 g-font-size-25 u-tab-line-icon-pro"></i>
                            </a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link g-pa-20" data-toggle="tab" href="#nav-8-1-accordion-hor-nav-justified-big-icons-notext--4" role="tab">
                              <i class="icon-communication-010 d-block g-pos-rel g-z-index-2 g-font-size-25 u-tab-line-icon-pro"></i>
                            </a>
                          </li>
                        </ul>
                        <!-- End Nav tabs -->

                        <!-- Tab panes -->
                        <div id="nav-8-1-accordion-hor-nav-justified-big-icons-notext" class="tab-content g-pt-20--md">
                          <div class="tab-pane fade show active" id="nav-8-1-accordion-hor-nav-justified-big-icons-notext--1" role="tabpanel">
                            <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                            <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                          </div>

                          <div class="tab-pane fade" id="nav-8-1-accordion-hor-nav-justified-big-icons-notext--2" role="tabpanel">
                            <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                            <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                          </div>

                          <div class="tab-pane fade" id="nav-8-1-accordion-hor-nav-justified-big-icons-notext--3" role="tabpanel">
                            <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                            <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                          </div>

                          <div class="tab-pane fade" id="nav-8-1-accordion-hor-nav-justified-big-icons-notext--4" role="tabpanel">
                            <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                            <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                          </div>
                        </div>
                        <!-- End Tab panes -->
                      </div>

                      <div class="shortcode-scripts">
                        <!-- JS Unify -->
                        <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                        <!-- JS Plugins Init. -->
                        <script type="text/plain">
                          $(document).on('ready', function () {
                            // initialization of tabs
                            $.HSCore.components.HSTabs.init('[role="tablist"]');
                          });

                          $(window).on('resize', function () {
                            setTimeout(function () {
                              $.HSCore.components.HSTabs.init('[role="tablist"]');
                            }, 200);
                          });
                        </script>
                      </div>
                    </div>

                    {% set contentTarget = "#shortcode14" %}
                    {% set modalID = "#modalMarkup" %}
                    {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
                  </div>
                </div>
                <!-- End Default color, horizontal, navigation justified, with big icons, without text -->

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

                <!-- Default color, vertical, with big icons -->
                <div class="row">
                  <div class="col-md-3">
                    <h3 class="h4 g-font-weight-300 g-mb-20">Default color, vertical, with big icons</h3>
                  </div>

                  <div class="col-md-9">
                    <div id="shortcode15">
                      <div class="shortcode-html">
                        <div class="row">
                          <div class="col-md-3">
                            <!-- Nav tabs -->
                            <ul class="nav text-center flex-column u-nav-v8-1" role="tablist"
                                data-target="nav-8-1-accordion-ver-big-icons"
                                data-tabs-mobile-type="accordion"
                                data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-lightgray g-mb-20">
                              <li class="nav-item">
                                <a class="nav-link g-pa-20 active" data-toggle="tab" href="#nav-8-1-accordion-ver-big-icons--1" role="tab">
                                  <i class="icon-christmas-037 d-block g-pos-rel g-z-index-2 g-font-size-25 u-tab-line-icon-pro"></i>
                                  <span class="g-pos-rel g-z-index-2">Detracto</span>
                                </a>
                              </li>
                              <li class="nav-item">
                                <a class="nav-link g-pa-20" data-toggle="tab" href="#nav-8-1-accordion-ver-big-icons--2" role="tab">
                                  <i class="icon-communication-025 d-block g-pos-rel g-z-index-2 g-font-size-25 u-tab-line-icon-pro"></i>
                                  <span class="g-pos-rel g-z-index-2">Sea et</span>
                                </a>
                              </li>
                              <li class="nav-item">
                                <a class="nav-link g-pa-20" data-toggle="tab" href="#nav-8-1-accordion-ver-big-icons--3" role="tab">
                                  <i class="icon-communication-017 d-block g-pos-rel g-z-index-2 g-font-size-25 u-tab-line-icon-pro"></i>
                                  <span class="g-pos-rel g-z-index-2">Omittantur</span>
                                </a>
                              </li>
                              <li class="nav-item">
                                <a class="nav-link g-pa-20" data-toggle="tab" href="#nav-8-1-accordion-ver-big-icons--4" role="tab">
                                  <i class="icon-communication-010 d-block g-pos-rel g-z-index-2 g-font-size-25 u-tab-line-icon-pro"></i>
                                  <span class="g-pos-rel g-z-index-2">Accommodare</span>
                                </a>
                              </li>
                            </ul>
                            <!-- End Nav tabs -->
                          </div>

                          <div class="col-md-9">
                            <!-- Tab panes -->
                            <div id="nav-8-1-accordion-ver-big-icons" class="tab-content">
                              <div class="tab-pane fade show active" id="nav-8-1-accordion-ver-big-icons--1" role="tabpanel">
                                <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                                <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                              </div>

                              <div class="tab-pane fade" id="nav-8-1-accordion-ver-big-icons--2" role="tabpanel">
                                <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                                <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                              </div>

                              <div class="tab-pane fade" id="nav-8-1-accordion-ver-big-icons--3" role="tabpanel">
                                <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                                <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                              </div>

                              <div class="tab-pane fade" id="nav-8-1-accordion-ver-big-icons--4" role="tabpanel">
                                <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                                <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                              </div>
                            </div>
                            <!-- End Tab panes -->
                          </div>
                        </div>
                      </div>

                      <div class="shortcode-scripts">
                        <!-- JS Unify -->
                        <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                        <!-- JS Plugins Init. -->
                        <script type="text/plain">
                          $(document).on('ready', function () {
                            // initialization of tabs
                            $.HSCore.components.HSTabs.init('[role="tablist"]');
                          });

                          $(window).on('resize', function () {
                            setTimeout(function () {
                              $.HSCore.components.HSTabs.init('[role="tablist"]');
                            }, 200);
                          });
                        </script>
                      </div>
                    </div>

                    {% set contentTarget = "#shortcode15" %}
                    {% set modalID = "#modalMarkup" %}
                    {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
                  </div>
                </div>
                <!-- End Default color, vertical, with big icons -->

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

                <!-- Default color, vertical, with big icons, without text -->
                <div class="row">
                  <div class="col-md-3">
                    <h3 class="h4 g-font-weight-300 g-mb-20">Default color, vertical, with big icons, without text</h3>
                  </div>

                  <div class="col-md-9">
                    <div id="shortcode16">
                      <div class="shortcode-html">
                        <div class="row">
                          <div class="col-md-3">
                            <!-- Nav tabs -->
                            <ul class="nav text-center flex-column u-nav-v8-1" role="tablist"
                                data-target="nav-8-1-accordion-ver-big-icons-notext"
                                data-tabs-mobile-type="accordion"
                                data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-lightgray g-mb-20">
                              <li class="nav-item">
                                <a class="nav-link g-pa-20 active" data-toggle="tab" href="#nav-8-1-accordion-ver-big-icons-notext--1" role="tab">
                                  <i class="icon-christmas-037 d-block g-pos-rel g-z-index-2 g-font-size-25 u-tab-line-icon-pro"></i>
                                </a>
                              </li>
                              <li class="nav-item">
                                <a class="nav-link g-pa-20" data-toggle="tab" href="#nav-8-1-accordion-ver-big-icons-notext--2" role="tab">
                                  <i class="icon-communication-025 d-block g-pos-rel g-z-index-2 g-font-size-25 u-tab-line-icon-pro"></i>
                                </a>
                              </li>
                              <li class="nav-item">
                                <a class="nav-link g-pa-20" data-toggle="tab" href="#nav-8-1-accordion-ver-big-icons-notext--3" role="tab">
                                  <i class="icon-communication-017 d-block g-pos-rel g-z-index-2 g-font-size-25 u-tab-line-icon-pro"></i>
                                </a>
                              </li>
                              <li class="nav-item">
                                <a class="nav-link g-pa-20" data-toggle="tab" href="#nav-8-1-accordion-ver-big-icons-notext--4" role="tab">
                                  <i class="icon-communication-010 d-block g-pos-rel g-z-index-2 g-font-size-25 u-tab-line-icon-pro"></i>
                                </a>
                              </li>
                            </ul>
                            <!-- End Nav tabs -->
                          </div>

                          <div class="col-md-9">
                            <!-- Tab panes -->
                            <div id="nav-8-1-accordion-ver-big-icons-notext" class="tab-content">
                              <div class="tab-pane fade show active" id="nav-8-1-accordion-ver-big-icons-notext--1" role="tabpanel">
                                <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                                <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                              </div>

                              <div class="tab-pane fade" id="nav-8-1-accordion-ver-big-icons-notext--2" role="tabpanel">
                                <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                                <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                              </div>

                              <div class="tab-pane fade" id="nav-8-1-accordion-ver-big-icons-notext--3" role="tabpanel">
                                <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                                <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                              </div>

                              <div class="tab-pane fade" id="nav-8-1-accordion-ver-big-icons-notext--4" role="tabpanel">
                                <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>
                                <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                              </div>
                            </div>
                            <!-- End Tab panes -->
                          </div>
                        </div>
                      </div>

                      <div class="shortcode-scripts">
                        <!-- JS Unify -->
                        <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                        <!-- JS Plugins Init. -->
                        <script type="text/plain">
                          $(document).on('ready', function () {
                            // initialization of tabs
                            $.HSCore.components.HSTabs.init('[role="tablist"]');
                          });

                          $(window).on('resize', function () {
                            setTimeout(function () {
                              $.HSCore.components.HSTabs.init('[role="tablist"]');
                            }, 200);
                          });
                        </script>
                      </div>
                    </div>

                    {% set contentTarget = "#shortcode16" %}
                    {% set modalID = "#modalMarkup" %}
                    {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
                  </div>
                </div>
                <!-- End Default color, vertical, with big icons, without text -->
              </section>
              <!-- End Tab v8-1 (accordion) -->
            </div>
          </section>
        </div>
      </div>
    </section>

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

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

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

  {% include "html/assets/include/nunjucks/partials/core-js.njk" %}
  <script src="{{ root }}assets/vendor/bootstrap/offcanvas.js"></script>

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

  {% 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.tabs.js"></script>
  <script src="{{ root }}assets/js/helpers/hs.hover-blocks.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 tabs
      $.HSCore.components.HSTabs.init('[role="tablist"]');

      // 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');

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

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

    $(window).on('resize', function () {
      setTimeout(function () {
        $.HSCore.components.HSTabs.init('[role="tablist"]');
      }, 200);
    });
  </script>
</body>
</html>
