Starter

Header: Fullscreen

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">
                        <div class="d-flex justify-content-between w-100">
                          <!-- 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="headerToggler" type="button" class="navbar-toggler d-block btn u-hamburger u-hamburger--white u-fullscreen--toggler"
                                  aria-haspopup="true"
                                  aria-expanded="false"
                                  aria-controls="fullscreen"
                                  aria-label="Toggle Header"
                                  data-target="#fullscreen">
                            <span id="hamburgerTrigger" class="u-hamburger__box">
                            <span class="u-hamburger__inner"></span>
                          </span>
                          </button>
                          <!-- End Fullscreen Toggle Button -->
                        </div>
                      </nav>
                      <!-- End Nav -->

                      <!-- Navigation -->
                      <div id="fullscreen" class="u-fullscreen"
                           aria-labelledby="headerToggler"
                           data-overlay-classes="u-fullscreen__overlay">
                        <div class="u-fullscreen__container">
                          <div class="container">
                            <div class="row justify-content-md-between align-items-center">
                              <div id="fullscreenWrapper" class="col-md-6">
                                <!-- List -->
                                <ul id="fullscreenNav" class="u-fullscreen__nav">
                                  <!-- Home Section -->
                                  <li class="u-has-submenu u-fullscreen__submenu">
                                    <a class="u-fullscreen__nav-link" href="#homeCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="homeCollapse">
                                      Home
                                    </a>

                                    <ul id="homeCollapse" class="collapse u-fullscreen__nav-list" data-parent="#fullscreenWrapper">
                                      <!-- Home - Classic -->
                                      <li class="u-has-submenu u-fullscreen__submenu">
                                        <a class="u-fullscreen__submenu-nav-link" href="#homeClassicSubNavCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="homeClassicSubNavCollapse">
                                          Classic
                                        </a>

                                        <ul id="homeClassicSubNavCollapse" class="collapse u-fullscreen__submenu-list" data-parent="#fullscreenNav">
                                          <li><a class="nav-link u-fullscreen__submenu-list-link" href="index.html">Classic Agency</a></li>
                                          <li><a class="nav-link u-fullscreen__submenu-list-link" href="classic-business.html">Classic Business</a></li>
                                          <li><a class="nav-link u-fullscreen__submenu-list-link" href="classic-marketing.html">Classic Marketing</a></li>
                                          <li><a class="nav-link u-fullscreen__submenu-list-link" href="classic-consulting.html">Classic Consulting</a></li>
                                          <li><a class="nav-link u-fullscreen__submenu-list-link" href="classic-start-up.html">Classic Start-Up</a></li>
                                        </ul>
                                      </li>
                                      <!-- End Home - Classic -->

                                      <!-- Home - Corporate -->
                                      <li class="u-has-submenu u-fullscreen__submenu">
                                        <a class="u-fullscreen__submenu-nav-link" href="#homeCorporateSubNavCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="homeCorporateSubNavCollapse">
                                          Corporate
                                        </a>

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

                                      <!-- Home - Portfolio -->
                                      <li class="u-has-submenu u-fullscreen__submenu">
                                        <a class="u-fullscreen__submenu-nav-link" href="#homePortfolioSubNavCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="homePortfolioSubNavCollapse">
                                          Portfolio
                                        </a>

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

                                      <!-- Home - App -->
                                      <li class="u-has-submenu u-fullscreen__submenu">
                                        <a class="u-fullscreen__submenu-nav-link" href="#homeAppSubNavCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="homeAppSubNavCollapse">
                                          App
                                        </a>

                                        <ul id="homeAppSubNavCollapse" class="collapse u-fullscreen__submenu-list" data-parent="#fullscreenNav">
                                          <li><a class="nav-link u-fullscreen__submenu-list-link" href="app-saas.html">App SaaS</a></li>
                                          <li><a class="nav-link u-fullscreen__submenu-list-link" href="app-workflow.html">App Workflow</a></li>
                                          <li><a class="nav-link u-fullscreen__submenu-list-link" href="app-payment.html">App Payment</a></li>
                                          <li><a class="nav-link u-fullscreen__submenu-list-link" href="app-software.html">App Software</a></li>
                                        </ul>
                                      </li>
                                      <!-- End Home - App -->

                                      <!-- Home - Onepages -->
                                      <li class="u-has-submenu u-fullscreen__submenu">
                                        <a class="u-fullscreen__submenu-nav-link" href="#homeOnepagesSubNavCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="homeOnepagesSubNavCollapse">
                                          Onepages
                                        </a>

                                        <ul id="homeOnepagesSubNavCollapse" class="collapse u-fullscreen__submenu-list" data-parent="#fullscreenNav">
                                          <li><a class="nav-link u-fullscreen__submenu-list-link" href="onepages-agency.html">Onepages Agency</a></li>
                                          <li><a class="nav-link u-fullscreen__submenu-list-link" href="onepages-showcase.html">Onepages Showcase</a></li>
                                        </ul>
                                      </li>
                                      <!-- End Home - Onepages -->

                                      <!-- Home - Blog -->
                                      <li class="u-has-submenu u-fullscreen__submenu">
                                        <a class="u-fullscreen__submenu-nav-link" href="#homeBlogSubNavCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="homeBlogSubNavCollapse">
                                          Blog
                                        </a>

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

                                  <!-- Page Section -->
                                  <li class="u-has-submenu u-fullscreen__submenu">
                                    <a class="u-fullscreen__nav-link" href="#pagesCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="pagesCollapse">
                                      Pages
                                    </a>

                                    <ul id="pagesCollapse" class="collapse u-fullscreen__nav-list"
                                        data-parent="#fullscreenWrapper">
                                      <!-- Page - Account -->
                                      <li class="u-has-submenu u-fullscreen__submenu">
                                        <a class="u-fullscreen__submenu-nav-link" role="button" href="#pagesAccountCollapse" data-toggle="collapse" aria-expanded="false" aria-controls="pagesAccountCollapse">
                                          Account
                                        </a>

                                        <ul id="pagesAccountCollapse" class="collapse u-fullscreen__submenu-list" data-parent="#fullscreenNav">
                                          <li><a class="nav-link u-fullscreen__submenu-list-link" href="../account/dashboard.html">Dashboard</a></li>
                                          <li><a class="nav-link u-fullscreen__submenu-list-link" href="../account/profile.html">Profile</a></li>
                                          <li><a class="nav-link u-fullscreen__submenu-list-link" href="../account/my-tasks.html">My tasks</a></li>
                                          <li><a class="nav-link u-fullscreen__submenu-list-link" href="../account/projects.html">Projects</a></li>
                                          <li><a class="nav-link u-fullscreen__submenu-list-link" href="../account/members.html">Members</a></li>
                                          <li><a class="nav-link u-fullscreen__submenu-list-link" href="../account/edit-profile.html">Edit profile</a></li>
                                          <li><a class="nav-link u-fullscreen__submenu-list-link" href="../account/change-password.html">Change password</a></li>
                                          <li><a class="nav-link u-fullscreen__submenu-list-link" href="../account/notifications.html">Notifications</a></li>
                                          <li><a class="nav-link u-fullscreen__submenu-list-link" href="../account/activity.html">Activity</a></li>
                                          <li><a class="nav-link u-fullscreen__submenu-list-link" href="../account/payment-methods.html">Payment methods</a></li>
                                          <li><a class="nav-link u-fullscreen__submenu-list-link" href="../account/invite-friends.html">Invite friends</a></li>
                                          <li><a class="nav-link u-fullscreen__submenu-list-link" href="../account/plans.html">Plans</a></li>
                                          <li><a class="nav-link u-fullscreen__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-fullscreen__submenu">
                                        <a class="u-fullscreen__submenu-nav-link" role="button" href="#pagesPortfolioCollapse" data-toggle="collapse" aria-expanded="false" aria-controls="pagesPortfolioCollapse">
                                          Portfolio
                                        </a>

                                        <ul id="pagesPortfolioCollapse" class="collapse u-fullscreen__submenu-list" data-parent="#fullscreenNav">
                                          <li><a class="nav-link u-fullscreen__submenu-list-link" href="../portfolio/boxed-classic.html">All layouts</a></li>
                                          <li><a class="nav-link u-fullscreen__submenu-list-link" href="../portfolio/case-studies-simple.html">Case Studies Simple</a></li>
                                          <li><a class="nav-link u-fullscreen__submenu-list-link" href="../portfolio/case-studies-modern.html">Case Studies Modern</a></li>
                                          <li><a class="nav-link u-fullscreen__submenu-list-link" href="../portfolio/single-page-simple.html">Single Page Simple</a></li>
                                          <li><a class="nav-link u-fullscreen__submenu-list-link" href="../portfolio/single-page-grid.html">Single Page Grid</a></li>
                                          <li><a class="nav-link u-fullscreen__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-fullscreen__submenu">
                                        <a class="u-fullscreen__submenu-nav-link" role="button" href="#pagesAboutCollapse" data-toggle="collapse" aria-expanded="false" aria-controls="pagesAboutCollapse">
                                          About
                                        </a>

                                        <ul id="pagesAboutCollapse" class="collapse u-fullscreen__submenu-list" data-parent="#fullscreenNav">
                                          <li><a class="nav-link u-fullscreen__submenu-list-link" href="../pages/about-agency.html">About Agency</a></li>
                                          <li><a class="nav-link u-fullscreen__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-fullscreen__submenu">
                                        <a class="u-fullscreen__submenu-nav-link" role="button" href="#pagesServicesCollapse" data-toggle="collapse" aria-expanded="false" aria-controls="pagesServicesCollapse">
                                          Services
                                        </a>

                                        <ul id="pagesServicesCollapse" class="collapse u-fullscreen__submenu-list" data-parent="#fullscreenNav">
                                          <li><a class="nav-link u-fullscreen__submenu-list-link" href="../pages/services-agency.html">Services Agency</a></li>
                                          <li><a class="nav-link u-fullscreen__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-fullscreen__submenu">
                                        <a class="u-fullscreen__submenu-nav-link" role="button" href="#pagesCareersCollapse" data-toggle="collapse" aria-expanded="false" aria-controls="pagesCareersCollapse">
                                          Careers
                                        </a>

                                        <ul id="pagesCareersCollapse" class="collapse u-fullscreen__submenu-list" data-parent="#fullscreenNav">
                                          <li><a class="nav-link u-fullscreen__submenu-list-link" href="../pages/careers.html">Careers</a></li>
                                          <li><a class="nav-link u-fullscreen__submenu-list-link" href="../pages/careers-single.html">Careers Single</a></li>
                                          <li><a class="nav-link u-fullscreen__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-fullscreen__submenu">
                                        <a class="u-fullscreen__submenu-nav-link" role="button" href="#pagesLoginCollapse" data-toggle="collapse" aria-expanded="false" aria-controls="pagesLoginCollapse">
                                          Login
                                        </a>

                                        <ul id="pagesLoginCollapse" class="collapse u-fullscreen__submenu-list" data-parent="#fullscreenNav">
                                          <li><a class="nav-link u-fullscreen__submenu-list-link" href="../pages/login.html">Login</a></li>
                                          <li><a class="nav-link u-fullscreen__submenu-list-link" href="../pages/signup.html">Signup</a></li>
                                          <li><a class="nav-link u-fullscreen__submenu-list-link" href="../pages/recover-account.html">Recover Account</a></li>
                                          <li><a class="nav-link u-fullscreen__submenu-list-link" href="../pages/login-simple.html">Login Simple</a></li>
                                          <li><a class="nav-link u-fullscreen__submenu-list-link" href="../pages/signup-simple.html">Signup Simple</a></li>
                                          <li><a class="nav-link u-fullscreen__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-fullscreen__submenu">
                                        <a class="u-fullscreen__submenu-nav-link" role="button" href="#pagesContactsCollapse" data-toggle="collapse" aria-expanded="false" aria-controls="pagesContactsCollapse">
                                          Contacts
                                        </a>

                                        <ul id="pagesContactsCollapse" class="collapse u-fullscreen__submenu-list" data-parent="#fullscreenNav">
                                          <li><a class="nav-link u-fullscreen__submenu-list-link" href="../pages/contacts-agency.html">Contacts Agency</a></li>
                                          <li><a class="nav-link u-fullscreen__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-fullscreen__submenu">
                                        <a class="u-fullscreen__submenu-nav-link" role="button" href="#pagesResourcesCollapse" data-toggle="collapse" aria-expanded="false" aria-controls="pagesResourcesCollapse">
                                          Resources
                                        </a>

                                        <ul id="pagesResourcesCollapse" class="collapse u-fullscreen__submenu-list" data-parent="#fullscreenNav">
                                          <li><a class="nav-link u-fullscreen__submenu-list-link" href="../pages/help.html">Help</a></li>
                                          <li><a class="nav-link u-fullscreen__submenu-list-link" href="../pages/help-article.html">Help article</a></li>
                                          <li><a class="nav-link u-fullscreen__submenu-list-link" href="../pages/faq.html">FAQ</a></li>
                                          <li><a class="nav-link u-fullscreen__submenu-list-link" href="../pages/customers.html">Customers</a></li>
                                          <li><a class="nav-link u-fullscreen__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-fullscreen__submenu">
                                        <a class="u-fullscreen__submenu-nav-link" role="button" href="#pagesUtilitiesCollapse" data-toggle="collapse" aria-expanded="false" aria-controls="pagesUtilitiesCollapse">
                                          Utilities
                                        </a>

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

                                      <!-- Page - Specialty -->
                                      <li class="u-has-submenu u-fullscreen__submenu">
                                        <a class="u-fullscreen__submenu-nav-link" role="button" href="#pagesSpecialtyCollapse" data-toggle="collapse" aria-expanded="false" aria-controls="pagesSpecialtyCollapse">
                                          Specialty
                                        </a>

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

                                  <!-- Blog -->
                                  <li class="u-has-submenu u-fullscreen__submenu">
                                    <a class="u-fullscreen__nav-link" href="#blogCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="blogCollapse">
                                      Blog
                                    </a>

                                    <ul id="blogCollapse" class="collapse u-fullscreen__nav-list"
                                        data-parent="#fullscreenWrapper">
                                      <!-- Blog - Classic -->
                                      <li class="u-has-submenu u-fullscreen__submenu">
                                        <a class="u-fullscreen__submenu-nav-link" role="button" href="#blogClassicCollapse" data-toggle="collapse" aria-expanded="false" aria-controls="blogClassicCollapse">
                                          Classic
                                        </a>

                                        <ul id="blogClassicCollapse" class="collapse u-fullscreen__submenu-list" data-parent="#fullscreenNav">
                                          <li><a class="nav-link u-fullscreen__submenu-list-link" href="../blog/classic-left-sidebar.html">Left Sidebar</a></li>
                                          <li><a class="nav-link u-fullscreen__submenu-list-link" href="../blog/classic-right-sidebar.html">Right Sidebar</a></li>
                                          <li><a class="nav-link u-fullscreen__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-fullscreen__submenu">
                                        <a class="u-fullscreen__submenu-nav-link" role="button" href="#blogGridCollapse" data-toggle="collapse" aria-expanded="false" aria-controls="blogGridCollapse">
                                          Grid
                                        </a>

                                        <ul id="blogGridCollapse" class="collapse u-fullscreen__submenu-list" data-parent="#fullscreenNav">
                                          <li><a class="nav-link u-fullscreen__submenu-list-link" href="../blog/grid-left-sidebar.html">Left Sidebar</a></li>
                                          <li><a class="nav-link u-fullscreen__submenu-list-link" href="../blog/grid-right-sidebar.html">Right Sidebar</a></li>
                                          <li><a class="nav-link u-fullscreen__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-fullscreen__submenu">
                                        <a class="u-fullscreen__submenu-nav-link" role="button" href="#blogListCollapse" data-toggle="collapse" aria-expanded="false" aria-controls="blogListCollapse">
                                          List
                                        </a>

                                        <ul id="blogListCollapse" class="collapse u-fullscreen__submenu-list" data-parent="#fullscreenNav">
                                          <li><a class="nav-link u-fullscreen__submenu-list-link" href="../blog/list-left-sidebar.html">Left Sidebar</a></li>
                                          <li><a class="nav-link u-fullscreen__submenu-list-link" href="../blog/list-right-sidebar.html">Right Sidebar</a></li>
                                          <li><a class="nav-link u-fullscreen__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-fullscreen__submenu">
                                        <a class="u-fullscreen__submenu-nav-link" role="button" href="#blogModernCollapse" data-toggle="collapse" aria-expanded="false" aria-controls="blogModernCollapse">
                                          Modern
                                        </a>

                                        <ul id="blogModernCollapse" class="collapse u-fullscreen__submenu-list" data-parent="#fullscreenNav">
                                          <li><a class="nav-link u-fullscreen__submenu-list-link" href="../blog/modern-left-sidebar.html">Left Sidebar</a></li>
                                          <li><a class="nav-link u-fullscreen__submenu-list-link" href="../blog/modern-right-sidebar.html">Right Sidebar</a></li>
                                          <li><a class="nav-link u-fullscreen__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-fullscreen__submenu">
                                        <a class="u-fullscreen__submenu-nav-link" role="button" href="#blogMasonryCollapse" data-toggle="collapse" aria-expanded="false" aria-controls="blogMasonryCollapse">
                                          Masonry
                                        </a>

                                        <ul id="blogMasonryCollapse" class="collapse u-fullscreen__submenu-list" data-parent="#fullscreenNav">
                                          <li><a class="nav-link u-fullscreen__submenu-list-link" href="../blog/masonry-left-sidebar.html">Left Sidebar</a></li>
                                          <li><a class="nav-link u-fullscreen__submenu-list-link" href="../blog/masonry-right-sidebar.html">Right Sidebar</a></li>
                                          <li><a class="nav-link u-fullscreen__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-fullscreen__submenu">
                                        <a class="u-fullscreen__submenu-nav-link" role="button" href="#blogSingleArticleCollapse" data-toggle="collapse" aria-expanded="false" aria-controls="blogSingleArticleCollapse">
                                          Single Article
                                        </a>

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

                                  <!-- Shop Section -->
                                  <li class="u-has-submenu u-fullscreen__submenu">
                                    <a class="u-fullscreen__nav-link" href="#shopCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="shopCollapse">
                                      Shop
                                    </a>

                                    <ul id="shopCollapse" class="collapse u-fullscreen__nav-list" data-parent="#fullscreenWrapper">
                                      <li><a class="nav-link u-fullscreen__submenu-list-link" href="../shop/classic.html">Classic</a></li>
                                      <li><a class="nav-link u-fullscreen__submenu-list-link" href="../shop/masonry.html">Masonry</a></li>
                                      <li><a class="nav-link u-fullscreen__submenu-list-link" href="../shop/single-product.html">Single Product</a></li>
                                      <li><a class="nav-link u-fullscreen__submenu-list-link" href="../shop/cart.html">Cart</a></li>
                                      <li><a class="nav-link u-fullscreen__submenu-list-link" href="../shop/checkout.html">Checkout</a></li>
                                    </ul>
                                  </li>
                                  <!-- End Shop Section -->

                                  <!-- Demos -->
                                  <li class="u-has-submenu u-fullscreen__submenu">
                                    <a class="u-fullscreen__nav-link" href="#demosCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="demosCollapse">
                                      Demos
                                    </a>

                                    <ul id="demosCollapse" class="collapse u-fullscreen__nav-list" data-parent="#fullscreenWrapper">
                                      <li><a class="nav-link u-fullscreen__submenu-list-link" href="../house/index.html">House</a></li>
                                      <li><a class="nav-link u-fullscreen__submenu-list-link" href="../job/index.html">Job</a></li>
                                      <li><a class="nav-link u-fullscreen__submenu-list-link" href="../crypto/index.html">Crypto Landing</a></li>
                                    </ul>
                                  </li>
                                  <!-- End Demos -->

                                  <!-- Docs Section -->
                                  <li class="u-has-submenu u-fullscreen__submenu">
                                    <a class="u-fullscreen__nav-link" href="#docsCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="docsCollapse">
                                      Docs
                                    </a>

                                    <ul id="docsCollapse" class="collapse u-fullscreen__nav-list" data-parent="#fullscreenWrapper">
                                      <li><a class="nav-link u-fullscreen__submenu-list-link" href="../../documentation/index.html">Documentation</a></li>
                                      <li><a class="nav-link u-fullscreen__submenu-list-link" href="../index.html">Get started</a></li>
                                    </ul>
                                  </li>
                                  <!-- End Docs Section -->
                                </ul>
                                <!-- End List -->
                              </div>

                              <div class="col-md-4 d-none d-md-inline-block">
                                <!-- Address -->
                                <div class="mb-7">
                                  <span class="d-block text-white font-weight-semi-bold mb-3">Address</span>

                                  <address class="mb-0">
                                    <span class="d-block text-white-70 mb-1">+1 (062) 109-9222</span>
                                    <span class="d-block text-white-70 mb-1">support@htmlstream.com</span>
                                    <span class="d-block text-white-70 mb-1">153 Williamson Plaza, Maggieberg, MT 09514</span>
                                  </address>
                                </div>
                                <!-- End Address -->

                                <!-- Social Networks -->
                                <span class="d-block text-white font-weight-semi-bold mb-3">Social</span>

                                <ul class="list-inline mb-0">
                                  <li class="list-inline-item">
                                    <a class="btn btn-sm btn-icon btn-soft-light rounded-circle" href="#">
                                      <span class="fab fa-facebook-f btn-icon__inner"></span>
                                    </a>
                                  </li>
                                  <li class="list-inline-item">
                                    <a class="btn btn-sm btn-icon btn-soft-light rounded-circle" href="#">
                                      <span class="fab fa-google btn-icon__inner"></span>
                                    </a>
                                  </li>
                                  <li class="list-inline-item">
                                    <a class="btn btn-sm btn-icon btn-soft-light rounded-circle" href="#">
                                      <span class="fab fa-twitter btn-icon__inner"></span>
                                    </a>
                                  </li>
                                  <li class="list-inline-item">
                                    <a class="btn btn-sm btn-icon btn-soft-light rounded-circle" href="#">
                                      <span class="fab fa-github btn-icon__inner"></span>
                                    </a>
                                  </li>
                                </ul>
                                <!-- End Social Networks -->
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End Navigation -->
                    </div>
                  </div>
                </header>
                <!-- ========== END HEADER ========== -->
              
            
              
                <link rel="stylesheet" href="../../assets/vendor/font-awesome/css/fontawesome-all.min.css">
              
            
              
                <!-- JS Front -->
                <script src="../../assets/js/components/hs.hamburgers.js"></script>
                <script src="../../assets/js/components/hs.header-fullscreen.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  $(document).on('ready', function () {
                    // initialization of hamburgers
                    $.HSCore.components.HSHeaderFullscreen.init($('#fullscreen'));
                    $.HSCore.components.HSHamburgers.init('#hamburgerTrigger', {
                      afterClose: function() {
                        $('.collapse.show').trigger('click');
                      }
                    });

                    // Navbar collapse closing on 'ESC' keyboard and 'close' hamburger button
                    $('#headerToggler').on('click', function(e) {
                      $('#fullscreenNav .collapse').collapse('hide');
                    });

                    $(document).on('keydown', function (e) {
                      if (e.keyCode && e.keyCode === 27) {
                        $('#fullscreenNav .collapse').collapse('hide');
                      }
                    });
                  });
                </script>