body{
	font-family: 'Century Gothic', Calibri, serif;
	font-size: 13 px;
	margin: 0px;
	padding: 0px;
}

h1{
	font-size: 30px;
	font-weight : normal;
	text-align: center;
}

header{
	height: 100px;
}

footer{
	height: 80px;
	padding-top: 30px;
	text-align: center;
	background-color: #C5C5C5;
	border-top: 2px solid #AAA;
}

nav{
	width: 100%;
	background-color : #424558;
}

nav ul {
	margin: 0px;
	padding: 0px;
}

nav li{
	list-style-type: none;
	float: left;
}

nav a{
	display: inline-block;
	text-decoration: none;
	padding: 20px 30px;
	color: #FFF;
	text-transform: uppercase;
	font-size: 15px;
}
.table{
	display: table;
	margin: 0 auto;
}
.menu-ind:hover, .presentation{
	border-top: 5px solid #4C8;
	background-color: RGBa(64, 200, 130, 0.15);
}
.menu-exp:hover, .parcours{
	border-top: 5px solid #f1dc4f;
	background-color: RGBa(241, 211, 79, 0.15);
}
.menu-hob:hover, .competences{
	border-top: 5px solid #0070BB;
	background-color: RGBa(000, 112, 192, 0.15);
}
.menu-con:hover, .recommandation{
	border-top: 5px solid #e44d26;
	background-color: RGBa(228, 77, 38, 0.15);
}
nav li:hover a{
	padding: 15px 30px 20px 30px;
}

section{
	widht: 100%;
	min-height: 300px;
	padding-bottom: 10px;
	margin-bottom: 10px;
}

.sec{
	margin: 0px 10%;
}

.left{
	float: left;
	width: 30%;
}
.right{
	float: left;
	width: 70%;
}
.cleft, .cright, .sousleft, .sousright{
	width: 50%;
	float: left;
}

.sec::after, .exp::after, .reco::after{
	content: "";
	display: table;
	clear: both;
}

.brown {
	border-top: 5px solid #A52A2A;
	background-color: RGB(165, 42, 42);
	margin-bottom: 0px;
}
.orange{
	border-top: 5px solid #e47d26;
	background-color: RGBa(228, 117, 38, 0.15);
	margin-bottom: 0px;
}
.rose{
	border-top: 5px solid #e44d96;
	background-color: RGBa(228, 77, 128, 0.15);
	margin-bottom: 0px;
}
.vert{
	border-top: 5px solid#5f6;
	background-color: RGBa(70, 240, 80, 0.15);
}
.bleu{
	border-top: 5px solid #29c;
	background-color: RGBa(30, 152, 212, 0.15);
}
.jaune{
	border-top: 5px solid #f3e241;
	background-color: RGBa(240, 255, 69, 0.15);
}
.rouge{
	border-top: 5px solid #e44d26;
	background-color: RGBa(228, 77, 38, 0.15);
}
.leftexp{
	width: 45%;
	float: left;
}
.rightexp{
	width: 50%;
	float: left;
	margin-left: 5%;
}

leftexp img{
	width: 100%;
	max-width: 400px;
}

form {
  margin: 0 auto;
  width: 400px;
  padding: 1em;
  border: 1px solid #CCC;
  border-radius: 1em;
}

form div + div {
  margin-top: 1em;
}

label {
  display: inline-block;
  width: 90px;
  text-align: right;
}

input, textarea {
  font: 1em sans-serif;
  width: 300px;
  box-sizing: border-box;
  border: 1px solid #999;
}

input:focus, textarea:focus {
  border-color: #000;
}

textarea {
  vertical-align: top;
  height: 5em;
}

.button {
  padding-left: 90px;
}

button {
  margin-left: .5em;
}

@media screen  and (max-width: 780px){
	header{
		height: 50px;
	}
	h1{
		font-size: 28px;
		margin: 20px 0px 0px 0px;
	}
	nav li a{
		font-size: 12px;
		padding: 10px;
	}
	nav li:hover a{
		padding: 5px 10px 10px 10px;
	}
}