:root {
     --title: #efefef;
     --slider: hsl(210, 19%, 40%);
     --track: #888888;
}
 * {
     text-align: center;
     font-family: 'Lobster', cursive;
     box-sizing: border-box;
}
 #infolayer {
     visibility:hidden;
     position:fixed;
     width:80vw;
     height:80vh;
     top:10vw;
     left:10vw;
     background:#efefef;
     padding:60px;
     font-family:sans-serif;
     font-size:20px;
     text-align:center;
     z-index:1000;
     color:#333333;
}
 #top_section {
     background:#000000;
}
 .content {
     text-align:center;
}
 body {
     margin: 0;
     color:#efefef;
     background:#ffffff;
}
 #logosohomix {
     margin-top:30px;
     max-width:350px;
}
 #title {
     display:block;
     font-size: 1.8rem;
     margin: 0px 25px 20px 0;
     color: #FFFFFF;
}
 .titre_section {
     margin-top:50px;
     font-size: 2rem;
     color: #333333;
}
 .sous_titre_section {
     font-size: 1.2rem;
     color: #555555;
     margin-bottom:50px;
}
 #categories {
     border: 0px solid #FF0000;
     padding-top:20px;
     padding-bottom:20px;
}
 .bouton_cat {
     position:relative;
     display:inline-block;
     width:auto;
     height:45px;
     color:#FFFFFF;
     background: #1b1a21;
     border-radius:10px;
     margin:10px;
     padding-left:15px;
     padding-right:15px;
     padding-top:8px;
     font-size:25px;
     cursor: pointer;

}
 .bouton_cat:hover {
     background: #444444;
}
 #button_cart {
     position:relative;
     display:inline-block;
     width:auto;
     height:auto;
     color:#FFFFFF;
     background: #a10957;
     border-radius:10px;
     margin:10px;
     padding-left:15px;
     padding-right:15px;
     padding-top:8px;
     padding-bottom:8px;
     font-size:25px;
}
 #totalnicotine {
     display:block;
     margin-top:20px;
     margin-bottom:50px;
     font-size:2em;
}
 #container_fruite {
     display:block;
     padding-top:50px;
     border:0px solid #FFFFFF;
     transition: all 2s ease-out;
     background:#000000;
     box-shadow: 5px 5px 5px #a3a3a3;
}
 #container_classic {
     display:none;
     left:10vw;
     border:0px solid #FF0000;
     transition: all 2s ease-out;
     background:#000000;
}
 #container_gourmand {
     display:none;
     left:10vw;
     border:0px solid #FF00FF;
     transition: all 2s ease-out;
     background:#000000;
}
 #container_original {
     display:none;
     left:10vw;
     border:0px solid #FFFFFF;
     transition: all 2s ease-out;
     background:#000000;
}
 #container_menthol {
     display:none;
     left:10vw;
     border:0px solid #FFFFFF;
     transition: all 2s ease-out;
     background:#000000;
}
 #container_additifs {
     display:none;
     left:10vw;
     border:0px solid #FFFFFF;
     transition: all 2s ease-out;
     background:#000000;
}
 #container_nicotine {
     display:none;
     left:10vw;
     border:0px solid #FFFFFF;
     transition: all 2s ease-out;
     background:#000000;
}
 #container_tout {
     display:none;
     left:10vw;
     border:0px solid #FFFFFF;
     transition: all 2s ease-out;
     background:#000000;
}
 #total_txt {
     position:absolute;
     margin-top:120px;
     margin-left:-85px;
     z-index:20;
     color:#000000;
     border:0px solid #FF0000;
     width:72px;
     font-size:30px;
}
 #nicotine {
     color:#000000;
}
 #QR_buttons {
     height:500px;
     Text-align:center;
     border: 0px solid #FF0000;
}

 .valign {
     display: table;
     width: 100%;
     height: 100%;
}
 .valign > div {
     display: table-cell;
     width: 100%;
     height: 100%;
}
 .valign.bottom > div {
     vertical-align: bottom;
}

 #flacon {
     width:100px;
     height:325px;
     border: 0px solid #efefef;
     z-index:2;
     background-image: url('GUI/flacon.png');
     background-size:cover;
     margin-left:auto;
     margin-right:auto;
     vertical-align: bottom;
}
 @keyframes animate {
     0%, 100% {
         clip-path: polygon( 0% 45%, 16% 44%, 33% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100% );
    }
     50% {
         clip-path: polygon( 0% 60%, 15% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100% );
    }
}
 @keyframes animate_flacon {
     0%, 100% {
         clip-path: polygon(0 8%, 7% 6%, 14% 5%, 21% 5%, 28% 6%, 34% 8%, 40% 12%, 46% 17%, 50% 20%, 54% 23%, 60% 25%, 66% 26%, 70% 26%, 77% 25%, 83% 23%, 89% 21%, 95% 19%, 100% 17%, 100% 100%, 0% 100%);
    }
     50% {
         clip-path: polygon(0 15%, 9% 21%, 14% 23%, 18% 25%, 21% 26%, 30% 28%, 32% 28%, 40% 27%, 46% 26%, 52% 23%, 57% 19%, 62% 15%, 68% 11%, 73% 8%, 79% 6%, 86% 5%, 93% 5%, 100% 6%, 100% 100%, 0% 100%);
    }
}

 #flacon_fill_1 {
     width:81px;
     height:224px;
     background-color:#FF00FF;
     margin-left:10px;
     margin-bottom:10px;
     background-image: url("GUI/bg_flacon.jpg");
     background-size: cover;
     background-position:center;
    
}

 .flacon_fill_1run {
  animation: animate_flacon 8s ease-in-out infinite;
 
 }
 .flacon_fill_1stop {
   animation:none;
   clip-path: inset(20px 00px 00px 0px);
}

 #QRGenerated {
     width:300px;
     height:300px;
}
 .arome {
     display:inline-block;
     width:220px;
     height:220px;
     background:#1b1a21;
     vertical-align:top;
     background-size: 100%;
     margin:10px;
     border-radius:50%;
     //rotate: 2deg;
     opacity:1;
     transition: all 0.3s ease-out;
     background-position: center;
     border:0px solid #FF0000;
     margin-bottom:100px;
}
 .arome:hover {
     background-size: 110%;
}
 .buttons {
     width:100%;
     height:100%;
     padding-top:90px;
}
 .infobulle {
     display:block;
     margin-top:-70px;
     margin-bottom:50px;
     margin-left:100px;
     width:20px;
     height:20px;
     background:rgba(255, 255, 255, 1);
     border-radius: 50%;
     color:#1b1a21;
     cursor: pointer;
}
 .button_minus {
     display:none;
     padding-top:7px;
     width:40px;
     height:40px;
     background:rgba(255, 255, 255, 1);
     font-size:1.4em;
     color:#000000;
     border-radius: 50%;
     box-shadow: 1px 1px 3px #a3a3a3;
     cursor: pointer;
}
 .button_plus {
     display:inline-block;
     padding-top:7px;
     width:40px;
     height:40px;
     background:rgba(255, 255, 255, 1);
     font-size:1.4em;
     color:#000000;
     border-radius: 50%;
     box-shadow: 1px 1px 3px #a3a3a3;
     cursor: pointer;
}
 .plusmoins {
     width:25px;
     height:25px;
}
 .pourcentage {
     display:none;
     width:80px;
     height:40px;
     padding-top:7px;
     background:rgba(255, 255, 255,1);
     font-size:1.4em;
     color:#000000;
     border-radius: 5px;
     box-shadow: 1px 1px 3px #a3a3a3;
}
 .affichageNom {
     position:relative;
     top:5;
     padding-top:10px;
     padding-bottom:10px;
     width:100%;
     height:auto;
     background:#efefef;
     color:#1b1a21;
     font-size:25px;
     border-radius: 5px 5px 5px 5px;
}
 #recap-zone-container {
     height:auto;
     border:0px solid #FF0000;
     background-image: url("GUI/bg.jpg");
     text-align:center;
     padding-top:30px;
     padding-bottom:30px;
     text-align:center;
}
 #recap-zone {
     position:relative;
     left:0px;
     bottom:0px;
     height:auto;
     width:100%;
     border:0px solid #FF0000;
     text-align:center;
}
 .recap {
     bottom:0;
     display:none;
     width:100%;
     max-width:600px;
     height:46px;
     text-align:center;
     vertical-align:middle;
     padding-top:10px;
     margin-left:auto;
     margin-right:auto;
     background:#1b1a21;
     margin-bottom:3px;
     border-radius:30px;
     box-shadow: 1px 1px 3px #000000;
}
 .bullet_color {
     display: inline-block;
     width: 25px;
     height: 25px;
     background-color:#555555;
     margin-top: -3;
     border: 1px solid #000000;
     border-radius:50%;
}
 .recap_button_minus {
     display:inline-block;
     width: 25px;
     height: 25px;
     background-image: url('GUI/moins.svg');
     background-size:cover;
}
 .recap_pourcentage {
     display:inline-block;
     width:70px;
     height:20px;
     font-size:28px;
}
 .recap_button_plus {
     display:inline-block;
     width: 25px;
     height: 25px;
     background-image: url('GUI/plus.svg');
     background-size:cover;
}
 .recap_arome {
     display:inline-block;
     margin-left:12px;
     font-size:25px;
     width:62%;
     text-align:left;
}
 .recap_button_del {
     display:inline-block;
     width: 25px;
     height: 25px;
     top:12px;
     right:10px;
     background-image: url('GUI/del.svg');
     background-size:cover;
}
 #nicotine_minus {
     padding-top:7px;
     background:#333333;
     color:#efefef;
}
 #nicotine_plus {
     padding-top:7px;
     background:#333333;
     color:#efefef;
     margin-left:30px;
}
 .nicotine_range {
     display:block;
     margin-top:15px;
     margin-bottom:15px;
}
 .nico_titre {
     display:inline-block;
     font-size:2.0em;
     margin-left:15px;
}
 #valnicotine1 {
     display:inline-block;
     font-size:2.0em;
     margin-left:10px;
}
 #valnicotine2 {
     display:inline-block;
     font-size:2.0em;
     margin-left:10px;

}
















 @media screen and (max-width: 1000px) {
     #logosohomix {
         margin-top:30px;
         max-width:80vw;
    }
     #title {
         font-size: 3.5rem;
    }
     #infolayer {
         font-size:40px;
         font-family:sans-serif;
    }
     .bouton_cat {
         width:auto;
         height:auto;
         margin:10px;
         padding-left:15px;
         padding-right:15px;
         padding-top:8px;
         padding-bottom:18px;
         font-size:60px;
    }
     .arome {
         width:400px;
         height:400px;
    }
     .infobulle {
         display:block;
         margin-top:-100px;
         margin-bottom:79px;
         margin-left:191px;
         width:40px;
         height:40px;
         background:rgba(255, 255, 255, 0.5);
         border-radius: 50%;
         color:#1b1a21;
         font-size:32px;
         cursor: pointer;
    }
     .affichageNom {
         font-size:40px;
    }
     .buttons {
         width:100%;
         height:100%;
         padding-top:145px;
    }
     .button_minus {
         padding-top:0px;
         width:80px;
         height:80px;
         font-size:3.8em;
         color:#000000;
         cursor: pointer;
    }
     .button_plus {
         padding-top:0px;
         width:80px;
         height:80px;
         font-size:3.8em;
         color:#000000;
         cursor: pointer;
    }
     .plusmoins {
         width:50px;
         height:50px;
         margin-top:15px;
    }
     .pourcentage {
         display:none;
         width:160px;
         height:80px;
         margin-top:0px;
         font-size:3.4em;
         margin-left:15px;
         margin-right:15px;
    }
     .recap {
         max-width:900px;
         height:80px;
         margin-bottom:3px;
         border-radius:40px;
    }
     .bullet_color {
         width: 50px;
         height: 50px;
    }
     .recap_button_minus {
         width: 50px;
         height: 50px;
    }
     .recap_pourcentage {
         width:140px;
         height:40px;
         font-size:56px;
    }
     .recap_button_plus {
         width: 50px;
         height: 50px;
    }
     .recap_arome {
         margin-left:24px;
         font-size:50px;
         width:50%;
    }
     .recap_button_del {
         width: 50px;
         height: 50px;
         top:24px;
         right:20px;
    }
     .nico_titre {
         display:inline-block;
         font-size:4.0em;
         margin-left:15px;
    }
     #valnicotine1 {
         display:inline-block;
         font-size:4.0em;
    }
     #valnicotine2 {
         display:inline-block;
         font-size:4.0em;
    }
     #button_cart {
         font-size:65px;
    }
}