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

body {
    background-color: white;
    padding: 0 ;
    margin: 0;
    margin-bottom:8%;
    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-transform: 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;
  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: 100%;
overflow:hidden;
}

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

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

/*galerie photos*/
/*img galerie 1*/
.galerie1-photos{
  width:100vw;
  height:80vh;
  display:flex;
  margin-top: 10vh;
}
.galerie1-photos img{
  width:100%;
}
.galerie1-pimg1{
flex:1;
height: 100%;
overflow:hidden;
  }

.galerie1-pimg2{
flex:1;
height: 100%;
overflow:hidden;
}
.galerie1-pimg3{
flex:1;
height: 100%;
overflow:hidden;
}

/*img galerie 2*/
.galerie2-photos{
  width:100vw;
  height:90vh;
  display:flex;
}
.galerie2-photos img{
  width:100%;
}
.galerie2-pimg1{
flex:1;
height: 100%;
overflow:hidden;
}

.galerie2-pimg2{
flex:1;
height: 100%;
overflow:hidden;
}
.galerie2-pimg3{
flex:1;
height: 100%;
overflow:hidden;
}
/*img galerie 3*/
.galerie3-p{
  width:100vw;
  height:33vh;
  display:flex;
  margin-top: 12vh;
  overflow: hidden;
}
.galerie3-p img{
  width:100%;
  overflow: hidden;
}
.galerie3-pimg1{
flex:1;
height: 100%;
overflow:hidden;
  }

.galerie3-pimg2{
flex:1;
height: 100%;
overflow:hidden;
}
.galerie3-pimg3{
flex:1;
height: 100%;
overflow:hidden;
}

.galerie3-pimg4{
flex:1;
height: 100%;
overflow:hidden;
}

.galerie3-pimg5{
flex:1;
height: 100%;
overflow:hidden;
}

/*img galerie 4*/
.galerie4-p{
  width:100vw;
  height:40vh;
  display:flex;
  overflow: hidden;
  }

.galerie4-p img{
  width:100%;
}
.galerie4-pimg1{
flex:1;
height: 100%;
overflow:hidden;
  }

.galerie4-pimg2{
flex:1;
height: 100%;
overflow:hidden;
}

.galerie4-pimg3{
flex:1;
height: 100%;
overflow:hidden;
}

/*img galerie 5*/
.galerie5-p{
  width:100vw;
  height:50vh;
  display:flex;
  margin-top: 15vh;
}
.galerie5-p img{
  width:100%;
}
.galerie5-pimg1{
flex:1;
height: 100%;
overflow:hidden;
  }

.galerie5-pimg2{
flex:1;
height: 100%;
overflow:hidden;
}
.galerie5-pimg3{
flex:1;
height: 100%;
overflow:hidden;
}

.galerie5-pimg4{
flex:1;
height: 100%;
overflow:hidden;
}

.galerie5-pimg5{
flex:1;
height: 100%;
overflow:hidden;
}

/*img galerie 6*/
.galerie6-p{
  width:100vw;
  height:90vh;
  display:flex;
  overflow: hidden;
  margin-top: 18vh;
}
.galerie6-p img{
  width:100%;
}
.galerie6-pimg1{
flex:1;
height: 100%;
overflow:hidden;
  }

.galerie6-pimg2{
flex:1;
height: 100%;
overflow:hidden;
}

.galerie6-pimg3{
flex:1;
height: 100%;
overflow:hidden;
}

/*img galerie 7*/
.galerie7-p{
  width:100vw;
  height:85vh;
  display:flex;
  overflow: hidden;
  margin-top: 12vh;
}
.galerie7-p img{
  width:100%;
}
.galerie7-pimg1{
flex:1;
height: 100%;
overflow:hidden;
  }

.galerie7-pimg2{
flex:1;
height: 100%;
overflow:hidden;
}

.galerie7-pimg3{
flex:1;
height: 100%;
overflow:hidden;
}


/*img galerie 8*/
.galerie8-p{
  width:100vw;
  height:50vh;
  display:flex;
  overflow: hidden;
}

.galerie8-p img{
  width:100%;
}
.galerie8-pimg1{
flex:1;
height: 100%;
overflow:hidden;
  }

.galerie8-pimg2{
flex:1;
height: 100%;
overflow:hidden;
}

.galerie8-pimg3{
flex:1;
height: 100%;
overflow:hidden;
}

.galerie8-pimg4{
flex:1;
height: 100%;
overflow:hidden;
}

.galerie8-pimg5{
flex:1;
height: 100%;
overflow:hidden;
}

/*img galerie 9*/
.galerie9-p{
  width:100vw;
  height:57vh;
  display:flex;
  margin-top: 22vh;
  overflow: hidden;
}

.galerie9-p img{
  width:100%;
}
.galerie9-pimg1{
flex:1;
height: 200%;
overflow:hidden;
  }

.galerie9-pimg2{
flex:1;
height: 100%;
overflow:hidden;
}

.galerie9-pimg3{
flex:1;
height: 100%;
overflow:hidden;
}

.galerie9-pimg4{
flex:1;
height: 100%;
overflow:hidden;
}

.galerie9-pimg5{
flex:1;
height: 100%;
overflow:hidden;
}

/*img galerie 10*/
.galerie10-p{
  width:100vw;
  height:25vh;
  display:flex;
  overflow: hidden;
}

.galerie10-p img{
  width:100%;
}
.galerie10-pimg1{
flex:1;
height: 100%;
overflow:hidden;

  }

.galerie10-pimg2{
flex:1;
height: 100%;
overflow:hidden;
}

.galerie10-pimg3{
flex:1;
height: 100%;
overflow:hidden;
}

.galerie10-pimg4{
flex:1;
height: 100%;
overflow:hidden;
}

.galerie10-pimg5{
flex:1;
height: 100%;
overflow:hidden;
}

/*img galerie 11*/
.galerie11-p{
  width:100vw;
  height:57vh;
  display:flex;
  overflow: hidden;
}

.galerie11-p img{
  width:100%;
}
.galerie11-pimg1{
flex:1;
height: 200%;
overflow:hidden;
  }

.galerie11-pimg2{
flex:1;
height: 100%;
overflow:hidden;
}

.galerie11-pimg3{
flex:1;
height: 100%;
overflow:hidden;
}

.galerie11-pimg4{
flex:1;
height: 100%;
overflow:hidden;
}

.galerie11-pimg5{
flex:1;
height: 100%;
overflow:hidden;
}

/*img galerie 12*/
.galerie12-p{
  width:100vw;
  height:57vh;
  display:flex;
  overflow: hidden;
}

.galerie12-p img{
  width:100%;
}
.galerie12-pimg1{
flex:1;
height: 200%;
overflow:hidden;
  }

.galerie12-pimg2{
flex:1;
height: 100%;
overflow:hidden;
}

.galerie12-pimg3{
flex:1;
height: 100%;
overflow:hidden;
}

.galerie12-pimg4{
flex:1;
height: 100%;
overflow:hidden;
}

.galerie12-pimg5{
flex:1;
height: 100%;
overflow:hidden;
}
/* fin galerie photos*/

/*img galerie 3*/
.galerie3{
  width:100vw;
  height:50vh;
  display:flex;
  margin-top: 58vh;
  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;
}

/*img galerie 4*/
.galerie4{
  width:100vw;
  height:55vh;
  display:flex;
  overflow: hidden;
}
.galerie4 img{
  width:100%;
}
.galerie4img1{
flex:1;
height: 100%;
overflow:hidden;
  }

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

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

/*img galerie 1.2*/
.galerie1-2{
  width:100vw;
  height:35vh;
  display:flex;
  margin-top: 15vh;
s}
.galerie1-2 img{
  width:100%;
  }

.galerie1-2img1{
flex:1;
height: 100%;
overflow:hidden;
  }

.galerie1-2img2{
flex:1;
height: 100%;
overflow:hidden;
}
.galerie1-2img3{
flex:1;
height: 110%;
overflow:hidden;
}

.galerie1-2img4{
flex:1;
height: 110%;
overflow:hidden;
}

.galerie1-2img5{
flex:1;
height: 110%;
overflow:hidden;
}

/*img galerie 5*/
.galerie5{
  width:100vw;
  height:48vh;
  display:flex;
  margin-top: 31vh;
}
.galerie5 img{
  width:100%;
}
.galerie5img1{
flex:1;
height: 100%;
overflow:hidden;
  }

.galerie5img2{
flex:1;
height: 100%;
overflow:hidden;
}
.galerie5img3{
flex:1;
height: 100%;
overflow:hidden;
}

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

.galerie5img5{
flex:1;
height: 100%;
overflow:hidden;
}
/*img galerie 5-vid*/
.galerie5-vid{
  width:100vw;
  height:25vh;
  display:flex;
  margin-top: 38vh;

}
.galerie5-vid img{
  width:100%;
}
.galerie5-vidimg1{
flex:1;
height: 100%;
overflow:hidden;
  }

.galerie5-vidimg2{
flex:1;
height: 100%;
overflow:hidden;
}
.galerie5-vidimg3{
flex:1;
height: 100%;
overflow:hidden;
}

.galerie5-vidimg4{
flex:1;
height: 100%;
overflow:hidden;
}

.galerie5-vidimg5{
flex:1;
height: 100%;
overflow:hidden;
}

/*img galerie 6*/
.galerie6{
  width:100vw;
  height:55vh;
  display:flex;
  overflow: hidden;
  margin-top: 60vh;
}
.galerie6 img{
  width:100%;
}
.galerie6img1{
flex:1;
height: 100%;
overflow:hidden;
  }

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

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

/*img galerie 6-vid*/
.galerie6-vid{
  width:100vw;
  height:52vh;
  display:flex;
  overflow: hidden;

}
.galerie6-vid img{
  width:100%;
}
.galerie6-vidimg1{
flex:1;
height: 100%;
overflow:hidden;
  }

.galerie6-vidimg2{
flex:1;
height: 100%;
overflow:hidden;
}

.galerie6-vidimg3{
flex:1;
height: 100%;
overflow:hidden;
}


/*textes projets*/
.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 : 48% ;
  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 : 53% ;
  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: 18%;
}

.titreprojet2-p{
  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 : 230% ;
  left: 18%;
}


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


.titreprojet2-vid{
  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 : 134% ;
  left: 18%;

}


.typeprojet2-vid{
  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 :138% ;
  left: 20%;
}

.titreprojet3{
  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 : 322% ;
  left: 60%;

}
.typeprojet3{
  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 : 327% ;
  left: 65%;
}

.titreprojet3-vid{
  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 : 219% ;
  left: 60%;

}
.typeprojet3-vid{
  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 : 224% ;
  left: 65%;
}

.titreprojet4{
  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 : 438% ;
  left: 18%;
}

.titreprojet4-p{
  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 : 387% ;
  left: 18%;
}

.titreprojet5-p{
  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 : 570% ;
  left: 65%;
}

.titreprojet6-p{
  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 : 725% ;
  left: 65%;
}

.typeprojet4{
  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 :442% ;
  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%;
}

.cartel1-vid{
  max-height: 68%;
  max-width: 28%;
  padding : 15px;
  background-color: white;
  border: 4px solid #9F621C;
  z-index: 10;
  position: absolute;
  top : 80% ;
  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%;
}

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

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

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

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


.cartelabout{

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

}

.cartel-cv{
  max-height: 68%;
  max-width: 28%;
  padding : 12px;
  background-color: white;
  border: 2px solid #9F621C;
  z-index: 10;
  position: absolute;
  top : 50% ;
  right: 5%;
  font-size: 14px;
  color:#9F621C;
  font-family: DM sans;
}

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

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

.nomabout {
  max-width: 50%;
  max-height: 50;
  color: #2E7146;
  font-family: Solide Mirage Mono;
  font-size:250%;
  z-index: 11 ;
  position : absolute;
  top: 12%;
  bottom: 50%;
  left: 42%;
  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 ;
  transition-duration: 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;
}

.contact:hover{
  font-size:105%;
  font-family: DM Sans;
  color: #9F621C;
  background-color: white;
  border: 3px solid #9F621C;
  transition-duration: 0.2s;
  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;
}

.about:hover{
  font-size:105%;
  font-family: DM Sans;
  color: white;
  background-color: #9F621C;
  transition-duration: 0.2s;
  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-width: 20%;
  padding : 1%;
  background-color: #9F621e;
  border: 2px solid #9F621C;
  font-size: 110%;
  color:white;
  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%
}

.imgmoi1:hover{
  transform: rotate(-0.01turn);
  transition-duration: 0.5s;
}

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

.imgmoi2:hover{
  transform: rotate(0.01turn);
  transition-duration: 0.3s;
}

.imgmoi2 img{
width: 60%;
}



.stage{
  width:10%
  font-size: 98%;
  color:#2E7146;
  font-family: DM sans,bold;
    position :relative;
  margin-left: 4%;
  margin-top: 9%;
  z-index: 10;
  transform: rotate(-0.01turn);
  }

.footer{
  width: 30%;
  margin-top: 60vh;
  margin-left: 10%;
  position: static;
  margin-bottom: 2%;
  font-family: DM sans;
  text-align: left;
  font-size: 68%;
  color:#9F621C;
}

.footerabout{
  width: 30%;
  margin-top: 90vh;
  margin-left: 10%;
  position: static;
  margin-bottom: 2%;
  font-family: DM sans;
  text-align: left;
  font-size: 68%;
  color:#9F621C;
}

.contenu{
}
.smartphone{
  display: none;
}
  @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){
    body{
    }
    .contenu{
    display: none;
   }
   .smartphone{
     display: block;

   }
  }