body {font-family: Verdana, Helvetica, Arial, cursive, sans-serif; font-size: 16px; margin: 0px; padding: 0px;}
img{border: 0px;}
img.menu{vertical-align: middle;}
a{text-decoration: none;}
.obligatoire{font-weight: bold; color: red;}

input.champ_saisie,
select,
textarea{padding: 8px; color: gray; font-size: 14px; width: 350px; font-family: cursive, Helvetica, Arial, Verdana, sans-serif;}
input.court{width: 100px;}
input.input_admin, 
textarea.input_admin{padding: 4px; width: 500px; color: black;}
.retrait_droit{padding-left: 30px; font-size: 11px;}
.remarque{color: gray;}
.bouton{display: block; width: 200px; height: 30px; background-color: #9e4774; text-align: center; padding-top: 10px; border-radius: 10px; margin: auto; color: white; box-shadow: 2px 2px 5px #000; transition-property: background-color; transition-duration: 0.5s; overflow: hidden;}
.bouton:hover{background-color: #7b8d9c; cursor: pointer;}
.orange{color: #e8944b;}
.vert{color: #78a723;}
hr{max-width: 400px; margin-top: 30px; margin-bottom: 30px;}
.police_gras{font-weight: bold;}
h3.petit{color: #a40000; font-size: 17px; padding-bottom: 20px; margin: 0px; text-decoration: underline;}

.ancre{position: relative; top: -80px !important;}
.video{width: 80%;}
#global{width: 100%; overflow: hidden; height: 100%;}
	#header{height: 80px; width: 100%; margin: 0px; padding: 0px; position: fixed; z-index: 50; background-color: #ffffff; border-bottom: 1px solid gray;}
		#bulle_contact{float: right; margin: 0px; padding: 0px; position: fixed; width: 230px; height: 310px; bottom: 50px; right: 50px; z-index: 100;}
		#menu{max-width: 1200px; height: 100%; margin: auto;}
			.menu_texte{float: right; display: block; height: 44px; font-size: 12px; padding: 35px 0px 1px 0px; width: 180px; text-align: center; transition-property: background-color; transition-duration: 0.5s;}
			.menu_texte:hover{ background-color: #7b8d9c; color: #2d3091;}
			.menu_texte_visite{float: right; display: block; height: 40px; padding: 20px 5px 1px 5px; margin-left: 10px; margin-right: 10px; background-image: linear-gradient(rgba(255,255,255,0) 70%, rgba(231,149,75,0.5));}
			.menu_texte_contact{float: right; display: block; height: 20px; padding: 10px; margin-left: 40px; margin-right: 40px; margin-top: 20px; background-color: #a40000; border-radius: 10px; box-shadow: 2px 2px 5px #000; transition-property: background-color; transition-duration: 0.5s;}
			.menu_texte_contact:hover{background-color: #c64b4b;}
			a.lien_accueil:link,
			a.lien_accueil:visited{font-size: 13px; color: #676767; text-decoration: none; font-weight: bold;}
			a.lien_accueil_contact:link,
			a.lien_accueil_contact:visited{font-size: 13px; color: #78a723; text-decoration: none; text-decoration: underline; font-weight: bold;}
			a.lien_accueil:hover{font-size: 13px; color: #676767;}
			a.lien_accueil_contact:hover{font-size: 13px; color: #78a723; text-decoration: underline;}
			#menu_deroulant{float: right; width: 150px; height: 60px; display: none; margin-top: 5px; cursor: pointer; font-size: 20px;}
			#menu_deroulant:hover{}
			#icone_menu{display: none; float: right; overflow: hidden; margin-top: 10px; margin-right: 10px; background-color: #7b8d9c; width: 160px; text-align: right; color: white; transition-property: height; transition-duration: 1s; height: 40px; box-shadow: 3px 3px 4px #000;}
			#icone_menu:hover{height: 229px; cursor: pointer;}
			.sous_menu{width: 100%; text-align: center; color: white; display: block; border-bottom: 1px solid lightgray; height: 35px; padding-top: 10px;}
			.hover_sous_menu{transition-property: background-color; transition-duration: 0.5s; cursor: pointer;}
			.hover_sous_menu:hover{background-color: #b7b7b7;}
	#bandeau{margin: auto; width: 1920px; height: 249px; margin-top: 80px; overflow: hidden;}
	#logo{width: 206px; height: 80px; z-index: 55; float: left; margin: 0px; overflow: hidden;}
	#image_logo{width: 100%;}
	.image_responsive{display: block; max-width: 100%; height: auto; margin: auto;}
	
	#page{width: 100%; height: auto; background-color: #ffffff; margin: auto; padding: 0; min-height: 600px;}
		#retour_haut{position: fixed; bottom: 50px; right: 350px; width: 45px; height: 45px; background: url(../images/retour_haut.png) no-repeat;}
		#retour_haut:hover{cursor: pointer;}
		#diapo{height: auto; width: 800px; margin: auto; padding: 0; overflow: hidden;}
		
		#diapo_telephone_conteneur{width: 100%; overflow-x: scroll; overflow-y: hidden; display: none; display: none;}
			#diapo_telephone{width: 2460px; top: -15px; overflow: auto;}
			.vignette_diapo_telephone{position: relative; float: left; height: 410px; border-radius: 10px; margin: 0px 10px 0px 10px; width: auto;}
				.bandeau_vignette_diapo_telephone{z-index: 20; background-color: #ffffff88; color: black; height: 40px; position: absolute; bottom: 0; left: 0; width: 100%; border-radius: 0px 0px 10px 10px; text-align: center;}
				.vignette_diapo_telephone img{height: 100%; border-radius: 10px; z-index: 10;}
		
		#contenu{margin: auto; overflow: hidden; padding-bottom: 30px;}
			.bandeau_blanc{width: 100%; height: auto; padding: 20px 0 20px 0; color: gray;}
			.bandeau_couleur{width: 100%; height: auto; padding: 20px 0 20px 0; background-color: #7b8d9c; color: white;}
				.bloc_texte{max-width: 1200px; margin: 0 auto; overflow: hidden;}
				.bloc_texte_full{max-width: 1200px; margin: auto; overflow: hidden; text-align: center;}
			#accueil_bandeau_gauche{float: left; width: 77%; display: table-cell;}
			#accueil_bandeau_droite{float: left; width: 18%; padding: 20px; text-align: center; display: table-cell;}
			#outil{width: 100%; border-collapse: collapse; background-color: #ffffff;}
				#outil tr td{border: 1px solid gray; padding: 5px; color: gray; font-size: 13px;}
				#outil thead tr td{font-weight: bold; color: #7b8d9c; font-size: 16px;}
			.image_simple{border-radius: 10px;}
			.image_simple_avec_ombre{box-shadow: 0px 0px 5px black;}
			.image_marquee{width: 200px;}
			.titre{width: 100%; height: 40px; margin: auto; overflow: hidden; padding-top: 30px; border-bottom: 2px solid gray; margin-bottom: 25px; font-size: 20px; color: #6d1d62; font-weight: bold;}
				.trait_noir{float: left; width: 33%; height: 10px; border-bottom: 1px solid black;}
				.texte_titre{float: left; width: 31%; height: 100%; color: #6d1d62; text-align: center; padding-left: 10px; padding-right: 10px; font-size: 20px;}
			.article{display: table; width: 100%; margin: 0 auto; overflow: auto; padding: 5px;}
				.centre_gras{text-align: center; font-weight: bold; text-decoration: underline; width: 100%;}
				
				.image_article{display: table-cell; margin: 5px 0px 0px 0px; padding: 5px; vertical-align: middle;}
				.texte_article{display: table-cell; text-align: justify; width: 65%; min-width: 200px; height: 220px; vertical-align: middle; padding: 0px 40px 0px 20px;}
				.texte_article_petit{display: table-cell; text-align: justify; width: 30%; min-width: 200px; height: 220px; vertical-align: middle; padding: 0px 40px 0px 20px;}
				
				.image_article_full{float: center; width: 100%; margin-right: 20px; margin-left: 20px; text-align: center;}
				.image_article_full_realisation{float: left; margin: 20px; text-align: center;}
				.image_article_full_image{float: center; width: 100%; margin-right: 20px; text-align: center; background: url(../images/meca_3_plus_002.jpg) no-repeat center; height: 472px;}
					.text_image_filigrane{ font-size: 25px; color: white; font-weight: bold; text-shadow: 3px 3px 7px black; padding: 90px 50px 0px 50px;}
				.image_article_paysage{display: table-cell; float: right; width: 500px; margin-right: 20px; margin-left: 20px; text-align: center;}
				.image_realisations{overflow: hidden; margin: auto; width: 100%; text-align: center;}
				.texte_article_paysage{display: table-cell; float: left; text-align: justify; width: 43%; min-width: 200px; padding: 10px; border: 2px solid #3a5010; background-color: #79a81c; margin: 25px; height: 400px;}
				.titre_encard{font-size: 20px; color: #ffffff; text-align: center; text-decoration: underline;}
				.texte_article_full{display: table-cell; float: left; text-align: justify; width: 100%; min-width: 200px; padding-top: 10px;}
				.texte_article_slideshow{display: table-cell; float: left; text-align: justify; width: 70%; min-width: 200px; padding-top: 10px;}
				.texte_article_realisations{display: table-cell; float: left; text-align: center; width: 200px; margin-top: 100px; margin-left: 200px; font-size: 20px;}
				.cadre_realisations{float: left; width: 600px; height: 247px; background: url(../images/maisons_medicales.png); transition-property: opacity; transition-duration: 0.5s;}
				.cadre_realisations:hover{opacity:0.4;}
				.bouton_realisations{border: 1px solid gray; width: 23%; text-align: center; padding: 30px 5px 5px 5px; margin: 5px; float: left; height: 45px; border-radius: 10px; font-size: 16px; font-weight: bold; transition-property: background-color, color; transition-duration: 0.5s;}
				.bouton_realisations:hover{background-color: #7b8d9c; color: #2d3091; cursor: pointer;}
				.image_tertiaire{background: url(../images/tertiaire.png) no-repeat center; width: 100%; height: 247px; color: #fff; font-size: 30px; line-height: 1.5em; text-shadow: 2px 2px 2px #000; text-align: center;}
				.image_maison_medicales{background: url(../images/maisons_medicales.png) no-repeat center; width: 100%; height: 247px; color: #fff; font-size: 30px; line-height: 1.5em; text-shadow: 2px 2px 2px #000; text-align: center;}
				.image_residence_seniors{background: url(../images/rpa.png) no-repeat center; width: 100%; height: 247px; color: #fff; font-size: 30px; line-height: 1.5em; text-shadow: 2px 2px 2px #000; text-align: center;}
				.image_eco_quartiers{background: url(../images/eco_quartiers.png) no-repeat center; width: 100%; height: 247px; color: #fff; font-size: 30px; line-height: 1.5em; text-shadow: 2px 2px 2px #000; text-align: center;}
				.image_logements_collectifs{background: url(../images/logements_collectifs.png) no-repeat center; width: 100%; height: 247px; color: #fff; font-size: 30px; line-height: 1.5em; text-shadow: 2px 2px 2px #000; text-align: center;}
				.image_particuliers{background: url(../images/particuliers.png) no-repeat center; width: 100%; height: 247px; color: #fff; font-size: 30px; line-height: 1.5em; text-shadow: 2px 2px 2px #000; text-align: center;}
					.texte_titre_realisations{float: left; margin-top: 100px; width: 100%;}
				.titre_realisations_details{color: #e8944b; text-shadow: 2px 2px 2px #000; font-size: 24px; width: 100%; text-align: center;}
				.titre_realisation{width: 530px; float: left; margin: 0px 20px 0px 20px; font-size: 16px; font-weight: bold; text-align: center; padding: 0px 10px 0px 10px;}
				.encard_realisations_details{border: 1px solid lightgray; margin: auto; padding: 10px; height: auto; overflow: hidden; margin-bottom: 10px;}
					.encard_realisations_details_colonne{float: left; width: 32%; margin: 0px 7px 0px 7px; font-size: 12px; color: black; text-shadow: none;}
						.encard_realisations_image{text-align: center; width: 100%; margin-bottom: 5px; overflow: hidden;}
						.encard_realisations_texte{font-size: 12px; color: black; text-align: center; width: 100%; margin-bottom: 5px; text-shadow: none; overflow: hidden;}
					/*.encard_realisations_details_colonne img{transition-property: filter; transition-duration: 1s;}
					.encard_realisations_details_colonne img:hover{
						filter: grayscale(100%);
						-webkit-filter: grayscale(100%);
						-moz-filter: grayscale(100%);
						-ms-filter: grayscale(100%);
						-o-filter: grayscale(100%);	
						cursor: pointer;
					}*/
					.vosgesmatin{width: 100%; overflow: auto;}
					
					#image_responsive_tournage_cache{display: none;}
					#image_responsive_tournage_visu{display: block;}
				td .titre_realisation{font-size: 18px; font-weight: bold; text-align: center;}	
			.titre_actu{font-weight: bold; text-decoration: underline; font-size: 16px;}
			#encard{margin: auto; border: 1px solid lightgray; padding: 20px; z-index: 20; position: relative; margin: 10px 30px 10px 30px;}
				.image_encard{width: 202px; height: 132px; position: absolute; z-index: 25; display: block; left: -33px; top: -4px;}
			.tarifs{width: 29%; border: 1px solid lightgray; padding: 15px; float: left; margin: 10px;}
			.sous_tarifs_titre{width: 100%; font-size: 20px; color: #a40000; text-align: center;}
			.sous_tarifs_details{width: 100%; height: 180px;}
			.sous_tarifs_prix{width: 100%; font-size: 26px; text-align: center;}
			.menu_contact{display: block; padding: 10px; background-color: #a40000; border-radius: 10px; box-shadow: 2px 2px 5px #000; transition-property: background-color; transition-duration: 0.5s; max-width: 260px; margin: auto; text-align: center; overflow: hidden;}
			.menu_contact:hover{background-color: #c64b4b;}
			.texte_article_court{display: table-cell; float: left; text-align: justify; width: 33%; min-width: 200px; padding-top: 10px;}
			.sous-titre{font-size: 14px; font-weight: bold; text-decoration: underline;}
			.image_centre{text-align: center;}
			.ligne-violette{background-color: #d3b8cf;}
			.ligne-blanche{background-color: #ffffff;}
			.cellule_tableau{border-collapse: collapse;}
			.cellule_tableau_full{border-collapse: collapse; width: 100%;}
			.colonne_gauche{width: 450px;}
			.colonne_droite{width: 150px; text-align: right;}
			.tableau{float: right; margin-top: 0px;}
			.colonne_centre{text-align: center; border: 1px solid gray; width: 33%;}
			.date_actualites{margin-left: 40px; font-size: 10px; color: gray;}
		.titre_contact{float: left; margin-left: 100px; width: 40%; margin-bottom: 8px;}		
		.titre_contact_complet{float: left; margin-left: 100px; width: 80%; margin-bottom: 8px;}		
		.champ_contact{margin-bottom: 8px;}	
		
		.lien_ancre_page{display: block; border: 1px solid gray; width: 22%; margin: 10px; float: left; padding: 20px 5px 5px 5px; text-align: center; height: 35px; background-color: #ddc7e2; transition-property: background-color; transition-duration: 0.5s; font-weight: bold;}
		.lien_ancre_page:hover{background-color: #9d6998; cursor: pointer;}
		
		a.lien:link,
		a.lien:visited{font-size: 14px; color: black; text-decoration: underline; font-weight: bold;}
		a.lien:hover{color: #6d1d62; text-decoration: none;}

		a.lien_contact_index:link{font-size: 16px; color: #ffffff; font-weight: none; text-decoration: underline;}
		a.lien_contact_index:visited{font-size: 16px; color: #ffffff; font-weight: none; text-decoration: underline;}
		a.lien_contact_index:hover{font-size: 16px; color: #bbbbbb; font-weight: none; text-decoration: underline;}
		
		a.lien_blocs{color: #000000; text-decoration: none;}
		#bulle{position: absolute; color: #d30000; border-radius: 0px 0px 10px 10px; height: 25px; width: 200px; box-shadow: 0px 5px 5px #ff9900; background-color: #ffdead; padding: 3px 0px 0px 3px; border: 1px solid lightgray; text-align: center; visibility: hidden;}
	#menu_telephone{display: none;}

	#footer{margin: auto; width: 100%; overflow: hidden; color: gray; background: url(../images/logo-alsace.jpg) no-repeat; background-position: right 500px top;}
		#footer_contenu{max-width: 1200px; margin: auto; height: 97px; vertical-align: bottom; overflow: hidden; padding-top: 20px;}
			.titre_footer{font-size: 16px;}
			.footer_adresse{float: left; width: 30%; margin: auto; color: gray; min-width: 200px; font-size: 12px; padding-left: 20px;}
			.footer_zone1{float: left; width: 30%; margin: auto; color: gray; min-width: 240px; vertical-align: bottom; height: 130px; padding-top: 55px;}
			.footer_zone2{float: left; width: 35%; margin: auto; color: gray; min-width: 240px; vertical-align: bottom; height: 130px; padding-top: 55px;}
			a.lien_footer:link,
			a.lien_footer:visited{color: gray; font-size: 13px;}
			a.lien_footer:hover{text-decoration: underline;}
			
			
			
	#header_admin{height: 64px; width: 100%; background-color: #ffffff; margin: 0px; padding: 0px; border-bottom: 1px solid gray; color: #6d1d62; font-size: 30px; text-align: center; overflow: hidden;}
	
	
	
	/* Conteneur principal */
.overlay-image {
 float: left;
 position: relative;
 width: 530px;
 margin: 20px 20px 5px 20px;
 border: 1px solid gray;
 padding: 10px;
}
/* Image originale */
.overlay-image .image {
 display: block;
 width: 530px;
 height: auto;
}
/* Texte original */
.overlay-image .text {
 color: #fff;
 font-size: 30px;
 line-height: 1.5em;
 text-shadow: 2px 2px 2px #000;
 text-align: center;
 position: absolute;
 top: 50%;
 /* left: 50%; */
 transform: translate(-75%, -50%);
 width: 100%;
}
.overlay-image .normal {
 transition: .5s ease;
}
.overlay-image:hover .normal {
 opacity: 0;
}
.overlay-image .hover {
 background-color: rgba(255,255,255,0.5);
}/* Overlay */
.overlay-image .hover {
 position: absolute;
 top: 0;
 height: 100%;
 width: 530px;
 opacity: 0;
 transition: .5s ease;
}
/* Apparition overlay sur passage souris */
.overlay-image:hover .hover {
 opacity: 1;
}