Starter

Sidebar: Overlay - Left

Header Layouts
              
                <!-- ========== HEADER ========== -->
                <header id="header" class="u-header u-header--bg-transparent u-header--abs-top">
                  <div class="u-header__section">
                    <div id="logoAndNav" class="container">
                      <!-- Nav -->
                      <nav class="navbar navbar-expand u-header__navbar">
                        <!-- Logo -->
                        <a class="navbar-brand u-header__navbar-brand u-header__navbar-brand-center u-header__navbar-brand-text-white" href="index.html" aria-label="Front">
                          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="46px" height="46px" viewBox="0 0 46 46" xml:space="preserve" style="margin-bottom: 0;">
                            <path fill="#E1E4EA" opacity=".65" d="M23,41.1L23,41.1c-9.9,0-18-8-18-18l0,0c0-9.9,8-18,18-18h11.3c3.7,0,6.6,3,6.6,6.6v11.4C41,33,32.9,41.1,23,41.1z"/>
                            <path class="fill-white" opacity=".5" d="M28,36L28,36c-9.9,0-18-8-18-18l0,0c0-9.9,8-18,18-18h11.3C43,0.1,46,3.1,46,6.7v11.4C46,28,38,36,28,36z"/>
                            <path class="fill-white" opacity=".7" d="M18,46.1L18,46.1c-10,0-18-8-18-18l0,0c0-9.9,8-18,18-18h11.3c3.7,0,6.6,3,6.6,6.6v11.4C35.9,38.1,27.9,46.1,18,46.1z"/>
                            <path class="fill-primary" d="M17.4,34.1V18.4h10.2v2.9h-6.4v3.4H26v2.9h-4.8v6.5H17.4z"/>
                          </svg>
                          <span class="u-header__navbar-brand-text">Front</span>
                        </a>
                        <!-- End Logo -->

                        <!-- Fullscreen Toggle Button -->
                        <button id="sidebarHeaderInvoker" type="button" class="navbar-toggler d-block btn u-hamburger u-hamburger--white ml-auto"
                                aria-controls="sidebarHeader"
                                aria-haspopup="true"
                                aria-expanded="false"
                                data-unfold-event="click"
                                data-unfold-hide-on-scroll="false"
                                data-unfold-target="#sidebarHeader"
                                data-unfold-type="css-animation"
                                data-unfold-animation-in="fadeInLeft"
                                data-unfold-animation-out="fadeOutLeft"
                                data-unfold-duration="500">
                          <span id="hamburgerTrigger" class="u-hamburger__box">
                            <span class="u-hamburger__inner"></span>
                          </span>
                        </button>
                        <!-- End Fullscreen Toggle Button -->
                      </nav>
                      <!-- End Nav -->
                    </div>
                  </div>
                </header>
                <!-- ========== END HEADER ========== -->

                <!-- ========== HEADER SIDEBAR ========== -->
                <aside id="sidebarHeader" class="u-sidebar u-sidebar--left" aria-labelledby="sidebarHeaderInvoker">
                  <div class="u-sidebar__scroller">
                    <div class="u-sidebar__container">
                      <div class="u-header-sidebar__footer-offset">
                        <!-- Toggle Button -->
                        <div class="d-sm-none position-absolute top-0 right-0 z-index-2 pt-4 pr-7">
                          <button type="button" class="close ml-auto"
                                  aria-controls="sidebarHeader"
                                  aria-haspopup="true"
                                  aria-expanded="false"
                                  data-unfold-event="click"
                                  data-unfold-hide-on-scroll="false"
                                  data-unfold-target="#sidebarHeader"
                                  data-unfold-type="css-animation"
                                  data-unfold-animation-in="fadeInLeft"
                                  data-unfold-animation-out="fadeOutLeft"
                                  data-unfold-duration="500">
                            <span aria-hidden="true">×</span>
                          </button>
                        </div>
                        <!-- End Toggle Button -->

                        <!-- Content -->
                        <div class="js-scrollbar u-sidebar__body">
                          <div id="headerSidebarContent" class="u-sidebar__content u-header-sidebar__content">
                            <!-- Logo -->
                            <a class="navbar-brand u-header__navbar-brand u-header__navbar-brand-vertical" href="index.html" aria-label="Front">
                              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="46px" height="46px" viewBox="0 0 46 46" xml:space="preserve" style="margin-bottom: 0;">
                                <path fill="#3F7DE0" opacity=".65" d="M23,41L23,41c-9.9,0-18-8-18-18v0c0-9.9,8-18,18-18h11.3C38,5,41,8,41,11.7V23C41,32.9,32.9,41,23,41z"/>
                                <path class="fill-info" opacity=".5" d="M28,35.9L28,35.9c-9.9,0-18-8-18-18v0c0-9.9,8-18,18-18l11.3,0C43,0,46,3,46,6.6V18C46,27.9,38,35.9,28,35.9z"/>
                                <path class="fill-primary" opacity=".7" d="M18,46L18,46C8,46,0,38,0,28v0c0-9.9,8-18,18-18h11.3c3.7,0,6.6,3,6.6,6.6V28C35.9,38,27.9,46,18,46z"/>
                                <path class="fill-white" d="M17.4,34V18.3h10.2v2.9h-6.4v3.4h4.8v2.9h-4.8V34H17.4z"/>
                              </svg>
                              <span class="u-header__navbar-brand-text">Front</span>
                            </a>
                            <!-- End Logo -->

                            <!-- List -->
                            <ul id="headerSidebarList" class="u-header-collapse__nav">
                              <!-- Home Section -->
                              <li class="u-has-submenu u-header-collapse__submenu">
                                <a class="u-header-collapse__nav-link u-header-collapse__nav-pointer" href="javascript:;" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="headerSidebarHomeCollapse" data-target="#headerSidebarHomeCollapse">
                                  Home
                                </a>

                                <div id="headerSidebarHomeCollapse" class="collapse" data-parent="#headerSidebarContent">
                                  <ul id="headerSidebarHomeMenu" class="u-header-collapse__nav-list">
                                    <!-- Home - Classic -->
                                    <li class="u-has-submenu u-header-collapse__submenu">
                                      <a class="u-header-collapse__submenu-nav-link u-header-collapse__nav-pointer" href="javascript:;" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="headerSidebarHomeClassicSubNavCollapse" data-target="#headerSidebarHomeClassicSubNavCollapse">
                                        Classic
                                      </a>

                                      <ul id="headerSidebarHomeClassicSubNavCollapse" class="collapse u-header-collapse__submenu-list" data-parent="#headerSidebarHomeMenu">
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="index.html">Classic Agency</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="classic-business.html">Classic Business</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="classic-marketing.html">Classic Marketing</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="classic-consulting.html">Classic Consulting</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="classic-start-up.html">Classic Start-up <span class="badge badge-success badge-primary ml-1">New</span></a></li>
                                      </ul>
                                    </li>
                                    <!-- End Home - Classic -->

                                    <!-- Home - Corporate -->
                                    <li class="u-has-submenu u-header-collapse__submenu">
                                      <a class="u-header-collapse__submenu-nav-link u-header-collapse__nav-pointer" href="javascript:;" data-target="#headerSidebarHomeCorporateSubNavCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="headerSidebarHomeCorporateSubNavCollapse">
                                        Corporate
                                      </a>

                                      <ul id="headerSidebarHomeCorporateSubNavCollapse" class="collapse u-header-collapse__submenu-list" data-parent="#headerSidebarHomeMenu">
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="corporate-agency.html">Corporate Agency</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="corporate-start-up.html">Corporate Start-Up</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="corporate-business.html">Corporate Business</a></li>
                                      </ul>
                                    </li>
                                    <!-- End Home - Corporate -->

                                    <!-- Home - Portfolio -->
                                    <li class="u-has-submenu u-header-collapse__submenu">
                                      <a class="u-header-collapse__submenu-nav-link u-header-collapse__nav-pointer" href="javascript:;" data-target="#headerSidebarHomePortfolioSubNavCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="headerSidebarHomePortfolioSubNavCollapse">
                                        Portfolio
                                      </a>

                                      <ul id="headerSidebarHomePortfolioSubNavCollapse" class="collapse u-header-collapse__submenu-list" data-parent="#headerSidebarHomeMenu">
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="portfolio-agency.html">Portfolio Agency</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="portfolio-profile.html">Portfolio Profile</a></li>
                                      </ul>
                                    </li>
                                    <!-- End Home - Portfolio -->

                                    <!-- Home - Onepages -->
                                    <li class="u-has-submenu u-header-collapse__submenu">
                                      <a class="u-header-collapse__submenu-nav-link u-header-collapse__nav-pointer" href="javascript:;" data-target="#headerHomeSidebarOnepagesSubNavCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="headerHomeSidebarOnepagesSubNavCollapse">
                                        Onepages <span class="badge badge-success badge-primary ml-2">New</span>
                                      </a>

                                      <ul id="headerHomeSidebarOnepagesSubNavCollapse" class="collapse u-header-collapse__submenu-list" data-parent="#headerSidebarHomeMenu">
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="onepages-agency.html">Onepages Agency <span class="badge badge-success badge-primary ml-1">New</span></a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="onepages-showcase.html">Onepages Showcase <span class="badge badge-success badge-primary ml-1">New</span></a></li>
                                      </ul>
                                    </li>
                                    <!-- End Home - Onepages -->

                                    <!-- Home - Blog -->
                                    <li class="u-has-submenu u-header-collapse__submenu">
                                      <a class="u-header-collapse__submenu-nav-link u-header-collapse__nav-pointer" href="javascript:;" data-target="#headerHomeSidebarBlogSubNavCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="headerHomeSidebarBlogSubNavCollapse">
                                        Blog
                                      </a>

                                      <ul id="headerHomeSidebarBlogSubNavCollapse" class="collapse u-header-collapse__submenu-list" data-parent="#headerSidebarHomeMenu">
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="blog-agency.html">Blog Agency</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="blog-start-up.html">Blog Start-Up</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="blog-business.html">Blog Business</a></li>
                                      </ul>
                                    </li>
                                    <!-- End Home - Blog -->

                                    <!-- Home - App -->
                                    <li class="u-has-submenu u-header-collapse__submenu">
                                      <a class="u-header-collapse__submenu-nav-link u-header-collapse__nav-pointer" href="javascript:;" data-target="#headerSidebarHomeAppSubNavCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="headerSidebarHomeAppSubNavCollapse">
                                        App
                                      </a>

                                      <ul id="headerSidebarHomeAppSubNavCollapse" class="collapse u-header-collapse__submenu-list" data-parent="#headerSidebarHomeMenu">
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="app-payment.html">App Payment</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="app-software.html">App Software</a></li>
                                      </ul>
                                    </li>
                                    <!-- End Home - App -->
                                  </ul>
                                </div>
                              </li>
                              <!-- End Home Section -->

                              <!-- Page Section -->
                              <li class="u-has-submenu u-header-collapse__submenu">
                                <a class="u-header-collapse__nav-link u-header-collapse__nav-pointer" href="javascript:;" data-target="#headerSidebarPagesCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="headerSidebarPagesCollapse">
                                  Pages
                                </a>

                                <div id="headerSidebarPagesCollapse" class="collapse" data-parent="#headerSidebarContent">
                                  <ul id="headerSidebarPagesMenu" class="u-header-collapse__nav-list">
                                    <!-- Page - Account -->
                                    <li class="u-has-submenu u-header-collapse__submenu">
                                      <a class="u-header-collapse__submenu-nav-link u-header-collapse__nav-pointer" href="javascript:;" data-target="#headerSidebarPagesAccountSubNavCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="headerSidebarPagesAccountSubNavCollapse">
                                        Account
                                      </a>

                                      <ul id="headerSidebarPagesAccountSubNavCollapse" class="collapse u-header-collapse__submenu-list" data-parent="#headerSidebarPagesMenu">
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../account/dashboard.html">Dashboard</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../account/profile.html">Profile</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../account/my-tasks.html">My tasks</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../account/projects.html">Projects</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../account/members.html">Members</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../account/edit-profile.html">Edit profile</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../account/change-password.html">Change password</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../account/notifications.html">Notifications</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../account/activity.html">Activity</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../account/payment-methods.html">Payment methods</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../account/invite-friends.html">Invite friends</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../account/plans.html">Plans</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../account/api-token.html">API Token</a></li>
                                      </ul>
                                    </li>
                                    <!-- End Page - Account -->

                                    <!-- Page - Portfolio -->
                                    <li class="u-has-submenu u-header-collapse__submenu">
                                      <a class="u-header-collapse__submenu-nav-link u-header-collapse__nav-pointer" href="javascript:;" data-target="#headerSidebarPagesPortfolioSubNavCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="headerSidebarPagesPortfolioSubNavCollapse">
                                        Portfolio
                                      </a>

                                      <ul id="headerSidebarPagesPortfolioSubNavCollapse" class="collapse u-header-collapse__submenu-list" data-parent="#headerSidebarPagesMenu">
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../portfolio/boxed-classic.html">All layouts</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../portfolio/case-studies-simple.html">Case Studies Simple</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../portfolio/case-studies-modern.html">Case Studies Modern</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../portfolio/single-page-simple.html">Single Page Simple</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../portfolio/single-page-grid.html">Single Page Grid</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../portfolio/single-page-masonry.html">Single Page Masonry</a></li>
                                      </ul>
                                    </li>
                                    <!-- End Page - Portfolio -->

                                    <!-- Page - About -->
                                    <li class="u-has-submenu u-header-collapse__submenu">
                                      <a class="u-header-collapse__submenu-nav-link u-header-collapse__nav-pointer" href="javascript:;" data-target="#headerSidebarPagesAboutSubNavCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="headerSidebarPagesAboutSubNavCollapse">
                                        About
                                      </a>

                                      <ul id="headerSidebarPagesAboutSubNavCollapse" class="collapse u-header-collapse__submenu-list" data-parent="#headerSidebarPagesMenu">
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../pages/about-agency.html">About Agency</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../pages/about-start-up.html">About Start-Up</a></li>
                                      </ul>
                                    </li>
                                    <!-- End Page - About -->

                                    <!-- Page - Services -->
                                    <li class="u-has-submenu u-header-collapse__submenu">
                                      <a class="u-header-collapse__submenu-nav-link u-header-collapse__nav-pointer" href="javascript:;" data-target="#headerSidebarPagesServicesSubNavCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="headerSidebarPagesServicesSubNavCollapse">
                                        Services
                                      </a>

                                      <ul id="headerSidebarPagesServicesSubNavCollapse" class="collapse u-header-collapse__submenu-list" data-parent="#headerSidebarPagesMenu">
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../pages/services-agency.html">Services Agency</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../pages/services-start-up.html">Services Start-Up</a></li>
                                      </ul>
                                    </li>
                                    <!-- End Page - Services -->

                                    <!-- Page - Careers -->
                                    <li class="u-has-submenu u-header-collapse__submenu">
                                      <a class="u-header-collapse__submenu-nav-link u-header-collapse__nav-pointer" href="javascript:;" data-target="#headerSidebarPagesCareersSubNavCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="headerSidebarPagesCareersSubNavCollapse">
                                        Careers
                                      </a>

                                      <ul id="headerSidebarPagesCareersSubNavCollapse" class="collapse u-header-collapse__submenu-list" data-parent="#headerSidebarPagesMenu">
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../pages/careers.html">Careers</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../pages/careers-single.html">Careers Single</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../pages/hire-us.html">Hire Us</a></li>
                                      </ul>
                                    </li>
                                    <!-- End Page - Careers -->

                                    <!-- Page - Login -->
                                    <li class="u-has-submenu u-header-collapse__submenu">
                                      <a class="u-header-collapse__submenu-nav-link u-header-collapse__nav-pointer" href="javascript:;" data-target="#headerSidebarPagesLoginSubNavCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="headerSidebarPagesLoginSubNavCollapse">
                                        Login
                                      </a>

                                      <ul id="headerSidebarPagesLoginSubNavCollapse" class="collapse u-header-collapse__submenu-list" data-parent="#headerSidebarPagesMenu">
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../pages/login.html">Login</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../pages/signup.html">Signup</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../pages/recover-account.html">Recover Account</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../pages/login-simple.html">Login Simple</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../pages/signup-simple.html">Signup Simple</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../pages/recover-account-simple.html">Recover Account Simple</a></li>
                                      </ul>
                                    </li>
                                    <!-- End Page - Login -->

                                    <!-- Page - Contacts -->
                                    <li class="u-has-submenu u-header-collapse__submenu">
                                      <a class="u-header-collapse__submenu-nav-link u-header-collapse__nav-pointer" href="javascript:;" data-target="#headerSidebarPagesContactsSubNavCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="headerSidebarPagesContactsSubNavCollapse">
                                        Contacts
                                      </a>

                                      <ul id="headerSidebarPagesContactsSubNavCollapse" class="collapse u-header-collapse__submenu-list" data-parent="#headerSidebarPagesMenu">
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../pages/contacts-agency.html">Contacts Agency</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../pages/contacts-start-up.html">Contacts Start-Up</a></li>
                                      </ul>
                                    </li>
                                    <!-- End Page - Contacts -->

                                    <!-- Page - Resources -->
                                    <li class="u-has-submenu u-header-collapse__submenu">
                                      <a class="u-header-collapse__submenu-nav-link u-header-collapse__nav-pointer" href="javascript:;" data-target="#headerSidebarPagesResourcesSubNavCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="headerSidebarPagesResourcesSubNavCollapse">
                                        Resources
                                      </a>

                                      <ul id="headerSidebarPagesResourcesSubNavCollapse" class="collapse u-header-collapse__submenu-list" data-parent="#headerSidebarPagesMenu">
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../pages/help.html">Help</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../pages/help-article.html">Help article</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../pages/faq.html">FAQ</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../pages/customers.html">Customers</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../pages/customer-story.html">Customer story</a></li>
                                      </ul>
                                    </li>
                                    <!-- End Page - Resources -->

                                    <!-- Page - Utilities -->
                                    <li class="u-has-submenu u-header-collapse__submenu">
                                      <a class="u-header-collapse__submenu-nav-link u-header-collapse__nav-pointer" href="javascript:;" data-target="#headerSidebarPagesUtilitiesSubNavCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="headerSidebarPagesUtilitiesSubNavCollapse">
                                        Utilities
                                      </a>

                                      <ul id="headerSidebarPagesUtilitiesSubNavCollapse" class="collapse u-header-collapse__submenu-list" data-parent="#headerSidebarPagesMenu">
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../pages/pricing.html">Pricing</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../pages/terms.html">Terms & Conditions</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../pages/privacy.html">Privacy & Policy</a></li>
                                      </ul>
                                    </li>
                                    <!-- End Page - Utilities -->

                                    <!-- Page - Specialty -->
                                    <li class="u-has-submenu u-header-collapse__submenu">
                                      <a class="u-header-collapse__submenu-nav-link u-header-collapse__nav-pointer" href="javascript:;" data-target="#headerSidebarPagesSpecialtySubNavCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="headerSidebarPagesSpecialtySubNavCollapse">
                                        Specialty
                                      </a>

                                      <ul id="headerSidebarPagesSpecialtySubNavCollapse" class="collapse u-header-collapse__submenu-list" data-parent="#headerSidebarPagesMenu">
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../pages/cover-page.html">Cover Page</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../pages/coming-soon.html">Coming Soon</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../pages/maintenance-mode.html">Maintenance Mode</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../pages/status.html">Status</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../pages/invoice.html">Status</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../pages/error-404.html">Error 404</a></li>
                                      </ul>
                                    </li>
                                    <!-- End Page - Specialty -->
                                  </ul>
                                </div>
                              </li>
                              <!-- End Page Section -->

                              <!-- Blog -->
                              <li class="u-has-submenu u-header-collapse__submenu">
                                <a class="u-header-collapse__nav-link u-header-collapse__nav-pointer" href="javascript:;" data-target="#headerSidebarBlogCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="headerSidebarBlogCollapse">
                                  Blog
                                </a>

                                <div id="headerSidebarBlogCollapse" class="collapse" data-parent="#headerSidebarContent">
                                  <ul id="headerSidebarBlogMenu" class="u-header-collapse__nav-list">
                                    <!-- Blog - Classic -->
                                    <li class="u-has-submenu u-header-collapse__submenu">
                                      <a class="u-header-collapse__submenu-nav-link u-header-collapse__nav-pointer" href="javascript:;" data-target="#headerSidebarBlogClassicSubNavCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="headerSidebarBlogClassicSubNavCollapse">
                                        Classic
                                      </a>

                                      <ul id="headerSidebarBlogClassicSubNavCollapse" class="collapse u-header-collapse__submenu-list" data-parent="#headerSidebarBlogMenu">
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../blog/classic-left-sidebar.html">Left Sidebar</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../blog/classic-right-sidebar.html">Right Sidebar</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../blog/classic-full-width.html">Full Width</a></li>
                                      </ul>
                                    </li>
                                    <!-- End Blog - Classic -->

                                    <!-- Blog - Grid -->
                                    <li class="u-has-submenu u-header-collapse__submenu">
                                      <a class="u-header-collapse__submenu-nav-link u-header-collapse__nav-pointer" href="javascript:;" data-target="#headerSidebarBlogGridSubNavCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="headerSidebarBlogGridSubNavCollapse">
                                        Grid
                                      </a>

                                      <ul id="headerSidebarBlogGridSubNavCollapse" class="collapse u-header-collapse__submenu-list" data-parent="#headerSidebarBlogMenu">
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../blog/grid-left-sidebar.html">Left Sidebar</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../blog/grid-right-sidebar.html">Right Sidebar</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../blog/grid-full-width.html">Full Width</a></li>
                                      </ul>
                                    </li>
                                    <!-- End Blog - Grid -->

                                    <!-- Blog - List -->
                                    <li class="u-has-submenu u-header-collapse__submenu">
                                      <a class="u-header-collapse__submenu-nav-link u-header-collapse__nav-pointer" href="javascript:;" data-target="#headerSidebarBlogListSubNavCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="headerSidebarBlogListSubNavCollapse">
                                        List
                                      </a>

                                      <ul id="headerSidebarBlogListSubNavCollapse" class="collapse u-header-collapse__submenu-list" data-parent="#headerSidebarBlogMenu">
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../blog/list-left-sidebar.html">Left Sidebar</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../blog/list-right-sidebar.html">Right Sidebar</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../blog/list-full-width.html">Full Width</a></li>
                                      </ul>
                                    </li>
                                    <!-- End Blog - List -->

                                    <!-- Blog - Modern -->
                                    <li class="u-has-submenu u-header-collapse__submenu">
                                      <a class="u-header-collapse__submenu-nav-link u-header-collapse__nav-pointer" href="javascript:;" data-target="#headerSidebarBlogModernSubNavCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="headerSidebarBlogModernSubNavCollapse">
                                        Modern
                                      </a>

                                      <ul id="headerSidebarBlogModernSubNavCollapse" class="collapse u-header-collapse__submenu-list" data-parent="#headerSidebarBlogMenu">
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../blog/modern-left-sidebar.html">Left Sidebar</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../blog/modern-right-sidebar.html">Right Sidebar</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../blog/modern-full-width.html">Full Width</a></li>
                                      </ul>
                                    </li>
                                    <!-- End Blog - Modern -->

                                    <!-- Blog - Masonry -->
                                    <li class="u-has-submenu u-header-collapse__submenu">
                                      <a class="u-header-collapse__submenu-nav-link u-header-collapse__nav-pointer" href="javascript:;" data-target="#headerSidebarBlogMasonrySubNavCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="headerSidebarBlogMasonrySubNavCollapse">
                                        Masonry
                                      </a>

                                      <ul id="headerSidebarBlogMasonrySubNavCollapse" class="collapse u-header-collapse__submenu-list" data-parent="#headerSidebarBlogMenu">
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../blog/masonry-left-sidebar.html">Left Sidebar</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../blog/masonry-right-sidebar.html">Right Sidebar</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../blog/masonry-full-width.html">Full Width</a></li>
                                      </ul>
                                    </li>
                                    <!-- End Blog - Masonry -->

                                    <!-- Blog - Single Article -->
                                    <li class="u-has-submenu u-header-collapse__submenu">
                                      <a class="u-header-collapse__submenu-nav-link u-header-collapse__nav-pointer" href="javascript:;" data-target="#headerSidebarBlogSingleArticleSubNavCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="headerSidebarBlogSingleArticleSubNavCollapse">
                                        Single Article
                                      </a>

                                      <ul id="headerSidebarBlogSingleArticleSubNavCollapse" class="collapse u-header-collapse__submenu-list" data-parent="#headerSidebarBlogMenu">
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../blog/single-article-classic.html">Classic</a></li>
                                        <li><a class="nav-link u-header-collapse__submenu-list-link" href="../blog/single-article-simple.html">Simple</a></li>
                                      </ul>
                                    </li>
                                    <!-- End Blog - Single Article -->
                                  </ul>
                                </div>
                              </li>
                              <!-- End Blog -->

                              <!-- Shop Section -->
                              <li class="u-has-submenu u-header-collapse__submenu">
                                <a class="u-header-collapse__nav-link u-header-collapse__nav-pointer" href="javascript:;" data-target="#headerSidebarShopCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="headerSidebarShopCollapse">
                                  Shop
                                </a>

                                <div id="headerSidebarShopCollapse" class="collapse" data-parent="#headerSidebarContent">
                                  <ul id="headerSidebarShopMenu" class="u-header-collapse__nav-list u-header-collapse__nav-list--no-spacer">
                                    <li><a class="nav-link u-header-collapse__submenu-list-link" href="../shop/classic.html">Classic</a></li>
                                    <li><a class="nav-link u-header-collapse__submenu-list-link" href="../shop/masonry.html">Masonry</a></li>
                                    <li><a class="nav-link u-header-collapse__submenu-list-link" href="../shop/single-product.html">Single Product</a></li>
                                    <li><a class="nav-link u-header-collapse__submenu-list-link" href="../shop/cart.html">Cart</a></li>
                                    <li><a class="nav-link u-header-collapse__submenu-list-link" href="../shop/checkout.html">Checkout</a></li>
                                  </ul>
                                </div>
                              </li>
                              <!-- End Shop Section -->

                              <!-- Demos Section -->
                              <li class="u-has-submenu u-header-collapse__submenu">
                                <a class="u-header-collapse__nav-link u-header-collapse__nav-pointer" href="javascript:;" data-target="#headerSidebarDemosCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="headerSidebarDemosCollapse">
                                  Demos
                                </a>

                                <div id="headerSidebarDemosCollapse" class="collapse" data-parent="#headerSidebarContent">
                                  <ul id="headerSidebarDemosMenu" class="u-header-collapse__nav-list u-header-collapse__nav-list--no-spacer">
                                    <li><a class="nav-link u-header-collapse__submenu-list-link" href="../house/index.html">House</a></li>
                                    <li><a class="nav-link u-header-collapse__submenu-list-link" href="../job/index.html">Job</a></li>
                                    <li><a class="nav-link u-header-collapse__submenu-list-link" href="../crypto/index.html">Crypto Landing</a></li>
                                  </ul>
                                </div>
                              </li>
                              <!-- End Demos Section -->

                              <!-- Docs Section -->
                              <li class="u-has-submenu u-header-collapse__submenu">
                                <a class="u-header-collapse__nav-link u-header-collapse__nav-pointer" href="javascript:;" data-target="#headerSidebardocsCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="headerSidebardocsCollapse">
                                  Docs
                                </a>

                                <div id="headerSidebardocsCollapse" class="collapse" data-parent="#headerSidebarContent">
                                  <ul id="headerSidebardocsMenu" class="u-header-collapse__nav-list u-header-collapse__nav-list--no-spacer">
                                    <li><a class="nav-link u-header-collapse__submenu-list-link" href="../../documentation/index.html">Classic</a></li>
                                    <li><a class="nav-link u-header-collapse__submenu-list-link" href="../index.html">Get started</a></li>
                                  </ul>
                                </div>
                              </li>
                              <!-- End Docs Section -->
                            </ul>
                            <!-- End List -->
                          </div>
                        </div>
                        <!-- End Content -->
                      </div>

                      <!-- Footer -->
                      <footer id="SVGwaveWithDots" class="svg-preloader u-header-sidebar__footer">
                        <ul class="list-inline mb-0">
                          <li class="list-inline-item pr-3">
                            <a class="u-header-sidebar__footer-link" href="../pages/privacy.html">Privacy</a>
                          </li>
                          <li class="list-inline-item pr-3">
                            <a class="u-header-sidebar__footer-link" href="../pages/terms.html">Terms</a>
                          </li>
                          <li class="list-inline-item">
                            <a class="u-header-sidebar__footer-link" href="../pages/help.html">
                              <i class="fas fa-info-circle"></i>
                            </a>
                          </li>
                        </ul>

                        <!-- SVG Background Shape -->
                        <div class="position-absolute right-0 bottom-0 left-0 z-index-n1">
                          <img class="js-svg-injector" src="../../assets/svg/components/wave-bottom-with-dots.svg" alt="Image Description"
                               data-parent="#SVGwaveWithDots">
                        </div>
                        <!-- End SVG Background Shape -->
                      </footer>
                      <!-- End Footer -->
                    </div>
                  </div>
                </aside>
                <!-- ========== END HEADER SIDEBAR ========== -->
              
            
              
                <link rel="stylesheet" href="../../assets/vendor/font-awesome/css/fontawesome-all.min.css">
                <link rel="stylesheet" href="../../assets/vendor/animate.css/animate.min.css">
                <link rel="stylesheet" href="../../assets/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css">
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
                <script src="../../assets/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"></script>

                <!-- JS Front -->
                <script src="../../assets/js/components/hs.hamburgers.js"></script>
                <script src="../../assets/js/components/hs.unfold.js"></script>
                <script src="../../assets/js/components/hs.malihu-scrollbar.js"></script>
                <script src="../../assets/js/components/hs.svg-injector.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  $(window).on('load', function () {
                    // initialization of svg injector module
                    $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
                  });

                  $(document).on('ready', function () {
                    // initialization of hamburgers
                    $.HSCore.components.HSHamburgers.init('#hamburgerTrigger');

                    // initialization of unfold component
                    $.HSCore.components.HSUnfold.init($('[data-unfold-target]'), {
                      beforeClose: function () {
                        $('#hamburgerTrigger').removeClass('is-active');
                      },
                      afterClose: function() {
                        $('#headerSidebarList .collapse.show').collapse('hide');
                      }
                    });

                    $('#headerSidebarList [data-toggle="collapse"]').on('click', function (e) {
                      e.preventDefault();

                      var target = $(this).data('target');

                      if($(this).attr('aria-expanded') === "true") {
                        $(target).collapse('hide');
                      } else {
                        $(target).collapse('show');
                      }
                    });

                    // initialization of malihu scrollbar
                    $.HSCore.components.HSMalihuScrollBar.init($('.js-scrollbar'));
                  });
                </script>