{# Settings #}
{% set root = "../../" %}
{% set mainNavActive_1 = "pages" %}
{% set mainNavActive_2 = "pages-profiles" %}
{% set mainNavActive_3 = "page-profile-history-1" %}
{% set title = "Unify Profile History | " %}

{% 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" %}
    <link rel="stylesheet" href="{{ root }}assets/vendor/animate.css">
    <link rel="stylesheet" href="{{ root }}assets/vendor/malihu-scrollbar/jquery.mCustomScrollbar.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-unify.njk" %}
    {% include "html/assets/include/nunjucks/partials/css/css-custom.njk" %}
  </head>

  <body>
    <main>
      {% include "html/assets/include/nunjucks/partials/blocks/headers/header-main.njk" %}

      <!-- Breadcrumb -->
      <section class="g-my-30">
        <div class="container">
          <ul class="u-list-inline">
            <li class="list-inline-item g-mr-7">
              <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">Home</a>
              <i class="fa fa-angle-right g-ml-7"></i>
            </li>
            <li class="list-inline-item g-mr-7">
              <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">Pages</a>
              <i class="fa fa-angle-right g-ml-7"></i>
            </li>
            <li class="list-inline-item g-color-primary">
              <span>Profile History</span>
            </li>
          </ul>
        </div>
      </section>
      <!-- End Breadcrumb -->

      <section class="g-mb-100">
        <div class="container">
          <div class="row">
            <!-- Profile Sidebar -->
            <div class="col-lg-3 g-mb-50 g-mb-0--lg">
              <!-- User Image -->
              <div class="u-block-hover g-pos-rel">
                <figure>
                  <img class="img-fluid w-100 u-block-hover__main--zoom-v1" src="{{ root }}assets/img-temp/400x450/img5.jpg" alt="Image Description">
                </figure>

                <!-- Figure Caption -->
                <figcaption class="u-block-hover__additional--fade g-bg-black-opacity-0_5 g-pa-30">
                  <div class="u-block-hover__additional--fade u-block-hover__additional--fade-up g-flex-middle">
                    <!-- Figure Social Icons -->
                    <ul class="list-inline text-center g-flex-middle-item--bottom g-mb-20">
                      <li class="list-inline-item align-middle g-mx-7">
                        <a class="u-icon-v1 u-icon-size--md g-color-white" href="#">
                          <i class="icon-note u-line-icon-pro"></i>
                        </a>
                      </li>
                      <li class="list-inline-item align-middle g-mx-7">
                        <a class="u-icon-v1 u-icon-size--md g-color-white" href="#">
                          <i class="icon-notebook u-line-icon-pro"></i>
                        </a>
                      </li>
                      <li class="list-inline-item align-middle g-mx-7">
                        <a class="u-icon-v1 u-icon-size--md g-color-white" href="#">
                          <i class="icon-settings u-line-icon-pro"></i>
                        </a>
                      </li>
                    </ul>
                    <!-- End Figure Social Icons -->
                  </div>
                </figcaption>
                <!-- End Figure Caption -->

                <!-- User Info -->
                <span class="g-pos-abs g-top-20 g-left-0">
                  <a class="btn btn-sm u-btn-primary rounded-0" href="#">Johne Doe</a>
                  <small class="d-block g-bg-black g-color-white g-pa-5">Project Manager</small>
                </span>
                <!-- End User Info -->
              </div>
              <!-- User Image -->

              <!-- Sidebar Navigation -->
              <div class="list-group list-group-border-0 g-mb-40">
                <!-- Overall -->
                <a href="page-profile-main-1.html" class="list-group-item list-group-item-action justify-content-between">
                  <span><i class="icon-home g-pos-rel g-top-1 g-mr-8"></i> Overall</span>
                  <span class="u-label g-font-size-11 g-bg-gray-dark-v2 g-rounded-20 g-px-10">2</span>
                </a>
                <!-- End Overall -->

                <!-- Profile -->
                <a href="page-profile-profile-1.html" class="list-group-item list-group-item-action justify-content-between">
                  <span><i class="icon-cursor g-pos-rel g-top-1 g-mr-8"></i> Profile</span>
                </a>
                <!-- End Profile -->

                <!-- Users Contacts -->
                <a href="page-profile-users-1.html" class="list-group-item list-group-item-action justify-content-between">
                  <span><i class="icon-notebook g-pos-rel g-top-1 g-mr-8"></i> Users Contacts</span>
                </a>
                <!-- End Users Contacts -->

                <!-- My Projects -->
                <a href="page-profile-projects-1.html" class="list-group-item list-group-item-action justify-content-between">
                  <span><i class="icon-layers g-pos-rel g-top-1 g-mr-8"></i> My Projects</span>
                  <span class="u-label g-font-size-11 g-bg-primary g-rounded-20 g-px-10">9</span>
                </a>
                <!-- End My Projects -->

                <!-- Comments -->
                <a href="page-profile-comments-1.html" class="list-group-item list-group-item-action justify-content-between">
                  <span><i class="icon-bubbles g-pos-rel g-top-1 g-mr-8"></i> Comments</span>
                  <span class="u-label g-font-size-11 g-bg-pink g-rounded-20 g-px-8">24</span>
                </a>
                <!-- End Comments -->

                <!-- Reviews -->
                <a href="page-profile-reviews-1.html" class="list-group-item list-group-item-action justify-content-between">
                  <span><i class="icon-heart g-pos-rel g-top-1 g-mr-8"></i> Reviews</span>
                </a>
                <!-- End Reviews -->

                <!-- History -->
                <a href="page-profile-history-1.html" class="list-group-item justify-content-between active">
                  <span><i class="icon-fire g-pos-rel g-top-1 g-mr-8"></i> History</span>
                </a>
                <!-- End History -->

                <!-- Settings -->
                <a href="page-profile-settings-1.html" class="list-group-item list-group-item-action justify-content-between">
                  <span><i class="icon-settings g-pos-rel g-top-1 g-mr-8"></i> Settings</span>
                  <span class="u-label g-font-size-11 g-bg-cyan g-rounded-20 g-px-8">3</span>
                </a>
                <!-- End Settings -->
              </div>
              <!-- End Sidebar Navigation -->

              <!-- Project Progress -->
              <div class="card border-0 rounded-0 g-mb-50">
                <!-- Panel Header -->
                <div class="card-header d-flex align-items-center justify-content-between g-bg-gray-light-v5 border-0 g-mb-15">
                  <h3 class="h6 mb-0">
                    <i class="icon-layers g-pos-rel g-top-1 g-mr-5"></i> Project Progress
                  </h3>
                  <div class="dropdown g-mb-10 g-mb-0--md">
                    <span class="d-block g-color-primary--hover g-cursor-pointer g-mr-minus-5 g-pa-5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      <i class="icon-options-vertical g-pos-rel g-top-1"></i>
                    </span>
                    <div class="dropdown-menu dropdown-menu-right rounded-0 g-mt-10">
                      <a class="dropdown-item g-px-10" href="#">
                        <i class="icon-layers g-font-size-12 g-color-gray-dark-v5 g-mr-5"></i> Projects
                      </a>
                      <a class="dropdown-item g-px-10" href="#">
                        <i class="icon-wallet g-font-size-12 g-color-gray-dark-v5 g-mr-5"></i> Wallets
                      </a>
                      <a class="dropdown-item g-px-10" href="#">
                        <i class="icon-fire g-font-size-12 g-color-gray-dark-v5 g-mr-5"></i> Reports
                      </a>
                      <a class="dropdown-item g-px-10" href="#">
                        <i class="icon-settings g-font-size-12 g-color-gray-dark-v5 g-mr-5"></i> Users Setting
                      </a>

                      <div class="dropdown-divider"></div>

                      <a class="dropdown-item g-px-10" href="#">
                        <i class="icon-plus g-font-size-12 g-color-gray-dark-v5 g-mr-5"></i> View More
                      </a>
                    </div>
                  </div>
                </div>
                <!-- End Panel Header -->

                <!-- Panel Body -->
                <div class="js-scrollbar card-block u-info-v1-1 g-bg-white-gradient-v1--after g-height-300 g-pa-0">
                  <!-- Web Design -->
                  <div class="g-mb-20">
                    <h6 class="g-mb-10">Web Design <span class="float-right g-ml-10">68%</span></h6>
                    <div class="js-hr-progress-bar progress g-bg-black-opacity-0_1 rounded-0 g-mb-5">
                      <div class="js-hr-progress-bar-indicator progress-bar g-bg-cyan u-progress-bar--xs" role="progressbar" style="width: 68%;" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    <small class="g-font-size-12">11% more than last week</small>
                  </div>
                  <!-- End Web Design -->

                  <!-- Unify Project -->
                  <div class="g-mb-20">
                    <h6 class="g-mb-10">Dribbble Shots <span class="float-right g-ml-10">62%</span></h6>
                    <div class="js-hr-progress-bar progress g-bg-black-opacity-0_1 rounded-0 g-mb-5">
                      <div class="js-hr-progress-bar-indicator progress-bar g-bg-pink u-progress-bar--xs" role="progressbar" style="width: 62%;" aria-valuenow="62" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    <small class="g-font-size-12">20% less than last week</small>
                  </div>
                  <!-- End Unify Project -->

                  <!-- Unify Project -->
                  <div class="g-mb-20">
                    <h6 class="g-mb-10">Unify Project <span class="float-right g-ml-10">93%</span></h6>
                    <div class="js-hr-progress-bar progress g-bg-black-opacity-0_1 rounded-0 g-mb-5">
                      <div class="js-hr-progress-bar-indicator progress-bar g-bg-primary u-progress-bar--xs" role="progressbar" style="width: 93%;" aria-valuenow="93" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    <small class="g-font-size-12">17% more than last week</small>
                  </div>
                  <!-- End Unify Project -->

                  <!-- WordPress Coding -->
                  <div class="g-mb-20">
                    <h6 class="g-mb-10">WordPress Coding <span class="float-right g-ml-10">74%</span></h6>
                    <div class="js-hr-progress-bar progress g-bg-black-opacity-0_1 rounded-0 g-mb-5">
                      <div class="js-hr-progress-bar-indicator progress-bar g-bg-black u-progress-bar--xs" role="progressbar" style="width: 74%;" aria-valuenow="74" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    <small class="g-font-size-12">35% more than last week</small>
                  </div>
                  <!-- End WordPress Coding -->

                  <!-- Pixeel Ltd -->
                  <div class="g-mb-20">
                    <h6 class="g-mb-10">Pixeel Ltd <span class="float-right g-ml-10">86%</span></h6>
                    <div class="js-hr-progress-bar progress g-bg-black-opacity-0_1 rounded-0 g-mb-5">
                      <div class="js-hr-progress-bar-indicator progress-bar g-bg-darkpurple u-progress-bar--xs" role="progressbar" style="width: 86%;" aria-valuenow="86" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    <small class="g-font-size-12">42% more than last week</small>
                  </div>
                  <!-- End Pixeel Ltd -->
                </div>
                <!-- End Panel Body -->
              </div>
              <!-- End Project Progress -->
            </div>
            <!-- End Profile Sidebar -->

            <!-- Profle Content -->
            <div class="col-lg-9">
              <!-- Timeline Box -->
              <ul class="row u-timeline-v2-wrap list-unstyled">
                <li class="col-md-12 g-mb-40">
                  <div class="row">
                    <!-- Timeline Date -->
                    <div class="col-md-3 text-md-right g-pt-20--md g-pr-40--md g-mb-20">
                      <h5 class="h6 g-font-weight-700 mb-0">2012</h5>
                      <h4 class="h4 g-font-weight-300">Founded</h4>
                    </div>
                    <!-- End Timeline Date -->

                    <!-- Timeline Content -->
                    <div class="col-md-9 g-orientation-left g-pl-40--md">
                      <!-- Timeline Dot -->
                      <div class="g-hidden-sm-down u-timeline-v2__icon g-top-35">
                        <i class="d-block g-width-18 g-height-18 g-bg-primary g-brd-around g-brd-4 g-brd-gray-light-v4 rounded-circle"></i>
                      </div>
                      <!-- End Timeline Dot -->

                      <article class="g-pos-rel g-bg-gray-light-v5 g-pa-30">
                        <!-- Timeline Arrow -->
                        <div class="g-hidden-sm-down u-triangle-inclusive-v1--right g-top-30 g-z-index-2">
                          <div class="u-triangle-inclusive-v1--right__back g-brd-gray-light-v5-right"></div>
                        </div>
                        <div class="g-hidden-md-up u-triangle-inclusive-v1--top g-left-20 g-z-index-2">
                          <div class="u-triangle-inclusive-v1--top__back g-brd-gray-light-v5-bottom"></div>
                        </div>
                        <!-- End Timeline Arrow -->

                        <header class="g-brd-bottom g-brd-gray-light-v4 g-pb-10 g-mb-25">
                          <h3 class="g-font-weight-300">Our First Step</h3>
                        </header>

                        <p class="lead g-mb-25">Winter purslane courgette pumpkin quandong komatsuna fennel green bean cucumber watercress cress avocado grape.</p>
                        <img class="g-height-120 g-width-120 g-mb-25 g-mr-20" src="{{ root }}assets/img-temp/100x100/img11.jpg" alt="Image description">
                        <img class="g-height-120 g-width-120 g-mb-25 g-mr-20" src="{{ root }}assets/img-temp/100x100/img12.jpg" alt="Image description">
                        <img class="g-height-120 g-width-120 g-mb-25" src="{{ root }}assets/img-temp/100x100/img13.jpg" alt="Image description">
                        <p class="lead mb-0">Pea cress potato sprouts wattle seed rutabaga okra yarrow green bean cucumber watercress cress avocado grape. Cabbage lentil cucumber chickpea sorrel gram garbanzo plantain lotus root bok choy squash cress potato.</p>
                      </article>
                    </div>
                    <!-- End Timeline Content -->
                  </div>
                </li>

                <li class="col-md-12 g-mb-40">
                  <div class="row">
                    <!-- Timeline Date -->
                    <div class="col-md-3 text-md-right g-pt-20--md g-pr-40--md g-mb-20">
                      <h5 class="h6 g-font-weight-700 mb-0">2015</h5>
                      <h4 class="h4 g-font-weight-300">Achievements</h4>
                    </div>
                    <!-- End Timeline Date -->

                    <!-- Timeline Content -->
                    <div class="col-md-9 g-orientation-left g-pl-40--md">
                      <!-- Timeline Dot -->
                      <div class="g-hidden-sm-down u-timeline-v2__icon g-top-35">
                        <i class="d-block g-width-18 g-height-18 g-bg-primary g-brd-around g-brd-4 g-brd-gray-light-v4 rounded-circle"></i>
                      </div>
                      <!-- End Timeline Dot -->

                      <article class="g-pos-rel g-bg-gray-light-v5 g-pa-30">
                        <!-- Timeline Arrow -->
                        <div class="g-hidden-sm-down u-triangle-inclusive-v1--right g-top-30 g-z-index-2">
                          <div class="u-triangle-inclusive-v1--right__back g-brd-gray-light-v5-right"></div>
                        </div>
                        <div class="g-hidden-md-up u-triangle-inclusive-v1--top g-left-20 g-z-index-2">
                          <div class="u-triangle-inclusive-v1--top__back g-brd-gray-light-v5-bottom"></div>
                        </div>
                        <!-- End Timeline Arrow -->

                        <header class="g-brd-bottom g-brd-gray-light-v3 g-pb-10 g-mb-25">
                          <h3 class="g-font-weight-300">Our Achievements</h3>
                        </header>

                        <p class="lead g-mb-25">Sprouts wattle seed pumpkin quandong komatsuna fennel green bean cucumber watercress. Pea cress potato sprouts wattle seed rutabaga okra yarrow cress avocado grape.</p>
                        <div class="row g-mb-15">
                          <div class="col-md-5 g-mb-25 g-mb-0--md">
                            <img class="img-fluid w-100" src="{{ root }}assets/img-temp/400x270/img9.jpg" alt="Image description">
                          </div>
                          <div class="col-md-7">
                            <ul class="list-unstyled g-color-gray-dark-v4 g-mb-0">
                              <li class="d-flex g-mb-10">
                                <i class="icon-check g-color-primary g-mt-5 g-mr-10"></i> Based on Botostrap 4
                              </li>
                              <li class="d-flex g-mb-10">
                                <i class="icon-check g-color-primary g-mt-5 g-mr-10"></i> Responsive Bootstrap Template
                              </li>
                              <li class="d-flex g-mb-10">
                                <i class="icon-check g-color-primary g-mt-5 g-mr-10"></i> Semantic HTML5/CSS3 Codes
                              </li>
                              <li class="d-flex g-mb-10">
                                <i class="icon-check g-color-primary g-mt-5 g-mr-10"></i> Great SASS Architecture
                              </li>
                            </ul>
                          </div>
                        </div>
                        <p class="lead mb-0">Cabbage lentil cucumber chickpea sorrel gram garbanzo plantain lotus root bok choy squash cress potato.</p>
                      </article>
                    </div>
                    <!-- End Timeline Content -->
                  </div>
                </li>

                <li class="col-md-12">
                  <div class="row">
                    <!-- Timeline Date -->
                    <div class="col-md-3 text-md-right g-pt-20--md g-pr-40--md g-mb-20">
                      <h5 class="h6 g-font-weight-700 mb-0">2017</h5>
                      <h4 class="h4 g-font-weight-300">Our Products</h4>
                    </div>
                    <!-- End Timeline Date -->

                    <!-- Timeline Content -->
                    <div class="col-md-9 g-orientation-left g-pl-40--md">
                      <!-- Timeline Dot -->
                      <div class="g-hidden-sm-down u-timeline-v2__icon g-top-35">
                        <i class="d-block g-width-18 g-height-18 g-bg-primary g-brd-around g-brd-4 g-brd-gray-light-v4 rounded-circle"></i>
                      </div>
                      <!-- End Timeline Dot -->

                      <article class="g-pos-rel g-bg-gray-light-v5 g-pa-30">
                        <!-- Timeline Arrow -->
                        <div class="g-hidden-sm-down u-triangle-inclusive-v1--right g-top-30 g-z-index-2">
                          <div class="u-triangle-inclusive-v1--right__back g-brd-gray-light-v5-right"></div>
                        </div>
                        <div class="g-hidden-md-up u-triangle-inclusive-v1--top g-left-20 g-z-index-2">
                          <div class="u-triangle-inclusive-v1--top__back g-brd-gray-light-v5-bottom"></div>
                        </div>
                        <!-- End Timeline Arrow -->

                        <header class="g-brd-bottom g-brd-gray-light-v3 g-pb-10 g-mb-25">
                          <h3 class="g-font-weight-300">Premium &amp; Freebie Products</h3>
                        </header>

                        <p class="lead g-mb-20">Sprouts wattle seed pumpkin quandong komatsuna fennel green bean cucumber watercress. Pea cress potato sprouts wattle seed rutabaga okra yarrow cress avocado grape.</p>

                        <div class="row">
                          <div class="col-sm-6 g-mb-20">
                            <div class="d-flex">
                              <span class="u-icon-v3 g-bg-teal g-color-white g-mt-2 g-mr-15">
                                <i class="icon-directions"></i>
                              </span>

                              <div class="g-line-height-1">
                                <h4 class="h5 g-font-weight-300">Overal Visits</h4>
                                <div class="js-counter g-color-gray-dark-v4 g-font-size-18" data-comma-separated="true">52147</div>
                              </div>
                            </div>
                          </div>

                          <div class="col-sm-6 g-mb-20">
                            <div class="d-flex">
                              <span class="u-icon-v3 g-bg-pink g-color-white g-mt-2 g-mr-15">
                                <i class="icon-layers"></i>
                              </span>

                              <div class="g-line-height-1">
                                <h4 class="h5 g-font-weight-300">Layouts</h4>
                                <div class="js-counter g-color-gray-dark-v4 g-font-size-18" data-comma-separated="true">324056</div>
                              </div>
                            </div>
                          </div>
                        </div>

                        <div class="row">
                          <div class="col-sm-6 g-mb-20 g-mb-0--sm">
                            <div class="d-flex">
                              <span class="u-icon-v3 g-bg-aqua g-color-white g-mt-2 g-mr-15">
                                <i class="icon-trophy"></i>
                              </span>

                              <div class="g-line-height-1">
                                <h4 class="h5 g-font-weight-300">New Features</h4>
                                <div class="js-counter g-color-gray-dark-v4 g-font-size-18" data-comma-separated="true">15147</div>
                              </div>
                            </div>
                          </div>

                          <div class="col-sm-6">
                            <div class="d-flex">
                              <span class="u-icon-v3 g-bg-purple g-color-white g-mt-2 g-mr-15">
                                <i class="icon-badge"></i>
                              </span>

                              <div class="g-line-height-1">
                                <h4 class="h5 g-font-weight-300">Messages</h4>
                                <div class="js-counter g-color-gray-dark-v4 g-font-size-18" data-comma-separated="true">37283</div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </article>
                    </div>
                    <!-- End Timeline Content -->
                  </div>
                </li>
              </ul>
              <!-- End Timeline Box -->
            </div>
            <!-- End Profle Content -->
          </div>
        </div>
      </section>

      {% 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/helpers/outer-spaces-helper.njk" %}

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

    <!-- JS Implementing Plugins -->
    <script src="{{ root }}assets/vendor/appear.js"></script>
    <script src="{{ root }}assets/vendor/hs-megamenu/src/hs.megamenu.js"></script>
    <script src="{{ root }}assets/vendor/malihu-scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>

    <!-- JS Unify -->
    <script src="{{ root }}assets/js/hs.core.js"></script>
    <script src="{{ root }}assets/js/helpers/hs.hamburgers.js"></script>
    <script src="{{ root }}assets/js/components/hs.header.js"></script>
    <script src="{{ root }}assets/js/components/hs.tabs.js"></script>
    <script src="{{ root }}assets/js/components/hs.counter.js"></script>
    <script src="{{ root }}assets/js/components/hs.progress-bar.js"></script>
    <script src="{{ root }}assets/js/components/hs.scrollbar.js"></script>
    <script src="{{ root }}assets/js/components/hs.go-to.js"></script>

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

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

        // initialization of tabs
        $.HSCore.components.HSTabs.init('[role="tablist"]');

        // initialization of counters
        var counters = $.HSCore.components.HSCounter.init('[class*="js-counter"]');

        // Initialization of HSScrollBar component
        $.HSCore.components.HSScrollBar.init( $('.js-scrollbar') );
      });

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

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

        // initializtion of horizontal progress bars
        setTimeout(function () { // important in this case
          var horizontalProgressBars = $.HSCore.components.HSProgressBar.init('.js-hr-progress-bar', {
            direction: 'horizontal',
            indicatorSelector: '.js-hr-progress-bar-indicator'
          });
        }, 1);
      });

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

    {% set SSCookiePrefix = "unify" %}
    {% set SSDefaultCustomColor = "#72c02c" %}
    {% set SSDefaultOuterSpaces = "0px" %}
    {% set SSDefaultContentFont = "Open Sans, Helvetica, Arial, sans-serif" %}
    {% set SSDefaultHeadingFont = "Open Sans, Helvetica, Arial, sans-serif" %}
    {% include "html/assets/include/nunjucks/partials/blocks/style-switcher.njk" %}
  </body>
</html>
