/* DESIGN DES SECTIONS PROJETS */

.projet{
	padding-top: 80px;
	padding-bottom: 80px;
}

@media (max-width: 575.98px) { 
	.projet{
		padding-top:40px;
		padding-bottom: 40px;
	}
 }

@media (min-width: 576px) and (max-width: 767.98px) { 
	.projet{
			padding-top:40px;
			padding-bottom: 40px;
		}
 }

.fonce{
	background-color:#343a40;
}

.clair{
	background-color:#ffffff;
}

.moyen{
	background-color:#ededed;
}

hr{
	margin:0px;
}

.projet h3{
	color:#8ac640;
}


@media (max-width: 575.98px) { 
	.projet h3{
		padding-top:25px;
	}
 }

@media (min-width: 576px) and (max-width: 767.98px) { 
	.projet h3{
			padding-top:25px;
		}
 }

.fonce h4{
	color:#ffffff;
}

.clair h4{
	color:#5a5a5a;
}

.moyen h4{
	color:#5a5a5a;
}

.projet p{
	font-size:18px;
}

.fonce p{
	color:#ffffff;
}

.clair p{
	color:#5a5a5a;
}

.moyen p{
	color:#5a5a5a;
}

/* DESIGN DE l'EN-TETE */

.haut{
	background-color:#111315;
}

.haut h1{
	color:#ffffff;
	text-align:center;
	font-size:50px;
}

.titre{
	padding-bottom:50px;
	background-image: url("../img/portfolio/infographies/en_tete.jpg");
	background-size: cover;
	background-position: center;
}

@media (max-width: 575.98px) { 
	.titre{
		padding-bottom: 20px;
	}
	
	.haut h1{
		font-size:36px;
	}
 }

@media (min-width: 576px) and (max-width: 767.98px) { 
	.titre{
			padding-bottom: 20px;
		}
		
	.haut h1{
		font-size:36px;
	}
 }

/* BOUTONS */

.bouton {
	padding: 20px;
	background-color:#1f2226;
}

.bouton span{
	padding: 10px;
	margin-top:10px;
	background-color:#DA6246;
	display: block;
	border-radius:5px;
}

.bouton span:hover{
	background-color:#994c3a;
}

.btn-primary:hover{
	background-color:#994c3a;
}