/*-------------------------------------------------------------------------------------------------------------
         				HEADER - Arizon Style Updated 2024
--------------------------------------------------------------------------------------------------------------*/

:root { 
	--menu_color:#121212;  /*--font color--*/
    --menu_color_hover:#797676;
	--header_bgcolor: #fff;	/*--div background color--*/
}


/*--Header Links--*/

.icon-section a:link {
	font-size: 90%;
	color: var(--menu_color_hover); 
} 

.filterDiv-content a:link {
	color: var(--menu_color_hover); 	
}

.filterDiv-content a:visited {
	color: var(--menu_color_hover); 	
}

.filterDiv-content a:hover {
	color: var(--menu_color); 	
}




/*******************************
		 	DESKTOP
********************************/	

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

.desktop-header {
	display: block;
    width: 100%;
    height: 100px; 
	position: absolute; 	
	transition: all .5s ease-in-out;	
	border-bottom: 1px solid var(--div_color);
	background-color: var(--header_bgcolor);
	box-sizing: border-box; 
	z-index: 1000;  
}

.desktop-nav {
	display: grid;
	width: 100%;
	height: 100%;
	grid-template-columns: 15% 60% 25%;
	box-sizing: border-box;
}   


/*----------------------
	Left Div (logo)
-----------------------*/
.logo {
	display: flex;
	justify-content: center;
	align-items: center;
} 
 
.logo img {
	width: 70px;
	height: auto;	
}


/*-----------------------------
	Middle Div (top category)
-------------------------------*/
.top-category {
	display: flex;
	justify-content: center;
	align-items: last baseline;
}

.top-category ul {
	list-style: none;
	padding: 0;		
}

.top-category ul li {
	display: inline-block;
	margin-right: 15px;
	color: var(--menu_color); 
	font-size:100%;
	font-weight: bold;	
	letter-spacing: 0.02em;	
	cursor: pointer;
}

/*--Top Category Menu Hover Effect--*/
.top-category ul li:after {   
	background: none repeat scroll 0 0 transparent;	 	
	content: "";
	display: block;
	height: 2px;
	position: relative;	
	left: 50%;
	top:16px;
	bottom: 0;
	background: var(--menu_color);
	-webkit-transition: width 0.3s ease 0s, left 0.3s ease 0s;	
	transition: width 0.3s ease 0s, left 0.3s ease 0s;
	width: 0;
}

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

/*-- Dropdown Menu --*/
.big-menu-sub {	
	display: block;
	width: 100%;
	height: 50%;
	position: fixed;
	top: -100%;	
	margin: 0;
	padding: 0;
	-webkit-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out;
	background-color: var(--header_bgcolor);
	z-index: 900;	
}

.big-menu-sub-bg {
	display: none;
	width: 100%;
	height: 100%;
	position: fixed;	
	margin: 0;
	padding: 0;
	background-color: rgba(79, 79, 79, 0.4);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	z-index: 800;
}

/*-- Dropdown Menu Content --*/
.filterDiv {
	display: none;
	justify-content: left;
	align-items: normal;
	width: 70%;
	height: 100%;
	margin: 15px auto 0 auto;
	padding:0;
}

.filterDiv-content {
	margin-left: 0;
}

.filterDiv-content li {
	display: block;
	font-size: 90%;
	font-weight: normal;	
	margin-bottom: 1px;
	padding: 0;
}

.filterDiv-content ul li h3 {	
	font-size: 100%;	
	font-weight: bold;	
	color: var(--mnenu_color);
	margin-bottom: 9px;
}

.show {
	display: flex;
}


/*----------------------
	Right Div (icons)
------------------------*/
.icon-section {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 15px;
	margin-top: 35px;
	box-sizing: border-box;
 }
 
/*--Search Box-*/
.headerSearchBox {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 170px;
	padding: 2px;
	margin: 0;
	border-radius: 50px;
	background-color: var(--div_color);
	color: var(--menu_color_hover); 
	box-sizing: border-box;
	
}

.headerSearchBox:hover .icon-searchHeader {			
	background-color: var(--logo_color);			
	color: var(--body_color);
}

.headerSearchBox:hover{			
	background-color: transparent;
	color: var(--logo_color);

}

.headerSearchBox a:link{
	color: var(--menu_color_hover); 
	font-size: 90%;
}

.headerSearchBox a:visited {
	color: var(--menu_color_hover); 
	font-size: 90%;
}

.icon-searchHeader {
	color: var(--menu_color);
	align-content: center;
	padding: 3px;
	margin: 0 2px;
	border-radius: 50%;
	-webkit-transition-duration: 0.3s; /* Safari */
	transition-duration: 0.3s;
}




/********************************
		 Big Monitor
*********************************/	
@media screen and (min-width: 1920px) {
	
	.desktop-header, .big-menu-sub, .big-menu-sub-bg {
		width: 1920px;
		margin: 0 12vw;
	}

	.big-menu-sub {
		height: 30%;
	}

} 



/********************************
			iPad Pro
*********************************/	

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

	.desktop-nav {
		display: grid;
		width: 100%;
		height: 100%;
		grid-template-columns: 15% 55% 30%;
		box-sizing: border-box;
	}  

}




/******************************
		iPad Air & Mini
*******************************/	

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

	.desktop-header, .mobile-header {
		display:none;
	}
	
	.ipad-header {
		display: block;		
		width: 100%;
		height: 80px;  
		position: fixed; 
		background-color: var(--header_bgcolor); 
		box-sizing: border-box; 
		z-index: 1000;  
	}

	.ipad-nav {
		display: grid;
		width: 100%;
		height: 100%;
		grid-template-columns:20% 60% 20%;
		box-sizing: border-box;
	}  

	.ipad-logo {	
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.ipad-logo img {
		width: 65px;
		height: auto;
	}


	/* Applies to both iPad & iPhone */
	.mobile-search-section {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.headerSearchBox {
		width: 250px;		
	}

	.mobile-icon-section {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 10px;
	}	

}



/***************************
		iPhone
****************************/	

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

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

	.mobile-header {
		display: block;		
		width: 100%;
		height: 75px;  
		position: fixed;  
		background-color: var(--header_bgcolor);
		box-sizing: border-box; 
		z-index: 1000;   			
	}

	.mobile-nav {
		display: grid;
		width: 100%;
		height: 100%;
		grid-template-columns: 25% 50% 25%;
		box-sizing: border-box;
	}

	.mobile-logo {	
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.mobile-logo img{
		width:50px;
		height:auto;
	}

	.headerSearchBox {
		width: 200px;	
	}
	
}