#header_top{
	display:block;
	background:#fff 
}

#header_top .top_banner{
 
	height: 530px;
	background-attachment: fixed;
	background-color: #ddd;
	background-image: url(../../img/baner.jpg);
	background-repeat: no-repeat;
	background-position: center 0;
	background-size: cover
}


#header_top .top_banner .adv{
	padding:40px 30px;
	border-radius:15px;
	background:#fff;
	text-align:center;
	width:calc( 100% - 40px );
	max-width:860px;
	overflow:hidden
}

#header_top .top_banner .adv h2{
	font-size:45px;
	margin-bottom:20px 
}

#header_top .top_banner .adv h4{
	margin-bottom:40px;
	color:#111; 
	font-size:28px
}	
	
#header_top .headerLine1{
	padding:15px 0;
	border-bottom:solid 1px #ddd;
}

.headerLineWrap{
	display: block;
	border-bottom:solid 1px #ddd;	
	box-shadow: 0 0 25px rgb(0 0 0 / 10%);
}

#header_top .headerLine1 #logo{ 
	max-width:170px;
	float:left;
	display:block;
	margin:3px 30px 0 0
}

/*
------------------------------------------------------------------------------------ SEARCH FORM 
*/

#header_top .headerLine1 .search_form{ 
	display:block;
	width:100%;
	max-width:475px;
	float:left; 
 	display:block;
 	border:solid 1px #ddd;
	position:relative;
	padding:0 40px 0 0; 
}

.search_form #searchsubmit,
.search_form .input-search{
	height:100%;
	border:none;
	background:none;
}

.search_form .input-search{
	width:100%
}

.search_form #searchsubmit{ 
	position:absolute;
	right:0;
	top:0;
	width:40px;
	height:40px;
	font-size:23px
}

/*
------------------------------------------------------------------------------------ SEARCH FORM end
*/

#header_top .headerLine1 .header-mob-ico{
	float:right;
	position: relative; 
}

#header_top .headerLine1 .header-mob-ico a{
	font-size:25px; 
	width:40px;
	height:40px;
	margin-left:5px
}

.cart-bubble-num{
	position: absolute;
	left:100%;
	top:0;
	min-width:20px;
	height:20px;
	float:left;
	transform:translate(-90%,-10%);
	background-color: #2c7950;
	color:#fff;
	border-radius:10px;
	padding:5px;
	letter-spacing: 0.2em;
	
	
	font-size: 12px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: 0;
	text-align: center;
}

/* ----------------------------------------------------------------------------------------------------- */

#mob_menu{
	display:block;
	position:relative;
	z-index:300
}

#mob_menu ul,
#mob_menu ul li{
	padding:0;
	margin:0;
	list-style:none
}

#mob_menu ul li{
	float:left;
	position:relative;
	padding:0 20px;
}

#mob_menu ul li a{
	display:block;
	height:50px;
	/*width:100%;*/
	line-height:50px; 
	/*padding:0 20px;*/
	text-transform:uppercase;
	font-size:14px;
	letter-spacing:2px;
	font-weight:700;
	background:#fff;
	color:#1c1c1c;
	position:relative
}

#mob-menu-ico-close{
	display:block;
	height:30px;
	width:30px;
	font-size:30px;
	line-height:30px;
	color:#fff;
	position:absolute;
	top:15px;
	right:15px;
	z-index:9998;
	display:none
}

#mob-menu-open{
	display: none  
}

.close{
	font-size: 27px;
	width: 40px;
	height: 40px;
	color: #fff;
	text-decoration: none;
}

#mob_menu .close,
#mob_menu .close:hover{
	color: #fff !important
}
		
#mob_menu .close{		
	position:fixed;
	right:15px;
	top:15px;
	z-index:9999;
	display:none;
	
	align-items: center;
	justify-content: center;
}

html body.menu_open #mob_menu a.close{
	display: flex;
}


@media only screen and (min-width: 1024px ) {
	
	#mob_menu{
		transform:translateX(-20px)
	}
	
	#mob-menu-ico{
		display: none 
	}
   	
	#mob_menu ul li a:after{
		content:'';
		display:block;
		width:0;
		overflow:hidden;
		padding:0;
		margin:0;
		height:2px;
		background:#1c1c1c;
		position:absolute;
		left:0;
		bottom:0;
		-webkit-transition: all 0.2s ease-out;
		   -moz-transition: all 0.2s ease-out;
			-ms-transition: all 0.2s ease-out;
			 -o-transition: all 0.2s ease-out;
				transition: all 0.2s ease-out;
	}
	
	#mob_menu ul li.current-menu-ancestor.has_chaild > a:after,
	#mob_menu ul li.active  > a:after,
	#mob_menu ul li a:hover::after{
		display:block;
		width:100%;
	}
 	
	#mob_menu ul ul{
		position:absolute;
		left:-1px;
		top:50px;
		width:100%;
		min-width:280px;
		background:#fff;
		display:none;
		box-shadow:3px 5px 15px rgb(0 0 0 / 10%);
		z-index:10;
		padding:10px 0
	}
	
	#mob_menu ul ul li{
		display:block;
		clear:both;
		width:100%; 
	}
	
	#mob_menu ul ul li a{
		display:inline-block;
		letter-spacing:inherit;
		text-transform:none;
		font-size:16px; 
		line-height:1.3;
		padding:10px 0;
		height:inherit;
		color:#444 
	}
	
	#mob_menu ul ul li a:after{
		background:#444;
		bottom:9px;
		height:1px
	}
	
	#mob_menu ul ul li a:hover{
		color:#1c1c1c
	}
	
	#mob_menu ul ul ul{
		top: 0;
		left: calc( 100% - 20px )
	}
	
	#mob_menu ul li:hover > ul{
		display:block
	}
	
	
	/*
	*************************************************************************************
	*************************************************************************************
	************************************************************************************* FIXSED HEADER -> to do for more money
	*************************************************************************************
	*************************************************************************************
	*/
	/*
	body{  
		padding-top:120px
	}
	
	#header_top .headerLineWrap{ 
		width:100%;
		display:block;
		background:#fff;
		position:fixed;
		left:0;
		top:0;
		z-index:9997
	}
	*/
}

@media only screen and (max-width: 1024px){
	
	#header_top .headerLine1 .search_form,
	#mob_menu{
		display:none;
		text-align:center  
	}
	 
	#mob-menu-open{
		display: block;
		margin-left:5px
	}
	 
	body.menu_open #mob_menu{  
		display: block !important;
		position:fixed;
		top:0;
		right:0;
		bottom:0;
		left:0;
		z-index:999999;
		width:100%;
		height:100vh; 
		overflow:auto;
		padding:30px 0;
		background:#2c7950
	}
	
	body.menu_open #mob_menu ul,
	body.menu_open #mob_menu ul li{
		position: static;
		display:block;
		width:100%;
		text-align:center;
		float:none;
		clear:both;
		background:none;
		
	}
	/*  .header-mob-ico a   */	
		
	body.menu_open #mob_menu ul li{
		float: none;
		clear:both
	}
	
	body.menu_open #mob_menu ul li a{
		color:#fff; 
		width: auto; 
		display:inline-block;
		background: none !important
	}
	 
}

@media only screen and (max-width: 768px){
	
	#header_top .headerLine1 #logo{ 
		max-width:50%;
	} 
}