{# Settings #}
{% set root = "../../" %}
{% set mainNavActive_1 = "shortcodes" %}
{% set sidebarNavActive_1 = "shortcode-blocks-pricing-sections" %}
{% set title = "Pricing Sections" %}

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

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

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

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

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

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

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

            <div id="shortcode1">
              <div class="shortcode-html">
                <div class="row align-items-lg-center">
                  <div class="col-md-7">
                    <!-- Row -->
                    <div class="row">
                      <div class="col-lg-6 g-pr-30--lg g-mb-40">
                        <span class="d-block g-font-size-35 g-font-weight-300 g-color-primary g-mb-10">01.</span>
                        <h4 class="h5 text-uppercase g-letter-spacing-1 g-mb-10">Fusce accumsan faucibus</h4>
                        <p class="mb-0">Curabitur sit amet fringilla mi. Etiam ac massa sit amet nulla eleifend rutrum vitae non sem.</p>
                      </div>

                      <div class="col-lg-6 g-pr-30--lg g-mb-40">
                        <span class="d-block g-font-size-35 g-font-weight-300 g-color-primary g-mb-10">02.</span>
                        <h4 class="h5 text-uppercase g-letter-spacing-1 g-mb-10">Maecenas auctor mauris</h4>
                        <p class="mb-0">Aenean volutpat erat quis mollis accumsan. Mauris at cursus ipsum. Praesent molestie imperdiet.</p>
                      </div>
                    </div>
                    <!-- End Row -->

                    <!-- Row -->
                    <div class="row">
                      <div class="col-lg-6 g-pr-30--lg g-mb-40 g-mb-0--lg">
                        <span class="d-block g-font-size-35 g-font-weight-300 g-color-primary g-mb-10">03.</span>
                        <h4 class="h5 text-uppercase g-letter-spacing-1 g-mb-10">Vestibulum fringilla risus ege</h4>
                        <p class="mb-0">Curabitur sit amet fringilla mi. Etiam ac massa sit amet nulla eleifend rutrum vitae non sem.</p>
                      </div>

                      <div class="col-lg-6 g-pr-30--lg g-mb-40 g-mb-0--lg">
                        <span class="d-block g-font-size-35 g-font-weight-300 g-color-primary g-mb-10">04.</span>
                        <h4 class="h5 text-uppercase g-letter-spacing-1 g-mb-10">Enim egestas risus semper</h4>
                        <p class="mb-0">Aenean volutpat erat quis mollis accumsan. Mauris at cursus ipsum. Praesent molestie imperdiet.</p>
                      </div>
                    </div>
                    <!-- End Row -->
                  </div>

                  <div class="col-lg-4 ml-md-auto col-md-5">
                    <!-- Article -->
                    <article class="text-center g-rounded-5 g-brd-around g-brd-gray-light-v5 g-overflow-hidden">
                      <!-- Article Header -->
                      <header class="g-bg-gray-light-v5 g-color-black g-pa-40">
                        <!-- Article Title -->
                        <h3 class="g-font-weight-300 g-mb-5">Professional</h3>
                        <!-- End Article Title -->

                        <div class="g-font-size-36 g-font-weight-600 g-line-height-1_2">
                          $19.99
                          <em class="d-block g-font-style-normal g-font-size-default g-font-weight-300 g-mt-15">per month</em>
                        </div>
                      </header>
                      <!-- End Article Header -->

                      <!-- Article Content -->
                      <div class="g-color-gray-dark-v4 g-px-35 g-pt-40 g-pb-20">
                        <ul class="list-unstyled mb-0">
                          <li class="g-mb-20">Etiam mollis iaculis</li>
                          <li class="g-mb-20">Fusce fringilla ipsum</li>
                          <li class="g-mb-20">Sed eget justo est</li>
                          <li class="g-mb-20">Sed pellentesque velit ante</li>
                          <li class="g-mb-20">Fusce fringilla ipsum nec</li>
                          <li class="g-mb-20">Nullam vel turpis</li>
                        </ul>
                      </div>

                      <a class="btn w-100 u-btn-primary rounded-0 g-font-weight-600 g-pa-15-30" href="#">Order Now</a>
                      <!-- End Article Content -->
                    </article>
                    <!-- End Article -->
                  </div>
                </div>
              </div>
            </div>

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

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

          <!-- Pricing Section #02 -->
          <section>
            <div class="text-center g-mb-50">
              <h2 class="h4">Pricing Section
                <span class="g-color-primary g-ml-5">#02</span>
              </h2>
            </div>

            <div id="shortcode2">
              <div class="shortcode-html">
                <div class="row align-items-lg-center">
                  <div class="col-lg-8 col-md-7">
                    <!-- Row -->
                    <div class="row g-mr-20--md g-mb-30--lg">
                      <div class="col-lg-6 g-mb-40">
                        <i class="d-block icon-transport-026 g-font-size-55 g-line-height-1 g-color-primary g-mb-15"></i>
                        <h4 class="h5 text-uppercase g-letter-spacing-1 g-mb-10">Fusce accumsan faucibus</h4>
                        <p class="mb-0">Curabitur sit amet fringilla mi. Etiam ac massa sit amet nulla eleifend rutrum vitae non sem.</p>
                      </div>

                      <div class="col-lg-6 g-mb-40">
                        <i class="d-block icon-hotel-restaurant-249 g-font-size-55 g-line-height-1 g-color-primary g-mb-15"></i>
                        <h4 class="h5 text-uppercase g-letter-spacing-1 g-mb-10">Maecenas auctor mauris</h4>
                        <p class="mb-0">Aenean volutpat erat quis mollis accumsan. Mauris at cursus ipsum. Praesent molestie imperdiet.</p>
                      </div>
                    </div>
                    <!-- End Row -->

                    <!-- Row -->
                    <div class="row g-mr-20--md">
                      <div class="col-lg-6 g-mb-40 g-mb-0--lg">
                        <i class="d-block icon-hotel-restaurant-211 g-font-size-55 g-line-height-1 g-color-primary g-mb-15"></i>
                        <h4 class="h5 text-uppercase g-letter-spacing-1 g-mb-10">Vestibulum fringilla risus ege</h4>
                        <p class="mb-0">Curabitur sit amet fringilla mi. Etiam ac massa sit amet nulla eleifend rutrum vitae non sem.</p>
                      </div>

                      <div class="col-lg-6 g-mb-40 g-mb-0--lg">
                        <i class="d-block icon-hotel-restaurant-234 g-font-size-55 g-line-height-1 g-color-primary g-mb-15"></i>
                        <h4 class="h5 text-uppercase g-letter-spacing-1 g-mb-10">Enim egestas risus semper</h4>
                        <p class="mb-0">Aenean volutpat erat quis mollis accumsan. Mauris at cursus ipsum. Praesent molestie imperdiet.</p>
                      </div>
                    </div>
                    <!-- End Row -->
                  </div>

                  <div class="col-lg-4 col-md-5">
                    <!-- Article -->
                    <article class="text-center g-bg-gray-light-v5 g-rounded-15 g-overflow-hidden">
                      <!-- Article Header -->
                      <header class="g-bg-primary g-pos-rel g-px-20 g-py-50">
                        <svg class="g-pos-abs g-bottom-0 g-left-0 g-right-0" version="1.1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="70px" viewBox="0 0 300 70">
                          <path d="M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729 c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z" opacity="0.6" fill="#f7f7f7"/>
                          <path d="M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729 c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z" opacity="0.6" fill="#f7f7f7"/>
                          <path d="M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716 H42.401L43.415,98.342z" opacity="0.7" fill="#f7f7f7"/>
                          <path d="M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428 c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z" fill="#f7f7f7"/>
                        </svg>
                        <strong class="d-block g-color-white g-font-size-50 g-line-height-0_7 g-mb-20">
                          <span class="g-valign-top g-font-size-default">$</span>
                          49
                          <span class="g-font-size-default">/ month</span>
                        </strong>
                        <h3 class="h6 text-uppercase g-color-white-opacity-0_7 g-letter-spacing-3 g-mb-20">Professional</h3>
                      </header>
                      <!-- End Article Header -->

                      <!-- Article Content -->
                      <div class="g-px-20 g-pt-20 g-pb-40">
                        <ul class="list-unstyled g-mb-40">
                          <li class="g-mb-20">200GB of space</li>
                          <li class="g-mb-20">Unlimited traffic</li>
                          <li class="g-mb-20">Online Support</li>
                          <li class="g-mb-20">24 hour Support</li>
                        </ul>
                        <a class="btn text-uppercase u-btn-primary g-rounded-50 g-font-size-12 g-font-weight-700 g-pa-15-30 g-mb-10" href="#">Order Now</a>
                      </div>
                      <!-- End Article Content -->
                    </article>
                    <!-- End Article -->
                  </div>
                </div>
              </div>
            </div>

            {% set contentTarget = "#shortcode2" %}
            {% set modalID = "#modalMarkup" %}
            {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
          </section>
          <!-- End Pricing Section #02 -->

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

          <!-- Pricing Section #03 -->
          <section>
            <div class="text-center g-mb-50">
              <h2 class="h4">Pricing Section
                <span class="g-color-primary g-ml-5">#03</span>
              </h2>
            </div>

            <div id="shortcode3">
              <div class="shortcode-html">
                <div class="row align-items-center">
                  <div class="col-lg-5 text-center g-mb-40 g-mb-0--lg g-pr-60--lg">
                    <img class="rounded-circle mx-auto g-mb-30" src="{{ root }}assets/img-temp/100x100/img6.jpg" alt="Image Description">
                    <blockquote class="u-blockquote-v3 g-font-size-16 g-mb-20">Everyone knows that debugging is twice as hard as writing a program in the first place. So if you're as clever as you can be when you write it, how will you ever debug it.</blockquote>
                    Jimmy Howell, <em class="g-font-style-normal g-color-primary">Jootle</em>
                  </div>

                  <div class="col-lg-7">
                    <div class="row no-gutters align-items-center justify-content-center">
                      <div class="col-md-6 g-mb-30 g-z-index-2">
                        <!-- Article -->
                        <article class="text-center g-brd-around g-color-gray g-brd-gray-light-v5 g-pa-10">
                          <div class="g-bg-gray-light-v5 g-px-15 g-py-50">
                            <!-- Article Title -->
                            <h4 class="text-uppercase g-color-gray-dark-v3 g-font-weight-500 g-mb-10">Professional</h4>
                            <!-- End Article Title -->
                            <em class="g-font-style-normal">Ed feugiat porttitor nunc, non</em>

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

                            <div class="g-color-primary g-my-30">
                              <strong class="d-block g-font-size-30 g-line-height-1_2">$75.00</strong> per month
                            </div>

                            <hr class="g-brd-gray-light-v4 g-mt-20 g-mb-10">

                            <ul class="list-unstyled g-mb-25">
                              <li class="g-brd-bottom g-brd-gray-light-v4 g-py-12">Vivamus a fringilla lorem, vel faucibus ante. Nunc ullamcorper justo..</li>
                              <li class="g-brd-bottom g-brd-gray-light-v4 g-py-12">
                                <b>99.9%</b> In hac habitasse platea
                              </li>
                              <li class="g-brd-bottom g-brd-gray-light-v4 g-py-12">
                                <b>140gb</b> Praesent egestas ac arcu
                              </li>
                            </ul>
                            <a class="btn btn-md rounded-0 u-btn-primary" href="#">Order Now</a>
                          </div>
                        </article>
                        <!-- End Article -->
                      </div>

                      <div class="col-md-6 g-mb-30">
                        <!-- Article -->
                        <article class="text-center g-brd-around g-color-gray g-brd-gray-light-v5 g-pa-10">
                          <div class="g-bg-gray-light-v5 g-pa-30">
                            <!-- Article Title -->
                            <h4 class="text-uppercase g-color-gray-dark-v3 g-font-weight-500 g-mb-10">Starter</h4>
                            <!-- End Article Title -->
                            <em class="g-font-style-normal">Ed feugiat porttitor nunc, non</em>

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

                            <div class="g-color-primary g-my-20">
                              <strong class="d-block g-font-size-30 g-line-height-1_2">$24.00</strong> per month
                            </div>

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

                            <ul class="list-unstyled g-mb-25">
                              <li class="g-brd-bottom g-brd-gray-light-v4 g-py-12">Vivamus a fringilla lorem, vel faucibus ante. Nunc ullamcorper justo..</li>
                              <li class="g-brd-bottom g-brd-gray-light-v4 g-py-12">
                                <b>10%</b> In hac habitasse platea
                              </li>
                              <li class="g-brd-bottom g-brd-gray-light-v4 g-py-12">
                                <b>10gb</b> Praesent egestas ac arcu
                              </li>
                            </ul>
                            <a class="btn btn-md rounded-0 u-btn-primary" href="#">Order Now</a>
                          </div>
                        </article>
                        <!-- End Article -->
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            {% set contentTarget = "#shortcode3" %}
            {% set modalID = "#modalMarkup" %}
            {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
          </section>
          <!-- End Pricing Section #03 -->

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

          <!-- Pricing Section #04 -->
          <section>
            <div class="text-center g-mb-50">
              <h2 class="h4">Pricing Section
                <span class="g-color-primary g-ml-5">#04</span>
              </h2>
            </div>

            <div id="shortcode4">
              <div class="shortcode-html">
                <div class="row align-items-center">
                  <div class="col-lg-8 order-lg-2 g-pl-40--lg g-mb-30 g-mb-0--lg">
                    <h2 class="g-font-weight-300 g-mb-20">Maecenas auctor mauris</h2>
                    <p>Aenean volutpat erat quis mollis accumsan. Mauris at cursus ipsum. Praesent molestie imperdiet. Curabitur sit amet fringilla mi. Etiam ac massa sit amet nulla eleifend rutrum vitae non sem.</p>
                    <p>Nulla ipsum dolor sit amet, consectetur adipiscing elitut eleifend nisl. In hac habitasse platea dictumst.</p>

                    <div class="embed-responsive embed-responsive-16by9 g-mt-30">
                      <iframe width="100%" src="//www.youtube.com/embed/fkQBVoS9lAo" frameborder="0" allowfullscreen></iframe>
                    </div>
                  </div>

                  <div class="col-lg-4 order-lg-1">
                    <!-- Article -->
                    <article class="text-center u-zigzag-top g-color-black">
                      <!-- Article Header -->
                      <header class="g-brd-bottom g-brd-3 g-brd-black g-px-30 g-py-20">
                        <h3 class="h4 text-uppercase g-font-weight-700 g-mb-5">Professional</h3>
                      </header>
                      <!-- End Article Header -->

                      <!-- Article After Header -->
                      <div class="g-brd-bottom--dotted g-brd-gray-dark-v5 g-px-30 g-py-50">
                        Donec dapibus, neque consectetur, tellus
                      </div>
                      <!-- End Article After Header -->

                      <!-- Article Content -->
                      <div class="g-brd-bottom--dotted g-brd-gray-dark-v5 g-pa-30">
                        <ul class="list-unstyled mb-0">
                          <li class="g-color-gray-dark-v5 g-mb-20">
                            <strong class="d-block g-font-size-20 g-text-strike">$179</strong> before March 6
                          </li>
                          <li class="g-mb-20">
                            <strong class="d-block g-font-size-35">$259</strong> before April 1
                          </li>
                          <li class="g-color-gray-dark-v5">
                            <strong class="d-block g-font-size-20">$529</strong> before April 22
                          </li>
                        </ul>
                      </div>
                      <!-- End Article Content -->

                      <!-- CTA -->
                      <div class="g-pa-30">
                        <a class="btn text-uppercase w-100 u-btn-outline-primary g-brd-2 g-rounded-50 g-font-weight-700 g-pa-15-30" href="#">Buy</a>
                      </div>
                      <!-- End CTA -->
                    </article>
                    <!-- End Article -->
                  </div>
                </div>
              </div>
            </div>

            {% set contentTarget = "#shortcode4" %}
            {% set modalID = "#modalMarkup" %}
            {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
          </section>
          <!-- End Pricing Section #04 -->

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

          <!-- Pricing Section #05 -->
          <section>
            <div class="text-center g-mb-50">
              <h2 class="h4">Pricing Section
                <span class="g-color-primary g-ml-5">#05</span>
              </h2>
            </div>

            <div id="shortcode5">
              <div class="shortcode-html">
                <div class="row align-items-center">
                  <div class="col-lg-5 g-pr-60--lg g-mb-30 g-mb-0--lg">
                    <h2 class="g-font-weight-300 g-mb-20">Enim egestas risus semper</h2>
                    <p class="lead">Aenean volutpat erat quis mollis accumsan. Mauris at cursus imperdiet. Etiam ac massa sit amet nulla eleifend rutrum vitae non sem.</p>
                    <p class="lead">Etiam ac massa sit amet nulla eleifend rutrum vitae non sem. Nulla ipsum dolor sit amet, consectetur adipiscing elitut eleifend nisl. In hac habitasse platea dictumst.</p>
                  </div>

                  <div class="col-lg-7">
                    <!-- Article -->
                    <article class="w-100 d-sm-table g-bg-gray-light-v5 g-mb-30">
                      <!-- Article Info -->
                      <div class="d-sm-table-cell text-center text-sm-left g-valign-middle g-brd-right--dashed--sm g-brd-gray-light-v4 g-pa-30">
                        <strong class="g-font-size-36 g-color-primary">$19.99</strong>
                        <em class="d-block g-font-style-normal g-font-weight-300 g-mt-minus-5 g-mb-20">per month</em>
                        <a href="#" class="btn u-btn-outline-primary">Purchase</a>
                      </div>
                      <!-- End Article Info -->

                      <!-- Article Content -->
                      <div class="d-sm-table-cell text-center text-sm-left g-valign-middle g-pa-30">
                        <h4 class="text-uppercase g-color-black g-font-size-default g-font-weight-700">Basic Pass</h4>
                        <p class="mb-0">Sed arcu erat, facilisis at tortor vel, blandit tristique enim. Donec dapibus neque consectetur tellus pretium, eget lacinia velit ullamcorper.</p>
                      </div>
                      <!-- End Article Content -->
                    </article>
                    <!-- End Article -->

                    <!-- Article -->
                    <article class="w-100 d-sm-table g-bg-gray-light-v5">
                      <!-- Article Info -->
                      <div class="d-sm-table-cell text-center text-sm-left g-valign-middle g-brd-right--dashed--sm g-brd-gray-light-v4 g-pa-30">
                        <strong class="g-font-size-36 g-color-primary">$49.99</strong>
                        <em class="d-block g-font-style-normal g-font-weight-300 g-mt-minus-5 g-mb-20">per month</em>
                        <a href="#" class="btn u-btn-outline-primary">Purchase</a>
                      </div>
                      <!-- End Article Info -->

                      <!-- Article Content -->
                      <div class="d-sm-table-cell text-center text-sm-left g-valign-middle g-pa-30">
                        <h4 class="text-uppercase g-color-black g-font-size-default g-font-weight-700">Advanced Pass</h4>
                        <p class="mb-0">Sed arcu erat, facilisis at tortor vel, blandit tristique enim. Donec dapibus neque consectetur tellus pretium, eget lacinia velit ullamcorper.</p>
                      </div>
                      <!-- End Article Content -->
                    </article>
                    <!-- End Article -->
                  </div>
                </div>
              </div>
            </div>

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

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

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

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

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

  <!-- 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 plugin
      $('.js-mega-menu').HSMegaMenu({
        event: 'hover',
        pageContainer: $('.container'),
        breakpoint: 991
      });
    });
  </script>
</body>
</html>
