/*  ------  local   ------  */
.exf__page { 
    --CLARINS-FONT:"Tajawal Medium" ,ClarinsRegular, Clarins !important;
    --GOTHAM-EXTRALIGHT: "Tajawal Regular", sans-serif !important;
    --GOTHAM-LIGHT: "Tajawal Regular", sans-serif !important;
    --GOTHAM-BOOK: "Tajawal Regular", Helvetica, Arial, sans-serif !important;
    --GOTHAM-MEDIUM: "Tajawal Regular",Helvetica, Arial, sans-serif !important;
}

.exf__page .exf__pack-content {
    text-align: right;
    padding-right: 22%;
}
.exf__page .exf__pack-col {
    text-align: right;
}
.exf__page .exf__pack-col:nth-child(1) {
    border-left: solid 1px #9D6552 !important;
    border-right: none !important;
    padding-right: 31px;
}
.exf__page .exf__pack-col {
    width: 46% !important;
}
.exf__page .exf__pack-col:nth-child(2) {
    padding-right: 114px !important;
}
.exf__page .exf__bloc-tiles {
    direction: ltr;
}
.exf__page .exf__refillable-item-text {
    padding-right: 10px;
}
.exf__page .exf__facial-media {
    left: 70% !important;
}
.exf__page .exf__facial-expert {
    right: 13% !important;
}
.exf__page .exf__facial-expert-visual {
    left: 90% !important;
}
.exf__page .exf__facial-content {
    right: 10% !important;
}
.exf__page .exf__facial-body {
    right: 33% !important;
}
.exf__page .exf__facial-content-left {
    text-align: right;
}

.exf__page .exf__faq-item-handler {
    text-align: right;
}
.exf__faq-item-handler, .exf__faq-item-answer {
    text-align: right !important;
}
.exf__page .exf__faq-item-handler:after {
    right: 97%;
}
.exf__page .exf__faq-item-handler {
    padding-right: 10px;
}

.exf__page .exf__legende {
    text-align: right;
}

.exf__page .exf__refillable-number {
    direction: ltr;
}
.exf__page .exf__refillable-number-primary {
    direction: ltr;
    padding-right: 38%;
}
.exf__page .exf__tile-number-value {
    min-width: calc(63* var(--tileRatio));
}
.exf__page .exf__pack-number {
    word-spacing: -17px;
}

@media only screen
and (min-device-width : 834px)
and (max-device-width : 1112px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) {
.exf__page .exf__facial-body {
    right: 41% !important;
}
.exf__page .exf__facial-media {
    left: 65% !important;
}
}

@media only screen
and (min-device-width : 834px)
and (max-device-width : 1112px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) {
    .exf__page .exf__facial-body {
        right: 31% !important;
    }
    .exf__page .exf__facial-media {
        left: 70% !important;
    }
        /* navigation detached bar */
        .exf__page .exf__navigation {
            top: 120px !important;
        }
}

@media (max-width: 480px) {
    .exf__page .exf__pack-content {
        text-align: center;
        padding-right: 1%;
    }
    .exf__page .exf__pack-col {
        width: 108% !important;
    }
    .exf__page .exf__pack-col {
        text-align: center;
    }
    .exf__page .exf__pack-col:nth-child(1) {
        border-left: none !important;
        border-right: none !important;
    }
    .exf__page .exf__pack-col:nth-child(2) {
        padding-right: 1px !important;
        padding-left: 10%;
    }
    .exf__page .exf__pack-col:nth-child(1) {
        border-left: none !important;
        border-right: none !important;
        padding-right: 31px;
        padding-left: 15%;
    }
    .exf__page .exf__tile[data-item="3"] .exf__tile-content {
        width: calc(118* var(--tileRatio));
    }
    .exf__page .exf__refillable-number-primary {
        padding-right: 0%;
    }
    .exf__page .exf__facial-media {
        left: 22% !important;
    }
    .exf__page .exf__facial-content-left {
        text-align: center;
    }
    .exf__page .exf__facial-body {
        right: -1% !important;
    }
    .exf__page .exf__faq-item-handler:after {
        right: 92%;
    }
    .exf__page .exf__faq-items {
        width: 96%;
    }
    .exf__page .exf__faq-item-handler {
        font-size: 10px;
    }
    .exf__page .exf__faq-item-answer {
        font-size: 10px;
    }
    .exf__page .exf__faq-item-handler {
        padding-right: 3px;
    }

    .exf__page .exf__navigation-handler-left {
        left: -5px;
    }
    .exf__page .exf__navigation-handler-text {
        padding: 0px 30px;
    }
    .exf__page .exf__faq-item-handler {
        font-size: 9.5px;
    }
}