﻿
@import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic);

																	/*-----------*/
																	/*   BASICS  */
																	/*-----------*/
html{
	background-color:#fff;
}
body{
	font-family:"PT Sans", Arial;
    color: #828282;
	line-height:30px;
	padding:40px;
	max-width:1600px;
	margin:0 auto;
}
em{
	font-style:italic;
}
strong{
	font-weight:700;
}
a{
	color: #828282;
}
a span{
	display:none;
}
																	/*-----------*/
																	/*   HEADER  */
																	/*-----------*/
#head {
	background-color:#828282;
	height:64px;
	text-transform:uppercase;
	position:relative;
}
#head p{
	display:inline-block;
	color:#fff;
	font-size:14px;
	padding:16px 30px 0;
}
#head p.phone{
	float:right;
	font-size:20px;
}
#head a{
	color:#fff;
}
#head a.contact{
	background-color:#f2f2f2;
	color: #828282;
	display:block;
	padding:16px 30px 18px;
	float:right;
	font-size:16px;
	font-weight:700;
	transition: background-color ease-out 0.4s;
}
#head a.contact.jobs{
	margin-left: 1px;
}
#head a.contact:hover{
	background-color:#96c21e;
	color:#fff;
}
																	/*-----------*/
																	/*  TITLE HP */
																	/*-----------*/
#title #logo{
	display:inline-block;
	float:left;
	width:25%;
	height:350px;
	text-align:center;
}
#title #logo img{
	margin:100px 0 0;
}
#title #slogan{
	display:inline-block;
	width:75%;
	height:350px;
}
#title #slogan h1{
	padding:120px 0 5px 30px;
	font-size:60px;
	line-height:60px;
	font-weight:700;
}
#title #slogan h1 strong{
	color:#96c21e;
}
#title #slogan h2{
	font-size:36px;
	padding:10px 0 0 30px;
}
																	/*-----------*/
																	/*  THUMB HP */
																	/*-----------*/
#thumb{
	font-size:0;
}
#thumb li{
	display:inline-block;
	width:25%;
	height:310px;
	position:relative;
	z-index:0;
}
#thumb li .shadow{
	position:absolute;
	display:block;
	top:0;
	bottom:0;
	width:100%;
	height:100%;
	overflow:hidden;
	transition:box-shadow ease-out 0.2s;
}
#thumb li .ico{
	position:absolute;
	top:0;
	right:0;
	width:102px;
	height:102px;
	z-index:4;
	transition:background-position ease-out 0.2s;
}
#thumb li a{
	position:relative;
	display:block;
	width:100%;
	height:310px;
	overflow:hidden;
}
#thumb li a img{
	position:absolute;
	display:block;
	min-width:100%;
	z-index:1;
}
#thumb li a h3{
	z-index:2;
	display:block;
	position:relative;
	text-shadow:1px 1px 0px rgba(0,0,0,0.7);
	width:100%;
	height:100%;
	transition:height ease-out 0.4s;
}
#thumb li a h3 span{
	display:block;
	position:absolute;
	text-transform:uppercase;
	font-size:24px;
	line-height:36px;
	font-weight:700;
	color:#fff;
	bottom:30px;
	left:30px;
	transition:position ease-out 0.4s;
}
#thumb li#desinfection h3{
	background-color:#78b748;
	background-color:rgba(120,183,72,0.8);
}
#thumb li#desinfection .ico{
	background:url('images/ico_desinfection.gif') no-repeat right top;
}
#thumb li#maintenance h3{
	background-color:#c0cf15;
	background-color:rgba(192,207,21,0.8);
}
#thumb li#maintenance .ico{
	background:url('images/ico_maintenance.gif') no-repeat right top;
}
#thumb li#agroalimentaire h3{
	background-color:#f5a200;
	background-color:rgba(245,162,0,0.8);
}
#thumb li#agroalimentaire .ico{
	background:url('images/ico_agroalimentaire.gif') no-repeat right top;
}
#thumb li#chantiers h3{
	background-color:#ed7703;
	background-color:rgba(237,119,3,0.8);
}
#thumb li#chantiers .ico{
	background:url('images/ico_chantiers.gif') no-repeat right top;
}
#thumb li#particuliers h3{
	background-color:#e4173e;
	background-color:rgba(228,23,62,0.8);
}
#thumb li#particuliers .ico{
	background:url('images/ico_particulier.gif') no-repeat right top;
}
#thumb li#hygiene h3{
	background-color:#be0079;
	background-color:rgba(194,0,123,0.8);
}
#thumb li#hygiene .ico{
	background:url('images/ico_hygiene.gif') no-repeat right top;
}
#thumb li#vitres h3{
	background-color:#2dadc6;
	background-color:rgba(45,173,198,0.8);
}
#thumb li#vitres .ico{
	background:url('images/ico_vitres.gif') no-repeat right top;
}
#thumb li#sinistres h3{
	background-color:#7877b1;
	background-color:rgba(116,115,175,0.8);
}
#thumb li#sinistres .ico{
	background:url('images/ico_sinistres.gif') no-repeat right top;
}
/*** HOVER ***/
#thumb li:hover{
	cursor:pointer;
	z-index:1;
}
#thumb li:hover .shadow{
	box-shadow:0px 0px 20px rgba(0,0,0,0.5);
}
#thumb li:hover .ico{
	/*background-position:bottom !important;*/
}
#thumb li:hover h3{
	height:102px;
}
																	/*-----------*/
																	/*   CHARTE  */
																	/*-----------*/
#charte{
	margin-top:40px;
}
#charte #eco{
	display:inline-block;
	width:74%;
}
#charte #eco h4{
	font-size:36px;
	color:#96c21e;
	font-weight:700;
	padding:65px 30px 30px;
}
#charte #eco p{
	font-size:18px;
	padding:0 30px 30px;
}
#charte #eco li{
	background:url('images/feuille_list.png') no-repeat left top;
	padding:0 0 20px 60px;
	margin-left:60px;
	font-size:16px;
	font-weight:700;
	font-style:italic;
	line-height:20px;
	padding-right:30px;
}
#charte #green_box{
	background:url('images/feuille_charte.png') #96c21e no-repeat center 80px;
	display:inline-block;
	width:25%;
	float:right;
	padding:240px 0 30px;
	color:#fff;
	margin-bottom:40px;
}
#charte #green_box p{
	font-size:18px;
	text-align:center;
	padding:0 30px 30px;
}
#charte #green_box p strong{
	font-size:24px;
}
																	/*-----------*/
																	/*  CONTENT  */
																	/*-----------*/
/****************** TITLE *********************/
#menu{
	position:relative;
	margin:40px 0;
	clear:both;
}
#menu #home{
	float:left;
}
#menu #home a{
	background:url('images/arrow_back.gif') #f2f2f2 no-repeat center 2px;
	display:block;
	height:64px;
	width:100px;
	transition: background ease-out 0.2s;
}
#menu #home a:hover{
	background:url('images/arrow_back.gif') #96c21e no-repeat center -58px;
}
#menu #logo{
	display:block;
	height:65px;
	text-align:center;
	padding-right:100px;
}
#menu #logo img{
	display:inline;
}
#menu #sub_menu{
	position:absolute;
	top:0;
	right:0;
}
#menu #sub_menu #hide{
	background:url('images/ico_menu.gif') #f2f2f2 no-repeat center 2px;
	display:block;
	height:64px;
	width:100px;
	transition: background ease-out 0.2s;
}
#menu #sub_menu #hide:hover{
	background:url('images/ico_menu.gif') #96c21e no-repeat center -58px;
}
#menu #main_menu{
	display:none;
	transition:all ease-out 0.2s;
}
#menu #main_menu.visible{
	display:block;
	position:absolute;
	top:0;
	right:0;
	padding:5px;
	background:#fff;
	box-shadow:0 0 5px rgba(0,0,0,0.4);
}
#menu #main_menu.visible li {
}
#menu #main_menu.visible li a{
	background-color:#a6cb50;
	color:#fff;
	font-size:18px;
	display:block;
	width:180px;
	text-align:center;
	padding:10px 0;
	transition:all ease-out 0.2s;
}
#menu #main_menu.visible #desinfection a{
	background-color:#78b748;
}
#menu #main_menu.visible #desinfection a:hover{
	background-color:#fff;
	color:#78b748;
}
#menu #main_menu.visible #maintenance a{
	background-color:#c0cf15;
}
#menu #main_menu.visible #maintenance a:hover{
	background-color:#fff;
	color:#c0cf15;
}
#menu #main_menu.visible #agroalimentaire a{
	background-color:#f5a200;
}
#menu #main_menu.visible #agroalimentaire a:hover{
	background-color:#fff;
	color:#f5a200;
}
#menu #main_menu.visible #chantiers a{
	background-color:#ed7703;
}
#menu #main_menu.visible #chantiers a:hover{
	background-color:#fff;
	color:#ed7703;
}
#menu #main_menu.visible #particuliers a{
	background-color:#e4173e;
}
#menu #main_menu.visible #particuliers a:hover{
	background-color:#fff;
	color:#e4173e;
}
#menu #main_menu.visible #hygiene a{
	background-color:#c1007a;
}
#menu #main_menu.visible #hygiene a:hover{
	background-color:#fff;
	color:#c1007a;
}
#menu #main_menu.visible #vitres a{
	background-color:#2dadc6;
}
#menu #main_menu.visible #vitres a:hover{
	background-color:#fff;
	color:#2dadc6;
}
#menu #main_menu.visible #sinistres a{
	background-color:#7473af;
}
#menu #main_menu.visible #sinistres a:hover{
	background-color:#fff;
	color:#7473af;
}
/****************** CONTENT *********************/
.content{
	clear:both;
}
.content .title{
	padding:106px 100px 60px;
}
.content .title h1{
	font-size:72px;
	color:#fff;
	text-transform:uppercase;
	padding:0 0 20px 0;
}
.content .title h2{
	background-color:#fff;
	background-color:rgba(255,255,255,0.8);
	font-size:36px;
	line-height:40px;
	font-weight:700;
	text-transform:uppercase;
	display:inline-block;
	padding:10px 15px;
	margin-top:1px;
}
.content .main_content{
	color:#696969;
	padding:40px 100px;
}
.content .main_content h3{
	font-size:24px;
	line-height:36px;
	font-weight:700;
	padding:10px 15px;
}
.content .main_content p{
	font-size:18px;
	padding:10px 0 20px;
	text-align:justify;
}
.content .main_content em{
	font-style: normal;
}
.content .main_content strong em{
	font-size:24px;
	font-weight:700;
}
.content .main_content li{
	font-size:18px;
	padding:0 0 20px 110px;
}
.content .main_content a.contact{
	display:inline-block;
	color:#fff;
	font-size:30px;
	text-transform:uppercase;
	padding:15px 30px;
	margin:30px 0 40px;
	transition:background ease-out 0.2s;
}
.content .main_content a.contact:hover{
	background-color:#f5f5f5 !important;
	color:#696969;
}

#desinfection.content .title{
	background:url('images/bg_desinfection.jpg') #78b748 no-repeat center;
	background-size:cover;
	color:#78b748;
}
#desinfection.content .main_content li{
	background:url('images/ico_desinfection_white.gif') no-repeat 60px -15px;
}
#desinfection.content a.contact{
	background:#78b748;
}
#desinfection.content em{
	color:#78b748;
}
#jobs.content .title{
	background:url('images/bg_maintenance.jpg') #c0cf15 no-repeat center;
	background-size:cover;
	color:#c0cf15;
}
#jobs.content .main_content li{
	padding: 0 0 0 40px;
	margin-left: 60px;
	list-style-type: disc;
}
#jobs.content a.contact{
	background:#c0cf15;
}
#jobs.content em{
	color:#c0cf15;
}
#maintenance.content .title{
	background:url('images/bg_maintenance.jpg') #c0cf15 no-repeat center;
	background-size:cover;
	color:#c0cf15;
}
#maintenance.content .main_content li{
	background:url('images/ico_maintenance_white.gif') no-repeat 60px -15px;
}
#maintenance.content a.contact{
	background:#c0cf15;
}
#maintenance.content em{
	color:#c0cf15;
}
#agroalimentaire.content .title{
	background:url('images/bg_agroalimentaire.jpg') #f5a200 no-repeat center;
	background-size:cover;
	color:#f5a200;
}
#agroalimentaire.content .main_content li{
	background:url('images/ico_agroalimentaire_white.gif') no-repeat 60px -15px;
}
#agroalimentaire.content a.contact{
	background:#f5a200;
}
#agroalimentaire.content em{
	color:#f5a200;
}
#chantiers.content .title{
	background:url('images/bg_chantiers.jpg') #ed7703 no-repeat center;
	background-size:cover;
	color:#ed7703;
}
#chantiers.content .main_content li{
	background:url('images/ico_chantiers_white.gif') no-repeat 60px -15px;
}
#chantiers.content a.contact{
	background:#ed7703;
}
#chantiers.content em{
	color:#ed7703;
}
#particuliers.content .title{
	background:url('images/bg_particuliers.jpg') #e4173e no-repeat center;
	background-size:cover;
	color:#e4173e;
}
#particuliers.content .main_content li{
	background:url('images/ico_particulier_white.gif') no-repeat 60px -15px;
}
#particuliers.content a.contact{
	background:#e4173e;
}
#particuliers.content em{
	color:#e4173e;
}
#hygiene.content .title{
	background:url('images/bg_hygiene.jpg') #be0079 no-repeat center;
	background-size:cover;
	color:#be0079;
}
#hygiene.content .main_content li{
	background:url('images/ico_hygiene_white.gif') no-repeat 60px -15px;
}
#hygiene.content a.contact{
	background:#be0079;
}
#hygiene.content em{
	color:#be0079;
}
#vitres.content .title{
	background:url('images/bg_vitres.jpg') #42b5cc no-repeat center;
	background-size:cover;
	color:#42b5cc;
}
#vitres.content .main_content li{
	background:url('images/ico_vitres_white.gif') no-repeat 60px -15px;
}
#vitres.content a.contact{
	background:#42b5cc;
}
#vitres.content em{
	color:#42b5cc;
}
#sinistres.content .title{
	background:url('images/bg_sinistres.jpg') #7473af no-repeat center;
	background-size:cover;
	color:#7473af;
}
#sinistres.content .main_content li{
	background:url('images/ico_sinistres_white.gif') no-repeat 60px -15px;
}
#sinistres.content a.contact{
	background:#7473af;
}
#sinistres.content em{
	color:#7473af;
}

																	/*-----------*/
																	/*   FOOTER  */
																	/*-----------*/
#footer {
	background-color:#828282;
	height:60px;
	clear:both;
	position:relative;
}
#footer p{
	font-size:14px;
	text-transform:uppercase;
	color:#d3d3d3;
	padding:13px 0 0 30px;
	float:left;
	position:relative;
}
#footer p strong{
	color:#96c21e;
	padding-right:10px;
}
#footer p a{
	color:#fff;
	padding-left:10px;
	font-weight:700;
}
#footer p a:hover{
	color:#96c21e;
}
#footer p+p{
	float:right;
	padding-right:75px;
}
#footer p+p a{
	background:url('images/logo_luxapps.png') no-repeat top center;;
	display:block;
	width:21px;
	height:60px;
	position:absolute;
	right:30px;
	top:0;
}
#footer p+p a:hover{
	background-position:bottom;
}
.links{
	margin:20px;
	float:left;
}
.links a{
	font-size:14px;
	transition:color ease-out 0.2s;
}
.links a:hover{
	color:#96c21e;
}
#___plusone_0{
	margin:20px !important;
	float:right !important;
}


																	/*---------------*/
																	/* MEDIA QUERIES */
																	/*---------------*/
/*********** HEAD ***********/
@media (max-width: 510px) {
	#head{
		background-color: transparent;
	}
	#head p{
		display:block;
		text-align:center;
		padding:16px 0;
	}
	#head a.contact{
		margin:2px 0 40px;
		padding:16px 0;
		width:100%;
		text-align:center;
	}
	#head a.contact.jobs{
		margin-bottom: 0;
		margin-left: 0;
	}
}
@media (max-width: 700px) {
	#head a+p{
		display:none;
	}
}
/*********** HP TITLE ***********/
@media (max-width: 510px) {
	#title #logo{
		height:180px !important;
	}
	#title #logo img{
		margin-top:40px !important;
	}
}
@media (max-width: 900px) {
	#title #logo{
		width:100%;
		height:220px;
	}
	#title #logo img{
		margin-top:80px;
	}
	#title #slogan{
		height:auto;
		width:100%;
		padding-bottom:40px;
	}
	#title #slogan h1{
		padding:40px 0 10px 0;
		text-align:center;
		font-size:36px;
		line-height:40px;
	}
	#title #slogan h2{
		padding:0;
		font-size:24px;
		line-height:30px;
		text-align:center;
	}
}
@media (min-width: 900px) and (max-width: 1230px) {
	#title #slogan h1{
		padding:120px 0 0 30px;
		font-size:48px;
	}
}
/*********** HP THUMBNAILS ***********/
@media (max-width: 460px) {
	#thumb li img{
		min-width:auto;
		min-height:100%;
	}
}
@media (max-width: 626px) {
	#thumb li, #thumb li a{
		height:102px;
	}
	#thumb li{
		width:100%;
	}
	#thumb li a h3 span{
		bottom:34px;
		font-size:20px;
	}
}
@media (min-width: 626px) and (max-width: 1048px) {
	#thumb li{
		width:50%;
	}
}
@media (min-width: 626px) and (max-width: 830px) {
	#thumb li img{
		min-width:auto;
		min-height:100%;
	}
}
@media (min-width: 1048px) and (max-width: 1545px) {
	#thumb li img{
		min-width:auto;
		min-height:100%;
	}
}

/*********** HP CHARTE ***********/
@media (max-width: 626px) {
	#charte{
		margin-top:0px;
	}
}
@media (max-width: 1025px) {
	#charte #eco{
		width:100% !important;
		margin-bottom:40px;
	}
	#charte #green_box{
		background:url('images/feuille_charte.png') #96c21e no-repeat center 60px;
		width:100%;
		padding-top:180px;
		float:none;
	}
}
@media (min-width: 1025px) and (max-width: 1281px) {
	#charte #green_box{
		background:url('images/feuille_charte.png') #96c21e no-repeat center 60px;
		padding-top:180px;
	}
}

/*********** CONTENT ***********/
@media (max-width: 1023px) {	
	.content .title{
		padding:106px 40px 40px;
	}
	.content .title h1{
		font-size:60px;
	}
	.content .main_content{
		padding:40px 40px;
	}
	.content .main_content li{
		padding:0 0 20px 80px;
		background-position:20px -15px !important;
	}
}
@media (max-width: 800px) {
	#menu #logo {
		padding: 0 100px;
	}
	#menu #home a{
		position:absolute;
		z-index:1;
	}
	#menu #sub_menu{
		width:100%;
		z-index:0;
	}
	#menu #sub_menu #hide{
		float:right;
	}
	#menu #main_menu {
		top:105px !important;
		width:100% !important;
		padding:0 0 10px !important;
		box-shadow:none !important;
	}
	#menu #main_menu li a{
		z-index:5 !important;
		width:100% !important;
		padding:20px 0 !important;
		text-transform:uppercase !important;
		font-size:24px !important;
	}
	.content .title h1{
		font-size:40px;
		font-weight:bold;
	}
	.content .title h2{
		font-size:24px;
		line-height:28px;
	}
	.content .main_content{
		padding:40px 0 0;
	}
	.content a.contact {
		width:100% !important;
		text-align:center !important;
		padding:15px 0 !important;
	}
}

/*********** FOOTER ***********/
@media (max-width: 800px) {
	#footer{
		height:auto;
		padding:20px 0;
	}
	#footer p{
		padding:0;
		float:none;
		text-align:center;
	}
	#footer p strong{
		display:block;
		padding:0;
	}
	#footer p a{
		display:block;
		padding:0;
	}
	#footer p+p{
		display:none;
		float:none;
		width:100%;
		padding:0;
		position:relative;
		text-align:center;
	}
	#footer p+p a{
		display:inline;
		position:relative;
		right:0;
	}
	#footer p+p a span{
		display:inline;
	}
}