/*
COLORS:

light-brown: #f0ebe3;
brown:#d6d2cb;
deep-brown: #bdb9b3;

light-blue: #7cb7be;
blue: #598086;
deep-blue: #628f94;
dark-blue:#506e73;
*

*/
*{
	font-family: arial;
}
body{
	background-color: #f0ebe3;
	height: 100%;
}

h1{
	font-size: 1.2em;
	 letter-spacing: 0.3em;
	 font-weight: bold;
	 margin: 0;
}

h2{
	font-size: 1em;
	 font-weight: bold;
	 margin: 0;
}
html{
	height: 100%;
}

[class*='col-'] {
  padding-right:0;
  padding-left:0;
}

.footer{
	height:45px;
	bottom: 0;
	z-index: 0;
}

.footer img{
	width: 100%;
}

#logo-footer{
	padding-left:2em;
	padding-top:0.5em;
}
#footer-hidden{
	bottom:0;
	display: block;
	background-color:#f0ebe3;
	color: #bdb9b3;
	padding: 1em;
	padding-left: 2em;
	font-size: 0.9em;

}
#footer-hidden a{
	text-decoration: none;
	color: #bdb9b3;
}

#footer-hidden a:hover{
	color: #506e73;
}
.container{
	padding: 20px;
	padding-top: 0;
	padding-bottom: 0;
	position: relative;

}
#menu-icon{
	position: absolute;
	margin: 1em;
	margin-top: 2em;

	z-index: 4;
	cursor: pointer;

}
#menu-icon img{
	width: 30px;

}

.rotate{
	-ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}

#menu{
	position: absolute;
		background-color: #506e73;
		width: 282px;
		height:100%;
		z-index: 3;
		display: none;
}	

#menu-vertical, #menu-vertical ul {
  padding:0;
  margin:0;
  list-style:none;
  width: 180px; 
}

 #menu-vertical{
 	margin-top:80px;
 }
#menu-vertical li{
	padding: 1em;
	padding-top: 2em;
	padding-bottom: 2em;
	width: 282px;
	-webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
}

#top-menu{
	height: 90px;
	background-color: #598086;
}
#menu-vertical li a{
	color: #fff;
	font-size: 0.85em;
	text-decoration: none;
	padding-top: 2em;
	padding-bottom: 2em;
	padding-right: 2em;
	
}

#menu-vertical li.active{
	background-color: #598086;
		width: 244px;
}

#menu-vertical li.active:after{
	border-bottom: 38px solid transparent;
	border-left: 38px solid #598086;
	border-top: 38px solid transparent;
	content: "";
	position: absolute;
	right: 0;
	margin-top: -28px;
}

#menu-vertical li:hover{
	background-color: #598086;
	
}



#top_header{
	background-color: #f0ebe3;
	text-align: center;
	padding-top: 1em;
	padding-bottom: 1em;
	height: 90px;

}

#top_header img{
width: 25%;
}

/*IMAGE PLUS TARD*/
#sub_header{
	background-color: #598086;
	height:100px;
	background-image: url('../images/backgrounds/baniere.jpg');
	background-position:center center;
	background-repeat:no-repeat;
	

}

#question{
	background-color: #d6d2cb;
	padding-top: 4.5em;
	padding-left: 2em;
	padding-right: 2em;
	color: #fff;
	height: 140px;
}

#reponse {
	background-color: #628f94;
	color:#fff;
	height:285px

}
#next{
	padding: 1em;
	background-color: #628f94;
	cursor:pointer;

}
#next i{
	color:#fff;
	font-size: 2.5em;
	
}
.home-text{
	padding: 2em;
	padding-left: 2.5em;
	padding-right: 2.5em;
	font-size: 0.85em;
}

#interogation{
	background-color: #7cb7be;
	color: #fff;
	font-size: 5em;
	padding: 0.2em;
	text-align: center;
	height: 140px;

}

#expertise{
	background-color: #598086;
	color:#fff;
	padding: 1em;
	height: 76px;
	padding-top: 2em;
}

#expertise:after{
	border-bottom: 38px solid transparent;
	border-left: 38px solid #598086;
	border-top: 38px solid transparent;
	content: "";
	position: absolute;
	right: -38px;
	top: 0;
}



#button_question_up{
	background-color: #f0ebe3;
	height: 70px;
	width: 100%;
	text-align: center;
	cursor: pointer;
	 -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
     z-index:1;
}

#show-footer img{
	-webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
}

.hover_zoom{
	z-index:2!important;
	-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
-moz-box-shadow: 1px 1px 10px 0px #656565;
-webkit-box-shadow: 1px 1px 10px 0px #656565;
-o-box-shadow: 1px 1px 10px 0px #656565;
box-shadow: 1px 1px 10px 0px #656565;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=134, Strength=10);

}
.hover_zoom_no_shadow{
	z-index:2!important;
	-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);


}

#button_question_down{
	background-color: #f0ebe3;
	height: 70px;
	width: 100%;
	text-align: center;
	cursor:pointer;
	 -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
         z-index:1;
}


#appel_plombier{
	background-color: #f0ebe3;
	padding-top: 2em;
	padding-left: 2em;
	height: 75px;
}

#appel_plombier_numero{
	color: #7cb7be; 
	padding-top: 1.5em;
	height: 75px;
}
#appel_plombier_numero h2{
	
	font-size: 1.7em;
	color: #7cb7be;
}

#appel_plombier h2{
	color:#b3afaa;
	padding-bottom: 2em;
}


#icon_tel{
	background-color: #7cb7be;
	height: 75px;
		 -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;

}

#engagements{
	background-color: #598086;
	color:#fff;
	padding: 1em;
	height: 76px;
	padding-top: 2em;
}

#engagements:before{
	border-bottom: 38px solid transparent;
	border-right: 38px solid #598086;
	border-top: 38px solid transparent;
	content: "";
	position: absolute;
	left: -38px;
	top: 0;
}


#sav{
	background-color: #7cb7be;
}

#garanties{
	background-color: #628f94;
}

#techniciens{
	background-color: #506e73;
}

#transparence{
	background-color: #598086;
}

.box-engagements{
	height: 250px;
	text-align: center;
	color:white;
}


.box-engagements h2{
	padding: 1em;
}

.box-engagements p{
	padding:1em;
}






#show-footer{
	background-color: #bdb9b3;
	padding: 0.5em;
	padding-top: 0.8em;
	text-align: center;
	height: 45px;
	width:45px;
		 -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
    cursor: pointer;
    z-index:2;
}

.box-engagements img{
	width:30%;
	padding-top: 1em;
}

/* Large desktops and laptops */
@media (min-width: 1200px) {
#top_header{
	height:	90px;
}

}

/* Portrait tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {
	#reponse{
		height:auto;
	}
	#top_header{
	height:	90px;
}
}

/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {
	#reponse{
		height:auto;
	}
#top_header{
	height:	90px;
}


}

/* Landscape phones and portrait tablets */
@media (max-width: 767px) {
#reponse{
		height:auto;
	}
	#top_header img{
		width: 40%;
	}

		.text-actu{

	max-height: 220px;

}
	#expertise:after{
		border: none;
	}
	#engagements:before{
		border: none;
	}
	#menu-vertical{
		margin-top: 1em;
	}
	#menu{
		height:	482px;
	}

	#appel_plombier_numero h2{
		padding-left: 1em;
	}

	.box-engagements img{
		width: 15%;
	}
}

/* Landscape phones and smaller */
@media (max-width: 480px) {


	#menu-vertical li:after{
		content:"";
		border: none;
	}

	#menu-vertical li.active:after{
		content:"";
		border: none;
	}
	#menu-vertical li.active{
		width:282px;
	}

	#reponse{
		height:auto;
	}
	#top-menu{
	height: 88px;
	background-color: #598086;
	}
	#top_header img{
		width: 50%;
		float: right;
		margin-right: 10px;
	}

	#top_header{
		height:90px;
	}
	.box-engagements img{
		width: 20%;
	}



}

/*CONTACT*/
#form_contact_top{
	background-color: #d6d2cb;
	color:#628f94;
	padding:2em;
	padding-bottom: 1em;
}

#form_contact_main{
	background-color: #628f94;
	color:#fff;
	padding:3em;

}

.form-control{
	border-radius: 0px!important;
}

#form_contact_main div{
	padding-left: 1em;
}
#form_contact_top div{
	padding-left: 1em;
}

button {
	border-radius: 0px!important;
	padding: 1em;
}

.btn-default{
	padding: 1em;
	color: #fff;
	font-weight: bold;
	background-color: #d6d2cb;
	border: none;
}
.btn-default:hover{
	color: #fff!important;
	background-color: #598086;

}

.btn-dark{
	padding: 1em;
	color: #fff;
	font-weight: bold;
	background-color: #598087;
	border: none;
}
.btn-dark:hover{
	color: #628f94;
	
}

.modal-dialog {
  padding-top: 15%;
}

.modal-content {
	background-color: transparent; 
 -webkit-background-clip: padding-box; 
 background-clip: padding-box; 
 border:0; 
 border: 0; 
 border-radius: 0; 
 outline: 0; 
 -webkit-box-shadow:none; 
 box-shadow: none;
 color:#628f94;
 text-align: center;
}
.modal-backdrop {
	background-color: #f0ebe3;

	}
.modal-backdrop.in {
	filter: alpha(opacity=80);
opacity: 0.8;
}

.modal-content h1{
	letter-spacing: 0;
	padding: 0.2em;
}

#actu-content{
	background-color: #fff;
	min-height: 500px;

}
.text-actu{
	background-color: #628f94;
	height: 300px;
	color:white;
	padding: 2em;
	font-size: 0.85em;
	text-align: justify;
}

.text-actu h1{
	letter-spacing: 2px;
	padding-bottom: 1em;
}


.image-actu{
	background-color: #d7d7d7;
	height: 300px;
 
 background-repeat: no-repeat;
 background-position: center;
  -webkit-background-size: cover; /* pour Chrome et Safari */
  -moz-background-size: cover; /* pour Firefox */
  -o-background-size: cover; /* pour Opera */
  background-size: cover; /* version standardisée */
		 -webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
    z-index:1;
}

.greyscale{
	-moz-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
         -o-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
         -webkit-filter: grayscale(100%);
         filter: gray;
         filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
}

.light-blue{
	background-color: #73a4a4;
}

.deep-blue{
	background-color: #598086;
}
.light-brown{
	background-color: #d6d2cb;
}
.square{
	height: 200px;
}
#nom-entreprise{
	background-color: #bdb9b3;
	color: #fff;
	padding: 2em;
}
#desc-entreprise{
	color:#598086;
	font-size: 1em;
	
	padding: 5em;
	padding-top: 4em;
	text-align: left;
}

#adresse_entreprise{
	color: #fff;
	text-align: center;
	padding-top: 6em;
	text-transform: uppercase;
}

#map_header img{
	width:100%;

}

#map_header #button_question_down{
	background-color: transparent;
	margin-top: 12em;

}

#map_header #button_question_up{
	background-color: transparent;
	margin-top: 12em;
}



#map_header{
 background: url(../images/backgrounds/background-map.jpg) no-repeat center; 
  -webkit-background-size: cover; /* pour Chrome et Safari */
  -moz-background-size: cover; /* pour Firefox */
  -o-background-size: cover; /* pour Opera */
  background-size: cover; /* version standardisée */
}

.client{
	color:#fff;
	font-weight: bold;
	margin-top: 1em;
}
#liste_clients{
	background-color:#628f94;
	padding:2em;
	min-height: 500px;
}

#recherche_clients{
	background-color:#7cb7be;
	padding:2em;
	display:none;
}

#show_recherche_clients{
	background-color:#7cb7be;
	padding:1em;
	color:white;
	cursor: pointer;
	
}

#recherche{
	padding: 7px;
}

.hidden-details{
	display: none;
	color:white;
	font-weight: bold;
	background-color: #598086;
	padding: 1em;

}

#show_details{
		-webkit-transition-duration: 0.5s; /* Safari */
    transition-duration: 0.5s;
    cursor: pointer;

}

.separator{
	height: 1px;
	border-bottom: 2px solid #598086;
}

.submit{
	background-color: #598086;
	color: #fff;
}

#admin-show{
	cursor: pointer;
}

.modal-success .modal-content{
	color:green;
	font-weight: bold;
}


.modal-error .modal-content{
	color:red;
	font-weight: bold;
}

.btn-file {
    position: relative;
    overflow: hidden;
    border-radius: 0;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
    border-radius: 0;
}

.windows8 {
position: relative;
width: 50px;
height:50px;
}

.windows8 .wBall {
position: absolute;
width: 48px;
height: 48px;
opacity: 0;
-moz-transform: rotate(225deg);
-moz-animation: orbit 5.5s infinite;
-webkit-transform: rotate(225deg);
-webkit-animation: orbit 5.5s infinite;
-ms-transform: rotate(225deg);
-ms-animation: orbit 5.5s infinite;
-o-transform: rotate(225deg);
-o-animation: orbit 5.5s infinite;
transform: rotate(225deg);
animation: orbit 5.5s infinite;
}

.windows8 .wBall .wInnerBall{
position: absolute;
width: 6px;
height: 6px;
background: #598087;
left:0px;
top:0px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
border-radius: 6px;
}

.windows8 #wBall_1 {
-moz-animation-delay: 1.2s;
-webkit-animation-delay: 1.2s;
-ms-animation-delay: 1.2s;
-o-animation-delay: 1.2s;
animation-delay: 1.2s;
}

.windows8 #wBall_2 {
-moz-animation-delay: 0.24s;
-webkit-animation-delay: 0.24s;
-ms-animation-delay: 0.24s;
-o-animation-delay: 0.24s;
animation-delay: 0.24s;
}

.windows8 #wBall_3 {
-moz-animation-delay: 0.48s;
-webkit-animation-delay: 0.48s;
-ms-animation-delay: 0.48s;
-o-animation-delay: 0.48s;
animation-delay: 0.48s;
}

.windows8 #wBall_4 {
-moz-animation-delay: 0.72s;
-webkit-animation-delay: 0.72s;
-ms-animation-delay: 0.72s;
-o-animation-delay: 0.72s;
animation-delay: 0.72s;
}

.windows8 #wBall_5 {
-moz-animation-delay: 0.96s;
-webkit-animation-delay: 0.96s;
-ms-animation-delay: 0.96s;
-o-animation-delay: 0.96s;
animation-delay: 0.96s;
}

@-moz-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-moz-transform: rotate(180deg);
-moz-animation-timing-function: ease-out;
}

7% {
opacity: 1;
-moz-transform: rotate(300deg);
-moz-animation-timing-function: linear;
-moz-origin:0%;
}

30% {
opacity: 1;
-moz-transform:rotate(410deg);
-moz-animation-timing-function: ease-in-out;
-moz-origin:7%;
}

39% {
opacity: 1;
-moz-transform: rotate(645deg);
-moz-animation-timing-function: linear;
-moz-origin:30%;
}

70% {
opacity: 1;
-moz-transform: rotate(770deg);
-moz-animation-timing-function: ease-out;
-moz-origin:39%;
}

75% {
opacity: 1;
-moz-transform: rotate(900deg);
-moz-animation-timing-function: ease-out;
-moz-origin:70%;
}

76% {
opacity: 0;
-moz-transform:rotate(900deg);
}

100% {
opacity: 0;
-moz-transform: rotate(900deg);
}

}

@-webkit-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-webkit-transform: rotate(180deg);
-webkit-animation-timing-function: ease-out;
}

7% {
opacity: 1;
-webkit-transform: rotate(300deg);
-webkit-animation-timing-function: linear;
-webkit-origin:0%;
}

30% {
opacity: 1;
-webkit-transform:rotate(410deg);
-webkit-animation-timing-function: ease-in-out;
-webkit-origin:7%;
}

39% {
opacity: 1;
-webkit-transform: rotate(645deg);
-webkit-animation-timing-function: linear;
-webkit-origin:30%;
}

70% {
opacity: 1;
-webkit-transform: rotate(770deg);
-webkit-animation-timing-function: ease-out;
-webkit-origin:39%;
}

75% {
opacity: 1;
-webkit-transform: rotate(900deg);
-webkit-animation-timing-function: ease-out;
-webkit-origin:70%;
}

76% {
opacity: 0;
-webkit-transform:rotate(900deg);
}

100% {
opacity: 0;
-webkit-transform: rotate(900deg);
}

}

@-ms-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-ms-transform: rotate(180deg);
-ms-animation-timing-function: ease-out;
}

7% {
opacity: 1;
-ms-transform: rotate(300deg);
-ms-animation-timing-function: linear;
-ms-origin:0%;
}

30% {
opacity: 1;
-ms-transform:rotate(410deg);
-ms-animation-timing-function: ease-in-out;
-ms-origin:7%;
}

39% {
opacity: 1;
-ms-transform: rotate(645deg);
-ms-animation-timing-function: linear;
-ms-origin:30%;
}

70% {
opacity: 1;
-ms-transform: rotate(770deg);
-ms-animation-timing-function: ease-out;
-ms-origin:39%;
}

75% {
opacity: 1;
-ms-transform: rotate(900deg);
-ms-animation-timing-function: ease-out;
-ms-origin:70%;
}

76% {
opacity: 0;
-ms-transform:rotate(900deg);
}

100% {
opacity: 0;
-ms-transform: rotate(900deg);
}

}

@-o-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-o-transform: rotate(180deg);
-o-animation-timing-function: ease-out;
}

7% {
opacity: 1;
-o-transform: rotate(300deg);
-o-animation-timing-function: linear;
-o-origin:0%;
}

30% {
opacity: 1;
-o-transform:rotate(410deg);
-o-animation-timing-function: ease-in-out;
-o-origin:7%;
}

39% {
opacity: 1;
-o-transform: rotate(645deg);
-o-animation-timing-function: linear;
-o-origin:30%;
}

70% {
opacity: 1;
-o-transform: rotate(770deg);
-o-animation-timing-function: ease-out;
-o-origin:39%;
}

75% {
opacity: 1;
-o-transform: rotate(900deg);
-o-animation-timing-function: ease-out;
-o-origin:70%;
}

76% {
opacity: 0;
-o-transform:rotate(900deg);
}

100% {
opacity: 0;
-o-transform: rotate(900deg);
}

}

@keyframes orbit {
0% {
opacity: 1;
z-index:99;
transform: rotate(180deg);
animation-timing-function: ease-out;
}

7% {
opacity: 1;
transform: rotate(300deg);
animation-timing-function: linear;
origin:0%;
}

30% {
opacity: 1;
transform:rotate(410deg);
animation-timing-function: ease-in-out;
origin:7%;
}

39% {
opacity: 1;
transform: rotate(645deg);
animation-timing-function: linear;
origin:30%;
}

70% {
opacity: 1;
transform: rotate(770deg);
animation-timing-function: ease-out;
origin:39%;
}

75% {
opacity: 1;
transform: rotate(900deg);
animation-timing-function: ease-out;
origin:70%;
}

76% {
opacity: 0;
transform:rotate(900deg);
}

100% {
opacity: 0;
transform: rotate(900deg);
}

} - See more at: http://cssload.net/#sthash.Nk3EVttp.dpuf