#entete #logo {
	opacity : 1;
	max-width : none;
}

#entete #logo .wrapper {
	position            : relative;
	height              : 80px;
	animation           : loader-fade-in 0.5s;
	animation-fill-mode : both;
	opacity             : 0;
	width               : 220px;
}

#entete #logo .wrapper > div {
	position : absolute;
	left     : 0;
	right    : 0;
	margin   : auto;
}

#entete #logo .wrapper svg {
	position : absolute;
	left     : 0;
	right    : 0;
	margin   : auto;
	height   : 80px;
}

#entete #logo .logo svg {
	position : absolute;
	bottom   : 0;
}


#entete #logo .logo {
	position            : absolute;
	bottom              : 0;
	overflow            : hidden;

	animation           : loader-logo 1s;
	animation-delay     : 0.5s;
	animation-fill-mode : both;
}

#entete #logo .overlay {
	position            : absolute;
	top                 : 0;
	left                : 0;
	overflow            : hidden;

	animation           : loader-overlay 1s;
	animation-delay     : 0.5s;
	animation-fill-mode : both;
}

#entete #logo .logo .st0 {
	/*fill: #777;*/
}

#entete #logo .overlay .st0 {
	fill : #222222;
}

@keyframes loader-fade-in {
	from {
		opacity : 0;
	}
	to {
		opacity : 1;
	}
}

@keyframes loader-overlay {
	from {
		height : 80px;
	}
	to {
		height : 0px;
	}
}

@keyframes loader-logo {
	from {
		height : 0px;
	}
	to {
		height : 80px;
	}
}

@keyframes loader-fade {
	0% {
		opacity : 1;
	}
	99% {
		opacity : 0;
	}
	100% {
		visibility : hidden;
		display    : none;
	}
}

@media screen and (max-width : 575px) {
	#entete #logo .wrapper {
		width : 138px;
		height : 50px;
	}
	#entete #logo .wrapper svg {
		height : 50px;
	}



	@keyframes loader-overlay {
		from {
			height : 50px;
		}
		to {
			height : 0px;
		}
	}

	@keyframes loader-logo {
		from {
			height : 0px;
		}
		to {
			height : 50px;
		}
	}
}