@charset "utf-8";
html.open{
	overflow-y:hidden;
	overflow-x:hidden;
    position: relative;
    height: 100%;
}

body.open{
	overflow-y:hidden;
	overflow-x:hidden;
    position: relative;
    height: 100%;
}

#navigation{
	position:fixed;
	height:60px;
	width:100vw;
	background-color:rgba(40,40,40,0.85);
	display:flex;
	justify-content: center;
	align-items: center;
	z-index:9999;
}

#nav_logo{
	height:50px;
	margin-left:15%;
}

#nav_logo img{
	height:100%;
	opacity:.8;
}

#nav_logo img:hover{
	opacity:1;
}

#nav_buttons{
	list-style: none;
	padding-left:10px;
}

#navigation span{
	flex-grow: 1;
}

#nav_buttons li{
	display: inline-block;
	
}

#nav_buttons .active{
	border: 1px solid #DFDFDF;
	padding:7px 12px;
}

#nav_buttons li a{
	margin:0 5px;
	padding:7px 12px;
	border: 1px solid;
	border-color:transparent;
	text-transform: uppercase;
	text-decoration: none;
	color:#DFDFDF;
	font-family: omnes pro, sans-serif;
	font-weight: 400;
	font-size:10pt;
	
	transition:all .1s ease;
	-o-transition:all .1s ease;
	-moz-transition:all .1s ease;
	-webkit-transition:all .1s ease;
}

#nav_buttons li a:hover{
	border-color:#AAAAAA;
}

#nav_buttons li a:active{
	border-color:#000000;
	color:#000000;
	text-decoration: none;
	font-family: omnes pro, sans-serif;
	font-weight: 400;
	font-size:10pt;
}
#facebook_button{
	margin:0 15% 0 40px;
}

#facebook_button img{
	height:25px;
	opacity:.8;
	transition:all .1s ease;
	-o-transition:all .1s ease;
	-moz-transition:all .1s ease;
	-webkit-transition:all .1s ease;
}
#facebook_button img:hover{
	opacity:1;
}

#burger_button{
	position:relative;
	height: 17pt;
	width: 26pt;
	z-index: 10000;
	margin-right:5%;
	cursor:pointer;
	display:none;
}

#burger_button span{
	position:absolute;
	height:3pt;
	width:100%;
	background-color:#DDDDDD;
	opacity:1;
	transform:rotate(0);
	transition:all .4s ease;
	-o-transition:all .4s ease;
	-moz-transition:all .4s ease;
	-webkit-transition:all .4s ease;
}
#burger_button span:nth-child(1){
	top:0;
}
#burger_button span:nth-child(2){
	top:7pt;
}
#burger_button span:nth-child(3){
	bottom:0;
}

#burger_button.open span:nth-child(1){
	transform:rotate(-135deg);
	top:7pt;
}
#burger_button.open span:nth-child(2){
	transform:rotate(45deg);
}
#burger_button.open span:nth-child(3){
	transform:rotate(-45deg);
	bottom:7pt;
}

#navigation_slide{
	height:calc(100vh - 60px);
	width:100%;
	background-color:rgba(40,40,40,0.95);
	position:absolute;
	top:60px;
	left:-100%;
	display:none;
	flex-direction: column;
	align-items: center;
	z-index:9999;
	
	transition:left .6s ease;
	-o-transition:left .6s ease;
	-moz-transition:left .6s ease;
	-webkit-transition:left .6s ease;
}

#navigation_slide.open{
	left:0;
}
#nav_slide_buttons{
	display:none;
	list-style: none;
	color:#DFDFDF;
	text-align: center;
	padding:0;
	margin:0;
	width:50%;
}

#navigation_slide.open *{
	display:block;
}

#nav_slide_buttons li{
	margin:20px 0;
}

#nav_slide_buttons li a{
	color:#DFDFDF;
	text-decoration: none;
	text-transform: uppercase;
	font-family: bebas-neue, sans-serif;
	font-weight: 700;
	font-size:25pt;
	filter:drop-shadow(0px 4px 2px rgba(10,10,10,.8));
}
#nav_slide_buttons li a:hover{
	color:white;
}

#nav_slide_buttons img{
	width:40px;
	margin:auto;
	padding:10px 0;
}

#nav_slide_buttons span{
	display:block;
	width:100%;
	height:2px;
	background-color:#DFDFDF;
}


@media all and (max-width:1180px){
	#nav_logo{
		margin-left:10px;
	}
	#facebook_button{
		margin-right:10px;
		margin-left:5px;
	}
}

@media all and (max-width:790px){
	#navigation{
		background-color:rgba(40,40,40,1);
		position:static;
	}
	
	#nav_logo{
		margin-left:5%;
	}
	#nav_buttons{
		display:none;
	}
	#facebook_button{
		display:none;
	}
	#burger_button{
		display:block;
	}
	#navigation_slide{
		display:flex;
	}
}