/*************************/
/*  PARAMETRES GENERAUX  */
/*************************/
/* top right bottom left */

/**[ GLOBAL ]**/

html, body{
	font-family: calibri, sans serif;
	background-color: #2F2F2F;
	font-size: 16px;
	margin: 0;
	padding: 0;
}

h1{
	position: relative;
	text-align: center;
	color: white;
	font-size: 2.3rem;
	font-family: 'Anaheim', sans-serif;
	margin-top: -110px;
	background-color: black;
	opacity: 0.7!important;
}

h2{
	width: 90%;
	font-size: 1.4rem;
	font-family: 'Anaheim', sans-serif;
	text-align: center;
	border-bottom: 1px #2F2F2F solid;
	color: #2F2F2F;
	margin: 50px auto 0 auto;
}

h3{
	font-size: 1.9rem;
	font-family: 'Anaheim', sans-serif;
	text-align: center;
	color: #8F8F8F;
	margin-top: 50px;
}

h4{
	position: relative;
	font-size: 1.5rem;
	font-family: 'Anaheim', sans-serif;
	color: #8F8F8F;
	margin: 25px 0 10px 0; padding: 0;
	margin-left: -20px;
}

h5{
	font-size: 1.3rem;
	line-height: 1.7rem;
	vertical-align: middle;
	font-family: 'Anaheim', sans-serif;
	font-weight: normal;
	background-color: #2F2F2F;
	color: rgba(255,255,255,0.7);
	margin: 15px auto 15px auto;
	text-align: center;
	padding: 5px 0;
}


#page{
}

#section_gauche{
	width: 290px;
	height: 100%;
	background-color: #2F2F2F;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	-o-box-sizing: border-box; 
	box-sizing: border-box;
	padding: 0;
	position: fixed;
	z-index: 2;
}

#section_centre{
	width: 69%;
	height: 100%;
	margin: 0 0 0 290px;
	background-color: white;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	-o-box-sizing: border-box; 
	box-sizing: border-box;
}



/**********************/
/**[ SECTION GAUCHE ]**/
/**********************/

/**[ HEADER ]**/
#header{
	width: 95%;
	height: 150px;
	text-align:center;
	line-height: 150px;
	margin: 0 auto;
}

#header img{
	vertical-align: middle;
	-webkit-transition: all 0.7s ease-out;
    -moz-transition: all 0.7s ease-out;
	-o-transition: all 0.7s ease-out;
    transition: all 0.7s ease-out;
}

#header img:hover{
	background-color: rgba(0,0,0,0.3);
	-webkit-transition: all 0.7s ease-out;
    -moz-transition: all 0.7s ease-out;
	-o-transition: all 0.7s ease-out;
    transition: all 0.7s ease-out;
}


/**[ NAV ]**/
#nav{
	width: 100%;
	height: 370px;
	margin: 0; padding: 0;
	text-align: center;
}

.nav{
	width: 100%;
	height: 78px;
	line-height: 78px;
	background-color: #4F4F4F;
	display: inline-block;
	margin: 0 auto 2px auto;
	text-align: left;
	-webkit-transition: all 0.7s ease-out;
    -moz-transition: all 0.7s ease-out;
	-o-transition: all 0.7s ease-out;
    transition: all 0.7s ease-out;
}

#nav li{
	list-style: none;
}

#nav i{
	margin: auto 30px auto 20px;
	padding: 0;
	width: 40px;
	color: #8F8F8F;
	line-height: 78px;
	vertical-align: middle;
	text-shadow: 3px 2px 3px #3C444C;
	text-align: center;
	-webkit-transition: all 0.7s ease-out;
    -moz-transition: all 0.7s ease-out;
	-o-transition: all 0.7s ease-out;
    transition: all 0.7s ease-out;
}

#nav a{
	color: #8F8F8F;
	text-decoration: none;
	font-size: 130%;
	line-height: 78px;
	-webkit-transition: all 0.7s ease-out;
    -moz-transition: all 0.7s ease-out;
	-o-transition: all 0.7s ease-out;
    transition: all 0.7s ease-out;
}

#nav a:hover .nav, #nav a:focus .nav{
	color: white;
	background: #6F6F6F;
}

#nav a:hover .nav i , #nav a:focus .nav i{
	color: white;
}

#en-cours a, #en-cours i{
	color: white;
}

/**[ SOCIAL ]**/
#social{
	width: 100%;
	height: 25px;
	display: inline-block;
	text-align: center;
}

.twitter, .vimeo, .facebook, .linkedin{
	background-color: white;
}

.twitter:hover, .twitter:focus{
	background-color: #83CBF3;
}

.vimeo:hover, .vimeo:focus{
	background-color: #5BC8FF;
}

.facebook:hover, .facebook:focus{
	background-color: #4A6EA9;
}

.linkedin:hover, .linkedin:focus{
	background-color: #1060A6;
}

#social img {
	background-repeat: no-repeat;
	width: 25px;
	height: 25px;
	margin-right: 5px;
	-webkit-transition: all 0.7s ease-out;
    -moz-transition: all 0.7s ease-out;
	-o-transition: all 0.7s ease-out;
    transition: all 0.7s ease-out;
	-webkit-background-size: 50px 50px;
	-moz-background-size: 50px 50px;
	-o-background-size: 50px 50px;
	background-size: 50px 50px;
}

#social img:hover {
	-webkit-transition: all 0.7s ease-out;
    -moz-transition: all 0.7s ease-out;
	-o-transition: all 0.7s ease-out;
    transition: all 0.7s ease-out;
}


/**[ FOOTER ]**/
#footer{
	height: 200px;
	margin-top: 35px;
	text-align: center;
}

.footerimg{
	display: inline-block;
	text-align: center;
	color: white;
	width: 110px;
	
}

#footer p{
	color: grey;
	margin-top: 20px;
}

#footer a{
	text-decoration: none;
	color: white;
	font-size: 0.95rem;
}

#footer a:hover, #footer a:focus{
	color: #be2d1f;
}


/*******************/
/**[ FIN SECTION ]**/
/*******************/


/**********************/
/**[ SECTION CENTRE ]**/
/**********************/

#title{
	width: 100%;
	height: 400px;
}

#title img{
	width: 100%;
	height: 400px;
}

.blank{
	width: 100%;
	height: 50px;
	content: " ";
	background: white;
	position: relative;
	top:-22px;
	left:0;
	right:0;
	bottom: 0;
	-webkit-transform: skewY(-2deg);  
	-moz-transform: skewY(-2deg);
	-o-transform: skewY(-2deg);
	transform: skewY(-2deg);
}

#container{
	width: 100%;
}

.img{
	width: 100%;
}

.img img{
	width: 100%;
	height: auto;
	max-height: 250px;
}

.story{
	margin: 0 0 15px 0;
	width: 100%;
	height: auto;
}

.story + .story{
	margin-top: 125px;
}

.story blockquote{
	width: 80%;
	color: #8F8F8F;
	text-align: justify;
	height: auto;
	line-height: 2rem;
	font-size: 1.35rem;
	font-weight: lighter;
	margin: 20px auto;
}

.story blockquote i{
	line-height: 1rem;
	font-size: 0.8rem;
	vertical-align: middle;
	padding:0 5px 0 20px;
}

.story ul{
	width: 95%;
	padding: 0; margin: 10px 0 0 0;
	list-style: none;
	list-style-position: outside;
	text-indent: -25px;
}

.story li{
	padding-left: 30px;
	list-style: none;
}

.story p{
	width: 20%;
	color: #8F8F8F;
	text-align: center;
	height: auto;
	line-height: 1.7rem;
	font-size: 1.2rem;
	margin: 50px auto;
	padding: 3px;
	border: 1px #8F8F8F solid;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	-o-border-radius: 6px;
	border-radius: 6px;
}

.story p i{
	font-size: 1.2rem;
	color: #8F8F8F; 
	margin: 5px;
}

.story span{
	font-size: 0.8rem;
	padding-left: 37px;
}

.story a{
	color: #8F8F8F;
	text-decoration: none;
	font-weight: bold;
}

.story a:hover, .story a:focus{
	color: #be2d1f;
	text-decoration: underline;
}

.td{
	width: 47%;
	height: 225px;
	margin: 0;
	padding: 0 15px;
	font-size: 1.1rem;
	line-height: 1.3rem;
	display: inline-block;
	vertical-align: middle;
	text-align: justify;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	-o-box-sizing: border-box; 
	box-sizing: border-box;
}

.td + .td{
	margin-left: 30px;
}

.td p{
	width: 95%;
	color: #8F8F8F;
	text-align: justify;
	line-height: 1.8rem;
	font-size: 1.3rem;
	border: none;
	margin: 0 0 0 5px; padding: 0;
}

.td li{
	width: 85%;
	color: #8F8F8F;
	text-align: justify;
	line-height: 1.7rem;
	font-size: 1.3rem;
	border: none;
	margin: 0; padding: 0;
	
	padding-left: 40px;
	list-style: none;
	list-style-position: outside;
	text-indent: -25px;
}

.td .pastille{
	position: relative;
	float: left;
	z-index: 1;
	text-align: center;
	background-color: #fff;
	width: 50px;
	height: 50px;
	line-height: 48px;
	margin-left: -10px;
	margin-top: 6.5px;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-o-border-radius: 50%;

}

.td .pastille i{
	color: #2F2F2F;
	padding: 0; margin: auto;
	font-size: 1.3rem;
	line-height: 52px;
	vertical-align: middle;
}

.td .pastille img{
	width: 50px;
	height: 25px;
	vertical-align: middle;
}


#hdp{
	text-align: right;
	bottom: 1%;
	margin-top: 5%;
}

#footer_info{
	width: 100%;
	height: 200px;
	background-color: black;
	text-align: center;
	line-height: 200px;
	vertical-align: middle;
}

#footer_info a{
	color: white;
	text-decoration: none;
	font-size: 1.5rem;
	-webkit-transition: all .7s;
	-moz-transition: all .7s;
	-o-transition: all .7s;
	transition: all .7s;
}

#footer_info a:hover, #footer_info a:focus{
	color: #be2d1f;
	-webkit-transition: all .7s ease-out;
	-moz-transition: all .7s ease-out;
	-o-transition: all .7s ease-out;
	transition: all .7s ease-out;
}

#footer_info img{
	height: 40px;
	line-height: 200px;
	vertical-align: middle;
	margin-right: 5px;
}

/*******************/
/**[ FIN SECTION ]**/
/*******************/



/**[ CONTACT ]**/

form {
    width: 70%;
	margin: 0 auto;
}

form div + div {
    margin-top: 5px;
}

.article{
	margin-top: 50px;
}

.input{
	width: 49.5%;
	border: none;
	margin: 0 0 5px 0;
	padding: 0;
	float: left;
}

.input + .input{
	margin-left: 1%;
}

input, textarea {
	color: white;
	width: 100%;
	background-color: #2F2F2F;
	margin:0;
    border: none;
	padding: 2px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	-o-box-sizing: border-box; 
	box-sizing: border-box;
	font-family: calibri, sans serif;
	font-size: 1.1rem;
}

input:focus, textarea:focus {
    border: none;
}

input {
	height: 25px;
}

textarea {
    vertical-align: top;
	width: 99.9%;
    height: 300px;
}

.button {
	width: 100%;
	height: 25px;
}

button {
	width: 25%!important;
	line-height: 23px;
	float: right;
	height: 25px;
    	border: 1px #3F3F3F solid;	
	margin: 0;
	background-color: white;
	font-family: calibri, sans serif;
	font-size: 1rem;
}

.button p{
	float: left;
	height: 25px;
	line-height: 25px;
	margin: 0;
	font-family: calibri, sans serif;
	font-size: 1.1rem;
}

button:hover {
	height: 25px;
	line-height: 23px;
	border: 1px #3F3F3F solid;
	background-color: #3F3F3F;
	color: #fff;
}