#pad {height:200px;} /* this demo only */

#nav, #nav ul {padding:0; margin:0 auto; list-style:none; }
#nav {position:relative; z-index:50;}
#nav ul {display:none; width:889px;}

#nav li { position:relative; list-style:none;

float:left;}

#nav li.nbg { 
background:none;
}
#nav li a {text-decoration:none; font-size:12px; font-weight:bold; }
#nav li b {display:block; padding-left: 3px; padding-right: 2px; cursor:pointer;  font-weight:normal; color:#fff; font-size:12px; font-weight:bold;}
#nav li.first b { background-position:left top;}
#nav li.last b {padding-right:30px; background-position:right top;}
#nav li a b.clicked {color:#fff;}
#nav li ul {position:absolute; width:150px; left:0; text-align:left;  float:left; background:#f8f8f8;  border:1px solid #aaa;  padding-right:5px; line-height:25px;}
#nav li ul li {float:none; background:none; position: relative; border:1px solid #fff; line-height:30px; }
#nav li ul li a {display:block; color:#000; font-weight:normal; font-size:12px; border-bottom:1px dotted gray; padding:0px; margin:0px; padding-left:5px;}
#nav li ul li a:hover {background:#bd0100; color:#fff; }

#nav li ul li ul  {display: none;}
#nav li ul li:hover > a  {background:#bd0100; color:#fff; }

#nav li ul li ul li:hover > a  {background:#bd0100; color:#fff; }

#nav li ul li:hover ul  {display: block;  top: 0; left:173px; width: 160px;}

#nav li ul li ul li a  { line-height: normal; padding: 9px 0 9px 8px !important; display: block;}

#nav li ul li ul li ul {display: none !important;}

#nav li ul li ul li:hover ul  {display: block  !important;   left:153px;  top: 0; width: 160px;}









/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
	position: relative;
	z-index: 2;
	cursor: pointer;
}

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	opacity: 0;
	pointer-events: none;
}

/* Position tooltip above the element */
[data-tooltip]:before {
	position: absolute;
	bottom: 80%;
	left: 0%;
	margin-bottom: 5px;
	margin-left: -80px;
	padding: 7px;
	width: 200px;
	-webkit-border-radius: 3px;
	-moz-border-radius:    3px;
	border-radius:         3px;
	background-color: #000;
	background-color: hsla(0, 0%, 20%, 0.9);
	color: #fff;
	content: attr(data-tooltip);
	text-align: center;
	font-size: 12px;
	line-height: 1.2;
}

/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
	position: absolute;
	bottom: 80%;
	left: 50%;
	margin-left: -5px;
	width: 0;
	border-top: 5px solid #000;
	border-top: 5px solid hsla(0, 0%, 20%, 0.9);
	border-right: 5px solid transparent;
	border-left: 5px solid transparent;
	content: " ";
	font-size: 0;
	line-height: 0;
}

/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
	visibility: visible;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	opacity: 1;
}








/*New Css*/


/*-------------------Dabur vatika navigation css---------------------*/
@import url("../css/font.css");


*{
	margin:0;
	padding:0;
}

 .header_main_nav:hover { 	
 	z-index: 9999;

	
	}


.oe_overlay{
 
	background:#000;
	opacity:0;
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;

	}
	
	
.oe_overlay_1{
 
	background:#000;
	opacity:0;
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	z-index: 9999;

	}
	
	
	
	


ul.oe_menu{
	list-style:none;
	position:relative;
	margin:20px 0px 0px 0px;	
	float:left;
	 z-index: 9999;
	clear:both;
	}

ul.oe_menu > li{
	padding-bottom:2px;
	float:left;	
	text-align:center; 
	}

ul.oe_menu > li > a {
	display:table-cell;
	background-color:#fff;
	background: url("../img/divider_navigation.png") no-repeat left 30px;
	color:#0c4f30;
	text-transform: uppercase;
	text-decoration:none;
	font-weight:bold;
	font-size:15px;
	padding: 26px 16px 54px 16px!important;	 	
	padding:10px;
	margin:1px;
	height: 93px;
	}

ul.oe_menu > li:first-child > a{
	background:none;
	}

ul.oe_menu > li > a:hover,
ul.oe_menu > li.selected > a{
	background:#006231;
	color:#fff;
	opacity:1.0;
}
.oe_wrapper ul.hovered > li > a{
	background:#fff;
	text-shadow:0px 0px 1px #FFF;	
	}

ul.oe_menu div{
	position:absolute;
	top:94px;
	left:0px;
	background:#fff;
	width:121%;
	height: auto;
	padding:30px;
	display:none;
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
	box-shadow: 0px 1px 15px #9c9c9c;
}
ul.oe_menu div ul li a{
	text-decoration:none;
	color:#222;
	padding:2px 2px 2px 4px;
	margin:2px;
	display:block;
	font-size:12px;
}
ul.oe_menu div ul.oe_full{
	width:100%;
}

ul.oe_menu div ul li a {
	background: none;
	display: block;
	padding: 7px 0 8px 0;
	color: #3d3d3d;
	font: normal 143.1% 'DINBek', Arial, sans-serif;	
	border-bottom: 1px dotted #b6b6b6;
	}

ul.oe_menu div ul li a:hover{
	color: #006231;
	}

.view_btn_nav {
	bottom: 0px;
	color: #5a8100;
	border-radius: 2px;
	text-decoration: none;
	font-size: 13px;
	margin-top: 20px;
	width: 78px;
	border: 1px solid #5a8100;
	padding: 5px 10px !important;
	display: block;

	transition: 0.7s;
	-webkit-transition: 0.7s;
	}

.view_btn_nav:hover {
	text-decoration: none;
	box-shadow: inset 0 15px 0 0 #5a8100;
	color: #fff;
	border-radius: 2px;	
	background: #5a8100;	
	}

ul.oe_menu li ul{
	list-style:none;
	float:left;
	width: 26%;
	margin-right:10px;
	text-align: left;

}
li.oe_heading{
	color:#aaa;
	font-size:16px;
	margin-bottom:10px;
	padding-bottom:6px;
	border-bottom:1px solid #ddd;
}

ul.oe_menu ul {
	position: relative;
	}
ul.oe_menu ul ul {
	display: none;	
	}

ul.oe_menu ul li:hover ul {
	display: block !important;
	width: 400px;
	position: absolute;
	left: 148px;
	height: 200px;
	padding-left: 40px;
	background: url("../img/divider_sub_nav.png") repeat-y 30px top;	
	top: 0;
	}

.hair_care_box {
	float: left;
	text-align: left;
	margin-left: 10px;
	padding-left: 20px;
	background: url("../img/divider_sub_nav.png") repeat-y 0px top;	
	}

.hair_care_box h1 {
	color: #4b4b4b;	
	font: normal 192.3% 'Roboto-Light', Arial, sans-serif;
	} 

.hair_care_box img {
	float: right;
	position: absolute;
	right: 2%;
	bottom: 8%;	
	max-width: 100%;
	}

.hair_care_box p {
	color: #489400;
	font-size: 123.1%;
	padding-top: 20px;
	width: 72%;
	margin-bottom: 51px;
	}

.hair_care_box .click_lnk {
	display: block;
	padding-bottom: 15px;
	height: 49px;
	width: 156px;	
	text-indent: -99999px;
	background: url("../img/click_btn_nav.png") no-repeat left top !important; /* Old browsers */
	}



span.reference{
				position:fixed;
				left:0px;
				bottom:0px;
				background:#000;
				width:100%;
				font-size:10px;
				line-height:20px;
				text-align:right;
				height:20px;
				-moz-box-shadow:-1px 0px 10px #000;
				-webkit-box-shadow:-1px 0px 10px #000;
				box-shadow:-1px 0px 10px #000;
			}
			span.reference a{
				color:#aaa;
				text-transform:uppercase;
				text-decoration:none;
				margin-right:10px;
				
			}
			span.reference a:hover{
				color:#ddd;
			}
			.bg_img img{
				width:100%;
				position:fixed;
				top:0px;
				left:0px;
				z-index:-1;
			}
			

.sub_category {
	position: relative;
	}


a:hover div.vatika_menu { 
    display:block; 
}



/* Effect 5: same word slide in */

.cl-effect-5 a {
	overflow: hidden;
	padding: 0px 0px;
	}

.cl-effect-5 a span {
	position: relative;	
	display: block;
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
}

.cl-effect-5 a span::before {
	position: absolute;
	top: 120%;
	content: attr(data-hover);
	/*font-weight: bold;*/
	}

.cl-effect-5 a:hover span,
.cl-effect-5 a:focus span {
	-webkit-transform: translateY(-130%);
	-moz-transform: translateY(-130%);
	transform: translateY(-130%);
}


.mobile_nav {
	display: none;
	}

@media (min-width:992px) and  (max-width:1199px) { 
		ul.oe_menu > li > a {
			padding-left:  11px !important;
			padding-right:  11px !important;
			}
		}


@media (min-width:767px) and  (max-width:991px) { 
	ul.oe_menu {
		margin: -2px 0px 0px !important;
		}



	ul.oe_menu > li > a {
		padding: 26px 16px 25px !important;
		}

	ul.oe_menu div {
		width: 110%;		
		}

	ul.oe_menu li ul{ 
		}



	}

@media (max-width:767px) {
	.oe_overlay {
		position: absolute;
		display: none !important;
		}

	.mobile_nav {
		display: block;
		background: #21853a url(../img/bg_mobile_nav.png) no-repeat right 15px;
		margin-top: 20px;
		padding: 0 0 0 15px;
		cursor: pointer;
		color: #fff;
		font: normal  153.8%/40px 'Swiss721BT-LightCondensed', Arial, sans-serif;	
		}

	.mobile_nav:hover {
		background: #1b7a33 url(../img/bg_mobile_nav.png) no-repeat right 15px;
		}

	.oe_menu {
		display: none;
		}

	ul.oe_menu { 
		float: none;
		margin: 0px 0px 0px;
		background: #dedede; /* Old browsers */
		}

	ul.oe_menu > li {
		float: none;		
		}

	ul.oe_menu > li > a {
		width: 100%;
		display: block;
		text-align: left;
		color: #484848;
		font: normal  133.8%/35px 'Swiss721BT-LightCondensed', Arial, sans-serif;	
		height: auto;
		padding: 2px 16px 0px 16px!important;
		text-transform: none;
		}

	ul.oe_menu > li > a:hover {
		background: #21853a;
		}

	ul.oe_menu > li > a > br {
		display: none;
		}

		ul.oe_menu div { 
			display: none !important;
			}

		.hair_care_box {
			display: none;
			}





	}