#menu {/*border: 3px solid blue;*/ height:100%;left:0px;width:10rem; overflow: auto; 
position : fixed;background-color: #c29b99;z-index:1;}

/*menu gauche*/
	h2 { text-align : center; font-family:'Limelight'; font-size:20px;}
	
	h3 {font-family: 'Fredoka';}
	h4 { text-align : center;font-family: 'Nothing You Could Do', cursive;/*'Fredoka';font-weight:300'Indie Flower' ;*/font-size:1.2rem;}
	h5 { margin-left:15rem;} 
	.choix1 a{ color: white;}
	.choix1 {font-size : 1.2rem; font-family : 'Kalam', cursive;
	list-style-position: outside;line-height :2.5;}
	.choix1 { text-align:center;/*min-height:15px;*/}
	.choix2 {padding-left:-5px;list-style-position:inside;}
	.choix3 {font-size : 1.2vw;}
	ul { list-style:none; text-align : start;padding-left:5; }
	a:hover { color: black; }
	a {text-decoration:none; }
		
	nav {
		background:#c29b99;  display: block;
		  font-size: calc(0.5rem + 1.5vw);}
	nav ul {display:flex; flex-direction:column;}
		#icons {cursor: pointer;display:none;}
			
	.logo { text-align : center; margin-top:-10px;}
	.retour { text-align : center; font-size: 0.8vw;color:black; display:none;}
	
	/*boutons*/
	button { border: none;border-radius: 5px;color: #ffffff;padding: 10px 10px;font-size: 13px;
	cursor: pointer; max-height:80px;/*max-width:90px;*/}
	 button:hover {background-color: #666666;box-shadow: 2px 4px #999999;}
	 .bouton1 {background-color:#995270; margin-left: 20%;}
	 .bouton2 {background-color:#995270; margin-left:20%; color:black;margin-top:-5;}
	 .bouton3 {background-color:#ff6347; margin-top: 0%; margin-left: 0rem;}
	 .bouton5 {background-color:#ff6347; margin-top: 20%; margin-left: 2rem;}
	 .bouton6 { background-color:#a98684;/*margin-left:10 rem;*/right:1rem;margin-top:1rem;position:fixed;}
	 .bouton6 a{color:white;}
	 .bouton7 {background-color:#a98684;margin-left:2rem;margin-top:1rem;position:fixed; z-index:0;}
	 .bouton7 a{color:white;}
	 .ascenseur {color:black;background-color: #c29b99;margin:20px;width: 110px;}
	  /*liste déroulante*/
	 .bouton4 {background-color: #a98684;margin-top:10px;  margin-left:0rem;}
     .bouton4:hover { background-color: #666666;box-shadow: 2px 4px #999999; margin-left:0rem;}
	 .dropdown-child {display: none;background-color: #a98684; max-width:10rem;margin-left:0rem;border-radius:20px;margin-top:2rem;}
	 .dropdown-child a { color: white;font-size:0.7rem;text-decoration: none;border-radius:20px;font-family:roboto;
	 display: block;/*border:1px solid #637D96;*/}
	 .dropdown:hover .dropdown-child { display: inline-block;}
	 .dropdown-child a:hover {background-color:#666666;}
	 
	 /*bloc principal*/	
	#site1  {margin-left: 10rem;background-color:#faefe3;width:100%; height:100%; overflow: scroll; color:black;}
	
	
	 /*slider*/
	 .custom-slider { display: none;}
.slide-container {
  max-width: 800px;
  position: relative;
  margin-left: 20%;
  }
.prev, .next {
  cursor: pointer;
  position: absolute;        
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: white;
  font-size: 30px;
  background-color: rgba(0,0,0,0);
  transition: background-color 0.6s ease;
}
.prev{ left: 15px; }
.next { right: 15px; }
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.5);
}
/*.slide-text {
  position: absolute;
  color: #ffffff;
  font-size: 15px;
  padding: 15px;
  bottom: 15px;
  width: 100%;
  text-align: center;*/
}
.slide-index {
  color: #ffffff;
  font-size: 13px;
  padding: 15px;
  position: absolute;
  top: 0;
}
.slide-img{ 
  width: 100%; 
  height: auto;
  object-fit: cover;
  object-position: center;
  margin-top: 10vh;
 }
.slide-dot{ text-align: center; }
.dot {
  cursor: pointer;
  height: 10px;
  width: 10px;
  margin: 0 2px;
 
 background-color: #999999;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.active1, .dot:hover { background-color: #111111; }
.fade {
  animation-name: fade;
  animation-duration: 1s;
}
@keyframes fade {
  from {opacity: 0} 
  to {opacity: 1}
}
	
	
	
	

	/*contact*/
	.Contact{ padding-top: 5%;text-align:center; font-family :"Open sans" ;font-weight: 200; font-size:2rem;text-transform: uppercase;}
	.grille2 {display: grid; grid-template-columns: 1fr 1fr;margin-left: 30%;}
	
	/*.bloc1 { width:20rem;display:grid;grid-template-columns: 0.5fr 0.5fr;/*float:left;text-align:center;margin-left:30%;}
	.bloc2 {width:20rem;display :grid;/*grid-template-columns: 0.5fr 0.5fr;text-align:center;/*margin-left:40%; }*/
	.appelez {}
	.fond{ margin-left:28%;width:40%; height:7rem; background-color:#f9e1c6;}
	.super { margin-top: -7%; border :2px solid black;width:35rem; height:4rem; margin-left:35%;padding:20px;font-family:calibri;font-size: 17px;}
	.fond3{ margin-left:55%;margin-top:5%;width:500px; height:120px; background-color:#d49d85;}
 
	/*agence*/
	
	.introduction {text-align:center;font-family :Roboto ;}
	.instagram {margin-left:40%;float:left;}
	.facebook {float:left;margin-left:7%;}
	.pinterest{ float:left;margin-left:7%;}
	.centre {clear:both;/*margin-top:8%;*/ border: 0.5rem outset #c29b99; width:20rem;padding:10px;margin-left:38%;text-align:center;}
	.photodemoi {float:left;margin-left:15%;}
	.parcours {border :2px solid black;width:500px; height:110px;padding:10px;float:right;margin-top:-5%;margin-right: 10%;font-family:calibri;font-size: 17px;}
	.bold { font-weight:bold;font-family:calibri;font-size: 17px;}
	.bold2 { font-weight:bold;font-family:calibri;font-size: 17px; margin-left:1rem; }
	.bold2 a{ color: #7e635e;}
	.bold2 a:hover { color: black; }
	.liste {border: 2px solid black;padding: 20px; margin:2rem 5rem 0 15rem;}
	.liste2 {/*clear:both*/border: 2px solid black;/*padding: 20px*/ ;width:15rem; padding:0 10 20 0;margin-left:42%;/*text-align:center;/* margin:5rem 0 0 15rem;*/}
	 #cercle{ width:800px; height:800px;border-radius:400px;background-color:#ecdbd1;margin-left:35%;margin-top:-750;}
	.arrondie {border-radius: 10px;}
	.align {text-align:start; margin-left:8.5%;}
	.calibri {font-family:calibri;font-size: 17px;}
	span.maindroite { color:  #7e635e; font-size: 30px;}
	.vershaut a{ color: red;}
	.vershaut {margin-left:80%;}
	
	/*prestations*/
	h3 { margin-left:25%;}
	.texteprest {border: 2px solid black;  padding: 20px;margin:-500 50 20 300;font-family:calibri;font-size: 17px;}
	.texteprest2 {border: 2px solid black; padding: 20px;margin:50 50 20 300;font-family:calibri;font-size: 17px;}
	.fond2{ width:300px; height:500px; background-color:#d49d85;margin-top: 50px; margin-left:60%;}
	
	/*réalisations*/
	figure { border: thin #c0c0c0 solid; display: flex;  flex-flow: column;  padding: 5px;  max-width: 220px;  margin: auto;}
	 figcaption {  background-color: #222;  color: #fff;  font: italic smaller sans-serif;  padding: 3px;  text-align: center;}
	 
	 .centré { text-align: center;}
	 .erromardi , .nicole , .suzanne { margin-top:5%;}
	 .textenormal {text-align:justify;font-size : 1rem; font-family:  Times New Roman, Times, serif ; width:30rem;margin-left:35%;}
	 .realisations {font-size: 2vw; font-family:"Bebas Neue" , sans-serif;  "Times New Roman", Times, serif ; text-align : center;margin-top:4rem; }
	 .avant { clear :both; font-size : 2vw; text-align: center;}
	 .margegauche_v2 {float: left; margin-left:10;}
	 .aurelie {margin-top:5%;}
	 .decale3 {padding-left:63%; margin-top:-2%;}
	 .gauche ,.milieu, .droite, .decale1, .decale2, .margegauche, .decale1_v2, .milieu2, .milieu3, .essai, .derniere {padding:2rem;}
	 .colonne { display:grid;grid-template-columns: 0.5fr 0.5fr; padding: 0px 30px;margin-left: 0px;}
	 .colonne2 { display:grid;grid-template-columns: 0.5fr 0.5fr; padding: 0px 30px;margin-left: 15rem;margin-top:0rem;}
	 .colonne3 {display: grid; grid-template-columns:0.5fr 0.5fr 0.5fr; padding: 0px 30px; margin-left: 10rem;}
	 .colonne4 { display:grid;grid-template-columns: 0.5fr 0.5fr; padding: 0px 30px;margin-left: 10rem;}
	 .gauche { min-width: 200px;} .myImg { min-width: 250px;}
	 #boutongauche {display:flex;}
		
	 .erromardi, .Maité,.Home , .aurelie ,.fargeot{  padding: 5;}
	 
	 /*footer*/
	footer {display:flex;background-color: black; color: white;font-family:;}
     #blocadress {float:left;margin-left: 11rem;width : 150px; height : 130px; font-size:11px;}
	 #logo2 {float:left; margin-left: 18rem;}
	 span.mentionlegale { color:white;}
	 #adroite {float:left;margin-left:25%;font-size:11px;}
	 .adresse {text-align:start;/*color:white;*/}
	 
	 /*mentions légales*/
	 #conditions  {margin-left: ;width:80%;}
	 .mention {padding: 50px 50px; font-family:Times New Roman;}
	p.mention  {text-align: justify;}
	
	 /*agrandissement photos */
	 
		.myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
	}
 
	.myImg:hover {opacity: 0.7;}
 
	/* The Modal (background) */
	.modal {
		display: none; /* Hidden by default */
		position: fixed; /* Stay in place */
		z-index: 1; /* Sit on top */
		padding-top: 100px; /* Location of the box */
		left: 0;
		top: 0;
		width: 100%; /* Full width */
		height: 100%; /* Full height */
		overflow: auto; /* Enable scroll if needed */
		background-color: rgb(0,0,0); /* Fallback color */
		background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
		}
 
	/* Modal Content (Image) */
	.modal-content {
		margin: auto;
		display: block;
		width: 80%;
		max-width: 700px;
		}
 
	/* Caption of Modal Image (Image Text) - Same Width as the Image */
	#caption {
		margin: auto;
		display: block;
		width: 80%;
		max-width: 700px;
		text-align: center;
		color: #ccc;
		padding: 10px 0;
		height: 150px;
		}
 
	/* Add Animation - Zoom in the Modal */
	.modal-content, #caption { 
		animation-name: zoom;
		animation-duration: 0.6s;
	}

	@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
	}
 
	/* The Close Button */
	.close {
		position: absolute;
		top: 15px;
		right: 35px;
		color: #f1f1f1;
		font-size: 40px;
		font-weight: bold;
		transition: 0.3s;
		}	
 
	.close:hover,
	.close:focus {
		color: #bbb;
		text-decoration: none;
		cursor: pointer;
		}
 
	/* 100% Image Width on Smaller Screens */
	@media only screen and (max-width: 900px){
    .modal-content {
        width: 100%;
		}
	}	
	 
	 @media screen and (max-width:900px) {.logo,#logo2,h2,h4,.fond3 {display:none;}
	 		@media screen and (max-width:900px) {.gauche,.milieu,.droite {width:100%}
			@media screen and (max-width:900px) { a {font-size:0.9rem;}
		
	 #icons {display:grid; margin-top: -0.5rem; }
	 /*h3 {display:none;}*/
	 .active #icons:before {   content: "\2630";	background: #faefe3;font-size:30px;/*height:60px;*/}
	 #blocadress {margin-left: 3rem;}
	/*.active */#icons:before {   content: "\2715";background: #faefe3;font-size:30px;}
	.super, .parcours, .textenormal {margin-left:2rem; border:none;width:80%;}
	.super { margin-top: -8rem;}
	.fond {margin-left:2rem;width:100%;}
	.grille2 { grid:none;}
	.bloc1, .bloc2 {margin-left:15%;}
	 #menu {width:6rem; height: 8%;min-height:4rem; background-color:#faefe3;text-align:center; }
	  #site1  {margin-left: 0;width:100%;font-size: smaller; /*height:95%; */overflow: scroll; color:black;}
	  .instagram , .facebook, .tweeter { width: 10px; height:10px; }
	 .photodemoi {margin-left: 6rem;margin-top:3rem;}
	 .liste { border:none; margin-left:2rem; margin:0;}
	 .liste2 { border:none;margin-left:23%;}
	 .centre {margin-left:20%; margin-top: 10%; }
	  .texteprest, .texteprest2 { border:none;margin-left:2rem;}
	 .plusbas {margin-top:4rem;}
	 .colonne, .colonne2, .colonne3 , .colonne4 {grid-template-columns: 0.5fr; margin-left:0;}
	 .realisations , .avant { font-size: larger;}
	 .slide-container { margin: auto; max-width:500px}
	 .slide-img { margin-top:0 vh;}
	 .bouton6 { display: block;}
	 .bouton7 { display: block;z-index : 1;}
	 /*.aurelie #menu {width:2rem; }*/
	 .parcours { margin-top:1rem;}
	 .facebook, .pinterest	 {margin-left:10%;}
     .vershaut { margin-left:40%;}				
		
	 nav.active ul {left:-100%/*0px*/;}
		
	 nav ul {
      position: fixed;
      left: 0px/*-100%*/;
      top:20%;
      flex-direction:column;
      background: #c29b99;
	  width:6rem;
      min-width:60px;
      text-align: center;
      transition : 1s;  
	  min-height: 15rem;}
		/*.deroule a {color:white;font-family:"Times New Roman"; font-size:12; line-height:1 ;}
		.deroule {padding-top: 20px;}*/
	  .choix1  {line-height: 3;}
		
    nav li { 
      padding: 3px 0;
    }

    /*nav li:hover {
      background: rgb(157, 217, 240);
    }
    nav.active ul {left:0px;}*/
	
	}
	@media screen and (max-width:500px){ .centre {margin-left:10%; margin-top:35%;}}