{# Settings #}
{% set root = "../../../" %}
{% set sidebarNavActive_1 = "shortcode-base-icon-hovers" %}
{% set title = "Icons Hover Effects" %}

{% 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/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">
<link rel="stylesheet" href="{{ root }}assets/vendor/jquery-ui/themes/base/jquery-ui.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 class="g-py-100">
      <div class="container">
        <!-- Color -->
        <section>
          <!-- Heading -->
          <header class="g-mb-60">
            <div class="u-heading-v6-2 text-uppercase">
              <h2 class="h4 u-heading-v6__title g-font-weight-300">Color</h2>
            </div>

            <div class="g-pl-90">
              <p>Extend the icons with <code>.g-color-*--hover</code> class.</p>
            </div>
          </header>
          <!-- End Heading -->

          <!-- Plain Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Plain Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode1">
                <span class="u-icon-v1 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-038 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-037 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-043 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-079 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-014 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-028 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-016 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-076 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-058 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-021 u-line-icon-pro"></i>
                </span>

                <span class="u-icon-v1 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-002 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-010 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-011 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-025 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-054 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-044 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-education-001 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-education-002 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-education-004 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-education-007 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-education-036 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-education-010 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-education-024 u-line-icon-pro"></i>
                </span>
              </div>

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

          <!-- Bordered Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Bordered Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode2">
                <span class="u-icon-v2 g-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-038 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-037 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-043 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-079 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-014 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-028 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-016 u-line-icon-pro"></i>
                </span>

                <span class="u-icon-v2 g-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-076 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-058 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-002 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-010 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-011 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-025 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-054 u-line-icon-pro"></i>
                </span>
              </div>

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

          <!-- Backgrounded Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Backgrounded Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode3">
                <span class="u-icon-v3 g-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-038 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-037 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-043 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-079 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-014 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-028 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-016 u-line-icon-pro"></i>
                </span>

                <span class="u-icon-v3 g-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-076 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-058 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-002 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-010 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-011 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-025 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-054 u-line-icon-pro"></i>
                </span>
              </div>

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

          <!-- Backgrounded & Bordered Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Backgrounded &amp; Bordered Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode4">
                <span class="u-icon-v4 u-icon-v4-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-005 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-017 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-021 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-038 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-037 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-043 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-079 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-083 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-014 u-line-icon-pro"></i>
                  </span>
                </span>

                <span class="u-icon-v4 u-icon-v4-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-028 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-016 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-083 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-076 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-058 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-021 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-002 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-005 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 g-color-primary--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-010 u-line-icon-pro"></i>
                  </span>
                </span>
              </div>

              {% set contentTarget = "#shortcode4" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Backgrounded & Bordered Icons -->
        </section>
        <!-- End Color -->

        <hr class="g-brd-gray-light-v4 g-mt-0 g-mb-60">

        <!-- Background Color -->
        <section>
          <!-- Heading -->
          <header class="g-mb-60">
            <div class="u-heading-v6-2 text-uppercase">
              <h2 class="h4 u-heading-v6__title g-font-weight-300">Background Color</h2>
            </div>

            <div class="g-pl-90">
              <p>Extend the icons with <code>.g-bg-*--hover</code> class.</p>
            </div>
          </header>
          <!-- End Heading -->

          <!-- Plain Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Plain Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode5">
                <span class="u-icon-v1 g-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-038 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-037 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-043 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-079 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-014 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-028 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-016 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-076 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-058 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-021 u-line-icon-pro"></i>
                </span>

                <span class="u-icon-v1 g-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-002 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-010 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-011 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-025 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-054 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-044 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-education-001 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-education-002 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-education-004 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-education-007 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-education-036 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-education-010 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-education-024 u-line-icon-pro"></i>
                </span>
              </div>

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

          <!-- Bordered Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Bordered Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode6">
                <span class="u-icon-v2 g-rounded-3 g-bg-primary--hover g-brd-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-bg-primary--hover g-brd-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-bg-primary--hover g-brd-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-bg-primary--hover g-brd-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-038 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-bg-primary--hover g-brd-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-037 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-bg-primary--hover g-brd-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-043 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-bg-primary--hover g-brd-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-079 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-bg-primary--hover g-brd-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-bg-primary--hover g-brd-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-014 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-bg-primary--hover g-brd-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-028 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-bg-primary--hover g-brd-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-016 u-line-icon-pro"></i>
                </span>

                <span class="u-icon-v2 g-rounded-3 g-bg-primary--hover g-brd-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-bg-primary--hover g-brd-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-076 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-bg-primary--hover g-brd-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-058 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-bg-primary--hover g-brd-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-bg-primary--hover g-brd-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-002 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-bg-primary--hover g-brd-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-bg-primary--hover g-brd-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-010 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-bg-primary--hover g-brd-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-011 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-bg-primary--hover g-brd-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-025 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-bg-primary--hover g-brd-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-bg-primary--hover g-brd-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-054 u-line-icon-pro"></i>
                </span>
              </div>

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

          <!-- Backgrounded Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Backgrounded Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode7">
                <span class="u-icon-v3 g-rounded-3 g-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-038 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-037 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-043 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-079 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-014 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-028 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-016 u-line-icon-pro"></i>
                </span>

                <span class="u-icon-v3 g-rounded-3 g-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-076 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-058 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-002 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-010 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-011 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-025 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-054 u-line-icon-pro"></i>
                </span>
              </div>

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

          <!-- Backgrounded & Bordered Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Backgrounded &amp; Bordered Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode8">
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-v4-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-005 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-v4-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-017 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-v4-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-021 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-v4-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-038 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-v4-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-037 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-v4-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-043 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-v4-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-079 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-v4-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-083 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-v4-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-014 u-line-icon-pro"></i>
                  </span>
                </span>

                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-v4-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-028 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-v4-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-016 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-v4-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-083 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-v4-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-076 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-v4-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-058 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-v4-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-021 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-v4-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-002 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-v4-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-005 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-v4-bg-primary--hover g-color-white--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-010 u-line-icon-pro"></i>
                  </span>
                </span>
              </div>

              {% set contentTarget = "#shortcode8" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Backgrounded & Bordered Icons -->
        </section>
        <!-- End Background Color -->

        <hr class="g-brd-gray-light-v4 g-mt-0 g-mb-60">

        <!-- Border Color -->
        <section>
          <!-- Heading -->
          <header class="g-mb-60">
            <div class="u-heading-v6-2 text-uppercase">
              <h2 class="h4 u-heading-v6__title g-font-weight-300">Border Color</h2>
            </div>

            <div class="g-pl-90">
              <p>Extend the icons with <code>.g-brd-*--hover</code> class.</p>
            </div>
          </header>
          <!-- End Heading -->

          <!-- Plain Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Plain Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode9">
                <span class="u-icon-v1 g-brd-around g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-brd-around g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-brd-around g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-brd-around g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-038 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-brd-around g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-037 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-brd-around g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-043 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-brd-around g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-079 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-brd-around g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-brd-around g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-014 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-brd-around g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-028 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-brd-around g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-016 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-brd-around g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-brd-around g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-076 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-brd-around g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-058 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-brd-around g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-021 u-line-icon-pro"></i>
                </span>

                <span class="u-icon-v1 g-brd-around g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-002 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-brd-around g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-brd-around g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-010 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-brd-around g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-011 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-brd-around g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-025 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-brd-around g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-brd-around g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-054 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-brd-around g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-044 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-brd-around g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-education-001 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-brd-around g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-education-002 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-brd-around g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-education-004 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-brd-around g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-education-007 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-brd-around g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-education-036 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-brd-around g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-education-010 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-brd-around g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-education-024 u-line-icon-pro"></i>
                </span>
              </div>

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

          <!-- Bordered Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Bordered Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode10">
                <span class="u-icon-v2 g-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-038 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-037 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-043 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-079 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-014 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-028 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-016 u-line-icon-pro"></i>
                </span>

                <span class="u-icon-v2 g-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-076 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-058 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-002 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-010 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-011 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-025 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-054 u-line-icon-pro"></i>
                </span>
              </div>

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

          <!-- Backgrounded Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Backgrounded Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode11">
                <span class="u-icon-v3 g-brd-around g-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-brd-around g-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-brd-around g-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-brd-around g-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-038 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-brd-around g-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-037 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-brd-around g-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-043 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-brd-around g-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-079 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-brd-around g-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-brd-around g-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-014 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-brd-around g-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-028 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-brd-around g-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-016 u-line-icon-pro"></i>
                </span>

                <span class="u-icon-v3 g-brd-around g-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-brd-around g-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-076 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-brd-around g-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-058 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-brd-around g-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-brd-around g-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-002 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-brd-around g-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-brd-around g-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-010 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-brd-around g-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-011 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-brd-around g-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-025 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-brd-around g-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-brd-around g-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-054 u-line-icon-pro"></i>
                </span>
              </div>

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

          <!-- Backgrounded & Bordered Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Backgrounded &amp; Bordered Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode12">
                <span class="u-icon-v4 u-icon-v4-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-005 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-017 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-021 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-038 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-037 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-043 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-079 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-083 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-014 u-line-icon-pro"></i>
                  </span>
                </span>

                <span class="u-icon-v4 u-icon-v4-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-028 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-016 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-083 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-076 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-058 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-021 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-002 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-005 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 g-brd-primary--hover g-color-primary--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-010 u-line-icon-pro"></i>
                  </span>
                </span>
              </div>

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

        <hr class="g-brd-gray-light-v4 g-mt-0 g-mb-60">

        <!-- Opacity -->
        <section>
          <!-- Heading -->
          <header class="g-mb-60">
            <div class="u-heading-v6-2 text-uppercase">
              <h2 class="h4 u-heading-v6__title g-font-weight-300">Opacity</h2>
            </div>

            <div class="g-pl-90">
              <p>Extend the icons with <code>.g-opacity-*--hover</code> class.</p>
            </div>
          </header>
          <!-- End Heading -->

          <!-- Plain Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Plain Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode13">
                <span class="u-icon-v1 g-opacity-0_5--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-opacity-0_5--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-opacity-0_5--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-opacity-0_5--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-038 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-opacity-0_5--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-037 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-opacity-0_5--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-043 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-opacity-0_5--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-079 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-opacity-0_5--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-opacity-0_5--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-014 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-opacity-0_5--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-028 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-opacity-0_5--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-016 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-opacity-0_5--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-opacity-0_5--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-076 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-opacity-0_5--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-058 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-opacity-0_5--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-021 u-line-icon-pro"></i>
                </span>

                <span class="u-icon-v1 g-opacity-0_5--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-002 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-opacity-0_5--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-opacity-0_5--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-010 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-opacity-0_5--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-011 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-opacity-0_5--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-025 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-opacity-0_5--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-opacity-0_5--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-054 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-opacity-0_5--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-044 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-opacity-0_5--hover g-mr-15 g-mb-15">
                  <i class="icon-education-001 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-opacity-0_5--hover g-mr-15 g-mb-15">
                  <i class="icon-education-002 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-opacity-0_5--hover g-mr-15 g-mb-15">
                  <i class="icon-education-004 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-opacity-0_5--hover g-mr-15 g-mb-15">
                  <i class="icon-education-007 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-opacity-0_5--hover g-mr-15 g-mb-15">
                  <i class="icon-education-036 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-opacity-0_5--hover g-mr-15 g-mb-15">
                  <i class="icon-education-010 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 g-opacity-0_5--hover g-mr-15 g-mb-15">
                  <i class="icon-education-024 u-line-icon-pro"></i>
                </span>
              </div>

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

          <!-- Bordered Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Bordered Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode14">
                <span class="u-icon-v2 g-rounded-3 g-opacity-0_5--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-opacity-0_5--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-opacity-0_5--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-opacity-0_5--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-038 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-opacity-0_5--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-037 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-opacity-0_5--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-043 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-opacity-0_5--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-079 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-opacity-0_5--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-opacity-0_5--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-014 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-opacity-0_5--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-028 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-opacity-0_5--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-016 u-line-icon-pro"></i>
                </span>

                <span class="u-icon-v2 g-rounded-3 g-opacity-0_5--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-opacity-0_5--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-076 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-opacity-0_5--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-058 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-opacity-0_5--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-opacity-0_5--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-002 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-opacity-0_5--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-opacity-0_5--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-010 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-opacity-0_5--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-011 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-opacity-0_5--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-025 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-opacity-0_5--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 g-opacity-0_5--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-054 u-line-icon-pro"></i>
                </span>
              </div>

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

          <!-- Backgrounded Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Backgrounded Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode15">
                <span class="u-icon-v3 g-rounded-3 g-opacity-0_7--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-opacity-0_7--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-opacity-0_7--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-opacity-0_7--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-038 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-opacity-0_7--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-037 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-opacity-0_7--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-043 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-opacity-0_7--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-079 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-opacity-0_7--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-opacity-0_7--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-014 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-opacity-0_7--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-028 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-opacity-0_7--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-016 u-line-icon-pro"></i>
                </span>

                <span class="u-icon-v3 g-rounded-3 g-opacity-0_7--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-opacity-0_7--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-076 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-opacity-0_7--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-058 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-opacity-0_7--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-opacity-0_7--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-002 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-opacity-0_7--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-opacity-0_7--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-010 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-opacity-0_7--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-011 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-opacity-0_7--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-025 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-opacity-0_7--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 g-opacity-0_7--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-054 u-line-icon-pro"></i>
                </span>
              </div>

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

          <!-- Backgrounded & Bordered Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Backgrounded &amp; Bordered Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode16">
                <span class="u-icon-v4 u-icon-v4-rounded-3 g-opacity-0_7--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-005 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 g-opacity-0_7--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-017 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 g-opacity-0_7--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-021 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 g-opacity-0_7--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-038 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 g-opacity-0_7--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-037 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 g-opacity-0_7--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-043 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 g-opacity-0_7--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-079 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 g-opacity-0_7--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-083 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 g-opacity-0_7--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-014 u-line-icon-pro"></i>
                  </span>
                </span>

                <span class="u-icon-v4 u-icon-v4-rounded-3 g-opacity-0_7--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-028 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 g-opacity-0_7--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-016 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 g-opacity-0_7--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-083 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 g-opacity-0_7--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-076 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 g-opacity-0_7--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-058 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 g-opacity-0_7--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-021 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 g-opacity-0_7--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-002 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 g-opacity-0_7--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-005 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 g-opacity-0_7--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-010 u-line-icon-pro"></i>
                  </span>
                </span>
              </div>

              {% set contentTarget = "#shortcode16" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Backgrounded & Bordered Icons -->
        </section>
        <!-- End Opacity -->

        <hr class="g-brd-gray-light-v4 g-mt-0 g-mb-60">

        <!-- Slide -->
        <section>
          <!-- Heading -->
          <header class="g-mb-60">
            <div class="u-heading-v6-2 text-uppercase">
              <h2 class="h4 u-heading-v6__title g-font-weight-300">Slide</h2>
            </div>

            <div class="g-pl-90">
              <p>Extend the icons with <code>.u-icon-sliding--hover</code> class.</p>
            </div>
          </header>
          <!-- End Heading -->

          <!-- Plain Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Plain Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode17">
                <span class="u-icon-v1 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-038 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-037 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-043 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-079 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-014 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-028 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-016 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-076 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-058 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-021 u-line-icon-pro"></i>
                </span>

                <span class="u-icon-v1 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-002 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-010 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-011 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-025 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-054 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-044 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-education-001 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-education-002 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-education-004 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-education-007 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-education-036 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-education-010 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-education-024 u-line-icon-pro"></i>
                </span>
              </div>

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

          <!-- Bordered Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Bordered Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode18">
                <span class="u-icon-v2 g-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-038 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-037 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-043 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-079 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-014 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-028 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-016 u-line-icon-pro"></i>
                </span>

                <span class="u-icon-v2 g-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-076 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-058 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-002 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-010 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-011 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-025 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-054 u-line-icon-pro"></i>
                </span>
              </div>

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

          <!-- Backgrounded Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Backgrounded Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode19">
                <span class="u-icon-v3 g-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-038 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-037 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-043 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-079 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-014 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-028 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-016 u-line-icon-pro"></i>
                </span>

                <span class="u-icon-v3 g-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-076 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-058 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-002 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-010 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-011 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-025 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-054 u-line-icon-pro"></i>
                </span>
              </div>

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

          <!-- Backgrounded & Bordered Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Backgrounded &amp; Bordered Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode20">
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-005 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-017 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-021 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-038 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-037 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-043 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-079 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-083 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-014 u-line-icon-pro"></i>
                  </span>
                </span>

                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-028 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-016 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-083 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-076 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-058 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-021 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-002 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-005 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-sliding--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-010 u-line-icon-pro"></i>
                  </span>
                </span>
              </div>

              {% set contentTarget = "#shortcode20" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Backgrounded & Bordered Icons -->
        </section>
        <!-- End Slide -->

        <hr class="g-brd-gray-light-v4 g-mt-0 g-mb-60">

        <!-- Zoom -->
        <section>
          <!-- Heading -->
          <header class="g-mb-60">
            <div class="u-heading-v6-2 text-uppercase">
              <h2 class="h4 u-heading-v6__title g-font-weight-300">Zoom</h2>
            </div>

            <div class="g-pl-90">
              <p>Extend the icons with <code>.u-icon-scale-1_2--hover</code> class.</p>
            </div>
          </header>
          <!-- End Heading -->

          <!-- Plain Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Plain Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode21">
                <span class="u-icon-v1 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-038 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-037 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-043 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-079 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-014 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-028 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-016 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-076 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-058 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-021 u-line-icon-pro"></i>
                </span>

                <span class="u-icon-v1 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-002 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-010 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-011 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-025 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-054 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-044 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-education-001 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-education-002 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-education-004 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-education-007 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-education-036 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-education-010 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-education-024 u-line-icon-pro"></i>
                </span>
              </div>

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

          <!-- Bordered Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Bordered Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode22">
                <span class="u-icon-v2 g-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-038 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-037 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-043 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-079 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-014 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-028 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-016 u-line-icon-pro"></i>
                </span>

                <span class="u-icon-v2 g-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-076 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-058 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-002 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-010 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-011 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-025 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-054 u-line-icon-pro"></i>
                </span>
              </div>

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

          <!-- Backgrounded Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Backgrounded Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode23">
                <span class="u-icon-v3 g-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-038 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-037 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-043 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-079 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-014 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-028 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-016 u-line-icon-pro"></i>
                </span>

                <span class="u-icon-v3 g-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-076 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-058 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-002 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-010 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-011 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-025 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-054 u-line-icon-pro"></i>
                </span>
              </div>

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

          <!-- Backgrounded & Bordered Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Backgrounded &amp; Bordered Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode24">
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-005 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-017 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-021 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-038 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-037 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-043 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-079 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-083 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-014 u-line-icon-pro"></i>
                  </span>
                </span>

                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-028 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-016 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-083 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-076 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-058 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-021 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-002 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-005 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-scale-1_2--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-010 u-line-icon-pro"></i>
                  </span>
                </span>
              </div>

              {% set contentTarget = "#shortcode24" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Backgrounded & Bordered Icons -->
        </section>
        <!-- End Zoom -->

        <hr class="g-brd-gray-light-v4 g-mt-0 g-mb-60">

        <!-- Shadow -->
        <section>
          <!-- Heading -->
          <header class="g-mb-60">
            <div class="u-heading-v6-2 text-uppercase">
              <h2 class="h4 u-heading-v6__title g-font-weight-300">Shadow</h2>
            </div>

            <div class="g-pl-90">
              <p>Extend the icons with <code>.u-icon-shadow--hover</code> class.</p>
            </div>
          </header>
          <!-- End Heading -->

          <!-- Plain Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Plain Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode25">
                <span class="u-icon-v1 u-icon-shadow--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-shadow--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-shadow--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-shadow--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-038 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-shadow--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-037 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-shadow--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-043 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-shadow--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-079 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-shadow--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-shadow--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-014 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-shadow--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-028 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-shadow--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-016 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-shadow--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-shadow--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-076 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-shadow--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-058 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-shadow--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-021 u-line-icon-pro"></i>
                </span>

                <span class="u-icon-v1 u-icon-shadow--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-002 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-shadow--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-shadow--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-010 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-shadow--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-011 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-shadow--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-025 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-shadow--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-shadow--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-054 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-shadow--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-044 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-shadow--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-001 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-shadow--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-002 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-shadow--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-004 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-shadow--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-007 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-shadow--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-036 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-shadow--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-010 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-shadow--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-024 u-line-icon-pro"></i>
                </span>
              </div>

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

          <!-- Bordered Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Bordered Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode26">
                <span class="u-icon-v2 g-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-038 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-037 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-043 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-079 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-014 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-028 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-016 u-line-icon-pro"></i>
                </span>

                <span class="u-icon-v2 g-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-076 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-058 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-002 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-010 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-011 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-025 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-054 u-line-icon-pro"></i>
                </span>
              </div>

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

          <!-- Backgrounded Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Backgrounded Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode27">
                <span class="u-icon-v3 g-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-038 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-037 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-043 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-079 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-014 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-028 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-016 u-line-icon-pro"></i>
                </span>

                <span class="u-icon-v3 g-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-076 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-058 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-002 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-010 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-011 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-025 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-054 u-line-icon-pro"></i>
                </span>
              </div>

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

          <!-- Backgrounded & Bordered Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Backgrounded &amp; Bordered Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode28">
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-005 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-017 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-021 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-038 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-037 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-043 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-079 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-083 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-014 u-line-icon-pro"></i>
                  </span>
                </span>

                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-028 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-016 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-083 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-076 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-058 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-021 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-002 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-005 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-shadow--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-010 u-line-icon-pro"></i>
                  </span>
                </span>
              </div>

              {% set contentTarget = "#shortcode28" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Backgrounded & Bordered Icons -->
        </section>
        <!-- End Shadow -->

        <hr class="g-brd-gray-light-v4 g-mt-0 g-mb-60">

        <!-- Slide up -->
        <section>
          <!-- Heading -->
          <header class="g-mb-60">
            <div class="u-heading-v6-2 text-uppercase">
              <h2 class="h4 u-heading-v6__title g-font-weight-300">Slide up</h2>
            </div>

            <div class="g-pl-90">
              <p>Extend the icons with <code>.u-icon-slide-up--hover</code> class.</p>
            </div>
          </header>
          <!-- End Heading -->

          <!-- Plain Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Plain Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode29">
                <span class="u-icon-v1 u-icon-slide-up--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-005 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-005 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-up--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-017 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-017 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-up--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-021 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-021 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-up--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-038 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-038 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-up--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-037 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-037 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-up--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-043 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-043 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-up--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-079 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-079 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-up--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-083 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-083 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-up--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-014 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-clothes-014 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-up--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-028 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-clothes-028 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-up--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-016 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-clothes-016 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-up--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-083 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-clothes-083 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-up--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-076 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-clothes-076 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-up--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-058 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-clothes-058 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-up--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-021 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-clothes-021 u-line-icon-pro u-icon__elem-hover"></i>
                </span>

                <span class="u-icon-v1 u-icon-slide-up--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-002 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-002 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-up--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-005 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-005 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-up--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-010 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-010 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-up--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-011 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-011 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-up--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-025 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-025 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-up--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-017 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-017 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-up--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-054 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-054 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-up--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-044 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-044 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-up--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-001 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-education-001 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-up--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-002 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-education-002 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-up--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-004 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-education-004 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-up--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-007 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-education-007 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-up--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-036 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-education-036 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-up--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-010 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-education-010 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-up--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-024 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-education-024 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
              </div>

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

          <!-- Bordered Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Bordered Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode30">
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-005 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-005 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-017 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-017 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-021 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-021 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-038 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-038 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-037 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-037 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-043 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-043 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-079 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-079 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-083 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-083 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-014 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-clothes-014 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-028 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-clothes-028 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-016 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-clothes-016 u-line-icon-pro u-icon__elem-hover"></i>
                </span>

                <span class="u-icon-v2 g-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-002 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-002 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-005 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-005 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-010 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-010 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-011 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-011 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-025 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-025 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-017 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-017 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-054 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-054 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-044 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-044 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <i class="icon-education-001 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-education-001 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <i class="icon-education-002 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-education-002 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <i class="icon-education-004 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-education-004 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
              </div>

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

          <!-- Backgrounded Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Backgrounded Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode31">
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-005 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-005 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-017 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-017 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-021 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-021 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-038 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-038 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-037 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-037 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-043 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-043 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-079 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-079 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-083 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-083 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-014 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-clothes-014 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-028 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-clothes-028 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-016 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-clothes-016 u-line-icon-pro u-icon__elem-hover"></i>
                </span>

                <span class="u-icon-v3 g-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-002 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-002 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-005 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-005 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-010 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-010 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-011 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-011 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-025 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-025 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-017 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-017 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-054 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-054 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-044 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-044 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <i class="icon-education-001 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-education-001 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <i class="icon-education-002 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-education-002 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <i class="icon-education-004 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-education-004 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
              </div>

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

          <!-- Backgrounded & Bordered Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Backgrounded &amp; Bordered Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode32">
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-005 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-christmas-005 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-017 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-christmas-017 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-021 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-christmas-021 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-038 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-christmas-038 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-037 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-christmas-037 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-043 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-christmas-043 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-079 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-christmas-079 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-083 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-christmas-083 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-014 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-clothes-014 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>

                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-002 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-communication-002 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-005 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-communication-005 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-010 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-communication-010 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-011 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-communication-011 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-025 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-communication-025 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-017 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-communication-017 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-054 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-communication-054 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-044 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-communication-044 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-up--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-education-001 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-education-001 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
              </div>

              {% set contentTarget = "#shortcode32" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Backgrounded & Bordered Icons -->
        </section>
        <!-- End Slide up -->

        <hr class="g-brd-gray-light-v4 g-mt-0 g-mb-60">

        <!-- Slide down -->
        <section>
          <!-- Heading -->
          <header class="g-mb-60">
            <div class="u-heading-v6-2 text-uppercase">
              <h2 class="h4 u-heading-v6__title g-font-weight-300">Slide down</h2>
            </div>

            <div class="g-pl-90">
              <p>Extend the icons with <code>.u-icon-slide-down--hover</code> class.</p>
            </div>
          </header>
          <!-- End Heading -->

          <!-- Plain Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Plain Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode33">
                <span class="u-icon-v1 u-icon-slide-down--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-005 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-005 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-down--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-017 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-017 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-down--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-021 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-021 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-down--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-038 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-038 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-down--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-037 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-037 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-down--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-043 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-043 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-down--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-079 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-079 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-down--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-083 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-083 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-down--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-014 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-clothes-014 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-down--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-028 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-clothes-028 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-down--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-016 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-clothes-016 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-down--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-083 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-clothes-083 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-down--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-076 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-clothes-076 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-down--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-058 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-clothes-058 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-down--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-021 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-clothes-021 u-line-icon-pro u-icon__elem-hover"></i>
                </span>

                <span class="u-icon-v1 u-icon-slide-down--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-002 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-002 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-down--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-005 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-005 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-down--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-010 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-010 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-down--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-011 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-011 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-down--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-025 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-025 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-down--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-017 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-017 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-down--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-054 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-054 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-down--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-044 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-044 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-down--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-001 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-education-001 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-down--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-002 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-education-002 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-down--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-004 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-education-004 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-down--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-007 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-education-007 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-down--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-036 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-education-036 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-down--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-010 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-education-010 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-down--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-024 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-education-024 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
              </div>

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

          <!-- Bordered Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Bordered Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode34">
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-005 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-005 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-017 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-017 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-021 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-021 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-038 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-038 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-037 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-037 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-043 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-043 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-079 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-079 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-083 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-083 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-014 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-clothes-014 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-028 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-clothes-028 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-016 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-clothes-016 u-line-icon-pro u-icon__elem-hover"></i>
                </span>

                <span class="u-icon-v2 g-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-002 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-002 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-005 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-005 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-010 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-010 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-011 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-011 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-025 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-025 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-017 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-017 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-054 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-054 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-044 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-044 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <i class="icon-education-001 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-education-001 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <i class="icon-education-002 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-education-002 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <i class="icon-education-004 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-education-004 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
              </div>

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

          <!-- Backgrounded Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Backgrounded Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode35">
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-005 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-005 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-017 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-017 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-021 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-021 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-038 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-038 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-037 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-037 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-043 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-043 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-079 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-079 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-083 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-083 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-014 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-clothes-014 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-028 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-clothes-028 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-016 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-clothes-016 u-line-icon-pro u-icon__elem-hover"></i>
                </span>

                <span class="u-icon-v3 g-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-002 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-002 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-005 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-005 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-010 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-010 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-011 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-011 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-025 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-025 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-017 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-017 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-054 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-054 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-044 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-044 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <i class="icon-education-001 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-education-001 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <i class="icon-education-002 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-education-002 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <i class="icon-education-004 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-education-004 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
              </div>

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

          <!-- Backgrounded & Bordered Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Backgrounded &amp; Bordered Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode36">
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-005 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-christmas-005 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-017 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-christmas-017 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-021 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-christmas-021 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-038 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-christmas-038 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-037 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-christmas-037 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-043 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-christmas-043 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-079 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-christmas-079 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-083 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-christmas-083 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-014 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-clothes-014 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>

                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-002 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-communication-002 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-005 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-communication-005 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-010 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-communication-010 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-011 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-communication-011 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-025 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-communication-025 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-017 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-communication-017 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-054 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-communication-054 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-044 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-communication-044 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-down--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-education-001 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-education-001 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
              </div>

              {% set contentTarget = "#shortcode36" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Backgrounded & Bordered Icons -->
        </section>
        <!-- End Slide down -->

        <hr class="g-brd-gray-light-v4 g-mt-0 g-mb-60">

        <!-- Slide left -->
        <section>
          <!-- Heading -->
          <header class="g-mb-60">
            <div class="u-heading-v6-2 text-uppercase">
              <h2 class="h4 u-heading-v6__title g-font-weight-300">Slide left</h2>
            </div>

            <div class="g-pl-90">
              <p>Extend the icons with <code>.u-icon-slide-left--hover</code> class.</p>
            </div>
          </header>
          <!-- End Heading -->

          <!-- Plain Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Plain Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode37">
                <span class="u-icon-v1 u-icon-slide-left--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-005 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-005 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-left--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-017 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-017 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-left--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-021 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-021 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-left--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-038 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-038 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-left--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-037 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-037 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-left--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-043 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-043 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-left--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-079 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-079 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-left--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-083 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-083 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-left--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-014 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-clothes-014 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-left--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-028 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-clothes-028 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-left--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-016 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-clothes-016 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-left--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-083 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-clothes-083 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-left--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-076 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-clothes-076 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-left--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-058 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-clothes-058 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-left--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-021 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-clothes-021 u-line-icon-pro u-icon__elem-hover"></i>
                </span>

                <span class="u-icon-v1 u-icon-slide-left--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-002 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-002 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-left--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-005 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-005 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-left--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-010 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-010 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-left--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-011 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-011 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-left--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-025 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-025 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-left--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-017 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-017 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-left--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-054 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-054 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-left--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-044 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-044 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-left--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-001 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-education-001 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-left--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-002 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-education-002 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-left--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-004 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-education-004 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-left--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-007 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-education-007 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-left--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-036 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-education-036 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-left--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-010 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-education-010 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-left--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-024 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-education-024 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
              </div>

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

          <!-- Bordered Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Bordered Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode38">
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-005 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-005 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-017 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-017 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-021 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-021 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-038 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-038 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-037 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-037 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-043 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-043 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-079 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-079 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-083 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-083 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-014 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-clothes-014 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-028 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-clothes-028 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-016 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-clothes-016 u-line-icon-pro u-icon__elem-hover"></i>
                </span>

                <span class="u-icon-v2 g-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-002 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-002 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-005 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-005 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-010 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-010 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-011 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-011 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-025 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-025 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-017 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-017 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-054 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-054 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-044 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-044 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <i class="icon-education-001 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-education-001 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <i class="icon-education-002 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-education-002 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <i class="icon-education-004 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-education-004 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
              </div>

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

          <!-- Backgrounded Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Backgrounded Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode39">
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-005 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-005 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-017 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-017 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-021 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-021 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-038 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-038 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-037 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-037 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-043 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-043 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-079 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-079 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-083 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-083 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-014 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-clothes-014 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-028 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-clothes-028 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-016 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-clothes-016 u-line-icon-pro u-icon__elem-hover"></i>
                </span>

                <span class="u-icon-v3 g-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-002 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-002 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-005 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-005 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-010 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-010 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-011 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-011 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-025 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-025 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-017 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-017 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-054 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-054 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-044 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-044 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <i class="icon-education-001 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-education-001 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <i class="icon-education-002 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-education-002 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <i class="icon-education-004 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-education-004 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
              </div>

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

          <!-- Backgrounded & Bordered Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Backgrounded &amp; Bordered Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode40">
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-005 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-christmas-005 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-017 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-christmas-017 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-021 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-christmas-021 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-038 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-christmas-038 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-037 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-christmas-037 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-043 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-christmas-043 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-079 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-christmas-079 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-083 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-christmas-083 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-014 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-clothes-014 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>

                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-002 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-communication-002 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-005 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-communication-005 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-010 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-communication-010 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-011 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-communication-011 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-025 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-communication-025 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-017 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-communication-017 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-054 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-communication-054 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-044 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-communication-044 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-left--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-education-001 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-education-001 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
              </div>

              {% set contentTarget = "#shortcode40" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Backgrounded & Bordered Icons -->
        </section>
        <!-- End Slide left -->

        <hr class="g-brd-gray-light-v4 g-mt-0 g-mb-60">

        <!-- Slide right -->
        <section>
          <!-- Heading -->
          <header class="g-mb-60">
            <div class="u-heading-v6-2 text-uppercase">
              <h2 class="h4 u-heading-v6__title g-font-weight-300">Slide right</h2>
            </div>

            <div class="g-pl-90">
              <p>Extend the icons with <code>.u-icon-slide-right--hover</code> class.</p>
            </div>
          </header>
          <!-- End Heading -->

          <!-- Plain Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Plain Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode41">
                <span class="u-icon-v1 u-icon-slide-right--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-005 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-005 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-right--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-017 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-017 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-right--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-021 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-021 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-right--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-038 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-038 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-right--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-037 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-037 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-right--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-043 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-043 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-right--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-079 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-079 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-right--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-083 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-083 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-right--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-014 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-clothes-014 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-right--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-028 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-clothes-028 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-right--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-016 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-clothes-016 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-right--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-083 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-clothes-083 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-right--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-076 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-clothes-076 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-right--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-058 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-clothes-058 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-right--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-021 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-clothes-021 u-line-icon-pro u-icon__elem-hover"></i>
                </span>

                <span class="u-icon-v1 u-icon-slide-right--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-002 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-002 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-right--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-005 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-005 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-right--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-010 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-010 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-right--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-011 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-011 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-right--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-025 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-025 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-right--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-017 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-017 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-right--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-054 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-054 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-right--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-044 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-044 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-right--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-001 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-education-001 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-right--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-002 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-education-002 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-right--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-004 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-education-004 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-right--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-007 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-education-007 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-right--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-036 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-education-036 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-right--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-010 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-education-010 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v1 u-icon-slide-right--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-024 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-education-024 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
              </div>

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

          <!-- Bordered Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Bordered Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode42">
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-005 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-005 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-017 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-017 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-021 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-021 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-038 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-038 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-037 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-037 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-043 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-043 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-079 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-079 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-083 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-083 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-014 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-clothes-014 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-028 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-clothes-028 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-016 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-clothes-016 u-line-icon-pro u-icon__elem-hover"></i>
                </span>

                <span class="u-icon-v2 g-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-002 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-002 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-005 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-005 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-010 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-010 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-011 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-011 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-025 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-025 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-017 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-017 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-054 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-054 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-044 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-044 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <i class="icon-education-001 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-education-001 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <i class="icon-education-002 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-education-002 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <i class="icon-education-004 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-education-004 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
              </div>

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

          <!-- Backgrounded Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Backgrounded Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode43">
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-005 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-005 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-017 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-017 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-021 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-021 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-038 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-038 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-037 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-037 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-043 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-043 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-079 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-079 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-083 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-christmas-083 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-014 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-clothes-014 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-028 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-clothes-028 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-016 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-clothes-016 u-line-icon-pro u-icon__elem-hover"></i>
                </span>

                <span class="u-icon-v3 g-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-002 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-002 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-005 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-005 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-010 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-010 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-011 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-011 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-025 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-025 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-017 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-017 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-054 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-054 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-044 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-communication-044 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <i class="icon-education-001 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-education-001 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <i class="icon-education-002 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-education-002 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <i class="icon-education-004 u-line-icon-pro u-icon__elem-regular"></i>
                  <i class="icon-education-004 u-line-icon-pro u-icon__elem-hover"></i>
                </span>
              </div>

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

          <!-- Backgrounded & Bordered Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Backgrounded &amp; Bordered Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode44">
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-005 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-christmas-005 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-017 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-christmas-017 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-021 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-christmas-021 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-038 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-christmas-038 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-037 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-christmas-037 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-043 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-christmas-043 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-079 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-christmas-079 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-083 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-christmas-083 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-014 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-clothes-014 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>

                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-002 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-communication-002 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-005 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-communication-005 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-010 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-communication-010 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-011 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-communication-011 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-025 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-communication-025 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-017 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-communication-017 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-054 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-communication-054 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-044 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-communication-044 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-slide-right--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-education-001 u-line-icon-pro u-icon__elem-regular"></i>
                    <i class="icon-education-001 u-line-icon-pro u-icon__elem-hover"></i>
                  </span>
                </span>
              </div>

              {% set contentTarget = "#shortcode44" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Backgrounded & Bordered Icons -->
        </section>
        <!-- End Slide right -->

        <hr class="g-brd-gray-light-v4 g-mt-0 g-mb-60">

        <!-- Effect v1-1 -->
        <section>
          <!-- Heading -->
          <header class="g-mb-60">
            <div class="u-heading-v6-2 text-uppercase">
              <h2 class="h4 u-heading-v6__title g-font-weight-300">Effect v1-1</h2>
            </div>

            <div class="g-pl-90">
              <p>Extend the icons with <code>.u-icon-effect-v1-1--hover</code> class.</p>
            </div>
          </header>
          <!-- End Heading -->

          <!-- Plain Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Plain Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode45">
                <span class="u-icon-v1 u-icon-effect-v1-1--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-1--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-1--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-1--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-038 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-1--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-037 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-1--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-043 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-1--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-079 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-1--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-1--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-014 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-1--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-028 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-1--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-016 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-1--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-1--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-076 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-1--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-058 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-1--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-021 u-line-icon-pro"></i>
                </span>

                <span class="u-icon-v1 u-icon-effect-v1-1--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-002 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-1--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-1--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-010 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-1--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-011 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-1--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-025 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-1--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-1--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-054 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-1--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-044 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-1--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-001 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-1--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-002 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-1--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-004 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-1--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-007 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-1--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-036 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-1--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-010 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-1--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-024 u-line-icon-pro"></i>
                </span>
              </div>

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

          <!-- Bordered Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Bordered Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode46">
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-038 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-037 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-043 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-079 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-014 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-028 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-016 u-line-icon-pro"></i>
                </span>

                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-076 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-058 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-002 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-010 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-011 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-025 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-054 u-line-icon-pro"></i>
                </span>
              </div>

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

          <!-- Backgrounded Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Backgrounded Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode47">
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-038 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-037 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-043 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-079 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-014 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-028 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-016 u-line-icon-pro"></i>
                </span>

                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-076 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-058 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-002 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-010 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-011 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-025 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-054 u-line-icon-pro"></i>
                </span>
              </div>

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

          <!-- Backgrounded & Bordered Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Backgrounded &amp; Bordered Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode48">
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-005 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-017 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-021 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-038 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-037 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-043 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-079 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-083 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-014 u-line-icon-pro"></i>
                  </span>
                </span>

                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-028 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-016 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-083 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-076 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-058 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-021 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-002 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-005 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v1-1--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-010 u-line-icon-pro"></i>
                  </span>
                </span>
              </div>

              {% set contentTarget = "#shortcode48" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Backgrounded & Bordered Icons -->
        </section>
        <!-- End Effect v1-1 -->

        <hr class="g-brd-gray-light-v4 g-mt-0 g-mb-60">

        <!-- Effect v1-2 -->
        <section>
          <!-- Heading -->
          <header class="g-mb-60">
            <div class="u-heading-v6-2 text-uppercase">
              <h2 class="h4 u-heading-v6__title g-font-weight-300">Effect v1-2</h2>
            </div>

            <div class="g-pl-90">
              <p>Extend the icons with <code>.u-icon-effect-v1-2--hover</code> class.</p>
            </div>
          </header>
          <!-- End Heading -->

          <!-- Plain Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Plain Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode49">
                <span class="u-icon-v1 u-icon-effect-v1-2--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-2--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-2--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-2--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-038 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-2--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-037 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-2--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-043 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-2--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-079 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-2--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-2--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-014 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-2--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-028 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-2--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-016 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-2--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-2--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-076 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-2--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-058 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-2--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-021 u-line-icon-pro"></i>
                </span>

                <span class="u-icon-v1 u-icon-effect-v1-2--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-002 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-2--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-2--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-010 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-2--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-011 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-2--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-025 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-2--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-2--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-054 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-2--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-044 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-2--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-001 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-2--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-002 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-2--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-004 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-2--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-007 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-2--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-036 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-2--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-010 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v1-2--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-024 u-line-icon-pro"></i>
                </span>
              </div>

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

          <!-- Bordered Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Bordered Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode50">
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-038 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-037 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-043 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-079 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-014 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-028 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-016 u-line-icon-pro"></i>
                </span>

                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-076 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-058 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-002 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-010 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-011 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-025 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-054 u-line-icon-pro"></i>
                </span>
              </div>

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

          <!-- Backgrounded Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Backgrounded Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode51">
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-038 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-037 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-043 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-079 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-014 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-028 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-016 u-line-icon-pro"></i>
                </span>

                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-076 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-058 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-002 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-010 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-011 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-025 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-054 u-line-icon-pro"></i>
                </span>
              </div>

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

          <!-- Backgrounded & Bordered Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Backgrounded &amp; Bordered Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode52">
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-005 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-017 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-021 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-038 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-037 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-043 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-079 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-083 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-014 u-line-icon-pro"></i>
                  </span>
                </span>

                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-028 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-016 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-083 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-076 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-058 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-021 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-002 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-005 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v1-2--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-010 u-line-icon-pro"></i>
                  </span>
                </span>
              </div>

              {% set contentTarget = "#shortcode52" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Backgrounded & Bordered Icons -->
        </section>
        <!-- End Effect v1-2 -->

        <hr class="g-brd-gray-light-v4 g-mt-0 g-mb-60">

        <!-- Effect v2 -->
        <section>
          <!-- Heading -->
          <header class="g-mb-60">
            <div class="u-heading-v6-2 text-uppercase">
              <h2 class="h4 u-heading-v6__title g-font-weight-300">Effect v2</h2>
            </div>

            <div class="g-pl-90">
              <p>Extend the icons with <code>.u-icon-effect-v2--hover</code> class.</p>
            </div>
          </header>
          <!-- End Heading -->

          <!-- Plain Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Plain Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode53">
                <span class="u-icon-v1 u-icon-effect-v2--hover g-color-white--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v2--hover g-color-white--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v2--hover g-color-white--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v2--hover g-color-white--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-038 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v2--hover g-color-white--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-037 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v2--hover g-color-white--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-043 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v2--hover g-color-white--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-079 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v2--hover g-color-white--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v2--hover g-color-white--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-014 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v2--hover g-color-white--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-028 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v2--hover g-color-white--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-016 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v2--hover g-color-white--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v2--hover g-color-white--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-076 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v2--hover g-color-white--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-058 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v2--hover g-color-white--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-021 u-line-icon-pro"></i>
                </span>

                <span class="u-icon-v1 u-icon-effect-v2--hover g-color-white--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-002 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v2--hover g-color-white--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v2--hover g-color-white--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-010 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v2--hover g-color-white--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-011 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v2--hover g-color-white--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-025 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v2--hover g-color-white--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v2--hover g-color-white--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-054 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v2--hover g-color-white--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-044 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v2--hover g-color-white--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-001 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v2--hover g-color-white--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-002 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v2--hover g-color-white--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-004 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v2--hover g-color-white--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-007 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v2--hover g-color-white--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-036 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v2--hover g-color-white--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-010 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v2--hover g-color-white--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-024 u-line-icon-pro"></i>
                </span>
              </div>

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

          <!-- Bordered Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Bordered Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode54">
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v2--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v2--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v2--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v2--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-038 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v2--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-037 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v2--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-043 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v2--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-079 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v2--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v2--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-014 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v2--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-028 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v2--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-016 u-line-icon-pro"></i>
                </span>

                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v2--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v2--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-076 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v2--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-058 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v2--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v2--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-002 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v2--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v2--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-010 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v2--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-011 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v2--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-025 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v2--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v2--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-054 u-line-icon-pro"></i>
                </span>
              </div>

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

          <!-- Backgrounded Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Backgrounded Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode55">
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v2--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v2--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v2--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v2--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-038 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v2--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-037 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v2--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-043 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v2--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-079 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v2--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v2--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-014 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v2--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-028 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v2--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-016 u-line-icon-pro"></i>
                </span>

                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v2--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v2--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-076 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v2--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-058 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v2--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v2--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-002 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v2--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v2--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-010 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v2--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-011 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v2--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-025 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v2--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v2--hover g-color-white--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-054 u-line-icon-pro"></i>
                </span>
              </div>

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

        <hr class="g-brd-gray-light-v4 g-mt-0 g-mb-60">

        <!-- Effect v3 -->
        <section>
          <!-- Heading -->
          <header class="g-mb-60">
            <div class="u-heading-v6-2 text-uppercase">
              <h2 class="h4 u-heading-v6__title g-font-weight-300">Effect v3</h2>
            </div>

            <div class="g-pl-90">
              <p>Extend the icons with <code>.u-icon-effect-v3--hover</code> class.</p>
            </div>
          </header>
          <!-- End Heading -->

          <!-- Plain Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Plain Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode56">
                <span class="u-icon-v1 u-icon-effect-v3--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v3--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v3--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v3--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-038 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v3--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-037 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v3--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-043 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v3--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-079 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v3--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v3--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-014 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v3--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-028 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v3--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-016 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v3--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v3--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-076 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v3--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-058 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v3--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-021 u-line-icon-pro"></i>
                </span>

                <span class="u-icon-v1 u-icon-effect-v3--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-002 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v3--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v3--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-010 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v3--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-011 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v3--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-025 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v3--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v3--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-054 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v3--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-044 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v3--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-001 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v3--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-002 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v3--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-004 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v3--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-007 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v3--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-036 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v3--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-010 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v3--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-024 u-line-icon-pro"></i>
                </span>
              </div>

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

          <!-- Bordered Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Bordered Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode57">
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-038 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-037 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-043 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-079 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-014 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-028 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-016 u-line-icon-pro"></i>
                </span>

                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-076 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-058 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-002 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-010 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-011 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-025 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-054 u-line-icon-pro"></i>
                </span>
              </div>

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

          <!-- Backgrounded Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Backgrounded Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode58">
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-038 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-037 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-043 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-079 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-014 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-028 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-016 u-line-icon-pro"></i>
                </span>

                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-076 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-058 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-002 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-010 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-011 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-025 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-054 u-line-icon-pro"></i>
                </span>
              </div>

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

          <!-- Backgrounded & Bordered Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Backgrounded &amp; Bordered Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode59">
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-005 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-017 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-021 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-038 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-037 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-043 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-079 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-083 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-014 u-line-icon-pro"></i>
                  </span>
                </span>

                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-028 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-016 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-083 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-076 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-058 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-021 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-002 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-005 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v3--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-010 u-line-icon-pro"></i>
                  </span>
                </span>
              </div>

              {% set contentTarget = "#shortcode59" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Backgrounded & Bordered Icons -->
        </section>
        <!-- End Effect v3 -->

        <hr class="g-brd-gray-light-v4 g-mt-0 g-mb-60">

        <!-- Effect v4 -->
        <section>
          <!-- Heading -->
          <header class="g-mb-60">
            <div class="u-heading-v6-2 text-uppercase">
              <h2 class="h4 u-heading-v6__title g-font-weight-300">Effect v4</h2>
            </div>

            <div class="g-pl-90">
              <p>Extend the icons with <code>.u-icon-effect-v4--hover</code> class.</p>
            </div>
          </header>
          <!-- End Heading -->

          <!-- Plain Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Plain Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode60">
                <span class="u-icon-v1 u-icon-effect-v4--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v4--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v4--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v4--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-038 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v4--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-037 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v4--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-043 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v4--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-079 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v4--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v4--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-014 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v4--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-028 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v4--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-016 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v4--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v4--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-076 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v4--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-058 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v4--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-021 u-line-icon-pro"></i>
                </span>

                <span class="u-icon-v1 u-icon-effect-v4--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-002 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v4--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v4--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-010 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v4--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-011 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v4--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-025 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v4--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v4--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-054 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v4--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-044 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v4--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-001 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v4--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-002 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v4--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-004 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v4--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-007 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v4--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-036 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v4--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-010 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v4--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-024 u-line-icon-pro"></i>
                </span>
              </div>

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

          <!-- Bordered Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Bordered Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode61">
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-038 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-037 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-043 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-079 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-014 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-028 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-016 u-line-icon-pro"></i>
                </span>

                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-076 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-058 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-002 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-010 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-011 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-025 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-054 u-line-icon-pro"></i>
                </span>
              </div>

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

          <!-- Backgrounded Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Backgrounded Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode62">
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-038 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-037 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-043 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-079 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-014 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-028 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-016 u-line-icon-pro"></i>
                </span>

                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-076 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-058 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-002 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-010 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-011 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-025 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-054 u-line-icon-pro"></i>
                </span>
              </div>

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

          <!-- Backgrounded & Bordered Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Backgrounded &amp; Bordered Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode63">
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-005 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-017 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-021 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-038 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-037 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-043 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-079 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-083 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-014 u-line-icon-pro"></i>
                  </span>
                </span>

                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-028 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-016 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-083 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-076 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-058 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-021 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-002 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-005 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v4--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-010 u-line-icon-pro"></i>
                  </span>
                </span>
              </div>

              {% set contentTarget = "#shortcode63" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Backgrounded & Bordered Icons -->
        </section>
        <!-- End Effect v4 -->

        <hr class="g-brd-gray-light-v4 g-mt-0 g-mb-60">

        <!-- Effect v5 -->
        <section>
          <!-- Heading -->
          <header class="g-mb-60">
            <div class="u-heading-v6-2 text-uppercase">
              <h2 class="h4 u-heading-v6__title g-font-weight-300">Effect v5</h2>
            </div>

            <div class="g-pl-90">
              <p>Extend the icons with <code>.u-icon-effect-v5--hover</code> class.</p>
            </div>
          </header>
          <!-- End Heading -->

          <!-- Plain Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Plain Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode64">
                <span class="u-icon-v1 u-icon-effect-v5--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v5--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v5--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v5--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-038 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v5--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-037 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v5--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-043 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v5--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-079 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v5--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-christmas-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v5--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-014 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v5--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-028 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v5--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-016 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v5--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v5--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-076 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v5--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-058 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v5--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-clothes-021 u-line-icon-pro"></i>
                </span>

                <span class="u-icon-v1 u-icon-effect-v5--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-002 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v5--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v5--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-010 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v5--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-011 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v5--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-025 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v5--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v5--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-054 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v5--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-communication-044 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v5--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-001 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v5--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-002 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v5--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-004 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v5--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-007 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v5--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-036 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v5--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-010 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v1 u-icon-effect-v5--hover g-rounded-3 g-mr-15 g-mb-15">
                  <i class="icon-education-024 u-line-icon-pro"></i>
                </span>
              </div>

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

          <!-- Bordered Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Bordered Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode65">
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-038 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-037 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-043 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-079 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-014 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-028 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-016 u-line-icon-pro"></i>
                </span>

                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-076 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-058 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-002 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-010 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-011 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-025 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v2 g-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-054 u-line-icon-pro"></i>
                </span>
              </div>

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

          <!-- Backgrounded Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Backgrounded Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode66">
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-038 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-037 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-043 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-079 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <i class="icon-christmas-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-014 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-028 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-016 u-line-icon-pro"></i>
                </span>

                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-083 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-076 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-058 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <i class="icon-clothes-021 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-002 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-005 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-010 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-011 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-025 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-017 u-line-icon-pro"></i>
                </span>
                <span class="u-icon-v3 g-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <i class="icon-communication-054 u-line-icon-pro"></i>
                </span>
              </div>

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

          <!-- Backgrounded & Bordered Icons -->
          <div class="row g-mb-60">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Backgrounded &amp; Bordered Icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode67">
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-005 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-017 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-021 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-038 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-037 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-043 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-079 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-christmas-083 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-014 u-line-icon-pro"></i>
                  </span>
                </span>

                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-028 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-016 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-083 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-076 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-058 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-clothes-021 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-002 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-005 u-line-icon-pro"></i>
                  </span>
                </span>
                <span class="u-icon-v4 u-icon-v4-rounded-3 u-icon-effect-v5--hover g-mr-15 g-mb-15">
                  <span class="u-icon-v4-inner">
                    <i class="icon-communication-010 u-line-icon-pro"></i>
                  </span>
                </span>
              </div>

              {% set contentTarget = "#shortcode67" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Backgrounded & Bordered Icons -->
        </section>
        <!-- End Effect v5 -->
      </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" %}

  <!-- 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');
    });

    $(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>
