/*  ------  local   ------  */

/* bloc facial */
.exf__page .exf__facial-qrcode {
    margin: 0 auto;
}
.exf__page .exf__pack-col-title {
    font-size: calc(60* var(--ratioPackWidth));
}
@media (min-width: 769px) {
    .exf__page .exf__facial-qrcode {
        width: 120px;
    }

    .exf__page .exf__new-title {
        font-size: calc(48 * var(--ratioCollagenWidth));
    }
    .exf__page .exf__new-subtitle {
        font-size: calc(28 * var(--ratioCollagenWidth));
    }

    .exf__page .exf__header-title-1 {
        font-size: calc(90 * var(--ratioHeaderWidth));
    }
    .exf__page .exf__header-title-2 {
        font-size: calc(40 * var(--ratioHeaderWidth));
    }
}
/* bloc Sets */
.exf__page .exf__bloc-sets {
    padding: 45px 0;
}

/* Mobile */
@media (max-width: 480px) {
    .exf__pack-wrapper[data-anchor-id="1"] {
        scroll-margin-top: 100em;
    }
    .exf__page .exf__header-title-2 {
        font-size: calc(20 * var(--ratioHeaderWidth));
    }

    .exf__page .exf__pack-col-text {
        font-size: calc(22 * var(--ratioPackWidth));
    }

    .exf__pack-col-title {
        font-size : calc(60 * var(--ratioPackWidth))
    }

    .exf__page .exf__new-title {
        font-size: 30px;
    }

    .exf__page .exf__tile-content-title {
        font-size: calc(18 * var(--tileRatio));
    }
    .exf__page .exf__tile-content-subtitle {
        font-size: calc(13 * var(--tileRatio));
    }

    .exf__page .exf__refillable-item-text {
        font-size: 15px;
    }

    .exf__page .exf__service-text {
        font-size: 10px;
    }



    /* adjust navigation redirection */
    .exf__pack-wrapper[data-anchor-id="1"] {
        margin-top: -60px;
        padding-top: 60px;
    }


}

/* 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) {

    /* bloc facial */
    .exf__page .exf__facial-body {
        padding: 32px 30px 32px 330px;
    }

    .exf__page .exf__facial-suptitle, .exf__page .exf__facial-title {
        font-size: 24px !important;
    }

    .exf__page .exf__facial-content-right {
        margin-left: 5px;
    }

    .exf__page .exf__facial-content-right-text {
        font-size: 12px;
        padding-top: 14px;
    }


    .exf__page .exf__pack-col-text {
        font-size: calc(22 * var(--ratioPackWidth));
    }

    .exf__page .exf__facial-qrcode {
        width: 100px;
    }

}

/* 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) {
    /* bloc facial */
    .exf__page .exf__facial-body {
        padding: 32px 40px 32px 350px;
    }

    .exf__page .exf__facial-qrcode {
        width: 100px;
    }

    .exf__page .exf__facial-content-right-text {
        font-size: 12px;
    }
    
    /* navigation detached bar */
    .exf__page .exf__navigation {
        top: 120px !important;
    }

}