{# Settings #}
{% set root = "../../../" %}
{% set mainNavActive_1 = "shortcodes" %}
{% set sidebarNavActive_1 = "shortcode-base-tabs" %}
{% set title = "Tabs | " %}

{% 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" %}
<link rel="stylesheet" href="{{ root }}assets/vendor/bootstrap/offcanvas.css">
{% 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/jquery-ui/themes/base/jquery-ui.min.css">
<link rel="stylesheet" href="{{ root }}assets/vendor/hamburgers/hamburgers.min.css">
<link rel="stylesheet" href="{{ root }}assets/vendor/animate.css">
<link rel="stylesheet" href="{{ root }}assets/vendor/hs-megamenu/src/hs.megamenu.css">
<link rel="stylesheet" href="{{ root }}assets/vendor/cubeportfolio-full/cubeportfolio/css/cubeportfolio.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-fullwidth.njk" %}

  <section class="container-fluid">
    <div class="row row-offcanvas row-offcanvas-left">
      <div class="col-auto sidebar-offcanvas u-sidebar-navigation g-bg-secondary g-px-0 g-py-20">
        {% include "html/assets/include/nunjucks/partials/blocks/sidebars/sidebar-local-search.njk" %}
      </div>
      <div class="col g-py-30 g-pa-30--md">
        <div class="g-hidden-md-up">
          <button type="button" class="btn btn-primary btn-sm" data-toggle="offcanvas">Toggle shocrtcode nav</button>
        </div>
        <h1 class="g-font-weight-300 g-letter-spacing-1 g-pt-30 g-mb-35">Tabs</h1>

        <section class="g-pb-40">
          <div class="row">
            <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
              <h3 class="h5 g-font-weight-300 g-mb-15">Tab v1-1</h3>
              <a class="btn u-btn-primary" href="shortcode-base-tabs-1-1.html" target="_blank">View tab</a>
            </div>
            <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
              <h3 class="h5 g-font-weight-300 g-mb-15">Tab v1-2</h3>
              <a class="btn u-btn-primary" href="shortcode-base-tabs-1-2.html" target="_blank">View tab</a>
            </div>
            <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
              <h3 class="h5 g-font-weight-300 g-mb-15">Tab v2-1</h3>
              <a class="btn u-btn-primary" href="shortcode-base-tabs-2-1.html" target="_blank">View tab</a>
            </div>
            <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
              <h3 class="h5 g-font-weight-300 g-mb-15">Tab v2-2</h3>
              <a class="btn u-btn-primary" href="shortcode-base-tabs-2-2.html" target="_blank">View tab</a>
            </div>
            <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
              <h3 class="h5 g-font-weight-300 g-mb-15">Tab v3-1</h3>
              <a class="btn u-btn-primary" href="shortcode-base-tabs-3-1.html" target="_blank">View tab</a>
            </div>
            <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
              <h3 class="h5 g-font-weight-300 g-mb-15">Tab v4-1</h3>
              <a class="btn u-btn-primary" href="shortcode-base-tabs-4-1.html" target="_blank">View tab</a>
            </div>
            <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
              <h3 class="h5 g-font-weight-300 g-mb-15">Tab v5-1</h3>
              <a class="btn u-btn-primary" href="shortcode-base-tabs-5-1.html" target="_blank">View tab</a>
            </div>
            <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
              <h3 class="h5 g-font-weight-300 g-mb-15">Tab v5-2</h3>
              <a class="btn u-btn-primary" href="shortcode-base-tabs-5-2.html" target="_blank">View tab</a>
            </div>
            <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
              <h3 class="h5 g-font-weight-300 g-mb-15">Tab v5-3</h3>
              <a class="btn u-btn-primary" href="shortcode-base-tabs-5-3.html" target="_blank">View tab</a>
            </div>
            <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
              <h3 class="h5 g-font-weight-300 g-mb-15">Tab v6-1</h3>
              <a class="btn u-btn-primary" href="shortcode-base-tabs-5-1.html" target="_blank">View tab</a>
            </div>
            <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
              <h3 class="h5 g-font-weight-300 g-mb-15">Tab v7-1</h3>
              <a class="btn u-btn-primary" href="shortcode-base-tabs-7-1.html" target="_blank">View tab</a>
            </div>
            <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
              <h3 class="h5 g-font-weight-300 g-mb-15">Tab v8-1</h3>
              <a class="btn u-btn-primary" href="shortcode-base-tabs-8-1.html" target="_blank">View tab</a>
            </div>
            <div class="col-xs-6 col-md-4 col-lg-3 g-mb-50">
              <h3 class="h5 g-font-weight-300 g-mb-15">Tab v8-2</h3>
              <a class="btn u-btn-primary" href="shortcode-base-tabs-8-2.html" target="_blank">View tab</a>
            </div>
          </div>
        </section>
      </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>

<div id="modal" class="text-left modal-demo g-max-width-600 g-bg-white g-color-black g-pa-20" style="display: none;"></div>

{% include "html/assets/include/nunjucks/partials/core-js.njk" %}
<script src="{{ root }}assets/vendor/bootstrap/offcanvas.js"></script>

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

{% 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>
<!-- End jQuery UI Helpers -->

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

<!-- 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.tabs.js"></script>
<script src="{{ root }}assets/js/components/hs.cubeportfolio.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.autocomplete-local-search.js"></script>
<script src="{{ root }}assets/js/components/hs.go-to.js"></script>

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

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of tabs
    $.HSCore.components.HSTabs.init('[data-tabs-mobile-type]');
  });

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

    // initialization of autocomplet
    $.HSCore.components.HSLocalSearchAutocomplete.init('#autocomplete1');

    // initialization of go to
    $.HSCore.components.HSGoTo.init('.js-go-to');

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

    // initialization of cubeportfolio
    $.HSCore.components.HSCubeportfolio.init('.cbp');
  });

  $(window).on('resize', function () {
    setTimeout(function() {
      $.HSCore.components.HSTabs.init('[data-tabs-mobile-type]');
    }, 200);
  });
</script>
</body>
</html>
