/* CSS Document */

/* Here we save the header-related css. Everything used on header (except for the colors) should be here */

@media screen and (max-width: 1650px){
	header.fr #header_right{
		max-width: 16%;
	}	
		header.en #header_right{
		max-width: 15%;
	}	

}

@media screen and (max-width: 1400px){
	header ul#header_menu li a, header #header_right a, #header_right span{
		font-size: 1.2em;
		margin: 0 3px;
	}
	
	header.fr #header_right{
		max-width: 18%;
	}	
	header.en #header_right{
		max-width: 15%;
	}
}

@media screen and (max-width: 1180px){
	header ul#header_menu, header #header_right a, header #header_right span{
		display: none;
	}

	#hamburger_links #mobileham{
		display: block;
		margin-bottom: 10px;
		padding-bottom: 10px;
		border-bottom: 1px solid;
	}
	
	#hamburger_top{
		display: flex;
	}
	
	#hamburger_links ul li a{
	margin: 1px 0;
	line-height: 2 !important;
	}
	
	header{
		height: 150px;
	}	

	header.fr #header_right{
		max-width: 6%;
	}	
		header.en #header_right{
		max-width: 8%;
	}	
	
	.sticky{
		height: 65px;
	}
	
	.greylink_nav a {
		color: #b3b3b3;
		font-size: 1.15em;
		line-height: 1.8;
	}
}

@media screen and (max-width: 1000px){
	header.fr #header_right{
		max-width: 10%;
	}	
		header.en #header_right{
		max-width: 10%;
	}		
	
	#header_hamburger {
    right: 0px;
	}
}	

@media screen and (max-width: 800px){
	header.fr #header_right{
		max-width: 12%;
	}	
	header.en #header_right{
		max-width: 12%;
	}			

	#header_hamburger {
		right: 0px;
	}
	
	#hamburger_links ul {
    margin-bottom: 20px;
	}
	
}	




@media screen and (max-width: 650px){
	header.fr #header_right{
		max-width: 12%;
	}	
	header.en #header_right{
		max-width: 12%;
	}		
}	


@media screen and (max-width: 500px){
	#header_hamburger{
		width: 100%;
	}
	
	#hamburger_links{
	width: 80%;
	}

	#hamburger_links ul {
    margin-bottom: 0px;
	}
	
	header #header_logo img{
		margin: 15px 20px 15px 7px;
		max-height: 38px;
	}
	header #header_right img {
    padding: 30px 20px 30px 30px;
	}
	
	header.fr #header_right{
		max-width: 18%;
	}	
	header.en #header_right{
		max-width: 18%;
	}
	
	.greylink_nav a {
		color: #dddddd;
		font-size: 1.1em;
		line-height: 1.8;
	}

	.whitelink_nav a{
		font-size: 1.2em;
		line-height: 2.4 !important;
	}	
	
}

@media screen and (max-width: 400px){
	
	.whitelink_nav a{
		font-size: 1.2em;
		line-height: 2.4 !important;
	}

	div#sugarnation_social {
		max-width: 100%;
		flex-wrap: wrap;
		justify-content: center;
	}
	
	header #header_logo img{
		margin: 15px 20px 15px 7px;
		max-height: 38px;
	}
	
	header #header_right img {
    	padding: 20px 10px 20px 10px;
	}
	
	.greylink_nav a {
		color: #dddddd;
		font-size: 1.1em;
		line-height: 1.8;
	}
	
	#hamburger_links{
	width: 80%;
	}
	
}

@media screen and (max-width: 350px){
	
	.whitelink_nav a{
		font-size: 1.2em;
		line-height: 2.4 !important;
	}
	
	header #header_right img {
    padding: 30px 10px 30px 10px;
	}

	#hamburger_content, #hamburger_top{
		min-width: auto;
	}

	#hamburger_links{
		width: 80%;
	}
	
	.greylink_nav a {
		color: #dddddd;
		font-size: 1.1em;
		line-height: 1.8;
	}
	
}