@font-face {
  font-family: RobotoUThin;
  src: url(Roboto/Roboto-Thin.ttf);
}

@font-face {
  font-family: RobotoThin;
  src: url(Roboto/Roboto-Light.ttf);
}

@font-face {
  font-family: Roboto;
  src: url(Roboto/Roboto-Regular.ttf);
}

body
{
	padding: 0;
	margin: 0;
	background-color : #eee;
	font-size : 20px;
}

a
{
	color: rgb(0,130,255);
}

a:hover
{
	color: rgb(100,130,255);
}

#title_background
{
	background-color: rgb(0, 100, 230);
	height: 110px;
	width: 100%;	
	padding-top : 10px;
}

#title
{
	width: 655px;
	margin: 0 auto 0 auto;
	font-family: "RobotoUThin";
	font-size : 80px;
	color: white;
}

#menu_background
{
	background-color: rgb(0, 130, 260);
	height: 50px;
	width: 100%;
}

#menu
{
	width: 655px;
	margin: 0 auto 0 auto;
}

#menu a
{
	width: 214px;
	display: inline-block;
	text-align: center;
	color: white;
	font-family: "RobotoUThin";
	Font-size : 28px;
	text-decoration: none;
	height: 35px;
	margin-top:7px;
}

#menu a:hover
{
	background-color : rgba(255,255,255,0.3);
}


.content_bloc
{
	width: 900px;
	color : black;
	margin : 20px auto 20px auto;
	background-color: white;
}

.content_bloc h1
{
	font-family: "RobotoUThin";
	font-size : 30px;
	margin : 30px 30px 30px 40px;
	display: inline-block;
}

.content_bloc h2
{
	font-family: "RobotoUThin";
	font-size : 23px;
	margin : 0px 30px 0px 40px;
	color : #111;
}

.oneSection
{
	font-family: "Roboto";
	font-size : 18px;
	margin : 0px 30px 20px 40px;
	display: inline-block;
	text-align: justify;
	color : #555;
}

.myObjectif
{
	font-family: "Roboto";
	color : black;
}
.skills
{
	font-family: "RobotoThin";
	margin : 20px 30px 30px 40px;
	font-size : 18px;
	color : black;
}

.skills table
{
	display: inline-block;
	margin : 0 15px 0 15px;
	text-align: center;
}

.skills img
{
	width: 14px;
	height: 14px
}

#footer_background
{
	height : 160px;
	/*background-color: rgba(0,0,0,0.1);*/
}

#footer_content
{
	width: 900px;
	color : black;
	margin : 10px auto 10px auto;
	font-family: "Roboto";
}

#show_mail
{
	cursor: pointer;
}


@media screen and (max-width: 920px) 
{
	.content_bloc, #footer_content
	{
		width: 690px;
	}
}

@media screen and (max-width: 710px) 
{
	.content_bloc, #footer_content
	{
		width: 520px;
	}
	
	
	#title_background
	{
		height: 80px;	
	}

	#title
	{
		width: 510px;
		Font-size : 60px;
	}

	#menu_background
	{
		height: 41px;
	}

	#menu
	{
		width: 510px;
	}

	#menu a
	{
		width: 161px;
		Font-size : 27px;
		height: 35px;
		margin-top:3px;
	}
}

@media screen and (max-width: 520px) 
{
	.content_bloc, #footer_content
	{
		width: 100%;
	}
	
	#title_background
	{
		height: 60px;	
	}

	#title
	{
		width:283px;
		Font-size : 34px;
		font-family: "RobotoThin";
		margin-top : 5px;
	}

	#menu_background
	{
		height: 117px;
	}

	#menu
	{
		width: 283px;
	}

	#menu a
	{
		width: 283px;
	}
}