body, html{
	margin:0;
	height: 100%;
}

@font-face {
    font-family: 'montserratregular';
    src: url('monserrat/montserrat-regular-webfont.eot');
    src: url('monserrat/montserrat-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('monserrat/montserrat-regular-webfont.woff2') format('woff2'),
         url('monserrat/montserrat-regular-webfont.woff') format('woff'),
         url('monserrat/montserrat-regular-webfont.ttf') format('truetype'),
         url('monserrat/montserrat-regular-webfont.svg#montserratregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

h1 { font-family: "Kimberley", sans-serif }

/* tableau de bord */

header{
	margin: auto;
	background-color: white;
	padding-bottom:12px;
	width:925px;
	display:block;
}

#firstline{
	
}

.logo{
	float:left;
	padding-top:20px; 
	width:190px;
}

#info{
	float:left;
	width:550px;
	height: 3em;
	padding-top:35px;
}

#categorie{
	text-align: center;
	font-family: 'montserratregular', sans-serif;
	font-weight: 700;
}

#article{
	text-align: center;
	font-family: 'montserratregular', sans-serif;
}

#boiteheadpicto{
	float: left;
	width:40px;
	height:40px;
	margin: 35px 5px 0px 5px;
}


#headpicto{
	width: 30px;
	display: block;
	margin: auto;
	transition: width 0.2s, margin-top 0.2s;
	margin-top:5px;
}

#headpictoselected{
	width: 40px;
}

#boiteheadpicto:hover #headpicto {
    width: 40px;
	margin-top:0px;
}

#menu{
	clear: both;
	padding-top: 12px;
	display: table; 
	margin: auto;
}

/* système de pictos */

#tableau{
	width:900px;
	margin : auto;
	padding-top: 150px;
}

#boitepicto{
	width:40px;
	height:40px;
	float:left;
}

#picto{
	width:10px;
	display: block;
	margin: auto;
	transition: width 3s, margin-top 3s;
	margin-top: 15px;
}

#pictoselected{
	width:40px;
}

#boitepicto:hover #picto {
    width: 40px;
	margin-top:0px;
	transition: width 0.25s, margin-top 0.25s;
}

/* mise en page contenus */


#contenu{
	padding-top: 30px;
	width:900px;
	margin:auto;
}

	/*typo */

	p{
		font-family: 'Montserrat', sans-serif;
		font-size: 15px;
		line-height:22px;
		padding-top: 50px;
		padding-bottom: 20px;
	}

	#pcentre{
		width:650px;
		margin: auto;
		margin-top: 25px;
	}
	
	#gras{
		font-weight:700;
	}
	
	#contenu a{
		color:black;
		font-weight:700;
	}

	/*images */
	
	#imageintro{
		width: 900px;
	}

	
	#imagevid{
		width: 400px;
		padding: 30px 50px 50px 30px;
		float:left;
		display: inline;
	}

	#imagevidcentre{
		width: 400px;
		padding: 30px 30px 50px 30px;
		display: table;
		margin: auto;
	}
	
	/*picto */
	
	#pictocontenu{
		width: 80px;
		display: block;
		margin: auto;
		transition: width 0.2s, margin-top 0.2s;
		margin-top:8px;
	}
	
	#boitepictocontenu{
		float: left;
		width: 96px;
		height:96px;
		margin: 50px;
	}
	
	#boitepictocontenu:hover #pictocontenu {
		width: 96px;
		margin-top:0px;
		transition: width 0.25s, margin-top 0.25s;
	}
	
	.centragepicto{
		display: table;
		margin: auto;
	}

/* footer */

#bas{
	padding-top:30px;
	clear: both;
}

#credits{
	float: right;
	color:#BBBBBB;
	font-family: 'Montserrat', sans-serif;
	padding-bottom: 30px;
}