/* Supprime la pub WebHost */
body div img[src="https://cdn.000webhost.com/000webhost/logo/footer-powered-by-000webhost-white2.png"]
{
  display: none;
  border: solid green 2px;
}

@font-face 
{
	font-family: "GeoSsLight";
	src: url("composants/fonts/GeosansLight.ttf");
}


html, body
{
	padding: 0;
	margin: 0;
	
	font-family: 'GeoSsLight';
	background: rgb(241,241,241);
	
	text-align: justify;
  text-justify: inter-word;
}

/* HEADER */
header
{
	position: fixed;
	width: 100%;
	height: 160px;
	top: 0;
	
	background: rgba(150,50,50,1);
	color: white;
	
	transition: all 0.4s;
	z-index: 1;
}

header #photo_profil
{
	width: 30%;
	max-width: 200px;
	float: left;
	border-radius: 100%;
	border: solid white 2px;
	margin: 2%;
	margin-top: -20px;
	
	transition: all 0.25s;
}

header #head_info
{
	padding: 2%;
	font-size: 1.3em;
	padding-top: 20px;
	text-align: right;
}

header #head_info hr
{
	margin-top: 5px;
	margin-bottom: 5px;
  margin-right: 0;
	margin-left: auto;
	padding: 0;
	border: 1px solid white;
}

header.large
{
	margin-top: 25px;
}

header.small
{
	position: fixed;
	width: 100%;
	height: 35px;
	margin-top: 0px;
}

header.small #photo_profil
{
	margin-top: 0px;
	width: 12%
}

header.small span
{
	display: none;
}

header.small hr
{
	display: none;
}

header.small #head_info
{
	padding: 2%;
	font-size: 1.3em;
	padding-top: 5px;
}
/* END - HEADER */

/* NAV */
#btn_menu
{
	position: fixed;
	background: white;
	border-radius: 100%;
	border: solid 3px #963232;
	box-shadow: 0 0 5px black;
	bottom: 30px;
	left: 15px;
	width: 35px;
	height: 35px;
	z-index: 5;	
	cursor: pointer;
	padding: 5px;

	transition: all 0.4s;
}

#btn_menu:hover
{
	box-shadow: 0 0 0px black;
}

#btn_menu.open
{
	transform: rotateZ(180deg);
}

nav
{
	z-index: 2;
	position: fixed;
	background: rgba(0,0,0,0.8);
	width: 100%;
	height: 100%;
	top:0;
	
	transition: all 0.4s;
}

nav.close
{
	transform: translateX(-1000px);
}
/* END - NAV */


/* WRAP */
#wrap
{
	margin-top: 50%;
	padding: 5px;
	font-size: 1.1em
}

#wrap h1
{
	color: #333333;
	font-variant: small-caps;
	
}

#wrap p
{
	padding: : 0;
}
#wrap a
{
	color: #333333;
}

#wrap ul
{
	list-style: none;
	margin: 0;
	padding: 0;
	padding-left: 5%;
	margin-bottom: 15px;
}

#wrap ul li
{
	margin-bottom: 10px;
	padding-left: 10px;
	border-left: solid 2px rgba(150,50,50,1);;
}

#wrap ul li span
{
	font-variant: small-caps;
	font-size: 1.2em;
	opacity: 0.7;
}

#wrap hr
{
	width: 50%;
	opacity: 0.5;
	color: rgba(150,50,50,1);
}

#wrap .info
{
	border-left: solid 2px green;
	padding: 5px;
	margin-left: 25px;
	padding-left: 10px;
	font-size: 1.3em;
	color: green;
}
/* END - WRAP */

/* FOOTER */
footer
{
	clear: both;
	padding: 20px;
	padding-top: 100px;
	padding-bottom: 100px;
	text-align: center;
	color: #333333;
}

footer a
{
	color: #333333;
}
/* END - FOOTER */


/* MEDIA QUERIES */
@media screen and (min-width: 900px) 
{
	header #head_info
	{
		font-size: 1.8em;
		padding: 2px;
		padding-right: 20px;
	}
	
	
	header hr
	{
		display: block;
		width: 20%;
	}
	
	header.small
	{
		height: 50px;
	}
	
	header.small #photo_profil
	{
		width: 5%
	}
	
	nav
	{
		width: 30%;
	}
	
	#wrap
	{
		margin-top: 15%;
		padding: 20px;
	}
}
/* END - MEDIA QUERIES */