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

html,
body {
    height: 100%;
    overflow: hidden;
	/*background-color:rgba(30,30,30);*/
}


#bandeau {
	position:fixed;
	width:0}

section {
	
	}

#cont {
	overflow: hidden;
 	overflow-y: auto;
  	perspective: 100px;
	perspective-origin:50% 50%;
	transform-style:preserve-3d;
	height:100%;}

#section {
	transform-style:preserve-3d;
	}

.images {
	/*transform-style:preserve-3d;*/
	max-height:75vh;
	max-width:95vw;
	margin:auto;
	/*overflow:hidden;*/
	text-align:center;
	}
#lienvisite {
	width:10vw;
	position:relative;
	top:-25vw;
	cursor:pointer;
	}
	
.visitevirtuelle {
	width: 90vw; 
	height: 75vh;
	margin:auto;}

.paralax {
	/*transform-style:preserve-3d;*/
	max-height:75vh;
	max-width:90vw;
	/*transform: translateZ(-20px) scale(1.25);*/
	}

.inter {
	transform-style:preserve-3d;
	min-height:100px;
	height:10vw;
	background-color:rgb(40,40,40);
	display: flex;
 	align-items: center;
 	justify-content: center;}
 
h2 {
	
	margin:0;
	padding:0;
	transform: translateZ(10px) scale(0.6);
	color:rgb(120,180,216)}
		
#nav_projets {
	width:100%;
	height:56px;
	display:flex;
	justify-content:space-around;
	align-items:center;
	margin-top:0px;
	transform: translateZ(10px) scale(1);}

#nav_projets p {
	color:white;
	height:40px;
	line-height:40px}
#nav_projets p a {
	color:rgb(120,180,216)}

#nav_projets p:nth-child(1) a, #nav_projets p:nth-child(3) a {
	visibility:hidden;
	font-size:0.1em;
	}

#nav_projets p:nth-child(1) a::before {
	visibility:visible;
	font-size:25px;
	content:'<';}

#nav_projets p:nth-child(3) a::after {
	visibility:visible;
	font-size:25px;
	content:'>';}
		
footer {
	margin-top:0}




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

.img-comp-img {
  position: absolute;
  width: auto;
  height: auto;
  overflow: hidden;
  margin: auto;
}
.img-comp-img img {
  max-width: 90vw;
  height: auto;
/*  max-height:75vh;*/
  margin: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;
}


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

#label {display:inherit}

#label .burger {
  top:3.5vw;
  z-index: 30;
}

#menu {
	position:fixed;
	top:3.5vw;
	transform: translateX(-100%);
	}
#bandeau {
	width:calc(100% - 17px);
	position:fixed;
	transform: translateX(-100%);
  top: 0;
  left: 0;
  z-index: 2;
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
	}

#navcheck:checked ~ nav {
	width:calc(100% - 77px);
	top:3.5vw}

#navcheck:checked ~ #bandeau {
  transform: translateX(0);
}

[id="navcheck"]:checked + [id="label"]::before {
  opacity: 0;
  pointer-events: none;
}

#navcheck:checked ~ #menu h3 {
		height:35px;
		background-color:transparent;
		padding:0px;
		padding-top:3px;
		font-size:1.4em;
		border-bottom:none;}


#navcheck:checked ~ #menu div:hover h3 {
		height:38px;
		background-color:rgb(120,180,216);
		padding:0px;
		font-size:0.8em;}

#navcheck:checked ~ #menu h3::after {
		font-size:1.6em;
		margin:0;
		padding:0;
		position:relative;
		top:-4px;
		color:white;
		display:block;
		}

_:-ms-lang(x), #navcheck:checked ~ #menu h3::after {
		font-size:22px;}

	#navcheck:checked ~ #menu div:nth-child(1) h3::after {
		content:""}
	#navcheck:checked ~ #menu div:nth-child(2) h3::after {
		content:""}
	#navcheck:checked ~ #menu div:nth-child(3) h3::after {
		content:""}
	#navcheck:checked ~ #menu div:nth-child(4) h3::after {
		content:""}
	#navcheck:checked ~ #menu div:nth-child(5) h3::after {
		content:""}
	#navcheck:checked ~ #menu div:nth-child(6) h3::after {
		content:""}
	#navcheck:checked ~ #menu div:nth-child(7) h3::after {
		content:""}
	
	#navcheck:checked ~ #menu div:nth-child(1):hover h3::after {
		content:"Studio"}
	#navcheck:checked ~ #menu div:nth-child(2):hover h3::after {
		content:"Photoréalisme"}
	#navcheck:checked ~ #menu div:nth-child(3):hover h3::after {
		content:"A la main"}
	#navcheck:checked ~ #menu div:nth-child(4):hover h3::after {
		content:"Visualisation"}
	#navcheck:checked ~ #menu div:nth-child(5):hover h3::after {
		content:"A propos"}
	#navcheck:checked ~ #menu div:nth-child(6):hover h3::after {
		content:"Un projet ?"}
	#navcheck:checked ~ #menu div:nth-child(7):hover h3::after {
		content:"Un projet ?"}


.visitevirtuelle {
	width: 70vw; 
	height: 40vw}
.images  {
	max-height:90vh;
	max-width:70vw;
	}
.paralax {
	max-height:90vh;
	max-width:70vw;
	/*transform: scale(1.20) translateZ(-20px);*/
	}
/*_:-ms-lang(x), .paralax {
	transform: scale(1) translateZ(0px);}*/
h2 {
	margin:0;
	padding:0;
	transform: translateZ(10px) scale(1);
	-moz-transform: translateZ(10px) scale(1);
	color:rgb(120,180,216)}


#nav_projets p:nth-child(1) a, #nav_projets p:nth-child(3) a {
	visibility:visible;
	font-size:1.1em;
	}

#nav_projets p:nth-child(1) a::before {
	content:none;}

#nav_projets p:nth-child(3) a::after {
	content:none;}



/* Comparaisons plans */
	
.img-comp-container {
  width:70vw;
  max-height:90vh;
  height:46.5vw; /*should be the same height as the images*/
}

.img-comp-img img {
  max-width: 70vw;
/*  max-height:90vh;*/
}


}