/* Meadlight PinkDrink Clone — merged stylesheet */

@font-face {
  font-family: 'Candela Bold';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/CandelaBold.otf);
}
@font-face {
  font-family: 'Candela Book';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/CandelaBook.otf);
}

*{ box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body::-webkit-scrollbar { display: none; }
body{
  font-family: 'Candela Book','Candela Bold', sans-serif;
  overflow-x: hidden;
}

.App{ background-image: url('/textures/texture.jpg'); }
.plus{ width: 90px; position: fixed; top: 40px; left: 6%; z-index: 210; }
.div__spinner{ position: fixed; bottom: 40px; right: 80px; z-index: 210; }
.spinner{ width: 100px; }
.p_in_spinner{ width: 40px; position: fixed; bottom: 30px; right: 25px; z-index: 211; }

::-moz-selection{ color: rgb(255, 145, 163); background-color: transparent;}
::selection{ color: rgb(255, 145, 163); background-color: transparent; }

.AppNoise{
  background-image: url('/textures/noise5.png');
  animation: animate 0.5s steps(6) infinite;
}
@keyframes animate{ 0%{background-position:0 0;} 100%{background-position:100% 100%;} }

/* Header */
.header_Container{
  opacity: 0; position:fixed; z-index: 200; top: 170px; left: 34px; padding: 40px 40px 10px 0;
}
.btnHeader{
  text-decoration: none; cursor: pointer; width: 125px; height: 25px;
  display: grid; grid-template-columns: auto auto; margin-bottom: 70px;
}
.btn__Header{ margin-right: 75px; cursor: pointer; width: 10px; height: 10px; }
.title_90deg{
  transform: rotateZ(-90deg); margin-right: 0px; width: 100px;
  position: relative; top:-33px; color: #525252;
}
.title_90deg__PinkDrink{ top: -22px !important; opacity: 0; }
.title_90deg__History{ opacity: 0; }
.title_90deg__Cocktails{ top: -22px !important; opacity: 0; }
.title_90deg__Contacts{ top: -22px !important; opacity: 0; }
.btnHeader1{ cursor:default; }
.btnHeader2, .btnHeader3, .btnHeader4, .btnHeader5{ cursor: pointer; }

/* Scroll indicator */
.scrollIndicator{ position: fixed; width: 6px; top: 0; left: 0; background-color: rgb(253, 127, 148); z-index: 300; }

/* Section 1 */
.Section1_Intro_Container{ display: flex; align-items: flex-start; overflow-y: hidden; overflow-x: hidden; }
.Section1_Intro { display: flex; flex-direction: column; justify-content: center; margin-top: 190px; margin-left: 18%; }
.Intro_p{ color: #727279; }
.Intro_h1{ font-size: 5.6rem; color: #3e3a34; font-weight: 900; line-height: 1.2; }
.hero{ overflow-x: hidden; position: relative; left: 170px; width: 506px; margin-top: 190px; }
.bdiSec1{ display: flex; flex-direction: column; margin-bottom: -25px; }

.div__scroll_to_dicover{
  display: flex; align-items: center; position: fixed; z-index: 201;
  bottom: 80px; left: 80px; cursor: pointer;
}
.line__before__scroll{ background-color: #c7c7ca; height: 1px; width: 40px; margin-right: 15px; }
.scroll__to__discover{ color: #8f8f96; font-size: 16px; font-weight: 100; text-decoration: none; }

/* Section 2 */
.Section2_PinkDrink{ margin-left: 20%; color: #585863; position: relative; }
.rose{ padding-top: 50px; width: 150px; position: relative; top: -350px; }
.Container_01{ margin-left: 40px; margin-top: -350px; }
.div__01{ display: flex; font-size: 28px; position: relative; top: 75px; margin-left: 27px; }
.articles{ overflow: hidden; margin-left: 40px; height: 444px; }
.toRight{ position: relative; top: -222px; left: 966px; }
.toRight .pCaption__s2{ display: none; }
.toRight .linePink_pBold{ display: none; }
.article1, .article2, .article3{ height: 207px; }
.article3{ position: relative; top: -444px; }
.buttons__s2{ position: relative; top: -181px; display: flex; width: 280px; margin-left: 40px; }
.btn__s2{ margin-right: 75px; cursor: pointer; width: 10px; height: 10px; }
.pHeader__s2{ margin-top: 40px; margin-left: 40px; font-size: 18px; }
.pBold__s2{ margin-top: 15px; font-size: 40px; }
.pCaption__s2{ margin-top: 30px; font-size: 16px; color: #91919b; width: 45%; }
.bdiSec2{ position: relative; }
.hand00{ position: absolute; left: 48%; top: -20px; width: 384px; }
.div_pHeader_nextInfo{ display: flex; justify-content: space-between; }
.nextInfo{ font-size: 14px; margin-top: 40px; margin-right: 134px; position: relative; }

/* Section 3 */
.Section3_History_Container{ margin-top: 450px; position: relative; }
.Section3_History{ margin-left: 40%; color: #585863; position: relative; height: 912px; }
.articles_S3{ overflow: hidden; }
.roseS3{ padding-top: 50px; width: 150px; position: relative; top: -300px; left: 400px; }
.Container_01_S3{ margin-top: -350px; }
.div__01_S3{ display: flex; font-size: 28px; position: relative; top: 75px; margin-left: 27px; }
.pHeader__s3{ margin-top: 40px; font-size: 18px; }
.pBold__s3{ margin-top: 15px; font-size: 40px; }
.pCaption__s3{ margin-top: 30px; font-size: 16px; color: #91919b; width: 45%; }
.story_00{ position: absolute; left: 0; top: -310px; width: 322px; }
.story_01{ position: relative; left: 615px; top: -215px; width: 307px; }

/* Section 4 */
.Section4_Cocktails_Container{ margin-top: 600px; margin-bottom: 600px; position: relative; overflow-x: clip; }
.Section4_Cocktails{ margin-left: 23%; color: #585863; position: relative; height: 912px; z-index: 200; }
.Container_01_S4{ margin-top: -350px; }
.div__01_S4{ display: flex; font-size: 28px; position: relative; top: 75px; margin-left: 27px; }
.pHeader__s4{ margin-top: 40px; font-size: 18px; margin-bottom: 0px; }
.pBold__s4{ margin-top: 15px; font-size: 40px; position: relative; }
.pCaption__s4{ margin-top: 30px; font-size: 16px; color: #91919b; width: 45%; }
.red_04{ position: absolute; left: 600px; top: -80px; width: 138.2px; opacity: 0.9; }
.ghiaccio_00{ z-index: -5; position: absolute; left: 30px; top: 240px; width: 107.5px; opacity: 0.9; }
.ghiaccio_01{ z-index: -5; position: absolute; right: -30px; top: 60px; width: 107.5px; opacity: 0.9; }
.frenchie_00{ z-index: -5; position: absolute; right: 337px; top: 273px; width: 200px; opacity: 0.9; }
.frenchie_01{ z-index: -5; position: absolute; right: -45px; top: 360px; width: 200px; opacity: 0.9; }
.mexicano_02{ z-index: -5; position: absolute; left: 215px; top: 470px; width: 154px; opacity: 0.9; }
.rosmarino_01{ z-index: -5; position: absolute; right: 160px; top: 650px; width: 123px; opacity: 0.9; }
.defaultImgs{ width: 100%; height: 912px; position: absolute; top: 0; }

.btnContainer{ width: 65%; }
.btnSlider{ cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 30px; padding-top: 10px; }
.borderBottom{ height: 1px; background-color: rgba(192, 192, 192, 0.493); }
.plusSlider{ font-weight: normal; font-size: 20px; color: rgb(153, 153, 153); position: relative; }
.captionContainer_s4{ overflow: hidden; height: 0px; display: none; }
.compounds{ margin-top: 30px; margin-bottom: 35px; }
.flex_title_caption_s4{ width: 65%; display: grid; grid-template-columns: auto auto; justify-content: flex-start; margin-bottom: 35px; }
.title_btnSlider_s4{ width: 60px; font-weight: bold; }
.caption_btnSlider_s4{ margin-left: 10px; font-weight: lighter; color: rgb(153, 153, 153); }

.spritzlight_01{ z-index: -5; position: absolute; right: 8vw; top: 85vh; width: 185px; opacity: 0; }
.spritzlight_02{ z-index: -5; position: absolute; right: 29vw; top: 33vh; width: 230px; opacity: 0; }
.spritzlight_03{ z-index: -5; position: absolute; right: -4vw; top: 0vh; width: 200px; opacity: 0; }
.ghiaccio_00_Spritzlight{ z-index: -5; position: absolute; left: 3vw; top: 47vh; width: 123px; opacity: 0; }
.ghiaccio_01_Spritzlight{ z-index: -5; position: absolute; right: 4vw; top: 50vh; width: 123px; opacity: 0; }
.rosmarino_00{ z-index: -5; position: absolute; right: 2vw; top: 35vh; width: 154px; opacity: 0; }
.americano_01{ z-index: -5; position: absolute; right: 32vw; top: 37vh; width: 338px; opacity: 0; }
.rosmarino_01_Principio{ z-index: -5; position: absolute; right: 18vw; top: 87vh; width: 123px; opacity: 0; }
.ghiaccio_00_Principio{ z-index: -5; position: absolute; left: 4vw; top: 57vh; width: 123px; opacity: 0; }
.ghiaccio_01_Principio{ z-index: -5; position: absolute; right: 23vw; top:17vh; width: 123px; opacity: 0; }
.red_04_Red{ z-index: -5; position: absolute; right: 40vw; top: 90vh; width: 138px; opacity: 0; }
.red_00{ z-index: -5; position: absolute; left: 5vw; top: 95vh; width: 138px; opacity: 0; }
.red_01{ z-index: -5; position: absolute; right: 22vw; top: 37vh; width: 169px; opacity: 0; }
.red_02{ z-index: -5; position: absolute; right: 10vw; top: 90vh; width: 169px; opacity: 0; }
.ghiaccio_01_Red{ z-index: -5; position: absolute; left: 11vw; top:57vh; width: 107px; opacity: 0; }
.rosmarino_00_Mead{ z-index: -5; position: absolute; right: 4vw; top: 87vh; width: 184px; opacity: 0; }
.tonica_02{ z-index: -5; position: absolute; right: 22vw; top: 39vh; width: 200px; opacity: 0; }
.tonica_03{ z-index: -5; position: absolute; left: 5vw; top: 100vh; width: 184px; opacity: 0; }
.ghiaccio_00_Mead{ z-index: -5; position: absolute; left: 3vw; top: 55vh; width: 107px; opacity: 0; }
.ghiaccio_01_Mead{ z-index: -5; position: absolute; right: 2vw; top:57vh; width: 92px; opacity: 0; }
.imgs_Spritzlight, .imgs_Principio, .imgs_Red, .imgs_Mead{ width: 100%; height: 100%; }

/* Section 5 */
.Section5_Contacts_Container{ margin-top: 0px; position: relative; }
.Section5_Contacts{ margin-left: 23%; color: #585863; position: relative; }
.roseS5{ padding-top: 50px; width: 150px; position: relative; top: 0; left: -170px; }
.pHeader__s5{ margin-top: 40px; font-size: 18px; }
.pBold__s5{ margin-top: 15px; font-size: 40px; position: relative; }
.pCaption__s5{ margin-top: 30px; font-size: 16px; color: #91919b; width: 45%; }
.hand_01{ position: absolute; left: 435px; top: 75px; width: 692px; }
.Info{ height: 191px; margin: 60px 0 0 0; position: relative; }
.socials{ margin-left: 50px; width: 90px; display: flex; justify-content: space-between; }
.name{ line-height: 2.5; }
.email{ line-height: 2.5; color: #7a7a7c; text-decoration: none; }
.pureInfo{ background-color: transparent; padding: 20px 20px 20px 0; display: flex; border: none; cursor: pointer; color: #7a7a7c; position: absolute; left: -150px; margin-top: -8px; font-size: 18px; }
.socials img{ position: relative; top: 40px; width: 24px; }
.defaultInfo{ height: 71px; align-items: baseline; font-size: 14px; color: #7a7a7c; width: 50%; display: flex; justify-content: space-between; }
.altInfo{ height: 71px; display: none; font-size: 14px; color: #7a7a7c; width: 80%; }
.plusInfo{ margin-right: 10px; display: inline-block; }

/* SVG line initial */
.linePink { stroke-dasharray: 645.611; stroke-dashoffset: 645.611; }