body
{
	text-align : center;
	font-family : Arial;
	color : rgb(0, 0, 150);
}

.bandeau
{
	background-color : black;
	color : rgb(150, 255, 200);
	height : 80px;
}

.telephone
{
	display : inline-block;
	/*background-color : yellow;*/
	float : left;
	margin-left : 7%;
	max-width : 100%;
	max-height : 80px;
}

.telephone h2
{
	color : rgb(180, 255, 200);
	font-size : 200%;
}

.telImg
{
	display : inline-block;
	float : left;
	margin-right : 10px;
	margin-top : 25px;
	max-height : 80px;
}

.numero
{
	display : inline-block;
	max-height : 80px;
}

.lieu
{
	display : inline-block;
	/*background-color : yellow;*/
	float : right;
	margin-right : 10%;
	max-height : 80px;
}

.header
{
	background-color : rgb(200, 200, 230);
	color : rgb(180, 255, 200);
	height : 280px;
	border-bottom-style : solid;
	border-top-style : solid;
	border-color : black;
	border-width : 1px;
}

.logo
{
	display : inline-block;
	/*background-color : yellow;*/
	float : left;
	height : 280px;
	width : 310px;
}

.logo img
{
	height : 280px;
	float : left;
	
}

.serrurerie
{
	display : inline-block;
	/*background-color : yellow;*/
	height : 260px;
	width : 860px;
	max-width : 100%;
	margin-top : 10px;

}

.logo2
{
	display : inline-block;
	float : right;
	/*background-color : yellow;*/
	width : 310px;
	height : 280px;
}

.logo2 img
{
	height : 280px;
	float : right;
}



.presentation img
{
	width : 100%;
	border-top-style : solid;
	border-color : black;
	border-width : 5px;
	margin-bottom : 0px;
}

.menu
{
	float : right;
	width : 300px;
}

p
{
	text-align : left;
	margin-left : 20%;
	margin-right : 20%;
	margin-bottom : 50px;
	color : rgb(0, 70, 60);
}

p img
{
	float : left;
	margin : 20px;
}

h2
{
		color : rgb(0, 70, 60);
}

.tva
{
	display : block;
	text-align : center;
	margin-left : auto;
	margin-right : auto;
}

ul
{
	list-style-type : none;
	margin : 0;
	padding : 0;
	width : auto;
	background-color : rgb(200, 200, 230);
	font-weight : bold;
	font-size : 150%;
}

li a
{
	display : block;
	color : black;
	padding : 8px 16px;
	text-decoration : none;
	
}

li a:hover
{
	background-color : black;
	color : rgb(150, 255, 200);
}


.footer
{
	background-color : rgb(200, 200, 230);
	text-align : center;
	margin-top : 0px;
	padding-top : 10px;
	padding-bottom : 10px;
}

.footer p
{
	text-align : center;
	color : black;
}

.footer h3
{
	color : rgb(0, 20, 10);
}

.footer h2
{
	color : rgb(0, 20, 10);
}

.footer a
{
	color : blue;
}

.footer h4
{
	color : black;
	font-size : 70%;
}

.footer h1
{
	color : black;
	font-size : 70%;
}

@media (max-width : 1500px)
{
	.header
	{
		height : 240px;
	}
	
	.serrurerie
	{
		width : 700px;
		height : 220px;
	}
	
	.serrurerie img
	{
		width : 680px;
	}
	
	.logo
	{
		height  : 240px;
		width : 260px;
	}
	
	.logo2
	{
		height  : 240px;
		width : 260px;
	}
	
	.logo img
	{
		height : 240px;
	}
	
	.logo2 img
	{
		height  : 240px;
	}
}

@media (max-width : 1300px)
{
	

	
.logo
{
	display : none;
}

.logo2
{
	display : none;
}

.logo img
{
	display : none;
}

.logo2 img
{
	display : none;
}

.lieu
{
	font-size : 50%;
	margin-top : 20px;
}
}

@media (max-width : 1000px)
{
	


.lieu
{
	font-size : 48%;
	margin-top : 21px;
}
	
}

@media (max-width : 900px)
{
	
	
.bandeau
{
	font-size : 60%;
	height : 60px;
	
}

.telephone
{
	height : 40px;
	margin-top : 10px;
}

.telImg img
{
	height : 20px;
	width : auto;
	margin : auto;
	position : relative;
	bottom : 5px;
	margin-right : 5px;
	margin-top : -3px;
}

.header
{
	max-width : 100%;
	height : auto;
	max-height : 270px;
	
}

.lieu
{
	font-size : 45%;
	margin-top : 22px;
}

.serrurerie
{
	height : 250px;
}

.serrurerie img
{
	max-width : 100%;
	height : auto;
	
}

p img
{
	display : none;
}	
	
}

@media (max-width : 700px)
{
	
.header
{
	max-width : 100%;
	height : auto;
	max-height : 220px;
}

.lieu
{
	font-size : 40%;
	margin-top : 25px;
}

.serrurerie
{
	height : 220px;
}

}

@media (max-width : 500px)
{

.bandeau
{
	height : 100px;
}

.header
{
	max-width : 100%;
	height : auto;

}

.telImg img
{
	height : 15px;
	width : auto;
	margin : auto;
	position : relative;
	bottom : 5px;
	margin-right : 2px;
	margin-top : -2px;
}

.lieu
{
	float : left;
	margin-left : 7%;
	font-size : 60%
}

.serrurerie
{
	height : 140px;
}

}
