/*------------------------------------------------------------------------------------------------------------------------------
         												HEADER 
--------------------------------------------------------------------------------------------------------------------------------*/


/*----Header Icons----*/

.fa-search {
	color:var(--primary_color);
	padding: 5px 5px;
	font-size:18px;
}

.fa-search:hover {
	color:var(--primary_color_dark);	
}


.fa-shopping-cart {
	color:var(--primary_color);	
	padding: 5px 15px 5px 5px;
	font-size:18px;
}

.fa-shopping-cart:hover {
	color:var(--primary_color_dark);	
}


.fa-user {
	color:var(--primary_color);	
	padding: 5px 5px;
	font-size:18px;
}

.fa-user:hover {
	color:var(--primary_color_dark);
}


/*-------------------------
  Header Scrolled Effects
---------------------------*/

/*--Header background color changed when scrolled--*/
.headeractive {
    background-color:#fff;
    opacity:1;   
}




/*--Icons Sections-*/

.icons-section{
   text-align:right;
   display:inline-block;
   width:28%;
   margin: 10px 0;
   padding-right:0; 
}



/*--Header Links--*/

header a:link   {color:var(--primary_color) ; font-size:95%; font-weight:bold}
header a:visited {color:var(--primary_color); font-size:95%;}
header a:hover, a:active {color:var(--primary_color); font-size:95%;}




/*-------------------------------------
         	DESKTOP HEADER 
--------------------------------------*/


.ipad-header, .mobile-header{
	display:none;
}


/*--Header Container--*/

header{
	background-color:none;
    width:100%;
    height:100px;  
    position:fixed;
    z-index:1000; 
	overflow: hidden;   
}


/*--Logo Container--*/

header nav div.logo {
   text-align:left;
   display:inline-block;
   float:left;
   width:12%;
   margin:12px 0;
   padding-left:40px;	
} 

.logo img{
   width:180px;
   height:auto;	
}


/*--Menu and right icons container--*/
header nav div ul {
	list-style:none;
	text-align:left;
	position:relative;
	margin:-10px;
	padding:0;
		
}

header nav div ul li{
	display:inline-block;
	margin-top:0;
	padding:1.9em 1em 5em 1em;
			
}



/*--STYLE-2: Menu with underline hover--*/

/*---------------------------------
    HEADER MENU STYLES
-----------------------------------*/


/*--Middle (Categories)--*/

.top-category{
	text-align:left;
	display:inline-block;
	width:50%;
	margin-top:35px;
	padding-left:40px; 
} 

.top-category ul li{
	color:var(--primary_color); 
	font-size:90%;
	font-weight:bolder;	
	letter-spacing:0.05em;
	cursor:pointer;
}


.top-category ul li:after {    
	background: none repeat scroll 0 0 transparent;
	bottom: 0;
	content: "";
	display: block;
	height: 3px;
	left: 50%;
	position: relative;
	background: var(--primary_color);
	transition: width 0.3s ease 0s, left 0.3s ease 0s;
	width: 0;
}


.top-category ul li:hover:after { 
  width: 100%; 
  left: 0; 
}



/*------------------Click on category will display submenu-------------*/


.submenumodal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: -1; /* Sit on top */
  padding-top: 180px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: hidden; /* Enable scroll if needed */
  background-color:none;

}


/*--Submenu layer-1--*/
.dropdown-content{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100px;
 	background-color:#fff;
 	padding-top:80px;
  	margin:0 auto;
  	z-index:900;
  	overflow:hidden;
  	box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.2);

}

.dropdown-content ul{
	display:inline;
	margin-left:18%;
	padding:0;
	width:100%;
	margin-top:0;
}

.dropdown-content ul li{	
	margin:0 auto;
	text-align:left;
}

.dropdown-content ul li:hover:after{
	width:0; 
}

.dropdown-content ul li a:hover{
	color:var(--secondary_textcolor);
}

.dropdown-content ul li a:focus{
	color:var(--secondary_textcolor);
}








/*-------------------------------------
         	IPAD-PRO HEADER 
--------------------------------------*/


@media screen and (max-width:1024px){
	
.ipad-header, .mobile-header {
	display:none;
}

.DesktopHeader{
	display:block;
}

header nav{
	background-color:#fff;
    width:100%;
    height:80px;  
    position:fixed;
    z-index:1000;
  
     
}


.top-category{
   text-align:left;
   display:inline-block;
   width:50%;
   margin:10px 0;
   padding-left:80px;
     
	
} 


.icons-section{
   text-align:right;
   display:inline-block;
   width:22%;
   margin:10px 0;
   padding-right:15px;
    

}

.menu-sub{
  width:80%;
}


.menu-col-1,.menu-col-2{
  width:50%;
}
}


/*-------------------------------------
    	iPad Air & iPad-mini HEADER 
--------------------------------------*/


@media screen and (max-width:820px){

.DesktopHeader, .mobile-header{
	display:none;
}


.ipad-header {	
	display:block;
    width:100%;
    height:80px;  
    position:fixed;
    z-index:1000;

}

.ipad-header nav{
 	height:80px;  
 	margin-top:0;
}

.mobile-toggle{
	width:20%; 
	display:inline;
	text-align:center;
	margin-left:7%;
	margin-top:15px;
}

.mobile-search{
	width:20%; 
	display:inline;
	text-align:right;
	margin-left:18%;
	margin-top:15px;	
}

.mobile-logo{	
   width:40%; 
   display:inline; 
   text-align:center;
   margin-left:28%;
   margin-bottom:0;
   margin-top:15px;
}
   
.mobile-logo img{
	width:12%;
	margin-top:15px;	
}
}



/*-------------------------------------
         	IPHONE HEADER 
--------------------------------------*/

@media screen and (max-width:470px){

.DesktopHeader, .ipad-header {
	display:none;
}


.mobile-header {
    display:inherit;
	position:fixed;
	top:0;
	width:100%;
	height:100px;
	margin:0 auto;
	z-index:1000;
	background:#fff;
	box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.2);
	/* border-bottom:3px solid var(--primary_color);   */
		
}

.mobile-header-innerdiv {
    display:block; 
    width:100%; 
    height:auto; 
    padding-top:0;
	margin-top:5%;		
} 



.mobile-toggle {
	width:20%; 
	display:inline;
	text-align:center;
	margin-left:5%;	
	
}


.mobile-search {
	width:20%; 
	display:inline;
	text-align:right;
	margin-left:5%;
}


.mobile-logo {	
   width:50%; 
   display:inline; 
   text-align:center;
   margin-left:17%;
   margin-bottom:0; 
}

   
.mobile-logo img {
	width:150px;		
}

.icons-section-mobile {
	display:block;
	width:100%; 
	height:30px;
	margin-top:20px ; 
	text-align:right;
	background:var(--primary_color);

}
}