@font-face {
font-family: 'jiffy';
src: url('../font/jiffy.eot');
src: url('../font/jiffy.ttf');
src: url('../font/jiffy.svg');
src: url('../font/jiffy.woff');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'avantgarde';
src: url('../font/avantgardeITC-book.eot');
src: url('../font/avantgardeITC-book.ttf');
src: url('../font/avantgardeITC-book.svg');
src: url('../font/avantgardeITC-book.woff');
font-weight: normal;
font-style: normal;
}

html,body {
	font-family: 'avantgarde', Arial, myriad pro, sans-serif;
	font-weight: 400;
	font-size: 1em;
	color: #fff;
	background-color:#fff;
	margin:0;
	padding:0;
	min-height: 100%;
}

*::selection {
	background:#a7a7a7;
	color:#fff;
}

*::-moz-selection {
	background:#a7a7a7;
	color:#fff;
}

*::-webkit-selection {
	background:#a7a7a7;
	color:#fff;
}

*::-khtml-selection {
	background:#a7a7a7;
	color:#fff;
}

*::ô-selection {
	background:#a7a7a7;
	color:#fff;
}

body *
{	
  -webkit-font-smoothing: antialiased;
}

p
{
	font-size:13px;
	margin:0;
	color:#000
}

h1
{
	font-size: 50px;
	color:#000;
	font-family:'jiffy', arial, myriad pro, sans-serif;
	margin:0;
	text-align:left;
	border-bottom:1px solid #000;
}

h2 {
	font-size: 30px;
	color: #000;
	font-family: 'jiffy', arial, myriad pro, sans-serif;
	margin:0;
	text-align:center;
	margin-bottom:30px;
}

h3 {
	font-size: 1.2em;
	color: #000;
	font-family: 'avantgarde', Arial, myriad pro, sans-serif;
	text-transform:uppercase;
	text-align:center;
	color:#454545;
	margin:0;
}

h4 {
	font-size: 14px;
	color: #000;
	font-family: 'avantgarde', Arial, myriad pro, sans-serif;
	text-align:left;
	margin:0;
	padding:0;
}

h5 {
	font-size: 1.3em;
	color: #000;
	font-family: 'avantgarde', Arial, myriad pro, sans-serif;
}


h6 {
	font-size: 1.1em;
	color: #000;
	font-family: 'avantgarde', Arial, myriad pro, sans-serif;
	text-transform:uppercase;
	text-align:center;
	color:#454545;
	margin:0;
}

img {
	max-width: 100%;
}

a {
	color: #000;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

ul li {
	font-size:13px;
	margin:0;
	color:#000;
}

ul {
	font-size:13px;
	color:#000
}

header
{
	position:fixed;
	height:60px;
	width:100%;
	z-index:100;
	margin:0;
	left:0;
	top:0;
	float:left;
}

#header1
{
	height:30px;
	box-shadow:0 0 3px #585858;
	position:relative;
	width:100%;
	background:#fff;
}

#header1-content
{
	width:1000px;
	padding-top:5px;
	margin:0 auto;
}

#header1-content
{
	width:100%;
	padding:6px 10px 0 10px;
	margin:0 auto;
	height:auto;
}

#mots-cles
{
	float:left;
	width:90%;
}

#facebook
{
	width:22px;
	height:22px;
	position:relative;
	float:right;
	right: 3%;
}

#facebook a img
{
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
}

#facebook a:hover img
{
	opacity:0.5;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
}

#header2
{
	height:30px;
	background:rgba(0,0,0,0.5);
	position:relative;
	width:100%;
}

#header2-content
{
	width:1000px;
	padding-top:5px;
	margin:0 auto;
}

#menu
{
	
}

#menu p
{
	text-align:center;
	padding-top:6px;
	color:#fff;
}

#menu p span
{
	margin:0 20px;
}

#menu a
{
	color:#fff;
	text-transform:uppercase;
	font-size:15px;
	letter-spacing:2px;
}

#main-illustration
{
	width:100%;
	height:400px;
	margin-top:-30px;
	position:relative;
	left:0;
	background: url("../images/main-illustration.jpg") no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	z-index:50;
	float:left;
}

#logo
{
	position:relative;
	margin:150px auto 0 auto;
	width:250px;
	height:203px;
}

/*** Content ***/

#presentation-humagnitude
{
	width:60%;
	height:auto;
	position:relative;
	margin:100px 20% 0 20%; 
}

#presentation-humagnitude-bloc1
{
	width:30%;
	height:auto;
	float:left;
}

#presentation-humagnitude-bloc2
{
	width:70%;
	height:auto;
	float:left;
	text-align:left;
}

#presentation-humagnitude-bloc2 h3
{
	text-align:left;
	margin-bottom:10px;
}

#main
{
	position:relative;
	z-index:60;
	width:100%;
	float:left;
	height:auto;
	background:#fff;
	box-shadow:0 0 5px #585858;
}

#content
{
	position:relative;
	width:1000px;
	height:2300px;
	background:#fff;
	margin:0 auto;
	padding:0 20px;
}

.part
{
	float: left;
    height: auto;
    padding: 50px 0 50px;
    width: 100%;
}

.title
{
	height:80px;
	padding:20px 20px 0 20px;
	width:100%;
	float: left;
}

.title-content
{
	float:left;
	background:url("../images/fond-h1.png") no-repeat left 0;
	height:80px;
	padding:10px 0 0 20px;
}

.bloc-text-1col
{
	width:auto;
	height:auto;
	position:relative;
	padding:0 20px;
	float:left;
}

.bloc-text-2col
{
	width:100%;
	height:auto;
	position:relative;
	padding:0 20px;
	float:left;
}

.bloc-text-2col-col1, .bloc-text-2col-col2
{
	width:48%;
	height:auto;
	position:relative;
	float:left;
	margin:1%;
}

.bloc-text-2col-col1 a img, .bloc-text-2col-col2 a img
{
	width:100%;
	height:auto;
}



.bloc-text-3col
{
	width:auto;
	height:auto;
	position:relative;
	padding:0 20px;
	float: left;
	margin-top:50px;
}

.bloc-text-3col .col
{
	width:29%;
	height:auto;
	position:relative;
	margin:0 20px;
	float:left;
}

.title2
{
	background: rgba(0,0,0,0.7);
    bottom: 0;
    height: 40px;
    position: absolute;
    text-align: center;
    width: 100%;
}

.title2 h2
{
	color:#fff;
}

.title3
{

    bottom: 0;
    position: relative;
    width: 100%;
   
}

.title3 h2
{
	color:#000;
	 text-align:left;
}

.text-col
{
	width:100%;
	height:auto;
	margin-top:15px;
	float:left;
}

.text-col p
{
	text-align:center;
}

.bloc-text-2col-col1 p, .bloc-text-2col-col2 p
{
	text-align:left;
}

.img-vignette
{
	height: 155px;
    position: relative;
}

.sep-part
{
	position:relative;
	width:100%;
	margin:50px 0;
	height:15px;
	float:left;
}

.sep-part-img
{
	position:relative;
	width:715px;
	height:15px;
	margin:0 auto;
}

#txt-contact
{
	width:auto;
	height:auto;
	position:relative;
	padding:0 20px;
	text-align:center;
}


#txt-mentions
{
	width:auto;
	height:auto;
	position:relative;
	padding:0 20px;
	text-align:center;
}


/***********************************
************* Tablet ***************
**************************************/
@media screen and (max-width: 1024px) 
{
	#mots-cles
	{
		width:80%;
		padding-left:20px;
	}
	
	#facebook
	{
		width:10%;
	}
	
	#content
	{
		width:800px;
	}
	
	.bloc-text-3col .col
	{
		padding:0 1%;
		width:31%;
	}
}


/***********************************
************* Tablet ***************
**************************************/
@media screen and (max-width:768px) 
{
	#content
	{
		width:90%;
		padding:0;
	}
	
	.sep-part
	{
		display:none;
	}
	
	#menu a
	{
		font-size:13px;
		letter-spacing:0;
	}
	
	.bloc-text-3col .col
	{
		width:100%;
		margin-bottom:50px;
		padding:0;
	}
	
	.bloc-text-3col .col a img
	{
		width:100%;
	}
	
}

/***********************************
************* Tablet ***************
**************************************/
@media screen and (max-width:600px) 
{
	.title
	{
		height:auto;
		margin-bottom:30px;
		padding:20px 0px 0;
	}
	
	#header2
	{
		height:auto;
		float: left;
	}
	
	#menu a
	{
		float: left;
		width: 100%;
		margin-bottom:5px;
	}
	
	#menu p span
	{
		display:none;
	}
	
	.title-content
	{
		height:auto;
	}
	
	.bloc-text-1col
	{
		padding:0;
	}
	
	.bloc-text-3col
	{
		padding:0;
	}
	
	#txt-contact
	{
		padding:0;
	}
	
	#txt-mentions
	{
		padding:0;
	}
}

/***********************************
************* Tablet ***************
**************************************/
@media screen and (max-width:480px) 
{
	#header1-content
	{
		padding:0px 5px 0;
	}
	
	#mots-cles
	{
		padding:8px 0 0 0 ;
	}
	
	h4
	{
		font-size:10.5px;
	}
	
}