body{
	width: auto;
	font-family: Arial;
	line-height: 120%;
}

header{
	padding-top: 30px;
}

.container{
	width: 1140px;
	margin: auto;
}

#logo{
	width: 25%;
	float: left;
}

#titre{
	width: 50%;
	float: left;
	text-align: center;
}

#titre h1{
	margin-top: 25px;
	color: #f3ad36;
	font-size: 60px;
	margin-bottom: 30px;
	font-family: "riffic_freebold";
	letter-spacing: 1px;
}

#tel{
	width: 25%;
	float: left;
	color: #de833a;
	margin-top: 40px;
	margin-bottom: 50px;
}

#tel p{
	text-align: center;
	width: 160px;
	display: block;
	border: 1px solid;
	padding-top: 6px;
	padding-bottom: 6px;
	margin-left: 100px;
}

#imgheader{
	margin-top: 30px;
	height: 564px;
	background: url("images/imgheader.jpg");
	text-align: center;
}

#imgheader p{
	color: white;
	text-transform: uppercase;
	font-weight: bold;
	padding-top: 160px;
	font-size: 25px;
	line-height: 35px;
}

#imgheader a{
	text-align: center;
	display: block;
	color: white;
	text-transform: uppercase;
	text-decoration: none;
	padding: 5px 10px;
	border: solid 1px;
	width: 270px;
	margin: auto;
	margin-top: 100px;
	transition: all 200ms;
}

#imgheader a:hover{
	transform: scale(110%);
}

nav{
	margin-top: 10px;
	margin-bottom: 10px;
}

nav li{
	float: left;
	margin-inline: 15px;
}

nav a{
	display: block;
	line-height: 45px;
	text-decoration: none;
	transition: all 200ms;
	font-size: 20px;
	color: gray;
	text-transform: uppercase;
	padding-inline: 28px;
}

nav a:hover{
	color: #f3ad36;
	margin-top: -5px;
	padding-bottom: 5px;

}

#principal{
	background: lightgray;
	padding-top: 30px;
	padding-bottom: 30px;
	text-align: center;
}

#principal a{
	display: block;
	text-decoration: none;
	color: white;
	text-transform: uppercase;
	line-height: 350px;
	font-weight: bold;
}

#principal h2{
	display: inline;
	padding-bottom: 5px;
}

.colonnes3{
	width: 30%;
	margin: 0 1.5%;
	float: left;
}

#principal .colonnes3{
	transition: all 200ms;
	margin-bottom: 30px;
	opacity: 70%;
}

#principal .colonnes3:hover{
	transform: scale(110%);
	opacity: 100%;
	cursor: pointer;
}

#principal a:hover h2{
	border-bottom: 1px solid white;
}

#mur{
	background: url("images/revetement-de-murs.jpg");
}

#sol{
	background: url("images/revetement-de-sols.jpg");
}

#plafond1{
	background: url("images/plafonds-tendus.jpg");
}

#plafond2{
	background: url("images/plafonds-suspendus.jpg");
}

#isolation{
	background: url("images/isolation.jpg");
}

#materiaux{
	background: url("images/materiaux isolants.jpg");
}

#garanties{
	background: #f3ad36;
	height: 250px;
}

#garanties h3{
	text-align: center;
	padding-top: 20px;
	color: white;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 18px;
}

#garanties .colonnes4{
	transition: all 200ms;
}

#garanties .colonnes4:hover{
	transform: scale(110%);
}

.colonnes4{
	width: 22%;
	float: left;
	margin: 0 1.5%;
	text-align: center;
}

.colonnes4 img{
	margin-top: 50px;
}

.colonnes4 p{
	margin-top: 20px;
	color: white;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 13px;
}

#sponsors .colonnes4{
	height: 150px;
	line-height: 150px; 
}

#sponsors h3{
	text-transform: uppercase;
	font-weight: bold;
	font-size: 20px;
	text-align: center;
	margin-top: 30px;
}

.yellow{
	color: #f3ad36;
}

footer{
	background: #303030;
	margin-top: 30px;
	height: 220px;
	padding-top: 45px
}

footer h4{
	color: #f3ad36;
	text-transform: uppercase;
	text-align: left;
	margin-bottom: 10px;
}

footer li{
	color: white;
	text-align: left;
	margin-bottom: 3px;
	font-size: 15px;
}

footer p{
	margin-top: 40px;
	text-align: center;
	color: white;
	text-transform: uppercase;
	font-size: 12px;
}

footer a{
	text-decoration: none;
	color: white;
	transition: all 200ms;
}

footer a:hover{
	color: #f3ad36;
}

.colonnes4 ul{
	margin-bottom: 10px;
}

#pagemurs{
	margin-top: 50px;
	margin-bottom: 50px;
}

#pagemurs h2{
	text-transform: uppercase;
	text-align: center;
	color: gray;
	font-weight: bold;
	font-size: 20px;
}

#pagemurs .container{
	margin-top: 50px;
}

.colonnes2{
	width: 49.5%;
	float: left;
}

#pagemurs .colonnes2 img{
	margin-bottom: 8px;
}

.colonnes2 li{
	color: gray;
	margin-bottom: 3px;
	letter-spacing: 0.5px;
}

#contact{
	margin-top: 50px;
	margin-bottom: 50px;
}

#contact h2{
	text-transform: uppercase;
	text-align: center;
	color: gray;
	font-weight: bold;
	font-size: 20px;
}

#contact .container{
	margin-top: 50px;
}

#contactg{
	margin-right: 10px;
	text-align: right;
	color: gray;
	line-height: 160%;
}

#contactg h3{
	margin-bottom: 20px;
	font-weight: bold;
}

#contactg p{
	margin-bottom: 15px;
}

#contact input[type="text"], #contact input[type="email"]{
	margin-bottom: 30px;
	width: 500px;
	margin-left: 10px;
	padding: 10px;
	font-size: 15px;
	border: 1px solid #de833a;
}

#contact textarea{
	margin-bottom: 30px;
	padding: 10px;
	margin-left: 10px;
	width: 500px;
	font-size: 15px;
	border: 1px solid #de833a;
	height: 200px;
	resize: none;
}

#contact input[type="submit"]{
	margin-left: 175px;
	margin-top: 10px;
	color: #de833a;
	background: white;
	width: 200px;
	font-size: 15px;
	transition: all 200ms;
	padding: 10px;
	border: 1px solid #de833a;
	text-transform: uppercase;
}

#contact input[type="submit"]:hover{
	background: #de833a;
	color: white;
	cursor: pointer;
}

.clear{
	clear: both;
}