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

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


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


header a:link   {color:var(--primary_textcolor); font-size:90%; letter-spacing:0.15em; font-weight: thin;}
header a:visited {font-size:90%; color:var(--primary_textcolor);}
header a:active {background:none; color:var(--primary_textcolor);}



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

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

	/* box-shadow: 0px 2px 8px 1px rgba(0,0,0,0.2);  */
}



/*-------------------------
  Language Switch Effects
---------------------------*/


/*--Language Selections Button--*/

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

.language-selections ul li {
   text-align:center;
   display:inline-block;
   padding:5px;
   margin:0;
   font-size:small;  
}





/*---------------Header Container------------------*/

header{
    width:100%;
    height:80px;  
    position:fixed;
    z-index:1000;
    overflow:hidden;
	background:none;
	/* max-width: 1068px; */
}


/*--Logo Container--*/

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

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




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

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


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

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


.top-category ul li{
	color:#000; 
	font-size:100%;
	font-weight:bolder;	
	letter-spacing:0.2em;
	cursor:pointer;
}


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


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

.iconLink:after {

	background: none repeat scroll 0 0 transparent;
	bottom: 0;
	content: "";
	display: none;
	height: 2px;
	left: 50%;
	position: relative;
	background: #000;
	transition: width 0.3s ease 0s, left 0.3s ease 0s;
	width: 0;
	
}

.iconLink:hover:after {
	display:none;
	
}


.fa-instagram:hover {
	color:#5e5e5e;
}




/*---------------Menu and right icons container-------*/

header nav div ul {
	list-style:none;
	text-align:right;
	position:relative;
	margin:-10px;
	padding:0;
	
		
}

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



/********************************
		 Big Monitor
*********************************/	
@media screen and (min-width: 1920px) {
	
	header {
		width: 1920px;
		margin: 0 12vw;
	}


} 







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


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

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

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

}






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


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

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


.mobile-header {
    display:inherit;
	position:fixed;
	width:100%;
	height:75px;
	margin:0 auto;
	z-index:1000;

		
}

.mobile-header-innerdiv {
    display:grid; 
    width:95%; 
    height:auto; 
    padding-top:15px;
	grid-template-columns: 80% 20%;	
}

.mobile-logo {	
	text-align:left;
	padding:0;
	margin:0;
}

.mobile-toggle {
	text-align:right;
	margin-right:5%;

}



   
.mobile-logo img {
	width:150px;
	text-align: left;
	padding:0;
	margin:0;		
}



}






