/*============================================================================================*/
/*                                           HEADER                                           */
/*============================================================================================*/

#header + #container{
	margin-top:40px;
}
#header{
    background-color:#efefef;
    background-color:#cccccc;
    background-color:#008080;
    background-color:#336699;
    /*top:0px;
    position:absolute;*/
	
	width:100%;
	
	color:#fff;
    
	height:40px;
	/*line-height:40px;*/
	
	text-align:center;
	
    font-weight:normal;
    font-weight:bold;
    font-size:18px;
	
	z-index:10;
	transition:0.5s all;
}
	
	#header #home_link{
		line-height:40px;
	}
	
/**/
	#header a,
	#header a:visited,
	#header a:hover,
	#header a:visited:hover{
		color:#fff;
	}
/**/
	#header #header_menu{
		margin:auto;
		display:block;
		transition:0.5s all;
	}
		#header #header_menu #header_menu_left,
		#header #header_menu #header_menu_right{
			position:relative;
			width:calc((100% - 220px) / 2);
			text-align:center;
			font-weight:normal;
		}
		#header #header_menu #header_menu_left{
			float:left;
			text-align:right;
		}
		#header #header_menu #header_menu_right{
			float:left;
			text-align:left;
		}
			#header #header_menu #header_menu_left a,
			#header #header_menu #header_menu_left a:visited,
			#header #header_menu #header_menu_right a,
			#header #header_menu #header_menu_right a:visited{
				color:#f08b9f;
				text-decoration:none;
			}
			#header #header_menu #header_menu_left a:hover,
			#header #header_menu #header_menu_left a:visited:hover,
			#header #header_menu #header_menu_right a:hover,
			#header #header_menu #header_menu_right a:visited:hover{
				color:#f08b9f;
				text-decoration:underline;
			}
			
			
			
			
			
		#header #header_menu  #header_menu_center{
			float:left;
		}
			#header #header_menu  #header_menu_center #logo{
				display:block;
				margin:auto;
				background-image:url('img/logo.png');
				background-size:contain;
				background-position:center center;
				background-repeat:no-repeat;
				transition:0.5s all;
			}
			#header #header_menu  #header_menu_center #slogan{
				display:block;
				text-align:center;
				height:25px;
				font-size:16px;
				opacity:0;
				font-family:"Amandine";
				text-decoration:none;
				transition:.3s ease-in-out;
				font-weight:100;
				width:100%;
			}
			#header #header_menu  #header_menu_center #logo:hover + #slogan{
				opacity:1;
			}
			
			
			
			
		
			#header #header_menu #responsive_button{
				position:absolute;
				top:25px;
				right:25px;
				width:30px;
				height:30px;
			}
				#header #header_menu #responsive_button #responsive_on{
					position:absolute;
					left:0px;
					top:0px;
					width:30px;
					height:30px;
					margin:0px;
					padding:0px;
					cursor:pointer;
					opacity:0;
					background-color:#0c0;
					z-index:9;
				}
				#header #header_menu #responsive_button #responsive_icon{}
					#header #header_menu #responsive_button #responsive_icon svg{
						fill:#fe849e;
					}
				#header #header_menu #responsive_button #responsive_menu{
					z-index: 9999;
					height: 100vh !important;
					width: 70%;
					position: fixed;
					right: 0;
					padding: 30px;
					top: 0;
					left: 0;
					bottom: 0;
					background: #fff;
					transform: translateX(-100%);
					transition: .5s ease-in-out;
					z-index:11;
					box-shadow:0 5px 10px 0 rgba(0, 0, 0, 0.1);
				}
					#header #header_menu #responsive_button #responsive_menu a,
					#header #header_menu #responsive_button #responsive_menu a:visited,
					#header #header_menu #responsive_button #responsive_menu a:hover,
					#header #header_menu #responsive_button #responsive_menu a:visited:hover{
						color: #fe849e;
						display: block;
						text-align: left;
						height: calc((100% / 6) - 10px);
					}
				#header #header_menu #responsive_button #responsive_on:checked + #responsive_icon + #responsive_menu{
					transform:translateX(-0%);
				}
				
				
				
				
				
			
			
			
			
			
			
			
			
		
@media screen and (max-width:800px){
	#header #header_menu{
		padding:10px 0px;
	}
		#header #header_menu #header_menu_left,
		#header #header_menu #header_menu_right{
			display:none;
		}
		#header #header_menu #responsive_button{
			display:block;
		}
		#header #header_menu  #header_menu_center{
			width:100%;
		}
			#header #header_menu  #header_menu_center #logo{
				margin:auto;
				height:60px;
				width:90px;
			}
			#header #header_menu  #header_menu_center #slogan{
				display:none;
			}
}
@media screen and (min-width:801px){
	#header #header_menu{
		padding:0px 0px;
	}
		#header #header_menu #header_menu_left,
		#header #header_menu #header_menu_right{
			display:inline-block;
			width:calc((100% - 192px) / 2);
		}
		#header #header_menu #header_menu_left a,
		#header #header_menu #header_menu_right a{
			font-size:20px;
			margin:0px 12px 0px 12px;
			line-height:150px;
		}
		#header #header_menu #responsive_button{
			display:none;
		}
		#header #header_menu  #header_menu_center{
			width:191px;
		}
			#header #header_menu  #header_menu_center #logo{
				margin:auto;
				height:130px;
			}
			#header #header_menu  #header_menu_center #slogan{
				display:block;
				font-size:15px;
				height:20px;
			}
}
@media screen and (min-width:1000px){
	#header #header_menu{
		padding:10px 0px;
	}
		#header #header_menu #header_menu_left,
		#header #header_menu #header_menu_right{
			display:inline-block;
			width:calc((100% - 220px) / 2);
		}
		#header #header_menu #header_menu_left a,
		#header #header_menu #header_menu_right a{
			font-size:24px;
			margin:0px 16px 0px 16px;
			line-height:150px;
		}
		#header #header_menu #responsive_button{
			display:none;
		}
		#header #header_menu  #header_menu_center{
			width:220px;
		}
			#header #header_menu  #header_menu_center #logo{
				margin:auto;
				height:150px;
			}
			#header #header_menu  #header_menu_center #slogan{
				display:block;
				font-size:18px;
				height:20px;
			}
}