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

h4 {
	font-family: 'Trebuchet MS', Helvetica, sans-serif;
	color:inherit}


/*Bannière et parallax logo*/

	#banniere {
		height:80vw;
		background-image: url(Images/Lognes/Web-Fenetre-ronde.jpg); 
		background-repeat:no-repeat;
		background-position:50% 50%;  
		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
		}


/* Général */


#section {
	margin-top:85px
	}
	
H1 {
	font-weight:lighter;
	font-size:2.5em;
	text-align:right;
	font-variant:small-caps;
	margin-left:10vw;
	color:white;
	width:80vw;
	}
H2 {
		margin-left:10vw;
		color:rgb(120,180,216);
		max-width:80vw;
		}
#titre2, #titre4 {
		color:rgb(217,222,138);
		}
		
/* Textes avantages */

#visites, #visuels {
	width:80vw;
	margin:auto;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	align-items:center;
	}
	
.avantages {
		color:white;
		margin:0;
		margin-bottom:5vw;
		padding:5vw;
		/*height:30vw;*/
		min-height:15vw;
		width:70vw;
		border-radius:1vw 1vw;
		background-color:rgba(255,255,255,0.1);
		font-size:1em;
	}
.avantages ul	{
	margin:0;
	padding:1vw
	}
.avantages li {
	list-style-image:url(Images/fleche-droite-bleue.png)
	}
.sstitres {
		font-variant:small-caps;
		font-size:1em;
		color:rgb(217,222,138);
		margin:0;
		padding:0;
		display:inline	
	}

	
/* Visuels 3D */

#img1 {
	height:40vw;
	width:80vw;
	margin:auto;
	margin-top:5vw;
	margin-bottom:5vw;
	overflow:hidden;
	background-image:url(Images/Lognes/chambre-avant.JPG);
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat}
	
#img1 img {
	transform:translate(0,-10%);
	max-width:80vw}

#img1 img:hover {
	display:none}

/* Visites virtuelles */

#lignevv {
	display:flex;
	flex-direction:column;
	max-width:80vw;
	margin:auto;
	margin-top:5vw;
	margin-bottom:5vw
	}
	
#lignevv div {
	margin-right:0vw;
	margin-bottom:1vw;
	}

.visitevirutelle {
	width:80vw;
	height:80vw
	}
	
	
	
	
/* Comparaisons plans */
	
.img-comp-container {
  position: relative;
  overflow:hidden;
  width:80vw;
  margin:auto;
  margin-top:5vw;
  margin-bottom:5vw;
  height:50vw; /*should be the same height as the images*/
}

.img-comp-img {
  position: absolute;
  width: auto;
  height: auto;
  overflow: hidden;
}
.img-comp-img img {
  max-width: 80vw;
  height: auto;
}

.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;
}


/* Tableau des compétences proposées */

	#services_section {
		display:inherit;
		margin-bottom:10vw;
		}
	
	
	#services {
		height:auto;
		width:80vw;
		margin:auto;
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		justify-content:center;
		align-content:center}
	#services * {
		padding:2.5vw;
		padding-top:1vw;
		padding-bottom:1vw;
		margin:0px;
		display:flex;
		flex-direction:column;
		justify-content:flex-end;
		overflow:hidden;
		font-family:'champagnebold', 'Trebuchet MS', Helvetica, sans-serif;
		font-weight:bold}
	
	#services h4 {
		font-size:1.2em}
	
	#patio {
		background: url("Images/Lognes/Web-Plan-de-travail.jpg") top/ cover;
		width:75vw;
		max-width:calc(100vh + 5vw);
		height:60vw;
		max-height:50vh;
		order:1;
		border-top-left-radius:1vw;
		border-top-right-radius:1vw;
		}
	#film {
		margin-left:0vw;
		margin-bottom:0.6vw;
		background: rgb(217,222,138);
		width:35vw;
		max-width:50vh;
		height:38vw;
		max-height:50vh;
		order:3;
		color:white;
		border-top-left-radius:1vw;
		border-bottom-left-radius:1vw;
		}
		
	#film:hover ~ #bleu h4::after {
		content:"20 € / vue 360 (tarif dégressif au delà de 5 vues). Déplacement Seine et Marne nord, Paris et départements limitrophes avec frais kilométriques";
		font-size:0.6em} 
		
	#bleu {
		margin-bottom:0.6vw;
		background: rgb(217,222,138);
		width:35vw;
		max-width:50vh;
		height:38vw;
		max-height:50vh;
		order:4;
		text-align:right;
		justify-content:flex-start;
		color:white;
		border-top-right-radius:1vw;
		border-bottom-right-radius:1vw;
		}
		
	#bleu h4::after {
		content:"Permettez à vos clients de visiter votre catalogue de biens en immersion totale sans même avoir à sortir de chez eux.";
		font-size:0.6em} 
	#bleu:hover h4::after {
		content:"25 € / vue 360 (tarif dégressif au delà de 5 vues). Déplacement Seine et Marne nord, Paris et départements limitrophes avec frais kilométriques";
		font-size:0.6em} 
		
	#perspective {
		background: rgba(255,255,255,0.8);
		width:75vw;
		max-width:calc(100vh + 5vw);
		height:10vw;
		max-height:15vh;
		order:2;
		padding-top:0;
		margin-bottom:0.6vw;
		border-bottom-left-radius:1vw;
		border-bottom-right-radius:1vw;
		}
	#perspective h4 {
		line-height:8vw;
		}
	#edition {
		margin-left:0vw;
		margin-bottom:0.6vw;
		background: rgb(255,255,255);
		width:34.7vw;
		max-width:calc(50vh - 0.3vw);
		height:42vw;
		max-height:50vh;
		order:5;
		border-radius:1vw;
		}
		
	#edition h4::before {
		content:"Pour comprendre l'ensemble du bien en un instant et avoir une vue d'ensemble du potentiel.";
		font-size:0.6em}
	#edition:hover h4::before {
		content:"Plan de l'existant vide : 35€; Plan  aménagé avec projet : 80€;  Service à distance ou relevés sur place.";
		font-size:0.6em}
	
	#visite {
		margin-left:0.6vw;
		margin-bottom:0.6vw;
		background: url("Images/bois-v.jpg");
		width:34.7vw;
		max-width:calc(50vh - 0.3vw);
		height:42vw;
		max-height:50vh;
		order:6;
		text-align:right;
		color:white;
		opacity:0.8;
		border-radius:1vw;
		}
		
	#visite h4::before {
		content:"Aider vos clients à se projeter et lever leurs freins grâce au potentiel du bien.";
		font-size:0.6em}
	#visite:hover h4::before {
		content:"60 € ht / vue 360 (tarif dégressif au delà de 5 vues). Service à distance ou relevés sur place.";
		font-size:0.6em}
		
	#documents {
		margin-left:0vw;
		background: rgb(120,180,216);
		width:75vw;
		max-width:calc(100vh + 5vw);
		height:38vw;
		max-height:50vh;
		order:7;
		color:white;
		border-radius:1vw;
		}
	#documents h4::before {
		content:"A partir d'une simple photo, recevez un visuel 3D permettant à vos clients de se projeter dans une ambiance bien plus attractive.";
		font-size:0.6em}
	#documents:hover h4::before {
		content:"90€ ht / Visuel. Service à distance ou relevés sur place.";
		font-size:0.6em}
	


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

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

	#services h4 {
		font-size:1.4em}
	#film {
		height:25vw;
		}
		
	#bleu {
		height:25vw;
		}
		

	#edition {
		height:25vw;
		}

	#visite {
		height:25vw;
		}

	#documents {
		height:25vw;
		}


.visitevirutelle {
	width:80vw;
	height:40vw
	}
	
}

@media screen and (min-width: 768px) {
	
/* Général */


#section {
	margin-top:85px
	}
	
H1 {
	font-weight:lighter;
	font-size:2.5em;
	text-align:right;
	font-variant:small-caps;
	margin-right:10vw;
	color:white;
	}
H2 {
		margin-left:10vw;
		color:rgb(120,180,216);
		}
#titre2, #titre4 {
		color:rgb(217,222,138);
		}
		
/* Textes avantages */

#visites, #visuels {
	width:80vw;
	margin:auto;
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	align-items:center;
	}
	
.avantages {
		color:white;
		margin:0;
		margin-bottom:5vw;
		padding:2vw;
		/*height:30vw;*/
		min-height:15vw;
		width:22vw;
		max-width:66vw;	
		border-radius:1vw 1vw;
		background-color:rgba(255,255,255,0.1);
		/*font-size:1.2em;*/
	}
.avantages ul	{
	margin:0;
	padding:1vw
	}
.avantages li {
	list-style-image:url(Images/fleche-droite-bleue.png)
	}
.sstitres {
		font-variant:small-caps;
		/*font-size:1.2em;*/
		color:rgb(217,222,138);
		margin:0;
		padding:0;
		display:inline	
	}

	
/* Visuels 3D */

#img1 {
	height:40vw;
	width:80vw;
	margin:auto;
	margin-top:5vw;
	margin-bottom:5vw;
	overflow:hidden;
	background-image:url(Images/Lognes/chambre-avant.JPG);
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat}
	
#img1 img {
	transform:translate(0,-10%);
	max-width:80vw}

#img1 img:hover {
	display:none}

/* Visites virtuelles */

#lignevv {
	display:flex;
	flex-direction:row;
	max-width:80vw;
	margin:auto;
	margin-top:5vw;
	margin-bottom:5vw
	}
	
#lignevv div {
	margin-right:1vw;
	margin-bottom:0vw;
	}

.visitevirutelle {
	width:39vw;
	height:40vw
	}
	
	
	
/* Comparaisons plans */
	
.img-comp-container {
  position: relative;
  overflow:hidden;
  width:80vw;
  margin:auto;
  margin-top:5vw;
  margin-bottom:5vw;
  height:50vw; /*should be the same height as the images*/
}

.img-comp-img {
  position: absolute;
  width: auto;
  height: auto;
  overflow: hidden;
}
.img-comp-img img {
  max-width: 80vw;
  height: auto;
}

.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;
}



/* Tableau des compétences proposées */

	#services_section {
		display:inherit;
		margin-bottom:10vw;
		}
	
	
	#services {
		height:44.4vw;
		margin:auto;
		display:flex;
		flex-direction:column;
		flex-wrap:wrap;
		justify-content:center;
		align-content:center}
	#services * {
		padding:1vw;
		padding-bottom:0.5vw;
		margin:0px;
		display:flex;
		flex-direction:column;
		justify-content:flex-end;
		overflow:hidden;
		font-family:'champagnebold', 'Trebuchet MS', Helvetica, sans-serif;
		font-weight:bold}
	
	#services h4 {
		font-size:1.3em}
	
	#patio {
		background: url("Images/Lognes/Web-Plan-de-travail.jpg") top/ cover;
		width:30vw;
		height:32.8vw;
		max-height:none;
		order:1;
		border-top-left-radius:1vw;
		border-top-right-radius:1vw;
		}
	#film {
		margin-left:0.6vw;
		margin-bottom:0.6vw;
		background: rgb(217,222,138);
		width:13.4vw;
		height:20.2vw;
		max-height:none;
		order:3;
		text-align:right;
		justify-content:flex-start;
		color:white;
		border-top-left-radius:1vw;
		border-bottom-left-radius:1vw;
		}
		
	#film:hover ~ #bleu h4::after {
		/*content:"10€/m²";*/
		font-size:0.6em} 
		
	#bleu {
		margin-bottom:0.6vw;
		background: rgb(217,222,138);
		width:14vw;
		height:20.2vw;
		max-height:none;
		order:5;
		text-align:right;
		justify-content:flex-start;
		color:white;
		border-top-right-radius:1vw;
		border-bottom-right-radius:1vw;
		}
		
	#bleu h4::after {
		/*content:"Permettez à vos clients de visiter votre catalogue de biens en immersion totale sans même avoir à sortir de chez eux.";*/
		font-size:0.6em} 
	#bleu:hover h4::after {
		/*content:"10€/m²";*/
		font-size:0.6em} 
		
	#perspective {
		/*background: purple rgba(255,255,255,0.8)*/;
		width:30vw;
		height:6.3vw;
		max-height:none;
		order:2;
		padding-top:0;
		border-bottom-left-radius:1vw;
		border-bottom-right-radius:1vw;
		}
	#perspective h4 {
		line-height:3vw;
		}
	#edition {
		margin-left:0.6vw;
		background: rgb(255,255,255);
		width:13.4vw;
		height:18.3vw;
		max-height:none;
		order:4;
		padding-top:0;
		border-radius:1vw;
		}
		
	#edition h4::before {
		/*content:"Pour comprendre l'ensemble du bien en un instant et avoir une vue d'ensemble du potentiel.";*/
		font-size:0.6em}
	#edition:hover h4::before {
		/*content:"10€ / m²";*/
		font-size:0.6em}
	
	#visite {
		margin-left:0.6vw;
		background: url("Images/bois-v.jpg");
		width:13.4vw;
		height:17.3vw;
		max-height:none;
		order:6;
		text-align:right;
		color:white;
		opacity:0.8;
		border-radius:1vw;
		}
		
	#visite h4::before {
		/*content:"Aider vos clients à se projeter et lever leurs freins grâce au potentiel du bien.";*/
		font-size:0.6em}
	#visite:hover h4::before {
		/*content:"10€ /m².";*/
		font-size:0.6em}
		
	#documents {
		margin-left:0.6vw;
		background: rgb(120,180,216);
		width:13.4vw;
		height:39.6vw;
		max-height:none;
		order:7;
		color:white;
		border-radius:1vw;
		}
	#documents h4::before {
		/*content:"A partir d'une simple photo, recevez un visuel 3D permettant à vos clients de se projeter dans une ambiance bien plus attractive.";*/
		font-size:0.6em}
	#documents:hover h4::before {
		/*content:"100€ ht / Visuel.";*/
		font-size:0.6em}
		
}

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



#section {
	margin-top:85px
	}
	
H1 {
	font-weight:lighter;
	font-size:2.5em;
	text-align:right;
	font-variant:small-caps;
	margin-right:10vw;
	color:white;
	}
H2 {
		margin-left:10vw;
		color:rgb(120,180,216);
		}
#titre2, #titre4 {
		color:rgb(217,222,138);
		}
		
/* Textes avantages */

#visites, #visuels {
	width:80vw;
	margin:auto;
	display:flex;
	justify-content:space-between;
	align-items:center;
	}
	
.avantages {
		color:white;
		margin:0;
		margin-bottom:5vw;
		padding:2vw;
		/*height:30vw;*/
		min-height:15vw;
		width:22vw;
		max-width:66vw;	
		border-radius:1vw 1vw;
		background-color:rgba(255,255,255,0.1);
		font-size:1.2em;
	}
.avantages ul	{
	margin:0;
	padding:1vw
	}
.avantages li {
	list-style-image:url(Images/fleche-droite-bleue.png)
	}
.sstitres {
		font-variant:small-caps;
		font-size:1.2em;
		color:rgb(217,222,138);
		margin:0;
		padding:0;
		display:inline	
	}

	
/* Visuels 3D */

#img1 {
	height:40vw;
	width:80vw;
	margin:auto;
	margin-top:5vw;
	margin-bottom:5vw;
	overflow:hidden;
	background-image:url(Images/Lognes/chambre-avant.JPG);
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat}
	
#img1 img {
	transform:translate(0,-10%);
	max-width:80vw}

#img1 img:hover {
	display:none}

/* Visites virtuelles */

#lignevv {
	display:flex;
	max-width:80vw;
	margin:auto;
	margin-top:5vw;
	margin-bottom:5vw
	}
	
#lignevv div {
	margin-right:1vw
	}
	
	
	
	
/* Comparaisons plans */
	
.img-comp-container {
  position: relative;
  overflow:hidden;
  width:80vw;
  margin:auto;
  margin-top:5vw;
  margin-bottom:5vw;
  height:50vw; /*should be the same height as the images*/
}

.img-comp-img {
  position: absolute;
  width: auto;
  height: auto;
  overflow: hidden;
}
.img-comp-img img {
  max-width: 80vw;
  height: auto;
}

.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;
}


/* Tableau des compétences proposées */

#services h4 {
		font-size:1.5em}
		
#services {
		height:34.4vw;
		}
	#patio {
		height:25.8vw;
		}
	#film {
		height:15.2vw;
		}
		
	#bleu {
		height:15.2vw;
		}
	#perspective {
		height:3.3vw;
		}

	#edition {
		height:13.3vw;
		}

	#visite {
		height:12.3vw;
		}

	#documents {
		height:29.6vw;
		}
	

}

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

#services {
		height:34.4vw;
		}
	#services h4 {
		font-size:1.8em}
	#patio {
		height:25.8vw;
		}
	#film {
		height:15.2vw;
		}
		
	#bleu {
		height:15.2vw;
		}
		
	#perspective {
		height:3.3vw;
		}

	#edition {
		height:13.3vw;
		}

	#visite {
		height:12.3vw;
		}

	#documents {
		height:29.6vw;
		}
		
}