﻿header {
	position:fixed;
	top: 0px;
	width: 100%;
	height: 130px;
	margin:0 auto;
	padding: 0px;
	background-color: rgba(30, 30, 30, 1);
	z-index:1;
}

.en.langMenu {
	font-family: font1;
	position: absolute;
	right: 0px;
	top: 0px;
	padding:5px;
	z-index: 9999999;
}
.en.langMenu a {
	font-size: 24px;
	font-family: font1;
	padding: 0px 7px 4px 7px;
	border-radius: 5px;
	text-decoration: none;
	cursor: pointer;
}
.en.langMenu a:hover {
	color: rgba(50, 50, 50, 1);
	background-color: rgb(222, 192, 88);
}


#menuBannerContainer {
	display: block;
	position: absolute;
	top: 45px;
	position:relative;
}
#menuBannerL {
	padding-top: 78px;
	background-position: left bottom;
	width: auto;
	height: 19px;
	margin-right: 318px;
	background-image: url('/images/menubanner_s.png');
	background-repeat: repeat-x;
}
#menuBannerR {
	display: inline-block;
	width: 318px;
	height: 121px;
	float:right;
	background-image: url('/images/en_menubanner.png');
	background-repeat: no-repeat;
	background-position: left center;
}


#logoHeader {
	background-position: right center;
	background-size: 200px auto;
	padding: 0px;
	width: 240px;
	height: 100%;
	margin: 0px 0px 0px 0px;
	float: right;
	position: absolute;
	top: 0px;
	left: 0px;
	background-color: rgba(0, 0, 0, 0);
	background-image: url('/images/nablus_soap_en.png');
	background-repeat: no-repeat;
	cursor: pointer;
	z-index: 1;
	-moz-transition: all 0.25s;
    -o-transition: all 0.25s;
    -webkit-transition: all 0.25s;
    transition: all 0.25s;
}

#dMenu {
	display: block;
}

#mMenu {
	display: none;
}

#homeNavM {
	width: 18px;
	background-image: url('/images/home_white_icon.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 28px 28px;
}

#homeNavM:hover {
	background-image: url('/images/home_white_icon.png');
}

#homeNavM.active {
	background-image: url('/images/home_active_icon.png');
}

#menuNavM {
	width: 13px;
	background-image: url('/images/menu_white_icon.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 22px 22px;
}

#menuNavM:hover {
	background-image: url('/images/menu_white_icon.png');
}

#menuNavM.active {
	background-image: url('/images/menu_green_icon.png');
	background-color: rgba(70, 70, 70, 1);
}

#mMenuNavContainer {
	border-style: solid;
	border-width: 0px 0px 3px 0px;
	border-color: rgba(108, 154, 78, 1);
	max-width: 320px;
	position: absolute;
	top: 50px;
	left: 260px;
	display: none;
	background-color: rgba(50, 50, 50, 1);
	z-index: 1000;
	margin-left: -260px;
}

menu {
	padding: 0px;
	width: auto;
	height: 55px;
	margin: 0px 0px 0px 0px;
	margin-left: 268px;
	float: right;
	left:0px;
	position: absolute;
	bottom: 0px;
	background-color: rgba(0, 0, 0, 0);
}

nav {
	font-family: 'Rajdhani', sans-serif;
	font-size: 22px;
	font-weight: 500;
	height: 55px;
	line-height: 55px;
	text-align: center;
	vertical-align: middle;
	width: auto;
	float:left;
	color: rgba(255, 255, 255, 1);
	padding: 0px 20px 0px 20px;
	cursor: pointer;
    -moz-transition: all 0.25s;
    -o-transition: all 0.25s;
    -webkit-transition: all 0.25s;
    transition: all 0.25s;
    position: relative;
}
nav:hover{
	background-color: rgba(70, 70, 70, 1);
    -moz-transition: all 0.25s;
    -o-transition: all 0.25s;
    -webkit-transition: all 0.25s;
    transition: all 0.25s;
}
nav.active {
	color: rgba(222, 192, 88, 1);
    -moz-transition: all 0.25s;
    -o-transition: all 0.25s;
    -webkit-transition: all 0.25s;
    transition: all 0.25s;
}

nav .nacAD {
	box-sizing: content-box;
	margin: 0 20px 0 -20px;
	padding: 0px;
	width: 0px;
	height: 100%;
	position: absolute;
	background-color: rgba(70, 70, 70, 0);
    -moz-transition: all 0.25s;
    -o-transition: all 0.25s;
    -webkit-transition: all 0.25s;
    transition: all 0.25s;
   	border-top-style: solid;
	border-top-width: 3px;
	border-top-color: rgba(222, 192, 88, 0);
	box-sizing: border-box;
}
nav:hover .nacAD {
	box-sizing: content-box;
	margin: 0 20px 0 -20px;
	padding: 0px;
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: rgba(70, 70, 70, 0);
    -moz-transition: all 0.25s;
    -o-transition: all 0.25s;
    -webkit-transition: all 0.25s;
    transition: all 0.25s;
   	border-top-style: solid;
	border-top-width: 3px;
	border-top-color: rgba(222, 192, 88, 1);
	box-sizing: border-box;
}

nav a {
	margin: 0 0 0 0;
	padding: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	position: absolute;
	box-sizing: content-box;
}

@media only screen and (max-width: 984px) {
	header {
		width: 100%;
	}
	
	#menuBannerContainer {
		top: 45px;
	}
	
	#logoHeader {
		height: 130px;
		-webkit-transform: scale(0.95);
		transform: scale(0.95);
		-webkit-transform-origin: top left;
		transform-origin: top left;
	}
	
	menu {
		margin-left: 250px;
	}
	
	#dMenu {
		display: none;
	}
	
	#mMenu {
		display: block;
	}
	
	nav {
		text-align: left;
		width: 280px;
	}
}

@media only screen and (max-width: 670px) {
	#logoHeader {
		-webkit-transform: scale(0.65);
		transform: scale(0.65);
		-webkit-transform-origin: top left;
		transform-origin: top left;
	}
		
	header {
		height: 135px;
	}
	

	menu {
		margin-left: 0px;
	}
	
	#menuBannerContainer {
		display: block;
		position: absolute;
		top: 58px;
		position:relative;
	}
	#menuBannerL {
		background-size: 3px;
		padding-top: 65px;
		background-position: left bottom;
		width: auto;
		height: 19px;
		margin-right: 200px;
	}
	#menuBannerR {
		background-size: contain;
		display: inline-block;
		width: 200px;
		height: 121px;
		float: right;
	}
}
