/* defaults */
@charset "UTF-8";

@font-face {
    font-weight: normal;
    font-style: normal;
    font-family: 'Diatype';
    src: url("../fonts/ABCDiatype-Regular.ttf") format('truetype'),
        url("../fonts/ABCDiatype-Regular.woff2") format("woff2"); 
            
}
@font-face {
  font-style: normal;
  font-weight: normal;
  font-family: 'Abcdia';
  src: url(../fonts/ABCDiatypeVariable.ttf) format('truetype');
          
}
* {
  box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
body{
  
    font-family: Diatype;
    font-variation-settings: "wdth" 500, "wght" 100, "slnt" 12;
    font-size: 1.5em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: always;
    text-rendering: optimizeLegibility;
    overflow-x:hidden;
    
}

.sliders {
  display: flex;
  justify-content: space-between;
  padding: 0.5em;
  justify-content: flex-end;
}
.text {
  font-size: 4em;
  text-align: center;
  line-height:1;
  padding: 0.3em;
  font-family:Abcdia;
  margin-top:5vh;
}

.recette {
  display: flex;
  padding: 0.5em;
  
}
h1 {
  font-size:2em;
}

h2 {
  font-size: 1em;
  
}
h3 {
  font-size: 6vw;
}
h4 {
  font-size: 8vw;
}
h5 {
  font-size:7vw;
}

.text_pardessu {
  position:absolute;
  margin-top:-6.95em;
  margin-left:7.5em;
  float:center;
  color:black;
}
.container2 {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-areas: 
  "fondvert fondjaune"
  "fondrouge fondbleu";
  grid-template-columns: repeat(2,1fr);
  grid-template-rows:repeat(2,1fr);
}


.fondvert {
  background-color:rgb(41, 184, 5);
  grid-area: fondvert;
  transition: all .4s;
z-index: 200;
width: 100%;

}
.fondjaune {
 background-color: rgb(254, 230, 0);
  grid-area: fondjaune;
 

}
.fondrouge {
  background-color:rgb(237, 50, 77);
  grid-area: fondrouge;

}
.fondbleu {
  background-color:rgb(6, 93, 180);
  grid-area: fondbleu;

}

.fondvert:hover {
width: 200%;
  
}


.fondrouge:hover {
width:200%;
 
 
}


.fondjaune:hover {
 
  transition: all .4s;
z-index: 200;
width: 200%;
}


.fondbleu:hover {

  
}

.imagedebut1 {
  margin-top:5em;
  margin-left:15em;
}
.imagedebut1_2 {
  margin-top:-21em;
  margin-left:-10em;
  display:flex;
}
.imagedebut1_3 {
  margin-left:40em;

margin-top:-21em;
display:flex;
}

.imagedebut2 {
  margin-top:10em;
  margin-left:18em;
}

.imagedebut2_2 {
  margin-top:-17em;
  margin-left:-6em;
  display:flex;
}
.imagedebut2_3 {
  margin-left:43em;

margin-top:-16em;
display:flex;
}
.imagedebut3 {
  margin-top:4em;
  margin-left:20em;
}

.imagedebut3_2 {
  margin-top:-25em;
  margin-left:-6em;
  display:flex;
}
.imagedebut3_3 {
  margin-left:45em;

margin-top:-23em;
display:flex;
}
.imagedebut4 {
margin-top:-0.5em;
  margin-left:18em;
}

.imagedebut4_2 {
  margin-top:-24em;
  margin-left:-6em;
  display:flex;
}
.imagedebut4_3 {
  margin-left:43em;

margin-top:-23em;
display:flex;
}



.titre_p2 {
  position:absolute;
  top:-10%;
  text-align:center;
  margin-left:7.5em;
}

.fondvert_p2 {
  background-color: rgb(41, 184, 5);
  width:100%;
  height:50%; 
  overflow: hidden;
  
  
  
}
#fondjaune_p2 {
  background-color: rgb(254, 230, 0);
  width:100%;
  height:100%; 
  margin-top:23em;
 
  
  
}
.fondrouge_p2 {
  background-color: rgb(237, 50, 77);
  width:50%;
  height:50%;
  position:absolute;
  
 
  
  
}
.fondbleu_p2 {
  background-color: rgb(6, 93, 180);
  width:50%;
  height:50%;

  margin-left:35em;
  position:absolute;
  
}
.text_dessu_p2 {
  position:relative;
  top:1;
  margin-top:8em;
  text-align:center;
  
  
}
h6 {
  font-size: 2.5em;
}

.imagedebut_1_p2 {
  margin-left:30em;
  
}
#titre_deroulette {
position:absolute;
margin-top:13em;
margin-left:29.5em;
}
#titre_deroulette_var {
  position:absolute;
  top:25%;
  left:33%;
  }


.image_recette {
  
    filter: blur(5px);
    -webkit-filter: blur(5px);
    
   }
    .image_recette:hover {
    filter: blur(0);
    -webkit-filter: blur(0);
    
}

#rond_make {
  position:absolute;
  margin-top:3em;
  margin-left:19em;
  -webkit-animation:spin 20s linear infinite;
  -moz-animation:spin 20s linear infinite;
  animation:spin 20s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); 
} 
}
#rond_make_intro {
  
  -webkit-animation:spin 20s linear infinite;
  -moz-animation:spin 20s linear infinite;
  animation:spin 20s linear infinite;
  
}
#rond_make_2 {
  position:absolute;
  top:12%;
 left:20%;
  -webkit-animation:spin 20s linear infinite;
  -moz-animation:spin 20s linear infinite;
  animation:spin 20s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); 
} 
}
.rond_center {
  height:auto;
  width:50%;
  z-index:2000;
  position:absolute;
  top:7%;
  left:25%;
 

}
.rond_center a{
  font-size: 0;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); 
} 
}

.marquee:hover {
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);	
 transform:translateX(100%);
 /* Apply animation to this element */	
 -moz-animation: scroll-left 5s linear infinite;
 -webkit-animation: scroll-left 5s linear infinite;
 animation: scroll-left 5s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-left {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll-left {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes scroll-left {
 0%   { 
 -moz-transform: translateX(100%); /* Browser bug fix */
 -webkit-transform: translateX(100%); /* Browser bug fix */
 transform: translateX(100%); 		
 }
 100% { 
 -moz-transform: translateX(-100%); /* Browser bug fix */
 -webkit-transform: translateX(-100%); /* Browser bug fix */
 transform: translateX(-100%); 
 }
}


#double_fleche {
 position:absolute; 
 top:0;
 margin-top:7em;
 margin-left:3em;
  
}
#double_fleche_droite {
  position:absolute; 
  top:0;
  margin-left:54em;
  margin-top:7em;
}


.titresection1 {
  position :absolute;
  top:0;
  margin-left:10em;
  color:black;
  margin-top:3em;
}
.titresection2 {
  position :absolute;
  top:0;
  margin-left:13em;
  color:black;
  margin-top:3em;
}

.button {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  min-width:90px;
  display: inline-block;
  text-decoration:none;
  display: flex;
  justify-content: center;
  align-items: center;
  
  position: relative;
  

  color: black;
  text-align: center;
  
  overflow: hidden;
  transition: width .4s;
  text-align:center;
  z-index:100;
}

.button h5 {
  margin: 0;
}

.button:hover{
  cursor: pointer;
  
}
.button:active{
  -ms-transform: scale(1.01);
  -moz-transform: scale(1.01);
  -webkit-transform: scale(1.01);
  transform: scale(1.01);

}
.option {
  display: none;
  position: relative;
  transition: top .2s;
  top: -60px;
}
#num1 {
  display: inline-block;
  position: relative;
  transition: top .15s;
  top: -15px;
  line-height: 1;
  
}
#num2 {
  /* background-color:rgb(237, 50, 77); */
  line-height: 1;
}
#num3 {
  /* background-color:rgb(254, 230, 0); */
  line-height: 1;
}
#num4 {
  /* background-color: rgb(6, 93, 180); */
  line-height: 1;
}
#num5 {
  /* background-color:rgb(237, 50, 77); */
  line-height: 1;
}
#num6 {
  /* background-color:rgb(41, 184, 5); */
  line-height: 1;
}
#num7 {
  /* background-color:rgb(41, 184, 5); */
  line-height: 1;
}
#num8 {
  /* background-color: rgb(254, 230, 0); */
  line-height: 1;
}
#num9 {
  /* background-color: rgb(6, 93, 180); */
  line-height: 1;
}

.background-for-num1 {
  background-color:rgb(254, 230, 0);
}
.background-for-num2 {
  background-color:rgb(237, 50, 77);
}
.background-for-num3 {
  background-color:rgb(254, 230, 0);
}
.background-for-num4 {
  background-color: rgb(6, 93, 180);
}
.background-for-num5 {
  background-color:rgb(237, 50, 77);
}
.background-for-num6 {
  background-color:rgb(41, 184, 5);
}
.background-for-num7 {
  background-color:rgb(41, 184, 5);
}
.background-for-num8 {
  background-color: rgb(254, 230, 0);
}
.background-for-num9 {
  background-color: rgb(6, 93, 180);
}


.flex {
  display: flex;
  flex-direction: row;
  overflow:hidden;
  
}
.gutter.gutter-horizontal {
  cursor: ew-resize;
  
}
.titre_two {
  margin-left:1em;
  font-size:1em;
  line-height:1;
  padding-right:2.2vh;
}

.jauge {
  margin-top:-1em;
}
.ingredient_liste {
  position:relative;
}
.ingredient_liste_gramme {
  margin-top:11vh;
position:relative;
margin-left:30vh;

  
}
.ingredient_liste3 {
  top:0;
  margin-top:56.5em;
  margin-left:42em;
  position:absolute;

 
  
  

}
.ingredientprepa {
  position:relative;
  
  margin-left:1vh;
  
  
 
}

:root {
  --thumb-width: 30px;
  --thumb-height: 30px;
  --track-color: black;
  --thumb-color: black;
  --track-height: 3px;
  --track-width: 100%;
}
[for="range"] { 
  font-family: sans-serif;
  margin-bottom: 8px;
  display: block;
  font-size: 12px;
}
[type="range"] {
  -webkit-appearance: none;
  margin: 0;
  width: var(--track-width);
}
[type="range"]::-webkit-slider-runnable-track {
  width: var(--track-width);
  height: var(--track-height);
  background-color: var(--track-color);
  border: 0;
}
[type="range"]::-webkit-slider-thumb {
  border: 5px;
  width: var(--thumb-width);
  height: var(--thumb-height);
  border-radius: 50%;
  background: var(--thumb-color);
  -webkit-appearance: none;
  margin-top: calc(-1 * var(--thumb-height) / 2);
}
[type="range"]:focus {
  outline: none;
}
[type="range"]:focus::-webkit-slider-runnable-track {
  background-color: black;
}
/** FF*/
input[type="range"]::-moz-range-progress {
background-color: #43e5f7; 
}
input[type="range"]::-moz-range-track {  
background-color: #9a905d;
}
/* IE*/
input[type="range"]::-ms-fill-lower {
background-color: #43e5f7; 
}
input[type="range"]::-ms-fill-upper {  
background-color: #9a905d;
}

.titre_metslibanais {
  margin-left:3vh;
line-height:1;
padding-right:2em;
}
.image_differentmets {
  margin-left:3vh;

}

.pic {
  
  position:absolute;
  top:0;
  margin-top:44vh;
  margin-left:20vh;
}
@keyframes picanim{
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);  
  }
}


.pic{
   animation: picanim 2s;
}

.pic {
  transition: 0.70s;
  -webkit-transition: 0.70s;
  -moz-transition: 0.70s;
  -ms-transition: 0.70s;
  -o-transition: 0.70s;
 

}
.pic2 {
  
  position:absolute;
  top:0;
  margin-top:-12%;
  margin-left:40vh;
}
.pic2{
  animation: picanim 2s;
}

.pic2 {
 transition: 0.70s;
 -webkit-transition: 0.70s;
 -moz-transition: 0.70s;
 -ms-transition: 0.70s;
 -o-transition: 0.70s;


}
.pic3 {
  
  position:absolute;
  top:0;
  margin-top:25%;
  margin-left:100vh;
}
.pic3{
  animation: picanim 2s;
}

.pic3 {
 transition: 0.70s;
 -webkit-transition: 0.70s;
 -moz-transition: 0.70s;
 -ms-transition: 0.70s;
 -o-transition: 0.70s;


}
.pic4 {
  
  position:absolute;
  top:0;
  margin-top:-12%;
  margin-left:130vh;
  
}
.pic4{
  animation: picanim 2s;
}

.pic4 {
 transition: 0.70s;
 -webkit-transition: 0.70s;
 -moz-transition: 0.70s;
 -ms-transition: 0.70s;
 -o-transition: 0.70s;


}
.pic5 {
  
  position:absolute;
  top:0;
  margin-top:7%;
  margin-left:-18%;
}
.pic5{
  animation: picanim 2s;
}

.pic5 {
 transition: 0.70s;
 -webkit-transition: 0.70s;
 -moz-transition: 0.70s;
 -ms-transition: 0.70s;
 -o-transition: 0.70s;


}


.pic,
.pic2,
.pic3,
.pic4,
.pic5
{
  object-fit: contain;
}
.pic_roulette {
  object-fit: contain;
}




.pic_roulette1 {
  
  position:absolute;
  top:0;
  margin-top:30%;
  margin-left:10vh;
}

@keyframes anim1 {
  from {
    transform: rotate(0deg);
  }

  to  {
    transform: rotate(360deg);
  }
}

.pic_roulette_anim {
  animation: anim1 2s linear infinite !important;
}

.pic_roulette1 {
  animation: picanim 2s;
}

.pic_roulette1 {
 transition: 0.70s;
 -webkit-transition: 0.70s;
 -moz-transition: 0.70s;
 -ms-transition: 0.70s;
 -o-transition: 0.70s;


}
.pic_roulette2 {
  
  position:absolute;
  top:0;
  margin-top:15%;
  margin-left:150vh;
}
.pic_roulette2{
  animation: picanim 2s;
}

.pic_roulette2 {
 transition: 0.70s;
 -webkit-transition: 0.70s;
 -moz-transition: 0.70s;
 -ms-transition: 0.70s;
 -o-transition: 0.70s;


}

.pic_roulette3 {
  
  position:absolute;
  top:0;
  margin-top:5%;
  margin-left:100vh;
}
.pic_roulette3{
  animation: picanim 2s;
}

.pic_roulette3 {
 transition: 0.70s;
 -webkit-transition: 0.70s;
 -moz-transition: 0.70s;
 -ms-transition: 0.70s;
 -o-transition: 0.70s;


}
.pic_roulette4 {
  
  position:absolute;
  top:0;
  margin-top:45%;
  margin-left:80vh;
}
.pic_roulette4{
  animation: picanim 2s;
}

.pic_roulette4 {
 transition: 0.70s;
 -webkit-transition: 0.70s;
 -moz-transition: 0.70s;
 -ms-transition: 0.70s;
 -o-transition: 0.70s;


}
.pic_roulette5 {
  
  position:absolute;
  top:0;
  margin-top:6%;
  margin-left:60vh;
  
}
.pic_roulette5{
  animation: picanim 2s;
}

.pic_roulette5 {
 transition: 0.70s;
 -webkit-transition: 0.70s;
 -moz-transition: 0.70s;
 -ms-transition: 0.70s;
 -o-transition: 0.70s;


}
.pic_roulette6 {
  
  position:absolute;
  top:0;
  margin-top:12%;
  margin-left:40vh;
}
.pic_roulette6{
  animation: picanim 2s;
}

.pic_roulette6 {
 transition: 0.70s;
 -webkit-transition: 0.70s;
 -moz-transition: 0.70s;
 -ms-transition: 0.70s;
 -o-transition: 0.70s;


}
.pic_roulette7 {
  
  position:absolute;
  top:0;
  margin-top:40%;
  margin-left:120vh;
}
.pic_roulette7{
  animation: picanim 2s;
}

.pic_roulette7 {
 transition: 0.70s;
 -webkit-transition: 0.70s;
 -moz-transition: 0.70s;
 -ms-transition: 0.70s;
 -o-transition: 0.70s;

}
 .pic_roulette8 {
  
  position:absolute;
  top:0;
  margin-top:0%;
  margin-left:150vh;
  
}

.pic_roulette8{
  animation: picanim 2s;
}

.pic_roulette8 {
 transition: 0.70s;
 -webkit-transition: 0.70s;
 -moz-transition: 0.70s;
 -ms-transition: 0.70s;
 -o-transition: 0.70s;


}
.pic_roulette9 {
  
  position:absolute;
  top:0;
  margin-top:2%; 
  margin-left:30vh;
}
.pic_roulette9{
  animation: picanim 2s;
}

.pic_roulette9 {
 transition: 0.70s;
 -webkit-transition: 0.70s;
 -moz-transition: 0.70s;
 -ms-transition: 0.70s;
 -o-transition: 0.70s;


}
.pic_roulette10 {
  
  position:absolute;
  top:0;
  margin-top:45%;
  margin-left:20vh;
}
.pic_roulette10{
  animation: picanim 2s;
}
.pic_roulette10 {
 transition: 0.70s;
 -webkit-transition: 0.70s;
 -moz-transition: 0.70s;
 -ms-transition: 0.70s;
 -o-transition: 0.70s;
}

.pic_roulette11 {
  
  position:absolute;
  top:0;
  margin-top:35%;
  margin-left:50vh;
}
.pic_roulette11{
  animation: picanim 2s;
}
.pic_roulette11 {
 transition: 0.70s;
 -webkit-transition: 0.70s;
 -moz-transition: 0.70s;
 -ms-transition: 0.70s;
 -o-transition: 0.70s;
}
.pic_roulette12 {
  
  position:absolute;
  top:0;
  margin-top:45%;
  margin-left:145vh;
}
.pic_roulette12{
  animation: picanim 2s;
}
.pic_roulette12 {
 transition: 0.70s;
 -webkit-transition: 0.70s;
 -moz-transition: 0.70s;
 -ms-transition: 0.70s;
 -o-transition: 0.70s;
}
.pic_roulette13 {
  
  position:absolute;
  top:0;
  margin-top:5%;
  
  
  margin-left:130vh;
  
  
}
.pic_roulette13{
  animation: picanim 2s;
}
.pic_roulette13 {
 transition: 0.70s;
 -webkit-transition: 0.70s;
 -moz-transition: 0.70s;
 -ms-transition: 0.70s;
 -o-transition: 0.70s;
}
.pic_roulette14 {
  
  position:absolute;
  top:0;
  margin-top:15%;
  
  
  margin-left:10vh;
  
}
.pic_roulette14{
  animation: picanim 2s;
}
.pic_roulette14 {
 transition: 0.70s;
 -webkit-transition: 0.70s;
 -moz-transition: 0.70s;
 -ms-transition: 0.70s;
 -o-transition: 0.70s;
}


.drapeau_symbol {
  
  position:absolute;
  margin-left:-14%;

}
.drapeau_symbol{
  animation: picanim 2s;
}
.drapeau_symbol {
 transition: 0.70s;
 -webkit-transition: 0.70s;
 -moz-transition: 0.70s;
 -ms-transition: 0.70s;
 -o-transition: 0.70s;
}
.drapeau_symbol2 {
  
  position:absolute;
  margin-left:15%;
}
.drapeau_symbol2{
  animation: picanim 2s;
}
.drapeau_symbol2 {
 transition: 0.70s;
 -webkit-transition: 0.70s;
 -moz-transition: 0.70s;
 -ms-transition: 0.70s;
 -o-transition: 0.70s;
}
.drapeau_symbol3 {
  
  position:absolute;
  margin-left:45%;
  
}
.drapeau_symbol3{
  animation: picanim 2s;
}
.drapeau_symbol3 {
 transition: 0.70s;
 -webkit-transition: 0.70s;
 -moz-transition: 0.70s;
 -ms-transition: 0.70s;
 -o-transition: 0.70s;
}
.drapeau_symbol4 {
  
  position:absolute;
  margin-left:73%;
  
}
.drapeau_symbol4{
  animation: picanim 2s;
}
.drapeau_symbol4 {
 transition: 0.70s;
 -webkit-transition: 0.70s;
 -moz-transition: 0.70s;
 -ms-transition: 0.70s;
 -o-transition: 0.70s;
}
.descript_lieu {
  margin-left:3vh;
line-height:1;
padding-right:2em;

}
.descript_lieu {
  margin-left:3vh;
line-height:1;
padding-right:2em;

}
.descript_lieu {
  margin-left:3vh;
line-height:1;
padding-right:2em;

}




.descript_lieu {
  margin-left:3vh;
line-height:1;
padding-right:2em;

}

.container_couleur {
  width: 100%;
  height: 100%;

}
.row {
  display: flex;
  width: 100%;
  height: 50%;
  transition:  height .4s ease-in-out;

}
.cell {
  box-sizing: border-box;
  flex: 0 0 auto;
  position: relative;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  transition: width .4s ease-in-out, height .4s ease-in-out;
}
.row1 .column1 {
  background-color: rgb(41, 184, 5);
}
.row1 .column2 {
  background-color: rgb(254, 230, 0);
}
.row2 .column1 {
  background-color: rgb(237, 50, 77);
}
.row2 .column2{
  background-color:  rgb(6, 93, 180);
}



.switch-cell-1 .row1,
.switch-cell-2 .row1{
  height: 100%;
}
.switch-cell-1 .row2,
.switch-cell-2 .row2 {
  height: 0%;
}
.switch-cell-3 .row2,
.switch-cell-4 .row2 {
  height: 100%;
}
.switch-cell-3 .row1,
.switch-cell-4 .row1 {
  height: 0%;
}
.switch-cell-1 .column1,
.switch-cell-3 .column1{
  width: 100%;
}
.switch-cell-1 .column2,
.switch-cell-3 .column2 {
  width: 0%;
}
.switch-cell-2 .column2,
.switch-cell-4 .column2 {
  width: 100%;
}
.switch-cell-2 .column1,
.switch-cell-4 .column1 {
  width: 0%;
}


.bloc_jaune_fin {
  background-color:rgb(254, 230, 0);
  height:100%;
  width:100%;
  position:absolute;
  
}
.bloc_rouge_fin {
  background-color:rgb(237, 50, 77);
  height:100%;
  width:100%;
  position:absolute;
  
}
.bloc_bleu_fin {
  background-color:rgb(6, 93, 180);
  height:100%;
  width:100%;
  position:absolute;
  
}
.bloc_vert_fin {
  background-color:rgb(41, 184, 5);
  height:100%;
  width:100%;
  position:absolute;
  
}


#my-img {
 
  cursor: pointer;
  transition: 0.3s;
}


/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(41,184,5,0.9); /* Black w/ opacity */
}
.modal_rouge {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(237,50,77,0.9); /* Black w/ opacity */
}
.modal_jaune {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(254,230,0,0.9); /* Black w/ opacity */
}
.modal_bleu {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(6,93,180,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: black;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: black;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}




/* */
.container {
    display:flex;
    flex-wrap: wrap;
    padding: 5px;
}


.item {
    margin: 5px;
    width:10%;
    flex:auto;
    -webkit-filter: blur(5px);
    filter:blur(5px);
    transition-duration: 0.3s;
}
.item:hover {
    -webkit-filter: blur(5px);
    filter:blur(0px);
    transition-duration: 0.3s;
}
.header {
    
    
    position: absolute;
    width: 100%;
    z-index: 100;
  }
  
  .header ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    
  }
  
  .header li a {
    display: block;
    padding: 20px 20px;
    text-decoration: none;
  }
  
  .header li a:hover,
  .header .menu-btn:hover {
    background-color: #f4f4f4;
  }
  
  .header .logo {
    display: block;
    position:fixed;
    top:0;
    left:0;
    font-size: 1em;
    padding: 10px 20px;
    text-decoration: none;  

  }
  
  
  @keyframes logoanim{
    0% {
      transform: scale(0);
    }
    100% {
      transform: scale(1);  
    }
  }
  
  
  
  .logo{
     animation: logoanim 2s;
  }
 
  .logo {
    transition: 0.70s;
    -webkit-transition: 0.70s;
    -moz-transition: 0.70s;
    -ms-transition: 0.70s;
    -o-transition: 0.70s;
   
  
  }
  .logo:hover {
    transition: 0.70s;
  -webkit-transition: 0.70s;
  -moz-transition: 0.70s;
  -ms-transition: 0.70s;
  -o-transition: 0.70s;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
 
  }
  
  section {
    height: 70vh;
  }
  html {
    scroll-behavior: smooth;
  }
  
  
 
  /* menu */
  
  .header .menu {
    clear: both;
    max-height: 0;
    transition: max-height .2s ease-out;
  }
  
  /* menu icon */
  
  .header .menu-icon {
    cursor: pointer;
    display: inline-block;
    float: right;
    padding: 28px 20px;
    position: relative;
    user-select: none;
  }
  
  .header .menu-icon .navicon {
    background: #333;
    display: block;
    height: 2px;
    position: relative;
    transition: background .2s ease-out;
    width: 18px;
  }
  
  .header .menu-icon .navicon:before,
  .header .menu-icon .navicon:after {
    background: #333;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
  }
  
  .header .menu-icon .navicon:before {
    top: 5px;
  }
  
  .header .menu-icon .navicon:after {
    top: -5px;
  }
  
  /* menu btn */
  
  .header .menu-btn {
    display: none;
  }
  
  .header .menu-btn:checked ~ .menu {
    max-height: 240px;
  }
  
  .header .menu-btn:checked ~ .menu-icon .navicon {
    background: transparent;
  }
  
  .header .menu-btn:checked ~ .menu-icon .navicon:before {
    transform: rotate(-45deg);
  }
  
  .header .menu-btn:checked ~ .menu-icon .navicon:after {
    transform: rotate(45deg);
  }
  
  .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
  .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
    top: 0;
  }
  
  
  @media screen and (max-width: 1024px) {

    .rond_center {
      top:30%;
      
     
     }
     .titre_p2 {
      
      margin-top:3em;
      margin-left:5em;
      
    }
    
    .text_dessu_p2 {
      margin-top:10em;
      font-size:50%;
      
    }
    #double_fleche {
       
      
      margin-top:4em;
      margin-left:2em;
      width:9%;
      height:9%;
      
       
     }
     #double_fleche_droite { 
      margin-left:27em;
      margin-top:4em;
      width:9%;
      height:9%;
       
     }
    .fondrouge_p2 {
      width:50%;
      height:20%;
      
     }
    .fondbleu_p2 {
      margin-left:16em;
      width:50%;
      height:20%;
    } 
    .fondvert_p2 {
      height:25%;

    }
    #fondjaune_p2 {
    margin-top:10.7em;
    height:50%;
     
    }
    .titresection1 {
      margin-left:5em;
      font-size:70%;
      margin-top:0%;
      
    }
    .titresection2 {
      margin-left:5em;
      font-size:70%;
      margin-top:0%;
      
    }
    #rond_make {
      margin-left:9em;
    }
    #titre_deroulette {
      margin-left:13.7em;
      margin-top:7.5em;
    }
    #fondjaune_p2 {
      height:50%;

    }
    .pic_roulette1 {
      margin-top:23em;
    }
    
    
    
    .pic_roulette5 {
      margin-top:22em;
    }
    .pic_roulette6 {
      margin-top:27em;
      margin-left:20em;
    }
    
    
    .pic_roulette8 {
      margin-top:27em;
    }
    .pic_roulette9 {
      margin-top:27em;
      margin-left:12em;
    }
    .pic_roulette10 {
      margin-top:12em;
      margin-left:5em;
    }
    .pic_roulette11 {
      margin-top:7em;
      margin-left:15em;
    }
    .pic_roulette14 {
      margin-top:12em;
      margin-left:23em;
    }
    .drapeau_symbol {
      display:none;
    }
    .drapeau_symbol2 {
      display:none;
    }
    .drapeau_symbol3 {
      display:none;
    }
    .drapeau_symbol4 {
      display:none;
    }
    .pic {
      width:30%;
      height:30%;
      margin-top:12em;
      margin-left:3em;
    }
    .pic2 {
      width:30%;
      height:30%;
      margin-top:-5em;
      margin-left:18em;
    }
    .pic3 {
      width:30%;
      height:30%;
      margin-top:3em;
      margin-left:29em;
     
    }
    .pic4 {
      width:30%;
      height:30%;
      margin-top:-5em;
      margin-left:4em;
    }
    .pic5 {
      width:30%;
      height:30%;
      margin-left:-8em;
    }
    .ingredient_liste_gramme {
      margin-left:1em;
      margin-top:4.2em;
    }
    .recette {
      font-size:75%;
    }
    #titre_deroulette_var {
      top:0;
      margin-top:4.3em;
    }
    .ingredient_liste3 {
    display:none;   
    }
    .bloc_vert_fin {
      height:40%;
    }
    .bloc_jaune_fin {
      height:40%;
    }
    .bloc_rouge_fin {
      height:40%;
    }
    .bloc_bleu_fin {
      height:40%;
    }
    .text {
      margin-top:1em;
    }
   
  }

  /* 48em = 768px */
  
  @media (min-width: 48em) {
    .header li {
      float: left;
    }
    .header li a {
      padding: 20px 30px;
    }
    .header .menu {
      clear: none;
      float: right;
      max-height: none;
    }
    .header .menu-icon {
      display: none;
    }
   
  
  }
  @media screen and (max-width: 480px) {

    .rond_center {
     top:35%;
     
    
    }
    .fondbleu_p2 {
      margin-left:7.8em;
      display:none;
    } 
    .fondrouge_p2 {
      display:none;
    }
    #double_fleche {
    display:none;
    }
    #double_fleche_droite {
      display:none;
    }
    .text_dessu_p2 {
      font-size:25%;
      margin-top:25em;
    }
    .titre_p2 {
      margin-left:2em;
      margin-top:6em;
    }
    .logo {
      width:10%;
      height:10%;
    }
    
    .header {
      width:10%;
      height:10%;
    }
    #rond_make {
      margin-left:4.5em;
    }
    #fondjaune_p2 {
      margin-top:0em;
      height:65%;
    }
    .fondvert_p2 {
      height:35%;
    }
    .titresection1 {
      font-size:35%;
      margin-left:4em;
    }
    .titresection2 {
      font-size:35%;
      
    }
    #titre_deroulette {
      margin-left:6.9em;
      margin-top:5em;
      
    }
    .pic_roulette14 {
      margin-top:7em;
      margin-left:3em;
    }
    .pic_roulette11 {
      margin-top:4em;
      margin-left:7em;
      
    }
    .pic_roulette10 {
      margin-top:11em;
      margin-left:0.2em;
    }
    .pic_roulette9 {
      margin-top:7em;
     
    }
    .pic_roulette8 {
      margin-top:16em;
      margin-left:3em;
    }
    .pic_roulette1 {
      margin-top:14em;
      margin-left:12em;
    }
    
    
    
    .pic_roulette5 {
      margin-top:17em;
      margin-left:9em;
    }
    .pic_roulette6 {
      margin-top:27em;
      margin-left:20em;
    }
    .ingredient_liste_gramme {
      margin-left:1em;
      margin-top:4.5em;
      
    }
    .ingredient_liste3 {
      display:none;
    }
    #rond_make_2 {
      margin-left:1em;
    }
    
    .drapeau_symbol {
      display:none;
    }
    .drapeau_symbol2 {
      display:none;
    }
    .drapeau_symbol3 {
      display:none;
    }
    .drapeau_symbol4 {
      display:none;
    }
    #titre_deroulette_var {
      top:0;
      margin-top:1.7em;
      margin-left:1em;
    }
    .pic {
      width:30%;
      height:30%;
      margin-top:7.5em;
      margin-left:2em;
      
    }
    .pic2 {
      width:30%;
      height:30%;
      margin-top:-4em;
      margin-left:13em;
      
    }
    .pic3 {
      width:30%;
      height:30%;
      margin-top:2em;
      margin-left:14em;
      
     
    }
    .pic4 {
      width:30%;
      height:30%;
      margin-top:-4em;
      margin-left:4em;
      
    }
    .pic5 {
      width:30%;
      height:30%;
      margin-left:-3.5em;
      
    }
    .jauge {
      font-size:100%;
    }
    .text {
      margin-top:0.5em;
    }
    .recette {
      font-size:70%;
    }
    .ingredientprepa {
      font-size:80%;
    }
    .bloc_jaune_fin {
      height:20%
    }
    .bloc_rouge_fin {
      height:20%
    }
    .bloc_bleu_fin {
      height:20%
    }
    .bloc_vert_fin {
      height:20%
    }
    
      
   
  }