#mainmenu{
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	opacity:0;
	z-index:-1;
	transition: all .4s linear, z-index 0 linear .4s;
}
	#mainmenu:after{
		content: ' ';
		position: absolute;
		top:40px;
		left:40px;
		right:40px;
		bottom:40px;
		z-index:1;
		background: rgba(0,0,0,.9);
		transition: all .4s linear;
	}
	body #mainmenu .main-navigation{
		position: absolute;
		top:-50%;
		left:50%;
		z-index:2;
		opacity:0;
		transform: translate(-50% , -60%);
		transition: transform .4s ease-out 0,opacity .4s ease-out 0,top 0s linear .5s;
	}
	body #mainmenu .main-navigation ul{
		list-style: none;
		margin:0;
		padding:0;
		text-align: center;
		display: inline-block;
		padding-top:0px;
	}
	body #mainmenu .main-navigation ul li{
		display: block;
		font-size: 25px;
		letter-spacing: .1em;
		font-weight: 400;
		text-transform: uppercase;
		margin-bottom: .6em;
	}
	body #mainmenu .main-navigation ul li a{
		text-decoration: none;
		color: white;
		transition: all .4s ease-out 0;
	}
	body #mainmenu .main-navigation ul li a:hover{
		color: #079DCC;
	}
	
	
	
body.mainmenuvisible #mainmenu{
	opacity:1;
	z-index: 3;
	transition: all .4s linear .1s,z-index 0s linear 0s;
	color: white;
}
body.mainmenuvisible #mainmenu:after{
	top:0;
	left:0;
	right:0;
	bottom:0;
	transition: all .4s linear .1s;
}
	body.mainmenuvisible #mainmenu .main-navigation{
		opacity:1;
		top:50%;
		transform: translate(-50% , -50%);
		transition: transform .4s ease-out .5s,opacity .4s ease-out .5s,top 0s linear 0;
	}