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

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

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

@media (max-width: 768px) { 
    #wrapper .inTheMiddle { display: none !important; }
}


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

.skn__page { 
    --CLARINS-FONT: ClarinsRegular, Clarins;
    --GOTHAM-EXTRALIGHT: "Gotham_ExtraLight";
    --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-PAGE: #AC651B;
    --COLOR-RED-A:#b40024;
    --COLOR-RED-B:#8c0b26;
    --RADIUS:8px; 
    --ratioWidth: 1px;
    --mainOffset: 60px;
}

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

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

@media (min-width: 768px) { 
    .skn__page {   
       --mainOffset: 147px;
    }
}


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

.skn__page {font-family: var(--GOTHAM-BOOK);font-weight: normal;color: #333333; position: relative; width: 100%; overflow: hidden; }


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

.skn__page h1,
.skn__page h2,
.skn__page h3,
.skn__page h4 {margin: 0;padding: 0;font-weight: normal; }

.skn__page h1,
.skn__page h2 {  font-family: var(--GOTHAM-MEDIUM);}

.skn__page p {margin: 0;padding: 0; }

.skn__page picture {display: block; /*! width: 100%; */}

.skn__page img {width: 100%;display: block; }

.skn__page a {color: #333;text-decoration: none; }
.skn__page sup { position: unset; line-height: 1.2em; font-size: 0.5em; vertical-align: top; }

.skn__page .skn__suptitle { font-size: 16px;line-height: 1.2em; }
.skn__page .skn__title { font-size: 24px;line-height: 1.2em; font-family:var(--GOTHAM-BOOK);  }
.skn__page .skn__subtitle { font-size: 16px; line-height: 1.2em;}
.skn__page .skn__text { font-size: 14px;line-height: 1.45em; }
.skn__page .skn__text .skn__nowrap { white-space: nowrap; }
.skn__page .skn__text-color {  color: var(--COLOR-RED-A); }

.skn__page .skn__price {font-size: 16px;line-height: 20px; }

.skn__page .skn__cta {  }
.skn__page .skn__cta-btn {cursor: pointer;display: inline-flex;min-width: 120px;height: auto;padding: 14px 17px; font-size: 14px;line-height: 1em;text-align: center;text-decoration: none;letter-spacing: 0;color: #fff;background-color: var(--COLOR-RED-A);border: 2px solid var(--COLOR-RED-A);border-radius: 5px;font-family: var(--GOTHAM-MEDIUM, Helvetica, Arial);font-weight: 500; position: relative; top:0; left:0; align-items: center;justify-content: center;}
.skn__page .skn__cta-text {color: #fff; white-space: nowrap; }

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


.skn__page a.skn__link { color: var(--COLOR-DEFAULT); text-decoration: underline; font-family: var(--GOTHAM-MEDIUM); font-size: 11px; line-height: 1.42em; letter-spacing: 0.02em;  text-transform: uppercase; }
.skn__page .skn__link-text {color: var(--COLOR-DEFAULT);}

.skn__page .skn__quickshop { display: none; }
.skn__page .skn__addtobag  { display: none; }

/*
.skn__page .skn__bkgd { position:fixed; top:0; left:0; width:100%; height:100vh; background: url(../common/bkgd.jpg) top left no-repeat; background-position:50% 0; background-size:cover; }
*/
.skn__page .skn__nowrap { white-space: nowrap; }
.skn__page .skn__uppercase { text-transform: uppercase; }
.skn__page a.skn__underline, 
.skn__page .skn__underline { text-decoration:underline; }

.skn__page .skn__decor { position: absolute; pointer-events:none; }
.skn__page .skn__decor img { width: 100%; display: block; }

.skn__page .skn__group { position: relative; }

.skn__page .skn__link-quickshop { display: inline-block; }

.skn__page .skn__only-desktop { display: none; }
.skn__page .skn__only-mobile { display: none; }
        

@media (max-width: 768px) { 

    .skn__page .skn__cta-btn.skn__only-mobile { display: inline-flex; }
    
}


@media (min-width: 769px) { 

    .skn__page .skn__title { font-size: 32px; line-height: 1.2em; }

    .skn__page .skn__quickview-btn.skn__only-desktop { display: inline-block; }
    .skn__page .skn__cta-btn.skn__only-desktop { display: inline-flex; }

    .skn__page .skn__cta-btn:hover { color: #fff; outline: 0 !important;  background-color: var(--COLOR-RED-B);  border-color: var(--COLOR-RED-B); }
    .skn__page .skn__cta-white:hover { color: var(--COLOR-DEFAULT);  border: 1px solid #797674; background: #fff;  box-shadow: 0px 0px 7px 0px #00000026; }

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

.skn__page a.skn__underline, 
.skn__page .skn__underline { cursor: pointer; }

.skn__page a.skn__underline:hover, 
.skn__page .skn__underline:hover { text-decoration: none; }


}


/*   header    */

.skn__page .skn__bloc-header { --headerImgRatio:1px; position: relative; height:460px; }

.skn__page .skn__header-media { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; }
.skn__page .skn__header-picture { width: 100%; height: 100%; position: relative;top: 0;}
.skn__page .skn__header-img { height: 100%; object-fit:cover; width: 2200px; position: absolute; top: 0; left: calc(50% - 1100px); display: block; }

.skn__page .skn__header-body { position: relative; display: flex; align-items:center; height: 100%; }

.skn__page .skn__header-content { position: relative; top: 0; left: calc(50% ); width: 366px; display: block; }
.skn__page .skn__header-title { font-size: 44px; line-height: 1em; font-family: var(--CLARINS-FONT);  padding-bottom: 24px; }


@media (max-width: 768px) { 

    .skn__page .skn__bloc-header { --headerTextRatio:1px; --headerImgRatio:1px; height: auto; padding-bottom: 0; overflow: hidden; }
  
     .skn__page .skn__header-media { position: relative; height: auto; }
     .skn__page .skn__header-img { width:100%; height: auto; object-fit:unser; position: relative; top:0; left: 0; }
     
    .skn__page .skn__header-body { position: relative; display: block; padding: 32px 0; }

    .skn__page .skn__header-content { text-align: center; width: 92%; max-width:344px; left:0; margin: 0 auto; padding: 0; }
    .skn__page .skn__header-title { font-size: 36px; line-height: 1em; padding-bottom: 24px; text-align: center; }
   .skn__page .skn__header-title .skn__mobile { display: block; }
    .skn__page .skn__header-text { width: 100%; margin: 0 auto; }

}


@media (max-width: 373px) { 

  
}



/*   navigation    */

.skn__page .skn__navigation { --topNav: var(--mainOffset); height: 48px; transition:transform 0.5s;  transform: translateY(calc( (-1) * var(--topNav) - 50px)); position: fixed; top:var(--topNav); left:0; width: 100%; z-index:21; }
.skn__page .skn__navigation.skn__stacked  {  transform: translateY(0); }

.skn__page .skn__navigation-content { width: 100%; height:100%; overflow: hidden; display: flex;  justify-content: flex-start; align-items: flex-start; flex-direction:column;  height: auto; max-height: 0; transition:max-height 0.5s ease-out;  }
.skn__page .skn__navigation.skn__opened .skn__navigation-content { max-height: 325px;  }

.skn__page .skn__navigation-handler { display: flex; justify-content:space-between;  position: relative;left: 0;top: 0; }
.skn__page .skn__navigation-handler-click { position: absolute;top: 0;left:0; width: 100%; height: 100%; display: block; cursor: pointer; }

.skn__page .skn__navigation-handler-left { height: 48px;display: flex;align-items: center; color:#fff; }
.skn__page .skn__navigation-handler-right { padding-right: 16px; display: flex;align-items: center; }

.skn__page .skn__navigation-handler-text { font-size: 14px; line-height: 1.45em; font-family:var(--GOTHAM-MEDIUM); padding: 0 20px;display: block; pointer-events:none; }

.skn__page .skn__navigation-handler-arrow { background: url(../common/arrow-down-white-icon.svg) left top no-repeat;background-size: 100% auto;width: 24px;height: 24px;transform: rotate(0deg);transition: transform 0.3s;   pointer-events:none; }
.skn__page .skn__navigation.skn__opened .skn__navigation-handler-arrow { transform: rotate(180deg); }

.skn__page .skn__navigation-inside  { position: relative; top:0; left:0; z-index:1; background: #C2866B; color: #fff; }
.skn__page .skn__navigation-items {display: flex; flex-direction:column; padding: 0; list-style: none;margin: 0 16px; padding-bottom: 4px; width: calc(100% - 32px); }
.skn__page .skn__navigation-item { height: 44px; white-space: nowrap;display: flex; align-items: center; border-bottom: solid 1px #fff; position: relative;cursor: pointer; }
.skn__page .skn__navigation-item:last-child { border-bottom: none; }
.skn__page .skn__navigation-item:hover,
.skn__page .skn__navigation-item.skn__active {}
.skn__page .skn__navigation-item span { font-size: 14px; line-height: 1.45em; color: #fff;  letter-spacing: 0.05em; display: block;text-align: center; position: relative;}
.skn__page .skn__navigation-item { opacity: 1; }

.skn__page.skn__stack .skn__navigation-inside { position: fixed; top: var(--mainOffset); left: 0; z-index: 10; width: 100%; }

.skn__page .skn__navigation-inside .skn__cta-btn { padding-top: 0; padding-bottom: 0; height: 32px;  }
.skn__page .skn__navigation-handler .skn__cta-btn { margin-left: 20px; }
.skn__page .skn__navigation-content .skn__cta-btn { display: none; }

@media (min-width: 769px) { 

    .skn__page .skn__navigation {  height: 40px; }

    .skn__page .skn__navigation-content { height: 100%; justify-content:center; align-items:center; flex-direction:row; max-height: unset; }

    .skn__page .skn__navigation-handler { display: none; }
  .skn__page .skn__navigation-inside  { height: 45px;  }
    .skn__page .skn__navigation-items { flex-direction:row; justify-content: center; align-items:center; padding-bottom: 0; width: unset; }
    .skn__page .skn__navigation-item{ display: block; height: unset; border-bottom: none; margin: 0 16px; }

    .skn__page .skn__navigation-item a { text-transform: uppercase; }

    .skn__page .skn__navigation-item a span { letter-spacing: 0 }
       .skn__page .skn__navigation-item:hover span { color: #e9d2bd; }

    .skn__page .skn__navigation-content .skn__cta-btn { display: flex; }

}



/*   bloc    */

.skn__page .skn__bloc-shadow {  box-shadow: 0px 24px 30px -20px rgba(0, 0, 0, 0.04), inset 0px 24px 30px -20px rgba(0, 0, 0, 0.05); } 



/*   anchor    */


.skn__page .skn__bloc-anchor { background: linear-gradient(92.09deg, #FFECE3 1.05%, #DFAD85 100%);  }

.skn__page .skn__anchor { width:92%; max-width:1264px; margin: 0 auto; position: relative; top:0; left:0; padding: 40px 0; }

.skn__page .skn__anchor-title { font-size: 22px; line-height: 1.2em; text-align: center; font-family: var(--GOTHAM-BOOK); padding-bottom: 32px; }

.skn__page .skn__anchor-groups { display: flex; flex-direction:column; align-items:center; justify-content:center; height: 100%; width:100%; position: relative; top:0; left:0; }
.skn__page .skn__anchor-group { width:100%; }

.skn__page .skn__anchor-group[data-item="2"] { margin-top: 32px; }
.skn__page .skn__anchor-group-title { color:#B16127;text-align: center; text-transform: uppercase; font-size: 12px; line-height: 1.45em; letter-spacing: 0.01em; padding-bottom: 8px; }

.skn__page .skn__anchor-items { border: solid #B16127 1px; border-radius: 12px; display: flex; align-items:center; justify-content:center; padding: 12px; }

.skn__page .skn__anchor-item { background: #fff; border-radius: 8px; width: 100%; height: 68px; display: flex; flex-direction:column; align-items:center; justify-content:center;  }
.skn__page .skn__anchor-group[data-item="2"] .skn__anchor-item:last-child { margin-left: 16px; }

.skn__page .skn__anchor-item-content { text-align: center;}
.skn__page .skn__anchor-item-name { font-size: 14px; line-height: 1.45em; font-family: var(--GOTHAM-MEDIUM); padding-top: 8px; }

.skn__page .skn__anchor-item-dots { display: inline-flex; flex-direction:row; padding: 0 5px; }
.skn__page .skn__anchor-item-dot { background: #F5D7C4; border-radius: 50%; width: 8px; height: 8px; margin-right: 5px; }
.skn__page .skn__anchor-item-dot:last-child { margin-right: 0px; }
.skn__page .skn__anchor-item-dot.skn__active { background: #B26323; }


@media (min-width: 769px) { 

.skn__page .skn__anchor { height:414px; padding: 80px 0 100px 0; }

.skn__page .skn__anchor-groups { flex-direction:row; }
.skn__page .skn__anchor-group { width:50%; }

.skn__page .skn__anchor-group[data-item="1"] { margin-right: 16px; width: calc(100% / 3 - 16px); }
.skn__page .skn__anchor-group[data-item="2"] { margin-top: 0; margin-left: 16px; width: calc(100% * 2 / 3 - 16px); }

.skn__page .skn__anchor-items { padding: 16px; }

.skn__page .skn__anchor-item { transition:box-shadow 0.15s; height: 112px; cursor: pointer; }
.skn__page .skn__anchor-group[data-item="2"] .skn__anchor-item:last-child { margin-left: 20px; }
.skn__page .skn__anchor-item:hover { box-shadow: 0px 0px 7px 0px #00000026; }

.skn__page .skn__anchor-item-name { font-size: 16px; line-height: 1.45em; padding-top: 16px; }


}




/*   compare    */

.skn__page .skn__compare-wrapper { display: none; }

.skn__page .skn__compare { background: #FEF7F3; width: 100%; }

.skn__page .skn__compare-title { color: #C48C6B; font-size: 20px; line-height: 1.45em; font-family: var(--GOTHAM-MEDIUM); text-transform: uppercase; text-align: center; padding-top: 40px; padding-bottom: 24px; width: 92%; margin: 0 auto; }
.skn__page .skn__compare-text { text-align: center; padding-bottom: 24px; }

.skn__page .skn__compare-items-wrapper { display: block; position: relative; top:0; left:0; width: 92%; margin: 0 auto; }

.skn__page .skn__compare-items { width: 100%; }
.skn__page .skn__compare-items .swiper-container { overflow: unset !important; }

.skn__page .skn__compare-item { width: 44vw; }

.skn__page .skn__compare-item-group { text-align: center; background: #fff; border-right: solid 1px #D3CCC8; margin-top: 36px; position: relative; top:0; left:0; }
.skn__page .skn__compare-item:last-child .skn__compare-item-group { border-color:#fff; }
.skn__page .skn__compare-item-group:first-child { margin-top: 0px; }

.skn__page .skn__compare-item-filter { opacity: 1; text-align: center; width:100%; height: 36px; position: absolute; top:-36px; left:0; z-index:10; cursor: pointer; display: flex; justify-content:center; align-items:center; transition:opacity 0.3s, transform 0.3s;  transform:translateY(0);  }
.skn__page .skn__compare-item-filter-text { font-size: 14px; line-height: 1.45em; font-family: var(--GOTHAM-MEDIUM); text-transform: uppercase; position: relative; top:0; left:0; }
.skn__page .skn__compare-item-filter-text::after { content: ""; position: absolute; top:0; right:-25px; width: 20px; height: 20px; background: url(../common/arrow-down-grey-icon.svg) center center no-repeat; background-size:100% auto; transform:rotate(0deg); transition:transform 0.3s;  }
.skn__page .skn__compare-item-filter.mod__expand .skn__compare-item-filter-text::after { transform:rotate(180deg); }
.skn__page .skn__compare-item-filter.skn__hide { opacity: 0; transition:opacity 0s, transform 0; }

.skn__page .skn__compare-item-title { font-size: 14px; line-height: 1.45em; font-family: var(--GOTHAM-MEDIUM); padding: 16px 8px 0 8px; height: calc(5.38em + 16px); }
.skn__page .skn__compare-item-text { font-size: 14px; line-height: 1.45em; height:62px; display: flex; justify-content:center; align-items:center;  padding: 0 8px;  }

.skn__page .skn__compare-item-inside {  transition:max-height 0.3s; overflow: hidden; }
.skn__page .skn__compare-item-group.mod__collapse .skn__compare-item-inside { max-height:1px !important; }

.skn__page .skn__compare-item-media { padding: 16px; }
.skn__page .skn__compare-item-img { width: 136px; height:180px; margin: 0 auto; }

.skn__page .skn__compare-item-texture { /* padding-bottom: 44px; */}
.skn__page .skn__compare-item-texture-img { width: 100%; margin: 0 auto; }

.skn__page .skn__compare .skn__cta { padding-top:10px; padding-bottom: 24px; }
.skn__page .skn__compare .skn__compare-item-cta { padding-top:0px; padding-bottom: 24px; }

.skn__page .skn__compare-opener {  text-align: center; padding-top: 32px; padding-bottom: 32px; }
.skn__page .skn__compare-opener .skn__cta-btn { padding-top: 14px; padding-bottom: 14px; }


@media (min-width: 390px) { 

    .skn__page .skn__compare-item-title { height: calc(4.35em + 16px); }

}

@media (min-width: 768px) { 

    .skn__page .skn__compare { }
    .skn__page .skn__compare-items-wrapper { display: flex; justify-content:center; padding-bottom: 40px; }
    .skn__page .skn__compare-items { width: auto; }
    .skn__page .skn__compare-item { width: 204px; }

    .skn__page .skn__compare-opener { text-align: center; padding-top: 52px; padding-bottom: 0px; }

}


/*   edito    */

.skn__page .skn__edito { width: 100%;  margin: 0 auto; position: relative;top: 0;left: 0; }

.skn__page .skn__edito-bkgd { width: 100%; display: block; }

.skn__page .skn__edito-body { position: relative; top:0; }
.skn__page .skn__edito-content { width: 92%; max-width: 508px; margin: 0 auto; padding-top: 32px; padding-bottom:40px; text-align: center; } 

.skn__page .skn__edito-title { padding-bottom: 24px;  }
.skn__page .skn__edito-text {  }
.skn__page .skn__edito-suptitle { text-transform: uppercase; color: #B26323;font-family: var(--GOTHAM-MEDIUM);  padding-bottom: 24px;  }


@media (min-width: 768px) { 

.skn__page .skn__edito { display: flex; flex-direction:column; }

}


@media (min-width: 769px) { 

.skn__page .skn__edito { height: 514px; }

.skn__page .skn__edito-bkgd { position: absolute; top:0; left:calc(50% - 1100px); width: 2200px; height: 100%; }
.skn__page .skn__edito-picture { width: 100%;  height: 100%; }
.skn__page .skn__edito-img { height: 100%; object-fit:cover;  }

.skn__page .skn__edito-body { left: 32px;  height:100%; display:flex; flex-direction:row; align-items:center; } 
.skn__page .skn__edito-content {  width: 398px; text-align: left; margin: 0;  padding: 0; } 

}

@media (min-width: 1112px) { 
    .skn__page .skn__edito-body { left:calc(50% - 524px); }
}



/*   difference    */

.skn__page .skn__difference { width: 100%; max-width: 1048px;  margin: 0 auto; position: relative;top: 0;left: 0; display: flex; flex-direction:column; }

.skn__page .skn__difference-bkgd { width: 100%; display: block; }

.skn__page .skn__difference-body { position: relative; top:0; }
.skn__page .skn__difference-content { width: 92%; max-width: 508px; margin: 0 auto; padding-top: 32px; padding-bottom:40px; text-align: center; } 

.skn__page .skn__difference-title { padding-bottom: 32px;  }
.skn__page .skn__difference-text {  }
.skn__page .skn__difference-subtitle { text-transform: uppercase; color: #B26323;font-family: var(--GOTHAM-MEDIUM);  padding-bottom: 24px;  }

.skn__page .skn__difference-items { display: flex; flex-direction:row; }
.skn__page .skn__difference-item-title { text-transform: uppercase; font-size: 16px; line-height: 1.45em; font-family: var(--GOTHAM-MEDIUM); color: #79362B; text-align: center; padding-bottom: 24px; }
    
.skn__page .skn__difference-coverage-lists { list-style: none; padding: 0; margin: 0; text-align: center; }
.skn__page .skn__difference-coverage-list { list-style: none; padding-bottom: 16px; }

.skn__page .skn__difference-coverage-line { display: block; }
.skn__page .skn__difference-coverage-dots { display: inline-flex; flex-direction:row; justify-content:center; height: 20px; align-items: center; padding: 0 5px; }
.skn__page .skn__difference-coverage-dot { background: #fff; border-radius: 50%; width: 8px; height: 8px; margin-right: 5px; }
.skn__page .skn__difference-coverage-dot:last-child { margin-right: 0px; }
.skn__page .skn__difference-coverage-dot.skn__active { background: #79362B; }



@media (max-width: 768px) { 

.skn__page .skn__difference { display: flex; flex-direction:column; background: #E5B996; }
.skn__page .skn__difference-item { width: 48%; }
.skn__page .skn__difference-item:first-child { margin-right: 2%; }
.skn__page .skn__difference-item:last-child { margin-left: 2%; }


}

@media (min-width: 769px) { 

.skn__page .skn__difference { height: 630px; }

.skn__page .skn__difference-bkgd { position: absolute; top:0; left:calc(50% - 1100px); width: 2200px; height: 100%; }
.skn__page .skn__difference-picture { width: 100%;  height: 100%; }
.skn__page .skn__difference-img { height: 100%; object-fit:cover;  }

.skn__page .skn__difference-body { left:calc(50% - 32px); width:50vw; height:100%; display:flex; flex-direction:row; align-items:center; } 
.skn__page .skn__difference-content {width: 100%; max-width: 616px; text-align: left; margin: 0;  padding: 0; } 

.skn__page .skn__difference-title { padding-bottom: 24px;  }

.skn__page .skn__difference-items { width: 100%;  }
.skn__page .skn__difference-item { width: 100%; }
.skn__page .skn__difference-item:first-child { margin-right: 24px; }

.skn__page .skn__difference-item-title { text-align: left; }
.skn__page .skn__difference-coverage-lists { text-align: left; }

.skn__page .skn__difference-coverage-line { display: inline-block; }

}

@media (min-width: 1112px) { 
    .skn__page .skn__difference-body { left:calc(50%); } 
    .skn__page .skn__difference-bocontentdy { padding: 0; }
}



/*   lists    */

.skn__page .skn__bloc-foundations { background: #FBF6F3; }

.skn__page .skn__lists { width:100%; margin: 0 auto; max-width:1264px; padding-top: 48px; padding-bottom: 48px; }
.skn__page .skn__lists-title { font-size: 16px; line-height: 1.45em; text-align: center; color:#B16127; letter-spacing:0.01em; text-transform: uppercase; padding-bottom: 10px; border-bottom: solid 1px #B16127; text-align: center; width: 92%; margin: 0 auto;  }
.skn__page .skn__lists-category { color: #C48C6B; font-size: 24px; list-style: 1.25em; font-family: var(--GOTHAM-MEDIUM); padding-top: 32px; padding-bottom: 32px; text-transform: uppercase; text-align: center; }

.skn__page .skn__lists-groups { display: flex; flex-direction:column; }
.skn__page .skn__lists-group { width: 100%; }

.skn__page.has-grid-support .skn__lists-products { display: grid; grid-template-columns:1fr 1fr; grid-gap:0; }
.skn__page.has-grid-support .skn__lists-product { width: auto; margin-right: 0; }

.skn__page .skn__lists-product  { position: relative; top:0; left:0; border-bottom:1px solid #cfcac9; }

 .skn__page .skn__lists-product:nth-of-type(1),
 .skn__page .skn__lists-product:nth-of-type(2) { border-top:1px solid #cfcac9; }

 .skn__page .skn__lists-product { border-left:1px solid #cfcac9; }
.skn__page .skn__lists-product:nth-of-type(2n+1) { border-left:none; }
 .skn__page .skn__lists-product:nth-of-type(2n+1)::after { content:""; display:block; width:1px; height:100%; background:#cfcac9; position:absolute; left:100%; top:0; }
 .skn__page .skn__lists-product:nth-of-type(2n) { border-right:none; }

.skn__page:not(.has-grid-support) .skn__lists-products { display: flex; flex-wrap:wrap; }
.skn__page:not(.has-grid-support) .skn__lists-product { width: 50%; }

.skn__page .skn__lists-product-tile  { position: relative; top:0; left:0; background: #fff; }

.skn__page .skn__lists-product-category { background:#FFF1E9; min-height: 32px; display: flex; justify-content:center; align-items:center; border-bottom: solid 1px #cfcac9; }
.skn__page .skn__lists-product-category-text { font-size: 11px; list-style: 1em; font-family: var(--GOTHAM-MEDIUM);  color:#B26323; text-transform: uppercase; }

.skn__page .product-tile { max-width: unset; margin-right: 0; margin-left: 0; border: none; }
.skn__page .product-tile .product-image img { display:block; }

@media(min-width:769px) {

  .skn__page .skn__lists { width: calc(100% - 80px); max-width: 1264px; padding-top: 64px; padding-bottom: 64px; }

.skn__page .skn__lists-groups { display: flex; flex-direction:row; }
.skn__page .skn__lists-group:first-child { margin-right: 52px; }

  .skn__page.has-grid-support .skn__lists-products { grid-template-columns:1fr 1fr 1fr;  grid-gap:32px; }
  .skn__page.has-grid-support .skn__lists-groups .skn__lists-products { grid-template-columns:1fr 1fr ; }

  .skn__page:not(.has-grid-support) .skn__lists-product { width: calc( 33.3333% - 32px); margin-right: 32px; margin-bottom: 32px; }
  .skn__page .skn__lists-product { border: 1px solid #ccc !important; }
  .skn__page .skn__lists-product::after { display: none; }

  .skn__page .skn__lists-title { width: 100% }
  .skn__page .skn__lists-category { font-size: 24px; list-style: 1.25em; padding-top: 52px;  padding-bottom: 52px; text-align: left; }

  .skn__page .skn__lists-text { text-align: left; padding-bottom: 52px; width: 100%; }

}

@media(min-width:1024px) {

  .skn__page.has-grid-support .skn__lists-products { grid-template-columns:1fr 1fr 1fr 1fr; grid-gap:32px; }
  .skn__page:not(.has-grid-support) .skn__lists-product { width: calc( 25% - 32px); }

  .skn__page.has-grid-support .skn__lists-groups .skn__lists-products { grid-template-columns:1fr 1fr ; }

    .skn__page .skn__lists-category { font-size: 28px; line-height: 1.25em; }

}



/*   sets    */


.skn__page .skn__sets { width: 100%; margin: 0 auto; padding-top: 48px; }
.skn__page .skn__sets-title { text-align: center; color:#9B390F; font-family: var(--CLARINS-FONT); padding-bottom:10px; text-align: center; width: 90%; margin: 0 auto; }

.skn__page .skn__sets-products { position: relative;top: 0;left: 0; width: 100%; margin: 0 auto; }
.skn__page .skn__sets-product { width: 66vw; border:1px solid #cfcac9;  }

.skn__page .skn__sets-body .swiper-pagination { display: block; }


@media (min-width: 769px) { 

    .skn__page .skn__sets { width: calc(100% - 80px); max-width: 1264px; margin: 0 auto; padding-top: 48px; }

    .skn__page .skn__sets-products { width: 100%; }
    .skn__page .skn__sets-product:last-child { margin-right: 0 !important; }    
    .skn__page .skn__sets-title { padding-bottom:52px; width: 90%; margin: 0 auto; }
    .skn__page .skn__sets-product { padding: 0; }
  
}

@media (min-width: 1024px) { 

.skn__page .skn__sets-body .swiper-pagination { display: none; }

}


/*   film    */

.skn__page .skn__bloc-film { background:  #FFECE0; }
.skn__page .skn__film { position: relative; width: 100%; max-width:1048px; margin: 0 auto; padding: 40px 0; }

.skn__page .skn__film-container { position: relative; width: 100%; margin: 0 auto; z-index: 1; }

.skn__page .skn__film-content {cursor: pointer;position: relative;top: 0;left: 0;width: 100%;display: block; }

.skn__page .skn__film-img {width: 100%;height: 100%;display: block;object-fit: cover; }
.skn__page .skn__film-play {position: absolute;top: calc(50% - 26px);left: calc(50% - 26px);width: 52px;}

.skn__page .skn__film-youtube,
.skn__page .skn__film-vimeo { position: absolute;top: 0;left: 0;width: 100%;display: none;height: 100%; }

.skn__page .skn__film-youtube iframe,
.skn__page .skn__film-vimeo iframe { width: 100%;display: block; height: 100%; }

.skn__page .skn__film-video.skn__playing .skn__film-youtube,
.skn__page .skn__film-video.skn__playing .skn__film-vimeo { display: block;}
.skn__page .skn__film-video.skn__playing .skn__film-content { opacity: 0; }

.skn__page .skn__film-title { text-align: center; padding-bottom: 16px;  }
.skn__page .skn__film-text { text-align: center; padding-bottom: 32px;  }

.skn__page .skn__film-cta { text-align: center; padding-top: 32px;  }


@media (max-width: 768px) { 

    

    .skn__page .skn__film-title { width: 92%; margin: 0 auto;  }
    .skn__page .skn__film-text { width: 92%; margin: 0 auto; }


}


@media (min-width: 769px) { 

    .skn__page .skn__film { width: 92%; padding: 80px 0; }

}




/*  faq */

.skn__page .skn__bloc-faq { padding: 24px 0 0 0; }
.skn__page .skn__faq-title { font-size: 40px; line-height: 1.2em; font-family: var(--CLARINS-FONT); text-align: center; max-width: 375px; margin: 0 auto; padding-bottom: 20px; }
.skn__page .skn__faq-text { font-size: 16px; line-height: 1.42em;  text-align: center; max-width: 260px; margin: 0 auto; padding-bottom: 30px; }
    
.skn__page .skn__faq-items {
  width: calc(100% - 40px);
  max-width: 832px;
  height: auto;
  display: block;
  vertical-align: top;
  margin: 0 auto;
  border-top: solid 1px #333;
}
.skn__page .skn__faq-item {
  height: 40px;
  display: block;
  transition: height ease-in-out 0.5s;
  overflow: hidden;
  border-bottom: 1px solid #D3CCC8;
}
.skn__page .skn__faq-item-handler:after {
  content: "";
  width: 20px;
  height: 40px;
  background: url(../common/arrow-down-grey-icon.svg) center center no-repeat; background-size:100% auto; 
  transform:rotate(0deg); transition:transform 0.3s; 
  position: absolute;
  right: 0px;
  top: 10px;
  cursor: pointer;
 }


.skn__page .skn__faq-item[data-open="1"] .skn__faq-item-handler:after {  transform:rotate(180deg); }

.skn__page .skn__faq-item-handler {
  text-align: left;
  font-weight: normal;
  font-size: 14px;
  line-height: 1.42em;
  padding: 16px 35px 16px 0; 
  position: relative;
  box-sizing: border-box;
  cursor: pointer;
}

.skn__page .skn__faq-item-answer {
  font-size: 14px;
  display: block;
  padding-top: 20px;
  padding-bottom: 20px;
  box-sizing: border-box;
  text-align: left;
}

.skn__page .skn__faq-item-link { text-decoration: underline; }
.skn__page .skn__faq-item-link:hover { text-decoration: none; }


@media (min-width: 768px) { 

    .skn__page .skn__bloc-faq { padding-top: 64px; }
    .skn__page .skn__faq-item-handler {   padding: 18px 45px 18px 0; }

  .skn__page .skn__faq-title { max-width: unset; }
  .skn__page .skn__faq-text { font-size: 14px; line-height: 1.42em; text-align: center; padding-bottom: 40px; max-width: unset; }

}



/*  services */

.skn__page .skn__bloc-services { background: #fff; padding: 80px 0;  }

.skn__page .skn__services-wrapper { width: calc(100% - 80px); max-width: 1264px; margin: 0 auto; }

.skn__page .skn__services-title { font-family: var(--CLARINS-FONT); text-align: center; padding-bottom: 37px; }

.skn__page .skn__services { display: flex; justify-content:center; }

.skn__page .skn__service { width: 294px; border: 1px solid #CFCAC9; }
.skn__page .skn__service-media { width: 100%; }
.skn__page .skn__service-media a { width: 100%; display: block; }

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

.skn__page .skn__service-link { position: absolute; bottom: 15px; left:15px; }


@media (max-width: 1024px) { 

  .skn__page .skn__services-wrapper { width: 100%; }
  .skn__page .skn__service {border-right:none; }
 
}


@media (max-width: 768px) { 

    .skn__page .skn__bloc-services { padding-top: 64px; padding-bottom: 0;  }

    .skn__page .skn__service { width: calc(50%); margin: 0;  border-right:none; }
    .skn__page .skn__service:first-child { width: calc(50% - 1px); border-left:none;}

.skn__page .skn__service:last-child { width: calc(50%); border-right:none; }

    .skn__page .skn__services-title { width: 80%; margin: 0 auto; }
}


/*   Routine    */

.skn__page .skn__bloc-routine { overflow:hidden; padding-top:50px; padding-bottom: 48px; text-align: center; background: linear-gradient(8.34deg, #FFF7EF 9.05%, #FFE7D0 55.06%, #FFDAB6 84.56%); }

.skn__page .skn__bloc-routine .skn__container {width: 100%; }

.skn__page .skn__routine { position: relative; top:0; left:0; --slideWidth:225px; }
.skn__page .skn__routine-halo { position: absolute; width: 1500px; height: 1500px; left: calc(50% - 750px); top: calc(50% - 750px); background: radial-gradient(closest-side, rgb(255, 255, 255) 60%, rgba(255,255,255,0) 100%); opacity: 0.9; filter: blur(92px);  }
.skn__page .skn__routine-body { position: relative; top:0; left:0; }
.skn__page .skn__routine-title { padding-bottom:50px; text-align: center; font-size: 40px; line-height: 1.2em; width: 92%; margin: 0 auto; }

.skn__page .skn__routine-products { position: relative; top: 0; left: 0;width: 100%; margin: 0 auto; max-width: calc( var(--slideWidth) * 3); }
.skn__page .skn__routine-products .swiper-container { overflow: unset; }
.skn__page .skn__routine-product-media { position:absolute; display: flex; align-items: flex-start; margin: 0 auto; }
.skn__page .skn__routine-product[data-item="1"] .skn__routine-product-media { width: 200px; transform: translateX(27%); left:calc(50% - 100px);}
.skn__page .skn__routine-product[data-item="2"] .skn__routine-product-media { width: 256px; transform: translateX(29%); left:calc(50% - 128px);}
.skn__page .skn__routine-product[data-item="3"] .skn__routine-product-media { width: 196px; padding-top: 112px; transform: translateX(12%); left:calc(50% - 98px);}
.skn__page .skn__routine-product-number { color: #F5D3AE; font-size: 100px; line-height: 145px; position: absolute; font-family: var(--GOTHAM-EXTRALIGHT); }
.skn__page .skn__routine-product[data-item="1"] .skn__routine-product-number { left:calc(50% - 80px); top:42px; }
.skn__page .skn__routine-product[data-item="2"] .skn__routine-product-number { left:calc(50% - 99px); top:146px; }
.skn__page .skn__routine-product[data-item="3"] .skn__routine-product-number { left:calc(50% - 95px); top:90px; }
.skn__page .skn__routine-product-content { text-align: center; padding-top: 327px; width: var(--slideWidth); }
.skn__page .skn__routine-product-variant { font-size: 10px; line-height: 12px; text-decoration: underline;  text-transform: uppercase; min-height: 30px;display: inline-flex;align-items: center;}
.skn__page .skn__routine-product-variant:hover { text-decoration: none;  }
.skn__page .skn__routine-product-picto { width: 32px; margin: 0 auto; }
.skn__page .skn__routine-product-title { color:var(--COLOR-PAGE); font-size: 16px; line-height: 1.45em; padding-top: 6px; padding-bottom: 8px; font-family: var(--GOTHAM-MEDIUM); }
.skn__page .skn__routine-product-text { font-size: 14px; line-height: 1.45em; min-height: calc(3em + 8px); padding-bottom: 8px; }
.skn__page .skn__routine-product-price { font-size: 14px; line-height: 1.45em; font-family: var(--GOTHAM-MEDIUM); padding-bottom: 8px; }
.skn__page .skn__routine-product-priceperunit { font-size: 9px; line-height: 1.45em; min-height: 1.45em; color: #797674;}

.skn__page .skn__routine-cta { padding-top: 40px; }



@media (max-width: 768px) { 

    .skn__page .skn__bloc-routine {  padding-top:28px; padding-bottom: 18px; background: linear-gradient(0deg, #FFE7D0, #FFE7D0),
        linear-gradient(0deg, #FFE7E7, #FFE7E7),
        linear-gradient(8.34deg, #FFF7EF 9.05%, #FFE7D0 55.06%, #FFDAB6 84.56%);
    }

    .skn__page .skn__routine { --slideWidth:55vw; }

    .skn__page .skn__bloc-routine .skn__container { width: 100%; }

    .skn__page .skn__routine-title { font-size: 35px; line-height: 1.2em; padding-bottom:32px; }

    .skn__page .skn__routine-products { display: block; width: 100%; }
    .skn__page .skn__routine-product { padding: 0; }

    .skn__page .skn__routine-product-content { opacity: 0; transition:opacity 0.3s; }
    .skn__page .skn__routine-product.swiper-slide-active .skn__routine-product-content { opacity: 1; }


/*
.skn__page .skn__routine-product-media { height: 245px; }
.skn__page .skn__routine-product[data-item="1"] .skn__routine-product-media { width: 145px; }
.skn__page .skn__routine-product[data-item="2"] .skn__routine-product-media { width: 161px; }
.skn__page .skn__routine-product[data-item="3"] .skn__routine-product-media { width: 196px; height: 222px; transform: translateX(30%); }
*/

}

@media (max-width: 373px) { 

    .skn__page .skn__routine { --slideWidth:65vw; }

}





/*  legendes */

.skn__page .skn__bloc-legendes {  }

.skn__page .skn__legendes { width: 92%;  max-width: 1264px; margin: 0 auto; text-align: left;  }
.skn__page .skn__legende { font-size: 10px; line-height: 1.45em; }


@media (min-width: 768px) { 

    .skn__page .skn__legende { text-align: left; }

}





/*    Swiper    */

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

.skn__page .swiper-container-initialized { opacity: 1; }

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

.skn__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;
}

.skn__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;
}
.skn__page .swiper-container-android .swiper-slide,
.skn__page .swiper-wrapper {
   -webkit-transform: translate3d(0px, 0, 0);
   transform: translate3d(0px, 0, 0);
}
.skn__page .swiper-container-multirow > .swiper-wrapper {
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}
.skn__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;
}
.skn__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;
}

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

.skn__page .swiper-slide-invisible-blank {
   visibility: hidden;
}
/* Auto Height */
.skn__page .swiper-container-autoheight,
.skn__page .swiper-container-autoheight .swiper-slide {
   height: auto;
}
.skn__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 */
.skn__page .swiper-container-wp8-horizontal,
.skn__page .swiper-container-wp8-horizontal > .swiper-wrapper {
   -ms-touch-action: pan-y;
   touch-action: pan-y;
}
.skn__page .swiper-container-wp8-vertical,
.skn__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
}

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

.skn__page .swiper-button:focus {  outline: none; }

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

.skn__page .swiper-button-lock {
 display: none;
}

.skn__page .swiper-pagination {
   position: relative; 
   top:0; 
   left:50%;
   transform:translateX(-50%);
   text-align: center;
   padding: 25px 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;
}


/*
.skn__page .swiper-wrapper {
    justify-content: center;
}

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

.skn__page .swiper-wrapper {
    justify-content: unset;
}
}

*/


.skn__page .skn__anchor-items-wrapper .swiper-wrapper { align-items: center; }
.skn__page .skn__sets-products .swiper-wrapper { justify-content: center; }

.skn__page .skn__anchor-items-wrapper .swiper-button-prev,
.skn__page .skn__anchor-items-wrapper .swiper-container-rtl .swiper-button-next,
html[dir="rtl"] .skn__anchor-items-wrapper .swiper-button-next { top: 100px; }

.skn__page .skn__anchor-items-wrapper .swiper-button-next,
.skn__page .skn__anchor-items-wrapper .swiper-container-rtl .swiper-button-prev,
html[dir="rtl"] .skn__anchor-items-wrapper .swiper-button-prev { top: 100px; }


.skn__page .skn__testimonies-wrapper .swiper-pagination { display: none; }
.skn__page .skn__services-wrapper .swiper-pagination { display: none; }

.skn__page .swiper-pagination-bullet:after { background: #D17285; }
.skn__page .swiper-pagination-bullet-active:after { background: #B40024; }


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

.skn__page .skn__services-wrapper .swiper-pagination { display: block; }

}


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

.skn__page .swiper-pagination { padding: 40px 0; }

.skn__page .skn__sets-products .swiper-wrapper { justify-content: unset; }

.skn__page .skn__testimonies-wrapper .swiper-button { display: none; }
.skn__page .skn__testimonies-wrapper .swiper-pagination { display: block; }
.skn__page .skn__services-wrapper .swiper-pagination { display: block; }

.skn__page .skn__anchor-items-wrapper .swiper-button { display: none; }

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

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

}






/*  ---   Popin   --- */
/*  ---   v0.4   --- */

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

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

.skn__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) {
   .skn__page .popin__content-wrapper { --popin_height:100dvh; --popin_top:90px }
/*
 .skn__page .popin__content-title { color:#FF3300; }
 */
}

.skn__page .popin__content-overlay { background: #000; opacity: 0; position: absolute; top:0;left:0;  width: 100%; height: 100%; display: block; transition:opacity 0.2s ease-out;  transition-delay:0.2s;  }
.skn__page .popin__content-wrapper[data-open="1"]  .popin__content-overlay { transition-delay:0s; opacity: 0.5; }

.skn__page .popin__content { position: absolute; bottom:calc(100vh - popin_height); left:50%; display: flex; align-items:flex-end; justify-content:center; transform:translate(-50%, 100%); }

.skn__page .popin__content-body { background: #fff; border-radius: 8px; max-height: calc(var(--popin_height) - var(--popin_top)); text-rendering: optimizeLegibility; overflow: hidden; }
.skn__page .popin__content-content { max-height: calc(var(--popin_height) - var(--popin_top)); overflow: hidden; }
.skn__page .popin__content-wrapper[data-scrollable="1"] .popin__content-content {  overflow-x: hidden; overflow-y:scroll; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }

.skn__page .popin__content-closer { cursor: pointer; position: absolute; top:10px; right: 10px; z-index:1; width: 24px; height: 24px; background: transparent; }
.skn__page .popin__content-closer-white path { fill:#fff; }

/*
.skn__page .popin__content-title { padding-top: 15px;  padding-bottom: 15px; font-size: 28px; line-height: 1.375em; }
.skn__page .popin__content-text { padding-bottom: 30px; font-size: 14px; line-height: 1.375em; }
*/

.skn__page .popin__content-wrapper[data-open="1"] { height: calc( var(--popin_height) + 1px); }


.skn__page .popin__content { width:100%; max-width:1048px; transition:transform 0.25s ease-out; }
.skn__page .popin__content-wrapper[data-open="1"] .popin__content {  transform:translate(-50%, 0); top:auto; bottom:0; left:50%; }

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

.skn__page .popin__content-handler { border-bottom: solid 1px #ccc; height: 40px; position: relative; top:0; left:0; }
.skn__page .popin__content-closer-white path { fill:#000; }

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


@media (min-width:768px){

    .skn__page .popin__content-wrapper[data-style="center"]  .popin__content,
    .skn__page .popin__content-wrapper[data-style="center"][data-open="1"]  .popin__content { transition:unset; }

    .skn__page .popin__content-wrapper[data-style="center"][data-open="1"] .popin__content { top: 50%; bottom: auto; transform:translate(-50%, -50%); }

    .skn__page .popin__content-wrapper[data-style="center"] .popin__content-body { border-radius: 8px; }
    .skn__page .popin__content-wrapper[data-style="center"] .popin__content-content { max-height: calc(var(--popin_height) - var(--popin_top)); }

    .skn__page .popin__content-wrapper[data-style="center"] .popin__content-handler { height: 0; border: unset; }
    
}