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

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

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

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

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

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

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

    <section class="container-fluid g-px-0">
      <!-- Unify Alerts -->
      <section class="g-py-50 g-pt-100">
        <div class="container">
          <!-- Heading -->
          <header class="g-mb-80">
            <div class="u-heading-v6-2 text-uppercase">
              <h2 class="h4 u-heading-v6__title g-font-weight-300">Unify Alerts</h2>
            </div>

            <div class="g-line-height-2 g-pl-90">
              <p>Unify alerts are extention of default Bootstrap Alerts.</p>
            </div>
          </header>
          <!-- End Heading -->

          <!-- Background Colored -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Background colored</h3>
              <p>You may use any background colors from the predefined classes or create your own.</p>
            </div>

            <div class="col-md-9">
              <div id="shortcode1">
                <div class="shortcode-html">
                  <div class="row">
                    <div class="col-lg-6">
                      <!-- Teal Alert -->
                      <div class="alert alert-dismissible fade show g-bg-teal g-color-white rounded-0" role="alert">
                        <button type="button" class="close u-alert-close--light" data-dismiss="alert" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>

                        <div class="media">
                          <span class="d-flex g-mr-10 g-mt-5">
                            <i class="icon-check g-font-size-25"></i>
                          </span>
                          <span class="media-body align-self-center">
                            <strong>Well done!</strong> You successfully read this important alert message.
                          </span>
                        </div>
                      </div>
                      <!-- End Teal Alert -->

                      <!-- Gray Dark Alert -->
                      <div class="alert alert-dismissible fade show g-bg-gray-dark-v2 g-color-white rounded-0" role="alert">
                        <button type="button" class="close u-alert-close--light" data-dismiss="alert" aria-label="Close">
                          <span class="g-color-white" aria-hidden="true">×</span>
                        </button>

                        <div class="media">
                          <span class="d-flex g-mr-10 g-mt-5">
                            <i class="icon-question g-font-size-25"></i>
                          </span>
                          <span class="media-body align-self-center">
                            <strong>Heads up!</strong> This alert needs your attention, but it's not important.
                          </span>
                        </div>
                      </div>
                      <!-- End Gray Dark Alert -->
                    </div>

                    <div class="col-lg-6">
                      <!-- Yellow Alert -->
                      <div class="alert alert-dismissible fade show g-bg-yellow rounded-0" role="alert">
                        <button type="button" class="close u-alert-close--light" data-dismiss="alert" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>

                        <div class="media">
                          <span class="d-flex g-mr-10 g-mt-5">
                            <i class="icon-info g-font-size-25"></i>
                          </span>
                          <span class="media-body align-self-center">
                            <strong>Warning!</strong> Better check yourself, you're not looking too good.
                          </span>
                        </div>
                      </div>
                      <!-- End Yellow Alert -->

                      <!-- Red Alert -->
                      <div class="alert alert-dismissible fade show g-bg-red g-color-white rounded-0" role="alert">
                        <button type="button" class="close u-alert-close--light" data-dismiss="alert" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>

                        <div class="media">
                          <span class="d-flex g-mr-10 g-mt-5">
                            <i class="icon-ban g-font-size-25"></i>
                          </span>
                          <span class="media-body align-self-center">
                            <strong>Oh snap!</strong> Change a few things up and try submitting again.
                          </span>
                        </div>
                      </div>
                      <!-- End Red Alert -->
                    </div>
                  </div>
                </div>
              </div>

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

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

          <!-- Border Colored -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Border colored</h3>
              <p>You may use any border colors from the predefined classes or create your own.</p>
            </div>
            <div class="col-md-9">
              <div id="shortcode2">
                <div class="shortcode-html">
                  <div class="row">
                    <div class="col-lg-6">
                      <!-- Border Alert -->
                      <div class="alert fade show g-brd-around g-brd-gray-light-v3 rounded-0" role="alert">
                        <button type="button" class="close u-alert-close--light g-ml-10 g-mt-1" data-dismiss="alert" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>

                        <div class="media">
                          <div class="d-flex g-mr-10">
                            <span class="u-icon-v3 u-icon-size--sm g-bg-lightred g-color-white g-rounded-50x">
                              <i class="icon-envelope"></i>
                            </span>
                          </div>
                          <div class="media-body">
                            <div class="d-flex justify-content-between">
                              <p class="m-0"><strong>Albert Heller</strong></p>
                              <span class="align-self-center small text-nowrap">Just Now</span>
                            </div>
                            <p class="m-0 g-font-size-14">Your friend request has been accepted.</p>
                          </div>
                        </div>
                      </div>
                      <!-- End Border Alert -->

                      <!-- Border Alert -->
                      <div class="alert fade show g-brd-around g-brd-red rounded-0" role="alert">
                        <button type="button" class="close u-alert-close--light g-ml-10 g-mt-1" data-dismiss="alert" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>

                        <div class="media">
                          <div class="d-flex g-mr-10">
                            <img class="g-width-40 g-height-40 g-rounded-50x" src="{{ root }}assets/img-temp/100x100/img7.jpg" alt="Image Description">
                          </div>
                          <div class="media-body">
                            <div class="d-flex justify-content-between">
                              <p class="m-0"><strong>James Coolman</strong></p>
                              <span class="align-self-center small text-nowrap">7 min ago</span>
                            </div>
                            <p class="m-0 g-font-size-14">Your friend request has been declined.</p>
                          </div>
                        </div>
                      </div>
                      <!-- End Border Alert -->
                    </div>

                    <div class="col-lg-6">
                      <!-- Border Alert -->
                      <div class="alert fade show g-brd-around g-brd-gray-dark-v2 rounded-0" role="alert">
                        <button type="button" class="close u-alert-close--light g-ml-10 g-mt-1" data-dismiss="alert" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>

                        <div class="media">
                          <div class="d-flex g-mr-10">
                            <img class="g-width-40 g-height-40 g-rounded-50x" src="{{ root }}assets/img-temp/100x100/img5.jpg" alt="Image Description">
                          </div>
                          <div class="media-body">
                            <div class="d-flex justify-content-between">
                              <p class="m-0"><strong>Alberta Watson</strong></p>
                              <span class="align-self-center small text-nowrap">2 min ago</span>
                            </div>
                            <p class="m-0 g-font-size-14">Your friend request has been accepted.</p>
                          </div>
                        </div>
                      </div>
                      <!-- End Border Alert -->

                      <!-- Border Alert -->
                      <div class="alert fade show g-brd-around g-brd-primary rounded-0" role="alert">
                        <button type="button" class="close u-alert-close--light g-ml-10 g-mt-1" data-dismiss="alert" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>

                        <div class="media">
                          <div class="d-flex g-mr-10">
                            <span class="u-icon-v3 u-icon-size--sm g-bg-primary g-color-white g-rounded-50x">
                              <i class="icon-wallet"></i>
                            </span>
                          </div>
                          <div class="media-body">
                            <div class="d-flex justify-content-between">
                              <p class="m-0"><strong>David Lee</strong></p>
                              <span class="align-self-center small text-nowrap">Just Now</span>
                            </div>
                            <p class="m-0 g-font-size-14">Your have recieved $285 for Web Design.</p>
                          </div>
                        </div>
                      </div>
                      <!-- End Border Alert -->
                    </div>
                  </div>
                </div>
              </div>

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

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

          <!-- Colored Alerts -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Colored alerts</h3>
              <p>You may use any background colors from the predefined classes or create your own.</p>
            </div>
            <div class="col-md-9">
              <div id="shortcode3">
                <div class="shortcode-html">
                  <div class="row	">
                    <div class="col-lg-6">
                      <!-- Alert Danger -->
                      <div class="alert fade show g-bg-red-opacity-0_1 g-color-lightred rounded-0" role="alert">
                        <button type="button" class="close u-alert-close--light g-ml-10 g-mt-1" data-dismiss="alert" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>

                        <div class="media">
                          <div class="d-flex g-mr-10">
                            <img class="g-width-40 g-height-40 g-rounded-50x" src="{{ root }}assets/img-temp/100x100/img1.jpg" alt="Image Description">
                          </div>
                          <div class="media-body">
                            <p class="m-0"><strong>Edmon Low</strong> saved your pin.</p>
                            <span class="g-font-size-12 g-color-gray">5 minutes ago</span>
                          </div>
                        </div>
                      </div>
                      <!-- End Alert Danger -->

                      <!-- Alert Info -->
                      <div class="alert fade show g-bg-blue-opacity-0_1 g-color-blue rounded-0" role="alert">
                        <button type="button" class="close u-alert-close--light g-ml-10 g-mt-1" data-dismiss="alert" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>

                        <div class="media">
                          <div class="d-flex g-mr-10">
                            <span class="u-icon-v3 u-icon-size--sm g-bg-blue g-color-white g-rounded-50x">
                              <i class="icon-wallet"></i>
                            </span>
                          </div>
                          <div class="media-body">
                            <p class="m-0"><strong>Pixeel Ltd</strong> received $270 for logo.</p>
                            <span class="g-font-size-12 g-color-gray">2 hours ago</span>
                          </div>
                        </div>
                      </div>
                      <!-- End Alert Info -->

                      <!-- Alert Gray Lighter 5 -->
                      <div class="alert fade show g-bg-gray-light-v5 rounded-0" role="alert">
                        <button type="button" class="close u-alert-close--light g-ml-10 g-mt-1" data-dismiss="alert" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>

                        <div class="media">
                          <div class="d-flex g-mr-10">
                            <img class="g-width-40 g-height-40 g-rounded-50x" src="{{ root }}assets/img-temp/100x100/img1.jpg" alt="Image Description">
                          </div>
                          <div class="media-body">
                            <p class="m-0"><strong>Htmlstream</strong> released a new update.</p>
                            <span class="g-font-size-12 g-color-gray">2 hours ago</span>
                          </div>
                        </div>
                      </div>
                      <!-- End Alert Gray Lighter 5 -->
                    </div>

                    <div class="col-lg-6">
                      <!-- Alert Success -->
                      <div class="alert fade show g-bg-primary-opacity-0_1 g-color-primary rounded-0" role="alert">
                        <button type="button" class="close u-alert-close--light g-ml-10 g-mt-1" data-dismiss="alert" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>

                        <div class="media">
                          <div class="d-flex g-mr-10">
                            <img class="g-width-40 g-height-40 g-rounded-50x" src="{{ root }}assets/img-temp/100x100/img14.jpg" alt="Image Description">
                          </div>
                          <div class="media-body">
                            <p class="m-0"><strong>Jack Watson</strong> sent you a message.</p>
                            <span class="g-font-size-12 g-color-gray">2 hours ago</span>
                          </div>
                        </div>
                      </div>
                      <!-- End Alert Success -->

                      <!-- Alert Cyan -->
                      <div class="alert fade show g-bg-cyan-opacity-0_1 g-color-cyan rounded-0" role="alert">
                        <button type="button" class="close u-alert-close--light g-ml-10 g-mt-1" data-dismiss="alert" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>

                        <div class="media">
                          <div class="d-flex g-mr-10">
                            <img class="g-width-40 g-height-40 g-rounded-50x" src="{{ root }}assets/img-temp/100x100/img5.jpg" alt="Image Description">
                          </div>
                          <div class="media-body">
                            <p class="m-0"><strong>Jasica Coolman</strong> saved your pin.</p>
                            <span class="g-font-size-12">5 minutes ago</span>
                          </div>
                        </div>
                      </div>
                      <!-- End Alert Cyan -->

                      <!-- Alert Warning -->
                      <div class="alert fade show g-bg-orange-opacity-0_1 g-color-orange rounded-0" role="alert">
                        <button type="button" class="close u-alert-close--light g-ml-10 g-mt-1" data-dismiss="alert" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>

                        <div class="media">
                          <div class="d-flex g-mr-10">
                            <img class="g-width-40 g-height-40 g-rounded-50x" src="{{ root }}assets/img-temp/100x100/img5.jpg" alt="Image Description">
                          </div>
                          <div class="media-body">
                            <p class="m-0"><strong>Jasica</strong> is offering free cofee..</p>
                            <span class="g-font-size-12 g-color-gray">5 days ago</span>
                          </div>
                        </div>
                      </div>
                      <!-- End Alert Warning -->
                    </div>
                  </div>
                </div>
              </div>

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

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

          <!-- Other Alert Examples -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Other alert examples</h3>
              <p>You may use any border colors from the predefined classes or create your own.</p>
            </div>

            <div class="col-md-9">
              <div id="shortcode4">
                <div class="shortcode-html">
                  <div class="row">
                    <div class="col-lg-6">
                      <!-- Alert Shadow -->
                      <div class="alert fade show u-shadow-v1-3 g-pa-20" role="alert">
                        <button type="button" class="close u-alert-close--light g-ml-10 g-mt-1" data-dismiss="alert" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>

                        <div class="media">
                          <div class="d-flex g-mr-15">
                            <img class="g-width-40 g-height-40" src="{{ root }}assets/img-temp/100x100/img5.jpg" alt="Image Description">
                          </div>
                          <div class="media-body">
                            <p class="m-0"><strong>Jasica Coolman</strong> saved your pin.</p>
                            <span class="g-font-size-12">5 minutes ago</span>
                          </div>
                        </div>
                      </div>
                      <!-- End Alert Shadow -->

                      <!-- Alert with Box Shadow -->
                      <div class="alert fade show u-shadow-v1-3 g-pa-20" role="alert">
                        <button type="button" class="close u-alert-close--light g-ml-10 g-mt-1" data-dismiss="alert" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>

                        <div class="media">
                          <div class="d-flex g-mr-10">
                            <span class="u-icon-v3 u-icon-size--sm g-bg-red g-color-white">
                              <i class="fa fa-magic"></i>
                            </span>
                          </div>
                          <div class="media-body">
                            <div class="d-flex justify-content-between">
                              <p class="m-0"><strong>Albert Heller</strong></p>
                              <span class="float-right small g-mx-10">Just Now</span>
                            </div>
                            <p class="m-0 g-font-size-14">Your friend request has been accepted.</p>
                          </div>
                        </div>
                      </div>
                      <!-- End Alert with Box Shadow -->
                    </div>

                    <div class="col-lg-6">
                      <!-- Alert Bordered -->
                      <div class="alert fade show g-brd-around g-brd-gray-light-v4 g-pa-20" role="alert">
                        <button type="button" class="close u-alert-close--light g-ml-10 g-mt-1" data-dismiss="alert" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>

                        <div class="media">
                          <div class="d-flex g-mr-10">
                            <img class="g-width-40 g-height-40" src="{{ root }}assets/img-temp/100x100/img1.jpg" alt="Image Description">
                          </div>
                          <div class="media-body">
                            <div class="d-flex justify-content-between">
                              <p class="m-0"><strong>Albert Watson</strong></p>
                              <span class="align-self-center small text-nowrap">2 min ago</span>
                            </div>
                            <p class="m-0 g-font-size-14">Your friend request has been accepted.</p>
                          </div>
                        </div>
                      </div>
                      <!-- End Alert Bordered -->

                      <!-- Alert Bordered -->
                      <div class="alert fade show g-brd-around g-brd-gray-light-v4 g-pa-20" role="alert">
                        <button type="button" class="close u-alert-close--light g-ml-10 g-mt-1" data-dismiss="alert" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>

                        <div class="media">
                          <div class="d-flex g-mr-10">
                            <img class="g-width-40 g-height-40" src="{{ root }}assets/img-temp/100x100/img1.jpg" alt="Image Description">
                          </div>
                          <div class="media-body">
                            <p class="m-0"><strong>Htmlstream</strong> released a new update.</p>
                            <span class="g-font-size-12 g-color-gray">2 hours ago</span>
                          </div>
                        </div>
                      </div>
                      <!-- End Alert Bordered -->
                    </div>
                  </div>
                </div>
              </div>

              {% set SCExtendedClasses = "text-center" %}
              {% set contentTarget = "#shortcode4" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Other Alert Examples -->
        </div>
      </section>
      <!-- End Unify Alerts -->

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


      <!-- Bootstrap Alerts -->
      <section class="g-py-50 g-pb-100">
        <div class="container">
          <!-- Heading -->
          <header class="g-mb-80">
            <div class="u-heading-v6-2 text-uppercase">
              <h2 class="h4 u-heading-v6__title g-font-weight-300">Bootstrap Alerts</h2>
            </div>
            <div class="g-line-height-2 g-pl-90">
              <p>Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. By default Bootstrap includes 4 state alerts such as "Success", "Info", "Warning" and "Danger". Check out the offecial Bootstrap Alerts page for more details
                <a target="_blank" href="#">here</a>
                .
              </p>
            </div>
          </header>
          <!-- End Heading -->

          <!-- Simple Alerts -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Simple alerts</h3>
              <p></p>
            </div>

            <div class="col-md-9">
              <div id="shortcode5">
                <div class="shortcode-html">
                  <div class="row">
                    <div class="col-md-6">
                      <!-- Success Alert -->
                      <div class="alert alert-success" role="alert">
                        <strong>Well done!</strong> You successfully read this important alert message.
                      </div>
                      <!-- End Success Alert -->

                      <!-- Info Alert -->
                      <div class="alert alert-info" role="alert">
                        <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
                      </div>
                      <!-- End Info Alert -->
                    </div>

                    <div class="col-md-6">
                      <!-- Warning Alert -->
                      <div class="alert alert-warning" role="alert">
                        <strong>Warning!</strong> Better check yourself, you're not looking too good.
                      </div>
                      <!-- End Warning Alert -->

                      <!-- Danger Alert -->
                      <div class="alert alert-danger" role="alert">
                        <strong>Oh snap!</strong> Change a few things up and try submitting again.
                      </div>
                      <!-- End Danger Alert -->
                    </div>
                  </div>
                </div>
              </div>

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

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

          <!-- Dismissable Alerts -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Dismissable alerts</h3>
              <p>Check out for more details the offecial "bootstrap dismissing alerts" page
                <a target="_blank" href="#">here</a>
                .
              </p>
            </div>

            <div class="col-md-9">
              <div id="shortcode6">
                <div class="shortcode-html">
                  <div class="row">
                    <div class="col-md-6">
                      <!-- Success Alert -->
                      <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                        <strong>Well done!</strong> You successfully read this important alert message.
                      </div>
                      <!-- End Success Alert -->

                      <!-- Info Alert -->
                      <div class="alert alert-info alert-dismissible fade show" role="alert">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                        <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
                      </div>
                      <!-- End Info Alert -->
                    </div>

                    <div class="col-md-6">
                      <!-- Warning Alert -->
                      <div class="alert alert-warning alert-dismissible fade show" role="alert">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                        <strong>Warning!</strong> Better check yourself, you're not looking too good.
                      </div>
                      <!-- End Warning Alert -->

                      <!-- Danger Alert -->
                      <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                        <strong>Oh snap!</strong> Change a few things up and try submitting again.
                      </div>
                      <!-- End Danger Alert -->
                    </div>
                  </div>
                </div>
              </div>

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

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

          <!-- Links in Alerts -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Links in alerts</h3>
              <p>Use the
                <code>alert-link</code> utility class to quickly provide matching colored links within any alert.
              </p>
            </div>

            <div class="col-md-9">
              <div id="shortcode7">
                <div class="shortcode-html">
                  <div class="row">
                    <div class="col-md-6">
                      <!-- Success Alert -->
                      <div class="alert alert-success" role="alert">
                        <strong>Well done!</strong> You successfully read
                        <a href="#" class="alert-link">this important alert message</a>
                        .
                      </div>
                      <!-- Success Alert -->

                      <!-- Info Alert -->
                      <div class="alert alert-info" role="alert">
                        <strong>Heads up!</strong> This
                        <a href="#" class="alert-link">alert needs your attention</a>
                        , but it's not super important.
                      </div>
                      <!-- End Info Alert -->
                    </div>
                    <div class="col-md-6">
                      <!-- Warning Alert -->
                      <div class="alert alert-warning" role="alert">
                        <strong>Warning!</strong> Better check yourself, you're
                        <a href="#" class="alert-link">not looking too good</a>
                        .
                      </div>
                      <!-- End Warning Alert -->

                      <!-- Danger Alert -->
                      <div class="alert alert-danger" role="alert">
                        <strong>Oh snap!</strong>
                        <a href="#" class="alert-link">Change a few things up</a>
                        and try submitting again.
                      </div>
                      <!-- End Danger Alert -->
                    </div>
                  </div>
                </div>
              </div>

              {% set SCExtendedClasses = "text-center" %}
              {% set contentTarget = "#shortcode7" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Links in Alerts -->

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

          <!-- Alerts with Icons -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Alerts with Icons</h3>
              <p>Font Awesome icons are used as an example.</p>
            </div>

            <div class="col-md-9">
              <div id="shortcode8">
                <div class="shortcode-html">
                  <div class="row">
                    <div class="col-md-6">
                      <!-- Success Alert -->
                      <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                        <div class="media">
                          <span class="d-flex mr-2 g-mt-5">
                            <i class="fa fa-check-circle-o"></i>
                          </span>
                          <div class="media-body">
                            <strong>Well done!</strong> You successfully read this important alert message.
                          </div>
                        </div>
                      </div>
                      <!-- End Success Alert -->

                      <!-- Info Alert -->
                      <div class="alert alert-info alert-dismissible fade show" role="alert">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                        <div class="media">
                          <span class="d-flex mr-2 g-mt-5">
                            <i class="fa fa-info-circle"></i>
                          </span>
                          <div class="media-body">
                            <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
                          </div>
                        </div>
                      </div>
                      <!-- End Info Alert -->
                    </div>

                    <div class="col-md-6">
                      <!-- Warning Alert -->
                      <div class="alert alert-warning alert-dismissible fade show" role="alert">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                        <div class="media">
                          <span class="d-flex mr-2 g-mt-5">
                            <i class="fa fa-exclamation-triangle"></i>
                          </span>
                          <div class="media-body">
                            <strong>Warning!</strong> Better check yourself, you're not looking too good.
                          </div>
                        </div>
                      </div>
                      <!-- End Warning Alert -->

                      <!-- Danger Alert -->
                      <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                        <div class="media">
                          <span class="d-flex mr-2 g-mt-5">
                            <i class="fa fa-minus-circle"></i>
                          </span>
                          <div class="media-body">
                            <strong>Oh snap!</strong> Change a few things up and try submitting again.
                          </div>
                        </div>
                      </div>
                      <!-- Danger Alert -->
                    </div>
                  </div>
                </div>
              </div>

              {% set SCExtendedClasses = "text-center" %}
              {% set contentTarget = "#shortcode8" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Alerts with Icons -->

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

          <!-- Alerts with Large Titles -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Large titles</h3>
              <p>You may use any heading tags and classes for the titles e.g.
                <code class="text-nowrap">&lt;h4 class="h5"&gt;</code></p>
            </div>

            <div class="col-md-9">
              <div id="shortcode9">
                <div class="shortcode-html">
                  <div class="row">
                    <div class="col-md-6">
                      <!-- Success Alert -->
                      <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="h5">
                          <i class="fa fa-check-circle-o"></i>
                          Well done!
                        </h4>
                        You successfully read this important alert message.
                      </div>
                      <!-- End Success Alert -->

                      <!-- Info Alert -->
                      <div class="alert alert-info alert-dismissible fade show" role="alert">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="h5">
                          <i class="fa fa-info-circle"></i>
                          Heads up!
                        </h4>
                        This alert needs your attention, but it's not super important.
                      </div>
                      <!-- End Info Alert -->
                    </div>

                    <div class="col-md-6">
                      <!-- Warning Alert -->
                      <div class="alert alert-warning alert-dismissible fade show" role="alert">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="h5">
                          <i class="fa fa-exclamation-triangle"></i>
                          Warning!
                        </h4>
                        Better check yourself, you're not looking too good.
                      </div>
                      <!-- End Warning Alert -->

                      <!-- Danger Alert -->
                      <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="h5">
                          <i class="fa fa-minus-circle"></i>
                          Oh snap!
                        </h4>
                        Change a few things up and try submitting again.
                      </div>
                      <!-- Danger Alert -->
                    </div>
                  </div>
                </div>
              </div>

              {% set SCExtendedClasses = "text-center" %}
              {% set contentTarget = "#shortcode9" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Alerts with Large Titles -->

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

          <!-- Alerts with Buttons -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Alerts with buttons</h3>
              <p>Font Awesome icons are used as an example.</p>
            </div>

            <div class="col-md-9">
              <div id="shortcode10">
                <div class="shortcode-html">
                  <div class="row">
                    <div class="col-md-6">
                      <!-- Success Alert -->
                      <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="h5">
                          <i class="fa fa-check-circle-o"></i>
                          Well done!
                        </h4>
                        <p class="g-mb-10">You successfully read this important alert message. Donec id elit non mi porta gravida at eget metus.</p>
                        <a href="#" class="btn u-btn-darkgray btn-xs rounded-0">
                          <i class="fa fa-cog g-mr-2"></i>
                          Do this action
                        </a>
                        <a href="#" class="btn u-btn-outline-darkgray btn-xs rounded-0">
                          <i class="fa fa-flask g-mr-2"></i>
                          Or do this
                        </a>
                      </div>
                      <!-- End Success Alert -->

                      <!-- Info Alert -->
                      <div class="alert alert-info alert-dismissible fade show" role="alert">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="h5">
                          <i class="fa fa-info-circle"></i>
                          Heads up!
                        </h4>
                        <p class="g-mb-10">This alert needs your attention, but it's not super important. Donec id elit non mi porta gravida at eget metus.</p>
                        <a href="#" class="btn u-btn-brown btn-xs rounded-0">
                          <i class="fa fa-align-left g-mr-2"></i>
                          Do this action
                        </a>
                        <a href="#" class="btn u-btn-blue btn-xs rounded-0">
                          <i class="fa fa-link g-mr-2"></i>
                          Or do this
                        </a>
                      </div>
                      <!-- End Info Alert -->
                    </div>

                    <div class="col-md-6">
                      <!-- Warning Alert -->
                      <div class="alert alert-warning alert-dismissible fade show" role="alert">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="h5">
                          <i class="fa fa-exclamation-triangle"></i>
                          Warning!
                        </h4>
                        <p class="g-mb-10">Better check yourself, you're not looking too good. Gravida donec id elit non mi porta gravida at eget metus.</p>
                        <a href="#" class="btn u-btn-teal btn-xs rounded-0">
                          <i class="fa fa-chain-broken g-mr-2"></i>
                          Do this action
                        </a>
                        <a href="#" class="btn u-btn-lightred btn-xs rounded-0">
                          <i class="fa fa-times-circle g-mr-2"></i>
                          Or do this
                        </a>
                      </div>
                      <!-- End Warning Alert -->

                      <!-- Danger Alert -->
                      <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="h5">
                          <i class="fa fa-minus-circle"></i>
                          Oh snap!
                        </h4>
                        <p class="g-mb-10">Change a few things up and try submitting again. Donec id elit non mi porta gravida at eget metus.</p>
                        <a href="#" class="btn u-btn-outline-bluegray btn-xs g-brd-2 rounded-0">
                          <i class="fa fa-check-circle g-mr-2"></i>
                          Do this action
                        </a>
                        <a href="#" class="btn u-btn-outline-lightred btn-xs g-brd-2 rounded-0">
                          <i class="fa fa-minus-circle g-mr-2"></i>
                          Or do this
                        </a>
                      </div>
                      <!-- Danger Alert -->
                    </div>
                  </div>
                </div>
              </div>

              {% set SCExtendedClasses = "text-center" %}
              {% set contentTarget = "#shortcode10" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Alerts with Buttons -->

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

          <!-- Alert with Lists -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Alerts with buttons</h3>
              <p>Font Awesome icons are used as an example.</p>
            </div>

            <div class="col-md-9">
              <div id="shortcode11">
                <div class="shortcode-html">
                  <div class="row">
                    <div class="col-md-6">
                      <!-- Success Alert -->
                      <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="h5">
                          <i class="fa fa-check-circle-o"></i>
                          Well done!
                        </h4>
                        <p>You successfully read this important alert message. Donec id elit non mi porta gravida at eget metus.</p>
                        <ul class="fa-ul alert__icon g-mt-10">
                          <li>
                            <i class="fa-li alert__icon-list fa fa-check"></i>
                            Username
                          </li>
                          <li>
                            <i class="fa-li alert__icon-list fa fa-check"></i>
                            Email Adderss
                          </li>
                          <li>
                            <i class="fa-li alert__icon-list fa fa-check"></i>
                            Password
                          </li>
                        </ul>
                      </div>
                      <!-- End Success Alert -->

                      <!-- Info Alert -->
                      <div class="alert alert-info alert-dismissible fade show" role="alert">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="h5">
                          <i class="fa fa-info-circle"></i>
                          Heads up!
                        </h4>
                        <p>This alert needs your attention, but it's not super important. Donec id elit non mi porta gravida at eget metus.</p>
                        <ul class="u-alert-list g-mt-10">
                          <li>Username</li>
                          <li>Email Adderss</li>
                          <li>Password</li>
                        </ul>
                      </div>
                      <!-- End Info Alert -->
                    </div>

                    <div class="col-md-6">
                      <!-- Warning Alert -->
                      <div class="alert alert-warning alert-dismissible fade show" role="alert">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="h5">
                          <i class="fa fa-exclamation-triangle"></i>
                          Warning!
                        </h4>
                        <p>Better check yourself, you're not looking too good. Gravida donec id elit non mi porta gravida at eget metus.</p>
                        <ul class="u-alert-list g-mt-10">
                          <li>Username</li>
                          <li>Email Adderss</li>
                          <li>Password</li>
                        </ul>
                      </div>
                      <!-- End Warning Alert -->

                      <!-- Danger Alert -->
                      <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="h5">
                          <i class="fa fa-minus-circle"></i>
                          Oh snap!
                        </h4>
                        <p>Change a few things up and try submitting again. Donec id elit non mi porta gravida at eget metus.</p>
                        <ul class="fa-ul alert__icon g-mt-10">
                          <li>
                            <i class="fa-li alert__icon-list fa fa-check"></i>
                            Username
                          </li>
                          <li>
                            <i class="fa-li alert__icon-list fa-ban fa fa-check"></i>
                            Email Adderss
                          </li>
                          <li>
                            <i class="fa-li alert__icon-list fa-ban fa fa-check"></i>
                            Password
                          </li>
                        </ul>
                      </div>
                      <!-- Danger Alert -->
                    </div>
                  </div>
                </div>
              </div>

              {% set SCExtendedClasses = "text-center" %}
              {% set contentTarget = "#shortcode11" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Alert with Lists -->
        </div>
      </section>
      <!-- End Bootstrap Alerts -->
    </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>
