/* Default CSS Size
/* Extra Small 320-576 / No Container Width with 15px margins */

#header{padding:30px 0;background-color:<?php echo($brand1);?>;}
#header .headerWrapper{}
#header .logoWrapper{}

#header .logo{
	display:block;
	background:url("../assets/logo.png") no-repeat;
	background-size:contain;
	height:35px;
	transition: height ease 0.5s;
}

#header .leftContent{justify-content:flex-start;margin-left:10px;}
#header .rightContent{justify-content:flex-start;margin-left:10px;}

#header .contacts a{text-decoration: none;color:#FFF;}

#header .topContent{display:grid;}
#header .headerContentWrapper{display:none;}
#header .socialIcons{display:none;}
#header .socialIcon{display:none;}

#header .burger{font-size:60px;}

#header .menuBtn{
	float:right;
	width:50px;
	height:50px;
	cursor:pointer;	
}
#header .menuBtn:hover{opacity:0.8;}
#header .menuBar{
	height:6px;
	margin-top:7px;
	background-color:<?php echo($brand1)?>;
	animation-name: colorTransition;
	animation-duration: 2.5s;
}

@keyframes colorTransition {
	from {background-color: #FFF;}
	to {background-color: <?php echo($brand1)?>;}
}


/* Small 576-767 / 540px Container Width with 15px margins */
@media (min-width:576px) {
	#header .logo{height:70px;}
}


/* Medium 768-991 / 720px Container Width with 15px margins */
@media (min-width:768px) {
	/* Add this in to have header behind the featured area
	#header{
		background-color:rgb(0,0,0,0.65);
		position:absolute;
		top:0px;
		z-index:1000;
		width: 100%;
	}
	*/
	
	#header .logo{height:70px;}
	#header .menuBtn{display:none;}
	#header .headerWrapper{}
	#header .headerContentWrapper{text-align:right;display:block;}
	
	#header .topContent{
		display:inline-block;
		border-left:solid 1px #000;
		border-right:solid 1px #000;
		padding:0 20px;
	}

	#header .socialIcon{
		width:36px;
		height:36px;
		display:inline-block;
		background-color: #000;
		border-radius: 45px;
		padding:8px;
		margin-right:5px;
	}
	
	#header .socialIcons{display:inline-block;}
	
}



/* Large 992-1200 / 960px Container Width with 15px margins */
@media (min-width:992px) {
	
	#header .socialIcon{padding:5px 7px 5px 7px;}
	
}



/* Extra Large 1201+ / 1140px Container Width with 30px margins */
@media (min-width:1200px) {
	
	#header .socialIcon{padding:4px 7px 5px 6px;}
		
}


/* XXL 1400+ / 1320px Container Width with 30px margins */
@media (min-width:1400px) {
	


}