@font-face{
font-family : "Montserrat";
src : url("Montserrat-Medium.ttf");
}

body{
	font-family: "Helvetica";
	//background-color: lightgrey;
	margin: 0%;
	width: 100vw;
	position: relative;
	}



nav{
	width :100%;
	height:12vh;
	display: flex;
	align-items: center;
	//border-bottom: 2px solid #000;
	justify-content: space-between;
	position: fixed;
	top: 0;
	background-color: white;
	z-index: 9;
	}
	

nav .onglets{
	margin-top: 2px;
	margin-left: 20px;
	//background-color: green;
	justify-content: space-between
	display: inline-block;
}

.onglets{
	margin-right: 10px;

}

nav h1{
	color: #000;
	font-size: 50px;
	justify-content: left;
	margin-left: 10px;
	text-decoration: none;
	}


nav .onglets a{
	text-decoration: none;
	color: #000;
	margin-right: 25px;
	//border-bottom: 1px solid #000;
	padding-bottom: 5px;
}

.logo{
	width: 10%;
	margin-left: 30px;
	margin-top: 5px;	
}





//.marges{
	margin-top: 30%;
	background-color: red;
}




.wrapper{
	height: 100vh;
	overflow-y: auto;
	overflow-x: hidden;
	perspective: 10px;
	margin-bottom: 0%;
	//margin-top: 12vh;
	//background-color: red;
	
	
	}

.forground{
	z-index: 1;
	background-color: green;

}
	

.prems{
	position: absolute;
	z-index: 1;
}

//.photo3, photo4, photo5{
	width: 20vw;
	}


//.photo1{
	width: 20vw;
	top: 0;
	position: absolute;
	margin-left: 20vw;
	margin-top: 100vh;
	//transition: transform .2s;
	//opacity:1;
  	//filter:alpha(opacity=100%); 

}

//.photo1couleur{
	width: 20vw;
	top: 0;
	position: absolute;
	margin-left: 20vw;
	margin-top: 100vh;
	//transition: transform .2s;
	//opacity:1;
  	//filter:alpha(opacity=100%); 

}

.photo2{
	height :20vw;
	top: 0;
	position: absolute;
	margin-left: 50vw;
	margin-top: 150vh;
	
	}
	
.photo3{
	width: 25vw;
	top: 0;
	position: absolute;
	margin-left: 20vw;
	margin-top: 200vh;
	}
	
//.photo4{
	width: 25vw;
	top: 0;
	position: absolute;
	margin-left: 60vw;
	margin-top: 300vh;
	}

.photo5{
	width: 25vw;
	top: 0;
	position: absolute;
	margin-left: 10vw;
	margin-top: 360vh;
	}

	
.background{
	//transform-style: preserve-3d;
	z-index: -1;
	transform: translateZ(-10px) scale(2);
	//margin-top: 12vh;
	
}

.textefond{
	margin-top: 0%;
	width: 100%;
	font-family: "Helvetica";
	color: black;
	//background-color: blue;
	font-size: 22vh;
	line-height: 100%;
	text-transform: uppercase;
	//z-index:0;
	position: absolute;
	padding:0%;
	text-align: center;
	//display:flex;
	}
	
//.popup{
	margin-top: 10vh;
	background-color: black;
	color: white;
	font-size: 30px;
	height: 200px;
	text-align: center;
	//z-index: 2;
	z-index: -1;
	transform: translateZ(-10px) scale(2);
	}
	
p{
	margin-top:0%;
}

.photo1cl{
	width: 200px;
	top: 0;
	position: absolute;
	margin-left: 20vw;
	margin-top: 100vh;
	display: flex;
	transition: transform 2s;
	//cursor: pointer;
}

.photo1cl:hover{
	transform: scale(2);
		transition: transform 2s;
}
 
.photo1static {
  position:absolute;
  background: white;
  width: 20vw;
}

.photo1static:hover {
  opacity:0;
  //z-index: 11;
  }

.photo1active{
	width: 20vw;
}

	

.bigpants{
	width: 25vw;
	top: 0;
	position: absolute;
	margin-left: 60vw;
	margin-top: 300vh;
	}

.bigpants:hover + .bigpantssky{
	display: block;
}
	
	
.une{
	display: none;
	height: 25vw;
	margin-top: 350vh;
	margin-left: 50vw;
	transform: translateY (0);
}


.deux{
	display: none;
	height: 25vw;
	margin-top: 360vh;
	margin-left: 50vw;
}

.trois{
	display: none;
	height: 25vw;
	margin-top: 370vh;
	margin-left: 50vw;
}

.photo5{
	
}




@media only screen and (max-width: 414px) {
  body {
    background-color: lightblue;
    
    .wrapper{
	height: 100vh;
	overflow-y: auto;
	overflow-x: hidden;
	perspective: 10px;
	margin-bottom: 0%;
	//margin-top: 12vh;
	}
	
	.background{
	//transform-style: preserve-3d;
	z-index: -1;
	transform: translateZ(-10px) scale(2);
	//margin-top: 12vh;
	width: 100vw;
	
}

.textefond{
	margin-top: 0%;
	width: 100vw;
	font-family: "Montserrat";
	color: black;
	//background-color: blue;
	font-size: 12vh;
	line-height: 100%;
	text-transform: uppercase;
	//z-index:0;
	position: absolute;
	padding:0%;
	text-align: center;
	//display:flex;
	}

  }
}


.pupop{
	color: white;
	background-color: black;
	padding-top: 5vh;
	padding-bottom: 5vh;
	padding-left: 5vh;	
}