<!-- ========== HEADER ========== -->
<header id="header" class="header header-bg-transparent header-abs-top py-3">
<div class="header-section navbar-expand">
<div id="logoAndNav" class="container px-3">
<!-- Nav -->
<nav class="navbar">
<!-- Logo -->
<a class="navbar-brand" href="#" aria-label="Front">
<img src="../../assets/svg/logos/logo.svg" alt="Logo">
</a>
<!-- End Logo -->
<!-- Fullscreen Toggle Button -->
<button id="headerToggler" type="button" class="navbar-toggler fullscreen-toggler btn btn-icon btn-sm btn-soft-secondary rounded-circle"
aria-label="Toggle navigation"
aria-expanded="false"
data-toggle="button"
aria-controls="headerFullscreen"
data-target="#headerFullscreen">
<span class="navbar-toggler-default">
<svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M17.4,6.2H0.6C0.3,6.2,0,5.9,0,5.5V4.1c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,5.9,17.7,6.2,17.4,6.2z M17.4,14.1H0.6c-0.3,0-0.6-0.3-0.6-0.7V12c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,13.7,17.7,14.1,17.4,14.1z"/>
</svg>
</span>
<span class="navbar-toggler-toggled">
<svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
</svg>
</span>
</button>
<!-- End Fullscreen Toggle Button -->
</nav>
<!-- End Nav -->
<!-- Navigation -->
<div id="headerFullscreen" class="fullscreen"
data-hs-header-fullscreen-options='{
"overlayClass": "fullscreen-overlay"
}'
aria-labelledby="headerToggler">
<div class="fullscreen-container">
<div class="container">
<div class="fullscreen-body">
<div class="row justify-content-md-between align-items-center">
<div id="fullscreenWrapper" class="col-md-6">
<!-- List -->
<ul id="fullscreenNav" class="fullscreen-nav">
<!-- Home Section -->
<li class="u-has-submenu fullscreen-submenu">
<a class="fullscreen-nav-link" href="#homeCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="homeCollapse">
Home
</a>
<ul id="homeCollapse" class="collapse fullscreen-nav-list" data-parent="#fullscreenWrapper">
<!-- Home - Classic -->
<li class="u-has-submenu fullscreen-submenu">
<a class="fullscreen-submenu-nav-link" href="#homeClassicSubNavCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="homeClassicSubNavCollapse">
Classic
</a>
<ul id="homeClassicSubNavCollapse" class="collapse fullscreen-submenu-list" data-parent="#fullscreenNav">
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Agency</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Analytics</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Studio</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Marketing</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Advertisement</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Consulting</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Portfolio</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Software</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Business</a></li>
</ul>
</li>
<!-- End Home - Classic -->
<!-- Home - App -->
<li class="u-has-submenu fullscreen-submenu">
<a class="fullscreen-submenu-nav-link" href="#homeAppSubNavCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="homeAppSubNavCollapse">
App
</a>
<ul id="homeAppSubNavCollapse" class="collapse fullscreen-submenu-list" data-parent="#fullscreenNav">
<li><a class="nav-link fullscreen-submenu-list-link" href="#-kit.html">UI Kit</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">App SaaS</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">App Workflow</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">App Payment</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">App Tool</a></li>
</ul>
</li>
<!-- End Home - App -->
<!-- Home - Onepages -->
<li class="u-has-submenu fullscreen-submenu">
<a class="fullscreen-submenu-nav-link" href="#homeOnepagesSubNavCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="homeOnepagesSubNavCollapse">
Onepages
</a>
<ul id="homeOnepagesSubNavCollapse" class="collapse fullscreen-submenu-list" data-parent="#fullscreenNav">
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Corporate</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">SaaS</a></li>
</ul>
</li>
<!-- End Home - Onepages -->
</ul>
</li>
<!-- End Home Section -->
<!-- Page Section -->
<li class="u-has-submenu fullscreen-submenu">
<a class="fullscreen-nav-link" href="#pagesCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="pagesCollapse">
Pages
</a>
<ul id="pagesCollapse" class="collapse fullscreen-nav-list"
data-parent="#fullscreenWrapper">
<!-- Page - Company -->
<li class="u-has-submenu fullscreen-submenu">
<a class="fullscreen-submenu-nav-link" role="button" href="#pagesCompanyCollapse" data-toggle="collapse" aria-expanded="false" aria-controls="pagesCompanyCollapse">
Company
</a>
<ul id="pagesCompanyCollapse" class="collapse fullscreen-submenu-list" data-parent="#fullscreenNav">
<li><a class="nav-link fullscreen-submenu-list-link" href="#">About Agency</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Services Agency</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Customers</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Customer story</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Careers</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Careers Single</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Hire Us</a></li>
</ul>
</li>
<!-- End Page - Company -->
<!-- Page - Portfolio -->
<li class="u-has-submenu fullscreen-submenu">
<a class="fullscreen-submenu-nav-link" role="button" href="#pagesPortfolioCollapse" data-toggle="collapse" aria-expanded="false" aria-controls="pagesPortfolioCollapse">
Portfolio
</a>
<ul id="pagesPortfolioCollapse" class="collapse fullscreen-submenu-list" data-parent="#fullscreenNav">
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Grid</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Masonry</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Modern</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#-branding.html">Case Studies Branding</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#-product.html">Case Studies Product</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#-list.html">Single Page List</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#-grid.html">Single Page Grid</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#-masonry.html">Single Page Masonry</a></li>
</ul>
</li>
<!-- End Page - Portfolio -->
<!-- Page - Login -->
<li class="u-has-submenu fullscreen-submenu">
<a class="fullscreen-submenu-nav-link" role="button" href="#pagesLoginCollapse" data-toggle="collapse" aria-expanded="false" aria-controls="pagesLoginCollapse">
Login
</a>
<ul id="pagesLoginCollapse" class="collapse fullscreen-submenu-list" data-parent="#fullscreenNav">
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Login</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Signup</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Recover Account</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Login Simple</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Signup Simple</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#-simple.html">Recover Account Simple</a></li>
</ul>
</li>
<!-- End Page - Login -->
<!-- Page - Contacts -->
<li class="u-has-submenu fullscreen-submenu">
<a class="fullscreen-submenu-nav-link" role="button" href="#pagesContactsCollapse" data-toggle="collapse" aria-expanded="false" aria-controls="pagesContactsCollapse">
Contacts
</a>
<ul id="pagesContactsCollapse" class="collapse fullscreen-submenu-list" data-parent="#fullscreenNav">
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Contacts Agency</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#-up.html">Contacts Start-Up</a></li>
</ul>
</li>
<!-- End Page - Contacts -->
<!-- Page - Utilities -->
<li class="u-has-submenu fullscreen-submenu">
<a class="fullscreen-submenu-nav-link" role="button" href="#pagesUtilitiesCollapse" data-toggle="collapse" aria-expanded="false" aria-controls="pagesUtilitiesCollapse">
Utilities
</a>
<ul id="pagesUtilitiesCollapse" class="collapse fullscreen-submenu-list" data-parent="#fullscreenNav">
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Pricing</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">FAQ</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Terms & Conditions</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Privacy & Policy</a></li>
</ul>
</li>
<!-- End Page - Utilities -->
<!-- Page - Specialty -->
<li class="u-has-submenu fullscreen-submenu">
<a class="fullscreen-submenu-nav-link" role="button" href="#pagesSpecialtyCollapse" data-toggle="collapse" aria-expanded="false" aria-controls="pagesSpecialtyCollapse">
Specialty
</a>
<ul id="pagesSpecialtyCollapse" class="collapse fullscreen-submenu-list" data-parent="#fullscreenNav">
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Cover Page</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Coming Soon</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Maintenance Mode</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Status</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Invoice</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Error 404</a></li>
</ul>
</li>
<!-- End Page - Specialty -->
</ul>
</li>
<!-- End Page Section -->
<!-- Blog -->
<li class="u-has-submenu fullscreen-submenu">
<a class="fullscreen-nav-link" href="#blogCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="blogCollapse">
Blog
</a>
<ul id="blogCollapse" class="collapse fullscreen-nav-list" data-parent="#fullscreenWrapper">
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Journal</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Metro</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Newsroom</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Blog Profile</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Single Article</a></li>
</ul>
</li>
<!-- End Blog -->
<!-- Shop Section -->
<li class="u-has-submenu fullscreen-submenu">
<a class="fullscreen-nav-link" href="#shopCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="shopCollapse">
Shop
</a>
<ul id="shopCollapse" class="collapse fullscreen-nav-list" data-parent="#fullscreenWrapper">
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Classic</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Categories</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Categories Sidebar</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Products Grid</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Products List</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Single Product</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Empty Cart</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Cart</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Checkout</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Order Completed</a></li>
</ul>
</li>
<!-- End Shop Section -->
<!-- Demos -->
<li class="u-has-submenu fullscreen-submenu">
<a class="fullscreen-nav-link" href="#demosCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="demosCollapse">
Demos
</a>
<ul id="demosCollapse" class="collapse fullscreen-nav-list" data-parent="#fullscreenWrapper">
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Course</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">App Marketplace</a></li>
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Help Desk</a></li>
<li><a class="nav-link fullscreen-submenu-list-link disabled" href="javascript:;">Account</a></li>
<li><a class="nav-link fullscreen-submenu-list-link disabled" href="javascript:;">Job</a></li>
<li><a class="nav-link fullscreen-submenu-list-link disabled" href="javascript:;">House</a></li>
</ul>
</li>
<!-- End Demos -->
<!-- Docs Section -->
<li class="u-has-submenu fullscreen-submenu">
<a class="fullscreen-nav-link" href="#docsCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="docsCollapse">
Docs
</a>
<ul id="docsCollapse" class="collapse fullscreen-nav-list" data-parent="#fullscreenWrapper">
<li><a class="nav-link fullscreen-submenu-list-link" href="#">Documentation</a></li>
<li><a class="nav-link fullscreen-submenu-list-link disabled" href="../../snippets/index.html">Snippets</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-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">hello@example.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-bold mb-3">Social</span>
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a class="btn btn-xs btn-icon btn-soft-light rounded-circle" href="#">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-xs btn-icon btn-soft-light rounded-circle" href="#">
<i class="fab fa-google"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-xs btn-icon btn-soft-light rounded-circle" href="#">
<i class="fab fa-twitter"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-xs btn-icon btn-soft-light rounded-circle" href="#">
<i class="fab fa-github"></i>
</a>
</li>
</ul>
<!-- End Social Networks -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Navigation -->
</div>
</div>
</header>
<!-- ========== END HEADER ========== -->
<link rel="stylesheet" href="../../assets/vendor/font-awesome/css/all.min.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/hs-header-fullscreen/dist/hs-header-fullscreen.min.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of header fullscreen
var headerFullscreen = new HSHeaderFullscreen($('#headerFullscreen')).init();
$(document).on('keydown', function (e) {
if (e.keyCode && e.keyCode === 27) {
$('[aria-pressed]').attr('aria-pressed', false).removeClass('active focus');
$('#fullscreenNav .collapse').collapse('hide');
}
});
});
</script>