/* defaults */

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    /* background-color: black; */
}
@font-face {
  font-style: normal;
  font-weight: normal;
  font-family: 'Haettenschweiler-Regular';
  src: url(../fonts/Haettenschweiler-Regular.woff) format('woff');
}

@font-face {
  font-style: normal;
  font-weight: normal;
  font-family: 'SuisseEcalIntl-Bold';
  src: url(../fonts/SuisseEcalIntl-Bold.woff) format('woff');
}

body {
  font-family: 'Haettenschweiler-Regular';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: always;
    text-rendering: optimizeLegibility;
   background-size:345vw;
   background-image: url(../img/21825.jpg);
    overflow-X: hidden;
}


#index_pliage{
  overflow-Y: hidden;
}

.header {
  position: relative;
  height: 11vw;
  background-color:red;
  z-index: 9;
  transition: all 1s;
  cursor: pointer;

}



.header2 {
  position: relative;
  height: 6vw;
  background-color:red;
  z-index: 9;
  transition: all 1s;
  cursor: pointer;
}


  

a:link {
  text-decoration: none;
  color:red;
  animation-name: titre;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

a:visited {
  text-decoration: none;
  color: red;
  animation-name: titre;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

.titre{
color: white;
font-size: 9vw;
text-align: center;
animation-name: titre;
animation-duration: 1s;
animation-iteration-count: 3;
}

.titrepliage{
  color: white;
  font-size: 5vw;
  text-align: center;
  animation-name: titrepliage !important;
  animation-duration: 1s;
  animation-iteration-count: 3 !important;
  }

  .titre3{
    color: white;
    font-size: 5vw;
    text-align: center;
    animation-name: titre3;
    animation-duration: 1s;
    animation-iteration-count: 3;
    }

  @keyframes titre3{
    0%{color: red}
    50%{ color: white}
    100%{ color: red}
  }
  @keyframes titrepliage{
    0%{color: red}
    50%{ color: white}
    100%{ color: red}
  }
@keyframes titre{
  0%{color: red}
  50%{ color: white}
  100%{ color: red}
}

.retourpage{
  position: absolute;
  top: 8vw;
  height: 8vw;
  left:90vw;
  z-index: 3;
}


.liste {
  height: 100vw;
  width: 100vw;
  top: 0vw;
  position: fixed;
}

/* .carrefin{
position: absolute;
color: red;
height: 10vw;
width: 100vw;
top:100vw;
left: 10vw;
} */

footer{
  height: 4vw;
  background-color: red;
}

.listeingredient{
  font-family: 'SuisseEcalIntl-Bold';
  color: white;
  font-size: 2.3vw;
  position: fixed;
  top: 10vw;
  left: 12vw;
  z-index: 200;
  visibility: hidden;
  transition: all 0.3s !important;
  width: 76vw;
}

.flex-container {

  display: flex;

  flex-flow: row wrap;
  justify-content: space-around;
  list-style: none;
}

.flex-item {
  width: 18vw;
  height: auto;
  margin-top: -3vw;
}
.flex-item2 {
  width: 52vw;
  height: auto;
  margin-top: -3vw;
}
.listeingredientecache{
  visibility: visible;

}

.avion{
  height: 8vw;
  width: auto;
  top: 80vw;
  position: absolute;
  animation-name: avion;
  animation-duration: 12s;
  animation-iteration-count: infinite;

}

@keyframes avion{
  0%{top: 80vw; left: -30vw; }
  100%{ top: 60vw;left: 100vw;}
}

.avion2{
  height: 12vw;
  width: auto;
  top: 140vw;
  position: absolute;
  animation-name: avion2;
  animation-duration: 8s;
  animation-iteration-count: infinite;
}
@keyframes avion2{
  0%{top: 140vw; left: 100vw; }
  100%{ top: 120vw;left: -30vw;}
}

.avion3{
  height: 14vw;
  width: auto;
  top: 10vw;
  position: absolute;
  animation-name: avion3;
  animation-duration: 50s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes avion3{
  0%{top: 40vw; left: -30vw; }
  100%{ top: 10vw;left: 100vw;}
}

.avion4{
  height: 12vw;
  width: auto;
  top: 20vw;
  position: absolute;
  animation-name: avion4;
  animation-duration: 35s;
  animation-iteration-count: infinite;
  transition-timing-function: linear;
}
@keyframes avion4{
  0%{top: 50vw; left: 100vw; }
  100%{ top: 10vw;left: -30vw;}
}


.montgolfiere{
  height: 10vw;
  width: auto;
  left: 32vw;
  position: absolute;
  animation-name: montgolfiere;
  animation-duration: 50s;
  animation-iteration-count: infinite;
}

@keyframes montgolfiere{
  0%{top: 220vw; }
  100%{ top: -20vw;}
}

.montgolfiere2{
  height: 4vw;
  width: auto;
  left: 76vw;
  position: absolute;
  animation-name: montgolfiere2;
  animation-duration: 80s;
  animation-iteration-count: infinite;
  z-index: 2;
}

@keyframes montgolfiere2{
  0%{top: 220vw; }
  100%{ top: -20vw;}
}

.panier{
  height: 10vw;
  width: auto;
  cursor: pointer;
  animation-name: panier;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes panier {
    0%   {  transform: rotate(-10deg);}
    50%   {  transform: rotate(0deg);}
    100% {  transform: rotate(-10deg);}
  }

.astronaute{
height: 7vw;
width: auto;
position: absolute;
top: 215vw;
left: 70vw;
z-index: 0;
animation-name: astronaute;
animation-duration: 4s;
animation-iteration-count: infinite;

}

@keyframes astronaute {
  0%   {left:70vw; top:215vw;}
  25%  {left:71vw; top:216vw;}
  50%  {left:70vw; top:217vw;}
  75%  {left:69vw; top:216vw;}
  100% {left:70vw; top:215vw;}
}

p {
  margin-bottom: -1vw; 
}
.hidden {
  visibility: hidden;
}

.rotation{
  transform: rotateY(180deg);
}

.crepetext {
  font-family: 'SuisseEcalIntl-Bold';
  z-index: 20;
  /* text-align: center; */
  /* pointer-events: none; */
  position: fixed;
  transform: rotateY(0);
  transition: transform 0.5s ease-in-out, right 0.5s ease-in-out;
} 


.flecherotation{
height: 10vw;
position: fixed;
left: 72vw;
top: 0vw;
cursor: pointer;
transition: transform 0.5s ease-in-out, right 0.5s ease-in-out;
}


.felcheretour{
  height: 10vw;
  position: absolute;
  left:75vw;
  top: 0vw;
  transform: rotate(180deg);
  cursor: pointer;
  transition: transform 0.5s ease-in-out, right 0.5s ease-in-out;
  z-index: 200;
}


.felcheretourdoite{
  height: 10vw;
  position: absolute;
  left: 70vw;
  top: 0vw;
  transform: rotate(360deg);
  cursor: pointer;
  transition: transform 0.5s ease-in-out, right 0.5s ease-in-out;
  z-index: 200;
}


.hidden {
  visibility: hidden;
}


/* ane */
.ane{
  position: absolute;
  top:13vw;
  left: 9vw;
  height: auto;
  width: 33vw;
  z-index: 5;
  cursor: pointer;
  animation-name: ane;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

#texteane{
  color:white;
  font-size: 2.8vw;
  top:5vw;
  left: 120vw;
  position: fixed;
  z-index: 20;
  width: 70vw;
  cursor: pointer;
  transition: transform 0.5s ease-in-out, left 0.5s ease-in-out;  
}

#crepeane {
  z-index: 10;
  left: 140vw;
  height: 130vw; 
  top: -30vw;
  position: fixed;
  transform-origin: center center;
  transition: transform 0.5s ease-in-out, left 0.5s ease-in-out;
}


#crepeane.alleane{
  left: -15vw;}

#texteane.alletexteane{
 left: 16vw;}


 @keyframes ane {
  0%   {top:13vw;}
  25%  {top:14vw}
  50%  {top:13vw}
  75%  {top:14vw}
  100% {top:13vw}
}

/*  */


/* haricot */

.haricot-plante{
  position: absolute;
  top: 13vw;
  left: 67vw;
  height: auto;
  width: 25vw;
  cursor: pointer;
  animation-name: haricot;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

#crepeharicot {
  z-index: 10;
  right: 140vw;
  height: 130vw; 
  top: -30vw;
  position:fixed;
  transition: all 0.5s;
  transform-origin: center;
  transition: transform 0.5s ease-in-out, right 0.5s ease-in-out;
  cursor: pointer;
}


#textharicot{
  color: white;
  font-size: 2.8vw;
  top:5vw;
  right: 120vw;
  position: fixed;
  width: 70vw;
  transition: transform 0.5s ease-in-out, right 0.5s ease-in-out;
}


#textharicot2{
  color:red;
  font-size: 2.8vw;
  top:5vw;
  right: 120vw;
  position: fixed;
  cursor: pointer;
  z-index: 20;
  width: 70vw;
  transition: transform 0.5s ease-in-out, right 0.5s ease-in-out;
  /* -webkit-text-stroke: 1px black;
  background-color: red; */
}



#crepeharicot.alleharicot {
  right: -14vw;
}



#textharicot.alleharicottext {
  right: 15vw;
}

#textharicot2.alleharicottext{
  right: 18vw;
}


@keyframes haricot {
  0%   {  transform: rotate(0deg);}
  100% {  transform: rotate(360deg);}
}

/*  */



/* pliage */

#textepliage{
  color: white;
  font-size: 3.5vw;
  top: 16vw;
  left: 140vw;
  position: fixed;
  z-index: 20;
  width: 60vw;
  transition: all 0.5s;
  text-align: center;
}

#crepepliage {
  z-index: 10;
  left: 140vw;
  height: 130vw; 
  top: -30vw;
  position: fixed;
  transition: all 0.5s;
  cursor: pointer;
}

/* image */
.crepepliage{
  position: absolute;
  height:30vw;
  top: 50vw;
  left: -6vw;
  z-index: 0;
  cursor: pointer;
}

#crepepliage.allepliage{
  left: -15vw;
}


#textepliage.alletextepliage{
  left: 18vw;
}

/*  */


/* panneau */
#textepanneau{
  color: white;
  font-size: 2.8vw;
  top: 5vw;
  left: 140vw;
  position: fixed;
  z-index: 20;
  width: 70vw;
  transition: transform 0.5s ease-in-out, left 0.5s ease-in-out;
}


#crepepanneau{
  z-index: 10;
  left: 140vw;
  height: 130vw; 
  top: -30vw;
  position: fixed;
  transition: all 0.5s;
  transform-origin: center center;
  transition: transform 0.5s ease-in-out, left 0.5s ease-in-out;
}

.panneau{
  position: absolute;
  height:55vw;
  left: 42vw;
  top: 20vw;
  cursor: pointer;
  z-index: 1;
}
.panneau2{
  position: absolute;
  height:55vw;
  left: 42vw;
  top: 20vw;
  cursor: pointer;
  z-index: 0;

}

.panneau:hover{
  animation-name: panneau;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
}

@keyframes panneau {
  0%   {    opacity: 0;}
  50%   {    opacity: 1;}
  100% {  opacity: 0; }
}

#crepepanneau.allepanneau{
  left: -15vw;
}

#textepanneau.alletextepanneau{
  left: 16vw;
}

/*  */


/* oignon */

#crepeoignon {
  z-index: 10;
  height: 130vw; 
  right: 140vw;
  top:-30vw;
  position: fixed;
  transform-origin: center center;
  transition: transform 0.5s ease-in-out, right 0.5s ease-in-out;
  cursor: pointer;
}

#textoignon {
  color: white;
  font-size: 2.8vw;
  top: 5vw;
  right: 140vw;
  position: fixed;
  width: 70vw;
  transition: transform 0.5s ease-in-out, right 0.5s ease-in-out;
}

#textoignon2 {
  color: red;
  font-size: 2.8vw;
  top: 5vw;
  right: 140vw;
  position: fixed;
  z-index: 20;
  width: 70vw;
  cursor: pointer;
  transition: transform 0.5s ease-in-out, right 0.5s ease-in-out;
}

.oignon{
  position: absolute;
  top: 45vw;
  left: 55vw;
  height: 50vw;
  z-index: 0;
  cursor: pointer;
}
.oignon:hover{
transition: 2s;
transform: rotate(360deg)
}


#crepeoignon.alleoignon {
  right:-15vw;
}

#textoignon.alleoignontexte{
  right: 15vw;
}
#textoignon2.alleoignontexte {
  right: 15vw;
}


/*  */


/* tomate */
#texttomate{
  color: white;
  font-size: 2.8vw;
  top: 5vw;
  left: 140vw;
  position: fixed;
  z-index: 20;
  width: 70vw;
  transition: transform 0.5s ease-in-out, left 0.5s ease-in-out;
}

#crepetomate{
  z-index: 10;
  left: 140vw;
  height: 130vw; 
  top:-30vw;
  position: fixed;
  transform-origin: center;
  cursor: pointer;
  transition: transform 0.5s ease-in-out, left 0.5s ease-in-out;
}

.tomate_grappe{
  height:15vw;
  cursor: pointer;
}

#tomate {
  position:absolute;
  left: 35vw;

}

#crepetomate.alletomate{
  left:  -15vw;
}


#texttomate.alletomatetexte,
#texttomate2.alletomatetexte{
  left: 16vw;
}


#texttomate2{
  font-size: 2.8vw;
  color: red;
  top: 5vw;
  left: 120vw;
  position: fixed;
  z-index: 20;
  width: 70vw;
  cursor: pointer;
  transition: transform 0.5s ease-in-out, left 0.5s ease-in-out;
}


/*  */


/* lait */
#textlait{
  color: white;
  font-size: 2.8vw;
  top: 5vw;
  left:140vw;
  position: fixed;
  z-index: 20;
  width: 70vw;
  transition: transform 0.5s ease-in-out, left 0.5s ease-in-out;
}

#crepelait {
  z-index: 10;
  left: 140vw;
  height: 130vw; 
  top:-30vw;
  position: fixed;
  transform-origin: center center;
  cursor: pointer;
  transition: transform 0.5s ease-in-out, left 0.5s ease-in-out;
}

.lait{
  position: absolute;
  height:25vw;
  left: 5vw;
  top: 80vw;
  z-index: 0;
  cursor: pointer;
  animation-name: lait;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes lait {
  0%   {  transform: rotate(-30deg);}
  50%   {  transform: rotate(30deg);}
  100% {  transform: rotate(-30deg);}
}

#textlait2{
  color: red;
  font-size: 2.8vw;
  top: 5vw;
  left: 140vw;
  position: fixed;
  z-index: 20;
  width: 70vw;
  transition: transform 0.5s ease-in-out, left 0.5s ease-in-out;
}

#crepelait.allelait{
  left: -15vw;
}

#textlait.allelaittext,
#textlait2.allelaittext{
  left: 16vw;
}

/*  */


/* piment */
#textpiment{
  color: white;
  font-size: 2.8vw;
  top: 5vw;
  left: 140vw;
  position: fixed;
  z-index: 20;
  width: 70vw;
  transition: all 0.5s;
  transition: transform 0.5s ease-in-out, left 0.5s ease-in-out;
}
#textpiment2{
  color: red;
  font-size: 2.8vw;
  top: 5vw;
  left: 140vw;
  position: fixed;
  z-index: 20;
  width: 70vw;
  transition: transform 0.5s ease-in-out, left 0.5s ease-in-out;
}

#crepepiment{
  z-index: 10;
  left: 140vw;
  height: 130vw; 
  top:-30vw;
  position: fixed;
  cursor: pointer;
  transition: transform 0.5s ease-in-out, left 0.5s ease-in-out;
}

.piment_vert{
  position: absolute;
  height:45vw;
  top: 80vw;
  left: 22vw;
  z-index: 5;
  cursor: pointer;
  opacity: 1;
  z-index: 1;
}
.piment_vert:hover{
  opacity: 0;
  transition: 1s;
}

.piment_vert2{
  position: absolute;
  height:45vw;
  top: 80vw;
  left: 22vw;
  z-index: 5;
  cursor: pointer;
  z-index: 0;
}

#crepepiment.allepiment{
  left: -15vw;
}

#textpiment.allepimenttext,
#textpiment2.allepimenttext{
  left: 16vw;
}


/*  */


/* riz */
#textriz{
  color: white;
  font-size: 2.8vw;
  top: 5vw;
  right: 140vw;
  position: fixed;
  z-index: 20;
  width: 70vw;
  transition: transform 0.5s ease-in-out, right 0.5s ease-in-out;
}

#creperiz{
  z-index: 10;
  right: 140vw;
  height: 130vw; 
  top: -30vw;
  position: fixed;
  cursor: pointer;
  transition: transform 0.5s ease-in-out, right 0.5s ease-in-out;
  }
  
#textriz2{
  color: red;
  font-size: 2.8vw;
  top: 5vw;
  right: 140vw;
  position: fixed;
  z-index: 20;
  width: 70vw;
  transition: transform 0.5s ease-in-out, right 0.5s ease-in-out;
}

.bag_rice{
  position: absolute;
  height:30vw;
  top: 0vw;
  z-index: 0;
  cursor: pointer;
}

#bag_rice{
  position: absolute;
  left: 50vw;
}

#creperiz.alleriz{
  right: -15vw;
}

#textriz.alleriztext,
#textriz2.alleriztext{
  right: 16vw;
}

/*  */


/* avocat */

#textavocat{
  color: white;
  font-size: 2.8vw;
  top: 5vw;
  right: 140vw;
  position: fixed;
  z-index: 20;
  width: 70vw;
  transition: transform 0.5s ease-in-out, right 0.5s ease-in-out;

}

#textavocat2{
  color: red;
  font-size: 2.8vw;
  top: 5vw;
  right: 130vw;
  position: fixed;
  z-index: 20;
  width: 70vw;
  transition: transform 0.5s ease-in-out, right 0.5s ease-in-out;
}

#crepeavocat {
  z-index: 10;
  right: 140vw;
  height: 130vw; 
  top: -30vw;
  position: fixed;
  transition: transform 0.5s ease-in-out, right 0.5s ease-in-out;
}

.avocat{
  position: absolute;
  height: 17vw;
  top: 100vw;
  left: 80vw;
  cursor: pointer;
  animation-name: avocat;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}

#crepeavocat.alleavocat{
  right: -15vw;
}

#textavocat.alleavocattext,#textavocat2.alleavocattext{
  right: 15vw ;
}


@keyframes avocat {
  0%   {left:80vw; top:98vw;}
  25%  {left:82vw; top:100vw;}
  50%  {left:80vw; top:102vw;}
  75%  {left:78vw; top:100vw;}
  100% {left:80vw; top:98vw;}
}


/*  */


/* boeuf */
.holaboeuf{
height: 18vw;
opacity: 0;
top: 124vw;
left: 16vw;
position: absolute;
z-index: 0;
animation-name: boeuf3;
animation-duration:2s;
animation-iteration-count: infinite;
animation-timing-function: ease-out;
transition: 1s;
}
@keyframes boeuf3 {
  0%   {  transform: rotate(0deg);}
  50%   {  transform: rotate(10deg);}
  100% {  transform: rotate(0deg); }
}


.holaboeuf:hover{
  opacity: 10;
}

#textboeuf{
  color: white;
  font-size: 2.8vw;
  top: 5vw;
  left: 140vw;
  position: fixed;
  z-index: 20;
  width: 70vw;
  transition: transform 0.5s ease-in-out, left 0.5s ease-in-out;
}

#crepeboeuf{
  z-index: 10;
  left: 140vw;
  height: 130vw; 
  top: -30vw;
  position: fixed;
  cursor: pointer;
  transition: transform 0.5s ease-in-out, left 0.5s ease-in-out;
}


#textboeuf2{
  color: red;
  font-size: 2.8vw;
  top:5vw;
  left:140vw;
  position: fixed;
  z-index: 20;
  width: 70vw;
  transition: transform 0.5s ease-in-out, left 0.5s ease-in-out;
}

.boeufp1{
  height: 16vw;
  position: absolute;
  top: 125vw;
  left: -2vw;
  cursor: pointer;
  animation-name: boeuf;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}
#crepeboeuf.alleboeuf{
  left: -15vw;
}

#textboeuf.alleboeuftext,#textboeuf2.alleboeuftext{
  left: 16vw;
}


@keyframes boeuf {
  0%   {height: 16vw; width: auto;}
  25%  {height: 18vw; width: auto;}
  50%  {height: 16vw; width: auto;}
  75%  {height: 18vw; width: auto;}
  100% {height: 16vw; width: auto;}
}


/*  */

/* poule */
#textpoule{
  color: white;
  font-size: 2.8vw;
  top: 5vw;
  right: 145vw;
  position: fixed;
  z-index: 20;
  width: 70vw;
  transition: transform 0.5s ease-in-out, right 0.5s ease-in-out;
}
#textpoule2{
  color:red;
  font-size: 2.8vw;
  top: 5vw;
  right: 120vw;
  position: fixed;
  z-index: 20;
  width: 70vw;
  cursor: pointer;
  transition: transform 0.5s ease-in-out, right 0.5s ease-in-out;
}

#crepepoule{
  z-index: 10;
  right: 140vw;
  height: 130vw; 
  top: -30vw;
  position: fixed;
  cursor: pointer;
  transition: transform 0.5s ease-in-out, right 0.5s ease-in-out;
}

.gifsalut{
  height: 20vw;
  top: 130vw;
  left: 52vw;
  position: absolute;
  animation-name: poule;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  }

@keyframes poule {
0%   {  transform: rotate(-10deg);}
50%   {  transform: rotate(30deg);}
100% {  transform: rotate(-10deg);}
}

.poule{
  position: absolute;
  height:80vw;
  top: 130vw;
  left: 30vw;
  z-index: 5;
  cursor: pointer;
  opacity: 1;
}


#crepepoule.allepoule{
  right: -15vw;
}

#textpoule.alletextpoule,
#textpoule2.alletextpoule{
  right: 15vw;
}


/*  */


/* remplissage */
#textremplissage {
  color: white;
  font-size: 3.5vw;
  top: 16vw;
  left: 140vw;
  position: fixed;
  z-index: 20;
  width: 70vw;
  transition: all 0.5s;
  text-align: center;
}

#creperemplissage {
  z-index: 10;
  left: 140vw;
  height: 130vw; 
  top: -30vw;
  position: fixed;
  transition: all 0.5s;
}


/* image */
.crepe_remplissage{
  position: absolute;
  height:25vw;
  z-index: 0;
  cursor: pointer;
  right: 57vw;
}

#crepe_remplissage{
  position: absolute;
}

#creperemplissage.alleremplissage{
  left:  -15vw;
}

#textremplissage.alletextremplissage {
  left:  15vw;
}


/*  */


/* temple */
#texttemple{
  color: white;
  font-size: 2.8vw;
  top: 5vw;
  left: 140vw;
  position: fixed;
  z-index: 20;
  width: 70vw;
  transition: transform 0.5s ease-in-out, left 0.5s ease-in-out;
}


#crepetemple{
  z-index: 10;
  left: 140vw;
  height: 130vw; 
  top: -30vw;
  position: fixed;
  transition: transform 0.5s ease-in-out, left 0.5s ease-in-out;
}

.temple{
  position: absolute;
  height:30vw;
  z-index: 0;
  top: 200vw;
  cursor: pointer;
  animation-name: temple;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
  transform-origin: center;
  filter: blur(0);
}

.temple:hover{
  transition: 2s;
  filter: blur(1px);
}


@keyframes temple {
  0%   {height: 30vw; width: auto;}
  25%  {height: 32vw; width: auto;}
  50%  {height: 30vw; width: auto;}
  75%  {height: 32vw; width: auto;}
  100% {height: 30vw; width: auto;}
}


#crepetemple.alletemple{
  left: -15vw;
}

#texttemple.alletempletext{
  left: 16vw;
}

/*  */


/*  */
/* PAGE2 */
/*  */

.jeu{
  margin-top: 10vw;
}

.crepe-win{
  margin-left: -300px;
  margin-top: -400px;
  width:250px;
  position: absolute;
  z-index: 1;
}

.titreP1{
top: 10vw;
left: 12vw;
font-size: 9vw;
text-align: center;
animation-name: titre3;
animation-duration: 1s;
animation-iteration-count: infinite;
visibility: hidden;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
position: absolute;
z-index: 200 !important;
}

.titreP2{
  top: 10vw;
  left: 10vw;
  font-size: 12vw;
  animation-name: titre3;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  visibility: hidden;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  position: absolute;
  z-index: 200;
  }
 
@keyframes titre3{
  0%{color: red}
  50%{ color: white}
  100%{ color: red}
}
 

 #gate {
  z-index: 0;
  position: absolute;
  top: 17vw;
  right: 37vw;
  height: 30vw;
  width: auto;
}

#picodegallo{
  z-index: 1;
  position: absolute;
  cursor: grab;
  top: 13vw;
  left: 15vw;
  height: 14vw;
  width: auto;
  z-index: 10;
}


#boeuf{
  position: absolute;
  cursor: grab;
  top: 35vw;
  right: 20vw;
  height: 15vw;
  width: auto;
  z-index: 10;
}

#creme{ 
  cursor: grab;
  position: absolute;
  top: 46vw;
  right: 45vw;
  height: 12vw;
  width: auto;
  z-index: 10;
}

#guacamole{
  cursor: grab;
  position: absolute;
  top: 30vw;
  left: 15vw;
  height: 20vw;
  width: auto;
  z-index: 10;
  }

 
#riz { 
  cursor: grab;
  position: absolute;
   top: 1vw;
   left: 42vw;
   height: 20vw;
   width: auto;
   z-index: 10;
   }


#beens {
  cursor: grab;
  position: absolute;
  height: 16vw;
  width: auto;
  top: 11vw;
  right: 12vw;
  z-index: 10;
  }

  

  /* P3 */

  .container {
    position: absolute;
    display: flex;
    overflow: hidden;
  
    flex-wrap: wrap;
    top: 33.5vw;
    left: 56vw;
    width: 50vw;
    height: 40vw;
    transform: translate3d(-50%, -50%, 0);
  }
  
  .elements {
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    height: 45vw;
    width: auto;
  }

    .imgp3{
    height: 70%;
    width: auto;
  }
  .element {
    width: 50vw;
    height: 50vw;  
  }
  
  
  
  .button {
    position: relative;
    width: 6.5vw;
    height:6.5vw;
  }
  
   .button:hover, 
   .button.selected {
    filter: grayscale(1);
  }
  
  
   .button p {
    position: absolute;
    left: 0;
    top: 0;
    top: 50%;
    left: 50%; 
    margin: 0;
    font-size: 2rem;
    line-height: 1.2;
  
  }
  
  .position1{
    position: absolute;
    top: 26.5vw;
    left: 22.3vw;
  }
  
  .position2{
    position: absolute;
    top: 26.7vw;
    left: 67vw;
    transform: rotate(180deg);
  }
  
  .position3{
    position: absolute;
    top: 6.5vw;
    left: 45vw;
    transform: rotate(90deg);
  }
  
  .position4{
    position: absolute;
    top: 48.3vw;
    left: 46vw;
    transform: rotate(-90deg);
  }

 
  .crepe-win{
    margin-left: -300px;
    margin-top: -400px;
    width:250px;
    height: 250px;
    position: absolute;
    z-index: 1;
  }

  
  .titre1P3{
    /* top: 15vw;
    left: 1vw;*/
    font-size: 12vw;
    text-align: center;
    animation-name: titre3;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    visibility: hidden;
    font-family: "Haettenschweiler";
    position: absolute;
    z-index: 200;
    align-self: center;
    top: 20vw;
    left: 11vw;
    }
    .titre2P3{
      font-size: 12vw;
      animation-name: titre3;
      animation-duration: 1s;
      animation-iteration-count: infinite;
      visibility: hidden;
      font-family: "Haettenschweiler";
      position: absolute;
      z-index: 200;
      align-self: center;
      left: 20vw;
      top: 20vw;
      }
      @keyframes titre3{
        0%{color: red}
        50%{ color: white}
        100%{ color: red}
      }

      .parapente3{
        height: 10vw;
        width: auto;
        top: 10vw;
        position: absolute;
        animation-name: parapente3;
        animation-duration: 30s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
      }
      @keyframes parapente3{
        0%{top: 40vw; left: -30vw; }
        100%{ top: 10vw;left: 100vw;}
      }
      
      .parapente4{
        height: 14vw;
        width: auto;
        top: 20vw;
        position: absolute;
        animation-name: parapente4;
        animation-duration: 45s;
        animation-iteration-count: infinite;
        transition-timing-function: linear;
      }
      @keyframes parapente4{
        0%{top: 50vw; left: 100vw; }
        100%{ top: 10vw;left: -30vw;}
      }

 .montgolfierep3{
  height: 10vw;
  width: auto;
  left: 32vw;
  position: absolute;
  animation-name: montgolfierep3;
  animation-duration: 50s;
  animation-iteration-count: infinite;
}

@keyframes montgolfierep3{
  0%{top: 220vw; }
  100%{ top: -20vw;}
}