/*  ------  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-number {
    word-spacing: -17px;
}
/* --- bloc navigation  -- */
.exf__page .exf__navigation-handler-right{
    padding-right: 0;
    padding-left: 16px;
}
.exf__page .exf__navigation-handler-left {
    padding-right: 40px !important;
}
.exf__page .exf__navigation .exf__navigation-handler-left::before {
    right: 20px !important;
}


/* --- bloc tiles  -- */
.exf__page .exf__bloc-tiles {
    direction: ltr;
}
.exf__page .exf__tile-title {
    direction: rtl;
}

/* --- bloc Refillable  -- */

.exf__page .exf__refillable-item {
    direction: rtl;
}

.exf__page .exf__refillable-item-text {
    padding-left: 0;
    padding-right: 16px;
}


.exf__page .exf__refillable-number-operator {
    font-size: 0.7em;
}
/* --- bloc Facial  -- */
.exf__page .exf__bloc-facial {
    direction: ltr;
}
.exf__page .exf__facial-content-left {
    text-align: right;
}

/* --- bloc legendes  -- */
.exf__page .exf__legende {
    text-align: right !important;
    direction: rtl;
}

/* --- bloc FAQ  -- */
.exf__faq-item-handler, .exf__faq-item-answer {
    text-align: right !important;
}

.exf__faq-item-answer {
    font-size: 13px !important;
}


/* --- bloc QR  -- */
.exf__page .exf__facial-body {
    direction: rtl;
}


.exf__page .exf__tile-number-value {
    min-width: auto !important;
}

/* --- master media query css copy -- */
@media (min-width: 769px) { 
    .exf__page .exf__pack-content {
        padding-left: 0;
        padding-right: calc(60 * var(--ratioPackWidth));
        text-align: right;
    }

    .exf__page .exf__pack-col:nth-child(1) {
        border-right: none;
        padding-bottom: 0;
        padding-right: 0;

        border-left: solid 1px #9D6552;
        padding-left: 60px;
        text-align: left;
    }

    .exf__page .exf__pack-col:nth-child(2) {
        padding-left: 0;
        padding-right: 60px;
        text-align: right;
    }

    /* --- bloc Refillable  -- */
    .exf__page .exf__refillable-subtitle {
        text-align: right;
    }

    /* --- bloc tiles  -- */
    .exf__page .exf__tile-content-subtitle {
        font-size: calc(15 * var(--tileRatio));
    }

    .exf__page .exf__tile[data-item="1"] .exf__tile-content {
        align-items: flex-start;
        direction: rtl;
    }

    /* --- bloc QR  -- */
    .exf__page .exf__facial-body {
        padding: 32px 380px 32px 40px;
    }

    .exf__page .exf__facial-media {
        left: auto;
        right: 100px;
    }
}

/* Mobile */
@media (max-width: 480px) {
    /* --- bloc tiles  -- */
    .exf__page .exf__tile[data-item="1"] .exf__tile-content-subtitle-2 {
        max-width: calc(280 * var(--tileRatio));
        font-size: calc(12 * var(--tileRatio))
    }

    /* --- bloc Refillable  -- */
    .exf__page .exf__refillable-item-text {
        padding-right: 0;
    }

    .exf__page .exf__facial-content-left {
        text-align: center;
    }

}

/* Tablet Portrait */
@media only screen
and (min-device-width : 834px)
and (max-device-width : 1112px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) {}

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