@charset "utf-8";
/* CSS Document */


h2 {
	font-family: 'Trebuchet MS', Helvetica, sans-serif;}

/*Bannière et parallax logo*/

	#banniere {
		height:80vw;
		background-image: url(Images/particuliers.jpg); 
		background-repeat:no-repeat;
		background-position:center;  
		background-size:auto 100%;
		padding:0 0 0 0;
		}
	#cadre_logo {
		height:80vw;
		background-image:
			url(Images/welcome/logo-w.png),
			url(Images/welcome/gauche40.png), 
			url(Images/welcome/haut40.png), 
			url(Images/welcome/droite40.png), 
			url(Images/welcome/bas40.png)
			;
		background-repeat:no-repeat;
		background-position:50% 50%;
		background-size:100%;
		display:flex;
		flex-direction:column;
		align-items:center;
		justify-content:flex-end
		}

/*Section principale */

#vendre, #acheter, #amenagement {
	margin-top:15px;
	}
.pres_gauche {
	padding:40px;
	text-align:justify;
	background-color:rgb(120,180,216);
	}
#acheter .pres_gauche {
	background-color:rgb(217,222,138);
	}
.pres_gauche p {
	margin-top:15px}
.pres_gauche a {
	color:rgb(217,222,138);
	font-size:1.2em}
#vendre h2, #acheter h2, #amenagement h2 {
	color:rgb(217,222,138);
	margin:0px 0 20px 0;
	padding-top:20px;
	text-align:left}
#acheter h2 {
	color:rgb(120,180,216);}
	
.img-comp-container {
  position: relative;
  overflow:hidden;
  height:40vw; /*should be the same height as the images*/
}

.img-comp-img {
  position: absolute;
  width: 100vw;
  height: auto;
  overflow: hidden;
}
.img-comp-img img {
	width: 100vw;
  height: auto;
}
#vendre .img-comp-img img {
	transform:translateY(-18%)}
#acheter .img-comp-img img {
	transform:translateY(-10%)}
#amenagement .img-comp-img img {
	transform:translateY(-9%)}
#amenagement .img-comp-overlay img {
	transform:translateY(-30%)}

.img-comp-overlay {
	border-right:double white 5px;}
	

.img-comp-slider {
  position: absolute;
  z-index: 9;
  cursor: ew-resize;
  /*set the appearance of the slider:*/
  width: 50px;
  height: 50px;
  background-color:rgb(120,180,216);
  opacity: 0.7;
  border-radius: 50%;
  background-image:url(Images/fleche-gauche.png), url(Images/fleche-droite.png);
  background-size:30%;
  background-repeat:no-repeat;
  background-position:left, right;
}


/* Section latest */
	#visuels_vendre, #visuels_acheter, #visuels_amenagement {
		display:none}


@media screen and (min-width: 480px) {
	

#banniere {
	background-attachment:fixed;
	height:32vw;
	background-size:100%;
	background-position:center -8vw;
	padding:0 36vw 0 0;}
#cadre_logo {
	height:32vw;
	background-size:80%;
	}
	
}

	
@media screen and (min-width: 768px) {


#vendre, #acheter, #amenagement {
	margin-top:85px;
	}

.pres_gauche {
	width:60vw;
	padding:40px;
	padding-bottom:100px;
	text-align:justify;
	background-color:rgb(120,180,216);
	margin-left:6vw;
	box-shadow:3px 3px 3px black inset;
	}

.img-comp-container {
  position: relative;
  top:-90px;
  overflow:visible;
  width:50vw;
  height:42.5vw; /*should be the same height as the images*/
}

.img-comp-img {
  position: absolute;
  width: auto;
  height: auto;
  width:50vw;
  padding:0px;
  padding-top:0px;
  margin-left:43vw;
  box-shadow:3px 3px 3px black
}
.img-comp-img img {
  height: 42.5vw;
  width:auto;
}

#vendre .img-comp-img img {
	transform:translateX(-3%)}
#acheter .img-comp-img img {
	transform:translateY(0%)}
#amenagement .img-comp-img img {
	transform:translate(-6%, 0%)}

.img-comp-slider {
	margin-left:43vw;}

/* Section latest */
	#visuels_vendre, #visuels_acheter, #visuels_amenagement {
		overflow:hidden;
		/*margin-top:5vw;*/
		display:inherit;
		position: relative;
  		top:-50px;}
	.grille_latest {
	width:84vw;
	margin:auto;
	padding:0;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:center;
	/*margin-bottom:10vw*/}
	.grille_latest figure {
		margin:0;
		height:30vw;
		max-height:90vw;
		width:22vw;
		max-width:66vw;	
		border-radius:1vw 1vw;
		overflow:hidden;
		background-size:auto 100%;
		background-position:center;
		transition:all ease 500ms, transform ease 1000ms;
		text-align:center;
		display:flex;
		align-items:flex-end;
		z-index:5
		}
	.grille_latest figure h2 {
		background-color:rgba(255,255,255,0.6);
		color:rgba(0,0,0,0.6);
		width:100%;
		line-height:4vw;
		height:5vw;
		font-size:1em;
		margin:0;}
	.grille_latest figure h2 span {
		color:rgba(0,0,0,0.6);
		font-size:0.5em;
		position:relative;
		top:-2.7vw;
		font-weight:lighter
	}
	.latest_anim1 {
		transform:translate(-150%, 0%);
		}
	.latest_anim2 {
		transform:translate(0%, -200%);
		transition-delay:300ms
		}
	.latest_anim3 {
		transform:translate(150%, 0%);
		transition-delay:600ms
		}
		
		
	
	#Projet_1 {
		background-image:url(Images/particuliers/table.jpg);
		background-position:65%;
		}
	#Projet_2 {
		background-image:url(Images/particuliers/cuisine.jpg);
		}
	#Projet_3 {
		background-image:url(Images/particuliers/vue_oiseau.jpg);
		}
	#Projet_4 {
		background-image:url(Images/particuliers/cadastre.jpg);
		}
	#Projet_5 {
		background-image:url(Images/particuliers/maison.jpg);
		}
	#Projet_6 {
		background-image:url(Images/particuliers/garage.jpg);
		}
	#Projet_7 {
		background-image:url(Images/particuliers/appt.jpg);
		}
	#Projet_8 {
		background-image:url(Images/particuliers/duplex.jpg);
		}
	#Projet_9 {
		background-image:url(Images/particuliers/sdb.jpg);
		}
	
}

@media screen and (min-width: 1024px) {
	
p {
	font-size:inherit}	
		
#vendre, #acheter, #amenagement {
	height:550px;
	width:84vw;
	margin:auto;
	margin-top:85px;
	padding:0;
	display:flex;
	}
.pres_gauche {
	width:450px;
	padding:0;
	padding-left:30px;
	padding-right:30px;
	margin:0;
	box-shadow:none
	}
	

.img-comp-container {
  position: relative;
  top:0;
  width:calc(84vw - 460px);
  overflow:hidden;
  height:550px; /*should be the same height as the images*/
}

.img-comp-img {
  position: absolute;
  width: auto;
  height: auto;
  overflow: hidden;
  margin:0;
  
   box-shadow:none
}
.img-comp-img img {
  /*height: 550px;*/
  height:550px;
  min-width:calc(84vw - 460px);
}
.img-comp-slider {
	margin-left:0vw;}

#visuels_vendre, #visuels_acheter, #visuels_amenagement {
		margin-top:5vw;
		margin-bottom:8vw;
		position:inherit;
  		}
		
}

@media screen and (min-width: 1500px) {
#vendre, #acheter, #amenagement, .photo_theme, .img-comp-img img, .img-comp-container {
	min-height:36.7vw;
	}
.img-comp-container {
		width:44vw}
.img-comp-img img {
  min-width:44vw;
}
.pres_gauche {
	width:31vw;
	padding-left:3vw;
	padding-right:10vw;
	display:flex;
	flex-direction:column;
	justify-content:center;
	}
.pres_gauche h2 {
	font-size:2.5vw;
	transform:translateY(-1vw)}
.grille_latest figure h2 {
	font-size:1.5vw;}
.grille_latest figure h2 span {
	font-size:0.7vw;
	top:-3.3vw;}
}