*{box-sizing: border-box}
:root {
    --lightBlue: #b7dce1;
    --blue: #002f56;
    --beige: #f2f0e0;
    --orange: #fe5c38;
}

/*Slide class---------------------*/

.transitionSlower {transition: ease-in-out 1.3s; transition-delay: 1.3s;}
.transitionSlow {transition: ease-in-out 1s; transition-delay: 1s;}
.transitionMedium {transition: ease-in-out 0.6s; transition-delay: 0.6s;}
.transitionFast {transition: ease-in-out 0.3s; transition-delay: 0.3s;}
.slid-out-left {transform: translate(-50px, 0px); opacity: 0.0001;}
.slid-out-right {transform: translate(50px, 0px); opacity: 0.0001;}
.slid-out-bottom {transform: translate(0, 50px); opacity: 0.0001;}
.slid-out-up {transform: translate(0, -50px); opacity: 0.0001;}
.slid-in {transform: translate(0px, 0px); opacity: 1;}

/*--------------------------------*/

body, html {margin:0; background-color:white; font-family: 'Montserrat', sans-serif; font-size:0px; position: relative; scroll-behavior: smooth; overflow-x: hidden;}
h1,h2,h3,h4,h5,h6{outline:none;font-weight:inherit;font-size:inherit;color:inherit;margin:0;padding:0;display:inline}
a {text-decoration: none; color: inherit;}
.amiri {font-family: 'Amiri', serif; font-stretch: ultra-expanded}
.wrapper {margin:0px auto; max-width: 1270px; width: 90%;}
.text-wrapper {max-width: 800px; padding: 40px 0;}
.title {font-size:80px; line-height:72px; letter-spacing:-2px}
.heading {font-size:30px; }
.subtitle {font-size:24px;}
.text {font-size:16px; line-height:22px; margin: 0;}
.white {color:#FFF}
.bg-white {background-color:#FFF}
.gray {color:#828282}
.bg-gray {background-color:#828282}
.lightGray {color:#f9f9f9}
.bg-lightGray {background-color:#f9f9f9}
.lightBlue {color: var(--lightBlue);}
.bg-lightBlue {background-color: var(--lightBlue);}
.blue {color: var(--blue);}
.bg-blue {background-color: var(--blue);}
.beige {color: var(--beige);}
.bg-beige {background-color: var(--beige);}
.black {color:#000}
.bg-black {background-color:#000}
.bg-orange {background-color: var(--orange)}
.caps {text-transform:uppercase}
.bold {font-weight:700}
.semi-bold {font-weight: 500;}
.light {font-weight:300}
.thin {font-weight:200;}
.rtl {direction:rtl}
.ltr {direction:ltr}
.left {text-align:left}
.right {text-align:right}
.center {text-align:center}
.hidden {display: none !important; opacity: 0;}
.relative {position: relative;}
.motion {-webkit-transition: all 0.2s linear;-moz-transition: all 0.2s linear;-o-transition: all 0.2s linear}

.text14 {font-size: 14px;}
.text16 {font-size: 16px; line-height: 22px;}
.text18 {font-size: 18px;}
.text20 {font-size: 20px;}
.text22 {font-size: 22px;}
.text26 {font-size: 26px; line-height: 30px;}
.text28 {font-size: 28px; line-height: 35px;}
.text30 {font-size: 30px;}
.text34 {font-size: 34px; letter-spacing:-1px; line-height:32px}
.text40 {font-size: 40px; letter-spacing:-1px; line-height: 38px;}
.text45 {font-size: 45px; letter-spacing:-1px; line-height: 42px;}
.text50 {font-size: 50px; line-height: 55px}
.text60 {font-size: 60px; line-height: 0.7;}

.cta {background-color: var(--blue); color: var(--lightBlue); text-transform: uppercase; padding: 12px 60px; border-radius: 50px; font-size: 18px; cursor: pointer; font-weight: bold; white-space: nowrap;}
.cta:hover {background-color: var(--orange); color: var(--blue)}
.confetti {z-index: 50;}

/* Legal popup */

#legal-popup {display:none; position:fixed; width:100vw; height:120vh; background:rgba(0,0,0,0.8); z-index:100000000; top:0; overflow:scroll; overscroll-behavior:contain}
#legal-popup .white {color: white;}
#legal-popup .cell {display:table-cell; text-align:center; vertical-align:middle; padding-bottom:20vh}
#legal-popup .container {max-width:600px; width:80%; padding:20px; display:inline-block; background-color: white;}
#legal-popup .container p {margin: 10px 0;}

/* Legal popup */

#navigation {padding: 30px 0 20px 0; background-color: #002f56; position:fixed; z-index:1100; width:100%; top:0}
#navigation .burger {display:none; cursor:pointer}
#navigation .burger .bar {width:35px; height:3px; margin:5px 0px}
#navigation .clicked .bar {background: var(--lightBlue); width:35px; height:3px}
#navigation .clicked .bar:nth-child(1) {transform:rotate(-315deg) translateX(0px); background: var(--orange)}
#navigation .clicked .bar:nth-child(2) {width:0px; height:0px}
#navigation .clicked .bar:nth-child(3) {transform: rotate(315deg) translate(6px,-6px)}
#navigation .menustd {display: inline-block; vertical-align: bottom; width: 65%;}
#navigation .menustd .subtitle:hover {color: var(--orange)}
#navigation .logo {display: inline-block; vertical-align: bottom; width: 25%;}
#navigation .language {display: inline-block; vertical-align: bottom; width: 10%;}
#navigation .language .subtitle:hover {color: var(--lightBlue)}

#mobile {padding:130px 5%; position:fixed; top:0; width:90%; max-width:500px; height:100%; bottom:0px; z-index:1000; background: linear-gradient(180deg, rgba(182,220,225,1) 40%, rgba(147,204,217,1) 75%);}
#mobile .tab {margin:40px 0px; display:block}
#mobile .tab:hover {color: var(--orange)}
.menu_hidden {margin-left:-100%;}

#hero {position: relative; background: linear-gradient(180deg, rgba(235,222,163,1) 10%, rgba(242,240,224,1) 55%); height:800px; padding-top:100px; padding-bottom:50px}
#hero .wrapper {max-width:1024px; position: relative; z-index: 100; padding: 100px 0 0 0; position:relative; z-index:150}
#hero .two-block-small {display: inline-block; vertical-align: top; width: 50%;}
#hero .bottle-container {display:inline-block; max-width:260px; width:100%; position:relative; z-index:10}
#hero .bottle-container img {width:100%}
#hero .bottle-container .animate {position:absolute; opacity:0}
#hero .shadow {margin-left:2%; width:95%; height:70px; position:relative; margin-top:-60px; opacity:1}
#hero .wave {z-index:100}

#section-1 {padding: 400px 0 180px;position:relative; z-index:100}
#section-1 .transform-illustration {transform:scale(1.15) translateX(-80px) translateY(50px)}
#section-1 .two-block {width: 50%; display: inline-block; vertical-align: middle; position: relative;}
#section-1 .two-block:first-of-type {padding-top: 100px; padding-right: 80px;}
#section-1 .two-block .illustration {position: absolute; right: 180px;}
#section-1 .wrapper .two-block .illu1 {position: relative; z-index: 40; width: 65%;}
#section-1 .wrapper .two-block .illu2 {z-index: 30; bottom: 25%; right: 5%; width: 65%;}
#section-1 .wrapper .two-block .illu3 {right: -22%; z-index: 20; bottom: 80%; width: 80%;}
#section-1 .wrapper .two-block .illu4 {z-index: 10; bottom: 45%; right: 17%; width: 60%;}

#produit {position: relative; background: linear-gradient(180deg, rgba(235,222,163,1) 10%, rgba(242,240,224,1) 55%); padding: 120px 0;}
#produit .bottle-container {display:inline-block; max-width:260px; width:100%; position:relative; z-index:10}
#produit .bottle-container img {width:100%}
#produit .glass-container {display:inline-block; max-width:460px; width:100%; position:relative; z-index:10; background:url(../img/white_dot.png) no-repeat 95% 60%; background-size:100%}
#produit .glass-container img {width:100%}
#produit .shadow {margin-left:2%; width:75%; height:70px; position:relative; margin-top:-60px; opacity:1}
#produit .two-block-small-container {width: 100%; margin: 0 auto; position: relative; z-index: 100;}
#produit .two-block-small-container .two-block-small {display: inline-block; vertical-align: middle; width: 50%;}
#produit .two-block-small-container .two-block-small .logo-assemble {width: 50%; padding:40px 0px; display:inline-block}
#produit .two-block-small-container .two-block-small .img-bouteille {width: 25%;}

#elaboration {position: relative; padding: 80px 0 100px;}
#elaboration .illu1 {width:15%; right:240px; z-index:20; top:245px; position:absolute}
#elaboration .illu2 {width:20%; z-index:30; right:100px; top:65px}
#elaboration .illu3 {width:30%; z-index:10; top:50px; right:100px}
#elaboration .illu4 {width:40%; right:-180px; top:40px}
#elaboration .two-block-small-container {width: 100%; margin: 0 auto; padding: 100px 0 0 0; position: relative; z-index: 100;}
#elaboration .two-block-small-container .two-block-small {display: inline-block; vertical-align: bottom; width: 50%;}
#elaboration .two-block-small .illustration {position: absolute;}

#section-4 .slideshow {display:inline-table; width:90%; max-width:1600px; padding:120px 0px 80px}
#section-4 .slideshow .arrow {display:table-cell; width:5%; min-width:20px; vertical-align:middle; cursor:pointer}
#section-4 .slideshow .arrow img {max-width:30px; width:100%}
#section-4 .slider-container {display:table-cell; width:90%; vertical-align:middle; overflow:hidden}
#section-4 .slider-container .slide-wrapper {white-space: nowrap; transition: ease-in-out .3s; overflow:hidden; scroll-behavior:smooth}
#section-4 .slider-container .slide {white-space:initial; width:20%; display:inline-block; vertical-align:top; background:url(../img/white_dot.png) no-repeat center 40%; background-size:50%}
#section-4 .slider-container .img-wrapper {width:90%; height:40vw; max-height:400px; background:#ccc; display:inline-block; overflow:hidden; position:relative}
#section-4 .slider-container .slide .img {width:100%; object-fit:cover; object-position:center; height:100%}
/*
#section-4 {padding: 130px 0 80px; position: relative; display: flex; align-items: center;}
#section-4 .arrow {width: 25px; position: absolute; z-index: 500; cursor: pointer;}
#section-4 .arrow-left {left: 7vw;}
#section-4 .arrow-right {right: 7vw;}
#section-4 .imgs-container {white-space: nowrap; transition: ease-in-out .3s;}
#section-4 .imgs-container .img-carrousel-container {width: 20%; height: 20vw; display: inline-block; vertical-align: middle; padding: 10px;}
#section-4 .imgs-container .img-carrousel-container .img-carrousel {width: 100%; object-fit: cover; height: 100%;}
*/

#section-5 {padding: 60px 0; background: linear-gradient(180deg, rgba(235,222,163,1) 10%, rgba(242,240,224,1) 55%);}
#section-5 .two-block-small-container {width: 100%; margin: 0 auto; position: relative; z-index: 100;}
#section-5 .two-block-small-container .two-block-small {display: inline-block; vertical-align: middle; width: 50%;}

#section-5 .click-dot {position:absolute; width:35px; height:35px; border-radius:100px; cursor:pointer; font-size:25px; line-height:35px; font-weight:bold; background:var(--blue); color:var(--lightBlue)}
#section-5 .click-dot:hover {background:var(--orange); color:var(--blue)}
#section-5 .hover-content {opacity:0; height:0px; overflow:hidden}
#section-5 .cd1 {margin:125px 110px}
#section-5 .cd2 {margin:35px 280px}
#section-5 .cd3 {margin:120px 465px}
#section-5 .cd4 {margin:380px 205px}
#section-5 .cd5 {margin:240px 305px}
#section-5 .cd6 {margin:270px 445px}

#cocktails {padding: 120px 0 ; background: linear-gradient(180deg, rgba(231,225,200,1) 10%, rgba(237,226,173,1) 55%);}
#cocktails .slideshow {display:inline-table; width:90%; max-width:1400px}
#cocktails .slideshow .arrow {display:table-cell; width:5%; min-width:20px; vertical-align:middle; cursor:pointer}
#cocktails .slideshow .arrow img {max-width:30px; width:100%}
#cocktails .slider-container {display:table-cell; width:90%; vertical-align:middle; overflow:hidden}
#cocktails .slider-container .slide-wrapper {white-space: nowrap; transition: ease-in-out .3s; overflow:hidden; scroll-behavior:smooth}
#cocktails .slider-container .slide {padding-bottom:80px; white-space:initial; width:33.3%;display:inline-block; vertical-align:top; background:url(../img/white_dot.png) no-repeat center 40%; background-size:50%}
#cocktails .slider-container .slide .glass {width:55%}
#cocktails .slider-container .slide .label {font-size:0px; transform:scale(1); white-space:pre; text-align:center}
#cocktails h3 {font-size:18px;}

#section-6 {position: relative; background: linear-gradient(180deg, rgba(182,220,225,1) 40%, rgba(147,204,217,1) 75%); padding: 60px 0;}
#section-6 .wrapper {max-width:1024px}
#section-6 .bottle-container {display:block; margin:0px 0px 0px 220px; width:160px; position:relative; z-index:10;}
#section-6 .bottle-container img {width:100%}
#section-6 .shadow {margin-left:150px; width:300px; height:70px; position:absolute; margin-top:-60px; opacity:1; display:block}
#section-6 .two-block-small-container {width: 100%; margin: 0 auto; position: relative; z-index: 100;}
#section-6 .two-block-small-container .two-block-small {display: inline-block; vertical-align: middle; width: 50%; padding-left:5%}
#section-6 .two-block-small-container .two-block-small:first-of-type {background:url(../img/white_dot.png) no-repeat 95% 60%; background-size:60%}

.wave {background: url(../img/wave.svg) repeat-x; position: absolute; bottom: 0px; width: 6400px; height: 198px; animation: wave 12s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite; transform: translate3d(0, 0, 0);}
.wave:nth-of-type(2) {top: -175px; animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -1.25s infinite; opacity: 1;}

@keyframes wave {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: -1600px;
  }
}

@keyframes swell {
  0%, 100% {
    transform: translate3d(0,-25px,0);
  }
  50% {
    transform: translate3d(0,5px,0);
  }
}

@media (max-width:1400px) {
  #hero .two-block-small-container {width: 70%;}

  #section-5 .click-dot {position:absolute; width:3vw; height:3vw; border-radius:100px; cursor:pointer; font-size:2vw; line-height:3vw; font-weight:bold}
  #section-5 .cd1 {margin:9vw 8vw}
  #section-5 .cd2 {margin:2vw 20vw}
  #section-5 .cd3 {margin:9vw 32vw}
  #section-5 .cd4 {margin:26vw 14vw}
  #section-5 .cd5 {margin:16vw 21vw}
  #section-5 .cd6 {margin:18vw 31vw}
}

@media (max-width:1250px) {
  /* #section-1 .two-block {width: 100%;} */
}

@media (max-width:1150px) {
  #section-4 .slider-container .slide {width:33.33%}

  #section-6 .bottle-container {margin:0px auto 0px auto; width:30%}
  #section-6 .shadow {margin-left:0%; margin-top:-60px; padding:0% 22%; width:100%; height:70px; position:absolute; opacity:1; display:block}
  #section-6 .two-block-small-container .two-block-small {padding-left:5%}
  #section-6 .two-block-small-container .two-block-small:first-of-type {padding-left:0%; background:url(../img/white_dot.png) no-repeat center 60%; background-size:60%}
}

@media (max-width:1335px) {
  #elaboration .transform-illustration {opacity:1}
  #elaboration .illu1 {width:15%; right:24%; z-index:20; top:190px; position:absolute}
  #elaboration .illu2 {width:20%; z-index:30; right:13%; top:65px}
  #elaboration .illu3 {width:30%; z-index:10; top:50px; right:13%}
  #elaboration .illu4 {width:40%; right:-80px; top:40px}
  #cocktails .slider-container .slide .label {font-size:0px; transform:scale(18) translateY(2px); white-space:pre; text-align:center}
  #cocktails .slider-container .slide {background:url(../img/white_dot.png) no-repeat center 30%; background-size:50%}
  #cocktails h3 {font-size:1px; line-height:100%}
}
@media (max-width:1100px) {
  #section-1 .two-block:last-of-type {padding-top: 100px;}
  .as11, .as12, .as13, .as14, .as19, .as20, .as21, .as22, .as23, .as24, .as25 {display:none; opacity:0}
}

@media (max-width:1000px) {
  #hero .two-block-small-container {width: 95%;}
}

@media (max-width:900px) {
 .cta {padding: 8px 30px; border-radius: 50px; font-size: 14px}
 #navigation {padding:20px 10px 10px 10px}
 #navigation .menustd {display:none}
 #navigation .burger {display:inline-block; vertical-align:10px; width:30%; text-align:left}
 #navigation .logo {width:40%; text-align:center}
 #navigation .language {width:30%}

  #hero {height:100vw; padding-top:0px; padding-bottom:0px}
  #hero .title {font-size:9vw; line-height:8vw}
  #hero .bottle-container {display:inline-block; max-width:230px; width:60%; position:relative; z-index:10}
  #hero .bottle-container img {width:100%}
  #hero .bottle-container .animate {position:absolute; opacity:0}
  #hero .shadow {margin-left:2%; width:95%; height:70px; position:relative; margin-top:-60px; opacity:1}

  #section-1 {padding:50px 0; text-align:left}
  #section-1 .transform-illustration {transform:scale(0.8) translateX(60px) translateY(80px)}
  #section-1 .two-block {width: 100%;}
  #section-1 .two-block:first-of-type {text-align:left;}
  #section-1 .wrapper .two-block .illu1 {width: 50%; left: 10%;}
  #section-1 .wrapper .two-block .illu2 {bottom: 25%; right: 38%; width: 55%;}
  #section-1 .wrapper .two-block .illu3 {bottom: 85%;  right: 18%; width: 65%;}
  #section-1 .wrapper .two-block .illu4 {bottom: 45%; right: 50%; width: 50%;}

  #produit .two-block-small-container .two-block-small {width: 100%;}
  #produit .two-block-small-container .two-block-small .logo-assemble {width: 50%; padding:20px 0px}
  #produit .two-block-small-container .two-block-small .img-bouteille {width: 25%;}
  #produit .two-block-small-container .two-block-small:last-of-type {padding-top: 0px;}
  #produit .bottle-container {display:block; margin:-60px auto 0px; max-width:40%; width:60%; position:relative; z-index:10}
  #produit .bottle-container img {width:100%}
  #produit .glass-container {display:block; margin:-40px auto 30px; max-width:60%; width:60%; position:relative; z-index:10; background:url(../img/white_dot.png) no-repeat 95% 60%; background-size:100%}
  #produit .glass-container img {width:100%}
  #produit .shadow {margin-left:0%; width:70%; height:70px; position:relative; margin-top:-61px; margin-bottom:60px; opacity:1}

  #elaboration {position: relative; padding: 20px 0 20px;}
  #elaboration .illu1 {width:15%; right:41%; z-index:20; top:25vw; position:absolute}
  #elaboration .illu2 {width:20%; z-index:30; right:30%; top:65px}
  #elaboration .illu3 {width:30%; z-index:10; top:50px; right:30%}
  #elaboration .illu4 {width:40%; right:5%; top:40px;}
  #elaboration .two-block-small-container {padding: 50vw 0 0 0;}
  #elaboration .two-block-small-container .two-block-small {display:block; width:100%;}
  #elaboration .two-block-small .illustration {position: absolute;}

  #section-4 {padding:40px 0px}

  #section-5 .two-block-small-container .two-block-small {width: 100%;}
  #section-5 .click-dot {position:absolute; width:5vw; height:5vw; border-radius:100px; cursor:pointer; font-size:3.4vw; line-height:5vw; font-weight:bold}
  #section-5 .cd1 {margin:18vw 16vw}
  #section-5 .cd2 {margin:4vw 40vw}
  #section-5 .cd3 {margin:20vw 68vw}
  #section-5 .cd4 {margin:53vw 29vw}
  #section-5 .cd5 {margin:33vw 43vw}
  #section-5 .cd6 {margin:38vw 64vw}
}

@media (max-width:700px) {
  .text18 {font-size: 15px;}

  #hero {padding-top:70px}
  #hero .two-block-small-container {padding-top: 20px;}
  #hero .two-block-small-container .two-block-small {width: 100%; text-align: center;}
  #hero .two-block-small-container .two-block-small img {width: 85%;}

  #section-1 {padding:120px 0 50px; text-align:left}

  #cocktails .slider-container .slide {width:100%;display:inline-block}

  #section-4 .slideshow {padding:80px 0px 40px}
  #section-4 .slideshow .arrow img {max-width:10px}
  #section-4 .slider-container .slide {width:50%}
  #section-4 .slider-container .img-wrapper {height:60vw}
}

@media (max-width:650px) {
  .wrapper {width:95%;}
  #section-6 .two-block-small-container .two-block-small {width:100%; padding-left:0%; text-align:center; padding-top:15px}
}