/*  ------  reset   ------  */

#main:not(.main-homepage) {padding-top: 0px; }
#wrapper { max-width: 100%; }
.breadcrumb {display: none !important; }
#bf__page { max-width: 100%; }
footer {  margin-top: 0; }
.footer-wrapper { position: relative; }
.primary-content { padding-bottom: 0px; }

@media (max-width: 640px) { 
    .offerbumper-loader { display: none !important;}
}

#bf__page.pt_category-wide .site-width-slot, 
#bf__page.pt_category-wide .breadcrumb-container,
#bf__page.pt_category-wide .page-content {
    max-width: 100%;
    margin: 0 auto;
    padding-left: 0 !important;
    padding-right: 0 !important; 
}

.bf__game-end .cba-legal-requirements .postfix-ellipsis,
.bf__game-end .cba-legal-requirements .cba-legal-read-more{
    display:none!important;
}
.bf__game-end .cba-legal-requirements .cba-read-more-target{
    display:block!important;
}


/*  ------  variables   ------  */

.bf__page { 
    --CLARINS-FONT: ClarinsRegular, Clarins;
    --GOTHAM-LIGHT: "Gotham_Light";
    --GOTHAM-BOOK: "Gotham SSm book A", "Gotham SSm book B", "Gotham Book",Helvetica, Arial, sans-serif;
    --GOTHAM-MEDIUM: "Gotham SSm medium A", "Gotham SSm medium B", "Gotham Medium",Helvetica, Arial, sans-serif;
    --COLOR-DEFAULT:#333;
    --COLOR-RED-A:#b40024;
    --COLOR-RED-B:#8c0b26;
    --RADIUS:8px; 
    --ratioWidth: 1px;
    --mainOffset: 147px;
}

/*
@media (max-width: 1280px) { 
    .bf__page {   
        --ratioWidth: calc( 100vw / 1280 );
    }
}

@media (max-width: 768px) { 
    .bf__page {   
        --ratioWidth: calc( 100vw / 375 );
    }
}
*/



/*  ------  page   ------  */

.bf__page {font-family: var(--GOTHAM-BOOK);font-weight: normal;color: var(--COLOR-DEFAULT); position: relative;width: 100%; overflow: hidden; }

.bf__page * {box-sizing: border-box; }

.bf__page h1,
.bf__page h2,
.bf__page h3 {margin: 0;padding: 0;font-weight: normal; }
.bf__page p {margin: 0;padding: 0; }
.bf__page picture {display: block; /*! width: 100%; */}
.bf__page img { width: 100%;display: block; }
.bf__page sup { line-height: 1em; }

.bf__page a {color: var(--COLOR-DEFAULT);text-decoration: none; }

.bf__page .bf__container { position: relative; max-width: 1050px; width: 100%; margin: 0 auto; }

.bf__page .bf__bloc { position: relative; width: 100%; margin: 0 auto;  }

.bf__page .bf__title { text-rendering: optimizeSpeed; }
.bf__page .bf__title small { display: block; }
.bf__page .bf__subtitle { text-rendering: optimizeSpeed; }
.bf__page .bf__text {font-size: 14px;line-height: 1.45em; text-rendering: optimizeSpeed;  }
.bf__page .bf__text>span {display: block; }
.bf__page .bf__text .bf__nowrap {white-space: nowrap; }
.bf__page .bf__text a { text-decoration: underline; }
.bf__page .bf__text a:hover { text-decoration: none; }

.bf__page .bf__price {font-size: 14px;line-height: 1.28em;  text-rendering: optimizeSpeed; }
.bf__page .bf__priceperunit {font-size: 11px;line-height: 1.28em; text-rendering: optimizeSpeed;  }

.bf__page .bf__legend-text { font-size: 11px; line-height: 1.28em; }

.bf__page .bf__text strong,
.bf__page .bf__strong {font-family: var(--GOTHAM-MEDIUM); font-weight: normal; }

.bf__page .bf__price {font-size: 16px;line-height: 20px; }

.bf__page .bf__cta {  padding-top: 15px; }
.bf__page .bf__cta-btn {cursor: pointer;display: inline-flex; height: auto;padding: 14px 16px; text-align: center;text-decoration: none;background-color: var(--COLOR-RED-A);border: 2px solid var(--COLOR-RED-A);border-radius: 5px; position: relative; top:0; left:0; align-items: center;justify-content: center;}
.bf__page .bf__cta-btn.bf__cta-btn-desktop { display: none; }
.bf__page .bf__cta-text { font-size: 14px;line-height: 1em;letter-spacing: 0;color: #fff;font-family: var(--GOTHAM-MEDIUM, Helvetica, Arial);font-weight: 500; }
.bf__page .bf__cta-icon-img { width: 100%; display: block; }

.bf__page .bf__cta-plus {cursor: pointer;display: inline-flex;width: 30px;height: 30px;padding: 16px; font-size: 24px;line-height: 1em;text-align: center;text-decoration: none;letter-spacing: 0;color: #fff;background-color: #fff;border: none !important ;border-radius: 50%;font-family: var(--GOTHAM-MEDIUM, Helvetica, Arial);font-weight: 500; position: absolute; top:0; left:0; align-items: center;justify-content: center;}

.bf__page .bf__cta-white {background: #fff;  border: 1px solid #B0A9A5; transition:all 0.3s; }
.bf__page .bf__cta-white .bf__cta-text { color: var(--COLOR-DEFAULT); }

.bf__page .bf__cta-label {  color:#797674; font-size: 12px; line-height: 1.45em; padding-right: 8px; }
.bf__page .bf__cta-promo {  color:#BF7B0D; padding-right:16px; text-transform: uppercase;  }

.bf__page .bf__cta-transparent {color: #fff; background: transparent;  border: 1px solid #fff; transition:all 0.3s; }
.bf__page .bf__cta-transparent .bf__cta-text { color: #fff; }

.bf__page .bf__cta .add-to-bag button { background-color: var(--COLOR-RED-A) !important; border: 2px solid var(--COLOR-RED-A) !important; height:52px !important; width: auto; text-transform: none; padding-left: 1.575em; padding-right: 1.575em; }
.bf__page .bf__cta .add-to-bag button:active,
.bf__page .bf__cta .add-to-bag button:focus { border: 2px solid var(--COLOR-RED-A) !important; color: #fff !important; }
.bf__page .bf__cta .add-to-bag button:focus { outline: 2px solid var(--COLOR-RED-A)!important; }
.bf__page .bf__cta .add-to-bag button:hover { border: 2px solid var(--COLOR-RED-A) !important; color: #fff !important; background-color:var(--COLOR-RED-B) !important; }

.bf__page .bf__link { text-decoration: underline; font-family: var(--GOTHAM-MEDIUM); font-size: 11px; line-height: 1.42em; letter-spacing: 0.02em;  text-transform: uppercase; }

.bf__page .bf__quickshop { display: none; }
.bf__page .bf__addtobag  { display: none; }


@media (min-width: 768px) { 

    .bf__page .bf__cta-btn:hover { color: #fff; outline: 0 !important;  background-color: var(--COLOR-RED-B);  border-color: var(--COLOR-RED-B); }
    .bf__page .bf__cta-white:hover { color: var(--COLOR-DEFAULT);  border: 1px solid #797674; background: #fff;  box-shadow: 0px 0px 7px 0px #00000026; }
    .bf__page .bf__cta-transparent:hover { color: #fff;  border: 1px solid #fff; background: transparent;  box-shadow: 0px 0px 7px 0px #00000026; }
    .bf__page .bf__link:hover { text-decoration: none; }

    .bf__page .bf__cta-btn.bf__cta-btn-mobile { display: none; }
    .bf__page .bf__cta-btn.bf__cta-btn-desktop { display: inline-flex; }

}



/*   kit    */

.bf__page .bf__bloc-kit { padding-bottom: 64px;  background: linear-gradient(90deg, #E1CEB5 0%, #FAF5E2 50%, #DAC3A8 100%); }

.bf__page .bf__bloc-kit .bf__container { max-width: 1264px; }

.bf__page .bf__kit { text-align: center; width: 90%; margin: 0 auto; }
.bf__page .bf__kit-title { font-size: 24px; line-height: 1.45em; font-family:var(--GOTHAM-MEDIUM); padding-bottom: 12px; text-transform: uppercase; letter-spacing: 0.2em; }
.bf__page .bf__kit-text { padding-bottom: 24px;  }

.bf__page .bf__kit-steps { text-align: left; width: 100%; max-width: 358px; margin: 0 auto; padding-bottom: 24px; }
.bf__page .bf__kit-step { position: relative; padding: 5px 0; display: flex; justify-content:flex-start; }
.bf__page .bf__kit-step-text { display:block; width: calc(100% - 28px); font-size: 12px; line-height: 1.45em; padding-left: 10px; }
.bf__page .bf__kit-step-number { display:block; width: 28px; height: 28px; color:#fff; font-size: 12px; line-height: 28px; border-radius: 50%; text-align: center; }
.bf__page .bf__kit-step:nth-child(1) .bf__kit-step-number { background: #DE4A6B; }
.bf__page .bf__kit-step:nth-child(2) .bf__kit-step-number { background: #B36E33; }
.bf__page .bf__kit-step:nth-child(3) .bf__kit-step-number { background: #ECB800; }

.bf__page .bf__kit-tile { display: flex; justify-content:center; background: #fff; border-radius: 8px; }

.bf__page .bf__kit-tile { padding: 32px; }
.bf__page .bf__kit-tile-media { width: calc(50% - 16px); }

.bf__page .bf__kit-tile-body { width: calc(50% + 16px); text-align: left; padding-left: 32px; }
.bf__page .bf__kit-tile-title { display:inline-block; padding:6px 8px; font-size: 14px; line-height: 1.45em; font-family:var(--GOTHAM-MEDIUM); text-transform: uppercase; letter-spacing: 0.05em; border-top:solid #333 1px;  border-bottom:solid #333 1px; margin-bottom: 16px; } 
.bf__page .bf__kit-tile-suptext { font-size: 14px; line-height: 1.45em; font-family:var(--GOTHAM-MEDIUM); margin-bottom: 16px; }
.bf__page .bf__kit-tile-text { font-size: 12px; line-height: 1.45em; }
.bf__page .bf__kit-tile-texts { margin-bottom: 15px; }
.bf__page .bf__kit-tile-legend { font-size: 12px; line-height: 1.45em; color: #797674; }

.bf__page .bf__kit-tile-more { padding-top:15px; }
.bf__page .bf__kit-tile-more-handler { margin-bottom: 8px; }
.bf__page .bf__kit-tile-more-handler span { font-size: 11px; line-height: 1.45em; font-family:var(--GOTHAM-MEDIUM); text-transform: uppercase; position: relative; cursor: pointer; padding-right: 20px; }
.bf__page .bf__kit-tile-more-handler span::after { content: ""; background: url(icons/arrow-down-grey-icon.svg) left top no-repeat; background-size: 100% auto; width: 16px; height: 16px; display: block; position: absolute; right:0; top:calc(50% - 8px); transition:transform 0.4s; }
.bf__page .bf__kit-tile-more-panel { max-height: 0; transition: max-height 0.5s; overflow: hidden; }
.bf__page .bf__kit-tile-more[data-open="1"] .bf__kit-tile-more-panel { max-height: 200px; }
.bf__page .bf__kit-tile-more[data-open="1"] .bf__kit-tile-more-handler span::after { transform: rotate(180deg); }

.bf__page .bf__kit-tile-link { position: absolute; bottom: 15px; }

@media (max-width: 768px) { 

    .bf__page .bf__kit-title { font-size: 21px; line-height: 1.45em; }

    .bf__page .bf__kit-tile { flex-direction:column; padding: 16px; }
    .bf__page .bf__kit-tile-media { width: 100%; }
    .bf__page .bf__kit-tile-body { width: 100%; padding: 24px 10px 8px 10px; }
}



/*   bf__magnificient    */

.bf__page .bf__bloc-magnificient { --tileRatio:1px; padding-bottom: 64px; background: linear-gradient(90deg, #E1CEB5 0%, #FAF5E2 50%, #DAC3A8 100%); }

.bf__page .bf__magnificient { text-align: center; }

.bf__page .bf__magnificient-title { position: relative; padding-top:135px; padding-bottom: 74px; }
.bf__page .bf__magnificient-title-label { position: relative; font-size: 36px; line-height: 1.45em; display:block; text-transform: uppercase; letter-spacing: 0.2em; }
.bf__page .bf__magnificient-title-logo { position: absolute; top:80px; left:calc(50% - 54px); width: 95px; height: 144px; display: block; }

.bf__page .bf__magnificient-text { padding:0 15px 24px 15px;  }

.bf__page .bf__magnificient-tiles { display: flex; justify-content:center; }
.bf__page .bf__magnificient-tile {  position: relative; height: calc(439 * var(--tileRatio));overflow: hidden; padding: 0 calc(10 * var(--tileRatio)); }
.bf__page .bf__magnificient-tile-inside { position: relative; height: 100%; display: block;  transition:all 0.5s; border-radius: 8px; overflow: hidden; }
.bf__page .bf__magnificient-tile[data-open="0"] .bf__magnificient-tile-inside { width: calc(171 * var(--tileRatio)); }
.bf__page .bf__magnificient-tiles[data-open="1"] .bf__magnificient-tile[data-open="0"] .bf__magnificient-tile-inside { width: calc(100 * var(--tileRatio)); }
.bf__page .bf__magnificient-tile[data-open="1"] .bf__magnificient-tile-inside { width: calc(616 * var(--tileRatio)); }
.bf__page .bf__magnificient-tile[data-open="2"] .bf__magnificient-tile-inside { width: calc(260 * var(--tileRatio)); }

.bf__page .bf__magnificient-tiles[data-over="1"] .bf__magnificient-tile-inside { opacity: 0.5; }
.bf__page .bf__magnificient-tiles[data-over="1"] .bf__magnificient-tile[data-open="1"] .bf__magnificient-tile-inside,
.bf__page .bf__magnificient-tiles[data-over="1"] .bf__magnificient-tile[data-open="2"] .bf__magnificient-tile-inside { opacity: 1; }

.bf__page .bf__magnificient-tiles[data-open="1"] .bf__magnificient-tile-inside { opacity: 0.5; }
.bf__page .bf__magnificient-tiles[data-open="1"] .bf__magnificient-tile[data-open="1"] .bf__magnificient-tile-inside,
.bf__page .bf__magnificient-tiles[data-open="1"] .bf__magnificient-tile[data-open="2"] .bf__magnificient-tile-inside { opacity: 1; }

.bf__page .bf__magnificient-tile-bkgd { position: absolute; top:0; left:0; }
.bf__page .bf__magnificient-tile-picture { display:block; width: 100%; }
.bf__page .bf__magnificient-tile-img { display:block; width: calc(616 * var(--tileRatio)); transition:all 0.5s; }

.bf__page .bf__magnificient-tile[data-item="0"] { margin-top:calc(55 * var(--tileRatio)) }
.bf__page .bf__magnificient-tile[data-item="0"] .bf__magnificient-tile-img { -webkit-transform:scale(1.85) translate(-15%, 19.5%); transform:scale(1.85) translate(-15%, 19.5%);  -webkit-transform-origin:20% 50%; transform-origin:20% 50%; }
.bf__page .bf__magnificient-tile[data-item="0"][data-open="2"] .bf__magnificient-tile-img { -webkit-transform:scale(1.85) translate(-11%, 19.5%); transform:scale(1.85) translate(-11%, 19.5%); }
.bf__page .bf__magnificient-tile[data-item="0"][data-open="1"] .bf__magnificient-tile-img { -webkit-transform:scale(1) translate(0,0); transform:scale(1) translate(0,0); }

.bf__page .bf__magnificient-tile[data-item="1"] { margin-top:calc(110 * var(--tileRatio)) }
.bf__page .bf__magnificient-tile[data-item="1"] .bf__magnificient-tile-img { -webkit-transform:scale(1.85) translate(-15%, 19.5%); transform:scale(1.85) translate(-15%, 19.5%);  -webkit-transform-origin:20% 50%; transform-origin:20% 50%; }
.bf__page .bf__magnificient-tile[data-item="1"][data-open="2"] .bf__magnificient-tile-img { -webkit-transform:scale(1.85) translate(-11%, 19.5%); transform:scale(1.85) translate(-11%, 19.5%); }
.bf__page .bf__magnificient-tile[data-item="1"][data-open="1"] .bf__magnificient-tile-img { -webkit-transform:scale(1) translate(0,0); transform:scale(1) translate(0,0);  }

.bf__page .bf__magnificient-tile[data-item="2"] { margin-top:0px }
.bf__page .bf__magnificient-tile[data-item="2"] .bf__magnificient-tile-img { -webkit-transform:scale(1.85) translate(-15%, 19.5%); transform:scale(1.85) translate(-15%, 19.5%); -webkit-transform-origin:20% 50%; transform-origin:20% 50%; }
.bf__page .bf__magnificient-tile[data-item="2"][data-open="2"] .bf__magnificient-tile-img { -webkit-transform:scale(1.85) translate(-11%, 19.5%); transform:scale(1.85) translate(-11%, 19.5%); }
.bf__page .bf__magnificient-tile[data-item="2"][data-open="1"] .bf__magnificient-tile-img { -webkit-transform:scale(1) translate(0,0); transform:scale(1) translate(0,0);  }

.bf__page .bf__magnificient-tile[data-item="3"] { margin-top:calc(55 * var(--tileRatio)) }
.bf__page .bf__magnificient-tile[data-item="3"] .bf__magnificient-tile-img { -webkit-transform:scale(1.9) translate(-15%, 20.25%); transform:scale(1.9) translate(-15%, 20.25%);  -webkit-transform-origin:20% 50%; transform-origin:20% 50%; }
.bf__page .bf__magnificient-tile[data-item="3"][data-open="2"] .bf__magnificient-tile-img { -webkit-transform:scale(1.9) translate(-11%, 20.25%); transform:scale(1.9) translate(-11%, 20.25%); }
.bf__page .bf__magnificient-tile[data-item="3"][data-open="1"] .bf__magnificient-tile-img { -webkit-transform:scale(1) translate(0,0); transform:scale(1) translate(0,0); }

.bf__page .bf__magnificient-tile[data-item="4"] { margin-top:0px }
.bf__page .bf__magnificient-tile[data-item="4"] .bf__magnificient-tile-img { -webkit-transform:scale(1.95) translate(-15.75%, 18.25%); transform:scale(1.95) translate(-15.75%, 18.25%);  -webkit-transform-origin:20% 50%;  transform-origin:20% 50%; }
.bf__page .bf__magnificient-tile[data-item="4"][data-open="2"] .bf__magnificient-tile-img { -webkit-transform:scale(1.95) translate(-12%, 18.25%); transform:scale(1.95) translate(-12%, 18.25%); }
.bf__page .bf__magnificient-tile[data-item="4"][data-open="1"] .bf__magnificient-tile-img { -webkit-transform:scale(1) translate(0,0); transform:scale(1) translate(0,0); }

.bf__page .bf__magnificient-tile[data-item="5"] { margin-top:calc(55 * var(--tileRatio)) }
.bf__page .bf__magnificient-tile[data-item="5"] .bf__magnificient-tile-img { -webkit-transform:scale(1.85) translate(-15%, 19.25%); transform:scale(1.85) translate(-15%, 19.25%); -webkit-transform-origin:20% 50%;  transform-origin:20% 50%; }
.bf__page .bf__magnificient-tile[data-item="5"][data-open="2"] .bf__magnificient-tile-img { -webkit-transform:scale(1.85) translate(-11%, 19.25%); transform:scale(1.85) translate(-11%, 19.25%); }
.bf__page .bf__magnificient-tile[data-item="5"][data-open="1"] .bf__magnificient-tile-img { -webkit-transform:scale(1) translate(0,0); transform:scale(1) translate(0,0); }

.bf__page .bf__magnificient-tile[data-item="6"] { margin-top:0px }
.bf__page .bf__magnificient-tile[data-item="6"] .bf__magnificient-tile-img { -webkit-transform:scale(1.95) translate(-14.25%, 18.25%); transform:scale(1.95) translate(-14.25%, 18.25%); t-webkit-ransform-origin:20% 50%; transform-origin:20% 50%; }
.bf__page .bf__magnificient-tile[data-item="6"][data-open="2"] .bf__magnificient-tile-img { -webkit-transform:scale(1.95) translate(-14.25%, 18.25%); transform:scale(1.95) translate(-14.25%, 18.25%); }
.bf__page .bf__magnificient-tile[data-item="6"][data-open="1"] .bf__magnificient-tile-img { -webkit-transform:scale(1) translate(0,0); transform:scale(1) translate(0,0); }

.bf__page .bf__magnificient-tile-overlay { display: block; position: absolute; top:0; left: 0; width: 100%; height: 100%; cursor: pointer;background:transparent; }
.bf__page .bf__magnificient-tile[data-open="1"] .bf__magnificient-tile-overlay { display: none; }

.bf__page .bf__magnificient-tile-close { display: none; position: absolute; top:12px; right: 22px; width: 24px; height: 24px; background: url(icons/icon-close-white.svg) left top no-repeat; background-size: 100% auto; cursor: pointer; }
.bf__page .bf__magnificient-tile[data-open="1"] .bf__magnificient-tile-close { display: block; }

.bf__page .bf__magnificient-tile-body { position: relative; margin-left: calc(357 * var(--tileRatio)); width: calc(258 * var(--tileRatio)); text-align: left; display: flex; height: 100%; align-items:center; opacity: 1; } 
.bf__page  .bf__magnificient-tile[data-open="0"] .bf__magnificient-tile-body { opacity: 0; }

.bf__page .bf__magnificient-tile-title {  font-size: calc(20 * var(--tileRatio)); line-height: 1.2em; font-family:var(--GOTHAM-MEDIUM); letter-spacing: 0.02em; padding-bottom: calc(15 * var(--tileRatio)); }
.bf__page .bf__magnificient-tile-subtitle { font-size: calc(15 * var(--tileRatio)); line-height: 1.25em; font-family:var(--GOTHAM-MEDIUM);text-transform: uppercase;  padding-bottom: calc(15 * var(--tileRatio));  }
.bf__page .bf__magnificient-tile-text { font-size: calc(14 * var(--tileRatio)); line-height: 1.45em; padding-bottom: calc(15 * var(--tileRatio));  }


@media (max-width: 1524px) { 

   .bf__page .bf__bloc-magnificient { --tileRatio : calc(100vw / 1524); }

}


@media (max-width: 768px) { 

    .bf__page .bf__bloc-magnificient { --tileRatio : 1px; --tileBodyHeight : 235px; padding-bottom: 34px; }

    .bf__page .bf__magnificient-title { padding-top:117px; padding-bottom: 56px; }
    .bf__page .bf__magnificient-title-label { font-size: 30px; line-height: 1.45em; padding: 0 10vw; min-height: 2.9em; }
    .bf__page .bf__magnificient-title-logo { top:89px; left:calc(50% - 48px);}

    .bf__page .bf__magnificient-tiles { width: calc(100% - 32px); display: block;  overflow: unset; margin-left: 16px; }
    .bf__page .bf__magnificient-tiles .swiper-container { overflow: unset !important; }
    .bf__page .bf__magnificient-tile { height: calc( 80vw * 1.14 + var(--tileBodyHeight)); margin-top: 0 !important; padding: 0; }
    .bf__page .bf__magnificient-tile-inside { width: 80vw !important; }
    .bf__page .bf__magnificient-tile-img { display:block; width: 100%; transform:scale(1) translate(0,0) !important;  }

    .bf__page .bf__magnificient-tiles[data-over="1"] .bf__magnificient-tile-inside { opacity: 1; }
    .bf__page .bf__magnificient-tiles[data-open="1"] .bf__magnificient-tile-inside { opacity: 1; }

    .bf__page .bf__magnificient-tile-overlay,
    .bf__page .bf__magnificient-tile-close { display: none !important; }

    .bf__page .bf__magnificient-tile-body { opacity: 1 !important; margin: 0 auto; justify-content:center; width: 90%; height: 100%; align-items: flex-end; }
    .bf__page .bf__magnificient-tile-content { padding-bottom: 32px; text-align: center; } 

}


@media (max-width: 373px) {

    .bf__page .bf__magnificient-title-label { font-size: 27px; line-height: 1.45em; letter-spacing: 0.1em;  }

    .bf__page .bf__magnificient-tile-title {  font-size: 18px; line-height: 1.2em; letter-spacing: 0.01em; padding-bottom: 12px; }
    .bf__page .bf__magnificient-tile-subtitle { font-size: 14px; line-height: 1.25em;  padding-bottom: 12px;  }
    .bf__page .bf__magnificient-tile-text { padding-bottom: 12px;  }

}



/*  birthday */

.bf__page .bf__bloc-birthday { background: #fff; }
.bf__page .bf__birthday { --birdthdayWidth:1px; margin-top: 30px; position: relative; top:0; left:0; width: 100%;  height: calc(560 * var(--birdthdayWidth)); }

.bf__page .bf__birthday-media { position: absolute; }

.bf__page .bf__birthday-media[data-item="1"] { top:calc(98 * var(--birdthdayWidth)); left:calc(50% - calc(580 * var(--birdthdayWidth))); width: calc(240 * var(--birdthdayWidth)); }
.bf__page .bf__birthday-media[data-item="2"] { top:255px; left:calc(50% - 882px); width: 282px; }
.bf__page .bf__birthday-media[data-item="3"] { top:0; left:calc(50% - 1200px); width: 388px; }
.bf__page .bf__birthday-media[data-item="4"] { top:calc(158 * var(--birdthdayWidth)); left:calc(50% + calc(338 * var(--birdthdayWidth))); width: calc(240 * var(--birdthdayWidth)); }
.bf__page .bf__birthday-media[data-item="5"] { top:92px; left:calc(50% + 598px); width: 255px; }
.bf__page .bf__birthday-media[data-item="6"] { top:230px; left:calc(50% + 873px); width: 273px; }

.bf__page .bf__birthday-content { width: calc(620 * var(--birdthdayWidth)); margin: 0 auto; text-align: center; padding-top: calc(11 * var(--birdthdayWidth)); }
.bf__page .bf__birthday-title { position: relative; width: calc(497 * var(--birdthdayWidth)); margin: 0 auto; }
.bf__page .bf__birthday-title-logo { position: relative; width: calc(234 * var(--birdthdayWidth)); display: block; }
.bf__page .bf__birthday-title-label { color: #B40024; font-size: calc(45 * var(--birdthdayWidth)); line-height: 0.85em; font-family: var(--CLARINS-FONT); position: absolute; top:calc(194 * var(--birdthdayWidth)); left:calc(146 * var(--birdthdayWidth)); width: calc(355 * var(--birdthdayWidth)); text-align: left; }

.bf__page .bf__birthday-text { padding-bottom: 16px; }

@media (max-width: 1196px) { 

    .bf__page .bf__birthday { --birdthdayWidth:calc(100vw / 1196); }

}


@media (max-width: 768px) { 

    .bf__page .bf__birthday { --birdthdayWidth:calc(100vw / 375);  margin-top: 0;  height: auto; margin-bottom: 43px; }
    .bf__page .bf__birthday-content { width: 100%; }

    .bf__page .bf__birthday-media[data-item="1"] { top:calc(25 * var(--birdthdayWidth));; left:0; width: calc(113 * var(--birdthdayWidth)); }
    .bf__page .bf__birthday-media[data-item="2"] { display: none; }
    .bf__page .bf__birthday-media[data-item="3"] { top:calc(25 * var(--birdthdayWidth));; left:auto; right:calc((-1) * 20 * var(--birdthdayWidth)); width: calc(126 * var(--birdthdayWidth));  }
    .bf__page .bf__birthday-media[data-item="4"] { display: none;  }
    .bf__page .bf__birthday-media[data-item="5"] { top:calc(206 * var(--birdthdayWidth)); left:calc(40 * var(--birdthdayWidth)); width: calc(153 * var(--birdthdayWidth)); }
    .bf__page .bf__birthday-media[data-item="6"] { top:calc(181 * var(--birdthdayWidth)); left:calc(202 * var(--birdthdayWidth));  width: calc(153 * var(--birdthdayWidth));  }

    .bf__page .bf__birthday-content { width: 100%; padding-top: calc( 20 * var(--birdthdayWidth)); }
    .bf__page .bf__birthday-title { width: calc(246 * var(--birdthdayWidth)); margin-left: calc(128 * var(--birdthdayWidth)); margin-bottom: calc(185 * var(--birdthdayWidth)); }
    .bf__page .bf__birthday-title-logo { width: calc(116 * var(--birdthdayWidth));  }
    .bf__page .bf__birthday-title-label { font-size: calc(22 * var(--birdthdayWidth)); line-height: 0.85em; top:calc(96 * var(--birdthdayWidth)); left:calc(72 * var(--birdthdayWidth)); width: calc(173 * var(--birdthdayWidth));  }

    .bf__page .bf__birthday-text { padding-left:8.5vw; padding-right:8.5vw; }

}


/*  services */

.bf__page .bf__bloc-services { background: linear-gradient(90deg, #E1CEB5 0%, #FAF5E2 50%, #DAC3A8 100%); padding: 64px 12px;  }

.bf__page .bf__services-title { text-align: center; padding-bottom: 40px; font-size: 36px; line-height: 1.45em; letter-spacing: 0.2em; font-family: var(--GOTHAM-MEDIUM); }

.bf__page .bf__services { display: flex; justify-content:center; flex-direction: column; position: relative; }

.bf__page .bf__service { width: 294px; background: #fff; border-radius: 8px; overflow: hidden; }
.bf__page .bf__service-media { width: 100%; display: block; }

.bf__page .bf__service-content { text-align: left; padding: 25px 15px 45px 15px; }
.bf__page .bf__service-title { font-size: 14px; line-height: 1.28em; font-family:var(--GOTHAM-MEDIUM); padding-bottom: 8px; }
.bf__page .bf__service-text { font-size: 14px; line-height: 1.28em; min-height: 4em; }

.bf__page .bf__service-link { position: absolute; bottom: 15px; }

.bf__page .bf__services .swiper-pagination { display: none; }


@media (max-width: 948px) { 

    .bf__page .bf__bloc-services { padding-left: 0; padding-right: 0; }
    .bf__page .bf__service { width: 60vw; margin: 0;}
    .bf__page .bf__services .swiper-pagination { display: block; }

}

@media (max-width: 767px) { 

    .bf__page .bf__bloc-services .bf__container { width: 100%; }

    .bf__page .bf__services-title { width: 86%; margin: 0 auto; padding-bottom: 24px; font-size: 21px; line-height: 1.45em; }
    .bf__page .bf__service { width: 80vw; margin: 0;}

}


/*   game    */

.bf__page .bf__game { width: 100%; max-width: 2200px; overflow: hidden; }

.bf__page .bf__game-page { height: 690px; width: 100%;  display: block; position: relative; top:0; left:0; }

.bf__page .bf__game-intro { position: absolute; top:0; left:0;  z-index: 20; opacity: 1; transition:opacity 0.5s; }
.bf__page .bf__game-intro.bf__fading { opacity: 0; }
.bf__page .bf__game-intro.bf__hidden { display: none; z-index: 0; }
.bf__page .bf__game-intro-media { position: absolute; top:0; left:0; width:100%; height: 100%; display: block; }
.bf__page .bf__game-intro-picture { width: auto; height: 100%; display: block; }
.bf__page .bf__game-intro-img { width: auto; height: 100%; display: block; position: absolute; top: 0; left: calc(50% - 1170px); }
.bf__page .bf__game-intro-content { position: absolute; top:70px; left:calc(50% + 60px); display: block; width: 400px; }
.bf__page .bf__game-intro-title { color:#683B0A; font-size: 64px; line-height: 1em; font-family: var(--CLARINS-FONT); padding-top: 36px; padding-bottom: 24px; }
.bf__page .bf__game-intro-title span { display: block; } 
.bf__page .bf__game-intro-subtitle { color:#683B0A; font-size: 16px; line-height: 1.45em; font-family: var(--GOTHAM-MEDIUM); padding-bottom: 24px; }
.bf__page .bf__game-intro-text { color:#683B0A; }

.bf__page .bf__game-intro-logo { width: 207px; background: #fff; padding: 18px 0 24px 0; }
.bf__page .bf__game-intro-logo-clarins { width: 102px; margin: 0 auto 13px auto; }
.bf__page .bf__game-intro-logo-beauty-factory { width: 124px; margin: 0 auto; }

.bf__page .bf__game-intro-birthday  { position: absolute; top: 210px; left: calc(50% - 801px); width: 116px; display: block; }
.bf__page .bf__game-intro-birthday-img { width: 100%; display: block; }

.bf__page .bf__game-intro-cta { padding-top: 24px; }
.bf__page .bf__game-intro-cta .bf__cta-icon { width: 22px; display: block; margin-right: 8px; }

.bf__page .bf__game-rules { position: absolute; top:0; left:0; z-index: 15;  opacity: 1;}
.bf__page .bf__game-rules.bf__fading { opacity: 0;  transition:opacity 0.5s; }
.bf__page .bf__game-rules.bf__hidden { display: none; z-index: 0; }
.bf__page .bf__game-rules-bkgd { position: absolute; top:0; left:0; width: 100%; height: 100%; display: block; background: rgba(0,0,0,0.5); }
.bf__page .bf__game-rules-body { position: absolute; left:50%; top:0; height: 100%; width: 0;  }
.bf__page .bf__game-rules-end { position: absolute; top:283px; left:5px; width: 78px; height: 78px; border-radius: 50%; border: solid 3px #fff; }
.bf__page .bf__game-rules-start { position: absolute; bottom:32px; left:-42.5px; width: 85px; height: 85px; border-radius: 50%; border: solid 3px #fff; }
.bf__page .bf__game-rules-drag { position: absolute; top:383px; left:54px; }
.bf__page .bf__game-rules-drag-content { position: absolute; top:calc(50% - 1.28em); left:0; color: #fff; font-family: var(--GOTHAM-MEDIUM); }
.bf__page .bf__game-rules-drag-text { padding-left:90px; font-size: 15px; line-height: 1.28em; color: #fff; font-family: var(--GOTHAM-MEDIUM); white-space: nowrap; }
.bf__page .bf__game-rules-drag-img { width: 65px; }

.bf__page .bf__game-container { --beakerSize:327px; opacity: 0; }
.bf__page .bf__game-container.bf__visible { opacity: 1; }

.bf__page .bf__game-beakers {display: block; height: 100%; margin-bottom: 50px; width:100%; max-width: calc(var(--beakerSize) * 7); position: relative; margin: 0 auto; }
.bf__page .bf__game-beaker { width: var(--beakerSize);  height: 100%; background: rgba(255,255,255, 0.1); position: relative; -webkit-user-select: none; user-select:none; }
.bf__page .bf__game-beaker-drop { position:absolute; top:calc(50% - 60px); left:calc(50% + 7px); width: 75px; height: 75px; border-radius: 50%;overflow: hidden; pointer-events:none; }
.bf__page .bf__game-beaker[data-item="3"] .bf__game-beaker-drop { left:calc(50% + 42px); }
.bf__page .bf__game-beaker-bkgd { position:absolute; top:0; left:0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.69) 0%, rgba(255, 255, 255, 0.315) 100%); }
.bf__page .bf__game-beaker-bkgd-error { position:absolute; top:34%; left:34%; width: 32%; height: 32%; background:url(icons/icon-error.svg) center center no-repeat; background-size: 100% auto;  opacity: 0; transition:opacity 0.3s ease-out;  }
.bf__page .bf__game-beaker.bf__error .bf__game-beaker-bkgd-error { opacity: 1; }
.bf__page .bf__game-beaker.bf__error .bf__game-beaker-drop { animation:drop_error 0.5s cubic-bezier(.28,0.5,.22,0.5); }
@keyframes drop_error {
    from { transform:translate(0px,0px); }
    15% { transform:translate(8px,-1px); }
    30% { transform:translate(-8px,-2px); }
    45% { transform:translate(15px,-2px); }
    60% { transform:translate(-16px,2px); }
    75% { transform:translate(8px,0px); }
    to { transform:translate(0px,0px); }
}
.bf__page .bf__game-beaker-picto { display:none; position:absolute; top:0; left:0; width: 100%; height: 100%; pointer-events:none;  }
.bf__page .bf__game-beaker-picto img { width: 100%; display: block; }
.bf__page .bf__game-beaker-media { width: var(--beakerSize); height: 100%; position: absolute; top:0; left:0; pointer-events:none; }
.bf__page .bf__game-beaker-picture { width: 100%; height: 100%; }
.bf__page .bf__game-beaker-img { width: calc(100% + 4px); height: 100%; object-fit:cover; position: absolute; top:0; left:-2px; }
.bf__page .bf__game-beaker-name { position: absolute; top:110px; left:0; -webkit-user-select: none; user-select:none; text-align: center; width: 100%; height:70px; display: flex; flex-direction:column; align-items:center; justify-content:center; }
.bf__page .bf__game-beaker-name span { text-align: center; color: #fff; font-size:27px; line-height:1.3em; font-family: var(--CLARINS-FONT); padding: 0 20px; display: block; }
.bf__page .bf__game-beaker.bf__done .bf__game-beaker-picto { display: block; }

.bf__page .bf__game-stars { display: none; }
.bf__page .bf__game-beaker-stars { position: absolute; top:0; left:0; width: 100%; height: 100%; }
.bf__page .bf__game-beaker-star { position: absolute; opacity: 0; transform:scale(0); transition: all 0.15s ease-out; }
.bf__page .bf__game-beaker-star.bf__visible { opacity: 1; transform:scale(1); }
.bf__page .bf__game-beaker-star-01 { position: absolute; top: calc(50% - 25px); left: calc(50% - 25px); width: 50px; height: 50px; border-radius: 50%; background: radial-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.15) 50%); filter:blur(4px);  }
.bf__page .bf__game-beaker-star-02 { position: absolute; top: calc(50% - 17px); left: calc(50% - 17px); width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.3)); filter:blur(3px);  }
.bf__page .bf__game-beaker-star-03 { position: absolute; top: calc(50% - 20px); left: calc(50% - 20px); width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.2)); filter:blur(4px);  }

.bf__page .bf__game-beaker-star-10 { position: absolute; top: calc(50% - 4px); left: calc(50% - 4px); width: 8px; height: 8px; filter:blur(3px); background:rgba(255, 255, 255, 0.9); border-radius: 50%; }
.bf__page .bf__game-beaker-star-11 { position: absolute; top: calc(50% - 5px); left: calc(50% - 5px); width: 10px; height: 10px; filter:blur(2px); background:rgba(255, 255, 255, 0.8); border-radius: 50%; }
.bf__page .bf__game-beaker-star-11::before, 
.bf__page .bf__game-beaker-star-11::after { content:""; position: absolute; top: calc(50% - 1.5px); left: calc(50% - 40px);  width: 80px; height: 3px; background:linear-gradient(90deg, rgba(255, 255, 255, 0) 2%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 98%); }
.bf__page .bf__game-beaker-star-11::before { transform:rotate(40deg);}
.bf__page .bf__game-beaker-star-11::after { transform:rotate(-50deg);}
.bf__page .bf__game-beaker-star-12 { position: absolute; top: -16px; left: 5px; width: 8px; height: 8px; filter:blur(2.5px); background:rgba(255, 255, 255, 0.7); border-radius: 50%; }

.bf__page .bf__game-beaker-star[data-item="1"] { top:10%; left: 30%; }
.bf__page .bf__game-beaker-star[data-item="2"] {top:4%; left: 43%;  }
.bf__page .bf__game-beaker-star[data-item="3"] {top:8%; left: 12%; }
.bf__page .bf__game-beaker-star[data-item="3"] .bf__game-beaker-star-inside { transform: scale(0.65);}
.bf__page .bf__game-beaker-star[data-item="4"] {top:14%; left: 15%;  }
.bf__page .bf__game-beaker-star[data-item="4"] .bf__game-beaker-star-inside {  transform: scale(0.65);}
.bf__page .bf__game-beaker-star[data-item="5"] {top:15%; left: 49%;  }
.bf__page .bf__game-beaker-star[data-item="6"] { top:17%; left: 67%;  }
.bf__page .bf__game-beaker-star[data-item="6"] .bf__game-beaker-star-inside {  transform: scale(0.7);}
.bf__page .bf__game-beaker-star[data-item="7"] { top:24%; left: 75%;  }
.bf__page .bf__game-beaker-star[data-item="8"] { top:25%; left: 50%;  }
.bf__page .bf__game-beaker-star[data-item="8"] .bf__game-beaker-star-inside {  transform: scale(1.5);}
.bf__page .bf__game-beaker-star[data-item="9"] { top:28%; left: 54%;  }
.bf__page .bf__game-beaker-star[data-item="9"] .bf__game-beaker-star-inside {  transform: scale(0.8);}
.bf__page .bf__game-beaker-star[data-item="10"] { top:35%; left: 70%;   }
.bf__page .bf__game-beaker-star[data-item="10"] .bf__game-beaker-star-inside { transform: scale(0.7);}
.bf__page .bf__game-beaker-star[data-item="11"] { top:42%; left: 82%;  }
.bf__page .bf__game-beaker-star[data-item="11"] .bf__game-beaker-star-inside {  transform: scale(0.55);}
.bf__page .bf__game-beaker-star[data-item="12"] { top:30%; left: 24%;  }
.bf__page .bf__game-beaker-star[data-item="12"] .bf__game-beaker-star-inside {  transform: scale(0.8);}
.bf__page .bf__game-beaker-star[data-item="13"] { top:37%; left: 9%;  }
.bf__page .bf__game-beaker-star[data-item="13"] .bf__game-beaker-star-inside {  transform: scale(0.7);}
.bf__page .bf__game-beaker-star[data-item="14"] { top:45%; left: 26%;  }
.bf__page .bf__game-beaker-star[data-item="15"] { top:77%; left: 44%;  }
.bf__page .bf__game-beaker-star[data-item="16"] { top:5%; left: 30%;   }
.bf__page .bf__game-beaker-star[data-item="16"] .bf__game-beaker-star-inside { transform: scale(0.7);}
.bf__page .bf__game-beaker-star[data-item="17"] { top:67%; left: 63%;  }
.bf__page .bf__game-beaker-star[data-item="17"] .bf__game-beaker-star-inside {  transform: scale(2);}
.bf__page .bf__game-beaker-star[data-item="18"] { top:75%; left: 80%;  }
.bf__page .bf__game-beaker-star[data-item="19"] { top:79%; left: 72%;  }
.bf__page .bf__game-beaker-star[data-item="19"] .bf__game-beaker-star-inside {  transform: scale(0.7);}
.bf__page .bf__game-beaker-star[data-item="20"] { top:85%; left: 63%;   }
.bf__page .bf__game-beaker-star[data-item="20"] .bf__game-beaker-star-inside { transform: scale(0.6);}
.bf__page .bf__game-beaker-star[data-item="21"] { top:18%; left: 0%;   }
.bf__page .bf__game-beaker-star[data-item="21"] .bf__game-beaker-star-inside { transform: scale(0.6);}

.bf__page .bf__game-bottom { position: absolute; left:0; bottom: 0; --pelletSize:85px; width: 100%; height: 118px; -webkit-user-select: none; user-select:none; }
.bf__page .bf__game-bottom-bkgd { position: absolute; width:100%; height: 73px; background: #fff; bottom:0; left:50%; border-radius: 8px 8px 0  0; transform:translateX(-50%); pointer-events:none; -webkit-user-select: none; user-select:none; }
.bf__page .bf__game-bottom-arrow { display: none; }
.bf__page .bf__game-bottom-arrow-bkgd { display:none; }

.bf__page .bf__game-bottom-body { position: relative; top:0; left:0; width: 832px; height: 100%; margin: 0 auto; }

.bf__page .bf__game-pellets { display: flex; justify-content:center; width: 768px; margin: 0 auto; height: 100%; pointer-events:none; }
.bf__page .bf__game-pellet {  width: 85px;  height: 85px;  margin: 0 12px; position: relative; pointer-events:auto; -webkit-user-select: none; user-select:none; }
.bf__page .bf__game-pellet.bf__done { pointer-events:none; }
.bf__page .bf__game-pellet-drag { cursor: grab; position:absolute; width: var(--pelletSize);  height: var(--pelletSize); background: rgba(255,255,255); border-radius: 50%; transition: all 0.15s ease-out; transform: translate3d('0px','0px','0px'); } 
.bf__page .bf__game-pellet-drag img { width: 100%; display: block; pointer-events:none; }
.bf__page .bf__game-pellet-drag.bf__hidden { display: none; transition:unset; }
.bf__page .bf__game-pellet-drag.bf__grabbing { cursor: grabbing; transition:unset; z-index: 10; }
.bf__page .bf__game-pellet-drag.bf__locked { pointer-events:none; }

.bf__page .bf__game [data-picto="plump"] { background: linear-gradient(180deg, #F38599 0%, #FFABC9 49.48%, #FF8F9D 100%); }
.bf__page .bf__game [data-picto="smooth"] { background: linear-gradient(180deg, #FFAF65 0%, #FFB783 49.48%, #FF9264 100%); }
.bf__page .bf__game [data-picto="unify"] { background: linear-gradient(180deg, #FF9AE9 0%, #FFBAF4 49.48%, #FF64DD 100%); }
.bf__page .bf__game [data-picto="tone"] { background: linear-gradient(180deg, #FFD178 0%, #FFDC83 49.48%, #FFEF64 100%); }
.bf__page .bf__game [data-picto="bright"] { background: linear-gradient(180deg, #BA7B58 0%, #BD965C 49.48%, #BE7A54 100%); }
.bf__page .bf__game [data-picto="regenerate"] { background: linear-gradient(180deg, #FF9078 0%, #FFAF83 49.48%, #FF9C64 100%); }
.bf__page .bf__game [data-picto="firm"] { background: linear-gradient(180deg, #FFA978 0%, #FFCD83 49.48%, #FFBE64 100%); }

.bf__page .bf__game-pellet-label { display: block; text-align: center; position: absolute; top:95px; width: 100%; font-size: 11px; line-height: 1em; text-transform: uppercase;  pointer-events:none; -webkit-user-select: none; user-select:none; }
.bf__page .bf__game-pellet-bkgd { position:absolute; width: var(--pelletSize);  height: var(--pelletSize); border-radius: 50%; background: linear-gradient(180deg, #CCCCCC 0%, #E7E7E7 49.48%, #CDCDCD 100%); -webkit-user-select: none; user-select:none; pointer-events:none; }
.bf__page .bf__game-pellet-bkgd img { width: 100%; display: block; pointer-events:none; }

.bf__page .bf__game-popins { display: none; }

.bf__page .bf__game-insight-wrapper { display: none; }
.bf__page .bf__game-insight { background: #fff; border-radius: 8px; text-align: center; width: 100%; max-width: 538px; }
.bf__page .bf__game-insight-media { position: relative; top:0; left:0; width: 210px; margin: 10px auto; }
.bf__page .bf__game-insight-picture { width: 100%; display: block; }
.bf__page .bf__game-insight-img { width: 100%; display: block; }
.bf__page .bf__game-insight-body { padding: 0 12px; }
.bf__page .bf__game-insight-name { font-size: 10px; line-height: 1.45em;  font-family:var(--GOTHAM-MEDIUM); text-transform: uppercase; }
.bf__page .bf__game-insight-title { color: #BF7B0D; font-size: 38px; line-height: 38px;  font-family:var(--CLARINS-FONT); padding-top: 24px; padding-bottom: 15px; }
.bf__page .bf__game-insight-content { background: #FDFAF8; padding: 16px; text-align: left; }
.bf__page .bf__game-insight-question { padding-bottom: 16px; font-size: 14px; line-height: 1.45em;  text-transform: uppercase; }
.bf__page .bf__game-insight-info { padding-bottom:12px; }
.bf__page .bf__game-insight-info:last-child { padding-bottom:0; }
.bf__page .bf__game-insight-info-title {  font-size: 14px; line-height: 1.45em; font-family:var(--GOTHAM-MEDIUM);  }
.bf__page .bf__game-insight-info-text { font-size: 12px; line-height: 1.45em; }
.bf__page .bf__game-insight-colored { color: #BF7B0D; font-family:var(--GOTHAM-MEDIUM); }
.bf__page .bf__game-insight-cta { text-align: center; padding: 15px; }
.bf__page .bf__game-insight-cta .bf__cta-icon { width: 20px; display: block; margin-left: 8px; }

.bf__page .bf__game-insight-legend { font-size: 8px; line-height: 1.45em; color: #B0A9A5; text-align: left; display: block; }

.bf__page .bf__game-container[data-popin="0"] .bf__game-insight[data-item="0"] { display: block; }
.bf__page .bf__game-container[data-popin="1"] .bf__game-insight[data-item="1"] { display: block; }
.bf__page .bf__game-container[data-popin="2"] .bf__game-insight[data-item="2"] { display: block; }
.bf__page .bf__game-container[data-popin="3"] .bf__game-insight[data-item="3"] { display: block; }
.bf__page .bf__game-container[data-popin="4"] .bf__game-insight[data-item="4"] { display: block; }
.bf__page .bf__game-container[data-popin="5"] .bf__game-insight[data-item="5"] { display: block; }
.bf__page .bf__game-container[data-popin="6"] .bf__game-insight[data-item="6"] { display: block; }

.bf__page .bf__game-navigation { position: absolute; top:7px; left:calc(50% - 188px); width: 380px; margin: 0 auto; -webkit-user-select: none; user-select:none;  }

.bf__page .bf__game-pagination-items { display: flex; width: 100%; padding: 30px 0;}

.bf__page .bf__game-pagination-item { width: 50px; height: 16px; position: relative; cursor: pointer; }
.bf__page .bf__game-pagination-item-bkgd { width: calc(100%); height:8px; background:#fff ; position: absolute; left:0; top: 50%; transform:translateY(-50%);}
.bf__page .bf__game-pagination-item.bf__done .bf__game-pagination-item-bkgd {  background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0.28%, rgba(255, 255, 255, 0.4) 52.88%, rgba(255, 255, 255, 0.2) 100.28%); }
.bf__page .bf__game-pagination-item-state { position: absolute; left: calc(50% - 9px); top: calc(50% - 8px); width: 18px; height: 15px; display: block; }
.bf__page .bf__game-pagination-item-value { position: absolute; left: 0; top: 3px; width: 100%; height: 100%; display: none; color:#653000; font-size: 8px; line-height: 12px;  font-family: var(--GOTHAM-MEDIUM);  text-align: center; }
.bf__page .bf__game-pagination-item.bf__active .bf__game-pagination-item-value { font-size: 10px; line-height: 12px; }

.bf__page .bf__game-pagination-item.bf__done .bf__game-pagination-item-state { background:url('icons/icon-valid-white.svg') center center no-repeat; background-size:100% auto;  }
.bf__page .bf__game-pagination-item.bf__right .bf__game-pagination-item-bkgd {  border-radius: 0 8px 8px 0; }
.bf__page .bf__game-pagination-item.bf__left .bf__game-pagination-item-bkgd {  border-radius: 0 8px 8px 0; }

.bf__page .bf__game-desc { position: absolute; bottom:140px; left:0; width: 100%; height:20px;  text-align:center;  display:block; -webkit-user-select: none; user-select:none;  }
.bf__page .bf__game-desc-text {color:#fff; font-size: 16px; line-height: 1.45em; font-family: var(--GOTHAM-MEDIUM); }

.bf__page .bf__game-bottom-howtoplay { position: absolute; bottom:30px; left:50px; }
.bf__page .bf__game-howtoplay-cta { padding-top: 16px; }
.bf__page .bf__game-bottom-howtoplay .bf__cta-icon { width: 20px; display: block; margin-right: 8px; }

.bf__page .bf__game-howtoplay { background: #fff; border-radius: 8px; text-align: center; width: 100%; max-width: 538px; }
.bf__page .bf__game-howtoplay-body { padding: 12px; }
.bf__page .bf__game-howtoplay-title { font-size: 38px; line-height: 1em; font-family: var(--CLARINS-FONT); padding-bottom: 16px; }
.bf__page .bf__game-howtoplay-text { font-size: 12px; line-height: 1.45em; }
.bf__page .bf__game-howtoplay-content { display: flex; align-items:center; padding-top: 32px; }
.bf__page .bf__game-howtoplay-media { width: 128px; }
.bf__page .bf__game-howtoplay-steps { width: calc(100% - 128px); display: flex; flex-direction:column; align-items:center; justify-content:flex-start; padding-left: 24px; }
.bf__page .bf__game-howtoplay-step { display: flex; align-items:center; justify-content:flex-start; padding-bottom: 10px; }
.bf__page .bf__game-howtoplay-step-text { font-size: 14px; line-height:1.45em; padding-left: 16px; text-align: left; width:calc(100% - 40px); display: block; }
.bf__page .bf__game-howtoplay-step-value { color:#E02020; font-size: 50px; line-height: 1.25em; width: 40px; display: block; }
.bf__page .bf__game-howtoplay-cta .bf__cta-icon { width: 22px; display: block; margin-right: 8px; }

.bf__page .bf__game-end { background: #fff; border-radius: 8px; text-align: center; width: 1000px; }
.bf__page .bf__game-end-title { font-size: 64px; line-height: 55px;  color:#BF7B0D; font-family: var(--CLARINS-FONT); padding-bottom: 16px; }
.bf__page .bf__game-end-subtitle { font-size: 14px; line-height: 1.45em; letter-spacing: 0.05em; text-transform: uppercase; padding-bottom: 24px; }
.bf__page .bf__game-end-text { font-size: 14px; line-height: 1.45em; }
.bf__page .bf__game-end-text-1 { padding-bottom:24px; }
.bf__page .bf__game-end-body { display: flex; align-items:center; text-align: left; }
.bf__page .bf__game-end-media { width: 500px; }
.bf__page .bf__game-end-content { width: calc(100% - 500px); }
.bf__page .bf__game-end-cta { padding-top: 12px; padding-bottom: 12px; }

.bf__page .bf__game-end {  color:#797674; }

.bf__page .newsletter-form-1-container { padding-top: 8px; }
.bf__page .newsletter-form-wrapper .newsletter-form-1-container .input-text, 
.bf__page .newsletter-form-wrapper .newsletter-form-1-container input[type="text"] { background:#fff; border-color:#E9E3DE; border-width:1px; border-radius: 5px; }
.bf__page .newsletter-form-1-container .subscribe .newsletter-form-1-button { cursor: pointer;display: inline-block; width: auto; height: auto; padding: 14px 16px; font-size: 14px;line-height: 1em;text-align: center;text-decoration: none;letter-spacing: 0; color: var(--COLOR-DEFAULT);  background: #fff; border: 1px solid #B0A9A5; border-radius:5px; transition:all 0.3s; text-transform: capitalize; }
.bf__page .newsletter-form-1-container .subscribe .newsletter-form-1-button:hover { color: var(--COLOR-DEFAULT);  border: 1px solid #797674; background: #fff;  box-shadow: 0px 0px 7px 0px #00000026;  }
.bf__page .newsletter-form-wrapper .newsletter-form-1-container .input-text.error,
.bf__page  .newsletter-form-wrapper .newsletter-form-1-container input[type="text"].error { background: none; border: 1px solid #be0f34; }
.bf__page .newsletter-form-wrapper .form-row { display: block; margin-bottom: 16px; }
.bf__page .newsletter-form-wrapper .subscribe {  padding: 0;  width: auto; display: block; }

@media (max-width: 1340px) { 

.bf__page .bf__game-bottom-howtoplay  {  left: 30px; }

}

@media (max-width: 1260px) { 

.bf__page .bf__game-bottom-howtoplay  { bottom: 95px; }

}


@media (max-width: 1120px) { 

.bf__page .bf__game-bottom-howtoplay  { bottom: 125px; }

}


@media (max-width: 1023px) { 

.bf__page .bf__game-intro-content { left: auto; right: 52px; }
.bf__page .bf__game-intro-img { left: auto; right: -518px; }

}


@media (max-width: 767px) { 

.bf__page .bf__game-page { height: 174.6vw; }
.bf__page .bf__game-container { --pelletWidth:85px; --pelletMarge:12px; --beakerSize:100vw; }

.bf__page .bf__game-intro-img { left: 0; right: auto; width: 100%;  object-fit: cover;   object-position: 50% bottom; }

.bf__page .bf__game-intro-content { position:relative; top:0; left: 0; right: auto; text-align: center; margin: 0 auto; width: 90%; padding-top: 24px; }
.bf__page .bf__game-intro-logo { margin: 0 auto; width: 168px; padding: 14px 0 15px 0; }
.bf__page .bf__game-intro-logo-clarins { width: 82px; }
.bf__page .bf__game-intro-title { color:#FFF; font-size: 45px; line-height: 1em; padding-top: 16px; padding-bottom: 16px; }
.bf__page .bf__game-intro-title span { display: block; } 
.bf__page .bf__game-intro-subtitle { color:#FFF; padding-bottom: 16px; }
.bf__page .bf__game-intro-text { color:#FFF; }
.bf__page .bf__game-intro-cta {  padding-top: 16px; }

.bf__page .bf__game-intro-birthday  { top:auto; bottom:27.46vw; left:calc(50% - 34.1vw); width:16.8vw; }

.bf__page .bf__game-beaker-name { position: absolute; top:14.3vw; }
.bf__page .bf__game-beaker-name span { padding: 0 10vw; line-height: 1.1em; }

.bf__page .bf__game-beaker-img { object-position: 50% 65%; } 

.bf__page .bf__game-pellets {  width: calc( (var(--pelletWidth) + var(--pelletMarge) * 2) * 7 ); }
.bf__page .bf__game-pellet {  width: var(--pelletWidth);  height: var(--pelletWidth);  margin: 0 var(--pelletMarge); }
.bf__page .bf__game-pellet-label { color: #fff; }

.bf__page .bf__game-desc { bottom: 130px; }

.bf__page .bf__game-rules-end { top:calc(100vw - 60px); }
.bf__page .bf__game-rules-drag { top: calc(100vw + 24px); left: 6vw; }
.bf__page .bf__game-rules-drag-img { height: calc(82vw - 60px); width: auto; transform: rotate(-3deg); }
.bf__page .bf__game-rules-drag-content { left: -95px; text-align: right; }

.bf__page .bf__game-end { max-width: unset; width: 100%;}
.bf__page .bf__game-insight { max-width: unset; }
.bf__page .bf__game-howtoplay { max-width: unset; }


.bf__page .bf__game-bottom-wrapper { width: calc(100vw - 80px); position: absolute; bottom: 35px; left:40px; }

.bf__page .bf__game-bottom-body { width: calc( 85px * 7 + 4px * 7);  left: 40px; transition:transform 0.3s ease-out; }

.bf__page .bf__game-bottom-bkgd { display: none; }

.bf__page .bf__game-bottom-arrow-bkgd { display:block; position: absolute; bottom: -13vw; width: 40px; height: 59.73vw; z-index: 10; pointer-events:none; }
.bf__page .bf__game-bottom-arrow-bkgd-left { left: 0px; }
.bf__page .bf__game-bottom-arrow-bkgd-right { right: 0px; }

.bf__page .bf__game-bottom-arrow { display:block; position: absolute; bottom: 0; width: 40px; height: 118px; cursor: pointer; z-index: 10; 
    -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none; }
.bf__page .bf__game-bottom-arrow-img { position: absolute; top:30px; left:calc(50% - 12px); width: 24px; }
.bf__page .bf__game-bottom-arrow-left { left: 0px; }
.bf__page .bf__game-bottom-arrow-right { right: 0px; }


.bf__page .bf__game-bottom-howtoplay { left: 20px; z-index: 10; }
.bf__page .bf__game-bottom-howtoplay .bf__cta-btn { padding: 5px; border: none; border-radius: 50%; }
.bf__page .bf__game-bottom-howtoplay .bf__cta-icon { margin-right: 0px; }
.bf__page .bf__game-bottom-howtoplay .bf__cta-text { display: none; }

.bf__page .bf__game-navigation { top: 29px; left: calc(50% - 166px); width: 332px; }
.bf__page .bf__game-navigation .swiper-button { display: none !important; }

.bf__page .bf__game-pagination-items { padding-top: 0; padding-bottom: 0; }

.bf__page .bf__game-pagination-item { width: 45px; height: 18px; opacity: 0.9; margin-right: 2px; transition:all 0.2s; }
.bf__page .bf__game-pagination-item:last-child { margin-right: 0px; }
.bf__page .bf__game-pagination-item.bf__done { opacity: 1; }
.bf__page .bf__game-pagination-item.bf__active { width: 50px; height: 18px; border-radius: 3px; background: #fff; opacity: 1; }
.bf__page .bf__game-pagination-item-bkgd { height:12px; }

.bf__page .bf__game-pagination-item-value { display: block; }
.bf__page .bf__game-pagination-item-state { display: none; }

.bf__page .bf__game-end-body { flex-direction:column; }
.bf__page .bf__game-end-media { width: 100%; }
.bf__page .bf__game-end-content { width: 100%; }

.bf__page .bf__game-howtoplay-content { flex-direction:column; }
.bf__page .bf__game-howtoplay-steps {  width: 92%; padding-left: 0; padding-top: 24px; }


}


@media (max-width: 474px) { 

.bf__page .bf__game-navigation { }


}


@media (min-width: 2289px) { 

    .bf__page .bf__game-container .swiper-button { display: none;  }

}











.bf__bloc-popin { background: #eac27c; padding: 30px 0; text-align: center; }

.bf__page .popin__content-opener { display: none; }



.bf__page .popin__content-wrapper {  }

.bf__page .popin__content-wrapper { 
    --popin_height:100vh;  
    --popin_top:180px; 
    position: fixed; 
    bottom:0; 
    left:0; 
    width: 100vw; 
    height:0; 
    z-index: 10000; 
}

@supports(height: 100dvh) {
 .bf__page .popin__content-wrapper { --popin_height:100dvh; --popin_top:90px }
 .bf__page .popin__content-title { color:#FF3300; }
}

.bf__page .popin__content-overlay { background: #000; opacity: 0; position: absolute; top:0;left:0;  width: 100%; height: 100%; display: block; transition-property: opacity; transition-timing-function: ease-out; transition-duration: 0.3s;  transition-delay: 0.3s; }

.bf__page .popin__content { position: absolute; bottom:0;left:0; display: flex; align-items:flex-end; transform:translateY(100%); }

.bf__page .popin__content-body { background: #fff; border-radius: 8px; max-height: calc(var(--popin_height) - var(--popin_top)); text-rendering: optimizeLegibility; }
.bf__page .popin__content-closer { cursor: pointer; position: absolute; top:10px; right: 10px; width: 24px; height: 24px; background: url(icons/icon-close.svg) left top no-repeat; background-size: 100% auto; }
.bf__page .popin__content-inside { padding: 20px; }
.bf__page .popin__content-title { padding-top: 15px;  padding-bottom: 15px; font-size: 28px; line-height: 1.375em; }
.bf__page .popin__content-text { padding-bottom: 30px; font-size: 14px; line-height: 1.375em; }

.bf__page .popin__content-wrapper[data-open="1"] { height: calc( var(--popin_height) + 1px); }
.bf__page .popin__content-wrapper[data-open="1"]  .popin__content-overlay { transition:opacity 0.5s ease-out; opacity: 0.5; }
.bf__page .popin__content-wrapper[data-open="1"] .popin__content { top: 50%; left: 50%; bottom: auto; transform:translate(-50%, -50%);  }


@media (max-width:768px){

.bf__page .popin__content { width:100%; transition-property: transform; transition-duration: 0.3s;  transition-timing-function: ease-in; transition-delay: 0; }
.bf__page .popin__content-wrapper[data-open="1"] .popin__content { transition:transform 0.5s cubic-bezier(0, 0.56, 0.1, 1) 0.2s;  transform:translateY(0); top:auto; bottom:0; left:0; }

.bf__page .popin__content-body { border-radius: 8px 8px 0 0; width: 100%; }
.bf__page .popin__content-content { max-height: calc(var(--popin_height) - var(--popin_top) - 40px); overflow-y:scroll; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }

.bf__page .popin__content-handler { border-bottom: solid 1px #ccc; height: 40px; position: relative; top:0; left:0; }

.bf__page .popin__content-inside { padding-left:5%; padding-right:5%; }

.bf__page .popin__content-opener { display: inline-block; cursor: pointer; }
.bf__page .popin__content-toClone { display: none; }
    
}




/*    Swiper    */

#bf__page .swiper-container {
 width: 100%;
 height: 100%;
 margin: 0 auto;
 position: relative;
 overflow: hidden;
 list-style: none;
 display: block;
}

#bf__page .new__ingredients-slider[data-type="scrollbar"] .swiper-container { height: calc(100% - 32px); }
#bf__page .new__ingredients-slider[data-type="default"] .swiper-container { width: calc(100% - 64px); }

#bf__page .swiper-container-initialized { opacity: 1; }

#bf__page .swiper-container-no-flexbox .swiper-slide { float: left; }

#bf__page .swiper-container-vertical > .swiper-wrapper {
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
 -webkit-flex-direction: column;
 -ms-flex-direction: column;
 flex-direction: column;
}

#bf__page .swiper-wrapper {
 position: relative;
 /* width: 100%; */
 height: 100%;
 /* z-index: 1; */
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 flex-wrap: nowrap;
 -webkit-transition-property: -webkit-transform;
 transition-property: -webkit-transform;
 -o-transition-property: transform;
 transition-property: transform;
 transition-property: transform,-webkit-transform;
 -webkit-box-sizing: content-box;
 box-sizing: content-box;
}
#bf__page .swiper-container-android .swiper-slide,
#bf__page .swiper-wrapper {
 -webkit-transform: translate3d(0px, 0, 0);
 transform: translate3d(0px, 0, 0);
}
#bf__page .swiper-container-multirow > .swiper-wrapper {
 -webkit-flex-wrap: wrap;
 -ms-flex-wrap: wrap;
 flex-wrap: wrap;
}
#bf__page .swiper-container-free-mode > .swiper-wrapper {
 -webkit-transition-timing-function: ease-out;
 -o-transition-timing-function: ease-out;
 transition-timing-function: ease-out;
 margin: 0 auto;
}
#bf__page .swiper-slide {
 -webkit-flex-shrink: 0;
 -ms-flex-negative: 0;
 flex-shrink: 0;
 position: relative;
 -webkit-transition-property: -webkit-transform;
 transition-property: -webkit-transform;
 -o-transition-property: transform;
 transition-property: transform;
 transition-property: transform, -webkit-transform;
 text-align: center;
}

#bf__page .swiper-slide:before,.swiper-slide:after { content: ""; display: table; }
#bf__page .swiper-slide:after { clear: both; }

#bf__page .swiper-slide-invisible-blank {
 visibility: hidden;
}
/* Auto Height */
#bf__page .swiper-container-autoheight,
#bf__page .swiper-container-autoheight .swiper-slide {
 height: auto;
}
#bf__page .swiper-container-autoheight .swiper-wrapper {
 -webkit-box-align: start;
 -webkit-align-items: flex-start;
 -ms-flex-align: start;
 align-items: flex-start;
 -webkit-transition-property: height, -webkit-transform;
 transition-property: height, -webkit-transform;
 -o-transition-property: transform, height;
 transition-property: transform, height;
 transition-property: transform, height, -webkit-transform;
}

/* IE10 Windows Phone 8 Fixes */
#bf__page .swiper-container-wp8-horizontal,
#bf__page .swiper-container-wp8-horizontal > .swiper-wrapper {
 -ms-touch-action: pan-y;
 touch-action: pan-y;
}
#bf__page .swiper-container-wp8-vertical,
#bf__page .swiper-container-wp8-vertical > .swiper-wrapper {
 -ms-touch-action: pan-x;
 touch-action: pan-x;
}

.swiper-backface-hidden .swiper-slide {
 transform:translateZ(0);
 -webkit-backface-visibility:hidden;
 backface-visibility:hidden
}

#bf__page .swiper-button {
 position: absolute;
 top: 0;
 width: 25px;
 height: 25px;
 background: #fff; 
 z-index: 10;
 cursor: pointer;
border-radius: 50%;
}
#bf__page .swiper-button:after { content:"";  background-size: 75% auto;  background-position: center; background-repeat: no-repeat; width: 100%; height: 100%; display: block; }
#bf__page .bf__game-container .swiper-button::after { }

#bf__page .swiper-button:focus {  outline: none; }

#bf__page .swiper-button-prev.swiper-button-disabled,
#bf__page .swiper-button-next.swiper-button-disabled {
 opacity: 0.4;
 cursor: auto;
 pointer-events: none;
}
#bf__page .swiper-button-prev,
#bf__page .swiper-container-rtl .swiper-button-next,
html[dir="rtl"] .swiper-button-next {
 left: -50px;
 right: auto;
 top: calc(50% - 12.5px);
}
#bf__page .swiper-button-prev::after,
#bf__page .swiper-container-rtl .swiper-button-next::after,
html[dir="rtl"] .swiper-button-next::after {
 background-image: url(icons/arrow-left-grey-icon.svg);
}
#bf__page .swiper-button-next,
#bf__page .swiper-container-rtl .swiper-button-prev,
html[dir="rtl"] .swiper-button-prev {
 right: -50px;
 left: auto;
 top: calc(50% - 12.5px);
}
#bf__page .swiper-button-next:after,
#bf__page .swiper-container-rtl .swiper-button-prev:after,
html[dir="rtl"] .swiper-button-prev:after {
  background-image: url(icons/arrow-right-grey-icon.svg);
}

#bf__page .swiper-button-lock {
 display: none;
}

#bf__page .swiper-pagination {
 position: relative; 
 top:0; 
 left:50%;
 transform:translateX(-50%);
 text-align: center;
 padding: 30px 0;
}

#bf__page .bf__game-navigation .swiper-pagination {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: 100%;
  padding: 0
}

.swiper-pagination.swiper-pagination-hidden {
 opacity:0
}
.swiper-pagination-bullet {
 width:16px;
 height:16px;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 opacity:1;
 position: relative;
}
.swiper-pagination-bullet:after {
    content: "";
    position: relative;
 width:8px;
 height:8px;
 display:block;
 border-radius:50%;
 background:#D3CCC8;
 opacity:1
}
button.swiper-pagination-bullet {
 border:none;
 margin:0;
 padding:0;
 box-shadow:none;
 -webkit-appearance:none;
 appearance:none
}
.swiper-pagination-clickable .swiper-pagination-bullet {
 cursor:pointer
}
.swiper-pagination-bullet:only-child {
 display:none!important
}
.swiper-pagination-bullet-active:after {
 opacity:1;
 background:#333;
}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
 margin:0;
}

#bf__page .swiper-wrapper { justify-content: center; }

@media screen and (max-width:2289px){
    #bf__page .swiper-wrapper { justify-content: unset; }
}

@media screen and (max-width:768px){

#bf__page .swiper-button-next,
#bf__page .swiper-container-rtl .swiper-button-prev,
html[dir="rtl"] .swiper-button-prev {
 right: 5%;
 top: 0;
}

#bf__page .swiper-button-prev,
#bf__page .swiper-container-rtl .swiper-button-next,
html[dir="rtl"] .swiper-button-next {
 left: 5%;
 top: 0;
}

}





/*----------------------------------------------------------------------------------*/
i-input input[type=email].filled{
    padding: 17px 15px 5px;
}
i-input input[type=email].filled~label{
    font-size: 9px;
    line-height: 13px;
    transform: translateY(-50%);
    padding: 5px 0 0 17px;
}

@media only screen
and (min-device-width : 834px)
and (max-device-width : 1112px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) {
    .bf__page .popin__content-inside {
        max-width: 760px;
        width: 100%;
    }
    .bf__page .bf__game-end {
        width: 100%;
    }
    .bf__page .bf__game-end-media {
        width: 390px;
    }
    .bf__page .bf__game-end-content {
        width: calc(100% - 110px);
    }
}

/*iPhone 6/7/8/plus, XR, 11, X, 12 and 11.*/
@media (max-width: 480px) {
    .bf__page .bf__game-bottom-body {
        left: 30px;
    }
    .bf__page .bf__game-beaker-name {
        top: 11.3vw;
    }
}



/* ---------------------------------------------- */
.footer-wrapper button.button-link.go-to-top:active,
.footer-wrapper button.button-link.go-to-top:focus,
button.button-link.inTheMiddle:active,
button.button-link.inTheMiddle:focus {
    border: none !important;
    outline: none !important;
}

i-error-dialog {
    display: none;
}

.bf__page .bf__cta-btn.bf__cta-btn-desktop {
    display: none;
}

@media (min-width: 1023px) {
    .bf__page .bf__birthday-text {
        width: 90%;
        margin: 0 auto;
    }
}

@media (min-width: 768px) {
    .bf__page .bf__cta-btn.bf__cta-btn-desktop {
        display: inline-flex;
    }

    .bf__page .bf__cta-btn.bf__cta-btn-mobile {
        display: none;
    }
}

@media (orientation : portrait) {
    body {
        overflow-y: hidden;
    }    
}

@media only screen
and (min-device-width : 834px)
and (max-device-width : 1112px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) {
    .bf__page .bf__services-title {
        font-size: 34px;
    }
}

@media (max-width: 761px) {
    .bf__page .bf__magnificient-title-label {
        font-size: 22px;
    }
}

/*iPhone 11, 12, 13, 13 Min, and 13 Pro Max*/
@media (max-width: 480px) {
    .display-flex {
        display: flex !important;
        flex-direction: column !important;
    }
    
    i-product-above-the-fold i-quantity-selector, .i-product-above-the-fold i-quantity-selector {
        flex-basis: 5em !important;
    }
}

/* --- */
body,
  html {
    width: 100%;
    overflow-x: hidden !important;
  }
  #main:not(.main-homepage) {
      padding-left: 0 !important;
      padding-right: 0 !important;
  }

@media (max-width: 480px) {
    .bf__page .bf__game-bottom-arrow-bkgd{
        z-index: 1 !important; 
    }
}

@media only screen
and (min-device-width : 834px)
and (max-device-width : 1112px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) {
    .bf__page .popin__content-wrapper { 
        --popin_height:105vh !important;  
        --popin_top:180px !important; 
        bottom: -15px !important; 
    }
}