@font-face {
	font-family: 'editor-regular';
	src: url('../fonts/Editor/EditorRegular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'editor-light';
	src: url('../fonts/Editor/EditorLight.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'gantari-regular';
	src: url('../fonts/Gantari/Gantari-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'gantari-medium';
	src: url('../fonts/Gantari/Gantari-Medium.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'gantari-bold';
	src: url('../fonts/Gantari/Gantari-Bold.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'dawning';
	src: url('../fonts/DawningofaNewDay.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
header.h-lipstick-online {
    z-index: 1;
}
header.h-lipstick-online.black-text {
    background: transparent;
}
header.h-lipstick-online.sticky {
    background: inherit;
}
header.h-lipstick-online .middle-header .container-logo {
    width: 365px;
    max-width: 365px;
    display: flex;
    justify-content: flex-start;
    margin: 0 120px 0 auto;
}
header.h-lipstick-online .middle-header {
    padding: 17px 0 0px;
}
.h-lipstick-online.sticky .middle-header {
    padding: 19px 0;
}
form.mix-your-lipstick {
    position: relative;
}
.augmented-reality {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(43deg, #C02660 0%, #F9837D 100%, #F9837D 100%);
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 40px;
    margin: 0 auto 20px;
    min-width: 210px;
    z-index: 1;
}
.lip-balm-experience .augmented-reality {
    background: #161336;
}
.augmented-reality.hide {
    display: none;
}
.augmented-reality .icon {
    display: flex;
    align-items: center;
}
.augmented-reality span {
    color: #FFF;
    text-align: center;
    font-family: gantari-bold;
    font-size: 14px;
    line-height: normal;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}
.augmented-reality .icon img {
    width: 21px;
    height: 17px;
}
.ar-video-container {
    height: 55%;
    width: 100%;
    display: none;
}
.ar-video-container canvas {
    z-index: 1;
    position: relative;
}
.wrapper-loader {
    position: absolute;
    top: 0;
	left: 0;
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
    font-family: 'gantari-extrabold';
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #4C4672;
	z-index: 0;
}
.wrapper-loader.show {
    display: flex;
}
.wrapper-loader .loader {
    border: 6px solid #ddd;
    border-top: 6px solid #4C4672;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    animation: spin 2s linear infinite;
}
.container-experience .item {
    height: 100%;
    display:flex;
    flex-direction: column;
    justify-content: center;
}
.container-experience .container-fluid {
    position: relative;
}
.container-experience .first-step.ar .container-no-white,
.container-experience .second-step.ar .container-no-white,
.container-experience .third-step.ar .container-no-white {
    display: none;
}

@media screen and (min-width:992px) {
    .page-template-lipstick-virtuale .satellite-bubble button,
    .page-template-lip-balm-virtuale .satellite-bubble button {
        width: 60px !important;
        height: 60px !important;
    }
    .slider-arrows {
        display: none;
    }
    .container-experience .first-step.ar .colorBoxContainer {
        width: 475px;
        gap: 5px;
    }
    .container-experience .first-step.ar .colorContainer {
        height: 40px;
        aspect-ratio: 1;
    }
    .container-experience .first-step.ar .colorCard {
        width: 40px;
    }
    .container-experience .second-step.ar .flexOne {
        max-width: 48%;
        margin-top: 6px;
    }
    .container-experience .second-step.ar .flexDiv {
        column-gap: 2%;
        row-gap: 10px;
        max-width: 600px;
    }
    .container-experience .second-step.ar .topColorSelector {
        width: 30px;
        height: 30px;
        margin-right: 5px;
    }
    .container-experience .second-step.ar .Innerbottle {
        width: 38px;
    }
    .container-experience .second-step.ar .removeColor {
        width: 33px;
        padding: 7px;
    }
    .container-experience .second-step.ar .resultMainContainer {
        margin: 20px 0;
    }
    .container-experience .third-step.ar .radio-buttons label {
        width: auto;
        max-width: 155px;
        width: 28%;
        display: flex;
        align-items: center;
        gap: 10px;
        position: relative;
    }
}

.container-experience .first-step.ar,
.container-experience .second-step.ar,
.container-experience .third-step.ar {
    padding-bottom: 30px;
    transition: all 0.7s;
    justify-content: flex-end;
}
.bcg-mobile {
    transform: translateX(130px);
    max-width: calc(100% - 130px);
}
.wrapper-characteristics {
    max-width: 330px;
    margin: 0 160px 0 auto;
}


body{margin:0;}
.hidden{visibility: hidden;}

.page-template-lipstick-virtuale-php,
.page-template-lip-balm-virtuale-php {
    overflow: visible !important;
}

.page-template-lipstick-virtuale-php #page,
.page-template-lip-balm-virtuale-php #page {
    display: block;
    min-height: unset;
}

.page-template-lipstick-virtuale-php footer,
.page-template-lip-balm-virtuale-php footer {
    padding: 45px 0;
    z-index: 1;
    position: relative;
}
.page-template-lipstick-virtuale-php footer .socials,
.page-template-lipstick-virtuale-php footer .navigation,
.page-template-lipstick-virtuale-php header .middle-header ul.middle-menu,
.page-template-lipstick-virtuale-php header .upper-header,
.page-template-lipstick-virtuale-php header .middle-header .icons-header,
.page-template-lipstick-virtuale-php header .middle-header .cart-mobile,
.page-template-lipstick-virtuale-php header .middle-header .menu-mobile,
.page-template-lip-balm-virtuale-php footer .socials,
.page-template-lip-balm-virtuale-php footer .navigation,
.page-template-lip-balm-virtuale-php header .middle-header ul.middle-menu,
.page-template-lip-balm-virtuale-php header .upper-header,
.page-template-lip-balm-virtuale-php header .middle-header .icons-header,
.page-template-lip-balm-virtuale-php header .middle-header .cart-mobile,
.page-template-lip-balm-virtuale-php header .middle-header .menu-mobile,
.page-template-skincare-virtual-create header .middle-header ul.middle-menu,
.page-template-skincare-virtual-create header .upper-header,
.page-template-skincare-virtual-create header .middle-header .icons-header,
.page-template-skincare-virtual-create header .middle-header .cart-mobile,
.page-template-skincare-virtual-create header .middle-header .menu-mobile,
.page-template-skincare-virtual-quiz header .middle-header ul.middle-menu,
.page-template-skincare-virtual-quiz header .upper-header,
.page-template-skincare-virtual-quiz header .middle-header .icons-header,
.page-template-skincare-virtual-quiz header .middle-header .cart-mobile,
.page-template-skincare-virtual-quiz header .middle-header .menu-mobile,
.page-template-lipstick-prova header {
    display: none !important;
}
.page-template-lipstick-virtuale header .middle-header .justify-between,
.page-template-lip-balm-virtuale header .middle-header .justify-between,
.page-template-skincare-virtual-create header .middle-header .justify-between,
.page-template-skincare-virtual-quiz header .middle-header .justify-between {
    justify-content: center;
    border-bottom: none !important;
}
.page-template-lipstick-virtuale button.iubenda-tp-btn.iubenda-cs-preferences-link,
.page-template-lip-balm-virtuale button.iubenda-tp-btn.iubenda-cs-preferences-link {
    left: -16px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 28px !important;
    top: 80px !important;
    background-size: 25px !important;
    border-radius: 0 4px 4px 0 !important;
}
.container-experience .popup {
    position: fixed;
    z-index: 11;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: linear-gradient(152deg, rgba(250, 176, 176, 0.80) 1.31%, rgba(192, 145, 203, 0.80) 156.08%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.container-experience.lip-balm-experience .popup {
    background: rgba(253, 180, 150, 0.92);
}
.container-experience .popup .container-popup {
    position: relative;
    height: 100%;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #FFF;
    max-width: 580px;
    width: 580px;
    margin: auto;
}
.container-experience .popup .container-popup .brightness {
    border-radius: 30px;
    background: #FCD1D3;
    width: 94px;
    height: 250px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 20px;
    margin: 0 auto 50px;
    position: relative;
}
.container-experience.lip-balm-experience .popup .container-popup .brightness {
    background: #FFD0BD;
}
.container-experience .popup .container-popup .brightness img {
    width: 36px;
    height: 37px;
    clip-path: circle(39%);
    position: relative;
    animation: growLight 2.3s linear infinite;
}
.container-experience .popup .container-popup .brightness::before {
    content: '';
    width: 100%;
    height: 65px;
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius: 30px;
    background: #283C70;
    animation: grow 2.3s linear infinite;
}
@keyframes growLight {
    0% { clip-path: circle(35%) }
    50% { clip-path: circle(50%) }
    100% { clip-path: circle(50%) }
}
@keyframes grow {
    0% { height: 65px; }
    50% { height: 100%; }
    100% { height: 100%; }
}
.container-experience .popup .text-popup {
    max-width: 400px;
    margin: 13px auto 30px;
}
.container-experience .popup .text-popup p {
    font-family: 'gantari-regular';
    font-size: 16px;
    line-height: 19px;
    color: #575757;
    text-align: center;
}
.container-experience .popup button#close-popup-exp {
    font-family: 'gantari-bold';
    font-size: 15px;
    line-height: 18px;
    font-weight: 600;
    letter-spacing: 1.2px;
    background: linear-gradient(68deg, #C02660 3.6%, #F9837D 98.08%, #F9837D 98.08%);
    padding: 18px 30px;
    border-radius: 21px;
    text-transform: uppercase;
}
.container-experience.lip-balm-experience .popup button#close-popup-exp {
    background: #161336;
    transition: all 0.3s;
}
.container-experience .popup button#close-popup-exp:hover {
    background: #6A5AE0;
}
.container-experience .popup #close-popup-icon {
    position: absolute;
    top: 40px;
    right: 40px;
}
.close-ar {
    float: right;
    width: 19px;
    height: 19px;
    background-image: url('../img/close-lipstick.svg');
    background-size: contain;
    position: absolute;
    top: 28px;
    right: 20px;
    z-index: 2;
    cursor: pointer;
}
.close-ar.hide {
    display: none;
}
.h-lipstick-online .promo-banner {
    display: none;
}
.h-lipstick-online.sticky .header-wrapper {
    padding: 20px !important;
}
.container-experience .owl-nav {
    visibility: hidden;
    overflow: hidden;
    height: 0;
    margin-top: 0 !important;
}
.container-experience .owl-stage-outer.owl-height {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
@supports (-webkit-touch-callout: none) {
    .container-experience .owl-stage-outer.owl-height {
        min-height: 89vh;
        height: 89vh !important
    }
    .container-experience .owl-stage-outer.owl-height.last-step {
        min-height: 100%;
        height: 100% !important
    }
}
.container-experience .owl-stage {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
}
.container-experience .owl-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}
@media screen and (min-width: 768px) and (max-width: 991px) {
    .container-experience .owl-item:last-of-type {
        height: auto;
    }
}
.container-experience {
    background: linear-gradient(180deg, #FFD2D2 0%, #D2B2D9 100%);
    min-height: 100%;
    /* min-height: -webkit-fill-available; */
    width: 100%;
    position: relative;
    overflow: hidden;
}
.container-experience.lip-balm-experience {
    background: linear-gradient(149deg, #FFB685 1.42%, #EC91BA 202.73%);
}
.bg-white-experience {
    position: absolute;
    right: 0;
    width: 40%;
    min-width: 400px;
    height: 100%;
    max-height: 100vh;
    background-color: #fff;
}
.container-experience .container {
    min-height: 100%;
    height: 100%;
    /* min-height: -webkit-fill-available; */
    position: relative;
}
.container-experience .container > .row {
    position: relative;
}
.container-experience .container-no-white {
    position: relative;
}
img.share-experience {
    position: absolute;
    right: 33px;
    top: 50vh;
}
.container-experience .left-experience {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 36px;
    position: relative;
}
.container-experience .bcg-white {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    max-width: 280px;
    height: 100%;
    padding-top: 50px;
    left: calc(41.66666667% - 140px);
    z-index: 2;
    overflow: hidden;
}
.container-experience .right-experience {
    background-color: #fff;
    /* padding-top: 36px; */
    padding: 0;
}
.bcg-white-full {
    background: #fff;
}
/* .bcg-white {
    background: linear-gradient(to left, #fff, #fff 50%, transparent 50%);
    padding-top: 36px;
} */
button {
    border: none;
}
.container-experience .button-back,
.container-experience .button-back-advice {
    display: inline-block;
    cursor: pointer;
    width: 24px;
    height: 24px;
    background-image: url('../img/back-lipstick.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 20px;
    left: 24px;
    z-index: 1;
}
.container-experience .button-back-advice {
    display: none;
}
.lipstickImginside, .choose-colaggio, .riepilogo {
    display: flex;
    justify-content: center;
    align-items: center;
}
.container-experience .lipstick-full  {
    background-image: url('../img/bg-lipstick-base.png'), url('../img/upper-lipstick-starter.png');
    background-position: center bottom, center top;
    background-repeat: no-repeat, no-repeat;
    background-size: contain, contain;
    width: 185px;
    height: 530px;
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    /* filter: drop-shadow(16px 5px 12px rgba(0,0,0,0.4));
    will-change: filter; */
    transition: 1.2s;
}
.lipstickImginside.mobile.up .lipstick-full {
    width: 100px;
    height: 285px;
}
.container-experience .punta {
    width: 43%;
    position: absolute;
    left: 29%;
    top: 0.7%;
}
.container-experience .sottopunta {
    width: 47%;
    position: absolute;
    left: 25%;
    top: 30%;
}
.container-experience img.upper-lipstick-multiply {
    width: 47%;
    position: absolute;
    mix-blend-mode: multiply;
    top: 0%;
    left: 27%;
}
.container-experience svg.punta path, svg.sottopunta path {
    fill: transparent;
}
img.img-select {
    visibility: hidden;
    mix-blend-mode: multiply;
}
.box-button {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
}
#nine-step .box-button {
    margin-top: 0px;
}
.mix-color-result, .lips-principio, .lips-aroma, .custom-packaging, .choose-colaggio, .riepilogo {
    display: none;
    justify-content: center;
    align-items: center;
    transform: translate(-50%, 50%);
    bottom: 50%;
    left: 50%;
    position: absolute;
}
.lips-texture {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -300px;
    transition: 1.5s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lips-texture.centered {
    transform: translate(-50%, 70%);
    bottom: 70%;
    transition: 1.5s;
}
.lips-texture.hidden {
    transition: 1s;
}
.circle-result {
    width: 169px;
    height: 170px;
    border-radius: 100%;
    position: absolute;
    z-index: 1;
    /* filter: drop-shadow(0px 11px 10px rgba(0,0,0,0.5));
    will-change: filter; */
}
.circle-result img {
    mix-blend-mode: multiply;
}
.lips-full {
    width: 210px;
    height: 166px;
    background-image: url('../img/labbra-bg.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 0;
    mix-blend-mode: multiply;
}
.tooth {
    width: 210px;
    height: 166px;
    background-image: url('../img/tooth-bg.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    /* filter:drop-shadow(12px 8px 15px rgba(0,0,0,0.4));
    will-change: filter; */
    z-index: 2;
}
.tooth .lips-color {
    position: absolute;
}
.tooth .lips-color.natural .customizationBackground {
    opacity: 0.6;
}
.lips-full svg {
    mix-blend-mode: darken;
}
.lips-type-texture-shine {
    display: none;
    position: absolute;
    width: 210px;
    height: 166px;
    background-image: url('../img/labbra-lucida.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    mix-blend-mode: hard-light;
    opacity: 0.8;
    z-index: 2;
}
.lips-type-texture-natural {
    display: none;
    position: absolute;
    width: 210px;
    height: 166px;
    background-image: url('../img/labbra-natural-kiss.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    mix-blend-mode: hard-light;
    z-index: 2;
}
.leaf-natural {
    width: 49px;
    height: 49px;
    background: rgba(255,255,255,0.8);
    background-image: url('../img/leaf.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 18px;
    border-radius: 100%;
}
/* .lips-aroma {
    position: relative;
} */
.lips-aroma:after {
    content: '';
    display: block;
    position: absolute;
    width: 180px;
    height: 360px;
    z-index: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.lips-aroma.no-aroma:after {
    background-image: none;
}
.lips-aroma.vaniglia:after {
    background-image: url('../img/bg-vaniglia.png');
}
.lips-aroma.fiori-acqua:after {
    background-image: url('../img/bg-fiori-acqua.png');
}
.lips-aroma.frutti-rossi:after {
    background-image: url('../img/bg-frutti-rossi.png');
}
.circle-packaging {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 200px;
    background-image: url('../img/packaging.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    /* filter:drop-shadow(5px 8px 19px rgba(0,0,0,0.4));
    will-change: filter; */
}

.package-title-preview {
    font-family: allura;
    font-size: 65px;
    line-height: 75px;
    padding-top: 25px;
    text-transform: uppercase;
}
.lipstick-full-colaggio {
    background-image: url('../img/bg-lipstick-base.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 185px;
    height: 530px;
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    /* filter:drop-shadow(13px 5px 12px rgba(0,0,0,0.4));
    will-change: filter; */
}
.container-experience .punta-colaggio {
    width: 43%;
    position: absolute;
    left: 30%;
    top: 0.8%;
}
.container-experience .punta-colaggio-spirale {
    width: 41%;
    position: absolute;
    left: 30%;
    top: -0.7%;
    opacity: 0;
}
.container-experience .punta-colaggio-diamante {
    width: 42%;
    position: absolute;
    left: 30%;
    top: -0.2%;
    opacity: 0;
}
.container-experience .punta-colaggio-puzzle {
    width: 41%;
    position: absolute;
    left: 30%;
    top: -0.5%;
    opacity: 0;
}
.container-experience .sottopunta-colaggio {
    width: 46%;
    position: absolute;
    left: 25%;
    top: 30%;
    mix-blend-mode: darken;
}
.container-experience img.upper-incisione {
    width: 47%;
    top: 0%;
    left: 27%;
    position: absolute;
    mix-blend-mode: multiply;
}
.container-experience img.upper-incisione-spirale {
    width: 43%;
    top: -0.5%;
    left: 29%;
    position: absolute;
    mix-blend-mode: multiply;
    opacity: 0;
}
.container-experience img.upper-incisione-diamante {
    width: 42%;
    top: -0.2%;
    left: 30%;
    position: absolute;
    mix-blend-mode: multiply;
    opacity: 0;
}
.container-experience img.upper-incisione-puzzle {
    width: 41%;
    top: -0.5%;
    left: 30%;
    position: absolute;
    mix-blend-mode: multiply;
    opacity: 0;
}
.container-experience img.colaggio-cuore {
    position: absolute;
    width: 45px;
    top: 70px;
    left: 39%;
    mix-blend-mode: multiply;
    opacity: 0;
}
.lipstick-full-riepilogo {
    background-image: url('../img/lipstick-riepilogo.png');
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: contain;
    width: 190px;
    height: 349px;
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    /* filter:drop-shadow(13px 5px 13px rgba(0,0,0,0.4));
    will-change: filter; */
}
.container-experience .punta-riepilogo {
    width: 31%;
    top: 1.2%;
    right: 9%;
    position: absolute;
}
.container-experience .punta-riepilogo-spirale {
    opacity: 0;
    width: 31%;
    position: absolute;
    right: 9%;
    top: 0.5%;
}
.container-experience img.upper-riepilogo-spirale {
    opacity: 0;
    position: absolute;
    width: 31%;
    right: 9%;
    top: 0.5%;
    mix-blend-mode: multiply;
}
.container-experience .punta-riepilogo-diamante {
    opacity: 0;
    width: 31%;
    position: absolute;
    right: 9%;
    top: 0.3%;
}
.container-experience img.upper-riepilogo-diamante {
    opacity: 0;
    position: absolute;
    width: 31%;
    right: 9%;
    top: 0%;
    mix-blend-mode: multiply;
}
.container-experience .punta-riepilogo-puzzle {
    opacity: 0;
    width: 31%;
    position: absolute;
    right: 9%;
    top: 0.8%;
}
.container-experience img.upper-riepilogo-puzzle {
    opacity: 0;
    position: absolute;
    width: 31%;
    right: 9%;
    top: 0.7%;
    mix-blend-mode: multiply;
}
.container-experience .sottopunta-riepilogo {
    position: absolute;
    width: 28%;
    top: 30%;
    right: 11.6%;
    mix-blend-mode: darken;
}
.container-experience img.upper-riepilogo {
    position: absolute;
    right: 9%;
    width: 30%;
    top: 1.2%;
    mix-blend-mode: multiply;
}
.container-experience img.upper-riepilogo-cuore {
    position: absolute;
    top: 19%;
    right: 17%;
    width: 32px;
    mix-blend-mode: multiply;
    opacity: 0;
}
h1.title-experience {
    overflow: visible;
    width: fit-content;
    font-family: 'editor-medium';
    font-size: 40px;
    line-height: 45px;
    font-weight: 400;
    background: linear-gradient(68.39deg, #C02660 3.6%, #F9837D 98.08%, #F9837D 98.08%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 6px;
}
.lip-balm-experience h1.title-experience {
    background: linear-gradient(68deg, #960049 3.6%, #FF0060 98.08%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
p.subtitle-experience {
    font-family: 'gantari-medium';
    font-size: 16px;
    line-height: 20px;
    color: #4C4672;
    padding-top: 8px;
    margin-bottom: 0;
}
h5.title-price {
    font-family: 'gantari-regular';
    font-size: 13px;
    line-height: 15px;
    color: rgba(112, 53, 53, 0.42);
    margin-top: 40px;
}
p.price {
    font-family: 'editor-extrabold';
    font-size: 29px;
    line-height: 35px;
    color: #161336;
    margin-bottom: 10px;
}
p.description-product {
    margin-top: 25px;
    font-family: 'gantari-regular';
    font-size: 14px;
    line-height: 16px;
    color: #4C4672;
    margin-bottom: 5px;
}
p.dimension {
    font-family: 'gantari-regular';
    font-size: 14px;
    line-height: 16px;
    color: rgba(76, 70, 114, 0.5);
}
a#four-colour {
    display: none;
    color: #000;
    font-family: 'gantari-regular';
    font-size: 11px;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.55px;
    text-transform: uppercase;
}
.navigation {
    font-family: 'gantari-bold';
    font-size: 15px;
    line-height: 18px;
    font-weight: 700;
    color: #959595;
}
h2.title-steps {
    text-align: center;
    font-family: 'editor-bold';
    font-size: 20px;
    line-height: 25px;
    margin-bottom: 0px;
    background: linear-gradient(68deg, #C02660 3.6%, #F9837D 98.08%, #F9837D 98.08%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.lip-balm-experience h2.title-steps {
    background: #4C4672;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
#nine-step h2.title-steps {
    margin-top: 12px;
}
.box-campioni {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 6px;
    column-gap: 6px;
}
p.colorstep1Name {
    font-family: 'gantari-medium';
    font-size: 14px;
    line-height: 17px;
    color: #4C4672;
    font-weight: 500;
    text-align: center;
    margin-bottom: 7px;
}
#before-step a.back-to-lipstick {
    position: absolute;
    top: 20px;
    left: 24px;
    z-index: 1;
}
#before-step .wrapper-modes {
    display: flex;
    gap: 20px;
    flex-wrap: nowrap;
    margin-top: 18px;
}
#before-step .wrapper-modes .single-mode {
    background: transparent;
    aspect-ratio: 1;
    width: calc(100% - 20px);
    max-height: 170px;
    border-radius: 30px;
    padding: 10px 0 27px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
    cursor: pointer;
    transition: all 1s;
    position: relative;
}
#before-step .wrapper-modes .single-mode:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    display: block;
    background: linear-gradient(270deg, #FFA7A7 0%, #E28888 100%);
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 30px;
}
.lip-balm-experience #before-step .wrapper-modes .single-mode:after {
    background: linear-gradient(270deg, #FFC3AA 0%, #FCAF8F 100%);
}
#before-step .wrapper-modes #beginExp:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    display: block;
    background: linear-gradient(68deg, #C02660 3.6%, #F9837D 98.08%, #F9837D 98.08%);
    box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.45);
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 30px;
}
.lip-balm-experience #before-step .wrapper-modes #beginExp:after {
    background: linear-gradient(164deg, #FF8F8B 1.08%, #FF9E72 100%);
}
#before-step .wrapper-modes .single-mode:hover,
#before-step .wrapper-modes #beginExp:hover {
    background: #5950BB;
}
.lip-balm-experience #before-step .wrapper-modes .single-mode:hover,
.lip-balm-experience #before-step .wrapper-modes #beginExp:hover {
    background: #4C4672;
}
/* #before-step .wrapper-modes #beginExp {
    background: linear-gradient(68deg, #C02660 3.6%, #F9837D 98.08%, #F9837D 98.08%);
    box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.45);
} */
#before-step .wrapper-modes .single-mode span {
    color: #FFF;
    font-family: gantari-medium;
    font-size: 14px;
    line-height: normal;
}
#before-step .wrapper-modes img {
    max-height: 60px;

}
.container-experience #quizModal .modal-dialog {
    margin: 0 auto;
}
.container-experience #quizModal .modal-content {
    border: none;
    background: transparent;
    height: 100vh;
    justify-content: space-between;
}
.container-experience #quizModal .step {
    border-radius: 24px 24px 0px 0px;
    background: #F9F6F4;
    padding: 40px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.container-experience #quizModal .step.loading-step {
    background: transparent;
    min-height: 89vh;
    justify-content: center;
}
.container-experience #quizModal .loading-step img {
    width: 37px;
    height: 37px;
    margin-bottom: 40px;
}
.container-experience #quizModal .eyes-step,
.container-experience #quizModal .hair-step,
.container-experience #quizModal .loading-step,
.container-experience #quizModal .result-step,
.container-experience #quizModal .error-step {
    display: none;
}
.container-experience #quizModal .modal-top {
    padding: 20px 0;
    display: flex;
    justify-content: center;
}
.container-experience #quizModal .back-btn,
.container-experience #quizModal button.btn-close-popup {
    width: 28px;
    height: 28px;
    padding: 4px;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    position: absolute;
    top: 20px;
    left: 24px;
}
.container-experience #quizModal button.btn-close-popup {
    display: none;
}
.container-experience #quizModal .skin-step button.btn-close-popup {
    display: flex;
}
.container-experience #quizModal .skin-step .back-btn {
    display: none;
}
.container-experience #quizModal .logo {
    filter: invert();
    max-height: 36px;
}
.container-experience #quizModal .wrapper-title {
    max-width: 300px;
    margin: 0 auto 10px;
    min-height: 125px;
}
.container-experience #quizModal .navigation {
    text-align: center;
    font-family: 'gantari-medium';
    font-size: 13px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 5.2px;
    color: #530006;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.container-experience #quizModal .title {
    font-family: 'editor-bold';
    font-size: 24px;
    line-height: normal;
    margin-bottom: 5px;
    background: linear-gradient(68.39deg, #C02660 3.6%, #F9837D 98.08%, #F9837D 98.08%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.container-experience.lip-balm-experience #quizModal .title {
    background: #4C4672;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.container-experience #quizModal .loading-step .title {
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: #fff;
    color: #fff;
}
.container-experience #quizModal .loading-step .title {
    max-width: 320px;
}
.container-experience #quizModal .loading-step .title span {
    color: #283C70;
    background: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: #283C70;
}
.container-experience #quizModal .description {
    text-align: center;
    font-family: 'gantari-medium';
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    color: #530006;
    max-width: 300px;
}
.container-experience #quizModal .result-step .description {
    margin-bottom: 15px;
    letter-spacing: 1.4px;
}
.container-experience #quizModal .result-step .title {
    margin-bottom: 20px;
}
.container-experience #quizModal .skin-step .wrapper-skin-color,
.container-experience #quizModal .eyes-step .wrapper-eyes-color,
.container-experience #quizModal .hair-step .wrapper-hair-color {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    min-height: 154px;
}
.container-experience #quizModal .skin-step label,
.container-experience #quizModal .eyes-step label,
.container-experience #quizModal .hair-step label {
    max-width: calc(33.33% - 15px);
}
.container-experience #quizModal .skin-step .wrapper-single-color,
.container-experience #quizModal .eyes-step .wrapper-single-color,
.container-experience #quizModal .hair-step .wrapper-single-color {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100%;
    cursor: pointer;
    padding: 10px;
}
.container-experience #quizModal .skin-step .wrapper-single-color .text,
.container-experience #quizModal .eyes-step .wrapper-single-color .text,
.container-experience #quizModal .hair-step .wrapper-single-color .text {
    color: #530006;
    text-align: center;
    font-family: 'gantari-medium';
    font-size: 14px;
    line-height: normal;
    margin-top: 16px;
}
.container-experience #quizModal .skin-step input.skin-color,
.container-experience #quizModal .eyes-step input.eyes-color,
.container-experience #quizModal .hair-step input.hair-color {
    width: 0;
    height: 0;
    opacity: 0;
    position: absolute;
}
.container-experience #quizModal .skin-step input.skin-color:hover + div,
.container-experience #quizModal .eyes-step input.eyes-color:hover + div,
.container-experience #quizModal .hair-step input.hair-color:hover + div,
.container-experience #quizModal .skin-step input.skin-color:checked + div,
.container-experience #quizModal .eyes-step input.eyes-color:checked + div,
.container-experience #quizModal .hair-step input.hair-color:checked + div {
    border-radius: 12px;
    outline: 1px solid rgba(83, 0, 6, 0.10);
    background: #F9F6F4;
    box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.10);
}
.container-experience #quizModal .skin-step .wrapper-single-color img,
.container-experience #quizModal .eyes-step .wrapper-single-color img,
.container-experience #quizModal .hair-step .wrapper-single-color img {
    width: 84px;
    height: 84px;
}
.container-experience #quizModal button.next-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    height: 52px;
    padding: 15px 30px;
    border-radius: 21px;
    background: linear-gradient(68deg, #C02660 3.6%, #F9837D 98.08%, #F9837D 98.08%);
    color: #F9F6F4;
    font-family: gantari-bold, sans-serif;
    font-size: 15px;
    line-height: normal;
    text-align: center;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 30px;
}
.container-experience #quizModal button.next-btn:hover {
    background: linear-gradient(68deg, #6A5AE0 3.6%, #6A5AE0 .08%, #6A5AE0 .08%);
}
.container-experience.lip-balm-experience #quizModal button.next-btn {
    background: #161336;
}
.container-experience.lip-balm-experience #quizModal button.next-btn:hover {
    background: #6A5AE0;
}
.container-experience button:disabled,
.container-experience #quizModal button.next-btn:disabled {
    background: #D3D3D3 !important;
    cursor: not-allowed;
    opacity: 1;
}
.container-experience #quizModal .wrapper-back-next {
    display: flex;
    justify-content: center;
    align-items: center;
}
.container-experience #quizModal .season-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    width: 100%;
    max-width: 560px;
}
.container-experience #quizModal .season-palette .palette-color {
    width: calc(25% - 16px);
    max-width: 79px;
    aspect-ratio: 1;
    border-radius: 100%;
    position: relative;
    cursor: pointer;
}
.container-experience #quizModal .season-palette .circle-single-color {
    width: 0;
    border-radius: 100%;
    aspect-ratio: 1;
    background-image: url('../img/color-selected.svg');
    background-repeat: no-repeat;
    background-size: 18px;
    background-position: center;
}
.container-experience #quizModal .season-palette input.single-color-palette:checked + div {
    outline: 3px solid #FFF;
    box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.35);
    width: 100%;
}

#first-step .topColorSelector {
    margin-bottom: 12px;
}
.Innerbottle {
    width: 70px;
	max-width: 22%;
}
#first-step .pretitle {
    color:#530006;
    font-family: gantari-medium;
    font-size: 14px;
    letter-spacing: 1.4px;
    margin-bottom: 14px;
}
.colorBoxContainer {
	padding-bottom: 30px;
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
    max-width: 525px;
}
.colorCard {
    width: 72px;
    border-radius: 100%;
    aspect-ratio: 1;
    cursor: pointer;
}
.colorCard.active {
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.32);
    border: 3px solid #FFF;
    position: relative;
}
.colorCard.active::before {
    content: '';
    width: 17px;
    height: 12px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-image: url('../img/color-selected.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.colorCard.white.active::before {
    filter: invert(1);
}
.burgundy {
    background-color: #85252A;
}
.red-red {
    background-color: #C0403D;
}
.coral {
    background-color: #E34248;
}
.paprika {
    background-color: #D82520;
}
.fire {
    background-color: #E63500;
}
.mandarin {
    background-color: #FC4C02;
}
.ruby {
    background-color: #C5024D;
}
.pinky {
    background-color: #E0457B;
}
.magenta {
    background-color: #DA1984;
}
.mahogany {
    background-color: rgb(101, 48, 36);
}
.brown {
    background-color: rgb(96, 61, 32);
}
.tobacco {
    background-color: rgb(161, 71, 55);
}
.cocoa {
    background-color: rgb(109, 79, 71);
}
.sapphire {
    background-color: #23249E;
}
.sky {
    background-color: #0065A4;
}
.blackberry {
    background-color: #6E334D;
}
.peach {
    background-color: #FDBE87;
}
.ochre {
    background-color: #B47E00;
}
.sunflower {
    background-color: #FCCD00;
}
.white {
    background-color: #fff;
    border: 1px solid #000;
}
.black {
    background-color: #000;
}
.radio-buttons {
    display: flex;
    column-gap: 10px;
}
a.selectColor, a.noCustomization {
    font-family: 'gantari-medium';
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    color: #530006;
}
a.selectColor:hover,
a.noCustomization:hover {
    color: #000;
}
a.buttonCreateMix {
    display: none;
}
.tonality {
    display: inline-block;
}
.buttonCreateMix,
.buttonIntensity,
.tonality,
.container-experience button.add-to-cart,
#close-popupcolor {
    font-family: 'gantari-bold';
    font-size: 15px;
    line-height: 18px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #ffffff;
    padding: 17px 30px;
    border-radius: 21px;
    background: transparent;
    cursor: pointer;
    position: relative;
    transition: all 1s;
    z-index: 0;
}
#close-popupcolor {
    margin-top: 20px;
}
.buttonCreateMix:after,
.buttonIntensity:after,
.tonality:after,
.container-experience button.add-to-cart:after,
#close-popupcolor:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: linear-gradient(68deg, #C02660 3.6%, #F9837D 98.08%, #F9837D 98.08%);
    border-radius: 21px;
    left: 0;
    top: 0;
    z-index: -1;
}
.lip-balm-experience .buttonCreateMix:after,
.lip-balm-experience .buttonIntensity:after,
.lip-balm-experience .tonality:after,
.lip-balm-experience.container-experience button.add-to-cart:after,
.lip-balm-experience #close-popupcolor:after {
    background: #161336;
}
#reset-change-intensity {
    border-radius: 21px;
    background: #B7CFD7;
    font-family: 'gantari-bold';
    font-size: 15px;
    line-height: 18px;
    letter-spacing: 1.2px;
    color: #1C274C;
    padding: 17px;
    display: none;
    gap: 5px;
}
.container-experience button.add-to-cart {
    padding: 17px 14px;
    margin-right: 10px;
}
.buttonCreateMix:hover,
.buttonIntensity:hover,
.tonality:hover,
.container-experience button.add-to-cart:hover,
#close-popupcolor:hover {
    background: #6A5AE0;
}
.buttonCreateMix:hover:after,
.buttonIntensity:hover:after,
.tonality:hover:after,
.container-experience button.add-to-cart:hover:after,
#close-popupcolor:hover:after {
    opacity: 0;
    transition: all 1s;
}
.buttonCreateMix:disabled,
.buttonIntensity.disable,
.container-experience button.add-to-cart:disabled,
.tonality:disabled {
    background: #D3D3D3;
    opacity: 0.5;
    cursor: unset;
}
.buttonCreateMix:disabled:after,
.buttonIntensity.disable:after,
.container-experience button.add-to-cart:disabled:after,
.tonality:disabled:after {
    opacity: 0;
}
#Customization {
    display: inline-block;
    font-family: 'gantari-regular';
    font-size: 14px;
    line-height: 18px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #ffffff !important;
    background-color: #4D1659;
    padding: 15px 35px;
    border-radius: 46px;
    box-shadow: 6px 6px 14px rgb(76 70 114 / 35%);
    text-align: center;
    margin: 0px 15px 0px 0;
    cursor: pointer;
}
#Customization {
    display: inline-block;
    background: #A0A0A0;
}
p.note {
    position: absolute;
    bottom: 10px;
    font-family: 'gantari-regular';
    font-size: 11px;
    line-height: 13px;
    font-weight: 300;
    color: #000;
    z-index: 0;
    max-width: 305px;
    left: auto;
    right: auto;
}
.second-step .topColorSelector {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background: #ededed;
    margin-right: 20px;
}
.flexDiv {
    display: flex;
    flex-wrap: wrap;
    row-gap: 10px;
    max-width: 400px;
    min-width: 300px;
}
.flexOne {
    display: flex;
    flex: 0 0 100%;
    flex-wrap: wrap;
    max-width: 100%;
    align-items: center;
    position: relative;
}
.flexOne.empty {
    cursor: pointer;
    margin-top: 10px;
    display: none;
}
.flexOne.empty .add-more-color {
    color: #575757;
    text-align: center;
    font-family: gantari-bold;
    font-size: 20px;
    line-height: normal;
    width: 40px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    position: relative;
}
.flexOne.empty .add-more-color svg {
    position: absolute;
}
.flexOne.empty .title {
    color: #575757;
    font-family: gantari-bold;
    font-size: 15px;
    line-height: normal;
    display: flex;
    align-items: center;
}
.selectionContainer {
    flex: 1;
}
.slider-container {
    flex: 1;
    display: flex;
    align-items: center;
}
.ui-slider-horizontal {
    height: 9px !important;
    width: 100%;
    cursor: pointer;
}
.slider {
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    background-color: #eee;
}
span.ui-slider-handle {
    background: #fff !important;
    box-shadow: 4px 6px 6px rgb(86 122 139 / 40%);
    border-radius: 100%;
    width: 25px !important;
    height: 25px !important;
    top: -0.6em !important;
}
.ui-slider-range {
    border-radius: 5px;
    border:1px solid #E6E6E6 !important
}
.percent {
    padding-left: 34px;
    font-family: 'gantari-bold';
    font-size: 14px;
    line-height: 20px;
    padding-right: 15px;
}
.container-experience input[type="radio"] {
    opacity: 0;
    width: 0;
    height: 0;
    display: none;
}
#popupColor .modal-dialog {
    max-width: 480px;
    margin: 0 auto;
}
#popupColor .modal-content {
    padding: 30px 40px 50px;
    border-radius: 20px;
    border: none;
    align-items: center;
}
#popupColor .btn-close-popup {
    position: absolute;
    top: 30px;
    right: 40px;
    padding: 0;
    background: transparent;
}
.container-experience #popupColor .description {
    text-align: center;
    font-family: 'gantari-medium';
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    color: #530006;
    letter-spacing: 1.4px;
}
#popupColor .colorBoxContainer {
    padding: 30px 0 15px;
    justify-content: center;
}
#popupColor .colorBoxContainer .colorCard {
    width: 60px;
}
.container-experience #second-step .removeColor {
    width: 40px;
    aspect-ratio: 1;
    background: #D5E5F0;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 100%;
    cursor: pointer;
}
.container-experience input[type="radio"] + div, .container-experience input[type="radio"] + p {
    cursor: pointer;
}
p.text-radio {
    font-family: 'gantari-medium';
    font-size: 14px;
    line-height: 16px;
    color: #4C4672;
    margin-top: 18px;
    margin-bottom: 0;
    text-align: center;
}
.circleRadio {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    background: #DA96B4;
    border-radius: 100%;
    margin: 0 auto;
    opacity: 0.5;
    padding: 15px;
}
.lip-balm-experience .circleRadio {
    background: #FFD0BD;
}
.circleRadio span {
    font-family: 'gantari-bold';
    font-size: 14px;
    color: #FFF;
    padding-top: 7px;
}
.container-experience .radio-buttons label {
    flex-grow: 1;
    flex-basis: 0px;
    min-width: 113px;
    max-width: 113px;
}
.radio-buttons label .wrapper {
    padding: 15px;
    position: relative;
}
.container-experience .radio-buttons input[type="radio"]:checked + div {
    box-shadow: 0px 0px 14px rgba(76, 70, 114, 0.3);
    border-radius: 9px;
}
.container-experience .radio-buttons input[type="radio"]:checked + div .circleRadio {
    opacity: 1;
}
.close-tooltip {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.tooltip-icon {
    font-family: serif;
    font-style: italic;
    font-weight: bold;
    font-size: 20px;
    line-height: 25px;
    cursor: pointer;
    width: 35px;
    height: 35px;
    color: #fff;
    background-color: #4C4672;
    border-radius: 100%;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 8%;
    right: 9%;
}
.tooltip-icon:hover, .tooltip-icon:active {
    background: #4C4672;
    transition: 0.3s;
}
.citylab-tooltip-icon:hover {
    background-color: #4C4672;
    transition: all 0.3s;
}
.tooltip-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    transform: translateX(100%);
    max-width: 440px;
    height: 100%;
    background: #fff;
    padding: 20px 60px;
    transition: all 0.3s;
    background-color: #FFA7A7;
    top: 0;
    right: 0;
    z-index: 2;
    border-radius: 30px 0 0 30px;
    transition: all 1s;
}
.lip-balm-experience .tooltip-content {
    background: linear-gradient(164deg, #FF8F8B 1.08%, #FF9E72 100%);
}
.tooltip-content.opened {
    transform: translateX(0);
}
.tooltip-content h5 {
    font-family: 'gantari-regular';
    font-size: 16px;
    line-height: 19px;
    font-weight: 700;
    text-transform: uppercase;
    color: #4C4672;
    text-align: center;
    margin-bottom: 0;
}
.tooltip-content h5 b {
    font-family: 'gantari-bold';
}
.tooltip-content p {
    font-family: 'gantari-regular';
    font-size: 16px;
    line-height: 20px;
    color: #161336;
    margin-bottom: 0;
    text-align: center;
}
.close-tooltip {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    flex-direction: column;
    gap: 15px;
}
.close-tooltip .headingIcon {
    background-color: rgba(255, 255, 255, 0.5);
    padding: 16px;
    border-radius: 100px;
    width: 72px;
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'gantari-bold';
    font-size: 12px;
    color: #4C4672;
}
.close-tooltip .headingIcon img {
    max-height: 40px;
}
.close-tooltip .icon-close-tooltip {
    width: 12px;
    cursor: pointer;
    position: absolute;
    top: 27px;
    right: 27px;
}
.principio img, .aroma img {
    max-width: 57px;
}
.packaging-button {
    margin-bottom: 28px;
}
.input-packaging {
    border-bottom: 1px solid #000;
    border-top: none;
    border-left: none;
    border-right: none;
    min-width: 320px;
    max-width: 320px;
    height: 53px;
    padding-bottom: 16px;
    text-align: center;
    font-family: 'gantari-regular';
    font-size: 30px;
    line-height: 37px;
    font-weight: 300;
    color: #222222;
    text-transform: uppercase;
}
input#pack-input-name {
    border-top: none !important;
    border-right: none !important;
    border-left: none !important;
    border-radius: 0 !important;
    border-color: #000 !important;
}
.packaging-button span {
    font-family: 'gantari-regular';
    font-size: 15px;
    line-height: 18px;
    color: #C6C6C6;
    font-weight: 400;
    text-align: center;
    margin-top: 6px;
    display: block;
}
a#no-custom-pack {
    cursor: pointer;
}
.container-experience .table-riepilogo {
    display: flex;
    column-gap: 15px;
    row-gap: 30px;
    margin-top: 20px;
    margin-bottom: 80px;
    flex-wrap: wrap;
}
.container-experience .table-riepilogo .single-choice {
    min-width: 94px;
    max-width: 94px;
    border-radius: 9px;
    background: #F9F6F4;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25);
    padding: 14px 10px 30px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: center;
    position: relative;
}
.container-experience .table-riepilogo .single-choice .heading-detail {
    color: #4C4672;
    text-align: center;
    font-family: 'gantari-regular';
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}
.container-experience .table-riepilogo .single-choice .modify {
    width: 30px;
    aspect-ratio: 1;
    background: #4C4672;
    border-radius: 100%;
    position: absolute;
    bottom: -15px;
    padding: 7px;
    cursor: pointer;
}
.container-experience .table-riepilogo .info-result {
    width: 74px;
    aspect-ratio: 1;
    border-radius: 100%;
    background: #DA96B4;
    padding: 16px;
    font-family: 'gantari-bold';
    font-size: 14px;
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
}
.container-experience.lip-balm-experience .table-riepilogo .info-result {
    background: #FFD0BD;
}
table.table.table-riepilogo {
    border-width: 0;
    margin: 30px 0;
    display: inline-table;
    max-width: 440px;
}
th.heading-detail {
    font-family: 'gantari-bold';
    font-size: 14px;
    line-height: 17px;
    text-transform: uppercase;
    color: #767676;
    padding: 0 35px 8px 0 !important;
    border: none !important;
}
td.info-result {
    font-family: 'gantari-regular';
    font-size: 14px;
    line-height: 17px;
    font-weight: 400;
    color: #767676;
    letter-spacing: 0.5px;
    padding: 0 35px 8px 0 !important;
    border: none !important;
}
td#info-result-color, td#info-result-package {
    text-transform: uppercase;
}
td.modify {
    padding: 0 0 8px 0 !important;
    border: none !important;
}
td.modify a {
    font-family: 'gantari-regular';
    font-size: 14px;
    line-height: 17px;
    font-style: italic;
    font-weight: 400;
    color: rgba(118, 118, 118, 0.5);
}
.container-experience .owl-item .item .description {
    font-family: 'gantari-medium';
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    color: #530006;
    max-width: 335px;
    margin-bottom: 14px;
    letter-spacing: 1.4px;
}
.container-experience .owl-item .item .balm-texture-title {
    font-family: 'editor-bold';
    font-size: 24px;
    line-height: normal;
    color: #4C4672;
    margin-top: 12px;
    margin-bottom: 12px;
}
.container-experience .owl-item .item .balm-texture-description {
    font-family: 'gantari-medium';
    font-size: 16px;
    line-height: normal;
    color: #4C4672;
    max-width: 440px;
}
a.noCustomization.save-for-later {
    margin-top: 5px;
}
.container-experience #final-lipstick {
    display: none;
    background: #F9F6F4;
}
.container-experience #final-lipstick .full-img {
    height: 100vh;
    min-height: 500px;
    position: relative;
    overflow: hidden;
}
.container-experience #final-lipstick .full-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.container-experience #final-lipstick .reviews-lipstick {
    padding: 110px 0;
}
.container-experience #final-lipstick .reviews-lipstick .rplg-grid-row.rplg-businesses {
    max-width: 33.33%;
}

@media screen and (max-height: 600px) {
    .container-experience {
        min-height: auto !important;
        height: auto !important;
    }
}

@media screen and (min-width: 768px) {
    #quizModal {
        background: linear-gradient(152deg, rgba(250, 176, 176, 0.80) 1.31%, rgba(192, 145, 203, 0.80) 156.08%);
        backdrop-filter: blur(20px);
    }
    .lip-balm-experience #quizModal {
        background: rgba(253, 180, 150, 0.92);
    }
    .container-experience #quizModal .modal-top {
        display: none;
    }
    .container-experience #quizModal .modal-dialog {
        margin: auto;
        max-width: 500px;
        top: 50%;
        transform: translateY(-50%);
    }
    .container-experience #quizModal .modal-content {
        height: auto;
    }
    .container-experience #quizModal .step {
        border-radius: 24px;
    }
    .container-experience #quizModal .wrapper-title {
        max-width: 100%;
    }
    .container-experience #quizModal .description {
        margin: 0 auto;
    }
    .container-experience #quizModal .loading-step .title {
        font-size: 36px;
        max-width: 630px;
    }
}

@media screen and (min-width: 992px){
    .container-experience .owl-stage-outer.owl-height {
        min-height: 650px;
        height: 96vh !important;
    }
    .container-experience .popup .container-popup {
        height: 90%;
        max-height: 650px;
        border-radius: 24px;
    }
    #before-step a.back-to-lipstick {
        top: 25px;
        left: auto;
        right: 110px;
    }
    #before-step .wrapper-modes .single-mode {
        max-height: 220px;
        width: 220px;
        padding: 40px 0 50px;
    }
    #before-step .wrapper-modes .single-mode span {
        font-size: 18px;
    }
    .container-experience .lipstickImginside,
    .container-experience .choose-colaggio {
        position: absolute;
        bottom: -100px;
        transform: translateX(-50%);
        left: 50%;
        transition: 1s;
    }
    .container-experience .lipstickImginside.up {
        bottom: 50%;
        transform: translate(-50%,50%);
        transition: 1s;
    }
    .container-experience .lipstickImginside.upper {
        bottom: 120%;
        transform: translate(-50%,0%);
        transition: 1.5s;
    }
    .container-experience .lipstickImginside.up .lipstick-full {
        width: 112px;
        height: 320px;
        transition: 1.2s;
    }
    .lips-texture.centered {
        transform: translate(-50%,50%);
        bottom: 50%;
        transition: 1.5s;
    }
    .container-experience #quizModal .modal-dialog {
        max-width: 830px;
    }
    .container-experience #quizModal .eyes-step label {
        max-width: 20%;
    }
    .container-experience .button-back,
    .container-experience .button-back-advice {
        top: 25px;
        left: auto;
        right: 110px;
    }
    .box-button {
        margin-top: 30px;
    }
	.item.ar .box-button {
        margin-top: 15px;
    }
    .colorCard {
        width: 52px;
    }
    .mobile,
    .container-no-white .augmented-reality {
        display: none !important;
    }
    h2.title-steps {
        text-align: left;
        margin-bottom: 25px;
        font-size: 24px;
    }
    .resultMainContainer {
        margin: 35px 0;
    }
	.ar .radio-buttons label .wrapper {
		padding: 13px;
		width: 100%;
	}
	.ar .radio-buttons .circleRadio {
        height: 67px;
        width: 67px;
        min-width: 67px;
    }
}

@media screen and (min-width: 1200px) {
    .page-template-skincare-virtual-quiz header .middle-header,
    .page-template-skincare-virtual-create header .middle-header {
        padding: 20px 0;
    }
}

@media screen and (min-width:1200px) and (max-width:1350px){
    #five-step .radio-buttons,
    #seven-step .radio-buttons {
        flex-wrap: wrap;
        max-width: 360px;
    }
    .container-experience .table-riepilogo {
        column-gap: 10px;
        flex-wrap: wrap;
    }
    .container-experience .table-riepilogo .single-choice {
        min-width: 20%;
        max-width: 20%;
        gap: 12px;
        padding: 14px 7px 25px;
    }
    .container-experience .table-riepilogo .info-result {
        width: 75px;
    }
}
@media screen and (min-width:1024px) and (max-width:1199px){
    header.h-lipstick-online .middle-header .container-logo,
    .wrapper-characteristics {
        width: 327px;
        max-width: 327px;
        margin: 0 75px 0 auto;
    }
    h1.title-experience {
        font-size: 36px;
        line-height: 42px;
    }
    p.note {
        left: 2%;
    }
    .container-experience .bcg-white {
        max-width: 235px;
        left: calc(41.66666667% - 118px);
    }
	.container-experience .third-step.ar .radio-buttons label {
		gap: 10%;
	}
    .container-experience .ar .radio-buttons label {
        max-width: 29%;
        width: 29%;
    }
    #five-step .radio-buttons,
    #seven-step .radio-buttons {
        flex-wrap: wrap;
        max-width: 360px;
    }
    .container-experience .table-riepilogo {
        column-gap: 10px;
        flex-wrap: wrap;
    }
    .container-experience .table-riepilogo .single-choice {
        min-width: 20%;
        max-width: 20%;
        gap: 10px;
        padding: 10px 7px 20px;
    }
    .container-experience .table-riepilogo .info-result {
        width: 100%;
    }
}
@media screen and (min-width:1023px){
    .h-lipstick-online .header-wrapper {
        padding: 20px !important;
    }
}

@media screen and (min-width:992px) and (max-width:1023px) {
	.container-experience .bcg-white {
    	max-width: 235px;
    	left: calc(41.66666667% - 118px);
	}
    .mobile,
    .mobile .circle-result,
    .container-no-white .augmented-reality {
        display: none !important;
    }
    .augmented-reality {
        top: 10%;
    }
    h2.title-steps {
        text-align: left;
    }
    .colorBoxContainer {
        gap: 7px;
        position: relative;
        padding-bottom: 16px;
        margin-bottom: 25px;
    }
    .resultMainContainer {
        margin: 35px 0;
    }
    .radio-buttons {
        column-gap: 20px;
    }
    #five-step .radio-buttons,
    #seven-step .radio-buttons {
        flex-wrap: wrap;
        max-width: 380px;
    }
    #nine-step .radio-buttons {
        column-gap: 0px;
    }
    #seven-step .radio-buttons .wrapper {
        padding: 15px 15px 0px;
    }
    .bcg-mobile,
	.container-experience .second-step.ar .bcg-mobile{
        transform: translateX(105px);
        max-width: 460px;
    }
    .lipstick-full-riepilogo {
        width: 150px;
        height: 276px;
    }
    .container-experience .table-riepilogo .single-choice {
        padding: 10px 7px 20px;
        min-width: 20%;
        max-width: 20%;
        gap: 10px;
    }
    .container-experience .table-riepilogo {
        column-gap: 11px;
    }
    .container-experience .table-riepilogo .info-result {
        width: 100%;
        padding: 7px;
    }
    #seven-step .radio-buttons label .wrapper {
        padding: 13px;
    }
    .container-experience img.upper-riepilogo-cuore {
        width: 28px;
        right: 23px;
    }
}

@media screen and (max-width:991px){
    .page-template-lipstick-virtuale .satellite-bubble,
    .page-template-lip-balm-virtuale .satellite-bubble {
        top: 14px;
        z-index: 0 !important;
    }
    .page-template-lipstick-virtuale .satellite-bubble button,
    .page-template-lip-balm-virtuale .satellite-bubble button {
        width: 45px !important;
        height: 45px !important;
    }
    header.h-lipstick-online .middle-header .container-logo {
        width: auto;
        max-width: 365px;
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }
    .container-experience .popup .container-popup {
        max-width: 100%;
        width: 100%;
    }
    .container-experience .container-no-white {
        position: unset;
    }
    .augmented-reality {
        top: 30%;
        left: auto;
        transform: translate(0, -30%);
        right: 0;
        border-radius: 53px 0 0 53px;
        width: 138px;
        min-width: 138px;
        padding: 12px 14px;
        z-index: 3;
    }
    .augmented-reality .icon img {
        min-width: 23px;
        height: 19px;
    }
    .augmented-reality span {
        font-size: 15px;
        text-align: left;
        line-height: 14px;
    }
    .tooltip-content {
        padding: 40px 50px;
        height: auto;
        width: 100%;
        top: auto;
        bottom: 0;
        border-radius: 30px 30px 0 0;
        max-width: 500px;
        transform: translate(50%, 100%);
        right: 50%;
        transition: all 1s;
    }
    .tooltip-content.opened {
        transform: translate(50%, 0);
    }
    .container-experience .right-experience {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        background: transparent;
    }
    .container-experience .bcg-white,
    .container-experience .bg-white-experience,
    .container-experience .navigation.desktop,
    .mobile-hidden,
    a.share,
    p.note,
    .desktop,
    .container-experience .left-experience {
        display: none;
    }
    @supports not (-webkit-touch-callout: none) {  
        .owl-stage-outer.owl-height {
            min-height: 100% !important;
            height: 100% !important;
        }
    }
    .container-experience {
        min-height: 89vh;
        height: 89vh;
    }
    .container-experience .popup #close-popup-icon {
        top: 28px;
        right: 28px;
        width: 25px;
    }
    .container-experience #quizModal .step {
        padding: 40px 20px 100px;
    }
    .container-experience #quizModal button.next-btn {
        margin-top: 10px;
    }
    .container-experience #quizModal .season-palette {
        margin-bottom: 20px;
    }
    .container-experience #quizModal .skin-step label,
    .container-experience #quizModal .eyes-step label,
    .container-experience #quizModal .hair-step label {
        width: calc(33.33% - 15px);
    }
    .resultMainContainer {
        margin: 18px;
    }
    .container-experience .owl-item .item .description {
        margin-bottom: 0px;
    }
    .container-experience .lipstick-full {
        width: 137px;
        height: 392px;
    }
    .container-experience .lipstickImginside {
        position: absolute;
        top: 100px;
        left: 50%;
        transform: translateX(-50%);
        transition: 1s;
    }
    .container-experience .lipstickImginside.upper {
        top: 300px;
        transition: 1.5s;
    }
    .lips-texture.centered {
        transform: translate(-50%, 150px);
        bottom: calc(100% - 200px);
        transition: 1.5s;
    }
    .tooth {
        width: 180px;
        height: 143px;
    }
    .package-title-preview {
        margin-left: -10px;
    }
    .h-lipstick-online .header-wrapper {
        padding: 20px !important;
    }
    .empty-space.mobile {
        min-height: 100px;
    }
    .navigation.mobile {
        margin-bottom: 10px;
        text-align: center;
    }
    .container-experience .container {
        padding: 0 10px;
    }
    .right-experience {
        padding: 0 !important;
    }
    .bcg-mobile {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #F9F6F4;
        padding: 30px 23px;
        border-top-left-radius: 24px;
        border-top-right-radius: 24px;
        position: absolute;
        width: 100%;
        bottom: 0;
        z-index: 3;
        max-width: 500px;
        transform: none;
    }
    #nine-step .bcg-mobile {
        position: relative;
        margin: 0 auto;
    }
    .colorBoxContainer::-webkit-scrollbar,
    .radio-buttons::-webkit-scrollbar {
        display: none;
    }
    #before-step .wrapper-modes {
        width: 100%;
        justify-content: center;
    }
    #before-step .wrapper-modes .single-mode {
        max-width: 170px;
    }
    #popupColor .colorBoxContainer {
        flex-wrap: wrap;
    }
    #popupColor .colorBoxContainer .colorContainer:first-of-type {
        padding-left: 0;
    }
    #popupColor .colorBoxContainer .colorContainer:last-of-type {
        padding-right: 0;
    }
    .colorBoxContainer {
        flex-wrap: nowrap;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        width: calc(100% + 46px);
        margin-left: -23px;
        margin-right: -23px;
        padding-top: 20px;
    }
    .colorBoxContainer .colorContainer:first-of-type {
        padding-left: 23px;
    }
    .colorBoxContainer .colorContainer:last-of-type {
        padding-right: 23px;
    }
    .Innerbottle {
        width: auto;
    }
    a#show-all-color {
        display: inline-block;
        margin: 0 0 8px;
    }
    a#show-all-color, a#hide-all-color {
        font-family: 'gantari-regular';
        font-size: 15px;
        line-height: 18px;
        font-style: italic;
        text-align: center;
        color: #8B8B8B;
    }
    a#hide-all-color {
        display: none;
        margin: 0 0 8px;
    }
    .lips-texture,
    .lips-principio,
    .lips-aroma {
        transform: translateX(-50%);
        bottom: auto;
        top: 115px;
    }
    .choose-colaggio {
        position: relative;
        transform: none;
        left: auto;
        bottom: auto;
    }
    .radio-buttons {
        padding: 20px 0;
    }
    .box-button {
        margin-top: 0;
    }
    #five-step .radio-buttons,
    #seven-step .radio-buttons {
        flex-wrap: nowrap;
        width: calc(100% + 46px);
        overflow: scroll;
        margin-left: -23px;
        margin-right: -23px;
        padding: 20px 23px;
        max-width: 525px;
    }
    #five-step .radio-buttons label,
    #seven-step .radio-buttons label {
        min-width: 28%;
        max-width: 28%;
    }
    #five-step .radio-buttons label .wrapper,
    #seven-step .radio-buttons label .wrapper {
        padding: 15px 10px;
    }
    .lips-aroma:after {
        content: '';
        display: block;
        position: absolute;
        width: 150px;
        height: 298px;
        z-index: -1;
        top: -60px;
    }
    .lips-aroma.no-aroma:after {
        background-image: none;
    }
    .lips-aroma.vaniglia:after {
        background-image: url('../img/bg-vaniglia-mobile.png');
    }
    .lips-aroma.fiori-acqua:after {
        background-image: url('../img/bg-fiori-acqua-mobile.png');
    }
    .lips-aroma.frutti-rossi:after {
        background-image: url('../img/bg-frutti-rossi-mobile.png');
    }
    .container-experience img.colaggio-cuore {
        width: 30px;
        top: 55px;
    }
    button.add-to-cart {
        padding: 15px 10px;
    }
    a.noCustomization.save-for-later {
        padding-bottom: 0;
    }
    .mix-color-result.mobile {
        height: 179px;
        margin-bottom: 25px;
    }
    .circle-result {
        width: 178px;
        height: 179px;
    }
    .second-step .topColorSelector {
        width: 40px;
        height: 40px;
        margin-right: 12px;
    }
    .flexDiv {
        row-gap: 10px;
    }
    .lips-full, .lips-type-texture-shine, .lips-type-texture-natural, .tooth {
        width: 238px;
        height: 188px;
    }
    .lipstick-full-colaggio {
        width: 125px;
        height: 360px;
    }
    a#no-custom-pack {
        margin-top: 0;
        padding: 15px 0 0;
    }
    .circle-packaging {
        width: 170px;
        height: 170px;
    }
    .choose-colaggio.mobile {
        margin-bottom: 20px;
    }
    #seven-step p.text-radio {
        min-height: auto;
    }
    h1.title-experience.mobile {
        font-size: 26px;
        line-height: 30px;
        margin-bottom: 15px;
    }
    .container-experience .owl-item .item {
        position: relative;
        min-height: 100%;
        justify-content: flex-start;
        align-items: center;
        height: 89vh;
    }
    .container-experience .owl-item #nine-step {
        height: auto;
        align-items: unset;
    }
    .riepilogo {
        bottom: auto;
        transform: none;
        position: relative;
        left: auto;
    }
    #nine-step .description {
        text-align: center;
    }
    table.table.table-riepilogo, .mobile.hide-detail {
        display: none;
        margin-top: 0;
    }
    .mobile.see-detail {
        display: flex;
    }
    .mobile.see-detail, .mobile.hide-detail {
        font-family: 'gantari-extrabold';
        font-size: 14px;
        line-height: 18px;
        letter-spacing: 0.7px;
        font-weight: 800;
        color: #4C4672;
        margin-bottom: 20px;
        align-items: center;
        cursor: pointer;
    }
    .mobile.see-detail .img-detail-see, .mobile.hide-detail .img-detail-hide {
        margin-left: 5px;
    }
    .hide-detail .img-detail-hide img {
        transform: rotate(180deg);
    }
    .container-experience .wrapper-slider {
        position: relative;
        max-width: 100%;
    }
    .container-experience .slider-arrow {
        width: 10px;
        height: 15px;
    }
    #slider-next-color {
        background-image: url('../img/arrow-slider.svg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        position: absolute;
        right: -18px;
        top: 43px;
    }
    #slider-prev-color {
        background-image: url('../img/arrow-slider.svg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        transform: rotate(180deg);
        position: absolute;
        left: -18px;
        top: 43px;
    }
    .container-experience .table-riepilogo {
        justify-content: center;
        margin-bottom: 0;
    }
    .container-experience .table-riepilogo .single-choice {
        min-width: 30%;
        max-width: 30%;
    }
    .final-price.mobile {
        position: fixed;
        background: #fff;
        width: 100%;
        display: none;
        align-items: center;
        justify-content: space-between;
        bottom: 0;
        z-index: 2;
    }
    p.price {
        font-size: 20px;
        line-height: 22px;
        margin-bottom: 0px;
        margin-top: 10px;
    }
    .container-experience button.add-to-cart {
        padding: 14px;
        font-size: 14px;
        margin-right: 0;
    }
    .container-experience #final-lipstick {
        max-width: 500px;
        margin: 0 auto;
    }
    .container-experience #final-lipstick .full-img {
        height: 75vh;
        width: calc(100% - 30px);
        margin: 0 auto;
    }
    .container-experience #final-lipstick .reviews-lipstick .rplg-grid-row.rplg-businesses {
        max-width: 100%;
    }
    .container-experience .rplg {
        margin-top: 20px;
    }
}
@media screen and (min-width:768px) and (max-width:991px) {
    .augmented-reality {
        top: 120px !important;
    }
    .ar-video-container {
        height: 89vh;
        left: 0;
        top: 0;
    }
}
@media screen and (min-width: 490px) and (max-width: 991px) {
    .container-experience #quizModal .step {
        padding: 40px 30px;
    }
    .final-price.mobile {
        padding: 10px calc((100% - 375px) / 2);
    }
}
@media screen and (max-width:767px) {
    .ar-video-container {
        height: 70vh;
        left: 0;
        top: 0;
    }
}
@media screen and (max-width:489px) {
    .final-price.mobile {
        padding: 10px;
    }
    #popupColor .modal-dialog {
        max-width: calc(100% - 48px);
    }
}

.pack-initials {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 75%;
    transform: translate(-50%, -50%);
}
.pack-initials .initial {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    mix-blend-mode: darken;
    filter: saturate(0) contrast(2);
}
#eight-step .show-initials {
    padding: 0;
    background: transparent;
}
#eight-step .initials-buttons .circleRadio {
    opacity: 1;
    padding: 0;
    border-radius: 50px;
    background: #ececec;
    transition: all 0.4s;
}
#eight-step .initials-buttons input[type="radio"]:checked + div .circleRadio {
    background: #4C4672;
}
#eight-step .initials-buttons label:not(.none) input[type="radio"]:checked + div img {
    mix-blend-mode: lighten;
    filter: invert(1) saturate(0) brightness(2);
}
#info-result-iniziale.letter {
    padding: 0;
}
#info-result-iniziale.letter img {
    mix-blend-mode: darken;
}
.lip-balm-experience #info-result-iniziale.letter {
    background: #ffe0d4;
    filter: saturate(1.7);
}
.lip-balm-experience #info-result-iniziale.letter img {
    mix-blend-mode: multiply;
}
@media screen and (min-width: 992px) {
    #eight-step .initials-buttons {
        display: grid;
        gap: 12px;
        width: 90%;
        grid-template-columns: repeat(7, 1fr);
    }
    #eight-step .mobile-modal,
    #eight-step .modal-content,
    #eight-step .letters-wrapper {
        display: contents;
    }
    #eight-step .initials-buttons .circleRadio {
        max-width: 100px;
        max-height: 100px;
    }
    #eight-step .initials-buttons label.none {
        grid-column-start: 1;
        grid-column-end: 3;
    }
    #eight-step .initials-buttons label.none img {
        height: 38px;
    }
    #eight-step .initials-buttons label.none .wrapper {
        height: 100%;
    }
    #eight-step .initials-buttons label.none .circleRadio {
        max-width: unset;
        height: 100%;
        aspect-ratio: unset;
    }
}
@media screen and (max-width: 991px) {
    #seven-step .wrapper-radio {
        max-width: 100%;
        position: relative;
    }
    #eight-step .initials-buttons {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        margin: 20px auto 30px auto;
    }
    #eight-step .pack-initials {
        width: 185px;
        top: calc((100vh - 350px) / 2);
    }
    #eight-step .pack-initials img:not(.initial) {
        border-radius: 50%;
        box-shadow: 39.867px 59.8px 43.333px 0px rgba(0, 0, 0, 0.10), 18.2px 26.867px 32.067px 0px rgba(0, 0, 0, 0.17), 4.333px 6.933px 17.333px 0px rgba(0, 0, 0, 0.20), 0px 0px 0px 0px rgba(0, 0, 0, 0.20);
    }
    #eight-step .show-on-mobile {
        position: relative;
        min-height: 170px;
        padding: 16px 12px;
        border-radius: 9px;
        transition: all 0.4s;
        display: flex;
    }
    #eight-step .show-on-mobile.active {
        box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25);
    }
    #eight-step .show-on-mobile .circleRadio {
        margin: 0;
        padding: 25px;
        aspect-ratio: 1;
        width: fit-content;
        background: #E2BDCD;
    }
    .lip-balm-experience #eight-step .show-on-mobile .circleRadio {
        background: #FFD0BD;
    }
    .lip-balm-experience #eight-step .show-on-mobile.has-letter .circleRadio {
        background: #ffe0d4;
        filter: saturate(1.7);
    }
    .lip-balm-experience #eight-step .show-on-mobile.has-letter .circleRadio img {
        mix-blend-mode: multiply;
    }
    #eight-step .show-initials .circleRadio {
        transition: none;
    }
    #eight-step .show-on-mobile img {
        width: auto;
        height: 36px;
    }
    #eight-step .show-on-mobile p.text-radio {
        width: 86px;
    }
    #eight-step .initials-buttons label.none input[type="radio"]:checked + div .circleRadio {
        background: #E2BDCD;
    }
    #eight-step .show-active {
        display: none;
    }
    #eight-step .has-letter .show-init {
        display: none;
    }
    #eight-step .has-letter .show-active {
        display: block;
    }
    #eight-step .edit {
        display: none;
        position: absolute;
        left: 50%;
        bottom: -22px;
        transform: translateX(-50%);
        padding: 9px;
        border-radius: 50%;
        background: #4C4672;
    }
    #eight-step .edit img {
        width: 21px;
        height: 21px;
    }
    #eight-step .show-initials.active .edit {
        display: block;
    }
    #eight-step .has-letter .circleRadio {
        padding: 0;
    }
    #eight-step .has-letter .circleRadio img {
        height: 86px;
        mix-blend-mode: darken;
    }
    #eight-step .mobile-modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100%;
        background: linear-gradient(152deg, rgba(250, 176, 176, 0.80) 1.31%, rgba(192, 145, 203, 0.80) 156.08%);
        z-index: 10;
    }
    .lip-balm-experience #eight-step .mobile-modal {
        background: rgba(253, 180, 150, 0.92);
    }
    #eight-step .mobile-modal .modal-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: min(500px, 90vw);
        max-height: 80vh;
        overflow: hidden;
        background: #fff;
        border-radius: 28px;
    }
    #eight-step .mobile-modal .modal-header {
        display: block;
        position: absolute;
        width: 100%;
        background: #fff;
        padding: 28px 12px 22px 12px;
        border-bottom: none;
        border-top-left-radius: 28px;
        border-top-right-radius: 28px;
    }
    #eight-step .mobile-modal .modal-header::before {
        content: "";
        width: 100%;
        height: 20px;
        position: absolute;
        bottom: -20px;
        left: 0;
        background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%);
    }
    #eight-step .mobile-modal .title {
        font-family: gantari-medium;
        font-size: 14px;
        line-height: normal;
        text-align: center;
        color: #530006;
        letter-spacing: 1.4px;
    }
    #eight-step .mobile-modal .close-modal {
        position: absolute;
        padding: 10px;
        top: 18px;
        right: 20px;
        font-size: 24px;
        font-weight: 300;
        line-height: 14px;
        color: #530006;
        background: transparent;
    }
    #eight-step .mobile-modal .modal-footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 0;
        border-top: none;
        background: #fff;
        border-bottom-left-radius: 28px;
        border-bottom-right-radius: 28px;
    }
    #eight-step .mobile-modal .modal-footer::before {
        content: "";
        position: absolute;
        top: -70px;
        left: 0;
        width: 100%;
        height: 72px;
        pointer-events: none;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%);
    }
    #eight-step .mobile-modal .choose-initial-btn {
        font-family: gantari-bold;
        font-size: 15px;
        line-height: normal;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: #fff;
        display: block;
        padding: 18px 30px;
        border-radius: 21px;
        margin: 22px auto;
        background: linear-gradient(68deg, #C02660 3.6%, #F9837D 98.08%, #F9837D 98.08%);
        transition: all 0.4s;
    }
    .lip-balm-experience #eight-step .mobile-modal .choose-initial-btn {
        background: #161336;
    }
    #eight-step .mobile-modal .choose-initial-btn:disabled {
        background: #D9D9D9;
    }
    #eight-step .letters-wrapper {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        overflow: scroll;
        padding: 80px 34px 140px 34px;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    #nine-step .bcg-mobile {
        height: 100%;
        margin: 0 auto;
    }
    .container-experience .lipstickImginside {
        top: 50%;
        left: 50%;
        transform: translate(-50%, calc(-50% - 150px));
    }
    .lips-texture, .lips-principio, .lips-aroma {
        top: 50%;
        left: 50%;
        transform: translate(-50%, calc(-50% - 150px));
    }
    .choose-colaggio {
        top: 50%;
        transform: translateY(-50%);
    }
}