a{
  text-decoration: none;
  color:inherit;
}

body {
    background-color: white;
    padding: 0 ;
    overflow-x: hidden;
  }

/*homepage*/
.showreel{
  max-width: 100%;
  max-height:100%;
  z-index: 2;
  background-size: cover;
}


.etiquettes {
  font-size:28px;
  min-height: 20%;
  color : #2E7146;
  text-align: center;
  font-weight:  bold;
  font-family: DM Sans;
  text: uppercase;
  }

.posinterface{
    max-width: 15% ;
    z-index: 9 ;
    position : absolute;
    bottom: 850px;
    left:350px;
    background-color: white;
    padding: 8px;
    border: 5px;
    transform: rotate(0.02turn);
    border: 4px solid #2E7146;
  }

    .posinterface:hover{
      max-width: 15% ;
      z-index: 9 ;
      position : absolute;
      bottom: 850px;
      left:350px;
      background-color: white;
      padding: 8px;
      border: 5px;
      transform: rotate(0.00turn);
      transition-duration: 1s;
      border: 4px solid #2E7146;
}

.posphotos{
  max-width: 10% ;
  z-index: 10 ;
  position : absolute;
  bottom: 550px;
  right:550px;
  left: auto;
  background-color: white;
  padding: 8px;
  border: 5px;
  transform: rotate(-0.02turn);
  border: 4px solid #2E7146;
}

  .posphotos:hover{
    max-width: 10% ;
    z-index: 10 ;
    position : absolute;
    bottom: 550px;
    right:550px;
    left: auto;
    background-color: white;
    padding: 8px;
    border: 5px;
    transform: rotate(-0.00turn);
    transition-duration: 1s;
    border: 4px solid #2E7146;
  }

.posvideos{
  max-width: 10% ;
  z-index: 10 ;
  position : absolute;
  bottom: 350px;
  left:250px;
  background-color: white;
  padding: 8px;
  border: 5px;
  transform: rotate(0.04turn);
  border: 4px solid #2E7146;
}

    .posvideos:hover{
      max-width: 10% ;
      z-index: 10 ;
      position : absolute;
      bottom: 350px;
      left:250px;
      background-color: white;
      padding: 8px;
      border: 5px;
      transform: rotate(0.00turn);
      transition-duration: 1s;
      border: 4px solid #2E7146;
}

.posidentites{
  max-width: 10% ;
  z-index: 10 ;
  position : absolute;
  bottom: 150px;
  right:250px;
  background-color: white;
  padding: 8px;
  border: 5px;
  transform: rotate(-0.03turn);
  border: 4px solid #2E7146;
}

    .posidentites:hover{
      max-width: 10% ;
      z-index: 10 ;
      position : absolute;
      bottom: 150px;
      right:250px;
      background-color: white;
      padding: 8px;
      border: 5px;
      transform: rotate(-0.00turn);
      transition-duration: 1s;
      border: 4px solid #2E7146;
}

/*MENUTOPLEFT*/
.menu {
	position: sticky;
	width: 20vw;
	height: 20vh;
	top: 10vh;
	margin-top: 12%;
	left: 8%;
	z-index: 50;
}

.interface-active {
  color : #2E7146;
  font-size: 28px;
    text-align: center;
    font-weight:  bold;
    font-family: DM Sans;
    text: uppercase;
    position: absolute;
    left : 164px;
    bottom :98%;
    border: 4px solid #2E7146;
    padding : 4px;
    transform: rotate(-0.03turn);
    background-color: white;
    z-index: 10;
}



.video {
	position: relative;
	background-color: lightgreen;
	width: 40%;
	height: 25%;
	margin-left: 5%;
  font-size:28px;
  color : white;
  text-align: center;
  font-weight:  bold;
  font-family: DM Sans;
  text-transform: uppercase;
  background-color:#2E7146;
  padding : 4px;
}

.video:hover {
	transform: rotate(-0.03turn);
	z-index: 99;
}

.identité {
	position: relative;
	background-color: lightblue;
	width: 60%;
	height: 25%;
	margin-left: 12%;
  font-size:28px;
  color : white;
  text-align: center;
  font-weight:  bold;
  font-family: DM Sans;
  text-transform: uppercase;
  background-color:#2E7146;
  padding : 4px;

	}

.identité:hover {
	transform: rotate(-0.03turn);
	z-index: 99;
}

.photo {
	position: relative;
	background-color: lightgreen;
	width: 40%;
	height: 25%;
	margin-left: 0%;
 font-size:28px;
  color : white;
  text-align: center;
  font-weight:  bold;
  font-family: DM Sans;
  text-transform: uppercase;
  background-color:#2E7146;
  padding : 8px;

}

.photo:hover {
	transform: rotate(-0.03turn);
	z-index: 99;
}


/*img galerie 1*/
.galerie1{
  width:100vw;
  height:30vh;
  background-color: pink;
  display:flex;
  margin-top: 10vh;
}
.galerie1 img{
  width:100%;
}
.galerie1img1{
flex:1;
height: 100%;
overflow:hidden;
  }

.galerie1img2{
flex:1;
height: 100%;
overflow:hidden;
}
.galerie1img3{
flex:1;
height: 110%;
overflow:hidden;
}

/*img galerie 2*/
.galerie2{
  width:100vw;
  height:45vh;
  display:flex;
}
.galerie2 img{
  width:110%;
}
.galerie2img1{
flex:1;
height: 100%;
overflow:hidden;
}

.galerie2img2{
flex:1;
height: 100%;
overflow:hidden;
}
.galerie2img3{
flex:1;
height: 100%;
overflow:hidden;
}

/*img galerie 3*/
.galerie3{
  width:100vw;
  height:50vh;
  background-color: pink;
  display:flex;
  margin-top: 68vh;
  overflow: hidden;
}
.galerie3 img{
  width:100%;
}
.galerie3img1{
flex:1;
height: 100%;
overflow:hidden;
  }

.galerie3img2{
flex:1;
height: 100%;
overflow:hidden;
}
.galerie3img3{
flex:1;
height: 110%;
overflow:hidden;
}

.galerie3img4{
flex:1;
height: 110%;
overflow:hidden;
}

.galerie3img5{
flex:1;
height: 110%;
overflow:hidden;
}

.titreprojet{
  max-height: 15%;
  max-width: 15%;
  padding : 4px;
  background-color: white;
  border: 2px solid #9F621C;
  font-size: 24px;
  color:#9F621C;
  text-align:center;
  font-family: DM sans ;
  font-style: italic;
  transform: rotate(0.02turn);
  z-index: 10;
  position: absolute;
  top : 52% ;
  left: 60%;

}

.typeprojet{
  max-height: 12%;
  max-width: 16%;
  padding : 3px;
  background-color: white;
  border: 2px solid #9F621C;
  font-size: 20px;
  color:#9F621C;
  text-align:center;
  font-family: DM sans, italic;
  transform: rotate(0.02turn);
  z-index: 10;
  position: absolute;
  top : 57% ;
  left: 65%;
}

.titreprojet2{
  max-height: 15%;
  max-width: 15%;
  padding : 4px;
  background-color: white;
  border: 2px solid #9F621C;
  font-size: 24px;
  color:#9F621C;
  text-align:center;
  font-family: DM sans ;
  font-style: italic;
  transform: rotate(0.02turn);
  z-index: 10;
  position: absolute;
  top : 192% ;
  left: 20%;

}

.typeprojet2{
  max-height: 12%;
  max-width: 16%;
  padding : 3px;
  background-color: white;
  border: 2px solid #9F621C;
  font-size: 20px;
  color:#9F621C;
  text-align:center;
  font-family: DM sans, italic;
  transform: rotate(0.02turn);
  z-index: 10;
  position: absolute;
  top :196% ;
  left: 20%;
}


.cartel{
  max-height: 68%;
  max-width: 28%;
  padding : 15px;
  background-color: white;
  border: 4px solid #9F621C;
  z-index: 10;
  position: absolute;
  top : 110% ;
  left: 10%;
}

.cartel2{
  max-height: 68%;
  max-width: 28%;
  padding : 15px;
  background-color: white;
  border: 4px solid #9F621C;
  z-index: 10;
  position: absolute;
  top : 260% ;
  right: 10%;
}

.cartelabout{
  max-height: 68%;
  max-width: 28%;
  padding : 15px;
  background-color: white;
  border: 4px solid #9F621C;
  z-index: 10;
  position: absolute;
  top : 30% ;
  left: 10%;

}

.captionfr{
  font-size: 18px;
  color:#9F621C;
  font-family: DM sans;
  z-index: 10;
}


.captioneng{
    font-size: 18px;
  color:#9F621C;
  font-family: DM sans, bold;
  font-weight: Bold;
  z-index: 10;

}

.nom {
  max-width: 50%;
  max-height: 50;
  color: white;
  font-family: Solide Mirage Mono;
  font-size:250%;
  z-index: 11 ;
  position : absolute;
  top: 50%;
  bottom: 50%;
  left: 40%;
  right:50;
  text-align: center;
  box-shadow: 8px 8px black;
}

.nom:hover{
  max-width: 50%;
  max-height: 50;
  color: #9F621C;
  font-family: Solide Mirage Mono;
  font-size:250%;
  z-index: 11 ;
  position : absolute;
  top: 50%;
  bottom: 50%;
  left: 40%;
  right:50;
  text-align: center;
  transition-delay: 0.5s;
  transition-duration: 1s;
  box-shadow: 5px 12px 28px 12px rgba(0,0,0,0.31);
}

.nomabout {
  max-width: 50%;
  max-height: 50;
  color: #2E7146;
  font-family: Solide Mirage Mono;
  font-size:250%;
  z-index: 11 ;
  position : absolute;
  top: 10%;
  bottom: 50%;
  left: 40%;
  right:50;
  text-align: center;
  }

.nomabout:hover{
  max-width: 50%;
  max-height: 50;
  color: #9F621C;
  font-family: Solide Mirage Mono;
  font-size:250%;
  z-index: 11 ;
  position : absolute;
  top: 10%;
  bottom: 50%;
  left: 40%;
  right:50;
  text-align: center;
  transition-delay: 0.5s;

}

.contact{
  font-size:105%;
  font-family: DM Sans;
  color: white;
  background-color: #9F621C;
  padding: 18px;
  border-radius: 50%;
  max-width: 8%;
  max-height: 15%;
  text-align: center;
  position : absolute;
  top:25px;
  right:25px;
  z-index: 10;
  border: 4px solid white;
}


.about{
  font-size:105%;
  color: #9F621C;
  font-family: DM Sans;
  color: #9F621C;
  background-color: white;
  padding: 18px;
  border-radius: 50%;
  max-width: 8%;
  max-height: 15%;
  text-align: center;
  position : absolute;
  top:25px;
  right:128px;
  z-index: 10;
  border: 3px solid #9F621C;
}

.parcours{
  max-height: 45%;
  max-width: 20%;
  padding : 3px;
  background-color: #9F621e;
  border: 2px solid #9F621C;
  font-size: 18px;
  color:white;
  text-align:center;
  font-family: DM sans, italic;
  transform: rotate(0.02turn);
  z-index: 10;
  position: absolute;
  top : 54% ;
  left: 70%;
}

.imgmoi1{
  height: 50%;
  width:50%;
  position: absolute;
  left: 35%;
  top:10%;
  }
.imgmoi1 img{
  width:60%
}
.imgmoi2{
  height: 50%;
  width:50%;
  position: absolute;
  top : 15%;
  left: 65%;
  transform: rotate(-0.02turn);
}

.imgmoi2 img{
width: 60%;
}

.contenu{
  background-color: green;
display: none;
opacity: 0; 
}
  @font-face{
  	font-family:'Solide Mirage';
  	src: url(‘SolideMirage-Mono.otf’) format(‘otf’);
    font-family:'DM Sans';
    src: url(DMSans-Bold.ttf)format('ttf')
    src: url(DMSans-Medium.ttf)format('ttf')
    src: url(DMSans-Regular.ttf)format('ttf')
  }
  @media (max-width: 750px){
    .contenu{
      background-color: green;
    display: none;
   }
  }