@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');


*{
  margin: 0;
  padding: 0;
  color: white;
  overflow-x: hidden;
  font-family: "Lato", sans-serif;
  font-size: 2vh;
}

html{
  scroll-behavior: smooth;
}

.html{
  overflow: hidden;
}

li{
 list-style: none;
 line-height: 2.7vh;
}

b{
  font-weight: 900;
}

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

p {
  line-height: 30px;
  overflow:hidden;
}

.underLine{
  background-color: white;
  width: 10vh;
  height: 0.5vh;
  display: block;
  border-radius: 5vh;
}

.btnRectangle{
  border: white 0.5vh solid;
  background-color: rgba(1, 1, 1, 0);
  color: white;
  cursor: pointer;
  border-radius: 0.4vh;
  padding: 2vh 0vh;
  text-transform: uppercase;
}

.btnRectangle a{
  font-weight: 700;
  padding: 2vh 3.5vh;
}

.btnRectangle:hover{
  background-color: rgba(255, 255, 255, 0.2);
}

/**** HEADER ****/

header{
 position: fixed;
  z-index: 90;
}

header img{
  height: 8vh;
  margin: 5vh;
}

.language-switcher {
  position: fixed; /* Fixe la position en haut à droite */
  top: 5vh;       /* Ajuste selon tes préférences */
  right: 5vh;     /* Positionne à droite */
  z-index: 90;   /* Assure que le bouton soit au-dessus des autres éléments */
}

.language-switcher a {
  border: white 0.5vh solid; /* Bordure comme dans .btnRectangle */
  background-color: rgba(1, 1, 1, 0); /* Fond transparent */
  color: white; /* Couleur du texte */
  cursor: pointer; /* Curseur de pointeur */
  border-radius: 0.4vh; /* Coins arrondis */
  padding: 1vh 2.5vh; /* Ajuste le padding pour éviter le débordement */
  text-transform: uppercase; /* Texte en majuscules */
  font-weight: 700; /* Poids de la police */
  margin: 0 10px; /* Enlève les marges pour éviter le débordement */
  transition: background-color 0.3s; /* Transition pour le changement de couleur */
  display: inline-block; /* S'assure que le lien se comporte comme un bouton */
  overflow: hidden; /* Empêche le débordement */
}

.language-switcher a:hover {
  background-color: rgba(255, 255, 255, 0.2); /* Couleur de fond au survol */
}

.nav{
  height: 63vh;
  display: flex;
  align-items: center;
}

.lineNav{
  background-color: #c0c0c0;
  width: 20vh;
  height: 0.2vh;
  display: block;
  border-radius: 0 5vh 5vh 0;
}

nav a{
  color: #c0c0c0;
  margin: 2.5vh 0;
}

nav ul{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
}

nav li{
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
}

nav p{
  margin-left: 2.5vh;
}

.liSelect .lineNav{
  height: 0.5vh;
  visibility: hidden;
  background-color: white;
}

.liSelect>p{
  color: white;
  font-weight: 900;
}

/**** SECTION 1 : HOME ****/

#home{
  background-size: cover;
  height: 100vh;
  position: relative;
  display: flex;
}

.slideP1{
  background-image: url("../img/alamineJV/alamineJV_img8.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 0vw;
  box-shadow: inset 30vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideP2 {
    background-image: url("../img/alamine/alamine_img1.jpg");
    background-size: cover;
    height: 100vh;
    position: absolute;
    width: 100vw;
    left: 100vw;
    box-shadow: inset 30vh -40vh 30vh #222220;
    transition: left 1s ease-in-out;
    background-position: bottom;
}

.slideP3 {
    background-image: url("../img/etc/etc_img1.jpg");
    background-size: cover;
    height: 100vh;
    position: absolute;
    width: 100vw;
    left: 200vw;
    box-shadow: inset 30vh -40vh 30vh #222220;
    transition: left 1s ease-in-out;
    background-position: bottom;
}

.navSlide{
  position: absolute;
  bottom: 5vh;
  left: 0;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 90;
}

.socialMedia{
  position: absolute;
  bottom: 3vh;
  right: 5vh;
  height: 8vh;
  width: 40vh;
  z-index: 100;
}

.socialMedia svg{
  height: 5vh;
  padding: 1vh;
}

.socialMedia svg path{
  fill: white;
  padding: 2vh;
}

.socialMedia svg:hover{
  height: 5.5vh;
  padding: 0.75vh;
}

.navSpan{
  background-color: #c0c0c0;
  width: 1.5vh;
  height: 1.5vh;
  display: block;
  border-radius: 100%;
  cursor: pointer;
  margin: 1.5vh;
}

.spanSelect{
  background-color: white;
  height: 2vh;
  width: 2vh;
  margin: 1vh;
}

.descProject{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  padding-left: 40vh;
}

.txtUnderline{
  font-size: 2.5vh;
  font-weight: 900;
  padding-bottom: 1vh;
}

.titleProject{
  font-size: 8vh;
  font-weight: 900;
  padding:3vh 0;
}

/**** SECTION 2 : ABOUT ****/

#about{
  background-image: url("/css/img/bg/aboutMe.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh;
  display: flex;
  align-items:center;
  justify-content:space-between;
  padding: 0  20vh 0 40vh;
  flex-wrap: wrap;
}

.aboutDescription{
  width: 70vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
}

.aboutKevin>img{
  width: 60vh;
}

.txtAbout{
  padding-bottom: 3vh;
}

/**** SECTION 3 : PROJECTS ****/

.projectsTitle{
  padding: 12vh 0 8vh 40vh;
}

#projects{
  background-color: #222220;
  min-height: 100vh;
}

.projects{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: start;
  padding-left: 40vh;
}

.project{
  height:45vh;
  width: 70vh;
  margin: 0 8vh 8vh 0;
  position: relative;
  overflow: hidden;
  border-radius: 0.5vh;
  background-position: center;
}

.project2{
  margin: 0;
  height: 35vh;
  width: 60vh;
  position: absolute;
  transition: background-color 0.5s ease-in-out;
  background-color: rgba(1, 1, 1, 0);
  border-radius: 0.5vh;
  padding: 5vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content:flex-end;
}

.project2>p{
  color: rgba(255, 255, 255, 0);
  transition: color 0.5s ease-in-out;
}

.project2>h4{
  color: rgba(255, 255, 255, 0);
  transition: color 0.5s ease-in-out;
  font-size: 4vh;
  font-weight: 900;
  padding-bottom: 1vh;
}

.project:hover .project2>p{
  color: rgba(255, 255, 255, 1);
}

.project:hover .project2>h4{
  color: rgba(255, 255, 255, 1);
}

.project:hover .project2{
  background-color: rgba(1, 1, 1, 0.4);
}

.pEtc{
  background-image:url("../img/projets/projetETC.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

.pRiseOfRealm{
  background-image:url("../img/projets/projetRiseOfRealm.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

.pAnuu{
  background-image:url("../img/projets/projetAnuu.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

.pFish{
  background-image:url("../img/projets/projetFish.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

.pMine{
  background-image:url("../img/projets/projetMine.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

.pMineJV {
    background-image: url("../img/projets/projetMineJV.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}

.pGetOut{
  background-image:url("../img/projets/projetGetOut.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

.pTPS{
  background-image:url("../img/projets/projetTPS.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

.pUnivers{
  background-image:url("../img/projets/projetUnivers.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

.pEquilibrage{
  background-image:url("../img/projets/projetEquilibrage.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

.pHostile{
  background-image:url("../img/projets/projetMerHostile.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

.pNavire{
  background-image:url("../img/projets/projetCaleNavire.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

.pEscape{
  background-image:url("../img/projets/projetEscape.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

.pQuest{
  background-image:url("../img/projets/projetQuest.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

.pLastHope{
  background-image:url("../img/projets/projetLastHope.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

.pCvAnime{
  background-image:url("../img/projets/projetCV.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

.pQuestDesign{
  background-image:url("../img/projets/projetQuestDesign.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

.pCardDesign{
  background-image:url("../img/projets/projetCardDesign.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

.pEconomyDesign{
  background-image:url("../img/projets/projetEconomyDesign.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

.pMirror{
  background-image:url("../img/projets/projetMirror.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

/**** SECTION 4 : CONTACT ****/

#contact{
  background-image: url("./img/bg/mailFooter.jpg");
  background-size: cover;
  height: 95vh;
  padding:0 20vh 5vh 40vh;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: center;
  box-shadow: inset 0vh 30vh 20vh #222220;
  color: #222220;
}

#contact>div{
  width: 70vh;
}

#contact p{
  padding: 1.5vh ;
}

::placeholder{
  color: #222220;
  font-size: 2vh;
}

form{
  display: flex;
  flex-direction: column;
}

.formName{
  width: 100%;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}

form input{
  padding: 1.5vh;
  margin: 1.5vh;
  color: #222220;
  font-size: 2vh;
}

textarea{
  padding: 1.5vh;
  margin: 1.5vh;
  resize:none;
  color: #222220;
  font-size: 2vh;
}

.formName>input{
  width: 50%;
  color: #222220;
  font-size: 2vh;
}

input[type=submit]{
  cursor: pointer;
  color: white;
  font-weight: 700;
}

.footer{
  display: flex;
  align-items: center;
  justify-content:center ;
  flex-direction: column;
}

.footerSocialMedia{
  height: 8vh;
}

.footerSocialMedia svg{
  height: 5vh;
  padding: 1vh;
}

.footerSocialMedia svg path{
  position: absolute;
  fill: white;
}

.footerSocialMedia svg:hover{
  height: 5.5vh;
  padding: 0.75vh;
}

/**** SECTION 5 : MENTIONS LEGALES ****/

#mentionsLegales{
  background-color: #222220;
  padding: 0 40vh;
}

.titleMentions{
  font-size: 8vh;
  font-weight: 900;
  padding:20vh 0 6vh 0;
}

.subtitleMentions{
  font-size: 2.5vh;
  font-weight: 900;
  padding-bottom: 1vh;
}

.txtMentions{
  padding: 2vh 0 6vh 0;
}

/****  PAGES PROJET ****/

.embedPDF{
  padding-bottom: 3vh;
}

.embedGame{
  padding-bottom: 3vh;
  align-items: center;
}

.divFleches{
  position: absolute;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 90vw;
  padding: 0 5vw 0 4vw;
  height: 100vh;
  z-index: 80;
}

.divFleches img{
  height: 4.5vh;
  cursor: pointer;
}

.fDroite{
  transform: rotate(180deg);
}


.titreProjet{
  position: absolute;
  bottom: 15vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100;
  left: 0;
  width: 100vw;
}

.titreProjet h4{
  font-size: 8vh;
  font-weight: 900;
}

.titreProjet p{
  font-size: 2.5vh;
  font-weight: 900;
  padding: 3vh 0 1vh 0;
}

#descriptionProjet{
  background-color: #222220;
  padding: 20vh 20vw;
}

.txtProjetDescription{
  padding-bottom: 3vh;
}


.infoRole{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}


#descriptionProjet li{
  list-style: inside;
}

#descriptionProjet .videoP{
  width: 100%;
}

.divVideo{
  padding-bottom: 3vh;
}

#autresProjets{
  background-color: #222220;
  padding: 0 20vw;
}

.containerAutresProjets{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

#autresProjets .project{
  height:18vw;
  width: 28vw;
  min-height: 15vh;
  min-width: 23vh;
  margin: 0 0 2vw 0;
}

#autresProjets .project2{
  margin: 0;
  padding: 2vw;
  height: 14vw;
  width: 24vw;
}

.titreAutresProjets{
  padding-bottom: 3vh;
}

#contactP{
  background-image: url("../css/img/bg/mailFooter.jpg");
  background-size: cover;
  min-height: 100vh;
  padding:0 30vw 5vh 30vw;
  display: flex;
  flex-direction: column;
  justify-content: end;
  box-shadow: inset 0vh 30vh 20vh #222220;
  color: #222220;
}

#contactP p{
  padding: 1.5vh ;
}

.btnDownload {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2vh 3.5vh;
}

    .btnDownload.btnRectangle {
        padding: 0; /* annule le padding du style global */
    }

    .btnDownload a {
        display: block;
        width: 100%;
        height: 100%;
        padding: 2vh 3.5vh;
        text-align: center;
        color: white;
        text-decoration: none;
        font-weight: 700;
    }

/**** PROJET 1 : ANUU ****/

#anuu{
  background-size: cover;
  height: 100vh;
  position: relative;
  display: flex;
}

.slideAnuu1{
  background-image: url("../img/anuu/anuu_img1.png");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 0vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideAnuu2{
  background-image: url("../img/anuu/anuu_img2.png");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 100vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideAnuu3{
  background-image: url("../img/anuu/anuu_img3.png");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 200vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideAnuu4{
  background-image: url("../img/anuu/anuu_img4.png");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 300vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideAnuu5{
  background-image: url("../img/anuu/anuu_img5.png");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 400vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideAnuu6{
  background-image: url("../img/anuu/anuu_img6.png");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 500vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

/**** PROJET 2 : A LA MINE ****/

#aLaMine{
  background-size: cover;
  height: 100vh;
  position: relative;
  display: flex;
}

.slideMine1{
  background-image: url("../img/alamine/alamine_img1.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 0vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideMine2{
  background-image: url("../img/alamine/alamine_img2.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 100vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideMine3{
  background-image: url("../img/alamine/alamine_img3.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 200vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideMine4{
  background-image: url("../img/alamine/alamine_img4.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 300vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideMine5{
  background-image: url("../img/alamine/alamine_img5.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 400vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideMine6{
  background-image: url("../img/alamine/alamine_img6.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 500vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideMine7{
  background-image: url("../img/alamine/alamine_img7.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 600vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

/**** PROJET 3 : CALE DE NAVIRE ****/

#caleDeNavire{
  background-size: cover;
  height: 100vh;
  position: relative;
  display: flex;
}

.slideCale1{
  background-image: url("../img/cale/cale_img1.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 0vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideCale2{
  background-image: url("../img/cale/cale_img2.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 100vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideCale3{
  background-image: url("../img/cale/cale_img3.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 200vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideCale4{
  background-image: url("../img/cale/cale_img4.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 300vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideCale5{
  background-image: url("../img/cale/cale_img5.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 400vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideCale6{
  background-image: url("../img/cale/cale_img6.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 500vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

/**** PROJET 4 : THE LAST HOPE ****/

#theLastHope{
  background-size: cover;
  height: 100vh;
  position: relative;
  display: flex;
}

.slideHope1{
  background-image: url("../img/lasthope/lh_img1.png");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 0vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideHope2{
  background-image: url("../img/lasthope/lh_img2.png");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 100vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideHope3{
  background-image: url("../img/lasthope/lh_img3.png");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 200vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideHope4{
  background-image: url("../img/lasthope/lh_img4.png");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 300vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideHope5{
  background-image: url("../img/lasthope/lh_img5.png");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 400vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideHope6{
  background-image: url("../img/lasthope/lh_img6.png");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 500vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

/**** PROJET 5 : CV ANIME ****/

#cvAnime{
  background-size: cover;
  height: 100vh;
  position: relative;
  display: flex;
}

.slideCvAnime1{
  background-image: url("../img/cvanime/motion_img1.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 0vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideCvAnime2{
  background-image: url("../img/cvanime/motion_img2.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 100vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideCvAnime3{
  background-image: url("../img/cvanime/motion_img3.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 200vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideCvAnime4{
  background-image: url("../img/cvanime/motion_img4.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 300vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

/**** PROJET 6 : EN MER HOSTILE ****/

#merHostile{
  background-size: cover;
  height: 100vh;
  position: relative;
  display: flex;
}

.slideMerHostile1{
  background-image: url("../img/merhostile/mer_img1.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 0vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideMerHostile2{
  background-image: url("../img/merhostile/mer_img2.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 100vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideMerHostile3{
  background-image: url("../img/merhostile/mer_img3.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 200vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideMerHostile4{
  background-image: url("../img/merhostile/mer_img4.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 300vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideMerHostile5{
  background-image: url("../img/merhostile/mer_img5.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 400vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideMerHostile6{
  background-image: url("../img/merhostile/mer_img6.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 500vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

/**** PROJET 7 : LA 13EME PORTE ****/

#escapeGame{
  background-size: cover;
  height: 100vh;
  position: relative;
  display: flex;
}

.slideEscape1{
  background-image: url("../img/escapegame/escape_img1.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 0vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideEscape2{
  background-image: url("../img/escapegame/escape_img2.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 100vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideEscape3{
  background-image: url("../img/escapegame/escape_img3.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 200vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

/**** PROJET 8 : QUEST GAME ****/

#questGame{
  background-size: cover;
  height: 100vh;
  position: relative;
  display: flex;
}

.slideQuest1{
  background-image: url("../img/questgame/quest_img1.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 0vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideQuest2{
  background-image: url("../img/questgame/quest_img2.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 100vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideQuest3{
  background-image: url("../img/questgame/quest_img3.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 200vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideQuest4{
  background-image: url("../img/questgame/quest_img4.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 300vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideQuest5{
  background-image: url("../img/questgame/quest_img5.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 400vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideQuest6{
  background-image: url("../img/questgame/quest_img6.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 500vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideQuest7{
  background-image: url("../img/questgame/quest_img7.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 600vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

/**** PROJET 9 : TPS ****/

#tps{
  background-size: cover;
  height: 100vh;
  position: relative;
  display: flex;
}

.slideTps1{
  background-image: url("../img/TPS/TPS_img1.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 0vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideTps2{
  background-image: url("../img/TPS/TPS_img2.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 100vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideTps3{
  background-image: url("../img/TPS/TPS_img3.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 200vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideTps4{
  background-image: url("../img/TPS/TPS_img4.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 300vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideTps5{
  background-image: url("../img/TPS/TPS_img5.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 400vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideTps6{
  background-image: url("../img/TPS/TPS_img6.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 500vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideTps7{
  background-image: url("../img/TPS/TPS_img7.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 600vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

/**** PROJET 10 : Creation Univers ****/

#univers{
  background-size: cover;
  height: 100vh;
  position: relative;
  display: flex;
}

.slideUnivers1{
  background-image: url("../img/univers/univers_img1.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 0vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideUnivers2{
  background-image: url("../img/univers/univers_img2.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 100vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideUnivers3{
  background-image: url("../img/univers/univers_img3.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 200vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideUnivers4{
  background-image: url("../img/univers/univers_img4.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 300vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

/**** PROJET 11 : Fish 'N Ship ****/

#fishship{
  background-size: cover;
  height: 100vh;
  position: relative;
  display: flex;
}

.slideFish1{
  background-image: url("../img/fish&ship/fish&ship_img1.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 0vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideFish2{
  background-image: url("../img/fish&ship/fish&ship_img2.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 100vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideFish3{
  background-image: url("../img/fish&ship/fish&ship_img3.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 200vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}
.slideFish4{
  background-image: url("../img/fish&ship/fish&ship_img4.png");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 300vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

/**** PROJET 12 : Equilibrage ****/

.slideEquilibrage1{
  background-image: url("../img/equilibrage/equilibrage_img1.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 0vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideEquilibrage2{
  background-image: url("../img/equilibrage/equilibrage_img2.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 100vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideEquilibrage3{
  background-image: url("../img/equilibrage/equilibrage_img3.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 200vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideEquilibrage4{
  background-image: url("../img/equilibrage/equilibrage_img4.png");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 300vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

/**** PROJET 13 : Get out of my room ! ****/

#getOut{
  background-size: cover;
  height: 100vh;
  position: relative;
  display: flex;
}

.slideGetOut1{
  background-image: url("../img/getOut/getout_img1.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 0vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideGetOut2{
  background-image: url("../img/getOut/getout_img2.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 100vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideGetOut3{
  background-image: url("../img/getOut/getout_img3.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 200vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}
.slideGetOut4{
  background-image: url("../img/getOut/getout_img4.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 300vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideGetOut5{
  background-image: url("../img/getOut/getout_img5.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 400vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideGetOut6{
  background-image: url("../img/getOut/getout_img6.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 500vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

/**** PROJET 14 : Quest Design ! ****/


/**** PROJET 15 : Card Design ! ****/


/**** PROJET 16 : Economy Design ! ****/


/**** PROJET 17 : RISE OF THE REALM ****/

#riseOfRealm{
  background-size: cover;
  height: 100vh;
  position: relative;
  display: flex;
}

.slideRise1{
  background-image: url("../img/riseOfRealm/rise_img1.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 0vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideRise2{
  background-image: url("../img/riseOfRealm/rise_img2.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 100vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideRise3{
  background-image: url("../img/riseOfRealm/rise_img3.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 200vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideRise4{
  background-image: url("../img/riseOfRealm/rise_img4.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 300vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideRise5{
  background-image: url("../img/riseOfRealm/rise_img5.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 400vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideRise6{
  background-image: url("../img/riseOfRealm/rise_img6.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 500vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideRise7{
  background-image: url("../img/riseOfRealm/rise_img7.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 600vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

/**** PROJET 18 : ESCAPE THE CITY ****/
#etc{
  background-size: cover;
  height: 100vh;
  position: relative;
  display: flex;
}

.slideETC1{
  background-image: url("../img/etc/etc_img1.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 0vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideETC2{
  background-image: url("../img/etc/etc_img2.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 100vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideETC3{
  background-image: url("../img/etc/etc_img3.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 200vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

/**** PROJET 19 : LD MIRROR'S EDGE ****/
#mirror{
  background-size: cover;
  height: 100vh;
  position: relative;
  display: flex;
}

.slideMirror1{
  background-image: url("../img/mirrorEdge/mirror_img1.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 0vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideMirror2{
  background-image: url("../img/mirrorEdge/mirror_img2.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 100vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideMirror3{
  background-image: url("../img/mirrorEdge/mirror_img3.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 200vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideMirror4{
  background-image: url("../img/mirrorEdge/mirror_img4.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 300vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideMirror5{
  background-image: url("../img/mirrorEdge/mirror_img5.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 400vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideMirror6{
  background-image: url("../img/mirrorEdge/mirror_img6.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 500vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideMirror7{
  background-image: url("../img/mirrorEdge/mirror_img7.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 600vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

/**** PROJET 2 : A LA MINE JV ****/

#aLaMineJV {
    background-size: cover;
    height: 100vh;
    position: relative;
    display: flex;
}

.slideMineJV1 {
    background-image: url("../img/alamineJV/alamineJV_img1.jpg");
    background-size: cover;
    height: 100vh;
    position: absolute;
    width: 100vw;
    left: 0vw;
    box-shadow: inset 0vh -40vh 30vh #222220;
    transition: left 1s ease-in-out;
    background-position: bottom;
}

.slideMineJV2 {
    background-image: url("../img/alamineJV/alamineJV_img2.jpg");
    background-size: cover;
    height: 100vh;
    position: absolute;
    width: 100vw;
    left: 100vw;
    box-shadow: inset 0vh -40vh 30vh #222220;
    transition: left 1s ease-in-out;
    background-position: bottom;
}

.slideMineJV3 {
    background-image: url("../img/alamineJV/alamineJV_img3.jpg");
    background-size: cover;
    height: 100vh;
    position: absolute;
    width: 100vw;
    left: 200vw;
    box-shadow: inset 0vh -40vh 30vh #222220;
    transition: left 1s ease-in-out;
    background-position: bottom;
}

.slideMineJV4 {
    background-image: url("../img/alamineJV/alamineJV_img4.jpg");
    background-size: cover;
    height: 100vh;
    position: absolute;
    width: 100vw;
    left: 300vw;
    box-shadow: inset 0vh -40vh 30vh #222220;
    transition: left 1s ease-in-out;
    background-position: bottom;
}

.slideMineJV5 {
    background-image: url("../img/alamineJV/alamineJV_img5.jpg");
    background-size: cover;
    height: 100vh;
    position: absolute;
    width: 100vw;
    left: 400vw;
    box-shadow: inset 0vh -40vh 30vh #222220;
    transition: left 1s ease-in-out;
    background-position: bottom;
}

.slideMineJV6 {
    background-image: url("../img/alamineJV/alamineJV_img6.jpg");
    background-size: cover;
    height: 100vh;
    position: absolute;
    width: 100vw;
    left: 500vw;
    box-shadow: inset 0vh -40vh 30vh #222220;
    transition: left 1s ease-in-out;
    background-position: bottom;
}

.slideMineJV7 {
    background-image: url("../img/alamineJV/alamineJV_img7.jpg");
    background-size: cover;
    height: 100vh;
    position: absolute;
    width: 100vw;
    left: 600vw;
    box-shadow: inset 0vh -40vh 30vh #222220;
    transition: left 1s ease-in-out;
    background-position: bottom;
}


/**** LOADER ****/

.loader{
  position: absolute;
  z-index: 95;
  background-color: #222220;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: top 1s ease-in-out;
  cursor: pointer;
}

.loader img{
  height: 20vh;
}

.header{
  visibility: hidden;
}

.main{
  visibility: hidden;
}





.responsiveContainer{
  display: none;
}


/***** SECTION DESIGN ******/

.sectionDesign{
  padding-top: 15vh;
  background-size: cover;
  height: 25vh;
  position: relative;
  display: block;
  background-color: #222220;
}

.titreSectionDesign{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: bottom;
  z-index: 100;
  left: 0;
  width: 100vw;
}

.titreSectionDesign h4{
  font-size: 8vh;
  font-weight: 900;
}

.titreSectionDesign p{
  font-size: 2.5vh;
  font-weight: 900;
  padding: 3vh 0 1vh 0;
}

.descriptionSectionDesign{
  background-color: #222220;
  padding: 10vh 20vw 20vh 20vw;
}

.btnPDF {
  display: none;
}