<div class="off-canvas-wrap" data-offcanvas>
			<div class="fixed off-canvas-fixed">
				<nav class="tab-bar hide-for-large-up" id="nav-bg-small">
				 	<section class="left tab-bar-section"><img href="index.html" src="img/Beehivr-logo-white.svg" alt="Beehivr Logo" width="150px"></section>
					<section class="right-small">
						<a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
					</section>
					<div class="lang-switcher">
						<a href="#" onclick="this.href=this.href.replace('/fr/','/en/')">Fr</a>
					</div>
				</nav>
				<aside class="right-off-canvas-menu hide-for-large-up">
					<ul class="off-canvas-list">
					  <li><a href="index.html">home</a></li>
					  <li><a href="#">tour</a></li>
					  <li class="has-dropdown"><a>platform</a>
					  	<ul class="off-canvas-list">
						  	<li><a href="#">Who Benefits</a></li>
						  	<li><a href="#">Use Cases</a></li>
					  	</ul>
					  </li>
					  <li><a href="#">design studio</a></li>
					  <li><a href="company.html">company</a></li>
					  <li><a href="#">blog</a></li>
					</ul>
				</aside>
			</div>

		<div class="inner-wrap">
			<a class="exit-off-canvas hide-for-large-up"></a>

			<div class="contain-to-grid fixed">
				<div class="lang-switcher hide-for-medium-down">
					<a href="#" onclick="this.href=this.href.replace('/fr/','/en/')">Fr</a>
				</div>
				<nav class="top-bar hide-for-medium-down" data-topbar>
				<div class="nav-bg"></div>
					<ul class="title-area">
					    <li class="name">
					      <a href="index.html"><img src="img/Beehivr-logo-white.svg" alt="Beehivr Logo" width="150px" ></a>
					    </li>
					</ul>
					<section class="top-bar-section">
						<ul class="right">
						  <li><a href="index.html">home</a></li>
						  <li><a href="#">tour</a></li>
						  <li class="has-dropdown not-click">
						  	<a href="#">platform</a>
						  	<ul class="dropdown">
							  	<li><a href="#">Who Benefits</a></li>
							  	<li><a href="#">Use Cases</a></li>
						  	</ul>
						  </li>
						  <li><a href="#">design studio</a></li>
						  <li><a href="company.html">company</a></li>
						  <li><a href="#">blog</a></li>
						  <li><a class="small button round" id="request-top" href="#">request a demo</a></li>
						</ul>
					</section>
				</nav>
			</div>
			
			<!-- ****CONTENT**** -->
			
			<section class="main-section">
            
                <!--STUFF-->
                
			</section> <!-- End Main-section stuff -->
		</div><!-- End Inner wrap -->
		</div><!-- End Off-Canvas-wrap -->

/* Off canvas styling*/

.tab-bar{
    height: 5.188rem;
	line-height: 3.5rem;
	background: none;
}

.tab-bar-section{
	height: 5rem;
	padding: 0 0.875em;
}

.right-small{
	border-left: none;
	padding-top: 1.3em;
	width: 4em;
	height: 4em;
}

.left.tab-bar-section img{
	margin-left: 0.1875em;
	margin-top: 1.25em;
}

.move-left .exit-off-canvas{
	background: rgba(21,21,21,0.3);
}

ul.off-canvas-list li a{
	border-bottom: none;
	padding: 1.5rem;
	border-bottom: none;
	text-transform: capitalize;
}

ul-off-canvas-list a:hover {
	font-weight: 300;
}

/* OFF-CANVAS-FIXED FIX */

.off-canvas-fixed {
  -webkit-transition: -webkit-transform 500ms ease;
  transition: transform 500ms ease;
}

.move-left > .off-canvas-fixed {
  height: 100%;
  -webkit-transform: translate3d(-15.625rem, 0, 0);
  transform: translate3d(-15.625rem, 0, 0);
}

.right-off-canvas-menu {
  -webkit-transform: none;
  transform: none;
  margin-right: -15.625rem;
  height: 100vh;
  background: rgba(21,21,21,1);
}