body,
html {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

@font-face {
  font-family: "Gotham_Light";
  src: url("../fonts/GothamLight.eot");
  src: url("../fonts/GothamLight.eot") format("embedded-opentype"),
    url("../fonts/GothamLight.woff2") format("woff2"),
    url("../fonts/GothamLight.woff") format("woff"),
    url("../fonts/GothamLight.ttf") format("truetype"),
    url("../fonts/GothamLight.svg#GothamLight") format("svg");
}

.lip-oil-autumn {
  max-width: 1250px;
  margin: 0 auto;
  --CLARINS-FONT: "ClarinsRegular", "Clarins";
  --GOTHAM-BOOK: "Gotham SSm book A", "Gotham SSm book B", Helvetica, Arial,
    sans-serif;
  --GOTHAM-MEDIUM: "Gotham SSm medium A", "Gotham SSm medium B", Helvetica,
    Arial, sans-serif;
  --GOTHAM-XLIGHT: "Gotham_Light";
  --FONT-SIZE: 14px;
  font-family: var(--GOTHAM-BOOK);
  font-size: var(--FONT-SIZE);

  background-image: url(../img/background.png);
  background-repeat: no-repeat;
  background-position: top center;
  background-color: #fbfeff;
  color: #333333;
  position: relative;

  overflow: hidden;
}

@media (max-width: 1023px) {
  .lip-oil-autumn {
    background-image: url(../img/background-tablet.png);
    background-size: 100% auto;
  }
}

@media (max-width: 761px) {
  .lip-oil-autumn {
    background-image: url(../img/background-mobile.jpg);
    padding: 20px 0;
    padding-top: 0;
    height: auto;
  }
}

*[data-product="mint"] {
  --COLOR-PRODUCT: #0fb2ae;
  --COLOR-TINT: #0fb2ae;
  --COLOR-LABEL: rgba(0, 145, 133, 0.75);
  --WIDTH-PRODUCT: 200px;
  --TOP-PRODUCT: 234px;
  --LEFT-PRODUCT: -145px;
  --LEFT-TEXT: 120px;
  --TOP-INGREDIENT: 34px;
  --LEFT-INGREDIENT: 144px;
  --BACKGROUND-BUBBLE: url(../img/bubble-01-mint.png);
}

*[data-product="eucalyptus"] {
  --COLOR-PRODUCT: #18aa4c;
  --COLOR-TINT: #18aa4c;
  --COLOR-LABEL: rgba(240, 183, 168, 0.75);
  --WIDTH-PRODUCT: 267px;
  --TOP-PRODUCT: 181px;
  --LEFT-PRODUCT: -51px;
  --LEFT-TEXT: 180px;
  --TOP-INGREDIENT: 112px;
  --LEFT-INGREDIENT: 187px;
  --BACKGROUND-BUBBLE: url(../img/bubble-02-eucalyptus.png);
}

*[data-product="lemon"] {
  --COLOR-PRODUCT: #ffd200;
  --COLOR-TINT: #fee800;
  --COLOR-LABEL: rgba(173, 211, 148, 0.75);
  --WIDTH-PRODUCT: 178px;
  --TOP-PRODUCT: 258px;
  --LEFT-PRODUCT: -51px;
  --LEFT-TEXT: 180px;
  --TOP-INGREDIENT: 25px;
  --LEFT-INGREDIENT: 106px;
  --BACKGROUND-BUBBLE: url(../img/bubble-03-lemon.png);
}

*[data-product="lavender"] {
  --COLOR-PRODUCT: #a85ea3;
  --COLOR-TINT: #a85ea3;
  --COLOR-LABEL: rgba(160, 150, 65, 0.75);
  --WIDTH-PRODUCT: 152px;
  --TOP-PRODUCT: 226px;
  --LEFT-PRODUCT: -51px;
  --LEFT-TEXT: 120px;
  --TOP-INGREDIENT: 52px;
  --LEFT-INGREDIENT: 113px;
  --BACKGROUND-BUBBLE: url(../img/bubble-04-lavender.png);
}

@media (max-width: 761px) {
  *[data-product="mint"] {
    --WIDTH-PRODUCT: 150px;
    --TOP-PRODUCT: 121px;
    --LEFT-PRODUCT: -108px;
    --LEFT-TEXT: 120px;
    --TOP-INGREDIENT: 25px;
    --LEFT-INGREDIENT: 99px;
  }

  *[data-product="eucalyptus"] {
    --WIDTH-PRODUCT: 201px;
    --TOP-PRODUCT: 80px;
    --LEFT-PRODUCT: -37px;
    --LEFT-TEXT: 180px;
    --TOP-INGREDIENT: 155px;
    --LEFT-INGREDIENT: 109px;
  }

  *[data-product="lemon"] {
    --WIDTH-PRODUCT: 133px;
    --TOP-PRODUCT: 137px;
    --LEFT-PRODUCT: -37px;
    --LEFT-TEXT: 180px;
    --TOP-INGREDIENT: 22px;
    --LEFT-INGREDIENT: 79px;
  }

  *[data-product="lavender"] {
    --WIDTH-PRODUCT: 115px;
    --TOP-PRODUCT: 115px;
    --LEFT-PRODUCT: -37px;
    --LEFT-TEXT: 120px;
    --TOP-INGREDIENT: 44px;
    --LEFT-INGREDIENT: 87px;
  }
}

.lip-oil-autumn * {
  box-sizing: border-box;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.lip-oil-autumn-quickshop {
  display: none;
}

.lip-oil-autumn__wrapper {
  width: 100%;
  overflow: hidden;
}

@media (min-width: 1250px) {
  .lip-oil-autumn__wrapper {
    width: 100vw;
    margin-left: calc(625px - 50vw);
  }
}

.lip-oil-autumn-product__cta {
  position: relative;
  background-color: #b40024;
  display: inline-block;
  color: #fff;
  padding: 14px;
  text-decoration: none;
  font-size: var(--FONT-SIZE);
  line-height: 15px;
  font-family: var(--GOTHAM-MEDIUM);
  cursor: pointer;
  border: 1px solid #e7e4e2;
  min-width: 122px;
  text-align: center;
  border-radius: 5px;
  height: 44px;
  box-sizing: border-box;
  text-transform: unset !important;
  letter-spacing: unset !important;
  outline: 0 !important;
}

.lip-oil-autumn-product__cta::after {
  content: " ";
  display: block;
  position: absolute;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  border: #63021a solid 2px;
  border-radius: 7px;
  opacity: 0;
  left: -2px;
  top: -2px;
  pointer-events: none;
  box-sizing: border-box;
  outline: 0 !important;
}

/*------------------------------------------------*/
.lip-oil-autumn-product__cta:focus::after {
  opacity: 1;
  outline: 0 !important;
}

.lip-oil-autumn-product__cta:hover {
  color: #fff;
  outline: 0 !important;
  background-color: #8c0b26;
}

.lip-oil-autumn-product__cta:active::after {
  opacity: 1;
  outline: 0 !important;
}

/*---------------------------------------*/
/*----------------HEADER-----------------*/
/*---------------------------------------*/
.lip-oil-autumn-header {
  display: flex;
  justify-content: flex-end;
  height: 476px;
  max-width: 1170px;
  margin: 0 auto;
  padding-right: 40px;
}

.lip-oil-autumn-header__wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.lip-oil-autumn-header__title {
  margin: 0;
  font-size: 48px;
  line-height: 1em;
  font-family: var(--GOTHAM-BOOK);
  font-weight: normal;
  display: flex;
  flex-direction: column;
}

.lip-oil-autumn-header__colors {
  display: inline-block;
  font-size: 0;
  height: 48px;
}

.lip-oil-autumn-header__title .c1 {
  background: linear-gradient(to top, #2abbb7, #62cdca);
}

.lip-oil-autumn-header__title .c2 {
  background: linear-gradient(to top, #0ba542, #4dbd75);
}

.lip-oil-autumn-header__title .c3 {
  background: linear-gradient(to top, #fad155, #fbdc7d);
}

.lip-oil-autumn-header__title .c4 {
  background: linear-gradient(to top, #9d4997, #b372ae);
}

.lip-oil-autumn-header__title .c1,
.lip-oil-autumn-header__title .c2,
.lip-oil-autumn-header__title .c3,
.lip-oil-autumn-header__title .c4 {
  font-size: 60px;
  height: 48px;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  display: inline-block;
}

.lip-oil-autumn-header__title>span:last-child {
  margin-left: 1em;
}

.lip-oil-autumn-header__text {
  margin: 25px 0;
  font-size: 16px;
  line-height: 20px;
  font-family: var(--GOTHAM-BOOK);
}

.lip-oil-autumn-header__nav {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  line-height: 20px;
  font-family: var(--GOTHAM-BOOK);
  width: 546px;
}

.lip-oil-autumn-header__nav-item {
  margin: 0;
  padding: 0;
  cursor: pointer;
  text-align: center;
}

.lip-oil-autumn-header__nav-item::before {
  content: " ";
  width: 52px;
  height: 52px;
  display: block;
  margin: 0 auto;
  margin-bottom: 12px;
  transition: all ease-in-out 0.2s;
}

.lip-oil-autumn-header__nav-item[data-product="mint"]::before {
  background-image: url(../img/picto-01-mint.svg);
}

.lip-oil-autumn-header__nav-item[data-product="mint"][data-selected="1"]::before,
.lip-oil-autumn-header__nav-item[data-product="mint"]:hover::before {
  background-image: url(../img/picto-01-mint-actif.svg);
}

.lip-oil-autumn-header__nav-item[data-product="eucalyptus"]::before {
  background-image: url(../img/picto-02-eucalyptus.svg);
}

.lip-oil-autumn-header__nav-item[data-product="eucalyptus"][data-selected="1"]::before,
.lip-oil-autumn-header__nav-item[data-product="eucalyptus"]:hover::before {
  background-image: url(../img/picto-02-eucalyptus-actif.svg);
}

.lip-oil-autumn-header__nav-item[data-product="lemon"]::before {
  background-image: url(../img/picto-03-lemon.svg);
}

.lip-oil-autumn-header__nav-item[data-product="lemon"][data-selected="1"]::before,
.lip-oil-autumn-header__nav-item[data-product="lemon"]:hover::before {
  background-image: url(../img/picto-03-lemon-actif.svg);
}

.lip-oil-autumn-header__nav-item[data-product="lavender"]::before {
  background-image: url(../img/picto-04-lavender.svg);
}

.lip-oil-autumn-header__nav-item[data-product="lavender"][data-selected="1"]::before,
.lip-oil-autumn-header__nav-item[data-product="lavender"]:hover::before {
  background-image: url(../img/picto-04-lavender-actif.svg);
}

.lip-oil-autumn-header__nav-item:hover {
  color: var(--COLOR-PRODUCT);
}

.lip-oil-autumn-header__nav-item[data-selected="1"] {
  color: var(--COLOR-PRODUCT);
}

@media (max-width: 1023px) {
  .lip-oil-autumn-header {
    padding-right: 20px;
    height: 410px;
  }

  .lip-oil-autumn-header__title {
    font-size: 4vw;
    line-height: 1em;
  }

  .lip-oil-autumn-header__title .c1,
  .lip-oil-autumn-header__title .c2,
  .lip-oil-autumn-header__title .c3,
  .lip-oil-autumn-header__title .c4 {
    font-size: 5vw;
    height: 4vw;
  }

  .lip-oil-autumn-header__text {
    font-size: 14px;
    line-height: 20px;
  }

  .lip-oil-autumn-header__nav {
    font-size: 14px;
    line-height: 20px;
    width: 48vw;
  }
}

@media (max-width: 761px) {
  .lip-oil-autumn-header {
    padding: 0;
    height: auto;
    width: 90vw;
    margin: 0 auto;
    padding-top: 77vw;
  }

  .lip-oil-autumn-header__title {
    font-size: 9vw;
    line-height: 1.1em;
  }

  .lip-oil-autumn-header__title .c1,
  .lip-oil-autumn-header__title .c2,
  .lip-oil-autumn-header__title .c3,
  .lip-oil-autumn-header__title .c4 {
    font-size: 12vw;
    height: 9vw;
    line-height: 1.1em;
    height: 1.1em;
  }

  .lip-oil-autumn-header__title>span:last-child {
    margin-left: 0.5em;
    white-space: nowrap;
    margin-top: -0.4em;
  }

  .lip-oil-autumn-header__wrapper {
    width: 90vw;
    margin: 0 auto;
  }

  .lip-oil-autumn-header__text {
    font-size: 16px;
    line-height: 20px;
    max-width: 200px;
    text-align: center;
    margin: 25px auto;
  }

  .lip-oil-autumn-header__nav {
    font-size: 16px;
    line-height: 20px;
    width: 100vw;
  }
}

/********************************************************************/
.lip-oil-autumn-product {
  display: none;
}

.lip-oil-autumn-product[data-selected="1"] {
  padding-top: 318px;
  padding-bottom: 95px;
  height: 760px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.lip-oil-autumn-product__packshot {
  position: absolute;
  left: calc(50% + var(--LEFT-PRODUCT));
  top: var(--TOP-PRODUCT);
  z-index: 2;
}

.lip-oil-autumn-product__packshot img {
  width: var(--WIDTH-PRODUCT);
}

.lip-oil-autumn-product__lips {
  position: absolute;
  top: 377px;
  left: calc(50% - 416px);
}

.lip-oil-autumn-product__lips img {
  display: block;
  width: 100%;
}

.lip-oil-autumn-product__tint {
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px;
  color: #fff;
  font-family: var(--GOTHAM-BOOK);
  line-height: 20px;
  font-size: 16px;
}

.lip-oil-autumn-product__tint span:first-child {
  color: var(--COLOR-TINT);
}

.lip-oil-autumn-product__content {
  padding-left: calc(50% + var(--LEFT-TEXT));
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
}

.lip-oil-autumn-product__text {
  display: flex;
  flex-direction: column;
  text-align: left;
  align-items: flex-start;
  margin: 0;
  margin-bottom: 22px;
  font-size: 16px;
  line-height: 20px;
  max-width: 300px;
}

.lip-oil-autumn-product__ingredient {
  margin: 0;
  position: absolute;
  background-color: var(--COLOR-LABEL);
  font-family: var(--GOTHAM-BOOK);
  color: #fff;
  font-size: 11px;
  display: inline-block;
  line-height: 22px;
  padding: 0 10px;
  top: var(--TOP-INGREDIENT);
  left: var(--LEFT-INGREDIENT);
}

.lip-oil-autumn-product__title {
  top: 90px;
  left: 0;
  position: absolute;
  width: 100%;
  margin: 0;
  font-weight: normal;
  color: var(--COLOR-PRODUCT);
  font-size: 35px;
  line-height: 1em;
  font-family: var(--GOTHAM-BOOK);
  display: flex;
  flex-direction: column;
  text-align: center;
}

@media (max-width: 1023px) {
  .lip-oil-autumn-product[data-selected="1"] {
    padding-top: 200px;
  }

  .lip-oil-autumn-product__title {
    top: 60px;
  }

  .lip-oil-autumn-product__lips {
    left: calc(50% - 370px);
    width: 40vw;
  }
}

@media (max-width: 761px) {
  .lip-oil-autumn-product[data-selected="1"] {
    padding: 0;
    display: block;
    height: auto;
  }

  .lip-oil-autumn-product__title {
    position: relative;
    top: auto;
    left: auto;
    font-size: 24px;
    line-height: 28px;
    display: block;
    padding: 20px 40px;
  }

  .lip-oil-autumn-product__lips {
    position: relative;
    top: auto;
    left: auto;
    width: 245px;
    margin: 0 auto;
  }

  .lip-oil-autumn-product__content {
    padding: 20px;
    text-align: center;
    display: block;
    padding-bottom: 50px;
  }

  .lip-oil-autumn-product__text {
    position: relative;
    top: auto;
    left: auto;
    display: block;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 20px;
    max-width: 100%;
  }

  .lip-oil-autumn-product__packshot {
    position: relative;
    margin-left: var(--LEFT-PRODUCT);
    margin-top: 0;
    /*calc(var(--TOP-PRODUCT));*/
    margin-bottom: 20px;
    z-index: 2;
    top: auto;
    left: 50%;
  }

  .lip-oil-autumn-product__tint {
    font-size: 12px;
    line-height: 14px;
  }
}

.lip-oil-autumn-bubble {
  background-image: var(--BACKGROUND-BUBBLE);
  background-size: 100% auto;
  background-repeat: no-repeat;
  position: absolute;
  left: 50%;
  top: 0;
}

/****************************FIX IPHIONE XR ******************************/
*[data-product="mint"] .lip-oil-autumn-bubble {
  background-image: url(../img/bubble-01-mint.png);
}

*[data-product="eucalyptus"] .lip-oil-autumn-bubble {
  background-image: url(../img/bubble-02-eucalyptus.png);
}

*[data-product="lemon"] .lip-oil-autumn-bubble {
  background-image: url(../img/bubble-03-lemon.png);
}

*[data-product="lavender"] .lip-oil-autumn-bubble {
  background-image: url(../img/bubble-04-lavender.png);
}

/********************************************************************/
*[data-product="mint"] .lip-oil-autumn-bubble[data-num="1"] {
  margin-left: 375px;
  margin-top: 81px;
  width: 181px;
  height: 200px;
}

*[data-product="mint"] .lip-oil-autumn-bubble[data-num="2"] {
  margin-left: 316px;
  margin-top: 240px;
  width: 80px;
  height: 90px;
}

*[data-product="mint"] .lip-oil-autumn-bubble[data-num="3"] {
  margin-left: -560px;
  margin-top: 260px;
  width: 128px;
  height: 140px;
}

*[data-product="mint"] .lip-oil-autumn-bubble[data-num="4"] {
  margin-left: 177px;
  margin-top: 664px;
  width: 144px;
  height: 160px;
}

/********************************************************************/
*[data-product="eucalyptus"] .lip-oil-autumn-bubble[data-num="1"] {
  margin-left: 355px;
  margin-top: 81px;
  width: 181px;
  height: 200px;
}

*[data-product="eucalyptus"] .lip-oil-autumn-bubble[data-num="2"] {
  margin-left: -273px;
  margin-top: 240px;
  width: 80px;
  height: 90px;
}

*[data-product="eucalyptus"] .lip-oil-autumn-bubble[data-num="3"] {
  display: none;
}

*[data-product="eucalyptus"] .lip-oil-autumn-bubble[data-num="4"] {
  margin-left: 177px;
  margin-top: 664px;
  width: 144px;
  height: 160px;
}

/********************************************************************/
*[data-product="lemon"] .lip-oil-autumn-bubble[data-num="1"] {
  margin-left: 375px;
  margin-top: 81px;
  width: 181px;
  height: 200px;
}

*[data-product="lemon"] .lip-oil-autumn-bubble[data-num="2"] {
  margin-left: 316px;
  margin-top: 240px;
  width: 80px;
  height: 90px;
}

*[data-product="lemon"] .lip-oil-autumn-bubble[data-num="3"] {
  margin-left: -510px;
  margin-top: 620px;
  width: 128px;
  height: 140px;
}

*[data-product="lemon"] .lip-oil-autumn-bubble[data-num="4"] {
  margin-left: 177px;
  margin-top: 664px;
  width: 144px;
  height: 160px;
}

/********************************************************************/
*[data-product="lavender"] .lip-oil-autumn-bubble[data-num="1"] {
  margin-left: 375px;
  margin-top: 81px;
  width: 181px;
  height: 200px;
}

*[data-product="lavender"] .lip-oil-autumn-bubble[data-num="2"] {
  display: none;
}

*[data-product="lavender"] .lip-oil-autumn-bubble[data-num="3"] {
  margin-left: 500px;
  margin-top: 270px;
  width: 108px;
  height: 120px;
}

*[data-product="lavender"] .lip-oil-autumn-bubble[data-num="4"] {
  margin-left: -507px;
  margin-top: 664px;
  width: 144px;
  height: 160px;
}

/********************************************************************/

@media (max-width: 1023px) {

  /********************************************************************/
  *[data-product="mint"] .lip-oil-autumn-bubble[data-num="1"] {
    margin-left: 275px;
  }

  *[data-product="mint"] .lip-oil-autumn-bubble[data-num="2"] {
    display: none;
  }

  *[data-product="mint"] .lip-oil-autumn-bubble[data-num="3"] {
    margin-left: -340px;
    margin-top: 190px;
  }

  *[data-product="mint"] .lip-oil-autumn-bubble[data-num="4"] {
    margin-left: 177px;
  }

  /********************************************************************/
  *[data-product="eucalyptus"] .lip-oil-autumn-bubble[data-num="1"] {
    margin-left: 255px;
  }

  *[data-product="eucalyptus"] .lip-oil-autumn-bubble[data-num="2"] {
    margin-left: -173px;
  }

  *[data-product="eucalyptus"] .lip-oil-autumn-bubble[data-num="3"] {
    display: none;
  }

  *[data-product="eucalyptus"] .lip-oil-autumn-bubble[data-num="4"] {
    margin-left: 77px;
  }

  /********************************************************************/
  *[data-product="lemon"] .lip-oil-autumn-bubble[data-num="1"] {
    margin-left: 275px;
    margin-top: 120px;
  }

  *[data-product="lemon"] .lip-oil-autumn-bubble[data-num="2"] {
    margin-left: -300px;
  }

  *[data-product="lemon"] .lip-oil-autumn-bubble[data-num="3"] {
    margin-left: -310px;
  }

  *[data-product="lemon"] .lip-oil-autumn-bubble[data-num="4"] {
    margin-left: 77px;
  }

  /********************************************************************/
  *[data-product="lavender"] .lip-oil-autumn-bubble[data-num="1"] {
    margin-left: 275px;
    margin-top: 120px;
  }

  *[data-product="lavender"] .lip-oil-autumn-bubble[data-num="2"] {
    display: none;
  }

  *[data-product="lavender"] .lip-oil-autumn-bubble[data-num="3"] {
    margin-left: 350px;
    margin-top: 390px;
  }

  *[data-product="lavender"] .lip-oil-autumn-bubble[data-num="4"] {
    margin-left: -307px;
  }
}

@media (max-width: 761px) {

  /********************************************************************/
  *[data-product="mint"] .lip-oil-autumn-bubble[data-num="1"] {
    margin-left: 94px;
    margin-top: 80px;
    width: 120px;
    height: 124px;
  }

  *[data-product="mint"] .lip-oil-autumn-bubble[data-num="2"] {
    display: block;
    margin-left: 70px;
    margin-top: 770px;
    width: 110px;
    height: 100px;
  }

  *[data-product="mint"] .lip-oil-autumn-bubble[data-num="3"] {
    margin-left: 64px;
    margin-top: 257px;
    width: 80px;
    height: 84px;
  }

  *[data-product="mint"] .lip-oil-autumn-bubble[data-num="4"] {
    margin-left: -219px;
    margin-top: 298px;
    width: 120px;
    height: 124px;
  }

  /********************************************************************/
  *[data-product="eucalyptus"] .lip-oil-autumn-bubble[data-num="1"] {
    margin-left: -219px;
    margin-top: 120px;
    width: 148px;
    height: 152px;
  }

  *[data-product="eucalyptus"] .lip-oil-autumn-bubble[data-num="2"] {
    margin-left: 93px;
    margin-top: 378px;
    width: 80px;
    height: 90px;
  }

  *[data-product="eucalyptus"] .lip-oil-autumn-bubble[data-num="3"] {
    display: none;
  }

  *[data-product="eucalyptus"] .lip-oil-autumn-bubble[data-num="4"] {
    margin-left: -175px;
    margin-top: 818px;
    width: 123px;
    height: 127px;
  }

  /********************************************************************/
  *[data-product="lemon"] .lip-oil-autumn-bubble[data-num="1"] {
    margin-left: -219px;
    margin-top: 154px;
    width: 140px;
    height: 144px;
  }

  *[data-product="lemon"] .lip-oil-autumn-bubble[data-num="2"] {
    margin-left: 108px;
    margin-top: 316px;
    width: 102px;
    height: 105px;
  }

  *[data-product="lemon"] .lip-oil-autumn-bubble[data-num="3"] {
    margin-left: -270px;
    margin-top: 690px;
    width: 128px;
    height: 140px;
  }

  *[data-product="lemon"] .lip-oil-autumn-bubble[data-num="4"] {
    margin-left: 47px;
    margin-top: 784px;
    width: 130px;
    height: 133px;
  }

  /********************************************************************/
  *[data-product="lavender"] .lip-oil-autumn-bubble[data-num="1"] {
    margin-left: -219px;
    margin-top: 154px;
    width: 140px;
    height: 144px;
  }

  *[data-product="lavender"] .lip-oil-autumn-bubble[data-num="2"] {
    display: none;
  }

  *[data-product="lavender"] .lip-oil-autumn-bubble[data-num="3"] {
    margin-left: 108px;
    margin-top: 276px;
    width: 102px;
    height: 105px;
  }

  *[data-product="lavender"] .lip-oil-autumn-bubble[data-num="4"] {
    margin-left: -175px;
    margin-top: 808px;
    width: 123px;
    height: 127px;
  }
}

/************************slick****************/
.lip-oil-autumn .slick-dotted.slick-slider {
  margin-bottom: 60px;
}


.lip-oil-autumn .slick-dots {
  position: absolute;
  bottom: -45px;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
}

.lip-oil-autumn .slick-dots li {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 5px;
  padding: 5px;
  cursor: pointer;
  opacity: 0.5;
  background-color: transparent;
}

.lip-oil-autumn .slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 10px;
  height: 10px;
  margin: 0;
  cursor: pointer;
  border: 0;
  outline: none;
  background: #000;
  border-radius: 10px;
  min-width: 0;
}

.lip-oil-autumn .slick-dots li button:hover,
.lip-oil-autumn .slick-dots li button:focus {
  outline: none;
}

.lip-oil-autumn .slick-dots li:hover {
  opacity: 1;
}

.lip-oil-autumn .slick-dots li.slick-active {
  opacity: 1;
}
@media (max-width: 761px){
.lip-oil-autumn-header__title {
    font-size: 7vw !important;
    line-height: 1.1em;
}
.lip-oil-autumn-header__title .c1, .lip-oil-autumn-header__title .c2, .lip-oil-autumn-header__title .c3, .lip-oil-autumn-header__title .c4 {
    font-size: 8vw !important;
}
}
/*iPhone 6/7/8/plus, XR, 11, X, 12 and 11.*/
@media (max-width: 480px) {
  .lip-oil-autumn-header__title {
    font-size: 7vw !important;
    line-height: 1.1em;
}
.lip-oil-autumn-header__title .c1, .lip-oil-autumn-header__title .c2, .lip-oil-autumn-header__title .c3, .lip-oil-autumn-header__title .c4 {
    font-size: 8vw !important;
}
*[data-product="lavender"] .lip-oil-autumn-bubble[data-num="4"] {
  margin-top: 972px;
}
*[data-product="eucalyptus"] .lip-oil-autumn-bubble[data-num="4"] {
  margin-top: 867px;
}
*[data-product="lemon"] .lip-oil-autumn-bubble[data-num="3"] {
  margin-top: 721px;
}
*[data-product="lemon"] .lip-oil-autumn-bubble[data-num="4"] {
  margin-top: 812px;
}
}

@media (max-width: 1023px){
*[data-product="lavender"] .lip-oil-autumn-bubble[data-num="3"] {
    margin-left: 371px;
    margin-top: 390px;
}
*[data-product="lavender"] {
    --COLOR-PRODUCT: #a85ea3;
    --COLOR-TINT: #a85ea3;
    --COLOR-LABEL: rgba(160, 150, 65, 0.75);
    --WIDTH-PRODUCT: 142px;
    --TOP-PRODUCT: 221px;
    --LEFT-PRODUCT: -54px;
    --LEFT-TEXT: 99px;
    --TOP-INGREDIENT: 51px;
    --LEFT-INGREDIENT: 113px;
    --BACKGROUND-BUBBLE: url(../img/bubble-04-lavender.png);
   }
   .lip-oil-autumn-product__tint {
        margin-right: 43px;
}
*[data-product="lemon"] .lip-oil-autumn-bubble[data-num="1"]{
      margin-left: 275px;
    margin-top: 129px !important;
}
}

@media only screen
and (min-device-width : 834px)
and (max-device-width : 1112px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2){
  .lip-oil-autumn-header__nav {
    margin-left: 18px;
  }

}
