{# Settings #}
{% set root = "../../" %}
{% set mainNavActive_1 = "shortcodes" %}
{% set sidebarNavActive_1 = "shortcode-base-typography" %}
{% set title = "Typography" %}

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

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

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

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

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

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

    <section>
      <!-- General -->
      <section class="g-py-50">
        <div class="container">
          <!-- Heading -->
          <header class="g-mb-80">
            <div class="u-heading-v6-2 text-uppercase">
              <h2 class="h4 u-heading-v6__title g-font-weight-300">General</h2>
            </div>
            <div class="g-pl-90">
              <p>The following Typography examples are based on Bootstrap and It includes simple and easily customized typography for headings, body text, lists, and more. For even more control, check out the textual
                <a href="#">Bootstrap utility classes</a>
                .
              </p>
            </div>
          </header>
          <!-- End Heading -->

          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Google Fonts</h3>
              <p>By default Unify uses Google Open Sans font family.</p>
              <br>
              <p><em>"Google Fonts includes more than 600 fonts which can be used in Unify Template"</em></p>
            </div>
            <div class="col-md-9">
              <div class="row u-shadow-v1-3 g-color-black g-line-height-2 g-letter-spacing-3 g-pa-40 g-mb-30">
                <div class="col-lg">
                  <p class="g-font-size-90 g-font-weight-600 g-line-height-1">Aa</p>
                  <p class="g-font-size-30 g-font-weight-600 g-line-height-1">Open Sans</p>
                </div>
                <div class="col-lg">
                  <p class="g-line-height-1">Light</p>
                  <p class="g-font-size-30 g-font-weight-300 g-line-height-1">AaBbCcDd</p>
                  <br>
                  <p class="g-line-height-1">Regular</p>
                  <p class="g-font-size-30 g-line-height-1">AaBbCcDd</p>
                </div>
                <div class="col-lg">
                  <p class="g-line-height-1">Bold</p>
                  <p class="g-font-size-30 g-font-weight-600 g-line-height-1">AaBbCcDd</p>
                  <br>
                  <p class="g-line-height-1">Numbers</p>
                  <p class="g-font-size-30 g-font-weight-600 g-line-height-1">0123456789</p>
                </div>
              </div>

              <div class="row g-bg-gray-dark-v1 g-color-white g-line-height-2 g-letter-spacing-3 g-pa-40 g-mb-30">
                <div class="col-lg">
                  <p class="g-font-size-90 g-font-weight-600 g-line-height-1">Aa</p>
                  <p class="g-font-size-30 g-font-weight-600 g-line-height-1">Open Sans</p>
                </div>
                <div class="col-lg">
                  <p class="g-line-height-1">Light</p>
                  <p class="g-font-size-30 g-font-weight-300 g-line-height-1">AaBbCcDd</p>
                  <br>
                  <p class="g-line-height-1">Regular</p>
                  <p class="g-font-size-30 g-line-height-1">AaBbCcDd</p>
                </div>
                <div class="col-lg">
                  <p class="g-line-height-1">Bold</p>
                  <p class="g-font-size-30 g-font-weight-600 g-line-height-1">AaBbCcDd</p>
                  <br>
                  <p class="g-line-height-1">Numbers</p>
                  <p class="g-font-size-30 g-font-weight-600 g-line-height-1">0123456789</p>
                </div>
              </div>

              <div class="row" hidden>
                <div class="col-lg-6">
                  <div id="shortcode1">
                    <div class="shortcode-html">
                      <div class="u-shadow-v1-3 h5 g-line-height-2 g-letter-spacing-3 g-pa-40">
                        <p class="g-text-break-word">AB​‌C​‌Ć​‌Č​‌D​‌Đ​‌E​‌F​‌G​‌H​‌I​‌J​‌K​‌L​‌M​‌N​‌O​‌P​‌Q​‌R​‌S​‌Š​‌T​‌U​‌V​‌W​‌X​‌Y​‌Z​‌Ž​‌a​‌b​‌c​‌č​‌ć​‌d​‌đ​‌e​‌f​‌g​‌h​‌i​‌j​‌k​‌l​‌m​‌n​‌o​‌p​‌q​‌r​‌s​‌š​‌t​‌u​‌v​‌w​‌x​‌y​‌z​‌ž​‌А​‌Б​‌В​‌Г​‌Ґ​‌Д​‌Ђ​‌Е​‌Ё​‌Є​‌Ж​‌З​‌Ѕ​‌И​‌І​‌Ї​‌Й​‌Ј​‌К​‌Л​‌Љ​‌М​‌Н​‌Њ​‌О​‌П​‌Р​‌С​‌Т​‌Ћ​‌У​‌Ў​‌Ф​‌Х​‌Ц​‌Ч​‌Џ​‌Ш​‌Щ​‌Ъ​‌Ы​‌Ь​‌Э​‌Ю​‌Я​‌а​‌б​‌в​‌г​‌ґ​‌д​‌ђ​‌е​‌ё​‌є​‌ж​‌з​‌ѕ​‌и​‌і​‌ї​‌й​‌ј​‌к​‌л​‌љ​‌м​‌н​‌њ​‌о​‌п​‌р​‌с​‌т​‌ћ​‌у​‌ў​‌ф​‌х​‌ц​‌ч​‌џ​‌ш​‌щ​‌ъ​‌ы​‌ь​‌э​‌ю​‌я​‌Α​‌Β​‌Γ​‌Δ​‌Ε​‌Ζ​‌Η​‌Θ​‌Ι​‌Κ​‌Λ​‌Μ​‌Ν​‌Ξ​‌Ο​‌Π​‌Ρ​‌Σ​‌Τ​‌Υ​‌Φ​‌Χ​‌Ψ​‌Ω​‌α​‌β​‌γ​‌δ​‌ε​‌ζ​‌η​‌θ​‌ι​‌κ​‌λ​‌μ​‌ν​‌ξ​‌ο​‌π​‌ρ​‌σ​‌τ​‌υ​‌φ​‌χ​‌ψ​‌ω​‌ά​‌Ά​‌έ​‌Έ​‌έ​‌Ή​‌ί​‌ϊ​‌ΐ​‌Ί​‌ό​‌Ό​‌ύ​‌ΰ​‌ϋ​‌Ύ​‌Ϋ​‌Ώ​‌Ă​‌Â​‌Ê​‌Ô​‌Ơ​‌Ư​‌ă​‌â​‌ê​‌ô​‌ơ​‌ư​‌1​‌2​‌3​‌4​‌5​‌6​‌7​‌8​‌9​‌0​‌‘​‌?​‌’​‌“​‌!​‌”​‌(​‌%​‌)​‌[​‌#​‌]​‌{​‌@​‌}​‌/​‌&​‌<​‌-​‌+​‌÷​‌×​‌=​‌>​‌®​‌©​‌$​‌€​‌£​‌¥​‌¢​‌:​‌;​‌,​‌.​‌*</p>
                      </div>
                    </div>
                  </div>

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

                <div class="col-lg-6">
                  <div id="shortcode2">
                    <div class="shortcode-html">
                      <div class="u-shadow-v1-3 g-bg-gray-dark-v1 g-color-white h5 g-line-height-2 g-letter-spacing-3 g-pa-40">
                        <p class="g-text-break-word">A​‌B​‌C​‌Ć​‌Č​‌D​‌Đ​‌E​‌F​‌G​‌H​‌I​‌J​‌K​‌L​‌M​‌N​‌O​‌P​‌Q​‌R​‌S​‌Š​‌T​‌U​‌V​‌W​‌X​‌Y​‌Z​‌Ž​‌a​‌b​‌c​‌č​‌ć​‌d​‌đ​‌e​‌f​‌g​‌h​‌i​‌j​‌k​‌l​‌m​‌n​‌o​‌p​‌q​‌r​‌s​‌š​‌t​‌u​‌v​‌w​‌x​‌y​‌z​‌ž​‌А​‌Б​‌В​‌Г​‌Ґ​‌Д​‌Ђ​‌Е​‌Ё​‌Є​‌Ж​‌З​‌Ѕ​‌И​‌І​‌Ї​‌Й​‌Ј​‌К​‌Л​‌Љ​‌М​‌Н​‌Њ​‌О​‌П​‌Р​‌С​‌Т​‌Ћ​‌У​‌Ў​‌Ф​‌Х​‌Ц​‌Ч​‌Џ​‌Ш​‌Щ​‌Ъ​‌Ы​‌Ь​‌Э​‌Ю​‌Я​‌а​‌б​‌в​‌г​‌ґ​‌д​‌ђ​‌е​‌ё​‌є​‌ж​‌з​‌ѕ​‌и​‌і​‌ї​‌й​‌ј​‌к​‌л​‌љ​‌м​‌н​‌њ​‌о​‌п​‌р​‌с​‌т​‌ћ​‌у​‌ў​‌ф​‌х​‌ц​‌ч​‌џ​‌ш​‌щ​‌ъ​‌ы​‌ь​‌э​‌ю​‌я​‌Α​‌Β​‌Γ​‌Δ​‌Ε​‌Ζ​‌Η​‌Θ​‌Ι​‌Κ​‌Λ​‌Μ​‌Ν​‌Ξ​‌Ο​‌Π​‌Ρ​‌Σ​‌Τ​‌Υ​‌Φ​‌Χ​‌Ψ​‌Ω​‌α​‌β​‌γ​‌δ​‌ε​‌ζ​‌η​‌θ​‌ι​‌κ​‌λ​‌μ​‌ν​‌ξ​‌ο​‌π​‌ρ​‌σ​‌τ​‌υ​‌φ​‌χ​‌ψ​‌ω​‌ά​‌Ά​‌έ​‌Έ​‌έ​‌Ή​‌ί​‌ϊ​‌ΐ​‌Ί​‌ό​‌Ό​‌ύ​‌ΰ​‌ϋ​‌Ύ​‌Ϋ​‌Ώ​‌Ă​‌Â​‌Ê​‌Ô​‌Ơ​‌Ư​‌ă​‌â​‌ê​‌ô​‌ơ​‌ư​‌1​‌2​‌3​‌4​‌5​‌6​‌7​‌8​‌9​‌0​‌‘​‌?​‌’​‌“​‌!​‌”​‌(​‌%​‌)​‌[​‌#​‌]​‌{​‌@​‌}​‌/​‌&​‌<​‌-​‌+​‌÷​‌×​‌=​‌>​‌®​‌©​‌$​‌€​‌£​‌¥​‌¢​‌:​‌;​‌,​‌.​‌*</p>
                      </div>
                    </div>
                  </div>

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

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

          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Lead</h3>
              <p>Make a paragraph stand out by adding <code>lead</code> class.</p>
            </div>
            <div class="col-md-9">
              <div id="shortcode3">
                <div class="shortcode-html">
                  <!-- Lead -->
                  <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus. Nulla ipsum dolor sit amet, consectetur adipiscing elitut eleifend nisl.</p>
                  <!-- End Lead -->
                </div>
              </div>

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

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

          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Inline text elements</h3>
              <p>Styling for common inline HTML5 elements</p>
            </div>
            <div class="col-md-9">
              <div id="shortcode4">
                <div class="shortcode-html">
                  <!-- Inline text elements -->
                  <div class="g-font-size-16">
                    <p>You can use the mark tag to
                      <mark>highlight</mark>
                      text.
                    </p>
                    <p>You can use the mark tag to
                      <mark class="g-bg-primary g-color-white">highlight</mark>
                      text.
                    </p>
                    <p>
                      <del>This line of text is meant to be treated as deleted text.</del>
                    </p>
                    <p><s>This line of text is meant to be treated as no longer accurate.</s></p>
                    <p>
                      <ins>This line of text is meant to be treated as an addition to the document.</ins>
                    </p>
                    <p><u>This line of text will render as underlined</u></p>
                    <p><u>This line of text will render as underlined</u></p>
                    <p>
                      <small>This line of text is meant to be treated as fine print.</small>
                    </p>
                    <p><big>This line of text is meant to be treated as fine print.</big></p>
                    <p><strong>This line rendered as bold text.</strong></p>
                    <p><em>This line rendered as italicized text.</em></p>
                  </div>
                  <!-- End Inline text elements -->
                </div>
              </div>

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

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

          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Abbreviations</h3>
              <p>Stylized implementation of HTML’s
                <code>&lt;abbr&gt;</code> element for abbreviations and acronyms to show the expanded version on hover.
              </p>
            </div>
            <div class="col-md-9">
              <div id="shortcode5">
                <div class="shortcode-html">
                  <!-- Abbreviations -->
                  <p><abbr title="attribute">attr</abbr></p>
                  <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
                  <!-- End Abbreviations -->
                </div>
              </div>

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

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

          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Address</h3>
              <p>Use <code>&lt;address&gt;</code> tag to cover the address infomration.</p>
            </div>

            <div class="col-md-9">
              <div class="row">
                <div class="col-md-6">
                  <div id="shortcode6">
                    <div class="shortcode-html">
                      <div class="u-shadow-v1-3 g-pa-40">
                        <!-- Address -->
                        <address class="g-line-height-2">
                          <strong>Twitter, Inc.</strong>
                          <br>
                          795 Folsom Ave, Suite 600
                          <br>
                          San Francisco, CA 94107
                          <br>
                          <abbr title="Phone">Phone:</abbr> (123) 456-7700
                          <br>
                          <abbr title="Fax">Fax:</abbr> (123) 456-7701
                        </address>
                        <!-- End Address -->
                      </div>
                    </div>
                  </div>

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

                <div class="col-md-6">
                  <div id="shortcode7">
                    <div class="shortcode-html">
                      <div class="g-bg-gray-dark-v1 g-pa-40">
                        <!-- Address -->
                        <address class="g-color-white g-line-height-2">
                          <strong>Twitter, Inc.</strong>
                          <br>
                          795 Folsom Ave, Suite 600
                          <br>
                          San Francisco, CA 94107
                          <br>
                          <abbr title="Phone">Phone:</abbr> (123) 456-7700
                          <br>
                          <abbr title="Fax">Fax:</abbr> (123) 456-7701
                        </address>
                        <!-- End Address -->
                      </div>
                    </div>
                  </div>

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

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

      <!-- Contextual Colors -->
      <section class="g-py-50">
        <div class="container">
          <!-- Heading -->
          <header class="g-mb-80">
            <div class="u-heading-v6-2 text-uppercase">
              <h2 class="h4 u-heading-v6__title g-font-weight-300">Contextual Colors</h2>
            </div>
            <div class="g-pl-90">
              <p>The following Typography examples are based on Bootstrap and It includes simple and easily customized typography for headings, body text, lists, and more. For even more control, check out the textual
                <a href="#">Bootstrap utility classes</a>
                .
              </p>
            </div>
          </header>
          <!-- End Heading -->

          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Paragraphs</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode8">
                <div class="shortcode-html">
                  <!-- Paragraphs -->
                  <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
                  <p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                  <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
                  <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
                  <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
                  <p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
                  <!-- End Paragraphs -->
                </div>
              </div>

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

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

          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Links</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode9">
                <div class="shortcode-html">
                  <!-- Links -->
                  <a href="#" class="text-muted g-mr-15">Muted link</a>
                  <a href="#" class="text-primary g-mr-15">Primary link</a>
                  <a href="#" class="text-success g-mr-15">Success link</a>
                  <a href="#" class="text-info g-mr-15">Info link</a>
                  <a href="#" class="text-warning g-mr-15">Warning link</a>
                  <a href="#" class="text-danger g-mr-15">Danger link</a>
                  <!-- End Links -->
                </div>
              </div>

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

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

      <!-- Tooltips -->
      <section class="g-py-50">
        <div class="container">
          <!-- Heading -->
          <header class="g-mb-80">
            <div class="u-heading-v6-2 text-uppercase">
              <h2 class="h4 u-heading-v6__title g-font-weight-300">Tooltips</h2>
            </div>
            <div class="g-pl-90">
              <p>Inspired by the excellent Tipsy jQuery plugin written by Jason Frame. Tooltips are an updated version, which don’t rely on images, use CSS3 for animations, and data-attributes for local title storage.
                <a href="#">Bootstrap Tooltips</a>
                .
              </p>
            </div>
          </header>
          <!-- End Heading -->

          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Text tooltips</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode10">
                <div class="shortcode-html">
                  <!-- Text Tooltips -->
                  <p>Passages of
                    <a href="#" class="tooltips" data-toggle="tooltip" data-original-title="Default tooltip">Lorem Ipsum I am a tooltip</a>
                    on the other hand we denounce with
                    <a class="tooltips-show" href="#" data-toggle="tooltip" data-original-title="Tooltip example">Hover over me</a>
                    righteous but the majority have suffered alteration in some form, by injected humour, or
                    <a href="#" class="tooltips" data-toggle="tooltip" data-original-title="Default tooltip">Another Tooltip Example</a>
                    words which don't look even slightly believable.
                  </p>

                  <p>Passages of
                    <a href="#" class="tooltips-show" data-toggle="tooltip" data-original-title="Default tooltip">Another Tooltip Example</a>
                    on the other hand we denounce with Hover over me
                    <a href="#" class="tooltips" data-toggle="tooltip" data-original-title="Default tooltip">Another Tooltip Example</a>
                    majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
                  </p>
                  <!-- End Text Tooltips -->
                </div>
              </div>

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

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

          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Button tooltips</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode11">
                <div class="shortcode-html">
                  <!-- Button Tooltips -->
                  <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
                  <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
                  <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
                  <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
                  <!-- End Button Tooltips -->
                </div>
              </div>

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

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

          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Shown tooltips</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode12">
                <div class="shortcode-html">
                  <div class="text-center g-mb-50">
                    <!-- Button Tooltips -->
                    <button type="button" class="btn u-btn-darkgray" data-toggle="tooltip-show" data-placement="left" title="Tooltip on left">Tooltip on left</button>
                    <button type="button" class="btn u-btn-darkgray" data-toggle="tooltip-show" data-placement="top" title="Tooltip on top">Tooltip on top</button>
                    <button type="button" class="btn u-btn-darkgray" data-toggle="tooltip-show" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
                    <button type="button" class="btn u-btn-darkgray" data-toggle="tooltip-show" data-placement="right" title="Tooltip on right">Tooltip on right</button>
                    <!-- End Button Tooltips -->
                  </div>
                </div>

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

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).ready(function () {
                      // initialization of tooltip
                      $('[data-toggle="tooltip-show"]').tooltip('show');
                    });
                  </script>
                </div>
              </div>

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

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

      <!-- Popovers -->
      <section class="g-py-50">
        <div class="container">
          <!-- Heading -->
          <header class="g-mb-80">
            <div class="u-heading-v6-2 text-uppercase">
              <h2 class="h4 u-heading-v6__title g-font-weight-300">Popovers</h2>
            </div>
            <div class="g-pl-90">
              <p>Add small overlay content, like those found in iOS, to any element for housing secondary information. Popovers rely on the 3rd party library "Tether" for positioning. You must include
                <code>tether.min.js</code> before
                <code>bootstrap.js</code> in order for popovers to work! Check out for more details
                <a href="#">Bootstrap Popovers</a>
                .
              </p>
            </div>
          </header>
          <!-- End Heading -->

          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Popovers</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode13">
                <div class="shortcode-html">
                  <!-- Popovers -->
                  <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                    Popover on top
                  </button>

                  <button type="button" class="btn btn-secondary" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                    Popover on right
                  </button>

                  <button type="button" class="btn btn-secondary" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                    Popover on bottom
                  </button>

                  <button type="button" class="btn btn-secondary" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                    Popover on left with Title
                  </button>
                  <!-- End Popovers -->
                </div>

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

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).ready(function () {
                      // initialization of popovers
                      $('[data-toggle="popover"]').popover();
                    });
                  </script>
                </div>
              </div>

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

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

          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Popovers with titles</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode14">
                <div class="shortcode-html">
                  <!-- Popovers -->
                  <button type="button" class="btn u-btn-darkgray" data-container="body" data-title="Popover title" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                    Popover on top
                  </button>

                  <button type="button" class="btn u-btn-darkgray" data-toggle="popover" data-title="Popover title" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                    Popover on right
                  </button>

                  <button type="button" class="btn u-btn-darkgray" data-toggle="popover" data-title="Popover title" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                    Popover on bottom
                  </button>

                  <button type="button" class="btn u-btn-darkgray" data-toggle="popover" data-title="Popover title" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                    Popover on left with Title
                  </button>
                  <!-- End Popovers -->
                </div>

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

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).ready(function () {
                      // initialization of popovers
                      $('[data-toggle="popover"]').popover();
                    });
                  </script>
                </div>
              </div>

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

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

      <!-- Description List Alignment -->
      <section class="g-py-50">
        <div class="container">
          <!-- Heading -->
          <header class="g-mb-80">
            <div class="u-heading-v6-2 text-uppercase">
              <h2 class="h4 u-heading-v6__title g-font-weight-300">Description list alignment</h2>
            </div>
            <div class="g-pl-90">
              <p>Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic mixins). For longer terms, you can optionally add a
                <code>text-truncate</code> class to truncate the text with an ellipsis.</p>
            </div>
          </header>
          <!-- End Heading -->

          <!-- Descriptions Lists -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Description lists</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode15">
                <div class="shortcode-html">
                  <dl class="row">
                    <dt class="col-sm-3">Description lists</dt>
                    <dd class="col-sm-9">A description list is perfect for defining terms.</dd>
                  </dl>

                  <dl class="row">
                    <dt class="col-sm-3">Euismod</dt>
                    <dd class="col-sm-9">Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
                    <dd class="col-sm-9 ml-sm-auto">Donec id elit non mi porta gravida at eget metus.</dd>
                  </dl>

                  <dl class="row">
                    <dt class="col-sm-3">Malesuada porta</dt>
                    <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
                  </dl>

                  <dl class="row">
                    <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
                    <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
                  </dl>

                  <dl class="row">
                    <dt class="col-sm-3">Nesting</dt>
                    <dd class="col-sm-9">
                      <dl class="row">
                        <dt class="col-sm-4">Nested definition list</dt>
                        <dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
                      </dl>
                    </dd>
                  </dl>
                </div>
              </div>

              {% set contentTarget = "#shortcode15" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Descriptions Lists -->
        </div>
      </section>
      <!-- End Description List Alignment -->

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

      <!-- Lists -->
      <section class="g-py-50">
        <div class="container">
          <!-- Heading -->
          <header class="g-mb-80">
            <div class="u-heading-v6-2 text-uppercase">
              <h2 class="h4 u-heading-v6__title g-font-weight-300">Lists</h2>
            </div>
            <div class="g-pl-90">
              <p>Lists are very common in web pages and It can be used in any content area. Also, they could be used for navigations, product lists etc. Here some basic example for lists.</p>
            </div>
          </header>
          <!-- End Heading -->

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

          <!-- Inline Lists -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Inline Lists</h3>
              <p>Make lists inline by simplily adding a class <code>list-inline</code> or use
                <code>u-list-inline</code> class to remove default margin bottom space.</p>
            </div>

            <div class="col-md-9">
              <div id="shortcode16">
                <div class="shortcode-html">
                  <div class="u-shadow-v1-3 g-pa-20">
                    <!-- Inline Lists -->
                    <ul class="u-list-inline">
                      <li class="list-inline-item g-mr-30">Home</li>
                      <li class="list-inline-item g-mr-30">About Us</li>
                      <li class="list-inline-item g-mr-30">Our Work</li>
                      <li class="list-inline-item g-mr-30">Services</li>
                      <li class="list-inline-item g-mr-30">Contact Us</li>
                    </ul>
                    <!-- End Inline Lists -->
                  </div>
                </div>
              </div>

              {% set contentTarget = "#shortcode16" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

              <div class="g-mb-30"></div>

              <div id="shortcode17">
                <div class="shortcode-html">
                  <div class="g-bg-gray-dark-v1 g-color-white g-pa-20">
                    <!-- Inline Lists -->
                    <ul class="u-list-inline">
                      <li class="list-inline-item g-mr-30">Home</li>
                      <li class="list-inline-item g-mr-30">About Us</li>
                      <li class="list-inline-item g-mr-30">Our Work</li>
                      <li class="list-inline-item g-mr-30">Services</li>
                      <li class="list-inline-item g-mr-30">Contact Us</li>
                    </ul>
                    <!-- End Inline Lists -->
                  </div>
                </div>
              </div>

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

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

          <!-- Unordered Lists -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Unordered lists</h3>
              <p>Just wrap your lists with <code>&lt;ul&gt;</code> tag for unrdered lists</p>
            </div>

            <div class="col-md-9">
              <div class="row g-mb-30">
                <div class="col-lg-6">
                  <div id="shortcode18">
                    <div class="shortcode-html">
                      <div class="u-shadow-v1-3 g-pa-40">
                        <ul>
                          <li>Lorem ipsum dolor sit amet</li>
                          <li>Consectetur adipiscing elit</li>
                          <li>Integer molestie lorem at massa</li>
                          <li>Facilisis in pretium nisl aliquet</li>
                          <li>Nulla volutpat aliquam velit
                            <ul>
                              <li>Phasellus iaculis neque</li>
                              <li>Purus sodales ultricies</li>
                              <li>Vestibulum laoreet porttitor sem</li>
                              <li>Ac tristique libero volutpat at</li>
                            </ul>
                          </li>
                          <li>Faucibus porta lacus fringilla vel</li>
                          <li>Aenean sit amet erat nunc</li>
                          <li>Eget porttitor lorem</li>
                        </ul>
                      </div>
                    </div>
                  </div>

                  {% set contentTarget = "#shortcode18" %}
                  {% set modalID = "#modalMarkup" %}
                  {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
                </div>

                <div class="col-lg-6">
                  <div id="shortcode19">
                    <div class="shortcode-html">
                      <div class="g-bg-gray-dark-v1 g-color-white g-pa-40">
                        <ul>
                          <li>Lorem ipsum dolor sit amet</li>
                          <li>Consectetur adipiscing elit</li>
                          <li>Integer molestie lorem at massa</li>
                          <li>Facilisis in pretium nisl aliquet</li>
                          <li>Nulla volutpat aliquam velit
                            <ul>
                              <li>Phasellus iaculis neque</li>
                              <li>Purus sodales ultricies</li>
                              <li>Vestibulum laoreet porttitor sem</li>
                              <li>Ac tristique libero volutpat at</li>
                            </ul>
                          </li>
                          <li>Faucibus porta lacus fringilla vel</li>
                          <li>Aenean sit amet erat nunc</li>
                          <li>Eget porttitor lorem</li>
                        </ul>
                      </div>
                    </div>
                  </div>

                  {% set contentTarget = "#shortcode19" %}
                  {% set modalID = "#modalMarkup" %}
                  {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
                </div>
              </div>
            </div>
          </div>
          <!-- End Unordered Lists -->

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

          <!-- Ordered Lists -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Ordered lists</h3>
              <p>Just wrap your lists with <code>&lt;ol&gt;</code> tag for unrdered lists</p>
            </div>

            <div class="col-md-9">
              <div class="row g-mb-30">
                <div class="col-lg-6">
                  <div id="shortcode20">
                    <div class="shortcode-html">
                      <div class="u-shadow-v1-3 g-pa-40">
                        <ol>
                          <li>Lorem ipsum dolor sit amet</li>
                          <li>Consectetur adipiscing elit</li>
                          <li>Integer molestie lorem at massa</li>
                          <li>Facilisis in pretium nisl aliquet</li>
                          <li>Nulla volutpat aliquam velit
                            <ol>
                              <li>Phasellus iaculis neque</li>
                              <li>Purus sodales ultricies</li>
                              <li>Vestibulum laoreet porttitor sem</li>
                              <li>Ac tristique libero volutpat at</li>
                            </ol>
                          </li>
                          <li>Faucibus porta lacus fringilla vel</li>
                          <li>Aenean sit amet erat nunc</li>
                          <li>Eget porttitor lorem</li>
                        </ol>
                      </div>
                    </div>
                  </div>

                  {% set contentTarget = "#shortcode20" %}
                  {% set modalID = "#modalMarkup" %}
                  {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
                </div>

                <div class="col-lg-6">
                  <div id="shortcode21">
                    <div class="shortcode-html">
                      <div class="g-bg-gray-dark-v1 g-color-white g-pa-40">
                        <ol>
                          <li>Lorem ipsum dolor sit amet</li>
                          <li>Consectetur adipiscing elit</li>
                          <li>Integer molestie lorem at massa</li>
                          <li>Facilisis in pretium nisl aliquet</li>
                          <li>Nulla volutpat aliquam velit
                            <ol>
                              <li>Phasellus iaculis neque</li>
                              <li>Purus sodales ultricies</li>
                              <li>Vestibulum laoreet porttitor sem</li>
                              <li>Ac tristique libero volutpat at</li>
                            </ol>
                          </li>
                          <li>Faucibus porta lacus fringilla vel</li>
                          <li>Aenean sit amet erat nunc</li>
                          <li>Eget porttitor lorem</li>
                        </ol>
                      </div>
                    </div>
                  </div>

                  {% set contentTarget = "#shortcode21" %}
                  {% set modalID = "#modalMarkup" %}
                  {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
                </div>
              </div>
            </div>
          </div>
          <!-- End Ordered Lists -->

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

          <!-- Unstyled Lists -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Unstyled lists</h3>
              <p>To remove the default styles of lists, add a class <code>list-unstyled</code></p>
            </div>

            <div class="col-md-9">
              <div class="row g-mb-30">
                <div class="col-lg-6">
                  <div id="shortcode22">
                    <div class="shortcode-html">
                      <div class="u-shadow-v1-3 g-pa-40">
                        <ul class="list-unstyled">
                          <li>Lorem ipsum dolor sit amet</li>
                          <li>Consectetur adipiscing elit</li>
                          <li>Integer molestie lorem at massa</li>
                          <li>Facilisis in pretium nisl aliquet</li>
                          <li>Nulla volutpat aliquam velit
                            <ul>
                              <li>Phasellus iaculis neque</li>
                              <li>Purus sodales ultricies</li>
                              <li>Vestibulum laoreet porttitor sem</li>
                              <li>Ac tristique libero volutpat at</li>
                            </ul>
                          </li>
                          <li>Faucibus porta lacus fringilla vel</li>
                          <li>Aenean sit amet erat nunc</li>
                          <li>Eget porttitor lorem</li>
                        </ul>
                      </div>
                    </div>
                  </div>

                  {% set contentTarget = "#shortcode22" %}
                  {% set modalID = "#modalMarkup" %}
                  {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
                </div>

                <div class="col-lg-6">
                  <div id="shortcode23">
                    <div class="shortcode-html">
                      <div class="g-bg-gray-dark-v1 g-color-white g-pa-40">
                        <ul class="list-unstyled">
                          <li>Lorem ipsum dolor sit amet</li>
                          <li>Consectetur adipiscing elit</li>
                          <li>Integer molestie lorem at massa</li>
                          <li>Facilisis in pretium nisl aliquet</li>
                          <li>Nulla volutpat aliquam velit
                            <ul>
                              <li>Phasellus iaculis neque</li>
                              <li>Purus sodales ultricies</li>
                              <li>Vestibulum laoreet porttitor sem</li>
                              <li>Ac tristique libero volutpat at</li>
                            </ul>
                          </li>
                          <li>Faucibus porta lacus fringilla vel</li>
                          <li>Aenean sit amet erat nunc</li>
                          <li>Eget porttitor lorem</li>
                        </ul>
                      </div>
                    </div>
                  </div>

                  {% set contentTarget = "#shortcode23" %}
                  {% set modalID = "#modalMarkup" %}
                  {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
                </div>
              </div>
            </div>
          </div>
          <!-- End Unstyled Lists -->

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

          <!-- Circle lists -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Circle lists</h3>
              <p>Use circle lists with a class <code>g-list-style-circle</code></p>
            </div>

            <div class="col-md-9">
              <div class="row g-mb-30">
                <div class="col-lg-6">
                  <div id="shortcode24">
                    <div class="shortcode-html">
                      <div class="u-shadow-v1-3 g-pa-40">
                        <ul class="g-list-style-circle">
                          <li>Lorem ipsum dolor sit amet</li>
                          <li>Ac tristique libero volutpat at</li>
                          <li>Consectetur adipiscing elit</li>
                          <li>Facilisis in pretium nisl aliquet</li>
                          <li>Nulla volutpat aliquam velit
                            <ul>
                              <li>Purus sodales ultricies</li>
                              <li>Vestibulum laoreet porttitor sem</li>
                              <li>Ac tristique libero volutpat at</li>
                            </ul>
                          </li>
                          <li>Faucibus porta lacus fringilla vel</li>
                          <li>Aenean sit amet erat nunc</li>
                          <li>Eget porttitor lorem</li>
                        </ul>
                      </div>
                    </div>
                  </div>

                  {% set contentTarget = "#shortcode24" %}
                  {% set modalID = "#modalMarkup" %}
                  {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
                </div>

                <div class="col-lg-6">
                  <div id="shortcode25">
                    <div class="shortcode-html">
                      <div class="g-bg-gray-dark-v1 g-color-white g-pa-40">
                        <ul class="g-list-style-circle">
                          <li>Lorem ipsum dolor sit amet</li>
                          <li>Ac tristique libero volutpat at</li>
                          <li>Consectetur adipiscing elit</li>
                          <li>Facilisis in pretium nisl aliquet</li>
                          <li>Nulla volutpat aliquam velit
                            <ul>
                              <li>Purus sodales ultricies</li>
                              <li>Vestibulum laoreet porttitor sem</li>
                              <li>Ac tristique libero volutpat at</li>
                            </ul>
                          </li>
                          <li>Faucibus porta lacus fringilla vel</li>
                          <li>Aenean sit amet erat nunc</li>
                          <li>Eget porttitor lorem</li>
                        </ul>
                      </div>
                    </div>
                  </div>

                  {% set contentTarget = "#shortcode25" %}
                  {% set modalID = "#modalMarkup" %}
                  {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
                </div>
              </div>
            </div>
          </div>
          <!-- End Circle lists -->

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

          <!-- Square lists -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Square lists</h3>
              <p>Add a class <code>g-list-style-square</code> to make square lists</p>
            </div>

            <div class="col-md-9">
              <div class="row g-mb-30">
                <div class="col-lg-6">
                  <div id="shortcode26">
                    <div class="shortcode-html">
                      <div class="u-shadow-v1-3 g-pa-40">
                        <ul class="g-list-style-square">
                          <li>Lorem ipsum dolor sit amet</li>
                          <li>Consectetur adipiscing elit</li>
                          <li>Facilisis in pretium nisl aliquet</li>
                          <li>Ac tristique libero volutpat at</li>
                          <li>Nulla volutpat aliquam velit
                            <ul class="g-list-style-square">
                              <li>Purus sodales ultricies</li>
                              <li>Vestibulum laoreet porttitor sem</li>
                              <li>Ac tristique libero volutpat at</li>
                            </ul>
                          </li>
                          <li>Faucibus porta lacus fringilla vel</li>
                          <li>Aenean sit amet erat nunc</li>
                          <li>Eget porttitor lorem</li>
                        </ul>
                      </div>
                    </div>
                  </div>

                  {% set contentTarget = "#shortcode26" %}
                  {% set modalID = "#modalMarkup" %}
                  {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
                </div>

                <div class="col-lg-6">
                  <div id="shortcode27">
                    <div class="shortcode-html">
                      <div class="g-bg-gray-dark-v1 g-color-white g-pa-40">
                        <ul class="g-list-style-square">
                          <li>Lorem ipsum dolor sit amet</li>
                          <li>Consectetur adipiscing elit</li>
                          <li>Facilisis in pretium nisl aliquet</li>
                          <li>Ac tristique libero volutpat at</li>
                          <li>Nulla volutpat aliquam velit
                            <ul class="g-list-style-square">
                              <li>Purus sodales ultricies</li>
                              <li>Vestibulum laoreet porttitor sem</li>
                              <li>Ac tristique libero volutpat at</li>
                            </ul>
                          </li>
                          <li>Faucibus porta lacus fringilla vel</li>
                          <li>Aenean sit amet erat nunc</li>
                          <li>Eget porttitor lorem</li>
                        </ul>
                      </div>
                    </div>
                  </div>

                  {% set contentTarget = "#shortcode27" %}
                  {% set modalID = "#modalMarkup" %}
                  {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
                </div>
              </div>
            </div>
          </div>
          <!-- End Square lists -->

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

          <!-- Upper Roman Lists -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Upper-roman lists</h3>
              <p>Add a class <code>g-list-style-upper-roman</code> to make upper-roman lists</p>
            </div>

            <div class="col-md-9">
              <div class="row g-mb-30">
                <div class="col-lg-6">
                  <div id="shortcode28">
                    <div class="shortcode-html">
                      <div class="u-shadow-v1-3 g-pa-40">
                        <ul class="g-list-style-upper-roman">
                          <li>Lorem ipsum dolor sit amet</li>
                          <li>Consectetur adipiscing elit</li>
                          <li>Facilisis in pretium nisl aliquet</li>
                          <li>Ac tristique libero volutpat at</li>
                          <li>Nulla volutpat aliquam velit
                            <ul class="g-list-style-upper-roman">
                              <li>Purus sodales ultricies</li>
                              <li>Vestibulum laoreet porttitor sem</li>
                              <li>Ac tristique libero volutpat at</li>
                            </ul>
                          </li>
                          <li>Faucibus porta lacus fringilla vel</li>
                          <li>Aenean sit amet erat nunc</li>
                          <li>Eget porttitor lorem</li>
                        </ul>
                      </div>
                    </div>
                  </div>

                  {% set contentTarget = "#shortcode28" %}
                  {% set modalID = "#modalMarkup" %}
                  {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
                </div>

                <div class="col-lg-6">
                  <div id="shortcode29">
                    <div class="shortcode-html">
                      <div class="g-bg-gray-dark-v1 g-color-white g-pa-40">
                        <ul class="g-list-style-upper-roman">
                          <li>Lorem ipsum dolor sit amet</li>
                          <li>Consectetur adipiscing elit</li>
                          <li>Facilisis in pretium nisl aliquet</li>
                          <li>Ac tristique libero volutpat at</li>
                          <li>Nulla volutpat aliquam velit
                            <ul class="g-list-style-upper-roman">
                              <li>Purus sodales ultricies</li>
                              <li>Vestibulum laoreet porttitor sem</li>
                              <li>Ac tristique libero volutpat at</li>
                            </ul>
                          </li>
                          <li>Faucibus porta lacus fringilla vel</li>
                          <li>Aenean sit amet erat nunc</li>
                          <li>Eget porttitor lorem</li>
                        </ul>
                      </div>
                    </div>
                  </div>

                  {% set contentTarget = "#shortcode29" %}
                  {% set modalID = "#modalMarkup" %}
                  {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
                </div>
              </div>
            </div>
          </div>
          <!-- End Upper Roman Lists -->

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

          <!-- Lower Roman Lists -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Lower-roman lists</h3>
              <p>Add a class <code>g-list-style-lower-roman</code> to make lower-roman lists</p>
            </div>

            <div class="col-md-9">
              <div class="row g-mb-30">
                <div class="col-lg-6">
                  <div id="shortcode30">
                    <div class="shortcode-html">
                      <div class="u-shadow-v1-3 g-pa-40">
                        <ul class="g-list-style-lower-roman">
                          <li>Lorem ipsum dolor sit amet</li>
                          <li>Consectetur adipiscing elit</li>
                          <li>Facilisis in pretium nisl aliquet</li>
                          <li>Ac tristique libero volutpat at</li>
                          <li>Nulla volutpat aliquam velit
                            <ul class="g-list-style-lower-roman">
                              <li>Purus sodales ultricies</li>
                              <li>Vestibulum laoreet porttitor sem</li>
                              <li>Ac tristique libero volutpat at</li>
                            </ul>
                          </li>
                          <li>Faucibus porta lacus fringilla vel</li>
                          <li>Aenean sit amet erat nunc</li>
                          <li>Eget porttitor lorem</li>
                        </ul>
                      </div>
                    </div>
                  </div>

                  {% set contentTarget = "#shortcode30" %}
                  {% set modalID = "#modalMarkup" %}
                  {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
                </div>

                <div class="col-lg-6">
                  <div id="shortcode31">
                    <div class="shortcode-html">
                      <div class="g-bg-gray-dark-v1 g-color-white g-pa-40">
                        <ul class="g-list-style-lower-roman">
                          <li>Lorem ipsum dolor sit amet</li>
                          <li>Consectetur adipiscing elit</li>
                          <li>Facilisis in pretium nisl aliquet</li>
                          <li>Ac tristique libero volutpat at</li>
                          <li>Nulla volutpat aliquam velit
                            <ul class="g-list-style-lower-roman">
                              <li>Purus sodales ultricies</li>
                              <li>Vestibulum laoreet porttitor sem</li>
                              <li>Ac tristique libero volutpat at</li>
                            </ul>
                          </li>
                          <li>Faucibus porta lacus fringilla vel</li>
                          <li>Aenean sit amet erat nunc</li>
                          <li>Eget porttitor lorem</li>
                        </ul>
                      </div>
                    </div>
                  </div>

                  {% set contentTarget = "#shortcode31" %}
                  {% set modalID = "#modalMarkup" %}
                  {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
                </div>
              </div>
            </div>
          </div>
          <!-- End Lower Roman Lists -->

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

          <!-- Upper Latin Lists -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Upper-latin lists</h3>
              <p>Add a class <code>g-list-style-upper-latin</code> to make upper-latin lists</p>
            </div>

            <div class="col-md-9">
              <div class="row g-mb-30">
                <div class="col-lg-6">
                  <div id="shortcode32">
                    <div class="shortcode-html">
                      <div class="u-shadow-v1-3 g-pa-40">
                        <ul class="g-list-style-upper-latin">
                          <li>Lorem ipsum dolor sit amet</li>
                          <li>Consectetur adipiscing elit</li>
                          <li>Facilisis in pretium nisl aliquet</li>
                          <li>Ac tristique libero volutpat at</li>
                          <li>Nulla volutpat aliquam velit
                            <ul class="g-list-style-upper-latin">
                              <li>Purus sodales ultricies</li>
                              <li>Vestibulum laoreet porttitor sem</li>
                              <li>Ac tristique libero volutpat at</li>
                            </ul>
                          </li>
                          <li>Faucibus porta lacus fringilla vel</li>
                          <li>Aenean sit amet erat nunc</li>
                          <li>Eget porttitor lorem</li>
                        </ul>
                      </div>
                    </div>
                  </div>

                  {% set contentTarget = "#shortcode32" %}
                  {% set modalID = "#modalMarkup" %}
                  {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
                </div>

                <div class="col-lg-6">
                  <div id="shortcode33">
                    <div class="shortcode-html">
                      <div class="g-bg-gray-dark-v1 g-color-white g-pa-40">
                        <ul class="g-list-style-upper-latin">
                          <li>Lorem ipsum dolor sit amet</li>
                          <li>Consectetur adipiscing elit</li>
                          <li>Facilisis in pretium nisl aliquet</li>
                          <li>Ac tristique libero volutpat at</li>
                          <li>Nulla volutpat aliquam velit
                            <ul class="g-list-style-upper-latin">
                              <li>Purus sodales ultricies</li>
                              <li>Vestibulum laoreet porttitor sem</li>
                              <li>Ac tristique libero volutpat at</li>
                            </ul>
                          </li>
                          <li>Faucibus porta lacus fringilla vel</li>
                          <li>Aenean sit amet erat nunc</li>
                          <li>Eget porttitor lorem</li>
                        </ul>
                      </div>
                    </div>
                  </div>

                  {% set contentTarget = "#shortcode33" %}
                  {% set modalID = "#modalMarkup" %}
                  {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
                </div>
              </div>
            </div>
          </div>
          <!-- End Upper Latin Lists -->

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

          <!-- Lower Latin Lists -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Lower-latin lists</h3>
              <p>Add a class <code>g-list-style-lower-latin</code> to make lower-latin lists</p>
            </div>

            <div class="col-md-9">
              <div class="row g-mb-30">
                <div class="col-lg-6">
                  <div id="shortcode34">
                    <div class="shortcode-html">
                      <div class="u-shadow-v1-3 g-pa-40">
                        <ul class="g-list-style-lower-latin">
                          <li>Lorem ipsum dolor sit amet</li>
                          <li>Consectetur adipiscing elit</li>
                          <li>Facilisis in pretium nisl aliquet</li>
                          <li>Ac tristique libero volutpat at</li>
                          <li>Nulla volutpat aliquam velit
                            <ul class="g-list-style-lower-latin">
                              <li>Purus sodales ultricies</li>
                              <li>Vestibulum laoreet porttitor sem</li>
                              <li>Ac tristique libero volutpat at</li>
                            </ul>
                          </li>
                          <li>Faucibus porta lacus fringilla vel</li>
                          <li>Aenean sit amet erat nunc</li>
                          <li>Eget porttitor lorem</li>
                        </ul>
                      </div>
                    </div>
                  </div>

                  {% set contentTarget = "#shortcode34" %}
                  {% set modalID = "#modalMarkup" %}
                  {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
                </div>

                <div class="col-lg-6">
                  <div id="shortcode35">
                    <div class="shortcode-html">
                      <div class="g-bg-gray-dark-v1 g-color-white g-pa-40">
                        <ul class="g-list-style-lower-latin">
                          <li>Lorem ipsum dolor sit amet</li>
                          <li>Consectetur adipiscing elit</li>
                          <li>Facilisis in pretium nisl aliquet</li>
                          <li>Ac tristique libero volutpat at</li>
                          <li>Nulla volutpat aliquam velit
                            <ul class="g-list-style-lower-latin">
                              <li>Purus sodales ultricies</li>
                              <li>Vestibulum laoreet porttitor sem</li>
                              <li>Ac tristique libero volutpat at</li>
                            </ul>
                          </li>
                          <li>Faucibus porta lacus fringilla vel</li>
                          <li>Aenean sit amet erat nunc</li>
                          <li>Eget porttitor lorem</li>
                        </ul>
                      </div>
                    </div>
                  </div>

                  {% set contentTarget = "#shortcode35" %}
                  {% set modalID = "#modalMarkup" %}
                  {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
                </div>
              </div>
            </div>
          </div>
          <!-- End Lower Latin Lists -->
        </div>
      </section>
      <!-- End Lists -->
    </section>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      // initialization of tooltip
      $('[data-toggle="tooltip-show"]').tooltip('show');

      // initialization of popovers
      $('[data-toggle="popover"]').popover();
    });

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

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

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