@media only screen and (max-width:1820px) {
	.titreBX {
	top:25%;
	width:60%;
	left:20%;
	padding:15px 10px;
	margin-bottom:25px
	}
}

@media only screen and (max-width:1700px) {
	.contentMid {
	width:70%;
	margin:0 15%
	}

	#metiers a,
	#metiers a:hover { font-size:12px; width:13%; height:140px; padding:20px 5px 10px 5px }

	#metiers div > a:nth-child(2), #metiers div > a:nth-child(7), #metiers div > a:nth-child(3), #metiers div > a:nth-child(4), #metiers div > a:nth-child(5), #metiers div > a:nth-child(6) { margin:0 1% }
}

@media only screen and (max-width:1500px) {
	#actualitesFooter div article h3,
	#actualitesFooter article h3 a,
	#actualitesFooter article h3 a:hover {
	height:42px;
	font-size:18px
	}

	.titreBX {
	top:20%;
	width:60%;
	left:20%;
	padding:15px 10px;
	margin-bottom:20px
	}

	.titreBX p:nth-child(1) {
	font-size:48px;
	padding:15px 10px
	}

	.titreBX p:nth-child(2) {
	font-size:22px;
	margin:20px 0
	}

	a.btnOrangeDiapo {
	font-size:14px;
	margin:15px 0 0 0;
	padding:9px 34px
	}

	a.btnOrangeDiapo:hover {
	font-size:14px;
	margin:15px 0 0 0;
	padding:9px 34px
	}

	#actualites2 > .contentMid article {
	width:48%;
	margin:0 1% 25px 1%
	}

	#actualites2 > .contentMid article img { margin:0 0 15px 0 }

	#actualites2 > .contentMid article div {
	width:90%;
	margin:0 5%
	}

	#actualites2 > .contentMid article > div h3 {
	height:50px;
	font-size:18px
	}

	#actualites2 > .contentMid article > div div {
	height:100px;
	font-size:16px;
	margin:0 0 20px 0
	}

	#actualites2 > .contentMid article > div a {
	font-size:14px;
	margin:0 0 20px 0
	}
}

@media only screen and (max-width:1400px) {
	#actualitesFooter article p { font-size:14px }

	#actualitesFooter > div > a,
	#actualitesFooter > div > a:hover { width:50%; margin:25px 25% 0 25% }

	#metiers div > h2, #agrements div > h2, #actualitesFooter div > h2 { font-size:26px }

	#diapo2Mask { padding:60px 0 }

	#diapo2Mask h2 { font-size:34px	}
}

@media only screen and (max-width:1300px) {
	.pageTitle, .pageTitle2 { font-size:20px }

	.contentMid {
	width:86%;
	margin:0 7%
	}
	
	#seek { display:none }
}

@media only screen and (max-width:1100px) {
	#actualitesFooter div article h3,
	#actualitesFooter article h3 a,
	#actualitesFooter article h3 a:hover {
	height:35px;
	font-size:15px
	}

	#metiers a,
	#metiers a:hover { font-size:12px; width:25%; height:170px; padding:20px 5px 10px 5px }

	#metiers div > a:nth-child(2), #metiers div > a:nth-child(7), #metiers div > a:nth-child(3), #metiers div > a:nth-child(4), #metiers div > a:nth-child(5), #metiers div > a:nth-child(6) { margin:0 3% 15px 3% }

	.titreBX {
	top:15%;
	width:70%;
	left:15%;
	padding:15px 10px;
	margin-bottom:20px
	}

	.titreBX p:nth-child(1) {
	font-size:38px;
	padding:15px 10px
	}

	.titreBX p:nth-child(2) {
	font-size:20px;
	margin:20px 0
	}

	a.btnOrangeDiapo {
	font-size:12px;
	margin:10px 0 0 0;
	padding:9px 24px
	}

	a.btnOrangeDiapo:hover {
	font-size:12px;
	margin:10px 0 0 0;
	padding:9px 24px
	}
}

@media only screen and (max-width:1000px) {
	.bx-wrapper .bx-prev { left:10px }
	.bx-wrapper .bx-next { right:10px }

	.txt10 { font-size:12px }
	.txt20 { font-size:16px }
	.txt30 { font-size:20px }

	.Muli28 { font-size:23px; font-family:"Muli", sans-serif }
	.Muli26 { font-size:21px; font-family:"Muli", sans-serif }
	.Muli24 { font-size:19px; font-family:"Muli", sans-serif }
	.Muli22 { font-size:17px; font-family:"Muli", sans-serif }
	.Muli20 { font-size:15px; font-family:"Muli", sans-serif }
	.Muli18 { font-size:14px; font-family:"Muli", sans-serif }
	.Muli16 { font-size:13px; font-family:"Muli", sans-serif }
	.Muli14 { font-size:12px; font-family:"Muli", sans-serif }
	.Muli12 { font-size:11px; font-family:"Muli", sans-serif }

	.ssTitle {
	font-size:30px;
	margin:0 0 15px 0
	}

	.contentMid {
	width:100%;
	margin:0;
	padding:0 10px
	}

	#agrements div > div img {
	width:20%;
	margin:0 5% 20px 5%
	}

	#header nav ul li a,
	#header nav ul li a:hover { font-size:12px }

	#header nav > a { padding:10px 25px; font-size:12px }

	#header nav > a img { width:30px }

	#actualites2 > .contentMid article > div h3 {
	height:50px;
	font-size:16px
	}

	#actualites2 > .contentMid article > div div {
	height:100px;
	font-size:12px;
	margin:0 0 10px 0
	}

	#actualites2 > .contentMid article > div a {
	font-size:12px;
	margin:0 0 10px 0
	}
}

@media only screen and (max-width:900px) {
	#actualitesFooter article p { width:60% }

	#agrements { padding:30px 0 45px 0 }

	.titreBX {
	top:15%;
	width:80%;
	left:10%;
	padding:8px;
	margin-bottom:10px
	}

	.titreBX p:nth-child(1) {
	background:none;
	font-size:22px;
	padding:4px
	}

	.titreBX p:nth-child(2) {
	font-size:14px;
	margin:6px 0
	}

	a.btnOrangeDiapo,
	a.btnOrangeDiapo:hover {
	font-size:11px;
	margin:6px 0 0 0;
	padding:5px 14px
	}

	#diapo { width:100%; margin:0 }

	#diapo2Mask { padding:30px 0 }

	#diapo2Mask h2 { font-size:24px	}

	#pageContent { padding:20px 0 }

	#actualites2 { padding:20px 0 }

	#contactForm .case1dA, #contactForm .case1dB {
	width:100%;
	margin:0 0 15px 0
	}

	#contactForm label:not(.labCheck), #contactForm span {
	font-weight:700;
	font-size:14px
	}

	.labCheck {
	font-size:12px;
	font-weight:400
	}

	#contactForm input[type=text], input[type=tel], input[type=email], textarea { font-size:12px }

	#contactForm select { font-size:12px }
}

@media only screen and (max-width:800px) {

	#header > .contentMid > div {
	position:relative;
	display:block;
	width:100%;
	margin:0;
	padding:0
	}

	#header > .contentMid > div img {
	display:block;
	position:relative;
	z-index:0;
	float:left;
	width:40%;
	height:auto;
	margin:12px 30%;
	padding:0;
	top:0;
	left:0
	}

	#home { display:block; width:30px; height:auto; z-index:9980; position:absolute; top:10px; left:10px; outline:none; font-size:26px; cursor:pointer }

	.noMob, #header_pc, #social, #widgets, #header nav, #nav { display:none }
	#left, .alogo_mob, #content, #content ul, .noPc, #contact_mob, #header_mob { display:block }

	#logo_mob {
	display:block;
	width:50%;
	margin:12px 25%
	}

	#left {
	background-color:#0c5991;
	color:white;
	-webkit-overflow-scrolling:touch;
	display:none;
	overflow:auto;
	position:fixed;
	z-index:9999;
	width:85%;
	height:100%;
	top:0;
	bottom:0;
	left:-85%;
	padding:0;
	-webkit-transition: all 250ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
	   -moz-transition: all 250ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
		-ms-transition: all 250ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
		 -o-transition: all 250ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
			transition: all 250ms cubic-bezier(0.250, 0.250, 0.750, 0.750);

	-webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
	   -moz-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
		-ms-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
		 -o-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
			transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750);
	}

	#right {
	background-color:white;
	color:black;
	-webkit-overflow-scrolling:touch;
	display:none;
	overflow:auto;
	position:fixed;
	z-index:9999;
	width:85%;
	height:100%;
	top:0;
	bottom:0;
	left:100%;
	padding:0;
	-webkit-transition: all 250ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
	   -moz-transition: all 250ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
		-ms-transition: all 250ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
		 -o-transition: all 250ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
			transition: all 250ms cubic-bezier(0.250, 0.250, 0.750, 0.750);

	-webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
	   -moz-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
		-ms-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
		 -o-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
			transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750);
	}
	
	#infosFooter {
	margin:10px 0 0 0;
	padding:20px 0 10px
	}

	#infosFooter > div > div:nth-child(1) {
	width:48%;
	text-align:center
	}

	#infosFooter > div > div:nth-child(1) img {
	width:95%;
	margin:0 5% 15px 0;
	}

	#infosFooter > div > div:nth-child(1) p { width:95% }

	#infosFooter > div > div:nth-child(2) {
	width:48%;
	text-align:center;
	margin:0 0 0 4%
	}

	#infosFooter > div > div:nth-child(2) p:nth-child(2),
	#infosFooter > div > div:nth-child(2) p:nth-child(3),
	#infosFooter > div > div:nth-child(2) p:nth-child(4) {
	line-height:20px;
	margin:0 0 10px 0
	}

	#infosFooter > div > div:nth-child(2) p:nth-child(5) {
	display:block;
	width:100%;
	float:left;
	text-align:center;
	margin:25px 0 0 0;
	padding:0
	}
	
	#infosFooter > div > div:nth-child(2) p:nth-child(5) img {
	display:inline-block;
	width:30px;
	height:auto		
	}

	#infosFooter > div > div:nth-child(3) { display:none }

	#infosFooter > div > div:nth-child(3) img { width:30px }

	#infosFooter > div > div h2 { display:none }

	#infosFooter aside {
	margin:20px 0;
	padding:0 10px
	}

	#actualitesFooter > div > a,
	#actualitesFooter > div > a:hover { font-size:12px; width:80%; margin:25px 10% 0 10% }

	#metiers a,
	#metiers a:hover { font-size:12px; width:30%; height:140px; padding:20px 5px 10px 5px }

	#metiers div > a:nth-child(2), #metiers div > a:nth-child(7), #metiers div > a:nth-child(3), #metiers div > a:nth-child(4), #metiers div > a:nth-child(5), #metiers div > a:nth-child(6) { margin:0 1% 15px 1% }
}

@media only screen and (max-width:780px) {
	#metiers div > h2, #agrements div > h2, #actualitesFooter div > h2, .pageTitle { font-size:18px }
}

@media only screen and (max-width:700px) {
	#actualitesFooter article {	width:100% }

	#actualitesFooter > div article:nth-child(2),
	#actualitesFooter > div article:nth-child(3),
	#actualitesFooter > div article:nth-child(4) { margin:0 0 25px 0 }

	#actualitesFooter div article h3,
	#actualitesFooter article h3 a,
	#actualitesFooter article h3 a:hover {
	height:auto;
	padding:10px 0
	}

	#diapo2Mask h2 { font-size:20px	}

	.titreBX {
	top:12%;
	width:90%;
	left:5%;
	padding:8px;
	margin-bottom:10px
	}

	.titreBX p:nth-child(1) {
	font-size:20px;
	padding:8px
	}

	.titreBX p:nth-child(2) {
	font-size:14px;
	margin:6px 0
	}

	a.btnOrangeDiapo,
	a.btnOrangeDiapo:hover {
	font-size:11px;
	margin:8px 0 0 0;
	padding:5px 10px
	}

	#actualites2 > .contentMid article {
	width:100%;
	margin:0 0 25px 0
	}

	#actualites2 > .contentMid article > div div {
	height:auto;
	margin:0 0 15px 0
	}

	#actualites2 > .contentMid article > div h3 {
	height:auto;
	margin:0 0 15px 0
	}
}

@media only screen and (max-width:600px) {
	#infosFooter > div > div:nth-child(1),
	#infosFooter > div > div:nth-child(2) {
	width:100%;
	margin:0 0 20px 0
	}

	#infosFooter > div > div:nth-child(1) img,
	#infosFooter > div > div:nth-child(1) p {
	width:100%;
	margin:0 0 10px 0 
	}

	#metiers a,
	#metiers a:hover { font-size:12px; width:46%; height:150px; padding:15px }

	#metiers div > a:nth-child(2), #metiers div > a:nth-child(7), #metiers div > a:nth-child(3), #metiers div > a:nth-child(4), #metiers div > a:nth-child(5), #metiers div > a:nth-child(6) { margin:0 1% 15px 1% }

	.titreBX { top:2% }

	.titreBX p:nth-child(1) { font-size:15px }

	.titreBX p:nth-child(2) { font-size:12px }

	a.btnOrangeDiapo,
	a.btnOrangeDiapo:hover {
	font-size:10px;
	padding:3px 6px
	}

	#agrements div > div img {
	width:35%;
	margin:0 5% 20px 5%
	}
}