/* --------------------------------------------------

*RESPONSIVE ADN

----------------------------------------------------- */

 @media screen and (max-width:1200px) {
 	body { 
 		background: none; 
 		padding: 0; 
 	}
 	.page { 
 		width: 100%; 
 		max-width: 100%; 
 	}
 	.main { 
 		width: 90%;
 		/*max-width: 880px;*/
 		padding: 1.5% 0; 
 	}
 	.wrapper { 
 		padding: 5%; 
 	}

	a.header h1 { 
		font-size: 1.8em; 
	}

	body.page_sommaire { 
		padding: 0; 
	}
	.liste_home .menu_articles ul { 
		width: 80%; 
	}
	.liste_home .menu_articles ul br { 
		display: none; 
	}
	.liste_home .menu_articles li { 
		margin-bottom: 1em; 
	}
	.square_in ul { 
  		justify-content: center; 
 	}
	.square_in li a {
 		display: block;
 		max-height: 350px;
  		max-width: 350px;
	}
	.chapo a {
    	display: block;
    	max-width: 450px;
	}
	#documents_portfolio {
  		text-align: center;
	}
}


@media screen and (max-width:1015px) {
	.square_in li a {
 		max-height: 300px;
  		max-width: 300px;
	}
	header.header-home p.h1 , a.header p.h1 { 
  		font-size: 2em;
  	}
}


@media screen and (max-width:970px) {
	header.header-home h1 { 
		font-size: 1.8em; 
	}
	header.header-home h1 br { 
		display: none; 
	}
}



 @media screen and (max-width:920px) {
	.liste_home { 
		font-size: 90%; 
	}
}

@media screen and (max-width:877px) {
	.square_in li a {
 		max-height: 350px;
  		max-width: 350px;
	}
}

@media screen and (max-width:850px) {
	header.header-home p.h1, a.header p.h1 { 
  	}
  	header.header-home p.h1 { 
  		font-size: 1.8em;
		padding: 8.5% 0 0 3%;
  	}
  	a.header p.h1 { 
  		font-size: 1.7em;
		padding: 5% 0 0 3%;
  	}
  	a.header h1 { 
		font-size: 1.6em; 
		padding: 1em; 
	}
	a.header h1 br { 
		display: none; 
	}
}



@media screen and (max-width:760px) {
	.header-flex { 
		-ms-flex-wrap: wrap; flex-wrap: wrap; 
	}
	nav a, nav a:visited, nav a:hover, nav a:active { 
		margin-right: 0; 
	}
	a.header { 
		height: 155px; 
		border-bottom: solid 5px #FFF; 
		width: 100%;
	}
	a.header h1 { 
		font-size: 1.9em; 
		padding: 0.5em; 
	}
	nav { 
		width: 100%; 
		height: 100px; 
		justify-content: space-around; 
		padding: 1em 30%; 
	}
	header.header-home nav { 
		background: #999999; 
		border-bottom: solid 5px #FFF; 
		height: 6em; 
		justify-content: space-around; 
		padding: 1em 30%; 
		position: fixed; 
		top:0; 
	}
	header.header-home { 
		padding-top: 6em; 
	}
	header.header-home .megamenu { 
		position: absolute; 
		top: 6em; 
		margin-top: -5px; 
	}
	header.header-home h1 { 
		background: #eee; 
	}
	header.header-home .icon-contact { 
		color: #FFF; 
	}
	header.header-home .icon-menu { 
		color: #FFF; 
	}
	.bandeau_titre { 
		height: 280px; 
	}
	.bandeau_titre h1 {
		height: auto; 
		margin-top: 50px; 
		font-size: 2em; 
	}

	.nos_prestations { 
		-ms-flex-wrap: wrap; flex-wrap: wrap; 
	}
	.art_de_vivre { 
		-ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; 
	}
	.liste_home { 
		width: 100%; 
		padding: 10%; 
		background: #999999; 
		color: #FFF; 
		font-size: 100%; 
	}
	.liste_home .menu_articles ul li a { 
		color: #FFF; 
	}
	.liste_home .menu_articles ul br { 
		display: block; 
	}
	.nos_prestations .img_home, .art_de_vivre .img_home { 
		width: 100%; 
		height: 60vh; 
	}
	.nos_prestations .img_home, .art_de_vivre .img_home, .liste_home { 
		margin-top: 5px; 
	}

	.footer { 
		border-top: solid 5px #FFF; 
	}
}



@media screen and (max-width:640px) {
	a.header h1 { 
		line-height: 120%; 
	}
	header.header-home h1 { 
		padding-top: 6.5% 
	}
	header.header-home .megamenu { 
		top: 5em; 
	}
	.megamenu { 
		height: 100%; 
		font-size: 120%; 
		padding: 20% 10%; 
	}
	.menu123 { 
		display: block; 
	}
	.menu1, .menu2, .menu3 { 
		width: 100%; 
	}
	#societe_masquer, #contact_masquer, #realisations_masquer, #materiaux_masquer { 
		display: none; 
	}
	.menu123 li { 
		margin-bottom: 1em; 
		cursor: pointer; 
	}
	.menu123 h3 { 
		padding-bottom: 1em; 
		cursor: pointer; 
	}
	.menu123 li { 
		padding-left: 1em; 
	}
	.wrapper {
        padding: 0;
    }
	.prev-next { 
		width: 100%; 
		margin: 2em 0 -2em 0; 
		text-align: center; 
	}
	.prev-next img { 
		width: 40px; 
		height: 40px; 
	}
	.bandeau_titre h1 { 
		font-size: 2em; 
		padding: 0 2%; 
	}
	p, ul.spip, ol.spip { 
		text-align: left; 
		font-size: 1.3em; 
	}
	.chapo p { 
		text-align: center; 
		font-size: 1.2em; 
	}
	.liste_home p {
		text-align: center!important;
		font-size: 1.3em;
	}
	blockquote { 
		font-size: 1.1em; 
		line-height: 170%; 
		padding: 0 1em; 
	}
	.spip_documents { 
		margin-bottom: 1em; 
	}
	span.spip_documents { 
		min-width: 100%; 
	}
	.chapo a {
    text-align: left;
	}
	.footer { 
		padding: 1em 2em; 
	}
	.footer .colophon { 
		padding-top: 3em; 
		font-size: 1.4em; 
	}
	.selection p {
  		text-align: center;
	}
	.selection a {
  		font-size: 0.9em;
	}
	.page_contact .wrapper { 
		padding: 1em 2em; 
	}
	.asterisque { 
		padding: 0 0.5em; 
	}
	label { 
		width: 100%; 
		height: auto; 
		font-size: 1.3em; 
		line-height: 2em; 
		text-align: left; 
		margin-right: 0; 
	}
	input, .content input.text, .content input.email, textarea { 
		width: 100%; 
		margin-top: 0; 
		font-size: 1.3em; 
	}
	input.checkbox { 
		width: auto; 
		height: auto; 
	}
	.datanews label { 
		margin-top: 0; 
		width: 90%; 
		line-height: 1.5em; 
	}
	.datanews input.checkbox { 
		margin-top: 0.5em; 
	}
	input.submit { 
		margin-top: 0 0 3em 0; 
	}
}



@media screen and (max-width:540px) {
	header.header-home p.h1 { 
  		font-size: 1.6em;
  		padding: 6% 0 0 3%;
  	}
  	a.header h1 { 
		font-size: 1.7em; 
	}
	a.header .spip_logo { 
		margin-right: 0.5em; 
	}
	nav { 
		padding: 1em 20%; 
	}
	header.header-home h1 { 
		font-size: 1.5em; 
	}
}



@media screen and (max-width:480px) {
	.header-flex { display: block; 
	}
	a.header .spip_logo { 
		width: 100%; 
		height: auto; 
		margin: 0; 
		border-right: 0 none; 
	}
	a.header p { 
		display: none; 
	}
	nav { 
		border-top: solid 5px #FFF; 
	}
	header.header-home nav { 
		border-top: 0 none; 
	}
	/* .bandeau_titre h1 { font-size: 2.3em; } */
	header.header-home .header-left { 
		width: 100%; 
	}
	header.header-home p { 
		display: none; 
	}
	.newsletters h2 { 
		font-size: 2.3em; 
	}
	.newsletters .wrapper { 
		margin-top: 30px; 
	}
	.newsletters p.date { 
		font-size: 80%; 
		padding-right: 10%; 
	}
	.nos_prestations .img_home, .art_de_vivre .img_home { 
		width: 100%; 
		height: 50vh; 
	}

	h3.spip { 
		font-size: 2em; 
	}
	h3.spip br { 
		display: none; 
	}
}



 @media screen and (max-width:320px) {
.nos_prestations .img_home, .art_de_vivre .img_home { 
	width: 100%; 
	height: 40vh; 
	}
}