body {
	margin: 0; padding: 0; /* annulation des marges */
	overflow: hidden; /* on cache le débordement de contenu */
	color: #fff;
	background: white;
}

/* le menu principal*/
.navigation{
    position: fixed;
    margin:0;
    padding: 0;
    z-index: 10;
	top:0px;
}
    
.menu{
    position: fixed;
    display: inline;
    
    background-color: rgb(13, 192, 236);
    box-shadow: 0 6px 15px #333;
    width: 100%;
    padding-left: 0px;
    margin: 0;
    
 }
   


.menu li{
    display: inline;
    list-style: none;
    margin-left: 35px;
    
    
}
.menu a {
    display: inline-block;
    font-weight: bold;
    color:rgb(1, 1, 87) ;
    text-decoration: none;
    padding:  5px 7px;
    margin: 3px 2px;
    
}
 .menu a:hover{
    
    color: rgb(241, 243, 243);
    
}
.menu li:hover{
    background-color:rgb(1, 1, 87) ;
    border-radius: 4px;
    padding: 2px 2px;
}
.menu_connexion a{
	display:inline-block;
	color: #FFF;
	border-radius:2px;
}
.menu_connexion li{
	display:inline;
	margin-left: 5px;
	background-color:rgb(1, 1, 87);
	border-radius:3px;
	padding: 2px 2px;
}
.menu_connexion {
	display:inline;
}
.menu_connexion a:hover{
	color: rgb(1, 1, 87) ;
}
.menu_connexion li:hover {
	background-color:rgb(241, 243, 243);
}
form{
	display:inline;
	margin-left:30px;
	
}
#search{
	padding:5px;
	border-radius: 30px;
    outline:none;
    padding-left:30px;
	border:3px solid rgb(1, 1, 87);
	margin-bottom:2px;
	 width: 40px;
	background:url(../image/boutonrecherche.png) right no-repeat;
	transition: width 2s;
}
#search:hover{
	width: 300px;
	
}

.media{
	display:inline;
	margin-left:15px;
	transition: margin-top 2s;
}

#media1{
display:inline;
vertical-align:middle;
}
#media2{
	display:inline;
	vertical-align:middle;
	margin-left:-5px;
}
#media3{
	display:inline;
	vertical-align:middle;
	margin-left:-5px;
}
#media4{
	display:inline;
	vertical-align:middle;
	margin-left:-5px;
}
#media5{
	display:inline;
	vertical-align:middle;
	margin-left:-5px;
}
 
#wrap {
	/* position du conteneur pour le préparer à bouger */
	position: relative;
	top: 0;
	/* on prépare la transition à venir */
	transition: top 1.4s cubic-bezier(.49,.22,.52,1.35);
}

#nav{
	position:fixed;
	z-index:1;
	top:200px;
}
#nav li{
	color:rgb(3, 14, 116);
	display:block;
	padding:10px;
	line-height:30px;
	font-weight:bold;
	-webkit-transition: all .2s ease-in-out;
	border-top:1px solid black;
	text-align:left;
	width:270px;
	background-color:rgba(247, 223, 89,0.8);
	
}
#nav li:hover,.active{
	font-size:25px;
	cursor:pointer;
	width:300px!important;
}

#nav a {
	/* on applique des marges aux liens */
	display: inline-block;
	margin: 0 3em;
	color: rgb(3, 14, 116);
	text-decoration:none;
	/* on applique une petite lueur */
	text-shadow: 0 0 5px #fff;
	/* on prévoit une petite transition (lueur) */
	transition: all 1s;
}

/* slides */
#slide1, #slide2, #slide3, #slide4 {
	/* height à adapter avec media queries */
	width:100%;
	height:100vh;
	background-size:cover;
	/* préparation des transitions */
	transition: background-position 1.4s  cubic-bezier(.49,.22,.52,1.35);
}
/* attribution des images de fond */
#slide1 { background-image:url(../image/immobilier2.jpg); }
#slide2 { background-image: url(../image/geo.jpg); }
#slide3 { background-image: url(); }
#slide4 { background-image: url(../image/fond_image1.jpg); }


 
#s2:target ~ #wrap {
	top:-100vh;
}
 
/* décalage des fonds de chaque slide */
#s2:target ~ #wrap #slide1 { background-position: 50% 36%; }
#s2:target ~ #wrap #slide2 { background-position: 50% 0%; }
#s2:target ~ #wrap #slide3 { background-position: 50% -30%; }
#s2:target ~ #wrap #slide4 { background-position: 50% -60%; }
 
/* mouvements d'un des personnages */
#s2:target ~ #wrap #trooper { 

left: -180px;
	top: -100px;
	transform: rotate(-7deg);
}
 
/* mouvements de l'autre personnage */
#s2:target ~ #wrap #clone {
	left: -350px;
	top: 50px;
	transform: rotate(0deg);
}



/* juste pour la déco (lueur sur le lien cliqué) */
#s2:target ~ #wrap #nav li:first-child + li a {
	text-shadow: 0 0 5px #eca603, 0 0 5px #eca603, 0 0 5px #eca603, 0 0 5px #eca603;
}
/* vers Slide 1 */
#s1:target ~ #wrap { top:0vh; }
#s1:target ~ #wrap #nav li:first-child a { text-shadow: 0 0 5px #eca603, 0 0 5px #eca603, 0 0 5px #eca603, 0 0 5px #eca603; }
#s1:target ~ #wrap #slide1 { background-position: 50% 0%; }
#s1:target ~ #wrap #slide2 { background-position: 50% -35%; }
#s1:target ~ #wrap #slide3 { background-position: 50% -60%; }
#s1:target ~ #wrap #slide4 { background-position: 50% -90%; }
#s1:target ~ #wrap #trooper { left: -180px; top: 300px; transform: rotate(10deg); }
#s1:target ~ #wrap #clone { left: -280px; top: 300px; transform: rotate(10deg); }
 
/* vers Slide 3 */
#s3:target ~ #wrap { top:-200vh; }
#s3:target ~ #wrap #nav li:first-child  + li + li a { text-shadow: 0 0 5px #eca603, 0 0 5px #eca603, 0 0 5px #eca603, 0 0 5px #eca603; }
#s3:target ~ #wrap #slide1 { background-position: 50% 60%; }
#s3:target ~ #wrap #slide2 { background-position: 50% 35%; }
#s3:target ~ #wrap #slide3 { background-position: 50% 0%; }
#s3:target ~ #wrap #slide4 { background-position: 50% -30%; }
#s3:target ~ #wrap #trooper { left:-1500px;top:-1000px; transform: rotate(-15deg); }
#s3:target ~ #wrap #clone { left:-1000px;top: -800px; transform: rotate(-15deg); }

/* vers Slide 4 */
#s4:target ~ #wrap { top:-300vh; }
#s4:target ~ #wrap #nav li:last-child a { text-shadow: 0 0 5px #eca603, 0 0 5px #eca603, 0 0 5px #eca603, 0 0 5px #eca603; }
#s4:target ~ #wrap #slide1 { background-position: 50% 90%; }
#s3:target ~ #wrap #slide2 { background-position: 50% 60%; }
#s3:target ~ #wrap #slide3 { background-position: 50% 35%; }
#s3:target ~ #wrap #slide4 { background-position: 50% 0%; }

/* Contenus des slides */
.slide_inside1 {
	width: 700px;
	height:250px;
	margin: 0 auto;
	position: relative;
	top:130px;
	left:120px;
	background-color: rgba(0, 0, 0, 0.6);
	padding: 50px;
	border-radius:6px;
}

.slide_inside2 {
	width: 800px;
	height:350px;
	margin: 0 auto;
	position: relative;
	top:90px;
	left:155px;
	background-color: rgba(0, 0, 0, 0.6);
	padding: 50px;
	border-radius:6px;
}
.slide_inside4 {
	width: 700px;
	height:200px;
	margin: 0 auto;
	position: relative;
	top:150px;
	left:120px;
	background-color: rgba(0, 0, 0, 0.6);
	padding: 50px;
	border-radius:6px;
}
p{
	font-family: 'Lora', serif;
    text-align:justify ;
	    font-style: italic;
    font-weight: normal;
    line-height: 1.5;
    margin-top:-40px;
    font-size: 1.3em;
	color: white;
}



/* le titre du slide1*/

#slide1 .parallaxbg{
	position:relative;
	right: -350px;
	top:90px;
	font-size:50px;
	font-weight: bold;
	background-color:rgba(255, 255, 255, 0.7);
	padding: 15px;
	text-shadow: 3px 3px 15px black;
    color:rgb(4, 27, 102);
}

#slide2 .parallaxbg{
	position:relative;
	right: -350px;
	top:60px;
	font-size:50px;
	font-weight: bold;
	background-color:rgba(255, 255, 255, 0.7);
	padding: 15px;
	text-shadow: 3px 3px 15px black;
    color:rgb(4, 27, 102);
}
#slide4 .parallaxbg{
	position:relative;
	right: -500px;
	top:100px;
	font-size:50px;
	font-weight: bold;
	background-color:rgba(255, 255, 255, 0.7);
	padding: 15px;
	text-shadow: 3px 3px 15px black;
    color:rgb(4, 27, 102);
}

/* Le contenu du slide3 les images*/



.slide_inside3 {
	width:auto;
	height:auto;
	margin: 0 auto;
	position: relative;
	
}
iframe{
	position:relative;
	left: 350px;
	top:-100px;
}

/*Premiere image Duplex4pièces*/


.villa1{
	
	height: 200px;
	width: 350px;
	cursor: pointer;
	position:relative;
	top:0px;
	 left:0px;
	 z-index:2;
	
}

 
.contener1 {
      cursor: pointer;
      height: 250px;
      position: relative;
	  top:90px;
	  left:370px;
      overflow: hidden;
      width: 350px;
      text-align:center;
	
	  
      }
      .contener1 .fadedbox1 {
      background-color: rgba(200,200,200,0.1);
      position: absolute;
      top: 0;
      left: 0;
      color: blue;
      -webkit-transition: all 300ms ease-out;
      -moz-transition: all 300ms ease-out;
      -o-transition: all 300ms ease-out;
      -ms-transition: all 300ms ease-out;
      transition: all 300ms ease-out;
      opacity: 0;
      width: 350px;
      height: 150px;
      padding: 200px 0px;
	  
	  
      }
      .contener1:hover .fadedbox1 { 
	  opacity: 0.8;
	  
	  }
      .contener1 .title_text {
		 
      -webkit-transition: all 300ms ease-out;
      -moz-transition: all 300ms ease-out;
      -o-transition: all 300ms ease-out;
      -ms-transition: all 300ms ease-out;
      transition: all 300ms ease-out;
      transform: translateY(60px);
      -webkit-transform: translateY(60px);
	  
      }
      .contener1 .title_text {
      font-size: 1.7em;
      text-transform: uppercase;
      opacity: 0;
      transition-delay: 0.2s;
      transition-duration: 1s;
	  text-align:center;
	  padding-right:10px;
	  
      }
      .contener1:hover .title_text,
      .contener1:focus .title_text {
		height:-10px;
      opacity: 1;
      transform: translateY(0px);
      -webkit-transform: translateY(0px);
	 
      }
	  .title_text{
		  background-color:rgba(200,200,200,0.9);
		 
	  }
	  .fadedbox1 a {
		  text-decoration:none;
		    color:rgb(1, 1, 87) ;
	  }
/*deuxième image Duplex 5pièces*/


.villa2{
	
	height: 200px;
	width: 350px;
	cursor: pointer;
	position:relative;
	top:0px;
	 left:0px;
	 z-index:2;
	
}

 
.contener2 {
      cursor: pointer;
      height: 250px;
      position: relative;
	  top:-160px;
	  left:800px;
      overflow: hidden;
      width: 350px;
      text-align:center;
	
	  
      }
      .contener2 .fadedbox2 {
      background-color: rgba(200,200,200,0.1);
      position: absolute;
      top: 0;
      left: 0;
      color: blue;
      -webkit-transition: all 300ms ease-out;
      -moz-transition: all 300ms ease-out;
      -o-transition: all 300ms ease-out;
      -ms-transition: all 300ms ease-out;
      transition: all 300ms ease-out;
      opacity: 0;
      width: 350px;
      height: 150px;
      padding: 200px 0px;
	  
	  
      }
      .contener2:hover .fadedbox2 { 
	  opacity: 0.8;
	  
	  }
      .contener2 .title_text {
		 
      -webkit-transition: all 300ms ease-out;
      -moz-transition: all 300ms ease-out;
      -o-transition: all 300ms ease-out;
      -ms-transition: all 300ms ease-out;
      transition: all 300ms ease-out;
      transform: translateY(60px);
      -webkit-transform: translateY(60px);
	  
      }
      .contener2 .title_text {
      font-size: 1.7em;
      text-transform: uppercase;
      opacity: 0;
      transition-delay: 0.2s;
      transition-duration: 1s;
	  text-align:center;
	  padding-right:10px;
	  
      }
      .contener2:hover .title_text,
      .contener2:focus .title_text {
		height:-10px;
      opacity: 1;
      transform: translateY(0px);
      -webkit-transform: translateY(0px);
	 
      }
	  .title_text{
		  background-color:rgba(200,200,200,0.9);
		 
	  }
	  .fadedbox2 a {
		  text-decoration:none;
		    color:rgb(1, 1, 87) ;
	  }
	  
	  
/*troisième image Duplex 6pièces*/


.villa3{
	
	height: 200px;
	width: 350px;
	cursor: pointer;
	position:relative;
	top:0px;
	 left:0px;
	 z-index:2;
	
}

 
.contener3 {
      cursor: pointer;
      height: 250px;
      position: relative;
	  top:-150px;
	  left:370px;
      overflow: hidden;
      width: 350px;
      text-align:center;
	
	  
      }
      .contener3 .fadedbox3 {
      background-color: rgba(200,200,200,0.1);
      position: absolute;
      top: 0;
      left: 0;
      color: blue;
      -webkit-transition: all 300ms ease-out;
      -moz-transition: all 300ms ease-out;
      -o-transition: all 300ms ease-out;
      -ms-transition: all 300ms ease-out;
      transition: all 300ms ease-out;
      opacity: 0;
      width: 350px;
      height: 150px;
      padding: 200px 0px;
	  
	  
      }
      .contener3:hover .fadedbox3 { 
	  opacity: 0.8;
	  
	  }
      .contener3 .title_text {
		 
      -webkit-transition: all 300ms ease-out;
      -moz-transition: all 300ms ease-out;
      -o-transition: all 300ms ease-out;
      -ms-transition: all 300ms ease-out;
      transition: all 300ms ease-out;
      transform: translateY(60px);
      -webkit-transform: translateY(60px);
	  
      }
      .contener3 .title_text {
      font-size: 1.7em;
      text-transform: uppercase;
      opacity: 0;
      transition-delay: 0.2s;
      transition-duration: 1s;
	  text-align:center;
	  padding-right:10px;
	  
      }
      .contener3:hover .title_text,
      .contener3:focus .title_text {
		height:-10px;
      opacity: 1;
      transform: translateY(0px);
      -webkit-transform: translateY(0px);
	 
      }
	  .title_text{
		  background-color:rgba(200,200,200,0.9);
		 
	  }
	  .fadedbox3 a {
		  text-decoration:none;
		    color:rgb(1, 1, 87) ;
	  }
	  
/*quatrième image Immeuble*/


.villa4{
	
	height: 200px;
	width: 350px;
	cursor: pointer;
	position:relative;
	top:0px;
	 left:0px;
	 z-index:2;
	
}

 
.contener4 {
      cursor: pointer;
      height: 250px;
      position: relative;
	  top:-400px;
	  left:800px;
      overflow: hidden;
      width: 350px;
      text-align:center;
	
	  
      }
      .contener4 .fadedbox4 {
      background-color: rgba(200,200,200,0.1);
      position: absolute;
      top: 0;
      left: 0;
      color: blue;
      -webkit-transition: all 300ms ease-out;
      -moz-transition: all 300ms ease-out;
      -o-transition: all 300ms ease-out;
      -ms-transition: all 300ms ease-out;
      transition: all 300ms ease-out;
      opacity: 0;
      width: 350px;
      height: 150px;
      padding: 200px 0px;
	  
	  
      }
      .contener4:hover .fadedbox4 { 
	  opacity: 0.8;
	  
	  }
      .contener4 .title_text {
		 
      -webkit-transition: all 300ms ease-out;
      -moz-transition: all 300ms ease-out;
      -o-transition: all 300ms ease-out;
      -ms-transition: all 300ms ease-out;
      transition: all 300ms ease-out;
      transform: translateY(60px);
      -webkit-transform: translateY(60px);
	  
      }
      .contener4 .title_text {
      font-size: 1.7em;
      text-transform: uppercase;
      opacity: 0;
      transition-delay: 0.2s;
      transition-duration: 1s;
	  text-align:center;
	  padding-right:10px;
	  
      }
      .contener4:hover .title_text,
      .contener4:focus .title_text {
		height:-10px;
      opacity: 1;
      transform: translateY(0px);
      -webkit-transform: translateY(0px);
	 
      }
	  .title_text{
		  background-color:rgba(200,200,200,0.9);
		 
	  }
	  .fadedbox4 a {
		  text-decoration:none;
		    color:rgb(1, 1, 87) ;
	  }