@charset "UTF-8";

@font-face{
  font-family: "Koko" ;
  src: url(../fonts/Reckless-Regular.otf) format("opentype");
  font-weight: 500;;
}
@font-face{
  font-family: "Favorit" ;
  src: url(../fonts/ABCFavoritEduMono-Regular.otf) format("opentype");
  font-weight: 500;;
}


body{
  overflow-x: hidden;
}

section{
    position: fixed;
    width: 100vw;
    height: 100%;
    overflow: hidden;
    top: 0;
    z-index: 1000000000;
    pointer-events: none  ;
}
section .scroll{
    width: 100%;
    display: flex;
    position: fixed;

}
section .scroll div
{
   color: #000; 
   font-size: 4em;
   background: #fff;
   white-space: nowrap;
   font-weight: 900;
   animation: animate 40s linear infinite;
   animation-delay: -40s;
  }
section .scroll div:nth-child(2)
{
    animation: animate2 40s linear infinite;
    animation-delay: -20s;
}


@keyframes animate{
    0%
    {
        transform: translateX(100%);
    }
    100%
    {
        transform: translateX(-100%);
    }
}
@keyframes animate2{
    0%
    {
        transform: translateX(0%);
    }
    100%
    {
        transform: translateX(-200%);
    }
}
section .scroll.text1{
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    font-family: "favorit";
    font-size: 0.4vh;
    z-index: +10;
    position: fixed;
}

    
section .scroll.text2{
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    font-family: "favorit";
    font-size: 0.4vh;
    /* margin-top: 98vh; */
    bottom: 0px;
    z-index: +10;
    position: fixed;

}
.video1{
  height: auto;
  width: 100%;
  position: relative;
  pointer-events: none;
  overflow: hidden;
}
@media screen and (max-width: 600px) {
  .video1 video {
    height: auto;
    width: 350%;
    margin-left: -150%;
}
}

#buttonID,
#button-panel,
.button {
  position: fixed;
  transition: background-color 0.5s ease-in-out, border-radius 0.5s ease-in-out;
}

#buttonID p,
#button-panel p,
/* .button p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
} */

/* ESSAIS WINDOWS */
.logo{
  font-size: 2em;
  position: fixed;
  font-family: "favorit";
  font-weight: bold;
  color: rgb(255, 255, 255);
  top: 1vh;
  animation: 3s logo ;
  transform: translate(0%);
  left: 1vw;
  z-index: 2000000;
  mix-blend-mode: exclusion;
  cursor: pointer;
}
@keyframes logo{

  0%{
    top: 50vh;
    left: 20vw;
    font-size: 7em;

  }
  50%{
    top: 50vh;
    left: 20vw;
    font-size: 7em;

  }
  100%{
    top: 1vh;
    left: 1vw;
    font-size: 2em;
  }
}
@media screen and (max-width: 600px) {
  .logo {
    font-size: 1.5em;
    margin-top: 1vh;
}
}

.panel {
  /* display: none; */
  position: fixed;
  top: 0;
  left:0;
  width: 30vw;
  height: 100vh;
  background-color: rgb(0, 0, 0);
  filter: opacity(90%);
  transform: translateX(-100%) rotate(0deg) scale(1);
  transition: transform 0.4s ease-in-out;
  overflow: hidden;
  z-index: 1000000;

}
@media screen and (max-width: 600px) {
  .panel {
    width: 100vw;
}
}
.switch-panel.panel {
  /* display: block; */
  transform: translateX(0%) rotate(0) scale(1);
}
.textegrann1{
  color: #fff;
  margin-left: 2.5vw;
  font-family: "favorit";
  font-size: 2em;
  text-indent: 5vh;
  margin-top: 10vh;

}
.textegran{
  color: #fff;
  margin-left: 2.5vw;
  font-family: "koko";
  font-size: 1em;
  margin-right: 2.5vw;

}
.textegrann{
  color: #fff;
  margin-left: 2.5vw;
  font-family: "favorit";
  font-size: 2em;
  text-indent: 5vh;
  margin-top: 2vh;
}

/* ESSAIS WINDOWS */


.txt1{
  font-size: 130%;
  margin-left: 2vw;
  margin-right: 2vw;
  margin-top: 7vh;
  font-family: 'Koko';
}
.txt2{
  font-size: 130%;
  margin-left: 2vw;
  margin-right: 2vw;
  text-indent: 3rem;
  font-family: 'Koko';
}
.txt3{
  font-size: 100%;
  margin-left: 2vw;
  margin-right: 2vw;
  margin-top: 3vh;
  font-family: "favorit";
}
.txt4{
  font-size: 100%;
  margin-left: 2vw;
  margin-right: 2vw;
  margin-top: 3vh;
  font-family: "favorit";
}
.ligne1{
  width: 100vw;
  height: 0.1vh;
  background-color: #000;
  margin-top: 5vh;
}

.video2{
  height: auto;
  width: 100%;
  position: relative;
  pointer-events: none;
  margin-top: 7vh;
  overflow: hidden;

}
@media screen and (max-width: 600px) {
  .video2 video {
    height: auto;
    width: 350%;
    margin-left: -150%;
}
.txt5 {
  margin-top:20vh ;
}
}

/* .photo1{
  height: 18vh;
  width: auto;
  position: absolute;
  margin-top: -80vh;
} */

/* BOX DANSLESQUELLES JAVAS */

/* .box1{
  width: 100vw;
  height: 10vh;
  border: 1px solid #000000;
  border-radius: 10vw;
  position: relative;
  margin-top: 60vh;
  text-align: center;
  font-size: 5em;
  font-family: "favorit";
  padding-top: 3vh;
} */

.box1{
  width: 100vw;
  height: 10vh;
  border: 1px solid #000000;
  border-radius: 10vw;
  position: relative;
  text-align: center;
  font-size: 5em;
  font-family: "favorit";
  padding-top: 3vh;
  overflow: hidden;
  margin-top: 10vh;
  transition: ease-in 0.4s;
  cursor: pointer;
}
.box1-on{
  width: 100vw;
  height: 70vh;
  border: 1px solid #000000;
  border-radius: 10vw;
  position: relative;
  text-align: center;
  font-size: 5em;
  font-family: "favorit";
  padding-top: 3vh;
  overflow: hidden;
  transition: ease-in 0.4s;
  cursor: pointer;
}
.txtbox1{
  font-size: 1rem;
  padding-left: 10vw;
  padding-right: 10vw;
  text-align: center;
  padding-top: 5vh;
  font-family: 'Koko';
}
.ligneb1{
  width: 90vw;
  height: 0.1vh;
  background-color: #000;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1vh;
}
.shoot_01{
  width: 100vw;
  height: auto;
  margin-top: 2vh;
  transition: ease-in 0.4s;
}
@media screen and (max-width: 600px) {
  .shoot_01 {
    width: 100vw;
    height: auto;;
}
}
.txtshoot_1{
  font-size: 1rem;
  padding-left: 10vw;
  padding-right: 10vw;
  text-align: center;
  font-family: "favorit";
  margin-top: -1vh;

}


.box2{
  width: 100vw;
  height: 10vh;
  border: 1px solid #000000;
  border-radius: 10vw;
  position: relative;
  text-align: center;
  font-size: 5em;
  font-family: "favorit";
  padding-top: 3vh;
  overflow: hidden;
  transition: ease-in 0.4s;
  cursor: pointer;

}
.box2-on{
  width: 100vw;
  height: 70vh;
  border: 1px solid #000000;
  border-radius: 10vw;
  position: relative;
  text-align: center;
  font-size: 5em;
  font-family: "favorit";
  padding-top: 3vh;
  overflow: hidden;
  transition: ease-in 0.4s;
  cursor: pointer;

}
.txtbox2{
  font-size: 1rem;
  padding-left: 10vw;
  padding-right: 10vw;
  text-align: center;
  padding-top: 5vh;
  font-family: 'Koko';
}
.box3{
  width: 100vw;
  height: 10vh;
  border: 1px solid #000000;
  border-radius: 10vw;
  position: relative;
  text-align: center;
  font-size: 5em;
  font-family: "favorit";
  padding-top: 3vh;
  overflow: hidden;
  transition: ease-in 0.4s;
  cursor: pointer;

}
.box3-on{
  width: 100vw;
  height: 70vh;
  border: 1px solid #000000;
  border-radius: 10vw;
  position: relative;
  text-align: center;
  font-size: 5em;
  font-family: "favorit";
  padding-top: 3vh;
  overflow: hidden;
  transition: ease-in 0.4s;
  cursor: pointer;

}
.txtbox3{
  font-size: 1rem;
  padding-left: 10vw;
  padding-right: 10vw;
  text-align: center;
  padding-top: 5vh;
  font-family: 'Koko';
}
.box4{
  width: 100vw;
  height: 10vh;
  border: 1px solid #000000;
  border-radius: 10vw;
  position: relative;
  text-align: center;
  font-size: 5em;
  font-family: "favorit";
  padding-top: 3vh;
  overflow: hidden;
  transition: ease-in 0.4s;
  cursor: pointer;

}
.box4-on{
  width: 100vw;
  height: 70vh;
  border: 1px solid #000000;
  border-radius: 10vw;
  position: relative;
  text-align: center;
  font-size: 5em;
  font-family: "favorit";
  padding-top: 3vh;
  overflow: hidden;
  transition: ease-in 0.4s;
  cursor: pointer;

}


.txtbox4{
  font-size: 1rem;
  padding-left: 10vw;
  padding-right: 10vw;
  text-align: center;
  padding-top: 5vh;
  font-family: 'Koko';
}
.box5{
  width: 100vw;
  height: 10vh;
  border: 1px solid #000000;
  border-radius: 10vw;
  position: relative;
  text-align: center;
  font-size: 5em;
  font-family: "favorit";
  padding-top: 3vh;
  overflow: hidden;
  transition: ease-in 0.4s;
  cursor: pointer;

}
.box5-on{
  width: 100vw;
  height: 70vh;
  border: 1px solid #000000;
  border-radius: 10vw;
  position: relative;
  text-align: center;
  font-size: 5em;
  font-family: "favorit";
  padding-top: 3vh;
  overflow: hidden;
  transition: ease-in 0.4s;
  cursor: pointer;

}
.txtbox5{
  font-size: 1rem;
  padding-left: 10vw;
  padding-right: 10vw;
  text-align: center;
  padding-top: 5vh;
  font-family: 'Koko';
}
.box6{
  width: 100vw;
  height: 10vh;
  border: 1px solid #000000;
  border-radius: 10vw;
  position: relative;
  text-align: center;
  font-size: 5em;
  font-family: "favorit";
  padding-top: 3vh;
  overflow: hidden;
  transition: ease-in 0.4s;
  cursor: pointer;

}
.box6-on{
  width: 100vw;
  height: 70vh;
  border: 1px solid #000000;
  border-radius: 10vw;
  position: relative;
  text-align: center;
  font-size: 5em;
  font-family: "favorit";
  padding-top: 3vh;
  overflow: hidden;
  transition: ease-in 0.4s;
  cursor: pointer;

}
.txtbox6{
  font-size: 1rem;
  padding-left: 10vw;
  padding-right: 10vw;
  text-align: center;
  padding-top: 5vh;
  font-family: 'Koko';
}
.box7{
  width: 100vw;
  height: 10vh;
  border: 1px solid #000000;
  border-radius: 10vw;
  position: relative;
  text-align: center;
  font-size: 5em;
  font-family: "favorit";
  padding-top: 3vh;
  overflow: hidden;
  transition: ease-in 0.4s;
  cursor: pointer;

}
.box7-on{
  width: 100vw;
  height: 70vh;
  border: 1px solid #000000;
  border-radius: 10vw;
  position: relative;
  text-align: center;
  font-size: 5em;
  font-family: "favorit";
  padding-top: 3vh;
  overflow: hidden;
  transition: ease-in 0.4s;
  cursor: pointer;

}
.txtbox7{
  font-size: 1rem;
  padding-left: 10vw;
  padding-right: 10vw;
  text-align: center;
  padding-top: 5vh;
  font-family: 'Koko';
}
.box8{
  width: 100vw;
  height: 10vh;
  border: 1px solid #000000;
  border-radius: 10vw;
  position: relative;
  text-align: center;
  font-size: 5em;
  font-family: "favorit";
  padding-top: 3vh;
  overflow: hidden;
  transition: ease-in 0.4s;
  cursor: pointer;
}
.box8-on{
  width: 100vw;
  height: 70vh;
  border: 1px solid #000000;
  border-radius: 10vw;
  position: relative;
  text-align: center;
  font-size: 5em;
  font-family: "favorit";
  padding-top: 3vh;
  overflow: hidden;
  transition: ease-in 0.4s;
  cursor: pointer;

}
.txtbox8{
  font-size: 1rem;
  padding-left: 10vw;
  padding-right: 10vw;
  text-align: center;
  padding-top: 5vh;
  font-family: 'Koko';
}

/* <!-- GROS TEXTE APRES BOX --> */

.textfat{
  font-size: 2.5rem;
  text-align: left;
  font-family: 'Koko';
  margin-right: 20vw;
  margin-left: 5vw;
  transition: ease-in 0.4s;
}
@media screen and (max-width: 600px) {
  .textfat {
    font-size: 2rem;
    margin-right: 2vw;

}
}
.textfin{
  font-size: 1rem;
  text-align: left;
  font-family: 'Koko';
  margin-left: 30vw;
  margin-right: 5vw;
  text-indent: 10vw;
  transition: ease-in 0.4s;
}
@media screen and (max-width: 600px) {
  .textfin {
    margin-left: 5vw;
    margin-top: 5vw
}
}

@media screen and (max-width: 600px) {
  .textfin1{
    font-size: 0.8rem;
    margin-left: 10vw;
}
}
.PREtextfat{
  font-size: 3.5rem;
  text-align: left;
  font-family: 'favorit';
  margin-right: 20vw;
  margin-left: 5vw;
  margin-top: 7vh;
text-decoration: underline;
}
@media screen and (max-width: 600px) {
  .PREtextfat {
    font-size: 3.5rem;
    margin-right: 2vw;
}
}

@media screen and (max-width: 600px) {
  .textfat1 {
    font-size: 2rem;
    margin-right: 2vw;
}
}
.predean{
  font-size: 2.5rem;
  text-align: left;
  font-family: 'koko';
  margin-left: 5vw;
  margin-right: 20vw;
}
.Dean{
  font-size: 1rem;
  text-align: left;
  font-family: 'Koko';
  margin-left: 29vw;
  margin-right: 29vw;
  text-indent: 5vw;
}
@media screen and (max-width: 600px) {
  .Dean {
    margin-left: 5vw;
    margin-right: 5vw;
}
}
.Dean01{
    font-size: 1rem;
    text-align: left;
    font-family: 'Koko';
    margin-left: 29vw;
    margin-right: 29vw;
    text-indent: 5vw;
  margin-top: -0.2vh;
}
@media screen and (max-width: 600px) {
  .Dean01 {
    margin-left: 5vw;
    margin-right: 5vw;
}
}
u{
  font-family: 'favorit';
    cursor: pointer;
    font-size: 0.7rem;
}

.deanp1{
  width: 15vw;
  height: auto;
  position: absolute;
  margin-left: 20vw;
  filter: opacity(50%);
  transition: ease-in 0.4s;
}
.deanp1:hover{
  filter: opacity(0%);
}
@media screen and (max-width: 600px) {
  .deanp1 {
    width: 30vw;
  height: auto;
}
}
.deanp2{
  width: 15vw;
  height: auto;
  position: absolute;
  margin-left: 75vw;
  margin-top: 20vh;
  filter: opacity(50%);
  transition: ease-in 0.4s;
}
.deanp2:hover{
  filter: opacity(0%);
}
@media screen and (max-width: 600px) {
  .deanp2 {
    width: 30vw;
    height: auto;
    margin-left: 50vw;
}
}
.deanp3{
  width: 15vw;
  height: auto;
  position: absolute;
  margin-left: 05vw;
  margin-top: 50vh;
  filter: opacity(50%);
  transition: ease-in 0.4s;
}
.deanp3:hover{
  filter: opacity(0%);
}
@media screen and (max-width: 600px) {
  .deanp3 {
    width: 30vw;
  height: auto;
}
}
.deanp4{
  width: 15vw;
  height: auto;
  position: absolute;
  margin-left: 65vw;
  margin-top: 70vh;
  filter: opacity(50%);
  transition: ease-in 0.4s;
}
.deanp4:hover{
  filter: opacity(0%);
}
@media screen and (max-width: 600px) {
  .deanp4 {
    width: 30vw;
  height: auto;
}
}
.Dean03{
  font-size: 1.5rem;
  text-align: left;
  font-family: 'koko';
  margin-left: 17vw;
  margin-right: 17vw;
margin-top: -0.2vh;
text-decoration: underline;
}
@media screen and (max-width: 600px) {
  .Dean03 {
    margin-left: 5vw;
    margin-right: 5vw;
    text-align: center;

}
}
.Dean010{
  font-size: 1.5rem;
  text-align: left;
  font-family: 'koko';
  font-style: italic;
  font-weight: 10;
  margin-top: -0.2vh;
text-indent: -5vw;
}
.lignehistoire{
  width: 100vw;
  height: 0.1vh;
  background-color: #000;
  margin-top: 30vh;
}
@media screen and (max-width: 600px) {
  .lignehistoire {
    margin-top: 7vh;
}
}
/* GALLERIE */

  .container{
    margin-top: 10vh;
    /* margin-bottom: .5em; */
  display: flex;
  flex-wrap: wrap;
  grid: 150px / auto auto auto;
  grid-gap: 0px;
  position: absolute;
  left: 0.7vw;
  transform: translate(-0%);
  overflow: auto;
  transition: ease-in 0.4s;
  overflow: hidden;
  }
  @media screen and (max-width: 600px) {
    .container {
      margin-left: 15vw;
      /* width: 40vw;
      height: auto; */
  }
  }
  
  .container :nth-child(1)
  {
    /* background-image: url(../images/shoot_1.png); */
    background-size: contain;
    align-items: center;
    align-self: center;
    width: 32.3vw;
    height: auto;
    display: inline;
    font-family: 'favorit';
    color: transparent ;
    transition: ease-in-out 0.4s; 
  }
  /* @media screen and (max-width: 600px) {
    .container {
      margin-left: 15vw;
  
  }
  }
   */
.container :nth-child(1):hover{
  font-family: 'favorit';
  font-size: 2rem;
  color: black ;
  border: 1px solid #000000;
}
  
  .container :nth-child(2)
  {
    align-items: center;
    align-self: center;
  /* background-image: url(../images/shoot_2.png); */
    background-size: contain;
    width: 32.3vw;
    height: auto;
    display: inline;
    overflow: hidden;
    font-family: 'favorit';
    color: transparent ;
    transition: ease-in-out 0.4s;    
  }
  .container :nth-child(2):hover{
    font-family: 'favorit';
    font-size: 2rem;
    color: black ;
    border: 1px solid #000000;
  }
  
  .container :nth-child(3)
  {
    align-items: center;
    align-self: center;
    background-size: contain;
    width: 32.3vw;
    height: auto;
    display: inline;
    background-repeat: no-repeat;
    font-family: 'favorit';
    color: transparent ;
    transition: ease-in-out 0.4s;   
  }
  .container :nth-child(3):hover{
    font-family: 'favorit';
    font-size: 2rem;
    color: black ;
    border: 1px solid #000000;
  }
  
  .container :nth-child(4)
  {
    align-items: center;
    align-self: center;
    width: 32.3vw;
    height: auto;
    display: inline;
    background-repeat: no-repeat;
    font-family: 'favorit';
    color: transparent ;
    transition: ease-in-out 0.4s;   
  }
  .container :nth-child(4):hover{
    font-family: 'favorit';
    font-size: 2rem;
    color: black ;
    border: 1px solid #000000;
  }
  
  .container :nth-child(5)
  {
    align-items: center;
    align-self: center;
    background-size: contain;
    width: 32.3vw;
    height: auto;
    display: inline;
    background-repeat: no-repeat;
    font-family: 'favorit';
    color: transparent ;
    transition: ease-in-out 0.4s;   
  }
  .container :nth-child(5):hover{
    font-family: 'favorit';
    font-size: 2rem;
    color: black ;
    border: 1px solid #000000;
  }
  
  .container :nth-child(6)
  {
    align-items: center;
    align-self: center;
    background-size: contain;
    width: 32.3vw;
    height: auto;
    display: inline;
    background-repeat: no-repeat;
    font-family: 'favorit';
    color: transparent ;
    transition: ease-in-out 0.4s;   
  }
  .container :nth-child(6):hover{
    font-family: 'favorit';
    font-size: 2rem;
    color: black ;
    border: 1px solid #000000;
  }
  .container :nth-child(7)
  {
    align-items: center;
    align-self: center;
    background-size: contain;
    width: 32.3vw;
    height: auto;
    display: inline;
    background-repeat: no-repeat;
    font-family: 'favorit';
    color: transparent ;
    transition: ease-in-out 0.4s;   
  }
  .container :nth-child(7):hover{
    font-family: 'favorit';
    font-size: 2rem;
    color: black ;
    border: 1px solid #000000;
  }
  .container :nth-child(8)
  {
    align-items: center;
    align-self: center;
    background-size: contain;
    width: 32.3vw;
    height: auto;
    display: inline;
    background-repeat: no-repeat;
    font-family: 'favorit';
    color: transparent ;
    transition: ease-in-out 0.4s;   
  }
  .container :nth-child(8):hover{
    font-family: 'favorit';
    font-size: 2rem;
    color: black ;
    border: 1px solid #000000;
  }
  .container :nth-child(9)
  {
    align-items: center;
    align-self: center;
    background-size: contain;
    width: 32.3vw;
    height: auto;
    display: inline;
    background-repeat: no-repeat;
    font-family: 'favorit';
    color: transparent ;
    transition: ease-in-out 0.4s; 
  }
  .container :nth-child(9):hover{
    font-family: 'favorit';
    font-size: 2rem;
    color: black ;
    border: 1px solid #000000;
  }

.when{
  text-align: center;
  font-size: 2em;
  font-family: "favorit";
  margin-left: 40vw;
  padding-top: 10vh;
  transition: ease-in 0.4s;

}
@media screen and (max-width: 600px) {
  .when {
    margin-left: 3.5vw;
    margin-top: -4vh;
    font-size: 1.6em;
}
}

.boxcount{
text-align: center;
width: 100vw;
height: 10vh;
border: 1px solid #000000;
border-radius: 10vw;
position: absolute;
text-align: center;
font-size: 5em;
font-family: "favorit";
padding-top: 3vh;
overflow: hidden;
margin-top: 243vh;
transition: ease-in 0.4s;
}

@media screen and (max-width: 600px) {
  .boxcount {
    margin-top: 275vw;
    font-size: 3em;
    text-align: center;
}
}
.lignecredit{
  width: 90vw;
  height: 0.1vh;
  background-color: #000;
  margin-left: auto;
  margin-right: auto;
  margin-top: 3vh;
  position: relative;
}

/* <!-- PICTOS INFOS --> */


.picto1{
  width: 20vw;
  height: 20vh;
  border: 1px solid #000000;
  border-radius: 10vw;
  position: relative;
  font-family: "koko";
  padding-top: 3vh;
  overflow: hidden;
  transition: ease-in 0.4s;
  cursor: pointer;
  margin-top: 265vh;
  margin-left: 40vw;
}
@media screen and (max-width: 600px) {
  .picto1 {
    margin-top: 170vh;
}
}
.picto1-on{
  width: 100vw;
  height: 50vh;
  border: 1px solid #000000;
  border-radius: 10vw;
  position: relative;
  font-family: "koko";
  padding-top: 3vh;
  /* overflow: hidden; */
  transition: ease-in 0.4s;
  cursor: pointer;
  margin-top: 265vh;
  margin-left: 0vw;
}
@media screen and (max-width: 600px) {
  .picto1-on {
    margin-top: 170vh;
}
}
.pictoimg{
  width: 12vw;
  height: auto;
  margin-top: -2vh;
  margin-left: 4vw;
}
@media screen and (max-width: 600px) {
  .pictoimg {
    padding-top: 7vh;
    margin-left: 1.4vw;
    width: 17vw;
  }
}
.pictotxt1{
  position: absolute;
  margin-top: -14vh;
  columns: 2;
  margin-left: 20vw;
}
@media screen and (max-width: 600px) {
  .pictotxt1 {
    font-size: 0.9rem;
  }
}
@media screen and (max-width: 600px) {
  .pictotxt2 {
    font-size: 0.9rem;
  }
}
@media screen and (max-width: 600px) {
  .pictotxt3 {
    font-size: 0.9rem;
  }
}
.animiso1{
  width: 100vw;
  height: auto;
  position: absolute;
  margin-top: -30vh;
  z-index: -10000;
  opacity: 0;
}
.animiso1-on{
  width: 100vw;
  height: auto;
  position: absolute;
  margin-top: -32vh;
  z-index: -10000;
  opacity: 100;
  margin-left: 10vw;
}
@media screen and (max-width: 600px) {
  .animiso1-on {
    margin-top: 10vh;
  }
}

@media screen and (max-width: 600px) {
  .animiso2-on {
    margin-top: 20vh;
    padding-top: 35vh;
  }
}
@media screen and (max-width: 600px) {
  .animiso3-on {
    margin-top: 20vh;
    padding-top: 35vh;
  }
}

.picto2{
  width: 20vw;
  height: 20vh;
  border: 1px solid #000000;
  border-radius: 10vw;
  position: relative;
  font-family: "koko";
  padding-top: 3vh;
  overflow: hidden;
  transition: ease-in 0.4s;
  cursor: pointer;
  margin-left: 40vw;
}
.picto2-on{
  width: 100vw;
  height: 50vh;
  border: 1px solid #000000;
  border-radius: 10vw;
  position: relative;
  font-family: "koko";
  padding-top: 3vh;
  /* overflow: hidden; */
  transition: ease-in 0.4s;
  cursor: pointer;
  margin-left: 0vw;
}

.pictoimg1{
  width: 12vw;
  height: auto;
  margin-top: -2vh;
  margin-left: 4vw;
}
@media screen and (max-width: 600px) {
  .pictoimg1 {
    padding-top: 7vh;
    margin-left: 1.4vw;
    width: 17vw;
  }
}
.pictotxt2{
  position: absolute;
  margin-top: -14vh;
  columns: 2;
  margin-left: 20vw;
}

.animiso2{
  width: 100vw;
  height: auto;
  position: absolute;
  margin-top: -30vh;
  z-index: -10000;
  opacity: 0;
}
.animiso2-on{
  width: 100vw;
  height: auto;
  position: absolute;
  margin-top: -30vh;
  z-index: -10000;
  opacity: 100;
  margin-left: 10vw;
}

.picto3{
  width: 20vw;
  height: 20vh;
  border: 1px solid #000000;
  border-radius: 10vw;
  position: relative;
  font-family: "koko";
  padding-top: 3vh;
  overflow: hidden;
  transition: ease-in 0.4s;
  cursor: pointer;
  margin-left: 40vw;
}
.picto3-on{
  width: 100vw;
  height: 50vh;
  border: 1px solid #000000;
  border-radius: 10vw;
  position: relative;
  font-family: "koko";
  padding-top: 3vh;
  /* overflow: hidden; */
  transition: ease-in 0.4s;
  cursor: pointer;
  margin-left: 0vw;
}

.pictoimg3{
  width: 12vw;
  height: auto;
  margin-top: -2vh;
  margin-left: 4vw;
}
@media screen and (max-width: 600px) {
  .pictoimg3 {
    padding-top: 7vh;
    margin-left: 1.4vw;
    width: 17vw;
  }
}
.pictotxt3{
  position: absolute;
  margin-top: -14vh;
  columns: 2;
  margin-left: 20vw;
}

.animiso3{
  width: 100vw;
  height: auto;
  position: absolute;
  margin-top: -30vh;
  z-index: -10000;
  opacity: 0;
}
.animiso3-on{
  width: 100vw;
  height: auto;
  position: absolute;
  margin-top: -30vh;
  z-index: -10000;
  opacity: 100;
  margin-left: 10vw;
}

/* <!-- CREDIT --> */

.credit3{
margin-top: 0vh;
}

.lignecredit2{
  width: 100vw;
  height: 0.1vh;
  background-color: #000;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  margin-top: 10vh;
}
.credit{
  font-size: 0.8rem;
  text-align: left;
  position: absolute ;
  margin-top: 2vh;
  margin-left: 2vw;
  font-family: "favorit";
  transition: ease-in 0.4s;
  cursor: pointer;
}
.credit-on{
  font-size: 0.8rem;
  text-align: left;
  position: absolute ;
  margin-top: -30vh;
  margin-left: 40vw;
  font-family: "favorit";
  transition: ease-in 0.4s;
  cursor: pointer;
}
.credit:hover{
  filter: opacity(0%);
  }

.credit2{
  font-size: 0.8rem;
  text-align: left;
  position: relative ;
  margin-top: 2vh;
  margin-left: 90vw;
  font-family: "favorit";
  transition: ease-in 0.4s;
  cursor: pointer;
}
.credit2-on{
  font-size: 0.8rem;
  text-align: left;
  position: relative ;
  margin-top: -30vh;
  margin-left: 60vw;
  font-family: "favorit";
  transition: ease-in 0.4s;
  cursor: pointer;
}
.credit2:hover{
filter: opacity(0%);
}

@media screen and (max-width: 600px) {
  .credit2 {
    margin-left: 70vw;
  }
}

.marge{
  position: relative;
  width: 1vw;
  height: 0.1vh;
  /* background-color: #000; */
  margin-top: 6vh;
}

/* <!-- MENU BURGER --> */
.menuItem {
  display: block;
  font-size: 1.8rem;
  margin-top: 2rem;
  margin-left: 2vw;
  color: white;
  text-decoration: none;
  font-family: "favorit";  
}
@media screen and (max-width: 600px) {
  .menuItem {
    font-size: 1.3rem;
  }
}


.menuItem:hover {
  text-decoration: underline;
}

.hamburger {
  position: fixed;
  z-index: 100;
  top: 2vh;
  right: 1vh;
  cursor: pointer;
  background-color: transparent;
  border: transparent;
}

.closeIcon {
  display: none;
}
.ui{
  width: 8vw;
  height: 8vh;
  border: none;
  transition: ease-in 0.4s;
}
@media screen and (max-width: 600px) {
  .ui {
    margin-top:-2vh ;
    width: 11vw;
    height: 11vh;
}
}
.menu {
  position: fixed;
  transform: translateY(-200%);
  transition: transform 0.2s;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  background: black;
  color: white;
  list-style: none;
  padding-top: 1rem;
  text-indent: 10vw;
  filter: opacity(90%);
}
@media screen and (max-width: 600px) {
  .menu {
  text-indent: 30vw;
}
}

.showMenu {
  transform: translateY(0);
}