@charset "utf-8";
/* CSS Document */

#menucontrol {
	margin-left:70.81977%;  /* 39.56979%; */
}

#headerbase {
	background-color: transparent;
	display: block;
	height: 59px;
	max-width: 800px;
	width:100%;
	margin:auto;
	padding-top:71px;
	position:relative;
	z-index:1;
}
#headerbasecareer {	
	background-color: #222222;
	display: block;
	height: 59px;
	max-width: 800px;
	width:100%;
	margin:auto;
	padding-top:71px;
	position:relative;
	z-index:1;
}
#menu, #menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
	width:547px;
}

#menu {
    width:519.91px;  /* 547px; */
	width:523.91px\9; /* for ie 8 or below */
	margin-left:-330.75px;
	margin-top:-8px;
}

#menu:before,
#menu:after {
    content: "";
    display: table;
}

#menu:after {
    clear: both;
}

#menu {
    zoom:1;
} /* clearfix metchod that we didnt know either */

#menu li {
	float: left;
    position: relative;
	left:0px; /* 379.87px; */
	margin-right:3.59px;
}
#menu li:last-child {
	margin-right:0;	
}

@font-face {
	font-family: "myCustomBebas";
	src: url("font/BebasNeue.otf");
	src: url('font/BebasNeue-webfont.eot')\9;
    src: url('font/BebasNeue-webfont.eot?#iefix') format('embedded-opentype')\9;
} /*
@font-face {
	font-family: "myCustomBebas";
	src: url('font/BebasNeue-webfont.eot');
    src: url('font/BebasNeue-webfont.eot?#iefix') format('embedded-opentype');
} */

#menu a {  
	float: left;
	width : 83.66px;
	height:29.59px;
	text-align:center;
	color: #f8aa5a;
	text-transform: uppercase;
	font-family: myCustomBebas;
	font-size:0.875em;
	text-decoration: none;
	letter-spacing: 0.8px;
	font-size:1em\9; /* for ie 8 or below */
	letter-spacing:0.4px\9; /* for ie 8 or below */
}

#contact , #what , #who , .prod , #sus {  /* this one for active menu, just change the contact with active menu id, and remember to change id name of active menu in source code */
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: #F8AA5A;
}
#menu li:hover > a {
    color: #f8aa5a;
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: #F8AA5A; /*
	width:103.66px; */
}
*html #menu li a:hover { /* IE6 only */
    color: #f8aa5a;	
}
#menu li:hover > ul {
    opacity: 1;
    visibility: visible;
    margin: 0;	
}
#menu li:hover > ul a {
	border:none;
}
.nav-btn2 {
	display:none;	
}

@media screen and (max-width:775px) {
	#contact , #what , #who , .prod , #sus {
		border:none;	
	}	
	#menu {
		width:98%;
		height:750px;
		padding-top:145px;
		display:none;
		z-index:0;
		position:fixed;
		top:0;
/*		right:8px; */
		margin-left:8px;
		left:0px; 
		background-color:rgba(34 ,34 ,34 ,0.90); 
	}
	#menu li {
		height:auto;
		float:none;
		clear:both;
	}
	#menu li:hover > ul {
	/*	position:static; 
		background-color:transparent; */
		margin-bottom:11px;
		text-align:right;
	}
	#menu a { 
		max-width :800px; /* 746px; - 240px */
		width:86.70833%;
		height: 53px;
		/* margin-left:563px; */
		margin-left:6.7375%; /* 57px; */
		text-align: right;
		font-size:2.188em;
		float: none;
		display:block;
		border-bottom-width:thin;
		border-bottom-color:#f8aa5a;
		border-bottom-style:solid;
		margin-bottom:14px;
	}
	#menu li:hover > a {
   		color: #f8aa5a;
		background-color:transparent;
	}
/*	.nav-btn:after {  /* before */
/*		content:"MENU";
		z-index::1;
		padding-left:23.77px; /* right */
/*	}
	.nav-btn:before { /* after */
/*		content:"";
		z-index:1;
		position: absolute;
  		left: 722.38px; /* 785.38px; */
/*  		top: 85px;
  		width: 20px;
  		height: 3.5px;
  		background: #f8aa5a;
  		box-shadow: 
    		0 -0.25em 0 0 #f8aa5a,
    		0 0.25em 0 0 #f8aa5a;
		} */  /* unhide code beside if you want some three line beside the MENU word */
		
	.nav-btn {
		display:block;
		z-index:1;
		text-align:right;
		cursor:pointer;	
		font-family:myCustomBebas;
		font-size:1.875em;
		color:#f8aa5a;
		padding-right:24.5325%;	
		margin-top:-19px;
	}
	.nav-btn2:before , .nav-btn:before {
		content:"MENU";
		z-index:1;
	}	
	.nav-btn2 {
		display:none;
		position:fixed;
		z-index:1;
		text-align:right;
		cursor:pointer;	
		font-family:myCustomBebas;
		font-size:1.875em;
		color:#f8aa5a;
		right:8.1325%;	
		margin-top:-19px;
	}
	.nav-btn3:before {
		content:url(Img/exit.png);
		z-index:1;
	}	
	.nav-btn3 {
		display:none;
		position:fixed;
		z-index:1;
		text-align:right;
		cursor:pointer;	
		font-family:myCustomBebas;
		font-size:1.875em;
		color:#f8aa5a;
		left:8.2325%;	
		margin-top:-19px;
	}
}
@media screen and (max-width:500px) {
	#menu {
		width:96.595%;	
	}
	.nav-btn2 {
		right:8.6325%;
	}
}
@media screen and (max-width:320px) {
	#menu {
		width:94.595%;	
	}
	.nav-btn2 {
		right:9.4325%;
	}
	.nav-btn3 {
		left:9.6325%;	
	}
}