.titre {
	max-width:70%;
	height:auto;
	margin:auto;
	text-align:center;
}

.titre img {
	max-width:70%;
	height:auto;
	padding-top: 7%;
	padding-bottom: 6%;
}

.chapo {
	width:70%;
	margin:auto;
	margin-top:2%;
	font-size:1em;
	/* text-shadow: 2px 2px 4px rgba(0, 0, 0, 1); */
	background-color:rgba(255,255,255,0.5);
	color:#000;
	padding:20px;
}

p {
	margin:0;
	text-align:center;
	font-family: 'Playfair Display', serif;
	font-weight:400;
}

.boutons {
	margin:auto;
	/* text-align:center; */
	/* width:70%; */
	height:auto;
	/* background:red; */
	padding:0px;
	margin-top:8%;
	width:100%;
}

.intro {
	color:rgba(255,255,255,0.7);
	width:45%;
	margin:auto;
}

.chapitre {
	/* background-color:green; */
	/*padding:6px;*/
	/* margin:10px; */
	margin:10px 5px;
	font-size:0.8em;
/*	background-color:rgba(255,255,255,1);*/
	transition: all ease 0.23s;
	cursor:pointer;
	width:22%;
	/* max-width:300px; */
	height:auto;
	display: inline-block;
	vertical-align: top;
	opacity:1;
}

.chapitre img{
	margin:0;
	width:100%;
}

.chapitre:hover {
	opacity:0.7;
}

strong {
	font-weight:900;
}

.img-responsive {
	position:relative;
	display: block;
	max-width: 100%;
	height: auto;
	margin:auto;
	opacity:0.8;
	transition:all ease 0.2s;
}

.img-responsive:hover{
	opacity:1;
	/* transform:rotate(2deg); */
}

h2 {
	z-index:2;
	margin:0;
	font-family: 'Roboto', Helvetica, Arial, "sans-serif";
	font-weight:700;
}

.logo {
	right:20px;
	bottom:10px;
	position:fixed;
}

.partages {
	right:20px;
	top:10px;
	position:fixed;
}



@media screen and (max-width: 700px){
.intro {
	color:rgba(255,255,255,0.7);
	width:90%;
	margin:auto;
}
	
	.titre img {
		    max-width: 95%;
	}
	.chapo {
	width:80%;
	margin-top:3%;
	font-size:0.9em;
	}
	.boutons {
	width:90%;
	margin-top:3%;
	text-align:center;
	}
	.titre {
	width:90%;
	max-width:90%;
	}
	.partages {
	display:none;
	}
	.boutons .chapitre img{
		width: 100%;
	}
	.boutons .chapitre:nth-child(even) p,.boutons .chapitre:nth-child(even) h2{
	text-align: center;
	}
.chapitre {

	margin:10px;
	margin:10px 5px;
	font-size:0.75em;
	transition: all ease 0.23s;
	cursor:pointer;
	width:85%;
	height:auto;
	display: inline-block;
}
}

@media screen and (min-width:701px) and (max-width:769px){
	.chapitre {		
	width:46%;
}
}

@media screen and (min-width:768px) and (max-width:1400px){

	.boutons, .titre {
		width: 80%;
		max-width:80%;
		
	}

}

@media screen and (min-width:1400px) {

	.boutons {
		width: 80%;
		max-width:80%;
	}
		.titre {
		width: 60%;
		max-width:80%;
	}

}

@media screen and (min-width:701px) and (max-width: 1070px){
	.chapitre {
		height:270px;
	}
}