/* Feuille de style Dossier : 20260401_site_saintalbandhurtieres_php */
/* Dernière actualisation : 20260408 */
/* theme_summer */
/* feuille de style gestion responsive */

/* ------------------------Gestion du responsive-----------------------------*/
@viewport{
	width : device-width;
	zoom: 1;
}


/* ------------------------Gestion du responsive-----------------------------*/

/* --------------------------------------------------------*/
@media screen (min-width:1500px) and (max-width:2500px){
	#wrapper {
		width: 99%;
		height: 1450px;
		margin: 0 auto;
	}
	/* Taille de la class bloc image des blocs images */
	.bloc_image{
	/* 	width: 430px; */
		width: 31.6%;
		height: 400px;
		background-color: #9d9b95;
		border-radius: 5px;
		float:left;
		margin: 1.55% 1.55% 0% 0;
	}
	/* page le village - histoire-----------------------------------*/
	/* div slider-----------------------------------*/
	/* Taille de la div slider*/
	#wrapper #content_vh #slider_village{
		width: 40%;
		margin: 0% 0% 3% 5%;
	}
}


@media screen and (min-width:1051px) and (max-width:1500px){
/* Mentions légales -------------------------------------------------*/
/* Taille des sections */
#wrapper #content_mention_legales  #section1{	
	width: 28%;
}
#wrapper #content_mention_legales  #section2 {	
	width: 68%;
}
#wrapper #content_mention_legales  #section3{	
	width:98%;
	float: left;
}
/* taille et couleur des articles de la section2 */
	#wrapper #content_mention_legales #section2 #copyright {	
	height: 45%;
	margin: 0% 0% 3% 0;
	}
	#wrapper #content_mention_legales #section2 #cnil {	
	height: 47%;
	margin: 0% 0% 0% 0;
	}
	#wrapper #content_mention_legales  #section3{	
	height: 80%;
	margin: 1% 0% 1% 0;
}
/*  fin Mentions légales -------------------------------------------*/
}


/* Petite tablette paysage (800x600)--------------------------------------*/
/* Tablette portrait (768x1024)-------------------------------------------*/
/* Tablette paysage (1024x768)-------------------------------------------*/

@media screen and (min-width:750px) and (max-width:1050px){
	/* bloc menu responsive --------------------------------- */
	.bloc_menu_responsive{
	display: block;
	-ms-display: block;
	}
	.bloc_menu_responsive button{
		position : relative;
		float: right;
		margin: -100px 25px 0 0;
	}
	.bloc_menu_responsive .titreh3{
		text-align: left;
		font-size: 85%;
		padding-left : 10%;
	}	
	.bloc_menu_responsive .titre_sous_menu{
		font-size: 75%;
		text-align: left;
	}
	/* wrapper ----------------------------------*/
	#wrapper {
		width: 98%;
		height: 900px;
		margin: 0 auto;
	}
	/* header --------------------------------- */
	#wrapper header {
		width: 100%;
		height: 29%;
		max-height: 200px; 
		background-size: cover;
		margin: 0 auto;
	}
	/* Taille et positionnement du logo et de l'image du logo*/
	#wrapper header #logo{
		width: 206px;
		height: 76px;
		position: absolute;
		top: 100px;
		left: 25px;
		background: url(img_theme/logo_complet.png) no-repeat;
		background-size: contain;
	}
	/* Taille et positionnement du village */
	#wrapper header #village{
		position: absolute;
		width: 209px;
		height: 55px;
		top: 130px;
		left: 309px;
	}
	/* Zone du Menu -------------------------- */
	#wrapper header #menu_header {
		display: none;
	}
	/* Taille de la class bloc image des blocs images */
	.bloc_image{
		width: 31.6%;
		height: 210px;
		background-color: #9d9b95;
		border-radius: 5px;
		float:left;
		margin: 1.55% 1.55% 0% 0;
	}
	/* Elements communs des libelles des titres de sous-menu */
	.titre_sous_menu {
		font-size: 75%;
		line-height: 26px;
		letter-spacing: 0.5px;
	}
	.titreh3 {
		color: white;
		font-size: 80%;
		line-height: 25px;
		text-align: center;
		letter-spacing: 0.5px;
	}
	/* Positionnement du bloc ul et des titre de chaque image bloc */
	#wrapper #content  ul{
		width: 90%;
		height: 160px;
		margin: 85px auto 0 auto;
	}
	/* Taille et positionnement des sous menus des tuiles images */
	#wrapper #content  li{
		height: 21px;
		margin: 3px auto 0 auto;
	}
	/* Taille des titres  des sous menus des tuiles images */
	#wrapper #content  li a {
		font-size: 70%;
	}
	
	/* Elements communs des libelles des titres de sous-menu et de la rubrique Mairie */
	.titre_sous_menu {
		font-size: 90%;
		line-height: 30px;
		letter-spacing: 0.5px;
	}
	.titreh3 {
		color: white;
		font-size: 90%;
		line-height: 30px;
		text-align: center;
		letter-spacing: 0.5px;
	}
	.texte_bloc {
		color: white;
		font-size: 90%;
		line-height: 18px;
	}
	#infos_mairie {
		height: 28%;
	}
	/* iframe meteo---------------------------------------*/
	/* Taille de l'iframe meteo france */
	/*#wrapper #infos_mairie #widget_autocomplete_preview {
		width: 300px;
		height: 150px;
		float: left;
	}
	/* fin iframe meteo france-----------------------------------*/
	
	
	/* footer --------------------------------- */
	/* diminution de la taille du logo maurienne */
	footer img{
		width: 40px;
		height: 48px;
		margin: 9px 25px 0 25px;
	}
	/* repositionnement du nom de la rubrique conception du footer et de l'adresse email*/
	footer a:nth-child(7){
		width: 230px;
		margin: 40px auto auto -243px;
		font-size: 80%;
	}
	/* retaille des rubriques Plan du site - Contact  */
	footer a:nth-child(2), footer a:nth-child(3){
		width: 110px;
	}
	/* retaille des rubriques mentions légales - Conception*/
	footer a:nth-child(4), footer h3:nth-child(5){
		width: 130px;
	}
	/* page histoire-----------------------------------------*/
	/* ----------------------------------------------------- */
	/* retaille de la div histoire*/
	#wrapper #content_vh #histoire {
		width: 40%;
		font-size: 95%;
	}	
	#wrapper #content_vh #blason p {
		font-size: 80%;
	}
	/* retaille de la div slider*/
	#wrapper #content_vh #slider_village{
		width: 55%;
		margin: 0 0 3% 2%;
	}
	/* div tableaux_insee--------------------------------------------*/
	/* retaille de la section tableaux_insee_gauche */
	#wrapper #content_vh #tableaux_insee_gauche{
		width: 50%;
		font-size: 90%;
	}
	#wrapper #content_vh #tableaux_insee_droite{
		width: 45%;
		font-size: 90%;
	}
	/* fin page histoire-----------------------------------------*/
	/* ----------------------------------------------------- */
	
	/* page localisation-----------------------------------------*/
	/* div localisation-----------------------------*/
	/* Taille de la div localisation*/
	#wrapper #content_vl #localisation{
		width: 35%;
		font-size: 94%;
		margin: 1% 1% 0% -1%;
	}
	/* retaille de la typo du bloc localisation*/
	#wrapper #content_vl #localisation p {
		font-size: 86%;
		line-height: 15px;
	}
	#wrapper #content_vl #tableaux_geographie h3{
		margin: 0 0 3% 1%;
		font-size: 90%;
	}
	/* fin div localisation-------*/
	/* div street_map -----------------------------*/
	/* Taille de la div bloc_street_map - fond de la div */
	#wrapper #content_vl #bloc_street_map{
		height: 450px;
		margin: 5% 0% 5% 0;
		width: 65%;
	}
	/* Taille de la div street_map*/
	#wrapper #content_vl #street_map{
		width: 96%;
	}
	/* fin div bloc_street_map---------*/

	/* div tableaux_geographie-----------------------------*/
	/* Taille de la div ---*/
	#wrapper #content_vl #tableaux_geographie{
		width: 60%;
		font-size: 85%;
	}
	#wrapper #content_vl #tableaux_geographie h3 {
		ont-size: 90%;
		margin: 0 0 3% -1%;
	}
	/* Taille des collones */
	#wrapper #content_vl #tableaux_geographie .tab_col1{
		width: 10%;
	}
	#wrapper #content_vl #tableaux_geographie #chiffres-cles4 td {
		margin: 2% 1% 3% 10%;
		font-size: 90%;
	}	
	/* fin div tableaux_geographie-----*/
	/* fin page localisation----------------------------------------*/
	/* ----------------------------------------------------- */
	
	/* page mairie-les-elus-----------------------------------------*/
	/* Taille du content*/
	#wrapper #content_me {
		font-size: 94%;
	}
	/* div bloc photo les elus-----------------------------*/
	/* Taille de la div bloc photo les elus*/
	#wrapper #content_me #bloc_photo_elus{
		width: 44%;
	}
	#wrapper #content_me #bloc_photo_elus_nb {
		float: right;
		margin: 37% 0 0 3%;
		width: 40%;
	}
	/* Taille et position du bloc texte */
	#wrapper #content_me #texte {
		width: 52%;
		font-size: 95%;
	}
	#wrapper #content_me #texte p{
		width: 57%;
	}
	/* Taille et position du bloc infos_mairie */
	#wrapper #content_me #infos_mairie {
		width: 70%;
		margin: 1.5% 2% 2% 2%;
	}
	/* fin page mairie-elus----------------------------------------*/
	/* ----------------------------------------------------- */

	/* page contact-------------------------------------------------*/
	/* retaille des section1 & section2 */
	/* retaille et position pour la section qui va contenir le bloc formulaire */
	#wrapper #zone1_form{
		width: 100%;
		margin: 1% auto;
	}
	/* retaille des champs de saisie  */
	#wrapper #zone1 input{
		width:90%;
		max-width: 310px;
	}
	/* retaille de la taille du libelle recevoir email  */
	#wrapper #zone2 label:nth-child(3){
		width:90%;
	}
	/* fin page contact ----------------------------------------*/
	/* ----------------------------------------------------- */
	
	/* page mentions legales---------------------------------------*/
	/* retaille des blocs */
	/* Taille des sections */
	#wrapper #content_mention_legales  #section1{	
		height: 910px;
		width: 30%;
	}	
	#wrapper #content_mention_legales  #section2{	
		width: 65%;
		height: 690px;
		border: none;
		float: right;
	}
	/* bloc limites techniques ---------*/
	/* retaille */
	#wrapper #content_mention_legales  #lim_tech{	
		height: 32%;
	}
	/* taille et couleur des artclies de la section2 */
	#wrapper #content_mention_legales #section2 #copyright {	
		width: 100%;
		height: 70%;
		float: right;
		margin: 0% 0% 5% 0%;
	}
	#wrapper #content_mention_legales #section2 #cnil {	
		width: 100%;
		height: 65%;
		float: right;
		background: #a9cb40;
		margin: auto;
	}
	#wrapper #content_mention_legales  #section3{	
		width: 98%;
		height: 70%;
		border: none;
		margin: 15% 2% 2% 0;
	}
	/* fin page mentions legales----------------------------------*/
	
	/* page demarches admin livret----------------------*/
	/* retaille des blocs */
	#wrapper #content_demarches_livret h2 {
    font-size: 110%;
	}
	#wrapper #content_demarches_livret h2 img{
    height: 35px;
	}

	/* page demarches admin recensement----------------------*/
	/* retaille des blocs */
	#wrapper #content_demarches_recensement h2 {
    font-size: 110%;
	margin: 30px 0 20px 10px;
	}
	#wrapper #content_demarches_recensement h2 img{
    height: 35px;
	float : right;
	}
	
	
/* Taille position texte du bloc warning */

/* Taille et position des bloc ul - boutons */
#wrapper #content_urbanisme ul{	
	border: none;
	float: left;
	margin: 0 0px 0 0px;
}

	
	/* page dechetterie----------------------*/
	/* retaille des blocs */
	#wrapper #content_dechetterie #bloc2_gauche {
    font-size: 100%;
    width: 810px;
	min-height: 800px;
	}

	/* page Plan d'eau----------------------*/
	#wrapper #content_lac {
    height: 1015px;
	}
	#wrapper #content_lac h2 {
		margin: 0;
	}
	#wrapper #content_lac .liens_utiles{
    width: 15%;;
	}
	#wrapper #content_lac #bloc2gauche figcaption {
    font-size: 125%;
	}
}


/* Petite tablette portrait (600x800)--------------------------------------*/
@media screen and (min-width:500px) and (max-width:749px){
	/* bloc menu responsive --------------------------------- */
	.bloc_menu_responsive{
		display : initial;
	}
	.bloc_menu_responsive button{
		position : relative;
		float: right;
		margin: -85px 25px 0 0;
	}
	.bloc_menu_responsive .titreh3{
		text-align: left;
		font-size: 80%;
		padding-left : 10%;
	}	.bloc_menu_responsive .titre_sous_menu{
		font-size: 75%;
		text-align: left;
	}
	/* Taille et position du bloc menu */
	.dl-menuwrapper {
	width: 100%;
	max-width: 100%;
	}
	/* wrapper -------------------------------------------------*/
	#wrapper {
		width: 98%;
		height: 1210px;
		margin: 0 auto;
	}
	/* header --------------------------------- */
	#wrapper header {
		width: 100%;
		height: 16%;
		min-height: 180px; 
/* 		background: url(img_theme/bg_header.png) no-repeat; */
		background-size: cover;
		margin: 0 auto;
	}
	/* Taille et positionnement du logo et de l'image du logo*/
	#wrapper header #logo{
		width: 170px;
		height: 65px;
		position: absolute;
		top: 111px;
		left: 20px;
		background: url(img_theme/logo_complet.png) no-repeat;
		background-size: contain;
	}
	/* Taille et positionnement du village */
	#wrapper header #village{
		position: absolute;
		width: 188px;
		height: 49.5px;
		top: 133px;
		left: 200px;
	}
	/* Taille et positionnement de l'icone en cours */
 	#wrapper header #site_en_cours{
		width: 25%;
	}
	/* Zone du Menu ------------------------- */
	#wrapper header #menu_header {
		display: none;
	}
	/* Taille de la class bloc image des blocs images */
	.bloc_image{
		width: 48%;
		height: 210px;
		background-color: #9d9b95;
		border-radius: 5px;
		float:left;
		margin: 2% 2% 0% 0;
	}
	/* Taille de la class bloc image des blocs images Le Village et Tourisme */
	#wrapper #content #bloc_village, #wrapper #content #bloc_tourisme{
		width: 98%;
		height: 230px;
		background-color: #9d9b95;
		border-radius: 5px;
		float:left;
		margin: 2% 2% 0% 0;
	}
	/* Elements communs des libelles des titres de sous-menu et de la rubrique Mairie */
	.titre_sous_menu {
		font-size: 80%;
		line-height: 30px;
		letter-spacing: 0.5px;
	}
	.titreh3 {
		color: white;
		font-size: 90%;
		line-height: 30px;
		text-align: center;
		letter-spacing: 0.5px;
	}
	.texte_bloc {
		color: white;
		font-size: 90%;
		line-height: 18px;
	}
	#infos_mairie {
		height: 20%;
	}
	/* iframe meteo----------------------------------------------*/
	/* Taille de l'iframe meteo france */
	/*#wrapper #infos_mairie #widget_autocomplete_preview {
		width: 400px;
		height: 150px;
		float: left;
	}
	/* fin iframe meteo france-----------------------------------*/
	
	
	/* Positionnement du bloc ul et des titre de chaque image bloc */
	#wrapper #content  ul{
		width: 75%;
		height: 160px;
		margin: 45px auto 0 auto;
	}
	/* Taille et positionnement des sous menus des tuiles images */
	#wrapper #content  li{
		height: 30px;
		margin: 3px auto 0 auto;
	}
	/* Retaille pour le titre communauté de commune et demarches admin*/
	#wrapper #content #bloc_mairie li:last-child a, #wrapper #content #bloc_infos li:nth-child(2) a{
		letter-spacing: 0px;
	}
	/* footer --------------------------------- */
		/* diminution de la taille du logo maurienne */
	footer img{
		width: 32px;
		height: 38px;
		margin: 15px 15px 0 15px;
	}
	/* diminution de la taille de la typo des rubriques du footer  */
	footer a:nth-child(2), footer a:nth-child(3), footer a:nth-child(4), footer h3:nth-child(5){
		font-size: 60%;
		line-height: 20px;
		letter-spacing: 0px;
	}
	/* retaille des rubriques Plan du site - Contact  */
	footer a:nth-child(2), footer a:nth-child(3){
		width: 100px;
	}
	/* retaille des rubriques mentions légales - Conception*/
	footer a:nth-child(4), footer h3:nth-child(5){
		width: 140px;
	}footer a:nth-child(4){
		border-right: 1px solid white;
	}
	/* repositionement des rubriques du footer */
	footer a:nth-child(2), footer a:nth-child(3), footer a:nth-child(4), footer h3:nth-child(5){
		margin: 10px auto;
	}
	/* repositionement de la rubrique conception */
	footer h3:nth-child(5){
		margin: 35px auto auto -344px;
	}	
	footer a:nth-child(6){
		margin: 30px auto auto -225px;
		font-size: 80%;
	}
	/* repositionnement du nom de la rubrique conception du footer et de l'adresse email*/
	footer a:nth-child(7){
		margin: 45px auto auto -225px;
		font-size: 75%;
	}
			
	/* page histoire-----------------------------------------*/
	/* ----------------------------------------------------- */
	/* retaille de la div histoire*/
	#wrapper #content_vh #histoire{
		width: 95%;
	}
	/* retaille de la div slider*/
	#wrapper #content_vh #slider_village{
		width: 95%;
		min-width: 320px;
		margin-left: 3%;
	}
	/* retaille de la typo du bloc histoire*/
	#wrapper #content_vh #histoire p {
		font-size: 90%;
		line-height: 15px;
	}
	/* retaille du bloc image blason*/
	#wrapper #content_vh #blason img{
	width: 12%;
	}
	/* retaille taille & typo du bloc blason */
	#wrapper #content_vh #blason p {
		width: 72%;
		font-size: 75%;
	}
	/* Taille et position du titre h2*/
	#wrapper #content_vh #tableaux_insee h2{
		font-size: 120%;
	}
	/* div tableaux_insee--------------------------------------------*/
	#wrapper #content_vh #tableaux_insee{
		width: 98%;
		position: relative;
	}
	/* retaille de la section tableaux_insee_gauche */
	#wrapper #content_vh #tableaux_insee_gauche{
		width: 95%;
		font-size: 90%;
	}
	/* Marge du tableau chiffres-cles2 & chiffres-cles3 */
	#wrapper #content_vh #chiffres-cles2, #wrapper #content_vh #chiffres-cles3{
		margin: 0% 2% 3% 0%;
	}
		/* retaille du diagrame */
	#wrapper #content_vh #tableaux_insee_droite img, #wrapper #content_vh #tableaux_insee_droite h1{
		width: 85%;
	}
	/* retaille de la section tableaux_insee_droite */
	#wrapper #content_vh #tableaux_insee_droite{
		width: 95%;
		font-size: 90%;
	}
	/* fin page histoire-----------------------------------------*/
	/* ----------------------------------------------------- */
	
	/* page localisation-----------------------------------------*/
	/* Taille de la div localisation*/
	#wrapper #content_vl #localisation{
		width: 100%;
	}
	/* retaille de la typo du bloc localisation*/
	#wrapper #content_vl #localisation p {
		font-size: 90%;
		line-height: 15px;
	}
	#wrapper #content_vl #tableaux_geographie h3{
		margin: 0 0 3% 1%;
		font-size: 90%;
	}
	/* fin div localisation-------*/
	/* div street_map-----------------------------*/
	/* Taille de la div bloc_street_map - fond de la div */
	#wrapper #content_vl #bloc_street_map{
		width: 98%;
		height: 450px;
		margin: 2% 2% 5% 0%;
	}
	/* Taille de la div street_map*/
	#wrapper #content_vl #street_map{
		width: 96%;
	}
	/* fin div bloc_street_map---------*/
	/* div tableaux_geographie-----------------------------*/
	/* Taille de la div ---*/
	#wrapper #content_vl #tableaux_geographie{
		width: 100%;
		font-size: 90%;
		margin-left: 1%
	}	
	#wrapper #content_vl #tableaux_geographie #chiffres-cles4{
		margin: 2% 3% 3% 0%;
	}	
	/* fin div tableaux_geographie-----*/
	/* fin page localisation-----------------------------------------*/
	/* ----------------------------------------------------- */
	
	
	/* page mairie-les-elus-----------------------------------------*/
	/* Taille du content*/
	#wrapper #content_me {
		font-size: 94%;
	}
	/* div bloc photo les elus-----------------------------*/
	/* Taille de la div bloc photo les elus*/
	#wrapper #content_me #bloc_photo_elus{
		width: 90%;
		margin: 1% 0 0 12%;
	}
	/* Taille et position du bloc texte */
	#wrapper #content_me #texte {
		width: 95%;
		max-width: 95%;
		font-size: 95%;
	}
	/* Taille de la div bloc photo les elus nb*/
	#wrapper #content_me #bloc_photo_elus_nb {
		margin: 30% 0 0 0%;
		width: 49%;
	}
	/* Taille et position du bloc infos_mairie */
	#wrapper #content_me #infos_mairie {
		width: 95%;
		margin: 1.5% 2% 2% 2%;
	}
	/* fin page mairie-elus----------------------------------------*/
	/* ----------------------------------------------------- */
	
	
	/* page mairie-les-commissions-----------------------------------*/
	/* retaille des section1 & section2 */
	#wrapper #content_mc #section1, #wrapper #content_mc #section2{	
	width: 75%;
	}
	/* re-posotionnement des liens */
	#wrapper #content_mc #liens_utiles{	
	width: 15%;
	float: right;
	margin: -117% 0 0 0;
	padding: 1% 1% 1% 1%;
	}
	/* fin page mairie-commissions-----------------------------------*/
	/* ----------------------------------------------------- */
	
	/* page contact-------------------------------------------------*/
	/* retaille du bloc formulaire */
	#wrapper #content_form{
	clear: both;
	height: 80%;
	}
	/* retaille et position pour la section qui va contenir le bloc formulaire */
	#wrapper #zone1_form{
		width: 100%;
		margin: 1% auto;
	}
	/* retaille et position des bloc zone1 et zone 2 */
	#wrapper #zone1, #wrapper #zone2{
		width:100%;
		float:left;
		border: none;
	}
	#wrapper #zone2 {
    margin-top: 10px;
	}
	/* retaille des champs de saisie  */
	#wrapper #zone1 input{
		width:90%;
		max-width: 410px;
	}
	/* fin page contact ----------------------------------------*/
	/* ----------------------------------------------------- */
	
	/* page mentions legales---------------------------------------*/
	/* retaille des blocs */
	#wrapper #content_mention_legales  #section1{	
		width: 85%;
		height: 750px;
		border: none;
		float: left;
		margin: 0% 0% 2% 2%;
	}		
	#wrapper #content_mention_legales  #section2{	
		width: 96%;
		height: 75%;
		border: none;
		float: left;
		margin: 15% 0% 2% 2%;
	}
	/* bloc limitation techniques---------*/
	/* retaille */
	#wrapper #content_mention_legales #lim_tech{	
		height: 25%;
	}
	/* taille et couleur des articles de la section2 */
	#wrapper #content_mention_legales #section2 #copyright {	
		letter-spacing: initial;
		width: 100%;
		height: 75%;
		float: left;
		margin: 0% 0% 5% 0%;
	}
	#wrapper #content_mention_legales #section2 #cnil {	
		letter-spacing: initial;
		width: 100%;
		height: 62%;
		float: left;
		background: #a9cb40;
		margin: 0% 0% 5% 1%;
	}
	#wrapper #content_mention_legales  #section3{	
		letter-spacing: initial;
		width: 96%;
		float: left;
		height: 62%;
		border: none;
		margin: 4% 0 2% 3%;
	}
	/* fin page mentions légales ----------------------------------*/
	/* ----------------------------------------------------- */
	
	/* page comcom --------------------------------------*/
	/* retaille des blocs */
	#wrapper #content_comcom  #comcom_gauche, #wrapper #content_comcom  #contact_comcom, #wrapper #content_comcom  #comcom_droite{
	width: 96%;
	float: left;
	}
	#wrapper #content_comcom  #comcom_droite section{
		width: 94%;
	}
	/* retaille et position du titre h2 et logo*/
	#wrapper #content_comcom h2{
		width: 96%;
		font-size: 110%;
	}
	#wrapper #content_comcom h2 img {
		margin: 0 0 0 10px;
	}
	/* fin page comcom ----------------------------------*/
	/* ----------------------------------------------------- */
	
	/* page demarches admin naissance----------------------*/
	/* retaille des blocs */
	#wrapper #content_demarches_naissance h2 {
    font-size: 100%;
	margin: 30px 0 20px 10px;
	}
	#wrapper #content_demarches_naissance h2 img{
    height: 35px;
	}
	.bloc_info_gauche {
    width: 95%;
	margin: 20px 0 10px 0px;
	}
	.bloc_info_droite {
    width: 95%;
	padding: 0;
	float: left;
	}	
	/* page demarches admin mariage----------------------*/
	/* retaille des blocs */
	#wrapper #content_demarches_mariage h2 {
    font-size: 100%;
	margin: 30px 0 20px 10px;
	}
	#wrapper #content_demarches_mariage h2 img{
    height: 35px;
	}
	/* page demarches admin deces----------------------*/
	/* retaille des blocs */
	#wrapper #content_demarches_deces h2 {
    font-size: 100%;
	margin: 30px 0 20px 10px;
	}
	#wrapper #content_demarches_deces h2 img{
    height: 35px;
	}	
	/* page demarches admin livret----------------------*/
	/* retaille des blocs */
	#wrapper #content_demarches_livret h2 {
    font-size: 100%;
	margin: 30px 0 20px 10px;
	}
	#wrapper #content_demarches_livret h2 img{
    height: 30px;
	float : right;
	}
	/* page demarches admin recensement----------------------*/
	/* retaille des blocs */
	#wrapper #content_demarches_recensement h2 {
    font-size: 110%;
	margin: 30px 0 20px 10px;
	}
	#wrapper #content_demarches_recensement h2 img{
    height: 35px;
	float : right;
	}	
	/* page demarches admin identite----------------------*/
	/* retaille des blocs */
	#wrapper #content_demarches_identite h2 {
    font-size: 110%;
	margin: 30px 0 20px 10px;
	}
	#wrapper #content_demarches_identite h2 img{
    height: 35px;
	float : right;
	}
	/* page info -eau ---------------------*/
	/* retaille des blocs */
	/* retaille des bloc gauche et droite */
	#wrapper #content_eau .bloc_info_gauche{
		width: 95%;
	}
	#wrapper #content_eau .bloc_contact{
		width: 95%;
	}
	#wrapper #content_eau .bloc_info_droite{
		width: 90%;
		margin: 0 0 0 3%;
	}
	/* Taille et position de l'img contenu dans le h3*/
	#wrapper #content_eau  #bloc1 #bloc1_gauche h3 img{
		height: 85px;
		float: right;
		box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
		border-radius: 5px 5px 5px 5px;
		margin: -45px 5px 0 0;
	}
	/* pages urbanisme  ---------------------*/
	/* bloc texte warning urbanisme  ---------------------*/

	
	/* retaille des blocs */
	#content_urbanisme_travaux h2 a img,	#content_urbanisme_construire h2 a img, #content_urbanisme_certificat h2 a img {
    margin: 20px 0 10px 0;
	display: block;
	float: right;
	}
	#content_urbanisme_travaux .liste_bouton ,#content_urbanisme_construire .liste_bouton, #content_urbanisme_certificat .liste_bouton {
    display: block;
    margin: 10px 0 0 0;
	}
	/* page dechetterie----------------------*/
	/* retaille des blocs */
	/* Répartition des 2 blocs dans le bloc2_gauche ---------*/
	/* bloc texte ---------*/
	#wrapper #content_dechetterie #bloc2_gauche #bloc2_gauche_1 { 
	width: 95%;
	float: left;
	margin: 2% 2% 2% 2%;
	}
	/* bloc image ---------*/
	#wrapper #content_dechetterie #bloc2_gauche #bloc2_gauche_2 { 
	width: 95%;
	float: left;
	margin: 2% 2% 2% 2%;
	}
	
	
	/* page Plan d'eau----------------------*/
	#wrapper #content_lac {
    height: 1055px;
	}
	#wrapper #content_lac h2 {
		margin: 0;
	}
	#wrapper #content_lac .bloc_info_gauche {
    width: 70%;
	}
	#wrapper #content_lac .liens_utiles{
	/*     display: none; */
	width: 18%;
	float: left;
	margin: 15% 0 2% 2%;
	}
	#wrapper #content_lac #bloc2gauche figcaption {
    font-size: 125%;
	}
	
	/* pages association - retaille bouton retour menu ------ */
	#wrapper #content_hurtibelle h2 img, #wrapper #content_comite h2 img, #wrapper #content_gdh h2 img, #wrapper #content_pepinart h2 img, #wrapper #content_soudesecoles h2 img, #wrapper #content_terrepierres h2 img{
		height: 40px;
		float: right;
		margin: 2% 5% 5% 0;
	}
	/* page association club hurtibelle ----------------------*/
	/* retaille des boutons menus --*/
	#wrapper #content_hurtibelle .liste_bouton {
    display: block;
    margin: 10px 0 0 0;
	}
	
	
}


/* ---------------------------------------------------------*/
@media screen and (min-width:402px) and (max-width:500px){
	/* bloc menu responsive --------------------------------- */
	.bloc_menu_responsive{
		display : initial;
	}
	.bloc_menu_responsive button{
		position : relative;
		float: right;
		margin: -80px 25px 0 0;
	}
	.bloc_menu_responsive .titreh3{
		text-align: left;
		font-size: 80%;
		padding-left : 10%;
	}
	.bloc_menu_responsive .titre_sous_menu{
		font-size: 75%;
		text-align: left;
	}
	/* wrapper -------------------------------------------------- */
	#wrapper {
		width: 98%;
/* 		height: 1400px; */
		margin: 0 auto;
	}
	/* header --------------------------------- */
	#wrapper header {
		width: 100%;
		height: 10%;
		min-height: 180px; 
/* 		background: url(img_theme/bg_header_short.png) no-repeat left; */
		background-size: cover;
/* 		margin: 0 auto; */
	}
	/* Taille et positionnement du logo et de l'image du logo*/
	#wrapper header #logo{
		width: 144px;
		height: 54px;
/* 		position: absolute; */
		top: 110px;
		left: 20px;
/* 		background: url(img_theme/logo_complet.png) no-repeat; */
/* 		background-size: contain; */
	}
	/* Taille et positionnement du village */
	#wrapper header #village{
		position: absolute;
		width: 170px;
		height: 40.5px;
		top: 131px;
		left: 153px;
	}
	/* Taille et positionnement de l'icone en cours */
 	#wrapper header #site_en_cours{
		width: 30%;
	}
	/* Zone du Menu ---------------------- */
	#wrapper header #menu_header {
		display: none;
	}
	/* Taille de la class bloc image des blocs images */
	.bloc_image{
		width: 98%;
		height: 180px;
		background-color: #9d9b95;
		border-radius: 5px;
		float:left;
		margin: 2% 2% 0% 0;
	}
	/* Elements communs des libelles des titres de sous-menu et de la rubrique mairie */
	.titre_sous_menu {
		font-size: 90%;
		line-height: 30px;
		letter-spacing: 0.5px;
	}
	.titreh3 {
		color: white;
		font-size: 90%;
		line-height: 30px;
		text-align: center;
		letter-spacing: 0.5px;
	}
	.texte_bloc {
		color: white;
		font-size: 90%;
		line-height: 20px;
	}
	/* diminution de la taille du bloc titre de la rubrique Mairie et des infos */
	#infos_mairie h3{
		width: 70px;
	}
	.texte_bloc {
		line-height: 18px;
	}
	#infos_mairie p:nth-child(2), #infos_mairie p:nth-child(4) {
		float: left;
		margin: 6px 3px;
	}
	/* suppression du fax de la rubrique Mairie et des infos */
	#infos_mairie p span{
		/*display: none;*/
	}
	
	#infos_mairie {
		height: 23%;
	}
	/* iframe meteo----------------------------------------------*/
	/* Taille de l'iframe meteo france */
	/*#wrapper #infos_mairie #widget_autocomplete_preview {
		width: 400px;
		height: 100px;
		float: left;
	}
	/* fin iframe meteo france-----------------------------------*/

	
	/* Positionnement du bloc ul et des titre de chaque image bloc */
	#wrapper #content  ul{
		width: 75%;
		height: 160px;
		margin: 10px auto 0 auto;
	}
	/* Taille et positionnement des sous menus des tuiles images */
	#wrapper #content  li{
		height: 30px;
		margin: 3px auto 0 auto;
	}
	/* Retaille pour le titre communauté de commune et demarches admin*/
	#wrapper #content #bloc_mairie li:last-child a, #wrapper #content #bloc_infos li:nth-child(2) a{
		letter-spacing: 0px;
	}
	/* footer --------------------------------- */
		/* diminution de la taille du logo maurienne */
	footer img{
		display: none;
	}
	/* diminution de la taille de la typo des rubriques du footer  */
	footer a:nth-child(2), footer a:nth-child(3), footer a:nth-child(4), footer h3:nth-child(5){
		font-size: 60%;
		line-height: 20px;
		letter-spacing: 0px;
	}
	/* retaille des rubriques Plan du site - Contact  */
	footer a:nth-child(2), footer a:nth-child(3){
		width: 90px;
	}
	/* retaille des rubriques mentions légales - Conception*/
	footer a:nth-child(4), footer h3:nth-child(5){
		width: 130px;
	}
	footer a:nth-child(2){
		border: none;
	}
	/* repositionement des rubriques du footer */
	footer a:nth-child(2), footer a:nth-child(3), footer a:nth-child(4), footer h3:nth-child(5){
		margin: 10px auto;
	}
	/* repositionement de la rubrique conception */
	footer h3:nth-child(5){
		margin: 35px auto auto -331px;
	}	
	footer a:nth-child(6){
		margin: 30px auto auto -220px;
		font-size: 75%;
	}
	/* repositionnement du nom de la rubrique conception du footer et de l'adresse email*/
	footer a:nth-child(7){
		margin: 45px auto auto -220px;
		font-size: 70%;
	}
	/* page histoire-----------------------------------------*/
	/* ----------------------------------------------------- */
	/* retaille de la div histoire*/
	#wrapper #content_vh #histoire {
		width: 95%;
		font-size: 95%;
	}
	/* suppression de la div slider*/
	#wrapper #content_vh #slider_village{
		display: none;
	}
	/* retaille du bloc image blason*/
	#wrapper #content_vh #blason img{
		width: 25%;
		margin-left: 35%;
	}
	/* retaille taille & typo du bloc blason */
	#wrapper #content_vh #blason p {
		width: 95%;
		font-size: 75%;
	}
	/* Taille et position du titre h2*/
	#wrapper #content_vh #tableaux_insee h2{
		font-size: 100%;
	}
	/* div tableaux_insee--------------------------------------------*/
	/* retaille de la section tableaux_insee_gauche */
	#wrapper #content_vh #tableaux_insee_gauche{
		width: 95%;
	}
	#wrapper #content_vh #tableaux_insee_droite{
		width: 95%;
	}
	/* fin page histoire-----------------------------------------*/
	/* ----------------------------------------------------- */
	/* page localisation-----------------------------------------*/
	/* Taille de la div localisation*/
	#wrapper #content_vl #localisation{
		width: 98%;
	}	
	#wrapper #content_vl{
		margin: auto;
	}
	/* retaille de la typo du bloc localisation*/
	#wrapper #content_vl #localisation p {
		font-size: 85%;
		line-height: 15px;
	}
	#wrapper #content_vl #tableaux_geographie h3{
		margin: 0 0 3% 0%;
		font-size: 90%;
	}
	/* fin div localisation-------*/
	/* div street_map-----------------------------*/
	/* Taille de la div bloc_street_map - fond de la div */
	#wrapper #content_vl #bloc_street_map, #wrapper #content_vl #street_map{
	width: 96%;
	margin: 0 0 3% 1%;
	}
	/* fin div bloc_street_map---------*/
	/* div tableaux_geographie-----------------------------*/
	/* Taille de la div ---*/
	#wrapper #content_vl #tableaux_geographie{
		width: 100%;
		font-size: 90%;
		margin-left: 1%
	}	
	#wrapper #content_vl #tableaux_geographie #chiffres-cles4{
		margin: 2% 2% 3% 0%;
	}	
	/* fin div tableaux_geographie-----*/
	/* fin page histoire-----------------------------------------*/
	/* ----------------------------------------------------- */
		/* page mairie-les-elus-----------------------------------------*/
	/* Taille du content*/
	#wrapper #content_me {
		font-size: 98%;
	}
	/* div bloc photo les elus-----------------------------*/
	/* Taille de la div bloc photo les elus*/
	#wrapper #content_me #bloc_photo_elus{
		width: 95%;
		margin: 3% 0 0 3%;
	}	
	/* Taille de la div bloc photo les elus nb*/
	#wrapper #content_me #bloc_photo_elus_nb{
		width: 70%;
		float: right;
		margin: 3% 3% 0 3%;
	}
	/* Taille et position du bloc texte */
	#wrapper #content_me #texte {
		width: 100%;
		max-width: 100%;
		margin: 2% 0 0 2%;
	}
	/* Taille et position du bloc texte p*/
	#wrapper #content_me #texte p{
		width: 100%;
	}	
	/* Taille et position du bloc info mairie*/
	#wrapper #content_me #infos_mairie span, #wrapper #content_me #infos_mairie span a{
		display: initial;
	}
	/* fin page mairie-elus----------------------------------------*/
	/* ----------------------------------------------------- */
	
	/* page mairie-les-commissions-----------------------------------*/
	/* retaille des section1 & section2 */
	#wrapper #content_mc #section1, #wrapper #content_mc #section2{	
	width: 75%;
	font-size: 90%;
	line-height: 13px;
	}
	/* re-posotionnement des liens */
	#wrapper #content_mc #liens_utiles{	
	width: 15%;
	float: right;
	margin: -147% 0 0 0;
	padding: 1% 1% 1% 1%;
	}
	
	/* page contact-------------------------------------------------*/
	/* retaille du bloc formulaire */
	#wrapper #content_form{
	clear: both;
	height: 88%;
	}
	/* retaille et position pour la section qui va contenir le bloc formulaire */
	#wrapper #zone1_form{
		width: 100%;
		margin: 1% auto;
		font-size: 90%;
		line-height: 15px;
	}
	/* retaille et position des bloc zone1 et zone 2 */
	#wrapper #zone1, #wrapper #zone2{
		width:100%;
		float:left;
		border: none;
	}
	#wrapper #zone1_form {
		height: 97%;
		width: 100%;
	}
	/* retaille des champs de saisie  */
	#wrapper #zone1 input{
		width:90%;
		max-width: 310px;
	}
	#wrapper #zone2 {
    margin-top: 10px;
	}
	/* retaille des champs de saisie  message */
	#zone2 textarea {
    height: 250px;
    margin-top: 1%;
    width: 97%;
	}
	/* retaille de la taille du libelle recevoir email  */
	#wrapper #zone2 label:nth-child(3){
		width:90%;
	}
	/* position du bouton envoi */
	#wrapper #zone2 input:nth-child(5){
		margin: 4% 0 0 50%;
	}
	/* fin page contact ----------------------------------------*/
	/* ----------------------------------------------------- */
	
	
	/* page mentions legales---------------------------------------*/
		#wrapper #content_mention_legales h2 {
		margin: 15px 0px 0px 0px;
	}
	/* retaille des blocs */
	#wrapper #content_mention_legales  #section1{	
		width: 100%;
		float: left;
		margin: 0% 0% 1% 1%;
	}		
	#wrapper #content_mention_legales  #section2{	
		width: 100%;
		height: 1000px;
		float: left;
	}
	/* bloc limitation techniques ---------*/
	/* retaille */
	#wrapper #content_mention_legales  #lim_tech{	
		height: 200px;
	}
	/* taille et couleur des articles de la section2 */
	#wrapper #content_mention_legales #section2 #copyright {	
		letter-spacing: initial;
		width: 96%;
		height: 50%;
		margin: 1% 0% 1% 1%;
	}
	#wrapper #content_mention_legales #section2 #cnil {	
		letter-spacing: initial;
		width: 96%;
		float: left;
		height: 50%;
		background: #a9cb40;
		margin: 2% 0% 1% 1%;
	}
	#wrapper #content_mention_legales  #section3{	
		letter-spacing: initial;
		width: 96%;
		float: left;
		height: 1200px;
		margin: 10% 0% 3% 1%;
	}
	/* fin page mentions legales ---------------------------------------*/
	
	
	/* page bulletins ---------------------------------------*/
	/* retaille des blocs */
	/* Taille et de la div liens et positionnement des bulletins */
	#wrapper #content_bulletin #bulletins{
		width: 100%;
		float: left;
	}
	#wrapper #content_bulletin #liens{
		width: 80%;
		margin: 0 0 10px 20px;
		float: left;
	}
	/* fin page mentions bulletins ----------------------------------*/
	/* ----------------------------------------------------- */
	
	/* page mentions comcom --------------------------------------*/
	/* retaille des blocs */
	#wrapper #content_comcom  #comcom_gauche, #wrapper #content_comcom  #contact_comcom, #wrapper #content_comcom  #comcom_droite{
		width: 96%;
		float: left;
	}
	#wrapper #content_comcom  #comcom_droite section{
		width: 94%;
	}
	/* retaille et position du titre h2 et logo*/
	#wrapper #content_comcom h2{
		width: 98%;
		font-size: 75%;
		margin: 10px 0 20px 0;
	}
	.bloc_contact{
		font-size: 80%;
	}
	#wrapper #content_comcom h2 img {
		margin: 0 0 0 10px;
	}
	/* fin page comcom -------------------------------------*/
	
	/* page info pratique --------------------------------------*/
	/* retaille et position du titre h2 et logo*/
	#wrapper #content_demarches h2{
		width: 98%;
		font-size: 100%;
		margin: 10px 0 20px 20px;
	}
	/* fin page info pratique ----------------------------------*/
	/* ----------------------------------------------------- */
	/* retaille des boutons menus */
	#wrapper #content_demarches .bouton_menu{
		margin: 20px 0 10px 10px;
		width: 325px;
	}
	/* page demarche admin - naissance ----------------------*/
	/* retaille des blocs */
	#wrapper #content_demarches_naissance h2 {
		font-size: 80%;
		margin: 20px 0 40px 20px;
	}
	#wrapper #content_demarches_naissance h2 img{
		height: 30px;
		float: right;
		margin: 2% 5% 5% 0;
	}
	.bloc_info_gauche {
		width: 95%;
		margin: 20px 0 10px 0px;
	}
	.bloc_info_droite {
		width: 95%;
		padding: 0;
		float: left;
	}
	/* page demarches admin mariage----------------------*/
	/* retaille des blocs */
	#wrapper #content_demarches_mariage h2 {
		font-size: 80%;
		margin: 20px 0 40px 20px;
	}
	#wrapper #content_demarches_mariage #bloc1_gauche {
		margin: 20px 0 10px 0px;
	}
	#wrapper #content_demarches_mariage h2 img{
		height: 30px;
		float: right;
		margin: 2% 5% 5% 0;
	}
	/* page demarches admin deces----------------------*/
	/* retaille des blocs */
	#wrapper #content_demarches_deces h2 {
		font-size: 80%;
		margin: 20px 0 40px 20px;
	}
	#wrapper #content_demarches_deces h2 img{
		height: 30px;
		float: right;
		margin: 2% 5% 5% 0;
	}
	
	/* page demarches admin livret----------------------*/
	/* retaille des blocs */
	#wrapper #content_demarches_livret h2 {
		font-size: 80%;
		margin: 20px 0 40px 20px;
	}
	#wrapper #content_demarches_livret h2 img{
		height: 30px;
		float: right;
		margin: 2% 5% 5% 0;
	}
	/* page demarches admin recensement----------------------*/
	/* retaille des blocs */
	#wrapper #content_demarches_recensement h2 {
		font-size: 80%;
		margin: 20px 0 40px 20px;
	}
	#wrapper #content_demarches_recensement h2 img{
		height: 30px;
		float: right;
		margin: 2% 5% 5% 0;
	}
	/* page demarches admin identite----------------------*/
	/* retaille des blocs */
	#wrapper #content_demarches_identite h2 {
		font-size: 80%;
		margin: 20px 0 40px 20px;
	}
	#wrapper #content_demarches_identite h2 img{
    height: 30px;
	float: right;
	margin: 2% 5% 5% 0;
	}
		/* page info -eau ---------------------*/
	/* retaille des blocs */
	/* retaille des bloc gauche et droite */
	#wrapper #content_eau .bloc_info_gauche{
		width: 95%;
	}
	#wrapper #content_eau .bloc_contact{
		width: 95%;
	}
	#wrapper #content_eau .bloc_info_droite{
		width: 90%;
		margin: 0 0 0 3%;
	}
	/* Taille et position de l'img contenu dans le h3*/
	#wrapper #content_eau  #bloc1 #bloc1_gauche h3 img{
		height: 60px;
		float: right;
		box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
		border-radius: 5px 5px 5px 5px;
		margin: 5px 5px 0 0;
	}
	.bloc_contact h3 {
    border: none;
    height: 20px;
    margin: 0;
    width: 100%;
	}
	/* pages urbanisme  ---------------------*/
	/* retaille des blocs */

	/* pages urbanisme  ---------------------*/
	#wrapper #content_urbanisme h2, #wrapper #content_urbanisme_travaux h2, #wrapper #content_urbanisme_construire h2, #content_urbanisme_certificat h2 {
	font-size: 150%;
	height: 80px;
	}
	
	#wrapper #content_urbanisme_travaux h2 a img,	#wrapper #content_urbanisme_construire h2 a img, #wrapper #content_urbanisme_certificat h2 a img {
    margin: 20px 0 10px 0;
	vertical-align: bottom;
	display: block;
	float: right;
	}
	#wrapper #content_urbanisme_travaux .liste_bouton, #wrapper #content_urbanisme_construire .liste_bouton, #wrapper #content_urbanisme_certificat .liste_bouton {
    display: block;
    margin: 0px 0 0 0;
	}
	/* page dechetterie----------------------*/
	/* retaille des blocs */
	#wrapper #content_dechetterie {
    font-size: 100%;
	}
	
	/* Taille et position du bloc warning */
	#wrapper #content_urbanisme #warning {
	margin: -20% 1% 2% 2%;
    }
	
	
	/* marge sous les titres h3 */
	#wrapper #content_dechetterie h3{
	margin: 1% 1% 15% 1%
	}
	/* retaille des blocs_1 & blocs_3 */
	#wrapper #content_dechetterie #liens_utiles h3{	
	color: white;
	font-size: 60%;
	text-align: center;
	text-transform: uppercase;
	margin: 1% 1% 1% 1%;
	}
	/* Taille du bloc3_gauche et repartition section / table */
	#wrapper #content_dechetterie #bloc3_gauche section{ 
	width: 93%;
	background: url(img_theme/terre_eco.png) no-repeat fixed 90% 0;
	float: left;
	}
	/* couleur de fond entete tableaux*/
	#wrapper #content_dechetterie #bloc3_gauche  table{
	width: 90%;
	margin: 5px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
	}
	/* couleur de fond entete tableaux*/
	#wrapper #content_dechetterie #bloc3_gauche .titre-tab1{
	background-color: #53696B;
	}
	/* effet sur image en survole */
	#wrapper #content_dechetterie ul img:hover{	
	box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
	border-radius: 10px;
	}
	
	
	
	/* retaille des blocs */
	/* Répartition des 2 blocs dans le bloc2_gauche ---------*/
	/* bloc texte ---------*/
	#wrapper #content_dechetterie #bloc2_gauche #bloc2_gauche_1 { 
	width: 95%;
	float: left;
	margin: 2% 2% 2% 2%;
	}
	/* bloc image ---------*/
	#wrapper #content_dechetterie #bloc2_gauche #bloc2_gauche_2 { 
	width: 95%;
	float: left;
	margin: 2% 2% 2% 2%;
	}
	
	
	
	/* page Tourisme - Patrimoine ---------------------*/
	/* retaille des blocs */
	/* Taille et position des titres h2*/
	#wrapper #content_patrimoine h2, #wrapper #content_patrimoine_eglise h2, #wrapper #content_patrimoine_chapelle h2, #wrapper #content_patrimoine_temple h2, #wrapper #content_patrimoine_cadrans h2, #content_patrimoine_tables h2, #content_patrimoine_vestiges h2{
		margin: 40px 0 20px 4px;
	}
	/* page Plan d'eau----------------------*/
	#wrapper #content_lac {
    height: 1160px;
	}
	#wrapper #content_lac h2 {
		margin: 0;
	}
	#wrapper #content_lac .bloc_info_gauche {
    width: 70%;
	margin: 20px 0 25px 10px;
	}
	#wrapper #content_lac .liens_utiles{
/*     display: none; */
	width: 18%;
	float: left;
	margin: 15% 0 2% 2%;
	}
	#wrapper #content_lac #bloc2gauche figcaption {
    font-size: 140%;
	}
	
	/* pages association - retaille bouton retour menu ------ */
	#wrapper #content_hurtibelle h2 img, #wrapper #content_comite h2 img, #wrapper #content_gdh h2 img, #wrapper #content_pepinart h2 img, #wrapper #content_soudesecoles h2 img, #wrapper #content_terrepierres h2 img{
		height: 30px;
		float: right;
		margin: 2% 5% 5% 0;
	}
	/* page association club hurtibelle ----------------------*/
	/* retaille des boutons menus --*/
	#wrapper #content_hurtibelle .liste_bouton {
    display: block;
    margin: 10px 0 0 0;
	}
	
}

/* ---------------------------------------------------------*/
@media screen and (max-width:400px){
	/* bloc menu responsive --------------------------------- */
	.bloc_menu_responsive{
		display : initial;
	}
	.bloc_menu_responsive button{
		position : relative;
		float: right;
		margin: -80px 25px 0 0;
	}
	.bloc_menu_responsive .titreh3{
		text-align: left;
		font-size: 80%;
		padding-left : 10%;
	}	
	.bloc_menu_responsive .titre_sous_menu{
		font-size: 70%;
		text-align: left;
	}
	.gros_titreh2 {
    height: 56px;
	line-height: 33px;
    margin: 40px 0 0px 0px;
	}
	.titreh1 {
	 font-size: 63%;
	}
	/* Taille et position des boutons menu*/
	.bouton_menu {
    height: 30px;
    margin: 0 20px 20px 0;
    width: 270px;
	}
	.bouton_menu img {
    height: 35px;
	}
	.bouton_menu h3 {
    font-size: 83%;
    margin-left: 16px;
	}
	/* wrapper -------------------------------------------------- */
	#wrapper {
		width: 98%;
		height: 1270px;
		margin: 0 auto;
	}
	/* header --------------------------------- */
	#wrapper header {
		width: 100%;
		height: 12%;
		min-height: 130px; 
		background: url(img_theme/bg_header_short.png) no-repeat left;
		background-size: cover;
		margin: 0 auto;
	}
	/* Taille et positionnement du logo et de l'image du logo*/
	#wrapper header #logo{
		width: 140px;
		height: 50px;
/* 		position: absolute; */
		top: 55px;
		left: 20px;
/* 		background: url(img_theme/logo_complet.png) no-repeat; */
		background-size: contain;
	}
	/* Taille et positionnement du village */
	#wrapper header #village{
/* 		position: absolute; */
		width: 150px;
		height: 36px;
		top: 110px;
		left: 20px;
	}
	/* Taille et positionnement de l'icone en cours */
 	#wrapper header #site_en_cours{
		width: 34%;
	}
	
	/* Zone du Menu ---------------------- */
	#wrapper header #menu_header {
		display: none;
	}
	/* Taille de la class bloc image des blocs images */
	.bloc_image{
		width: 98%;
		height: 180px;
		background-color: #9d9b95;
		border-radius: 5px;
		float:left;
		margin: 2% 2% 0% 0;
	}
	/* Elements communs des libelles des titres de sous-menu */
	.titre_sous_menu {
		font-size: 70%;
		line-height: 30px;
		letter-spacing: 0.5px;
	}
	.titreh3 {
		color: white;
		font-size: 80%;
		line-height: 30px;
		text-align: center;
		letter-spacing: 0.5px;
	}
	/* Positionnement du bloc ul et des titre de chaque image bloc */
	#wrapper #content  ul{
		width: 75%;
		height: 160px;
		margin: 10px auto 0 auto;
	}
	/* Taille et positionnement des sous menus des tuiles images */
	#wrapper #content  li{
		height: 30px;
		margin: 3px auto 0 auto;
	}
	/* Retaille pour le titre communauté de commune et demarches admin*/
	#wrapper #content #bloc_mairie li:last-child a, #wrapper #content #bloc_infos li:nth-child(2) a{
		letter-spacing: 0px;
	}
	/* Supression bloc infos_mairie */
	/*#wrapper #content #infos_mairie{
		display: none;
	}	*/
	#wrapper #content #infos_mairie h3{
		display: none;
	}
	#infos_mairie {
		height: 20%;
	}
	/* iframe meteo----------------------------------------------*/
	/* Taille de l'iframe meteo france */
	/*#wrapper #infos_mairie #widget_autocomplete_preview {
		width: 400px;
		height: 150px;
		float: left;
	}
	/* fin iframe meteo france-----------------------------------*/
	

	/* footer --------------------------------- */
	footer {
		min-height: 80px;
		max-height: 100px;
		height: 10%;
		background: #a9cb40;
	}
	/* diminution de la taille du logo maurienne */
	footer img{
		display: none;
	}
	/* diminution de la taille de la typo des rubriques du footer  */
	footer a:nth-child(2), footer a:nth-child(3), footer a:nth-child(4), footer h3:nth-child(5){
		font-size: 60%;
		line-height: 20px;
		letter-spacing: 0px;
	}
	/* retaille des rubriques Plan du site - Contact  */
	footer a:nth-child(2), footer a:nth-child(3){
		width: 80px;
	}
	/* retaille des rubriques mentions légales - Conception*/
	footer a:nth-child(4), footer h3:nth-child(5){
		width: 100px;
	}
	footer a:nth-child(2){
		border: none;
		margin: 10px 0px auto 5px;
	}
	/* repositionement des rubriques du footer */
	footer a:nth-child(3), footer a:nth-child(4), footer h3:nth-child(5){
		margin: 10px auto;
	}
	/* repositionement de la rubrique conception */
	footer h3:nth-child(5){
		margin: 35px auto auto -273px;
		border: none;
	}	
	footer a:nth-child(6){
		margin: 37px auto auto -180px;
		font-size: 75%;
	}
	/* repositionnement du nom de la rubrique conception du footer et de l'adresse email*/
	footer a:nth-child(7){
		width: 190px;
		margin: 50px auto auto -190px;
		font-size: 65%;
	}
	/* page histoire-----------------------------------------*/
	/* ----------------------------------------------------- */
	/* retaille de la div histoire*/
	#wrapper #content_vh #histoire {
		width: 95%;
		font-size: 90%
	}
	/* suppression de la div slider*/
	#wrapper #content_vh #slider_village{
		display: none;
	}
	/* retaille du bloc image blason*/
	#wrapper #content_vh #blason img{
		width: 25%;
		margin-left: 35%;
	}
	/* retaille taille & typo du bloc blason */
	#wrapper #content_vh #blason p {
		width: 95%;
		font-size: 75%;
	}
	/* Taille et position du titre h2 et des blocs p*/
	#wrapper #content_vh h2{
		margin: 40px 0 20px;
	}
	#wrapper #content_vh #histoire p {
    margin: 2% 2% 5% 2%;
	}
	/* div tableaux_insee--------------------------------------------*/
	/* retaille de la section tableaux_insee_gauche */
	#wrapper #content_vh #tableaux_insee_gauche{
		width: 95%;
		font-size: 80%;
	}
	#wrapper #content_vh #tableaux_insee_droite{
		width: 95%;
		font-size: 80%;
	}
	/* fin page histoire-----------------------------------------*/
	/* ------------------------------------------------------------*/
	
	/* page localisation-----------------------------------------*/
	/* Taille de la div localisation*/
	#wrapper #content_vl #localisation{
		width: 100%;
		font-size: 90%;
	}
	/* retaille de la typo du bloc localisation*/
	#wrapper #content_vl #localisation p {
		font-size: 90%;
		line-height: 15px;
		margin: 2% 2% 5% 2%;
	}
	#wrapper #content_vl #tableaux_geographie h3{
		margin: 0 0 3% 1%;
		font-size: 90%;
	}
		/* Taille et position du titre h2 et des blocs p*/
	#wrapper #content_vl h2{
		margin: 40px 0 20px;
	}
	/* fin div localisation-------*/
	/* div street_map-----------------------------*/
	/* Taille de la div bloc_street_map - fond de la div */
	#wrapper #content_vl #bloc_street_map, #wrapper #content_vl #street_map{
		width: 96%;
		margin: 0 0 3% 2%;
	}
	/* fin div bloc_street_map---------*/
	/* div tableaux_geographie-----------------------------*/
	/* Taille de la div ---*/
	#wrapper #content_vl #tableaux_geographie{
		width: 100%;
		font-size: 90%;
		margin-left: 1%
	}
	/* Taille des collones */
	#wrapper #content_vl #tableaux_geographie .tab_col1{
		width: 25%;
	}
	#wrapper #content_vl #tableaux_geographie #chiffres-cles4{
		margin: 2% 3% 3% 1%;
	}
	/* fin div tableaux_geographie-----*/
	/* fin page histoire-----------------------------------------*/
	/* ----------------------------------------------------- */
	/* page mairie-les-elus-----------------------------------------*/
	/* Taille du content*/
	#wrapper #content_me {
		font-size: 98%;
	}
	/* div bloc photo les elus-----------------------------*/
	/* non affichage du bloc*/
	#wrapper #content_me #bloc_photo_elus{
		display: none;
	}
	/* Taille et position du bloc texte */
	#wrapper #content_me #texte {
		width: 95%;
		max-width: 95%;
		font-size: 95%;
		margin: 2% 0 5%;
	}	
	#wrapper #content_me #texte p{
		width: 100%;
	}
	/* non affichage du des chiffres du bloc texte*/
	#wrapper #content_me #texte img{
		display: none;
	}
	/* non affichage du bloc*/
	#wrapper #content_me #bloc_photo_elus_nb {
		display: none;
	}
	/* Taille et position du bloc infos_mairie */
	#wrapper #content_me #infos_mairie {
		width: 95%;
		margin: 1.5% 2% 2% 2%;
		max-height: 300px;
		min-width: 300px;
	}
	#wrapper #content_me #infos_mairie h3{
		display: none;
	}
	#wrapper #content_me #infos_mairie span, #wrapper #content_me #infos_mairie span a{
		display: initial;
		font-size: 80%;
	}
	/* fin page mairie-elus----------------------------------------*/
	/* ----------------------------------------------------- */
	
	/* page mairie-les-commissions-----------------------------------*/
	/* retaille des section1 & section2 */
	#wrapper #content_mc #section1, #wrapper #content_mc #section2{	
	width: 94%;
	font-size: 90%;
	line-height: 13px;
	margin: 10% 0 0 0;
	}
	#wrapper #content_mc #section1 h2, #wrapper #content_mc #section2 h2 {
		line-height: 20px;
	}
	/* re-posotionnement des liens */
	#wrapper #content_mc #liens_utiles{	
	width: 33%;
	float: left;
	margin: 5% 0 5% 35%;
	padding: 1% 1% 1% 1%;
	}
	/* fin page mairie-les-commissions----------------------------------*/
	/* ----------------------------------------------------- */
	
	/* page contact-------------------------------------------------*/
	/* retaille du bloc formulaire */
	#wrapper #content_form{
	clear: both;
	height: 88%;
	}
	/* retaille et position pour la section qui va contenir le bloc formulaire */
	#wrapper #zone1_form{
		width: 100%;
		margin: 1% auto;
		font-size: 90%;
		line-height: 15px;
	}
	/* retaille et position des bloc zone1 et zone 2 */
	#wrapper #zone1, #wrapper #zone2{
		width:100%;
		float:left;
		border: none;
	}
	/* retaille des champs de saisie  */
	#wrapper #zone1 input{
		width:90%;
		max-width: 310px;
	}
	#wrapper #zone2 {
    margin-top: 10px;
	}
	/* retaille des champs de saisie  message */
	#zone2 textarea {
    height: 250px;
    margin-top: 1%;
    width: 97%;
	}
	/* retaille de la taille du libelle recevoir email  */
	#wrapper #zone2 label:nth-child(3){
		width:90%;
	}
	/* position du bouton envoi */
	#wrapper #zone2 input:nth-child(5){
		margin: 4% 0 0 50%;
	}
	/* fin page contact ----------------------------------------*/
	/* ----------------------------------------------------- */
	
	/* page mentions legales---------------------------------------*/
	/* retaille des blocs */
	#wrapper #content_mention_legales h2 {
		margin: 15px 0px 0px 0px;
	}
	#wrapper #content_mention_legales  #section1{	
		width: 100%;
		height: 900px;
		float: left;
		font-size: 100%;
		margin: 0 0 -3% 0;
	}		
	#wrapper #content_mention_legales  #section2{	
		width: 100%;
		height: 860px;
		float: left;
		font-size: 100%;
	}
	/* bloc limitattion technique ---------*/
	/* retaille */
	#wrapper #content_mention_legales  #lim_tech{	
		height: 30%;
	}
	/* taille et couleur des articles de la section2 */
	#wrapper #content_mention_legales #section2 #copyright {	
		width: 100%;
		height: 75%;
		margin: 0% 0% 5% 0%;
	}
	#wrapper #content_mention_legales #section2 #cnil {	
		width: 100%;
		height: 80%;
		background: #a9cb40;
		margin: auto;
	}
	#wrapper #content_mention_legales  #section3{	
		width: 100%;
		height: 90%;
		float: left;
		margin: 170% 2% 0 0;
		font-size: 100%;
	}
	/* fin page mentions légales -------------------------------------*/
	/* ----------------------------------------------------- */
	
	/* page bulletins ---------------------------------------*/
	/* retaille des blocs */
	/* Taille et de la div liens et positionnement des bulletins */
	#wrapper #content_bulletin #bulletins{
		width: 100%;
		float: left;
	}
	#wrapper #content_bulletin #liens{
		width: 80%;
		margin: 0 0 10px 20px;
		float: left;
	}
	/* fin page bulletins -------------------------------------*/
	
	/* page mentions comcom --------------------------------------*/
	/* retaille des blocs */
	#wrapper #content_comcom  #contact_comcom, #wrapper #content_comcom  #comcom_droite{
		float: left;
	}
	#wrapper #content_comcom  #comcom_droite section{
		width: 99%;
	}
	/* retaille et position du titre h2 et logo*/
	#wrapper #content_comcom h2{
		width: 98%;
		font-size: 125%;
		margin: 10px 0 20px 0;
	}
	.bloc_contact{
		font-size: 80%;
		margin: 0 0 25px 0px;
		width: 96%
	}
	#wrapper #content_comcom h2 img {
		margin: 4px 0 0 26px;
	}
	
	/* fin page comcom -------------------------------------*/

	/* page info pratique --------------------------------------*/
	/* retaille et position du titre h2 et logo*/
	#wrapper #content_demarches h2{
		width: 98%;
		font-size: 80%;
		margin: 10px 0 20px 0;
	}
		
	/* page demarche admin - naissance ----------------------*/
	/* retaille des blocs */
	#wrapper #content_demarches_naissance h2 {
    font-size: 80%;
	margin: 20px 0 40px 5px;
	}
	#wrapper #content_demarches_naissance h2 img{
    height: 30px;
	float: right;
	margin: 2% 5% 5% 0;
	}
	.bloc_info_gauche {
    width: 95%;
	margin: 20px 0 25px 0;
	}
	.bloc_info_droite {
		width: 95%;
		padding: 0;
		float: left;
	}
	/* page demarches admin mariage----------------------*/
	/* retaille des blocs */
	#wrapper #content_demarches_mariage #bloc1_gauche{
	margin: 20px 0 10px 0px;
	}
	#wrapper #content_demarches_mariage h2 {
		font-size: 80%;
		margin: 20px 0 40px 5px;
	}
	#wrapper #content_demarches_mariage h2 img{
		height: 30px;
		float: right;
		margin: 2% 5% 5% 0;
	}
	/* page demarches admin deces----------------------*/
	/* retaille des blocs */
	#wrapper #content_demarches_deces h2 {
		font-size: 80%;
		margin: 20px 0 40px 5px;
	}
	#wrapper #content_demarches_deces h2 img {
		height: 30px;
		float: right;
		margin: 2% 5% 5% 0;
	}
	/* page demarches admin livret----------------------*/
	/* retaille des blocs */
	#wrapper #content_demarches_livret h2 {
		font-size: 80%;
		margin: 20px 0 40px 5px;
	}
	#wrapper #content_demarches_livret .gros_titre h2 {
		line-height: 20px;
	}
	#wrapper #content_demarches_livret h2 img{
		height: 30px;
		float: right;
		margin: 2% 5% 5% 0;
	}
	#wrapper #content_demarches_livret #bloc1_gauche h3, #wrapper #content_demarches_livret #bloc2_gauche h3 {
    height: 45px;
	}
	
	/* page demarches admin recensement----------------------*/
	/* retaille des blocs */
	#wrapper #content_demarches_recensement h2 {
		font-size: 80%;
		margin: 20px 0 40px 5px;
	}
	#wrapper #content_demarches_recensement h2 img {
		height: 30px;
		float: right;
		margin: 2% 5% 5% 0;
	}
	#wrapper #content_demarches_recensement .gros_titreh2{
		line-height: 20px;
	}
	/* page demarches admin identite----------------------*/
	/* retaille des blocs */
	#wrapper #content_demarches_identite h2 {
		font-size: 80%;
		margin: 20px 0 40px 5px;
	}
	#wrapper #content_demarches_identite h2 img{
		height: 30px;
		float: right;
		margin: 2% 5% 5% 0;
	}
	/* page info -eau ---------------------*/
	/* retaille des blocs */
	/* retaille des bloc gauche et droite */
	#wrapper #content_eau .bloc_info_gauche{
		width: 95%;
	}
	#wrapper #content_eau .bloc_contact{
		width: 95%;
	}
	#wrapper #content_eau .bloc_info_droite{
		width: 90%;
		margin: 0 0 0 3%;
	}
	/* non affichage de l'img contenu dans le h3*/
	#wrapper #content_eau  #bloc1 #bloc1_gauche h3 img{
		display: none;
	}
	.bloc_contact h3 {
		border: none;
		height: 20px;
		margin: 0;
		width: 100%;
	}
	#wrapper #content_eau #bloc1 #bloc1_gauche h3 {
		height: 50px;
	}

	/* pages urbanisme  ---------------------*/
	#wrapper #content_urbanisme h2{
	font-size: 150%;
	}
	#wrapper #content_urbanisme_travaux h2, #wrapper #content_urbanisme_construire h2, #content_urbanisme_certificat h2 {
		font-size: 80%;
		margin: 20px 0 40px 5px;
	}
	#wrapper #content_urbanisme_travaux .gros_titreh2, #wrapper #content_urbanisme_construire .gros_titreh2, #content_urbanisme_certificat .gros_titreh2 {
		line-height: 20px;
	}
	/* retaille des blocs */
	#content_urbanisme_travaux h2 a img,	#content_urbanisme_construire h2 a img, #content_urbanisme_certificat h2 a img {
		height: 30px;
		float: right;
		display: block;
	}
	#content_urbanisme_travaux .liste_bouton ,#content_urbanisme_construire .liste_bouton, #content_urbanisme_certificat .liste_bouton {
		display: block;
		margin: 10px 0 0 0;
	}
	/* Taille et position du bloc warning */

#wrapper #content_urbanisme #warning h3 {
	color: #ed1659;
	font-size: 70%;
    height: 45%;
	padding: 5px 5px 5px 5px;
    text-align: left;
    width: 80%;
	margin: -1% 1% 2% 2%;
}
	
	

	/* page dechetterie----------------------*/
	/* retaille des blocs */
		/* retaille des blocs */
	#wrapper #content_dechetterie {
    font-size: 100%;
	}
	/* marge sous les titres h3 */
	#wrapper #content_dechetterie h3{
	margin: 1% 1% 15% 1%
	}
	/* retaille des blocs_1 & blocs_3 */
	#wrapper #content_dechetterie #liens_utiles h3{	
	color: white;
	font-size: 60%;
	text-align: center;
	text-transform: uppercase;
	margin: 1% 1% 1% 1%;
	}
	/* Taille du bloc3_gauche et repartition section / table */
	#wrapper #content_dechetterie #bloc3_gauche section{ 
	width: 90%;
	background: url(img_theme/terre_eco.png) no-repeat fixed 90% 0;
	float: left;
	}
	/* couleur de fond entete tableaux*/
	#wrapper #content_dechetterie #bloc3_gauche  table{
	width: 90%;
	margin: 5px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
	}
	/* couleur de fond entete tableaux*/
	#wrapper #content_dechetterie #bloc3_gauche .titre-tab1{
	background-color: #53696B;
	}
	/* effet sur image en survole */
	#wrapper #content_dechetterie ul img:hover{	
	box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
	border-radius: 10px;
	}
	
	/* Répartition des 2 blocs dans le bloc2_gauche ---------*/
	/* bloc texte ---------*/
	#wrapper #content_dechetterie #bloc2_gauche #bloc2_gauche_1 { 
	width: 95%;
	float: left;
	margin: 2% 2% 2% 2%;
	}
	/* bloc image ---------*/
	#wrapper #content_dechetterie #bloc2_gauche #bloc2_gauche_2 { 
	width: 95%;
	float: left;
	margin: 2% 2% 2% 2%;
	}
	
	
	/* page Tourisme - Patrimoine ---------------------*/
	/* Taille et position du titre h2 et des blocs p*/
	#wrapper #content_patrimoine h2{
		font-size: 145%;
	}
	/* Taille et position des titres h2*/
	#wrapper #content_patrimoine h2, #wrapper #content_patrimoine_eglise h2, #wrapper #content_patrimoine_chapelle h2, #wrapper #content_patrimoine_temple h2, #wrapper #content_patrimoine_cadrans h2, #content_patrimoine_tables h2, #content_patrimoine_vestiges h2{
		margin: 40px 0 50px 4px;
	}
	/* page Associaltions ---------------------*/
	/* retaille h3 sou des ecoles*/
	#wrapper #content_associations #bloc1 li:nth-child(1) h3{
		font-size: 71%;
	}
	#wrapper #content_hurtibelle h2 ,#wrapper #content_comite h2 ,#wrapper #content_gdh h2 , #wrapper #content_pepinart h2, #wrapper #content_soudesecoles h2  ,#wrapper #content_terrepierres h2 {
		font-size: 110%;
		margin: 20px 0 40px 5px;
	}
	#wrapper #content_hurtibelle h2 img, #wrapper #content_comite h2 img, #wrapper #content_gdh h2 img, #wrapper #content_pepinart h2 img, #wrapper #content_soudesecoles h2 img, #wrapper #content_terrepierres h2 img{
		height: 30px;
		float: right;
		margin: 2% 5% 5% 0;
	}
	/* page Plan d'eau----------------------*/
	#wrapper #content_lac {
		height: 1400px;
	}
	#wrapper #content_lac h2 {
		margin: 0;
		font-size: 125%;
	}
	#wrapper #content_lac .texte_bloc_noir {
		font-size: 82%;
	}
	#wrapper #content_lac .bloc_info_gauche {
		width: 70%;
		margin: 20px 0 25px 10px;
	}
	#wrapper #content_lac .liens_utiles{
	/*     display: none; */
		width: 18%;
		float: left;
		margin: 15% 0 2% 2%;
	}
	#wrapper #content_lac #bloc2gauche figcaption {
		font-size: 240%;
	}
	#wrapper #content_lac #bloc2gauche {
		margin: -25px 0 50px -60px;
	}

	
}