body {
  background-color: #ffffff;
  font-family: 'Catamaran', sans-serif;


}


.copyright{
  position: absolute;
  top: 320%;
  left:5%;
  right:5%;
  text-align: center;
  height:70px;
  color:#ededed;
  font-size: 12.5px;

}
.langue{
  position: absolute;
  font-size: 20px;
  color:#582439;
  top:0%;
  left:95%;
  display:none;
}

/*correction du background*/
.bg1{
  position: fixed;
  width: 200%;
  height:200%;
  top:-30%;
  left:-10%;
  z-index:0;
}

.bg2{display: none;}

.bg3{display:none}

.rectbas{ /*pagedeprojet*/
  position: fixed;
  height:100px;
  width: 100%;
  top:88%;
  left:0%;
  background: linear-gradient(0deg, rgba(17,51,66,1) 4%, rgba(17,51,66,1) 85%, rgba(17,51,66,0) 100%);
  z-index: 2;
}

.rectbas1{ /*paged'accueil*/
  position: fixed;
  height:100px;
  width: 100%;
  top:97%;
  left:0%;
  background-color:#113342;
  z-index: 1;
}

/*texte*/
a{
  text-decoration: none;
  font-size: 18px;
  font-weight: 400;
  color: #999;
}

h4 {
  font-size: 12px;
  color: #fff;
  text-align: center;
  margin-top: -5px;
}

h5 {
  display: none;
}
/*
.langue{
  display: none;
}
*/
/*menu de droite sur mobile*/
.menu {
  background-color: rgba(255,255,255,30);
  opacity: 75%;
  padding: 1rem;
  position: fixed;
  width: 150px;
  height: 100%;
  top: 0px; right: 0px;
  text-align: center;
  font-weight: 600;
  z-index: 30;
}

.menu-hidden {
  display:none;
}

.menu ul {
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
}

.a1{
  text-decoration: none;
  color: #113342;
  font-size: 30px;
}

.menuapropos {
  position: fixed;
  color: black;
  top: 30%;
  text-decoration: none;
  margin-left: auto;
  margin-right: auto;
}

.menumesprojets {
  position: fixed;
  color: black;
  top: 50%;
  text-decoration: none;
  margin-left: auto;
  margin-right: auto;
}

.menucontact {
  position: fixed;
  color: black;
  top: 70%;
  text-decoration: none;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/*burger*/
.burger {
  width: 40px;
  position: fixed;
  top: 20px; right: 20px;
  z-index: 10;
}

/*introduction*/
.introduction{
  grid-column: 1/8;
  grid-row: row 0;
  color: #582439;
  font-size: 25px;
  margin-top: 0px;
  display: none;
}

.introduction1{
  position: absolute;
  left: 20%;
  top:1%;
  color: #582439;
  font-size: 25px;
  margin-top: 15px;
  margin-left: 10px;
}

.presentation {
  grid-column: 1/6;
  font-family: 'Catamaran', sans-serif;
  align-self: center;
  font-size: 13px;
  margin: 10px;
  text-align: center ;
  display: none;
}

.presentation1{
  position: absolute;
  margin-left: 10%;
  margin-right: 10%;
  font-size: 16px;
  font-weight: 400;
  text-align: justify;
  color: #dddddd;
  top: 60%;
}

.presentation2{
  position: absolute;
  margin-left: 10%;
  margin-right: 10%;
  font-size: 16px;
  font-weight: 400;
  text-align: justify;
  color: #dddddd;
  top: 84%;
}

  .ecole1{
    text-decoration: none;
    color: #999;
    font-size: 16px;


  }

  .plus{
    position: absolute;
    width:0px;
    top:82%;
    left: 82%;
  }
  .photomoi1 {
    position: absolute;
    left: 50%;
    margin-top: -5px;
    top:12%;
    height: 50%;
    border-radius: 10px;
    transform: translate(-50%,0);
  }

  .photomoi{
    display: none;
  }

  .rectpresentation{
    grid-column :1/8;
    grid-row: row 1;
    background-color: #fff;
    border-radius: 10px;
    opacity: 75%;
    margin-left: 10px;
    margin-right: 10px;
    margin-top:-100px;
    margin-bottom:50px;
    height: 200px;
    display: none;

  }
  
  .mesprojets{
    grid-column: 1/8;
    grid-row: row 4;
    color: #fff;
    font-size: 23px;
    margin-top: 30px;
    text-align: center;
    margin-left: 0px;
    display: none;
  }
  
  .mesprojets1 {
    grid-column: 4;
    grid-row: row 4;
    width: 25px;
    margin-top: 80px;
    text-align: center;
    margin-left: 10px;
    display: none;

  }

  .mesprojets11{
    position: absolute;
    left: 46%;
    top:92%;
    width: 25px;
  }

/*projets sur page d'accueil*/
.grille {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr  1fr 1fr 1fr 1fr 1fr 1fr  ;
  color: #444;
  grid-auto-rows: 1fr;
}

/*photo projet sur page d'accueil*/ 
.filtre{
  border-radius: 10px;
  width:100%
}

.projet1 {
  grid-column: 1/4;
  grid-row: 6/8;
  margin-left: 10px;
  margin-top: 50px;
  display: none;
  z-index: 10;
}
.projet11{
  position: absolute;
  left: 5%;
  top:100%;
  width:150px
}

.projet2 {
  grid-column: 5/8;
  grid-row: 7/9;
  margin-right: 10px;
  margin-top: 50px;
  display: none;
  z-index: 2;
}
.projet21{
  position: absolute;
  right: 5%;
  top:125%;
  width:150px
}

.projet3 {
  grid-column: 1/4;
  grid-row: 8/10;
  margin-left: 10px;
  margin-top: 50px;
  display: none;
  z-index: 2;

}
.projet31{
  position: absolute;
  left: 5%;
  top:150%;
  width:150px
}

.projet4 {
  grid-column: 5/8;
  grid-row: 9/11;
  margin-right: 10px;
  margin-top: 50px;
  display: none;
  z-index: 2;
}
.projet41{
    position: absolute;
    right: 5%;
    top:175%;
    width:150px
}

.projet5 {
  grid-column: 1/4;
  grid-row: 10/12;
  margin-left: 10px;
  margin-top: 50px;
  display: none;
  z-index: 2;
}
.projet51 {
  position: absolute;
  left: 5%;
  top:200%;
  width:150px
}

.projet6 {
  grid-column: 5/8;
  grid-row: 11/13;
  margin-right: 10px;
  margin-top: 50px;
  display: none;
  z-index: 2;
}
.projet61{
  position: absolute;
  right: 5%;
  top:225%;
  width:150px
}

.projet7 {
  grid-column: 1/4;
  grid-row: 12/14;
  margin-left: 10px;
  margin-top: 50px;
  display: none;
  z-index: 2;
}
.projet71{
  position: absolute;
  left: 5%;
  top:250%;
  width:150px
}

.projet8 {
  grid-column: 5/8;
  grid-row: 13/15;
  margin-right: 10px;
  margin-top: 50px;
  display: none;
  z-index: 2;
}
.projet81{
  position: absolute;
  right: 5%;
  top:275%;
  width:150px
}


.blocprojet {
  text-align: center;
  align-items: center;
  align-content: center ;
  z-index: 1;
}
/*contact*/

.rectbas2{
  position: absolute;
  height:10px;
  width: 100%;
  top:320%;
  left:0%;
  background: linear-gradient(0deg, rgba(17,51,66,1) 4%, rgba(17,51,66,1) 85%, rgba(17,51,66,0) 100%);
  z-index: 2;

}

.rectbas3{
  position: absolute;
  height:10px;
  width: 100%;
  top:200%;
  left:0%;
  background: linear-gradient(0deg, rgba(17,51,66,1) 4%, rgba(17,51,66,1) 85%, rgba(17,51,66,0) 100%);
  z-index: 0;

}

.insta {
  width : 40px;
  position: absolute;
  top:310%;
  left:50%;
  transform: translate(-50%,-50%);
  margin-bottom: 0px;
  z-index: 15;
}

.linkedin {
  width : 40px;
  position: absolute;
  top:310%;
  left:70%;
  transform: translate(-50%,-50%);
  margin-bottom: 0px;
  z-index: 3;
}

.arobase {
  width : 40px; 
  position: absolute;
  top:310%;
  left:30%;
  transform: translate(-50%,-50%);
  margin-bottom: 0px;
  z-index: 3;
}

.cv{
  width : 40px; 
  position: absolute;
  top:86%;
  left:83%;
  transform: translate(-50%,-50%);
  margin-bottom: 20px;
  width:0px;
  z-index: 3;
}

.cv1{
  width : 40px; 
  position: absolute;
  top:87%;
  left:83%;
  transform: translate(-50%,-50%);
  margin-bottom: 20px;
}


.cc1{
  display: none;
}

/*logo*/
.cmoi{
  position: fixed;
  width:40px;
  top:3%;
  left:3%;
  display:none;
}

.logogo{
  width:45px;
  position: fixed;
  top:3%;
  left:2%;
  z-index: 5;
}

.logogo1{
  display: none;
}

.fin {
  display: none;
}

.sd{
  display: none;
}
/*page de projet*/


.outils{
  display: none;
}

.date{
  display: none;
}

.realisation {
  display: none;
}

.nomduprojet{
  grid-column: 1/8;
  grid-row: row 0;
  text-align: center;
  font-size: 20px;
  margin-top:15px;
  margin-left: 13%;
  margin-right: 13%;
  transform: none;
  z-index: 3;

}


.pprojet8{ /*photoprojetbase*/
  position: absolute;
  width:150px;
  height: 150px;
  top:33%;
  left:50%;
  align-self: center;
  align-content: center;
  margin: 0;
  border-radius: 10px;
  z-index: 10;
  transform: translate(-50%,-50%);
}

.pprojet9{ /*photoprécédente*/
  position: absolute;
  width:80px;
  height: 80px;
  top:36%;
  left:20%;
  margin: 0;
  align-content: center;
  border-radius: 10px;
  opacity: 60%;
  z-index: 3;
  transform: translate(-50%,-50%);
}
.pp9{
  opacity: 0%;
}

.pp10{ /*photosuivante*/
  position: absolute;
  width:80px;
  height: 80px;
  top:36%;
  left:80%;
  margin: 0;
  align-content: center;
  border-radius: 10px;
  opacity: 60%;
  opacity: 0%;
  z-index: 3;
  transform: translate(-50%,-50%);


}

.pprojet10{ /*photosuivante*/
  position: absolute;
  width:80px;
  height: 80px;
  top:36%;
  left:80%;
  margin: 0;
  align-content: center;
  border-radius: 10px;
  opacity: 60%;
  z-index: 3;
  transform: translate(-50%,-50%);


}

.pprojet81{
  display: none;
}

.img-hidden{
  display: none;
}


.img1 {
  position: fixed;
  width: 300px;
  height: 300px;
  top: 25%;
  left: 10%;
  right:20%;
  bottom: 75%;
    align-self: center;
  align-content: center;
  border-radius: 10px;
  z-index: 12;
  /*box-shadow: 3px 3px 3px rgba(100, 100,100 ,10);*/
}

/*explication projet ordi*/
.rectprojet{ 
  background-color: white;
  grid-column: 2/5;
  grid-row: 2/3;
  margin-top: -100px;
  border-radius: 10px;
  opacity : 70%;
  box-shadow: 8px 8px 8px rgba(0, 0,0 ,50);
  display: none;
}

.rectprojet:hover{
  opacity : 95%;
}

.fgauche{
  grid-row: 2/3;
  grid-column: 5;
  width:30px;
  margin-top: -100px;
  margin-left: 20px;
  align-self: center;
  display: none;
}

.fdroite{
  grid-row: 2/3;
  grid-column: 7;
  width:30px;
  margin-left: 60px;
  margin-top: -100px;
  align-self: center;
  display: none;
}

.photoprecedent {
  position: fixed;
  opacity: 0%;
  top: 84%;
  left:14%;
  width:100px;
  height:100px;
  display: none;
  z-index: 10;
}

.projetprecedent{
  position: fixed;
  top:90%;
  left: 30%;
  text-align: start;
  display: none;
  color: #fff;
}

.projetprecedent:hover ~ .photoprecedent{
  transition: 1s;
  opacity:100%
}

.fg:hover ~ .photoprecedent {
  transition: 1s;
  opacity:100%
}

.photopsuivant{
  position: fixed;
  opacity: 0%;
  top: 84%;
  left:80%;
  width:100px;
  height:100px;
  display: none;
}

.projetsuivant{
  position: fixed;
  top:90%;
  left: 64%;
  text-align: end;
  display:none;
  color: #fff;
}

.projetsuivant:hover ~ .photopsuivant{
  transition: 1s;
  opacity:100%
}

.fd:hover ~ .photopsuivant {
  transition: 1s;
  opacity:100%
}

/*explication projet*/
.grille1 { 
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr  1fr 1fr 1fr 1fr 1fr 1fr  ;
  color: #444;
  grid-auto-rows: 1fr;
  z-index: 10;
  margin-bottom: 200px;

}
.blanc{
  position: absolute;
  background-color:none;
  top:50%;
  left: 50%;
  width: 80%;
  bottom:200px;
  margin:0;
  margin-bottom: 400px;
  z-index: 10;
  transform: translate(-50%,0);
  z-index: 1;
}
.presentationprojet{
  font-size: 16px;
  text-align: justify;
  color: #ddd;
  margin: 20px;
  font-weight: 400;
  z-index: 1;

}

.pp1{
  color: #999
}

.fg{
  position: fixed;
  width:25px;
  top:93%;
  left:25%;
  z-index: 3;
  transform: none;
}

.fd{
  position: fixed;
  width:25px;
  top:93%;
  left:68%;
  z-index: 3;
  transform: none;
}

.bjouer{
  text-align: center;
  background-color: #ddd;
  color: #fff;
  margin-left: 20%;
  margin-right: 20%;
  margin-top: 40px;
  margin-bottom: 40px;
  border-radius: 10px;
  z-index: 10;
}

.jouerpatatap{
  color: #113342;
  z-index: 10;
}

.img-trigger{
  opacity: 100%;
  z-index: 10;
}

.img-hidden{
  opacity: 100%;
  z-index: 12;

}

.menu-hidden{
  opacity: 100%;
  top:-300%;
  left: -300%;
  position: fixed;
  width:0px;
  z-index: 10;


}

.menu-trigger{
  opacity: 100%;
  position: fixed;
  top:-300%;
  left: -300%;
  width:0px;
  z-index: 10;




}


.close{
  width:0px
}

/*tabletteverticale*/
@media (min-width: 550px) {
  body {
    background-color: #FFFFFF;
  }

  .copyright{
    position: absolute;
    top: 660%;
    left:15%;
    right:5%;
    text-align: center;
    height:70px;
    color:#ededed;
    font-size: 16px;
  
  }

  .langue{
    position: fixed;
    font-size: 20px;
    color:#582439;
    top:0%;
    left:93%;
    display:inline;
  }

  .rectbas2{
    display:none;
  }

  .rectbas3{
    display:none;
  }
  .bg1{
    position: fixed;
    width: 200%;
    height:200%;
    top:-20%;
    left:-10%
  }

  .bg2{
    display: none;
  }
  a{
    text-decoration: none;
  }

  h3{
    font-weight: 200;
  }

  h4 {
    font-size: 25px;
    color: #aaa;
    margin-right: 0px;
    text-align: center;
    font-weight: 400;
    margin-top: 0px;
  }

  h5 {
    display: inline-block;
    width:350px;
    color: #888;
    text-align: center;
    font-weight: 400;
    font-size: 15px;
  }

  /*introduction*/
  .mesprojets{
    position: absolute;
    left:55%;
    top:86%;
    color: #fff;
    font-size: 25px;
    text-align: center;
    font-weight: 600;
    display: inline;
    margin: 0;
    transform: translate(-50%,0);
    display: none;
  }

  .mesprojets1{
    position: absolute;
    left:55%;
    top:95%;
    width:30px;
    margin: 0;
    display: inline;
    transform: translate(-50%,0);

  }

  .mesprojets11{
    display:none;
  }

  .contact1 {
    height : 100%;
    width : 80px;
    background-color: #582439;
    position: fixed;
    top: 0; left: 0;
  }

  .contact1:hover{
    transition: 2s;
    background-color: none;
  }

  .introduction1{
    display: none;
  }

  .introduction{
    position: absolute;
    left:15%;
    top:1%;
    color: #582439;
    font-size: 40px;
    margin-top: 20px;
    display: inline;
}
  .introduction:hover{
    color: #000000;
  }

  .presentation{
    font-size: 17px;
    text-align: center;
    color: #ddd;
    margin: 20px;
    display: block;
  }
  .ecole{
    text-decoration: none;
    color: #999;
    font-weight: 600;
  }

  .presentation1{
    display: none;
  }

  .presentation2{
    display: none;
  }

  .ecole1{
    display: none;
  }

  .plus{
    display: none
  }

  .photomoi{
    position: absolute;
    top:35%;
    left:55%;
    height: 420px;
    border-radius: 10px;
    display: block;
    align-self: none;
    transform: translate(-50%, -50%);

  }

.photomoi1{
  display: none;
}

  .rectpresentation{
    position: absolute;
    right:10%;
    top:71%;
    left: 55%;
    height: 20%;
    width: 80%;
    border-radius: 10px;
    opacity: 85%;
    border: 2px;
    background-color: rgba(0, 0, 0, 0);
    border-width: 20px;
    display: block;
    margin-top: 0;
    margin: 0;
    transform: translate(-50%, -50%);
  }


/*projets*/

.blocprojet{
  margin-right: 100px;
  z-index: 1;
}
  .projet1 {
    position: absolute;
    top:100%;
    left: 55%;
    transform: translate(-50%);
    display: inline;
    margin: 0;

  }

  .projet11{
    display: none;
  }

  .projet2 {
    position: absolute;
    top:170%;
    right: 45%;
    transform: translate(+50%);
    align-content: center;
    display: inline;
    margin: 0;
  }

  .projet21{
    display: none;
  }

  .projet3 {
    position: absolute;
    top:240%;
    left: 55%;
    transform: translate(-50%);
    display: inline;
    margin: 0;
  }

  .projet31 {
    display: none;
  }

  .projet4 {
    position: absolute;
    top:310%;
    right: 45%;
    transform: translate(+50%);
    align-content: center;
    display: inline;
    margin: 0;
  }

  .projet41 {
    display: none;
  }

  .projet5 {
    position: absolute;
    top:380%;
    left: 55%;
    transform: translate(-50%);
    display: inline;
    margin: 0;
  }

  .projet51 {
    display: none;
  }

  .projet6 {
    position: absolute;
    top:450%;
    right: 45%;
    transform: translate(+50%);
    align-content: center;
    display: inline;
    margin: 0;
  }

  .projet61 {
    display: none;
  }

  .projet7 {
    position: absolute;
    top:520%;
    left: 55%;
    transform: translate(-50%);
    display: inline;
    margin: 0;
  }

  .projet71 {
    display: none;
  }

  .projet8 {
    position: absolute;
    top:590%;
    right: 45%;
    transform: translate(+50%);
    align-content: center;
    display: inline;
    margin: 0;
  }

  .projet81 {
    display: none;
  }

  .filtre {
    width:400px;
    height:400px;
    border-radius: 10px; 
  }

  /*contact*/
  .contact {
    width : 40px;
    position: fixed;
    transform: translate(0,-50%);
  }

  .contact:hover {
    transform: rotate(360deg);
    transition: 2s;
  }

  .insta {
    top: 35%; left: 2%;
  }

  .linkedin {
    top: 45%; left: 2%;
  }

  .cv {
    top: 55%; left: 2%;
  }

  .cv1{
    display:none
  }
  .cc1{
    display: inline;
  }

  .arobase {
    top: 65%; left: 2%;
  }
  
  .sd{
    position: fixed;
    top:88%;
    left:0%;
    margin-left: -30px;
    font-size: 15px;
    color: #fff;
    opacity: 0%;
    display: none;
  }
  .fin {
    position: fixed;
    width:40px;
    top:90%;
    left:15px;
    display: inline;
  }

  .fin:hover ~ .sd{
    transition: 1s;
    opacity: 100%;
  }
  .logogo1{
    width:50px;
    position: fixed;
    top:4%;
    left:1.4%;
    display:inline
  }
  
  .logogo{
    display: none;
  }

/*page de projet*/

.pp1{
  font-size: 16px;
  color: #ededed;
}
.date{
  position : absolute;
  top: 45%;
  left:55%;
  display: inline;
  font-size: 16px;
  transform: translate(-50%,0);
  color: #aaa;
}

.outils{
  position : absolute;
  top: 48%;
  left:55%;
  display: inline;
  font-size: 16px;
  transform: translate(-50%,0);
  color: #aaa;

}

.realisation{
  position : absolute;
  top: 51%;
  left:55%;
  display: inline;
  font-size: 16px;
  transform: translate(-50%,0);
  color: #aaa;
  text-align: center;
}


.nomduprojet{
  position: absolute;
  font-size: 30px;
  left: 55%;
  top:8%;
  transform: translate(-50%, -50%);
  width: auto;
  margin: 0;

}

.pprojet8{ /*photoprojetbase*/
  position: absolute ;
  width:300px;
  height: 300px;
  left:55%;
  top:13%;
  align-self: center;
  align-content: center;
  margin: auto;
  border-radius: 10px;
  transform: translate(-50%,0);

  
}

.pprojet9{ /*photoprécédente*/
  position: absolute;
  width:120px;
  height: 120px;
  top:30%;
  left:25%;
  margin: auto;
  align-content: center;
  border-radius: 10px;
  opacity: 60%;
  margin-left: 5px;
  margin-top: 0px;
  transform: translate(-50%,-50%);
}
.pp9{
  opacity: 0%;
}

.pp10{ /*photosuivante*/
  position: absolute;
  width:120px;
  height: 120px;
  top:30%;
  left:80%;
  margin: auto;
  align-content: center;
  border-radius: 10px;
  opacity: 0%;
  margin-left: 5px;
  margin-top: 0px;
  transform: translate(-50%,-50%);

}

.pprojet10{ /*photosuivante*/
  position: absolute;
  width:120px;
  height: 120px;
  top:30%;
  left:80%;
  margin: auto;
  align-content: center;
  border-radius: 10px;
  opacity: 60%;
  margin-left: 5px;
  margin-top: 0px;
  transform: translate(-50%,-50%);
}

.pprojet81{
  display: none;
}

.img-trigger{
  opacity: 100%;
  z-index: 10;
}

.img-hidden{
  opacity: 100%;
  z-index: 12;

}


.img1 {
  position: fixed;
  width: 300px;
  height: 300px;
  top: 25%;
  left: 10%;
  right:20%;
  bottom: 75%;
    align-self: center;
  align-content: center;
  border-radius: 10px;
  /*box-shadow: 3px 3px 3px rgba(100, 100,100 ,10);*/
}

/*explication projet ordi*/
.rectprojet{ 
  background-color: white;
  grid-column: 2/5;
  grid-row: 2/3;
  margin-top: -100px;
  border-radius: 10px;
  opacity : 70%;
  box-shadow: 8px 8px 8px rgba(0, 0,0 ,50);
  display: none;
}

.rectprojet:hover{
  opacity : 95%;
}

.fgauche{
  grid-row: 2/3;
  grid-column: 5;
  width:30px;
  margin-top: -100px;
  margin-left: 20px;
  align-self: center;
  display: none;
}

.fdroite{
  grid-row: 2/3;
  grid-column: 7;
  width:30px;
  margin-left: 60px;
  margin-top: -100px;
  align-self: center;
  display: none;
}


.photoprecedent {
  position: fixed;
  opacity: 0%;
  top: 84%;
  left:14%;
  width:100px;
  height:100px;
  display: none;
}

.projetprecedent{
  position: fixed;
  top:90%;
  left: 30%;
  text-align: start;
  display: none;
  color: #fff;
}

.projetprecedent:hover ~ .photoprecedent{
  transition: 1s;
  opacity:100%
}

.fg:hover ~ .photoprecedent {
  transition: 1s;
  opacity:100%
}

.photopsuivant{
  position: fixed;
  opacity: 0%;
  top: 84%;
  left:80%;
  width:100px;
  height:100px;
  display: none;
}

.projetsuivant{
  position: fixed;
  top:90%;
  left: 64%;
  text-align: end;
  display:none;
  color: #fff;
}

.projetsuivant:hover ~ .photopsuivant{
  transition: 1s;
  opacity:100%
}

.fd:hover ~ .photopsuivant {
  transition: 1s;
  opacity:100%
}

/*explication projet*/
.grille1 { 
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr  1fr 1fr 1fr 1fr 1fr 1fr  ;
  color: #444;
  grid-auto-rows: 1fr;
}
.blanc{
  grid-column: 1/8;
  grid-row: 0/3;
  background-color:none;
  height: 400px;
  margin-top: -240px;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 320px;
}
.presentationprojet{
  font-size: 16px;
  text-align: justify;
  color: #ddd;
  margin: 20px;
  font-weight: 400;
}

.pp1{
  color: rgba(0, 0, 0, 0)

}

.fg{
  position: fixed;
  width:25px;
  top:93%;
  left:25%;
  z-index: 2;
}

.fd{
  position: fixed;
  width:25px;
  top:93%;
  left:68%;
  z-index: 2;
}

.bjouer{
  text-align: center;
  background-color: #ddd;
  color: #fff;
  margin-left: 20%;
  margin-right: 27%;
  margin-top: 40px;
  margin-bottom: 40px;
  border-radius: 10px;
}

.jouerpatatap{
  color: #113342
}

.img1 {
display: none;
}

.blanc{ 
  position: absolute;
  top:85%;
  left:55%;
  width:80%;
  transform: translate(-50%, 0%);
}
/*menu de droite*/
.menu-trigger{
  display: none;
}

.rectbas{
  position: fixed;
  height:100px;
  width: 100%;
  top:97%;
  left:0%;
  background-color:#113342;
  z-index: 0;
}


.rectbas1{
  position: fixed;
  height:100px;
  width: 100%;
  top:97%;
  left:0%;
  background-color:#113342;
  z-index: 0;
}

.fg{
  position: fixed;
  width:25px;
  top:93%;
  left:25%;
  z-index: 2;
  transform: translate(-50%, -50%);
}

.fd{
  position: fixed;
  width:25px;
  top:93%;
  left:80%;
  z-index: 2;
  transform: translate(-50%, -50%);
}
}

/*tablettehorizontale*/
@media (min-width: 1000px) {
  body {
    background-image: url(bgtablet.svg);
    background-repeat: no-repeat ;
    width: 300;
  }

  .copyright{
    position: absolute;
    top: 100%;
    left:15%;
    right:5%;
    text-align: center;
    height:70px;
    color:#ededed;
    font-size: 16px;
    margin-top: 6400px;
  
  }

  .bg1{
    display: none;
  }

  .bg2{
    display:none;
  }

  .bg3{
    position: fixed;
    top: 20%;
    left:-10%;
    width: 115%;
    height: 100%;
    display: inline;
    z-index: 0;

  }
  a{
    text-decoration: none;
  }

  h3{
    font-weight: 200;
  }

  h4 {
    font-size: 22px;
    color: #aaa;
    margin-right: 0px;
    text-align: center;
    font-weight: 600;
    margin-top: 0px;
  }

  h5 {
    display: inline-block;
    width:350px;
    color: #888;
    text-align: center;
    font-weight: 400;
  }

  /*introduction*/
  .mesprojets{
    position: absolute;
    left:55%;
    top:84%;
    color: #fff;
    font-size: 25px;
    text-align: center;
    font-weight: 600;
    display: inline;
    margin: 0;
    transform: translate(-50%,0);
  }

  .mesprojets1{
    position: absolute;
    left:55%;
    top:92%;
    width:30px;
    margin: 0;
    display: inline;
    transform: translate(-50%,0);

  }

  .mesprojets11{
    display:none;
  }
  .contact1 {
    height : 100%;
    width : 80px;
    background-color: #582439;
    position: fixed;
    top: 0; left: 0;
  }

  .contact1:hover{
    transition: 2s;
    background-color: none;
  }

  .introduction1{
    display: none;
  }

  .introduction{
    position: absolute;
    left:15%;
    top:1%;
    color: #582439;
    font-size: 40px;
    margin-top: 20px;
    display: inline;
}
  .introduction:hover{
    color: #000000;
  }

  .presentation{
    font-size: 17px;
    text-align: center;
    color: #555;
    margin: 20px;
    display: block;
  }
  .ecole{
    text-decoration: none;
    color: #582439;
  }

  .presentation1{
    position: absolute;
    margin-left: 10%;
    margin-right: 10%;
    font-size: 18px;
    font-weight: 400;
    text-align: justify;
    color: #dddddd;
    top: 58%;
    display: none;
  }

  .presentation2{
    position: absolute;
    margin-left: 10%;
    margin-right: 10%;
    font-size: 18px;
    font-weight: 400;
    text-align: justify;
    color: #dddddd;
    top: 81%;
    display: none;
  }

  .ecole1{
    text-decoration: none;
    color: #555;
    display: none;


  }

  .plus{
    position: absolute;
    width:30px;
    top:82%;
    left: 82%;
    display: none
  }
  .photomoi{
    position: absolute;
    top:50%;
    left:15%;
    height: 340px;
    border-radius: 10px;
    display: block;
    align-self: none;
    transform: translate(0, -50%);

  }

.photomoi1{
  display: none;
}

  .rectpresentation{
    position: absolute;
    right:10%;
    top:50%;
    left: 40%;
    height: 340px;
    width:auto;
    background-color: #fff;
    border-radius: 10px;
    opacity: 85%;
    border: 2px;
    border-color: black;
    border-width: 20px;
    display: block;
    margin-top: 0;
    margin: 0;
    transform: translate(0, -50%);

  }


/*projets*/

.blocprojet{
  margin-right: 100px;
  z-index: 1;
}
  .projet1 {
    position: absolute;
    top:100%;
    left: 55%;
    transform: translate(-50%);
    display: inline;
    margin: 0;

  }

  .projet11{
    display: none;
  }

  .projet2 {
    position: absolute;
    top:100%;
    right: 45%;
    transform: translate(+50%);
    align-content: center;
    display: inline;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-top: 800px;
  }

  .projet21{
    display: none;
  }

  .projet3 {
    position: absolute;
    top:100%;
    left: 55%;
    transform: translate(-50%);
    display: inline;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-top: 1600px;
  }

  .projet31 {
    display: none;
  }

  .projet4 {
    position: absolute;
    top:100%;
    right: 45%;
    transform: translate(+50%);
    align-content: center;
    display: inline;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-top: 2400px;
  }

  .projet41 {
    display: none;
  }

  .projet5 {
    position: absolute;
    top:100%;
    left: 55%;
    transform: translate(-50%);
    display: inline;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-top: 3200px;
  }

  .projet51 {
    display: none;
  }

  .projet6 {
    position: absolute;
    top:100%;
    right: 45%;
    transform: translate(+50%);
    align-content: center;
    display: inline;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-top: 4000px;
  }

  .projet61 {
    display: none;
  }

  .projet7 {
    position: absolute;
    top:100%;
    left: 55%;
    transform: translate(-50%);
    display: inline;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-top: 4800px;
  }

  .projet71 {
    display: none;
  }

  .projet8 {
    position: absolute;
    top:100%;
    right: 45%;
    transform: translate(+50%);
    align-content: center;
    display: inline;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-top: 5600px;
  }

  .projet81 {
    display: none;
  }

  .filtre {
    width:400px;
    height:400px;
    border-radius: 10px; 
  }

  .filtre:hover {
  }

  /*contact*/
  .contact {
    width : 40px;
    position: fixed;
    transform: translate(0,-50%);
  }

  .contact:hover {
    transform: rotate(360deg);
    transition: 2s;
  }

  .insta {
    top: 35%; left: 2%;
  }

  .linkedin {
    top: 45%; left: 2%;
  }

  .cv {
    top: 55%; left: 2%;
  }

  .cv1{
    display: none;
  }

  .arobase {
    top: 65%; left: 2%;
  }
  
  .sd{
    position: fixed;
    top:88%;
    left:0%;
    margin-left: -30px;
    font-size: 15px;
    color: #fff;
    opacity: 0%;
    display: none;
  }
  .fin {
    position: fixed;
    width:40px;
    top:90%;
    left:15px;
    display: inline;
  }

  .fin:hover ~ .sd{
    transition: 1s;
    opacity: 100%;
  }
  .logogo1{
    width:50px;
    position: fixed;
    top:4%;
    left:1.4%;
    display:inline
  }
  
  .logogo{
    display: none;
  }

/*page de projet*/

.date{
  position : fixed;
  top: 11%;
  left:12%;
  display: inline;
  font-size: 16px;
  transform: none;
}

.outils{
  position : fixed;
  top: 14%;
  left:12%;
  display: inline;
  font-size: 16px;
  transform: none;

}

.realisation{
  position : fixed;
  top: 17%;
  left:12%;
  display: inline;
  font-size: 16px;
  transform: none;
}

.nomduprojet{
  position: fixed;
  top:3%;
  left: 12%;
  margin-top: 0px;
  font-size: 40px;
  margin-left: 0%;
  margin-right: 0%;
  transform: none;
}

.pprojet81{
  position: fixed ;
  width:280px;
  height: 280px;
  top:50%;
  right:8%;
  margin: 0;
  border-radius: 10px;
  box-shadow: 8px 8px 8px rgba(0, 0,0 ,50);
  margin-right: 0px;
  align-self: none;
  align-content: none;
  display: inline;
  transform: translate(0, -50%);
}

.rectprojet{
  position: fixed;
  background-color: white;
  top: 50%;
  left: 12%;
  width: 52%;
  height: 280px;
  grid-column: 2/5;
  grid-row: 2/3;
  margin: 0;
  border-radius: 10px;
  opacity : 85%;
  box-shadow: 8px 8px 8px rgba(0, 0,0 ,50);
  transform: translate(0, -50%);
  display: inline;
}

.rectprojet:hover{
  opacity : 95%;
}

.pp9{
  display: none;
}

.presentationprojet{
  font-size: 14px;
  text-align: justify;
  color: #555;
  margin: 20px;
  font-weight: 400;
}

.close1{
  display :none}

.pprojet9 {
  display: none;
}

.pprojet10 {
  display: none;
}

.pprojet8{ 
  display: none;
}
.img-trigger{
  display: none;
}


.bjouer{
  background-color: #ededed;
  margin-left: 35%;
  margin-right: 35%;
  margin-top: -19px;
  border-radius: 10px;
  box-shadow: 1px 1px 1px rgba(100, 100,100 ,50);
}

.bjouerrr{
  margin-top: 10px;
}
.bjouer:hover{
  background-color:#113342;
  margin-left: 35%;
  margin-right: 35%;
  border-radius: 10px;
  box-shadow: 1px 1px 1px rgba(100, 100,100 ,50);
}

.jouerpatatap{
  text-align: center ;
  text-decoration: none;
  color: #582439;
  margin-bottom: 10px;
  font-size: 16px;
}
.jouerpatatap:hover{
  text-align: center ;
  text-decoration: none;
  color: #FFFFFF;
}
.blanc{
  display: none;
}
.fgauche{
  position: fixed;
  top: 50%;
  left:66%;
  width:15px;
  margin-top: 0px;
  margin-left: 0px;
  align-self: center;
  display: inline;
  transform: translate(-50%, -50%);
}

.fdroite{
  position: fixed;
  top: 50%;
  left:95%;
  width:15px;
  margin-left: 0px;
  margin-top: 0px;
  align-self: center;
  display: inline;
  transform: translate(-50%, -50%);
}

.photoprecedent {
  position: fixed;
  opacity: 0%;
  top: 82%;
  left:13%;
  width:100px;
  height:100px;
  display: inline;
  border-radius: 10px;
  z-index: none;
}

.projetprecedent{
  position: fixed;
  top:90%;
  left: 40%;
  text-align: start;
  display: inline;
  transform: translate(-50%,-50%);
  font-size: 20px;
}

.projetprecedent:hover ~ .photoprecedent{
  transition: 1s;
  opacity:100%
}

.fg:hover ~ .photoprecedent {
  transition: 1s;
  opacity:100%
}

.fg{
  position: fixed;
  width:30px;
  top:90%;
  left:30%;
  transform: translate(-50%,-50%);

}


.photopsuivant{
  position: fixed;
  
  opacity: 0%;
  top: 82%;
  left:83%;
  width:100px;
  height:100px;
  display: inline;
  border-radius: 10px;
  z-index: 10;
}

.projetsuivant{
  position: fixed;
  top:90%;
  left: 66%;
  font-size: 20px;
  text-align: end;
  display: inline;
  transform: translate(-50%,-50%);
}

.projetsuivant:hover ~ .photopsuivant{
  transition: 1s;
  opacity:100%
}

.fd:hover ~ .photopsuivant {
  transition: 1s;
  opacity:100%
}

.fd{
  position: fixed;
  width:30px;
  top:90%;
  left:75%;
  transform: translate(-50%,-50%);
}

.img1 {
display: none;
}
.blanc{
  display: none;
}

.grille1{
  display: none;
}
/*menu de droite*/
.menu-trigger{
  display: none;
}

.rectbas{
  position: fixed;
  height:100px;
  width: 100%;
  top:97%;
  left:0%;
  background-color:#113342;
  z-index: 0;
}


.rectbas1{
  position: fixed;
  height:100px;
  width: 100%;
  top:97%;
  left:0%;
  background-color:#113342;
  z-index: 0;
}

}

/*desktop*/
@media (min-width: 1234px) {
  body {
    background-image: url(bgordi.svg);
    background-repeat: no-repeat ;
    width: 300;
  }

  .copyright{
    position: absolute;
    top: 500%;
    left:10%;
    right:5%;
    text-align: center;
    height:70px;
    color:#ededed;
    font-size: 16px;
    margin-top: 0;
  
  }

  .langue{
    position: fixed;
    font-size: 20px;
    color:#582439;
    top:0%;
    left:95%
  }
  .bg2{
    position: fixed;
    top: -35%;
    left:-30%;
    width: 160%;
    height: 160%;
    display: inline;
    z-index: 0;

  }

  .bg3{
    display: none;
  }

  a{
    text-decoration: none;
  }

  h3{
    font-weight: 200;
  }

  h4 {
    font-size: 22px;
    color: #aaa;
    margin-right: 0px;
    text-align: center;
    font-weight: 600;
    margin-top: 0px;
  }

  h5 {
    display: inline-block;
    width:350px;
    color: #888;
    text-align: center;
    font-weight: 400;
  }

  /*introduction*/
  .mesprojets{
    position: absolute;
    left:52%;
    top:86%;
    color: #fff;
    font-size: 25px;
    text-align: center;
    font-weight: 600;
    display: inline;
    margin: 0;
    transform: translate(-50%,0);

  }

  .mesprojets1{
    position: absolute;
    left:52%;
    top:92%;
    width:30px;
    margin: 0;
    display: inline;
    transform: translate(-50%,0);
  }

  .mesprojets11{
    display:none;
  }
  .contact1 {
    height : 100%;
    width : 5%;
    background-color: #582439;
    position: fixed;
    top: 0; left: 0;
  }

  .contact1:hover{
    transition: 2s;
    background-color: none;
  }

  .introduction1{
    display: none;
  }

  .introduction{
    position: absolute;
    left:15%;
    top:1%;
    color: #582439;
    font-size: 40px;
    margin-top: 20px;
    display: inline;
}
  .introduction:hover{
    color: #113342;
  }

  .presentation{
    font-size: 18px;
    text-align: center;
    color: #555;
    margin: 20px;
    display: block;
  }
  .ecole{
    text-decoration: none;
    color: #582439;
  }

  .presentation1{
    position: absolute;
    margin-left: 10%;
    margin-right: 10%;
    font-size: 18px;
    font-weight: 400;
    text-align: justify;
    color: #dddddd;
    top: 58%;
    display: none;
  }

  .presentation2{
    position: absolute;
    margin-left: 10%;
    margin-right: 10%;
    font-size: 18px;
    font-weight: 400;
    text-align: justify;
    color: #dddddd;
    top: 81%;
    display: none;
  }

  .ecole1{
    text-decoration: none;
    color: #555;
    display: none;


  }

  .plus{
    position: absolute;
    width:30px;
    top:82%;
    left: 82%;
    display: none
  }
  .photomoi{
    position: absolute;
    top:50%;
    left:15%;
    height: 340px;
    border-radius: 10px;
    display: block;
    align-self: none;
    transform: translate(0, -50%);
  }

.photomoi1{
  display: none;
}

  .rectpresentation{
    position: absolute;
    right:10%;
    top:50%;
    left: 40%;
    height: 340px;
    background-color: #fff;
    border-radius: 10px;
    opacity: 70%;
    border: 2px;
    border-color: black;
    border-width: 20px;
    display: block;
    margin-top: 0;
    margin: 0;
    transform: translate(0,-50%);

  }

  .rectpresentation:hover{
    opacity: 95%
  }

/*projets*/

.blocprojet{
  margin-right: 100px;
  z-index: 1;
}
  .projet1 {
    position: absolute;
    top:100%;
    left:15%;
    display: inline;
    margin: 0;
    transform: none;

  }

  .projet11{
    display: none;
  }

  .projet2 {
    position: absolute;
    top:145%;
    right:10%;
    display: inline;
    margin: 0;
    transform: none;
  }

  .projet21{
    display: none;
  }

  .projet3 {
    position: absolute;
    top:190%;
    left:15%;
    display: inline;
    margin: 0;
    transform: none;

  }

  .projet31 {
    display: none;
  }

  .projet4 {
    position: absolute;
    top:235%;
    right:10%;
    display: inline;
    margin: 0;
    transform: none;
  }

  .projet41 {
    display: none;
  }

  .projet5 {
    position: absolute;
    top:280%;
    left:15%;
    display: inline;
    margin: 0;
    transform: none;
  }

  .projet51 {
    display: none;
  }

  .projet6 {
    position: absolute;
    top:325%;
    right:10%;
    display: inline;
    margin: 0;
    transform: none;
  }

  .projet61 {
    display: none;
  }

  .projet7 {
    position: absolute;
    top:370%;
    left:15%;
    display: inline;
    margin: 0;
    transform: none;
  }

  .projet71 {
    display: none;
  }

  .projet8 {
    position: absolute;
    top:415%;
    right:10%;
    display: inline;
    margin: 0;
    transform: none;
  }

  .projet81 {
    display: none;
  }

  .filtre {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
    width:400px;
    height:400px;
    border-radius: 10px; 
  }

  .filtre:hover {
    filter: none;
    transition: 0.5s;
  }

  /*contact*/
  .contact {
    width : 40px;
    position: fixed;
    transform: translate(0,-50%);
  }

  .contact:hover {
    transform: rotate(360deg);
    transition: 2s;
  }

  .insta {
    top: 35%; left: 1%;
  }

  .linkedin {
    top: 45%; left: 1%;
  }

  .cv {
    top: 55%; left: 1%;
  }

  .arobase {
    top: 65%; left: 1%;
  }
  
  .sd{
    position: fixed;
    top:88%;
    left:0%;
    margin-left: -30px;
    font-size: 15px;
    color: #fff;
    opacity: 0%;
    display: none;
  }
  .fin {
    position: fixed;
    width:40px;
    top:90%;
    left:15px;
    display: inline;
  }

  .fin:hover ~ .sd{
    transition: 1s;
    opacity: 100%;
  }
  .logogo1{
    width:50px;
    position: fixed;
    top:4%;
    left:0.7%;
    display:inline
  }
  
  .logogo{
    display: none;
  }

/*page de projet*/

.date{
  position : fixed;
  top: 11%;
  left:15%;
  display: inline;
  font-size: 16px;
}

.outils{
  position : fixed;
  top: 14%;
  left:15%;
  display: inline;
  font-size: 16px;
  transform: none;
}

.realisation{
  position : fixed;
  top: 17%;
  left:15%;
  display: inline;
  font-size: 16px;
}

.nomduprojet{
  position: fixed;
  top:3%;
  left: 15%;
  margin-top: 0px;
  font-size: 40px;
  margin-left: 0%;
  margin-right: 0%;
  transform: none;
}

.pprojet81{
  position: fixed ;
  width:400px;
  height: 400px;
  top:50%;
  right:10%;
  margin-top : 0px;
  border-radius: 10px;
  box-shadow: 8px 8px 8px rgba(0, 0,0 ,50);
  margin: 0;
  align-self: none;
  align-content: none;
  display: inline;
  transform: translate(0, -50%);

  
}

.rectprojet{
  position: fixed;
  background-color: white;
  top: 50%;
  left: 15%;
  width: 40%;
  height: 400px;
  grid-column: 2/5;
  grid-row: 2/3;
  margin-top: 0px;
  border-radius: 10px;
  opacity : 85%;
  box-shadow: 8px 8px 8px rgba(0, 0,0 ,50);
  display: inline;
  transform: translate(0, -50%);
}

.rectprojet:hover{
  opacity : 95%;
}

.presentationprojet{
  font-size: 18px;
  text-align: justify;
  color: #555;
  margin: 20px;
  font-weight: 400;
}

.close1{
  display :none}

.pprojet9 {
  display: none;
}

.pprojet10 {
  display: none;
}

.img-trigger{
  display: none;
}


.bjouer{
  background-color: #ededed;
  margin-left: 35%;
  margin-right: 35%;
  margin-top: -10px;
  border-radius: 10px;
  box-shadow: 1px 1px 1px rgba(100, 100,100 ,50);
}
.bjouer:hover{
  background-color:#113342;
  margin-left: 35%;
  margin-right: 35%;
  border-radius: 10px;
  box-shadow: 1px 1px 1px rgba(100, 100,100 ,50);
}

.jouerpatatap{
  text-align: center ;
  text-decoration: none;
  color: #582439;
  margin-bottom: 20px;
  font-size: 20px;
}
.jouerpatatap:hover{
  text-align: center ;
  text-decoration: none;
  color: #FFFFFF;
}
.blanc{
  display: none;
}
.fgauche{
  position: fixed;
  top: 50%;
  left:58%;
  width:30px;
  margin-top: 0px;
  margin-left: 0px;
  align-self: center;
  display: inline;
  transform: translate(-50%, -50%);
}

.fdroite{
  position: fixed;
  top: 50%;
  left:94%;
  width:30px;
  margin-left: 0px;
  margin-top: 0px;
  align-self: center;
  display: inline;
  transform: translate(-50%, -50%);
}

.photoprecedent {
  position: fixed;
  opacity: 0%;
  top: 84%;
  left:15%;
  width:100px;
  height:100px;
  display: inline;
  border-radius: 10px;
  z-index: 10;
}

.projetprecedent{
  position: fixed;
  top:90%;
  left: 39%;
  text-align: start;
  display: inline;
}

.projetprecedent:hover ~ .photoprecedent{
  transition: 1s;
  opacity:100%
}

.fg:hover ~ .photoprecedent {
  transition: 1s;
  opacity:100%
}

.fg{
  position: fixed;
  width:30px;
  top:90%;
  left:30%;
}


.photopsuivant{
  position: fixed;
  
  opacity: 0%;
  top: 84%;
  left:81%;
  width:100px;
  height:100px;
  display: inline;
  border-radius: 10px;
}

.projetsuivant{
  position: fixed;
  top:90%;
  left: 67%;
  text-align: end;
  display: inline;
}

.projetsuivant:hover ~ .photopsuivant{
  transition: 1s;
  opacity:100%
}

.fd:hover ~ .photopsuivant {
  transition: 1s;
  opacity:100%
}

.fd{
  position: fixed;
  width:30px;
  top:90%;
  left:75%;
}

.img1 {
display: none;
}
.blanc{
  display: none;
}

.grille1{
  display: none;
}
/*menu de droite*/
.menu-trigger{
  display: none;
}

.rectbas{
  position: fixed;
  height:100px;
  width: 100%;
  top:97%;
  left:0%;
  background-color:#113342;
  z-index: 0;
}


.rectbas1{
  position: fixed;
  height:100px;
  width: 100%;
  top:97%;
  left:0%;
  background-color:#113342;
  z-index: 0;
}


}

/*grandordi*/
@media (min-width: 1500px) {
  body {
    background-color: #FFFFFF;
    background-repeat: no-repeat ;
    width: 300;
  }

  .bg2{
    position: fixed;
    top: -35%;
    left:-30%;
    width: 160%;
    height: 160%;
    display: inline;

  }
  a{
    text-decoration: none;
  }

  h3{
    font-weight: 200;
  }

  h4 {
    font-size: 25px;
    color: #aaa;
    margin-right: 0px;
    text-align: center;
    font-weight: 600;
    margin-top: 0px;
  }

  h5 {
    display: inline-block;
    width:350px;
    color: #888;
    text-align: center;
    font-weight: 400;
    font-size: 18px;
  }

  /*introduction*/
  .mesprojets{
    position: absolute;
    left:52%;
    top:86%;
    color: #fff;
    font-size: 25px;
    text-align: center;
    font-weight: 600;
    display: inline;
    margin: 0;
    transform: translate(-50%,0);

  }

  .mesprojets1{
    position: absolute;
    left:52%;
    top:92%;
    width:30px;
    margin: 0;
    display: inline;
    transform: translate(-50%,0);
  }

  .mesprojets11{
    display:none;
  }
  .contact1 {
    height : 100%;
    width : 5%;
    background-color: #582439;
    position: fixed;
    top: 0; left: 0;
  }

  .contact1:hover{
    transition: 2s;
    background-color: none;
  }

  .introduction1{
    display: none;
  }

  .introduction{
    position: absolute;
    left:15%;
    top:1%;
    color: #582439;
    font-size: 40px;
    margin-top: 20px;
    display: inline;
}
  .introduction:hover{
    color: #000000;
  }

  .presentation{
    font-size: 23px;
    text-align: center;
    color: #555;
    margin: 20px;
    display: block;
  }
  .ecole{
    text-decoration: none;
    color: #582439;
  }

  .presentation1{
    position: absolute;
    margin-left: 10%;
    margin-right: 10%;
    font-size: 18px;
    font-weight: 400;
    text-align: justify;
    color: #dddddd;
    top: 58%;
    display: none;
  }

  .presentation2{
    position: absolute;
    margin-left: 10%;
    margin-right: 10%;
    font-size: 18px;
    font-weight: 400;
    text-align: justify;
    color: #dddddd;
    top: 81%;
    display: none;
  }

  .ecole1{
    text-decoration: none;
    color: #555;
    display: none;


  }

  .plus{
    position: absolute;
    width:30px;
    top:82%;
    left: 82%;
    display: none
  }
  .photomoi{
    position: absolute;
    top:50%;
    left:15%;
    height: 450px;
    border-radius: 10px;
    display: block;
    align-self: none;
    transform: translate(0, -50%);
  }

.photomoi1{
  display: none;
}

  .rectpresentation{
    position: absolute;
    right:10%;
    top:50%;
    left: 40%;
    height: 450px;
    background-color: #fff;
    border-radius: 10px;
    opacity: 70%;
    border: 2px;
    border-color: black;
    border-width: 20px;
    display: block;
    margin-top: 0;
    margin: 0;
    transform: translate(0,-50%);

  }

  .rectpresentation:hover{
    opacity: 95%
  }

/*projets*/

.blocprojet{
  margin-right: 100px;
  z-index: 1;
}
  .projet1 {
    position: absolute;
    top:100%;
    left:15%;
    display: inline;
    margin: 0;
    transform: none;

  }

  .projet11{
    display: none;
  }

  .projet2 {
    position: absolute;
    top:130%;
    right:10%;
    display: inline;
    margin: 0;
    transform: none;
  }

  .projet21{
    display: none;
  }

  .projet3 {
    position: absolute;
    top:190%;
    left:15%;
    display: inline;
    margin: 0;
    transform: none;

  }

  .projet31 {
    display: none;
  }

  .projet4 {
    position: absolute;
    top:220%;
    right:10%;
    display: inline;
    margin: 0;
    transform: none;
  }

  .projet41 {
    display: none;
  }

  .projet5 {
    position: absolute;
    top:280%;
    left:15%;
    display: inline;
    margin: 0;
    transform: none;
  }

  .projet51 {
    display: none;
  }

  .projet6 {
    position: absolute;
    top:310%;
    right:10%;
    display: inline;
    margin: 0;
    transform: none;
  }

  .projet61 {
    display: none;
  }

  .projet7 {
    position: absolute;
    top:370%;
    left:15%;
    display: inline;
    margin: 0;
    transform: none;
  }

  .projet71 {
    display: none;
  }

  .projet8 {
    position: absolute;
    top:400%;
    right:10%;
    display: inline;
    margin: 0;
    transform: none;
  }

  .projet81 {
    display: none;
  }

  .filtre {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
    width:400px;
    height:400px;
    border-radius: 10px; 
  }

  .filtre:hover {
    filter: none;
    transition: 0.5s;
  }

  /*contact*/
  .contact {
    width : 40px;
    position: fixed;
    transform: translate(0,-50%);
  }

  .contact:hover {
    transform: rotate(360deg);
    transition: 2s;
  }

  .insta {
    top: 35%; left: 1%;
  }

  .linkedin {
    top: 45%; left: 1%;
  }

  .cv {
    top: 55%; left: 1%;
  }

  .arobase {
    top: 65%; left: 1%;
  }
  
  .sd{
    position: fixed;
    top:88%;
    left:0%;
    margin-left: -30px;
    font-size: 15px;
    color: #fff;
    opacity: 0%;
    display: none;
  }
  .fin {
    position: fixed;
    width:40px;
    top:90%;
    left:15px;
    display: inline;
  }

  .fin:hover ~ .sd{
    transition: 1s;
    opacity: 100%;
  }
  .logogo1{
    width:50px;
    position: fixed;
    top:4%;
    left:0.7%;
    display:inline
  }
  
  .logogo{
    display: none;
  }

/*page de projet*/

.date{
  position : fixed;
  top: 11%;
  left:15%;
  display: inline;
  font-size: 16px;
}

.outils{
  position : fixed;
  top: 14%;
  left:15%;
  display: inline;
  font-size: 16px;
  transform: none;
}

.realisation{
  position : fixed;
  top: 17%;
  left:15%;
  display: inline;
  font-size: 16px;
}

.nomduprojet{
  position: fixed;
  top:3%;
  left: 15%;
  margin-top: 0px;
  font-size: 40px;
  margin-left: 0%;
  margin-right: 0%;
  transform: none;
}

.pprojet81{
  position: fixed ;
  width:400px;
  height: 400px;
  top:50%;
  right:10%;
  margin-top : 0px;
  border-radius: 10px;
  box-shadow: 8px 8px 8px rgba(0, 0,0 ,50);
  margin: 0;
  align-self: none;
  align-content: none;
  display: inline;
  transform: translate(0, -50%);

  
}

.rectprojet{
  position: fixed;
  background-color: white;
  top: 50%;
  left: 15%;
  width: 40%;
  height: 400px;
  grid-column: 2/5;
  grid-row: 2/3;
  margin-top: 0px;
  border-radius: 10px;
  opacity : 85%;
  box-shadow: 8px 8px 8px rgba(0, 0,0 ,50);
  display: inline;
  transform: translate(0, -50%);
}

.rectprojet:hover{
  opacity : 95%;
}

.presentationprojet{
  font-size: 18px;
  text-align: justify;
  color: #555;
  margin: 20px;
  font-weight: 400;
}

.close1{
  display :none}

.pprojet9 {
  display: none;
}

.pprojet10 {
  display: none;
}

.img-trigger{
  display: none;
}


.bjouer{
  background-color: #ededed;
  margin-left: 35%;
  margin-right: 35%;
  margin-top: -10px;
  border-radius: 10px;
  box-shadow: 1px 1px 1px rgba(100, 100,100 ,50);
}
.bjouer:hover{
  background-color:#113342;
  margin-left: 35%;
  margin-right: 35%;
  border-radius: 10px;
  box-shadow: 1px 1px 1px rgba(100, 100,100 ,50);
}

.jouerpatatap{
  text-align: center ;
  text-decoration: none;
  color: #582439;
  margin-bottom: 20px;
}
.jouerpatatap:hover{
  text-align: center ;
  text-decoration: none;
  color: #FFFFFF;
}
.blanc{
  display: none;
}
.fgauche{
  position: fixed;
  top: 50%;
  left:62%;
  width:30px;
  margin-top: 0px;
  margin-left: 0px;
  align-self: center;
  display: inline;
  transform: translate(-50%, -50%);
}

.fdroite{
  position: fixed;
  top: 50%;
  left:94%;
  width:30px;
  margin-left: 0px;
  margin-top: 0px;
  align-self: center;
  display: inline;
  transform: translate(-50%, -50%);
}

.photoprecedent {
  position: fixed;
  opacity: 0%;
  top: 84%;
  left:15%;
  width:100px;
  height:100px;
  display: inline;
  border-radius: 10px;
}

.projetprecedent{
  position: fixed;
  top:90%;
  left: 39%;
  text-align: start;
  display: inline;
}

.projetprecedent:hover ~ .photoprecedent{
  transition: 1s;
  opacity:100%
}

.fg:hover ~ .photoprecedent {
  transition: 1s;
  opacity:100%
}

.fg{
  position: fixed;
  width:30px;
  top:90%;
  left:30%;
}


.photopsuivant{
  position: fixed;
  
  opacity: 0%;
  top: 84%;
  left:81%;
  width:100px;
  height:100px;
  display: inline;
  border-radius: 10px;
}

.projetsuivant{
  position: fixed;
  top:90%;
  left: 67%;
  text-align: end;
  display: inline;
}

.projetsuivant:hover ~ .photopsuivant{
  transition: 1s;
  opacity:100%
}

.fd:hover ~ .photopsuivant {
  transition: 1s;
  opacity:100%
}

.fd{
  position: fixed;
  width:30px;
  top:90%;
  left:75%;
}

.img1 {
display: none;
}
.blanc{
  display: none;
}

.grille1{
  display: none;
}
/*menu de droite*/
.menu-trigger{
  display: none;
}

.rectbas{
  position: fixed;
  height:100px;
  width: 100%;
  top:99.7%;
  left:0%;
  background-color:#113342;
  z-index: 0;
}


.rectbas1{
  position: fixed;
  height:100px;
  width: 100%;
  top:99.7%;
  left:0%;
  background-color:#113342;
  z-index: 0;
}


}