Search code examples
javascriptjqueryhtmlcssgsap

Menu is not closing on click

I have a menu on click will launch an animation using TimelineMax. When I click the menu it launches the menu and animation correctly. Even on close the animation fires correctly. However, I noticed when the animation is completed and the menu is "hidden" the menu is not actually hidden and it overlays the website. When this happens any links on the page are un clickable because the menu structure is covering it. For an example I removed the animation from two panels with the animation still present on everything else.You will see when you load the jsfiddle you do not see any links except the menu button. Once clicking the menu button the menu is displayed. When you close it you will see Contact and follow are still present. However, the other buttons even though you can not see them are still present.

I have tried a few variations of when you click the menu that has a class of opened hide nav container, but that does not work. SO based on my code is there away I the menu is no longer visible on close.

UPDATE Nav-link controls the animation but for showing you want I mean I removed the nav-link and placed nav-link1.

$(document).ready(function(Circ) {
	"use strict";
	$('.nav-container').addClass('hidden');
	var blocks = $('.block-reveal'),
		menuButton = $('.hamburger'),
		menuLinks = $('.nav-link');
	var blockAnimation = new TimelineMax({
		paused: true,
		reversed: true
	});
	blockAnimation.staggerTo(blocks, 0.4, {
		width: '100%',
		ease: Circ.easeInOut
	}, 0.08).staggerFromTo(menuLinks, 0.7, {
		y: 20,
		autoAlpha: 0,
		ease: Circ.easeInOut
	}, {
		y: 0,
		autoAlpha: 1
	}, 0.1);
	menuButton.click(function() {
		blockAnimation.reversed() ? blockAnimation.play() : blockAnimation.reverse();
		$('.hamburger').toggleClass('opened');
		$("a.header-logo").toggleClass('header-logo-open');
        $(".start-project").toggleClass('start-project-black');
		$('.header-logo-open').fadeIn(1000);
		$('.nav-container').removeClass('hidden'); 
					 
	});
	
	
});
/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
html {
	box-sizing: border-box;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

body {
	background: #FFF;
}

blockquote, q {
	quotes: "" "";
}

blockquote:before, blockquote:after, q:before, q:after {
	content: "";
}



/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
	content: "";
	display: table;
	table-layout: fixed;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
	clear: both;
}


/*HEADER / MENU
--------------------------------------------------------------------------------------------------------------
============================================================================================================*/

.main-header .header-logo {
	float: left
}
.main-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	padding: 30px;
	z-index: 100;
	


}
.header-logo {
	display: block;
	float: left;
	width: 150px;
	height: 100px;
	overflow: hidden;
	text-indent: -9999em;
	pointer-events: auto;
}
a.header-logo {
	background: url(lib/img/fe-logo.svg) no-repeat;
}
a.header-logo-open {
	background: url(lib/img/fe-logo-black.svg) no-repeat;
	display: none;
}



a.start-project {position: absolute; right: 6%; color: #FFF; text-decoration: none; font-size: .9em}
a.start-project-black {position: absolute; right: 6%; color: #000; text-decoration: none; font-size: .9em}

nav {
	width: 100vw;
	z-index: 90;
	position: relative;
}
.menu {
	background: #FFF;
	position: fixed;
	padding: 20px 30px;
	top: 50px;
	right: 20px;
	z-index: 100;
}

.block-reveal {
	background:rgba(255,255,255,1.00);
	height: 100vh;
	position: fixed;
}
#block__01 {
	right: 0%;
}

.nav-container {
	position: fixed;
	width: 80%;
	left: 10%;
	top: 20%;
	text-align: left;
}
ul.main-menu {width:60%}
ul.main-menu, ul.small-menu {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
ul.small-menu {
	margin-top: 1em;
	width: 80%;
}

p.follow_title {
	color: #262626;
	margin-top: .4em;
}

@media (max-width:800px){ul.small-menu {width: 100%;}p.follow_title {margin-top: .2em;}}

ul.main-menu li {
	font-size: 6em;
	line-height: .9em
}

@media (max-height:800px){.nav-container {top: 15%;}ul.main-menu li {font-size: 4em;}}
@media (max-width:800px) {.nav-container {top: 30%;}ul.main-menu li {font-size: 4em;}}

ul.main-menu li a {
	font-weight: 800;
	color: #101317;
	text-transform: uppercase;
	text-decoration: none
}

ul.main-menu li a:before{
	content: '';
	width: 0%;
	height: 15px;
	background: #101317;
	position: absolute;
	top: 40px;
	left: -5px;
	transition-timing-function: cubic-bezier(.8,.09,1,.44);
	transition-delay: 400ms;
	transition: all 600ms cubic-bezier(1, 0, 0, 1) 0ms;
}

ul.main-menu li a:hover:before{
	content: '';
	width: 100%;
	height: 15px;
	position: absolute;
	top: 40px;
	left: -5px;
	z-index: -1;
}

@media (max-height:800px){ul.main-menu li a:before{top: 25px;}ul.main-menu li a:hover:before{top: 25px;}}















.project-thumb {
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin: 1px;
  width: 32%;
	height: 200px;
  background-color: #000000;
  color: #ffffff;
  text-align: left;
}
.project-thumb * {
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.project-thumb img {
  max-width: 100%;
	width: 100%;
  vertical-align: top;
}
.project-thumb div {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.project-thumb h4 {
  font-size: 1.3em;
	text-transform: uppercase;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 1px;
  margin: 3px 0;
}

.project-thumb a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.project-thumb:hover img,
.project-thumb.hover img {
  -webkit-transform: scale(1.3) rotate(5deg);
  transform: scale(1.3) rotate(5deg);
}













ul.small-menu li a:hover, ul.project-menu li a:hover {
	color: #f15c57;
}
ul.small-menu li {
	float: left;
	padding-right: .8em;
}
ul.small-menu li a {
	text-decoration: none;
	color: #4e4d4d;
	font-size: 2em;
}
ul.project-menu {
	padding-top: 2em;
	margin: 0;
	position: fixed;
	bottom: 0;
	width: 80%
}
@media (max-height:600px){ul.project-menu {display: none}}

@media (max-width:800px){ul.project-menu {display: none}}

ul.project-menu li {
	list-style: none;
	padding-bottom: .6em
}
ul.project-menu p {font-size: 1.3em; font-weight: 900;}



#particle-canvas {
  width: 100%;
  height: 100%;
}

ul.project-menu li a {
	text-decoration: none;
	color: #4e4d4d;
}
.hamburger {
	width: 30px;
	height: 45px;
	position: absolute;
	right: 3%;
	margin-left: -25px;
	top: 34%;
	margin-top: -22.5px;
	cursor: pointer;
}
.hamburger span {
	display: block;
	position: absolute;
	height: 1px;
	width: 100%;
	background: #FFF none repeat scroll 0% 0%;
	opacity: 1;
	right: 0px;
	transition: all 0.25s ease-in-out 0s;
	transform: rotate(0deg);
}
.hamburger span:nth-child(1) {
	margin-top: 0px;
}
.hamburger span:nth-child(2) {
	margin-top: 8px;
	margin-right: 0px;
}
.hamburger span:nth-child(3) {
	margin-top: 16px;
}
.hamburger.opened span:nth-child(1) {
	transform: rotate(135deg);
	margin-top: 16px;
}
.hamburger.opened span:nth-child(2) {
	opacity: 0;
	right: -75px;
}
.hamburger.opened span:nth-child(3) {
	transform: rotate(-135deg);
	margin-top: 16px;
}
.hamburger.opened span {
	background: #f15c57 none repeat scroll 0% 0%;
}



.icon
 {
 width: 45px;
	 height: 45px;
	 display: block;
    margin: 0 auto
}
@media (max-width:800px){.icon
 {
 width: 35px;
	 height: 35px;
	 display: block;
    margin: 0 auto
}}

.icon-facebook,
.icon-twitter,
.icon-linkedin{
  fill: #262626;
}
.icon-facebook {width: 30px}
.icon-facebook :hover {
  fill: #3b5998;
}
.icon-twitter :hover {
  fill: #00acee;
}
.icon-linkedin :hover {
  fill: #007fb2;
}
/*BODY
--------------------------------------------------------------------------------------------------------------
============================================================================================================*/

.right-v {
	position: absolute;
	top: 50%;
	right: 0;
	transform: rotate(90deg);
	transform-origin: left top 0;
	z-index: 1;
}
@media (max-width:800px) {
	.right-v {
		display: none;
	}
}
.lb {
	color: #FFF;
}
.pd {
	font-family: 'Gilda Display', serif;
}
#wwa {
	font-size: .7em;
	text-transform: uppercase
}
.hidden, .show-mobile {
    display: none;
}

/*FOOTER
--------------------------------------------------------------------------------------------------------------
============================================================================================================*/

footer.home-footer {
	position: fixed;
	bottom: 0;
	right: 2%;
	z-index: 1;
}
.bottom-panel {
	color: #FFF;
	font-size: .9em
}
.bottom-panel ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.bottom-panel ul li {
	display: inline-block;
	margin: 0;
}
.call {
	padding-bottom: .5em;
}
li.social a {
	border-bottom: 4px solid #FFF;
	padding: 0 .5em 0em .5em;
	color: #FFF;
	text-decoration: none
}
li.social a:hover {
	border-bottom: 4px solid #f15c57;
}
li.social:nth-child(2) {
	margin-left: 1em !important;
}

/*HOME PANEL
--------------------------------------------------------------------------------------------------------------
============================================================================================================*/

.overlay {background: #101317; position: relative; width: 100%; height: 100vh;}

.container-fluid {
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;

}
.banner-container {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -100;

}



span.left-panel-load {
	position: absolute;
	top: 65%;
	left: 2%;
	transform: rotate(270deg);
	transform-origin: left top 0;
	z-index: 9;
	text-transform: uppercase;
	color: #FFF;
	font-weight: bold;
	font-family: 'Lato', sans-serif;
	font-size: .7em;
	letter-spacing: .1em;
}

.slider-wrapper, .slider-inner {
	position: absolute;
	height: 100%;
	width: 100%;
}

#finalelements {
	background: url(lib/img/home-banner.jpg) no-repeat center center;
	width: 100%;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.slider-content {
	position: relative;
	width: 40%;
	max-width: 500px;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	font-family: 'Lato', sans-serif;
	border-style: solid;
    border-width: 70px;
    border-image: url(lib/img/border.png) 60 round;
}

.slider-content h1, .slider-content h3 {
	font-family: 'Lato', sans-serif;
	text-transform: uppercase;
}

.slider-content h1 {
	font-size: 6em;
	line-height: .8em;
	margin: 0;
	font-weight: 900 !important;
	color: #ef0c33;
	
}

.slider-content h1 strong { color: #FFF;}

.slider-content h3 {font-weight: 300; margin-top: .8em}
.slider-content h3 {
	line-height: .7em;
}
.slider-content p {
	padding-top: 2em;
	width: 90%;
	
}





.slider-content h4 {
	padding-top: 2em;
	font-family: 'Lato', sans-serif;
	text-transform: uppercase;
	font-weight: 100;
}
.distress {
	background: url(lib/img/texture.png);
	width: 95%;
	height: 95%;
	position: absolute;
	top: 0;
}
.red-line {
	width: 25%;
	height: 1px;
	background: #f0625d;
	background: -moz-linear-gradient(left, transparent 0%, #ad1f23 100%);
	background: -webkit-linear-gradient(left, transparent 0%, #ad1f23 100%);
	background: linear-gradient(to right, transparent 0%, #ad1f23 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='transparent', endColorstr='#ad1f23', GradientType=1);
	position: absolute;
	top: 50%;
	margin-left: 1em;
}

@media (max-width:800px) {
	.slider-content, .slider-content p {width: 80%}
	.slider-content h1 { font-size: 5em;}
}





.hp-content {padding: 7em; display: block;}
.hp-inner {width: 60% !important; margin: 0 auto;}
.hp-inner img {width: 20%;}
.hp-inner h2 {line-height: 1em; font-size: 4em;}




.hp-inner h2::after {
	 content:"";
    display: block;
    height: 0.1em;
    vertical-align: bottom;
    width: 20%;
	background: #ef0c33;
	margin: 1em 0 1em 0;
}

.hp-image {background: url(lib/img/capital.jpg)no-repeat center center;
	width: 100%;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;}

.hp-inner ul { list-style: none; margin: 0; padding: 0;}
.hp-inner ul li { display: inline-block; padding: 1em 2em 1em 0;}
.hp-inner ul li p {font-size: .8em;}
.hp-inner ul li a {background: #ef0c33; color: #FFF; text-decoration: none; padding: .6em}


.center {text-align: center}

.dark-bg {background: #e3e3e3; display: block; position: relative; padding: 5em 0 5em 0}


.service-panel h2 {text-align: center; margin-bottom: 1em}

.service-panel h2::after {
	 content:"";
    display: block;
    height: 0.1em;
    vertical-align: bottom;
    width: 10%;
	background: #ef0c33;
	margin: 0 auto;
}
.service-panel p {text-align: center}
.service-panel span {font-weight: 900; font-size: 3em;}
.service-grid {padding: 2em;}
.service-grid h4 {font-weight: 900; font-size: 1.3em}
.service-grid p {font-size: .9em; margin-top: .8em}


.nav-up {
    top: -40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.1/TweenMax.min.js"></script>
<div class="bg">

</div>
<header class="main-header">
		<div class="header-menu">
  			<div class="hamburger">
        <p>Menu</p>
			</div>
		</div>
	</header>
	<nav class="main-nav">
		<div class="block-reveal" id="block__01"></div>
		<div class="nav-container">
			<ul class="main-menu">
				<li class="nav-link"><a href="#">Agency</a></li>
				<li class="nav-link"><a href="#">Work</a></li>
				<li class="nav-link"><a href="#">Services</a></li>
				<li class="nav-link1"><a href="#">Contact</a></li>
			</ul>
			<ul class="small-menu nav-link1">
				<li><p class="follow_title h3">Follow Us</p></li>
				<li><a href="#0"><svg class="icon icon-facebook"><use xlink:href="#facebook"/></svg></a></li>
				<li><a href="#0"><svg class="icon icon-twitter"><use xlink:href="#twitter"/></svg></a></li>
				<li><a href="#0"><svg class="icon icon-linkedin"><use xlink:href="#linkedin"/></svg></a></li>
			</ul>
			
		</div>
	</nav>
</div>

https://jsfiddle.net/e8oyoLhv/37/

Solution

  • add blockAnimation.eventCallback on onReverseComplete and hide nav on callback

    $(document).ready(function(Circ) {
	"use strict";
	$('.nav-container').addClass('hidden');
	var blocks = $('.block-reveal'),
		menuButton = $('.hamburger'),
		menuLinks = $('.nav-link');
	var blockAnimation = new TimelineMax({
		paused: true,
		reversed: true
	});
	blockAnimation.staggerTo(blocks, 0.4, {
		width: '100%',
		ease: Circ.easeInOut
	}, 0.08).staggerFromTo(menuLinks, 0.7, {
		y: 20,
		autoAlpha: 0,
		ease: Circ.easeInOut
	}, {
		y: 0,
		autoAlpha: 1
	}, 0.1);
	menuButton.click(function() {
		blockAnimation.reversed() ? blockAnimation.play() : blockAnimation.reverse();
		$('.hamburger').toggleClass('opened');
		$("a.header-logo").toggleClass('header-logo-open');
        $(".start-project").toggleClass('start-project-black');
		$('.header-logo-open').fadeIn(1000);
    $('.nav-container').removeClass('hidden');
	  
	});
	blockAnimation.eventCallback("onReverseComplete", function(e){
    $('.nav-container').addClass('hidden');
  });
	
});
    /*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
html {
	box-sizing: border-box;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

body {
	background: #FFF;
}

blockquote, q {
	quotes: "" "";
}

blockquote:before, blockquote:after, q:before, q:after {
	content: "";
}



/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
	content: "";
	display: table;
	table-layout: fixed;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
	clear: both;
}


/*HEADER / MENU
--------------------------------------------------------------------------------------------------------------
============================================================================================================*/

.main-header .header-logo {
	float: left
}
.main-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	padding: 30px;
	z-index: 100;
	


}
.header-logo {
	display: block;
	float: left;
	width: 150px;
	height: 100px;
	overflow: hidden;
	text-indent: -9999em;
	pointer-events: auto;
}
a.header-logo {
	background: url(lib/img/fe-logo.svg) no-repeat;
}
a.header-logo-open {
	background: url(lib/img/fe-logo-black.svg) no-repeat;
	display: none;
}



a.start-project {position: absolute; right: 6%; color: #FFF; text-decoration: none; font-size: .9em}
a.start-project-black {position: absolute; right: 6%; color: #000; text-decoration: none; font-size: .9em}

nav {
	width: 100vw;
	z-index: 90;
	position: relative;
}
.menu {
	background: #FFF;
	position: fixed;
	padding: 20px 30px;
	top: 50px;
	right: 20px;
	z-index: 100;
}

.block-reveal {
	background:rgba(255,255,255,1.00);
	height: 100vh;
	position: fixed;
}
#block__01 {
	right: 0%;
}

.nav-container {
	position: fixed;
	width: 80%;
	left: 10%;
	top: 20%;
	text-align: left;
}
ul.main-menu {width:60%}
ul.main-menu, ul.small-menu {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
ul.small-menu {
	margin-top: 1em;
	width: 80%;
}

p.follow_title {
	color: #262626;
	margin-top: .4em;
}

@media (max-width:800px){ul.small-menu {width: 100%;}p.follow_title {margin-top: .2em;}}

ul.main-menu li {
	font-size: 6em;
	line-height: .9em
}

@media (max-height:800px){.nav-container {top: 15%;}ul.main-menu li {font-size: 4em;}}
@media (max-width:800px) {.nav-container {top: 30%;}ul.main-menu li {font-size: 4em;}}

ul.main-menu li a {
	font-weight: 800;
	color: #101317;
	text-transform: uppercase;
	text-decoration: none
}

ul.main-menu li a:before{
	content: '';
	width: 0%;
	height: 15px;
	background: #101317;
	position: absolute;
	top: 40px;
	left: -5px;
	transition-timing-function: cubic-bezier(.8,.09,1,.44);
	transition-delay: 400ms;
	transition: all 600ms cubic-bezier(1, 0, 0, 1) 0ms;
}

ul.main-menu li a:hover:before{
	content: '';
	width: 100%;
	height: 15px;
	position: absolute;
	top: 40px;
	left: -5px;
	z-index: -1;
}

@media (max-height:800px){ul.main-menu li a:before{top: 25px;}ul.main-menu li a:hover:before{top: 25px;}}















.project-thumb {
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin: 1px;
  width: 32%;
	height: 200px;
  background-color: #000000;
  color: #ffffff;
  text-align: left;
}
.project-thumb * {
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.project-thumb img {
  max-width: 100%;
	width: 100%;
  vertical-align: top;
}
.project-thumb div {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.project-thumb h4 {
  font-size: 1.3em;
	text-transform: uppercase;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 1px;
  margin: 3px 0;
}

.project-thumb a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.project-thumb:hover img,
.project-thumb.hover img {
  -webkit-transform: scale(1.3) rotate(5deg);
  transform: scale(1.3) rotate(5deg);
}













ul.small-menu li a:hover, ul.project-menu li a:hover {
	color: #f15c57;
}
ul.small-menu li {
	float: left;
	padding-right: .8em;
}
ul.small-menu li a {
	text-decoration: none;
	color: #4e4d4d;
	font-size: 2em;
}
ul.project-menu {
	padding-top: 2em;
	margin: 0;
	position: fixed;
	bottom: 0;
	width: 80%
}
@media (max-height:600px){ul.project-menu {display: none}}

@media (max-width:800px){ul.project-menu {display: none}}

ul.project-menu li {
	list-style: none;
	padding-bottom: .6em
}
ul.project-menu p {font-size: 1.3em; font-weight: 900;}



#particle-canvas {
  width: 100%;
  height: 100%;
}

ul.project-menu li a {
	text-decoration: none;
	color: #4e4d4d;
}
.hamburger {
	width: 30px;
	height: 45px;
	position: absolute;
	right: 3%;
	margin-left: -25px;
	top: 34%;
	margin-top: -22.5px;
	cursor: pointer;
}
.hamburger span {
	display: block;
	position: absolute;
	height: 1px;
	width: 100%;
	background: #FFF none repeat scroll 0% 0%;
	opacity: 1;
	right: 0px;
	transition: all 0.25s ease-in-out 0s;
	transform: rotate(0deg);
}
.hamburger span:nth-child(1) {
	margin-top: 0px;
}
.hamburger span:nth-child(2) {
	margin-top: 8px;
	margin-right: 0px;
}
.hamburger span:nth-child(3) {
	margin-top: 16px;
}
.hamburger.opened span:nth-child(1) {
	transform: rotate(135deg);
	margin-top: 16px;
}
.hamburger.opened span:nth-child(2) {
	opacity: 0;
	right: -75px;
}
.hamburger.opened span:nth-child(3) {
	transform: rotate(-135deg);
	margin-top: 16px;
}
.hamburger.opened span {
	background: #f15c57 none repeat scroll 0% 0%;
}



.icon
 {
 width: 45px;
	 height: 45px;
	 display: block;
    margin: 0 auto
}
@media (max-width:800px){.icon
 {
 width: 35px;
	 height: 35px;
	 display: block;
    margin: 0 auto
}}

.icon-facebook,
.icon-twitter,
.icon-linkedin{
  fill: #262626;
}
.icon-facebook {width: 30px}
.icon-facebook :hover {
  fill: #3b5998;
}
.icon-twitter :hover {
  fill: #00acee;
}
.icon-linkedin :hover {
  fill: #007fb2;
}
/*BODY
--------------------------------------------------------------------------------------------------------------
============================================================================================================*/

.right-v {
	position: absolute;
	top: 50%;
	right: 0;
	transform: rotate(90deg);
	transform-origin: left top 0;
	z-index: 1;
}
@media (max-width:800px) {
	.right-v {
		display: none;
	}
}
.lb {
	color: #FFF;
}
.pd {
	font-family: 'Gilda Display', serif;
}
#wwa {
	font-size: .7em;
	text-transform: uppercase
}
.hidden, .show-mobile {
    display: none;
}

/*FOOTER
--------------------------------------------------------------------------------------------------------------
============================================================================================================*/

footer.home-footer {
	position: fixed;
	bottom: 0;
	right: 2%;
	z-index: 1;
}
.bottom-panel {
	color: #FFF;
	font-size: .9em
}
.bottom-panel ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.bottom-panel ul li {
	display: inline-block;
	margin: 0;
}
.call {
	padding-bottom: .5em;
}
li.social a {
	border-bottom: 4px solid #FFF;
	padding: 0 .5em 0em .5em;
	color: #FFF;
	text-decoration: none
}
li.social a:hover {
	border-bottom: 4px solid #f15c57;
}
li.social:nth-child(2) {
	margin-left: 1em !important;
}

/*HOME PANEL
--------------------------------------------------------------------------------------------------------------
============================================================================================================*/

.overlay {background: #101317; position: relative; width: 100%; height: 100vh;}

.container-fluid {
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;

}
.banner-container {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -100;

}



span.left-panel-load {
	position: absolute;
	top: 65%;
	left: 2%;
	transform: rotate(270deg);
	transform-origin: left top 0;
	z-index: 9;
	text-transform: uppercase;
	color: #FFF;
	font-weight: bold;
	font-family: 'Lato', sans-serif;
	font-size: .7em;
	letter-spacing: .1em;
}

.slider-wrapper, .slider-inner {
	position: absolute;
	height: 100%;
	width: 100%;
}

#finalelements {
	background: url(lib/img/home-banner.jpg) no-repeat center center;
	width: 100%;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.slider-content {
	position: relative;
	width: 40%;
	max-width: 500px;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	font-family: 'Lato', sans-serif;
	border-style: solid;
    border-width: 70px;
    border-image: url(lib/img/border.png) 60 round;
}

.slider-content h1, .slider-content h3 {
	font-family: 'Lato', sans-serif;
	text-transform: uppercase;
}

.slider-content h1 {
	font-size: 6em;
	line-height: .8em;
	margin: 0;
	font-weight: 900 !important;
	color: #ef0c33;
	
}

.slider-content h1 strong { color: #FFF;}

.slider-content h3 {font-weight: 300; margin-top: .8em}
.slider-content h3 {
	line-height: .7em;
}
.slider-content p {
	padding-top: 2em;
	width: 90%;
	
}





.slider-content h4 {
	padding-top: 2em;
	font-family: 'Lato', sans-serif;
	text-transform: uppercase;
	font-weight: 100;
}
.distress {
	background: url(lib/img/texture.png);
	width: 95%;
	height: 95%;
	position: absolute;
	top: 0;
}
.red-line {
	width: 25%;
	height: 1px;
	background: #f0625d;
	background: -moz-linear-gradient(left, transparent 0%, #ad1f23 100%);
	background: -webkit-linear-gradient(left, transparent 0%, #ad1f23 100%);
	background: linear-gradient(to right, transparent 0%, #ad1f23 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='transparent', endColorstr='#ad1f23', GradientType=1);
	position: absolute;
	top: 50%;
	margin-left: 1em;
}

@media (max-width:800px) {
	.slider-content, .slider-content p {width: 80%}
	.slider-content h1 { font-size: 5em;}
}





.hp-content {padding: 7em; display: block;}
.hp-inner {width: 60% !important; margin: 0 auto;}
.hp-inner img {width: 20%;}
.hp-inner h2 {line-height: 1em; font-size: 4em;}




.hp-inner h2::after {
	 content:"";
    display: block;
    height: 0.1em;
    vertical-align: bottom;
    width: 20%;
	background: #ef0c33;
	margin: 1em 0 1em 0;
}

.hp-image {background: url(lib/img/capital.jpg)no-repeat center center;
	width: 100%;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;}

.hp-inner ul { list-style: none; margin: 0; padding: 0;}
.hp-inner ul li { display: inline-block; padding: 1em 2em 1em 0;}
.hp-inner ul li p {font-size: .8em;}
.hp-inner ul li a {background: #ef0c33; color: #FFF; text-decoration: none; padding: .6em}


.center {text-align: center}

.dark-bg {background: #e3e3e3; display: block; position: relative; padding: 5em 0 5em 0}


.service-panel h2 {text-align: center; margin-bottom: 1em}

.service-panel h2::after {
	 content:"";
    display: block;
    height: 0.1em;
    vertical-align: bottom;
    width: 10%;
	background: #ef0c33;
	margin: 0 auto;
}
.service-panel p {text-align: center}
.service-panel span {font-weight: 900; font-size: 3em;}
.service-grid {padding: 2em;}
.service-grid h4 {font-weight: 900; font-size: 1.3em}
.service-grid p {font-size: .9em; margin-top: .8em}


.nav-up {
    top: -40px;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.1/TweenMax.min.js"></script>
<div class="bg">

</div>
<header class="main-header">
		<div class="header-menu">
  			<div class="hamburger">
        <p>Menu</p>
			</div>
		</div>
	</header>
	<nav class="main-nav">
		<div class="block-reveal" id="block__01"></div>
		<div class="nav-container">
			<ul class="main-menu">
				<li class="nav-link"><a href="#">Agency</a></li>
				<li class="nav-link"><a href="#">Work</a></li>
				<li class="nav-link"><a href="#">Services</a></li>
				<li class="nav-link"><a href="#">Contact</a></li>
			</ul>
			<ul class="small-menu nav-link1">
				<li><p class="follow_title h3">Follow Us</p></li>
				<li><a href="#0"><svg class="icon icon-facebook"><use xlink:href="#facebook"/></svg></a></li>
				<li><a href="#0"><svg class="icon icon-twitter"><use xlink:href="#twitter"/></svg></a></li>
				<li><a href="#0"><svg class="icon icon-linkedin"><use xlink:href="#linkedin"/></svg></a></li>
			</ul>
			
		</div>
	</nav>
</div>