/*  ------  fonts   ------  */

@font-face {
    font-family: 'Singulier Bold';
    src: url('fonts/Singulier-Bold.woff2') format('woff2'),
        url('fonts/Singulier-Bold.woff') format('woff'),
        url('fonts/Singulier-Bold.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Singulier Medium';
    src: url('fonts/Singulier-Demi.woff2') format('woff2'),
        url('fonts/Singulier-Demi.woff') format('woff'),
        url('fonts/Singulier-Demi.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Singulier';
    src: url('fonts/Singulier-Regular.woff2') format('woff2'),
        url('fonts/Singulier-Regular.woff') format('woff'),
        url('fonts/Singulier-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}


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

.ysl__page {
    --YSL-FT-NORMAL: "Singulier", Helvetica, Arial, sans-serif;
    --YSL-FT-MEDIUM: "Singulier Medium", Helvetica, Arial, sans-serif;
    --YSL-FT-BOLD: "Singulier Bold", Helvetica, Arial, sans-serif;
    --YSL-HEIGHT:100vh;
    --YSL-WIDTH:100vw;
            --YSL-TOP:0;
            --YSL-PRODUCT-TOP:100px; 
}



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

.ysl__page {
    font-family: var(--YSL-FT-NORMAL);
    font-weight: normal;
    color: #000;
    background: #fff;
    position: relative;
    width: 100%;
    max-width: 945px;
    margin: 0 auto;
    overflow: hidden; 
    opacity: 1; 
    min-height: 100vh;

}
.ysl__page.ysl__visible { opacity: 1; }

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

.ysl__page h1,
.ysl__page h2,
.ysl__page h3 {
    margin: 0;
    padding: 0;
    font-family: var(--FT-SINGULIER);
    font-weight: normal;
}

.ysl__page ul,
.ysl__page li { list-style:none; margin: 0; padding: 0; }
.ysl__page p { margin: 0; padding: 0; }
.ysl__page picture { display: block; width: 100%; }
.ysl__page img { width: 100%; display: block; }
.ysl__page a { color: #000; text-decoration: none; }
.ysl__page sup { position: relative; top: 0.05em; font-size: 0.6em; line-height:0; padding-left: 1px; }

.ysl__page .ysl__bloc { position: relative; top:0; left:0;  }

.ysl__page .ysl__body { position: relative; top:0; left:0; }
.ysl__page .ysl__content { text-align: center; position: relative; }

.ysl__page .ysl__bloc { position:relative;  width: 100%; }
.ysl__page .ysl__body { position:relative; width: 100%; }
.ysl__page .ysl__content { text-align: center; position:relative; left:0; top:0;  }

.ysl__page .ysl__title  { font-size: 30px; line-height: 1.1em;  font-family: var(--YSL-FT-BOLD); text-transform: uppercase; text-align: center; padding-bottom: 30px; }
.ysl__page .ysl__text  { font-size: 16px; line-height: 1.25em; }
.ysl__page .ysl__legend  { font-size: 12px; line-height: 1.25em; }

.ysl__page .ysl__text-title  { display:block; font-size: 42px; line-height: 1em;  text-transform: uppercase; font-family: var(--YSL-FT-BOLD);   }
.ysl__page .ysl__text-subtitle  { display:block; text-transform: uppercase; }
.ysl__page .ysl__text-desc  { display:block; font-size: 20px; line-height: 26px; }
.ysl__page .ysl__text-legend  { display:block; font-size: 14px; line-height: 14px; }

.ysl__page .ysl__font-medium  {  font-family: var(--YSL-FT-MEDIUM); }

.ysl__page .ysl__nowrap { white-space: nowrap; }

.ysl__page br.ysl__desktop { display: block; }
.ysl__page br.ysl__mobile { display: none; }


@media(min-width: 768px) {

.ysl__page .ysl__title  { font-size: 40px; line-height: 1em;  padding-bottom: 50px; }
.ysl__page .ysl__text { font-size: 20px; line-height: 1.45em; }
.ysl__page .ysl__legend  { font-size: 14px; line-height: 1.25em; }


}



/* --- CTA  ---- */

.ysl__page .ysl__cta-btn { display: flex; align-items:center; justify-content:center; background: #fff;  border: solid 1px #000;  width:90%; min-height: 42px; cursor: pointer; margin: 0 auto; }
.ysl__page .ysl__cta-text { color: #000; text-transform: uppercase; padding: 0 15px 4px 15px;  font-size: 20px; line-height: 1em; letter-spacing:0.02em; display: block; font-family: var(--YSL-FT-MEDIUM); }

@media(min-width: 768px) {
    
    .ysl__page .ysl__cta-btn { width:90%; min-width:212px; display: inline-flex; transition:background 0.3s; margin: 0; }
    .ysl__page .ysl__cta-btn:hover { background: #000; }
    .ysl__page .ysl__cta-text {  color: #000; transition:color 0.3s;  }
    .ysl__page .ysl__cta-btn:hover .ysl__cta-text { color: #fff; }

}

@media(min-width: 1024px) {
    
    .ysl__page .ysl__cta-btn { width:auto; min-width:auto; }
  

}



/* --- second  ---- */

.ysl__page .ysl__bloc-second { padding-bottom:  20px; }
.ysl__page .ysl__bloc-second .ysl__bloc-top { padding-top: 30px; padding-bottom: 40px; }
.ysl__page .ysl__bloc-second .ysl__logo-img { width: 66%; max-width: 542px; margin: 0 auto;  }


@media(min-width: 768px) {

    .ysl__page .ysl__bloc-second { padding-bottom:  70px; }

}







/* --- Items  ---- */

.ysl__page .ysl__items { display: flex; flex-direction:column; width: 100%; max-width:1048px; justify-content:center; margin: 0 auto; }

.ysl__page .ysl__item { display: flex; flex-direction:column; align-items:center; }
.ysl__page .ysl__item-media { width: 75%; margin: 0 auto; }
.ysl__page .ysl__item-body { width: 90%; margin: 0 auto;  max-width: 500px; }
 .ysl__page .ysl__item-content  { padding-top: 30px;  padding-bottom: 30px; }
.ysl__page .ysl__item-title { font-size: 26px; line-height: 1em; text-align: center; padding-bottom: 24px; }
.ysl__page .ysl__item-text { font-size: 16px; line-height: 1.3em; text-align: center; }
.ysl__page .ysl__item-lists { padding-top: 14px; text-align: center;  } 
.ysl__page .ysl__item-list { position: relative; font-size: 18px; line-height: 1.3em; padding-bottom: 14px; }
.ysl__page .ysl__item-list:last-child { padding-bottom: 0; }

.ysl__page .ysl__item-picto { display: inline-block; width: 22px; transform: translateY(4px); }
.ysl__page .ysl__item-picto-img { width: 100%; display: block; }

.ysl__page .ysl__item-cta { padding-top: 30px;  width: 75%;  margin: 0 auto; }
.ysl__page .ysl__item-legend  { padding-top: 30px; text-align: center;  }

@media(min-width: 768px) {

    .ysl__page .ysl__item {  flex-direction:row; align-items:flex-start;  width: 100%; }

    .ysl__page .ysl__item:nth-child(2n) {  flex-direction:row-reverse; }
    .ysl__page .ysl__item-media  { width: 50%; margin: 0; }
    .ysl__page .ysl__item-body  { width: 50%; max-width:unset; padding-left: 4.77vw; padding-right: 1.9vw; margin: 0;  }

    .ysl__page .ysl__item-content  { padding-top: 10px;  padding-bottom: 30px; }

    .ysl__page .ysl__item-picto { position: absolute; top: 0; left: 0; width: 25px; }

    .ysl__page .ysl__item-title { text-align: left;  font-size: 28px; line-height: 1em; padding-bottom: 24px;  }
   
    .ysl__page .ysl__item-text {  text-align: left; font-size: 18px; line-height: 1.3em;  }
    
    .ysl__page .ysl__item-lists { text-align: left;  }
    .ysl__page .ysl__item-list { padding-left: 34px;  font-size: 18px; line-height: 1.3em; }
    
    .ysl__page .ysl__item-cta { width: auto;  margin: 0; }
    .ysl__page .ysl__item-legend  { text-align: left;  }

}

@media(min-width: 900px) {

    .ysl__page .ysl__item {  align-items:center; }
    .ysl__page .ysl__item-body { padding-left: 4.23vw; padding-right: 1.58vw; }
    .ysl__page .ysl__item-content {  padding-bottom: 10px; }

}

@media(min-width: 945px) {

    .ysl__page .ysl__item-body { padding-left: 40px; padding-right: 15px; }
    .ysl__page .ysl__item-content  { padding-top: 0;  padding-bottom: 0; }

}



/* --- shades  ---- */

.ysl__page .ysl__bloc-third { padding-bottom: 50px; }
.ysl__page .ysl__title-third { padding-left:15px; padding-right:15px; }

.ysl__page .ysl__shades { --ratioShades:calc(100vw / 508); --ratioRange:calc(1080 / 1563); display: flex;  flex-direction:column; }

.ysl__page .ysl__shades-range { width: 100%; position: relative; top:0; left:0; }
.ysl__page .ysl__shades-range-media { position: relative; top:0; left:0; }
.ysl__page .ysl__shades-range-picture { width: 100%; display: block; }
.ysl__page .ysl__shades-range-img { width: 100%; display: block; }

.ysl__page .ysl__shades-range-content { position: absolute; top:0; left:0; width: 100%; text-align: center; }
.ysl__page .ysl__shades-range-text { font-size: 14px; line-height: 1.25em; letter-spacing: 0.05em; padding-top: 32px; display: block; position: relative; top:0; left:0; }
.ysl__page .ysl__shades-range-text::after { content:"";  position: absolute; left:calc(50% - 7px); bottom:-20px; background: url(images/arrow.svg) left top no-repeat; background-size: 100% auto; width: 14px; height: 10px; display: block; transform:rotate(180deg); }

.ysl__page .ysl__shades-packshot { position: relative; width: 100%;  display: flex; align-items:center; justify-content:center; }

.ysl__page .ysl__shades-packshot-body {width: 100%; }


.ysl__page .ysl__shades-packshot-tile { position: relative;  top:0; left:0;  display: flex; align-items:center; flex-direction:column; display: none; width: 100%;  }
.ysl__page .ysl__shades-packshot-tile[data-visible="1"] { display: block; }

.ysl__page .ysl__shades-packshot-tile.ysl__visible .ysl__shades-packshot-texture {   }
.ysl__page .ysl__shades-packshot-tile.ysl__visible .ysl__shades-packshot-product { animation:ysl_flash 0.2s ease-out; animation-iteration-count: 1;  }

@keyframes ysl_flash {
  0% {filter: brightness(0.95); }
   50% {filter: brightness(1.05); }
   100% { filter: brightness(1); } 
}


.ysl__page .ysl__shades-packshot-inside { display: flex; flex-direction:row-reverse; align-items:center; padding-bottom: 20px; padding-top: 20px;  position: relative; top:0; left:0; width: 100%; }

.ysl__page .ysl__shades-packshot-media { position: relative; top:0; left:0; width: 40vw; margin-left: 5vw; }
.ysl__page .ysl__shades-packshot-content { width: 55vw; text-align: left; }

.ysl__page .ysl__shades-packshot-tuile { position: relative; top:0; left:0; width: 100%; }

.ysl__page .ysl__shades-packshot-product { position: relative; top:0; left:0; width: 100%;  }
.ysl__page .ysl__shades-packshot-texture { position: absolute; top:15%; left:35%; width: 60%;  }
.ysl__page .ysl__shades-packshot-picture { width: 100%; display: block; }
.ysl__page .ysl__shades-packshot-img { width: 100%; display: block; }

.ysl__page .ysl__shades-packshot-title { font-size: 24px; line-height: 1.25em;  text-transform: uppercase; font-family: var(--YSL-FT-MEDIUM); }
.ysl__page .ysl__shades-packshot-shade { font-size: 14px; line-height: 1.25em;  }
.ysl__page .ysl__shades-packshot-name { font-size: 14px; line-height: 1.25em;  }

.ysl__page .ysl__shades-packshot-cta { position: relative; top:0; left:0; width: 70vw; margin: 0 auto; padding-bottom: 40px; text-align: center; display: flex; align-items:center; flex-direction:column; }
.ysl__page .ysl__shades-packshot-btn { margin-bottom: 16px; min-width:272px; }
.ysl__page .ysl__shades-packshot-btn:last-child { margin-bottom: 0; }
.ysl__page .ysl__shades-packshot-btn-black { background:#000; }
.ysl__page .ysl__shades-packshot-btn-black span { color:#fff; }

.ysl__page .ysl__shades-images { position: relative; top:0; left:0; width: 100%; }
.ysl__page .ysl__shades-images-bkgd { width: 100%; height:100%; display: block; position: absolute; top:0; left:0; object-fit:cover;}
.ysl__page .ysl__shades-images-slides { width: 100%; height: 100%; display: flex; align-items:center; padding-top:24px; padding-bottom:44px;  position: relative; }
.ysl__page .ysl__shades-images-slider { width: 45%; display: block; position: relative; top:0; left:0; overflow: hidden; margin: 0 auto; border: solid 10px #fff; }
.ysl__page .ysl__shades-images-slide { width: 100%; display: block; }
.ysl__page .ysl__shades-images-picture { width: 100%; display: block; }
.ysl__page .ysl__shades-images-img { width: 100%; display: block; }

.ysl__page .ysl__shades-range-actions { position: absolute; top:calc(109 * var(--ratioShades)); left:0; }
.ysl__page .ysl__shades-range-item { position: absolute; top:0; left:0; /*background: rgba(0,0,0,0.3);*/ cursor: pointer; width: calc(50 * var(--ratioShades)); height: calc(65 * var(--ratioShades)); display: block; }
.ysl__page .ysl__shades-range-item[data-shade="1"] { top:calc(138 * var(--ratioShades)); left:calc(31 * var(--ratioShades)); }
.ysl__page .ysl__shades-range-item[data-shade="2"] { top:calc(94 * var(--ratioShades)); left:calc(82 * var(--ratioShades)); }
.ysl__page .ysl__shades-range-item[data-shade="3"] { top:calc(18 * var(--ratioShades)); left:calc(126 * var(--ratioShades)); }
.ysl__page .ysl__shades-range-item[data-shade="4"] { top:calc(238 * var(--ratioShades)); left:calc(59 * var(--ratioShades)); }
.ysl__page .ysl__shades-range-item[data-shade="5"] { top:calc(199 * var(--ratioShades)); left:calc(117 * var(--ratioShades)); }
.ysl__page .ysl__shades-range-item[data-shade="6"] { top:calc(104 * var(--ratioShades)); left:calc(151 * var(--ratioShades)); }
.ysl__page .ysl__shades-range-item[data-shade="7"] { top:calc(22 * var(--ratioShades)); left:calc(188 * var(--ratioShades)); }
.ysl__page .ysl__shades-range-item[data-shade="8"] { top:calc(258 * var(--ratioShades)); left:calc(172 * var(--ratioShades)); }
.ysl__page .ysl__shades-range-item[data-shade="9"] { top:calc(147 * var(--ratioShades)); left:calc(214 * var(--ratioShades)); }
.ysl__page .ysl__shades-range-item[data-shade="10"] { top:calc(76 * var(--ratioShades)); left:calc(242 * var(--ratioShades)); }
.ysl__page .ysl__shades-range-item[data-shade="11"] { top:calc(0 * var(--ratioShades)); left:calc(256 * var(--ratioShades)); }
.ysl__page .ysl__shades-range-item[data-shade="12"] { top:calc(303 * var(--ratioShades)); left:calc(239 * var(--ratioShades)); height: calc(75 * var(--ratioShades));}
.ysl__page .ysl__shades-range-item[data-shade="13"] { top:calc(202 * var(--ratioShades)); left:calc(275 * var(--ratioShades)); height: calc(74 * var(--ratioShades));}
.ysl__page .ysl__shades-range-item[data-shade="14"] { top:calc(113 * var(--ratioShades)); left:calc(298 * var(--ratioShades)); }
.ysl__page .ysl__shades-range-item[data-shade="15"] { top:calc(32 * var(--ratioShades)); left:calc(326 * var(--ratioShades)); }
.ysl__page .ysl__shades-range-item[data-shade="16"] { top:calc(253 * var(--ratioShades)); left:calc(333 * var(--ratioShades)); }
.ysl__page .ysl__shades-range-item[data-shade="17"] { top:calc(166 * var(--ratioShades)); left:calc(380 * var(--ratioShades)); }
.ysl__page .ysl__shades-range-item[data-shade="18"] { top:calc(100 * var(--ratioShades)); left:calc(369 * var(--ratioShades)); }
.ysl__page .ysl__shades-range-item[data-shade="19"] { top:calc(235 * var(--ratioShades)); left:calc(419 * var(--ratioShades)); }
.ysl__page .ysl__shades-range-item[data-shade="20"] { top:calc(115 * var(--ratioShades)); left:calc(433 * var(--ratioShades)); }

.ysl__page .ysl__shades-range-content { position: absolute; }
.ysl__page .ysl__shades-range-text { text-transform: uppercase; }

@media(min-width: 768px) {

.ysl__page .ysl__bloc-third { padding-bottom: 105px; }
.ysl__page .ysl__title-third { padding-bottom: 70px ; }

    .ysl__page .ysl__shades { --ratioBase: calc(945 / 1280); --ratioShades:calc(100vw / 945 * var(--ratioBase));  flex-direction:row; align-stretch; }
.ysl__page .ysl__shades-range { width: 40%; }
.ysl__page .ysl__shades-range-text { font-size: 14px; line-height: 1.25em; letter-spacing: 0.1em; }

.ysl__page .ysl__shades-packshot { width: 30%;   display: flex; align-items:center; justify-content:center; }
.ysl__page .ysl__shades-packshot-inside { display: flex; flex-direction:column; padding-bottom: 0; padding-top: 0; }

.ysl__page .ysl__shades-packshot-media { width:80%; margin: 0 auto; padding-bottom: 20px; }
.ysl__page .ysl__shades-packshot-content { width:100%; text-align: center; padding-bottom: 20px; }
.ysl__page .ysl__shades-packshot-cta { width:100%;  }
 .ysl__page .ysl__shades-packshot-btn { min-width: unset; }
.ysl__page .ysl__shades-packshot-btn-black:hover { background:#fff; }
.ysl__page .ysl__shades-packshot-btn-black:hover .ysl__cta-text { color:#000; }

.ysl__page .ysl__shades-images { width: 30%; }

.ysl__page .ysl__shades-images-slider { width: 86%; }
.ysl__page .ysl__shades-images-slides { height: 100%; padding-top:0; padding-bottom:0; }  

}

@media(min-width: 945px) {
     .ysl__page .ysl__shades { --ratioShades: calc(1px * var(--ratioBase)); } 
    .ysl__page .ysl__shades-packshot-btn { min-width: 242px; width: 242px; }
}





/* --- Compare  ---- */

.ysl__page .ysl__bloc-fourth { padding-bottom: 0; }
.ysl__page .ysl__title-fourth { padding-right:15px; padding-left:15px; }

.ysl__page .ysl__compare { --ratioCompare: calc(75vw / 768); display: flex; flex-direction:column; justify-content:center; padding-bottom: 85px; }

.ysl__page .ysl__compare-item { display: flex; flex-direction:column; justify-content:center; width: 75%; margin: 0 auto; padding-bottom: 45px; }
.ysl__page .ysl__compare-item:last-child { padding-bottom: 0; }

.ysl__page .ysl__compare-item-media { width: 100%; position: relative; top:0; left:0; }
.ysl__page .ysl__compare-packshot-picture { position: absolute; width: 15vw; left: -3vw; bottom: -12vw; }
.ysl__page .ysl__compare-item-content { width: 100%; }
.ysl__page .ysl__compare-item-title { font-size: 24px; line-height: 1em; text-align: center; padding-bottom: 0; margin: 10px 0 5px 0; height: 48px; display: flex; align-items: center; padding-left:17vw; justify-content: flex-start; }
.ysl__page .ysl__compare-item-text {  font-size: 20px; line-height: 1.45em; text-align: center; text-transform: uppercase; padding-top: 14px; }
.ysl__page .ysl__compare-item-legend {  font-size: 14px; line-height: 1.45em; text-align: center; text-transform: uppercase; color:#7f7f7f; }
.ysl__page .ysl__compare-item-cta { padding-top: 24px; display: flex; justify-content: center;  }

.ysl__page .ysl__compare-hearts { padding-top: 6px; padding-bottom: 4px; display: flex; justify-content: center; } 
.ysl__page .ysl__compare-hearts span { display:inline-block; width: 38px; height:38px; margin-right: 3px; }
.ysl__page .ysl__compare-hearts span::last-child { margin-right: 0; }

.ysl__page .ysl__compare-heart { background: url(images/picto-heart.png) left top no-repeat; background-size: 100% auto; }
.ysl__page .ysl__compare-heart-no {  background: url(images/picto-heart-no.png) left top no-repeat; background-size: 100% auto; }


@media(min-width: 420px) {

        .ysl__page .ysl__compare-item-title { padding-left:0; justify-content: center; }

}


@media(min-width: 768px) {

        .ysl__page .ysl__compare { --ratioCompare:calc(100vw / 975); flex-direction:row; width: 100%; max-width: 975px; margin: 0 auto; }
        .ysl__page .ysl__compare-item { width: 100%; margin: 0 25px; padding-bottom: 0; }
        .ysl__page .ysl__compare-item-media { width: 100%; margin: 0 auto; }
        .ysl__page .ysl__compare-packshot-picture { width: calc(98 * var(--ratioCompare)); left:calc((-1) * 14 * var(--ratioCompare)); bottom: calc((-1) * 77 * var(--ratioCompare)); }

        .ysl__page .ysl__compare-item-title { height: 60px; font-size: 30px; line-height: 1em; margin: 20px 0 10px 0;  padding-left:95px; justify-content: flex-start; }
        .ysl__page .ysl__compare-item-text { }

}
 
 @media(min-width: 975px) {

    .ysl__page .ysl__compare { --ratioCompare:1px; }
    .ysl__page .ysl__compare-item-title { padding-left:0; justify-content: center; }
       
}




/* --- Products  ---- */

.ysl__page .ysl__bloc-look { padding-bottom: 105px; }
.ysl__page .ysl__title-look { padding-right:15px; padding-left:15px; padding-bottom: 10px  }

.ysl__page .ysl__products { width: 100%;  }

.ysl__page .ysl__product { display: flex; flex-direction:column; justify-content:center; align-items: center; }

.ysl__page .ysl__product-media { width: 100%; max-width: 220px; margin:0 auto; }
.ysl__page .ysl__product-content { width: 100%; }
.ysl__page .ysl__product-title { font-size: 24px; line-height: 1.2em; text-align: center; padding-top: 2px;  padding-bottom: 28px; display: flex; align-items: center; justify-content: center; }
.ysl__page .ysl__product-text { text-align: center; font-size: 18px; line-height: 1.25em;  }
.ysl__page .ysl__product-cta { padding-top: 24px; width: 75%; display: flex; justify-content: center; }

@media(min-width: 768px) {

    .ysl__page .ysl__compare { flex-direction:row; }

    .ysl__page .ysl__product-title { font-size: 24px; line-height: 1.2em; }
    .ysl__page .ysl__product-text { }

}




/* --- Video  ---- */

 .ysl__page .ysl__video { --ratioVideo:calc(100vw / 768); position: relative; left:0; right: 0; display:block; width: 100%; margin: 0 auto; padding-bottom: 70px; }

.ysl__page .ysl__video-inside { padding-bottom: 56.25%; height: 0; cursor: pointer;  position: relative; top:0; left:0; }

.ysl__page .ysl__video-cover  { position: relative; top:0; left:0; z-index: 2; }
.ysl__page .ysl__video-cover.ysl__hidden { display: none; }

.ysl__page .ysl__video-cover-picture  { position: relative; }

.ysl__page .ysl__video-video  { position: absolute;  top:0; left:0; width:  100%; height: 100%;  z-index: 1; }
.ysl__page .ysl__video-video.ysl__hidden { display: none; }

.ysl__page .ysl__video-youtube  { position: relative;  width:  100%; height: 100%; }
.ysl__page .ysl__video-youtube.ysl__hidden { display: none; }

.ysl__page .ysl__video-content  { position: absolute; left:0; bottom:5vw;  width: 100%; display: flex; justify-content:center; pointer-events:none; }
.ysl__page .ysl__video-btn { border: solid 1px #fff;   height:42px; width: calc(75% * 0.9); display: flex; align-items:center; justify-content:center; background: transparent;  transition:background 0.3s ; }
.ysl__page .ysl__video-btn-text { color: #fff; transition:color 0.3s ;  text-transform: uppercase; padding: calc(5 * var(--ratioVideo)) calc(30 * var(--ratioVideo)) calc(10 * var(--ratioVideo)) calc(30 * var(--ratioVideo));  font-size: calc(30 * var(--ratioVideo));  line-height: 1em; letter-spacing:0.02em; display: block; font-family: var(--YSL-FT-MEDIUM); }
.ysl__page .ysl__video-btn-desktop { display: inline; }

@media(min-width: 768px) {

.ysl__page .ysl__video { --ratioVideo:calc(100vw / 945); }

.ysl__page .ysl__video-content  { position: absolute; left:0; bottom:6.98vw; }
.ysl__page .ysl__video-btn { height:calc(42 * var(--ratioVideo)); width: auto; }
.ysl__page .ysl__video-btn-text { padding: 0 calc(15 * var(--ratioVideo)) calc(4 * var(--ratioVideo)) calc(15 * var(--ratioVideo));  font-size: calc(20 * var(--ratioVideo)); line-height: 1em; }
.ysl__page .ysl__video-inside:hover .ysl__video-btn { background: rgba(255, 255, 255, 0.3); }

}

@media(min-width: 945px) {

.ysl__page .ysl__video { --ratioVideo:1px; }
.ysl__page  .ysl__video-content  { bottom:66px; }

}


@media(max-width: 767px) {

    .ysl__page .ysl__video-btn-desktop { display: none; }

}



/* --- Slider  ---- */

.ysl__page .ysl__slider { position:relative;  top:0; left:0;  }

.ysl__page .ysl__slides { position:relative; top:0; left:0; width: 100%; margin: 0 auto;  cursor: pointer; }

.ysl__page .ysl__slide { position:relative; top:0; left:0; width: 100%; }

.ysl__page .ysl__slide-media { width: 100%; display: flex; position: relative;  }
.ysl__page .ysl__slide-picture { position: relative; top:0; left:0; width: 100%; }
.ysl__page .ysl__slide-img { display: block; width: 100%; }

.ysl__page .ysl__slide .ysl__slide-media { transition: transform 0.5s; pointer-events:none; }

.ysl__page .ysl__slide-text {  text-align: center; width: auto; font-family: var(--YSL-FT-BOLD);  }
.ysl__page .ysl__slide-text-title { display: block; font-size: 44px; line-height: 41px; text-transform: uppercase;  }
.ysl__page .ysl__slide-text-desc { display: block; font-size: 24px; line-height: 31px; text-transform: uppercase;  }

.ysl__page .ysl__slide.ysl__active .ysl__slide-text { opacity: 1; } 



/* --- Swiper --- */

.ysl__page .swiper{margin-left:auto;margin-right:auto;position:relative; overflow:hidden; list-style:none;padding:0;z-index:1}
.ysl__page .swiper-vertical>.swiper-wrapper{flex-direction:column}
.ysl__page .swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}
.ysl__page .swiper-android .swiper-slide,.ysl__page .swiper-wrapper{transform:translate3d(0px,0,0)}
.ysl__page .swiper-pointer-events{touch-action:pan-y}
.ysl__page .swiper-pointer-events.swiper-vertical{touch-action:pan-x}
.ysl__page .swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}
.ysl__page .swiper-slide-invisible-blank{visibility:hidden}

.ysl__page .swiper-autoheight,.ysl__page .swiper-autoheight .swiper-slide{height:auto}
.ysl__page .swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}
.ysl__page .swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.ysl__page .swiper-horizontal.swiper-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}
.ysl__page .swiper-vertical.swiper-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}
.ysl__page .swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}
.ysl__page .swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}
.ysl__page .swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}
.ysl__page .swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center}

.ysl__page .swiper-button-next,.ysl__page .swiper-button-prev{position:absolute;top:50%;z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.ysl__page .swiper-button-next.swiper-button-disabled,.ysl__page .swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}
.ysl__page .swiper-button-next.swiper-button-hidden,.ysl__page .swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}
.ysl__page .swiper-navigation-disabled .swiper-button-next,.ysl__page .swiper-navigation-disabled .swiper-button-prev{display:none!important}
.ysl__page .swiper-button-prev,.ysl__page .swiper-rtl .swiper-button-next{left:10px;right:auto}
.ysl__page .swiper-button-next,.ysl__page .swiper-rtl .swiper-button-prev{right:10px;left:auto}
.ysl__page .swiper-button-lock{display:none}
.ysl__page .swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}
.ysl__page .swiper-pagination.swiper-pagination-hidden{opacity:0}
.ysl__page .swiper-pagination-disabled>.swiper-pagination,
.ysl__page .swiper-pagination.swiper-pagination-disabled{display:none!important}
.ysl__page .swiper-horizontal>.swiper-pagination-bullets,
.ysl__page .swiper-pagination-bullets.swiper-pagination-horizontal,
.ysl__page .swiper-pagination-custom,
.ysl__page .swiper-pagination-fraction{bottom:10px;left:0;width:100%}
.ysl__page .swiper-pagination-bullet{width:10px;height:10px;display:inline-block;border-radius:50%;background:#ccc;opacity:1;}
.ysl__page button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}
.ysl__page .swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}
.ysl__page .swiper-pagination-bullet:only-child{display:none!important}
.ysl__page .swiper-pagination-bullet-active{opacity:1;background:#000;}
.ysl__page .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.ysl__page .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}
.ysl__page .swiper-pagination-lock{display:none}

.ysl__page .swiper-wrapper { align-items: self-end;  }
.ysl__page .swiper{  width: 100%; }

.ysl__page .swiper-button-prev,
.ysl__page .swiper-rtl .swiper-button-next{left:-40px; top: calc(157px - 15px); background: #000; border: solid 1px #000; }
.ysl__page .swiper-button-next,
.ysl__page .swiper-rtl .swiper-button-prev{right:-40px; top: calc(157px - 15px); background: #000; border: solid 1px #000; }

.ysl__page .swiper-button-next span, 
.ysl__page .swiper-button-prev span{  background: #fff; width: 30px; height: 30px; }
.ysl__page .swiper-button-prev span,
.ysl__page .swiper-rtl .swiper-button-next span{ -webkit-clip-path: polygon(60% 28%, 42% 50%, 60% 72%, 48% 72%, 30% 50%, 48% 28%); clip-path: polygon(60% 28%, 42% 50%, 60% 72%, 48% 72%, 30% 50%, 48% 28%);  }
.ysl__page .swiper-button-next span,
.ysl__page .swiper-rtl .swiper-button-prev span{ -webkit-clip-path: polygon(52% 28%, 70% 50%, 52% 72%, 40% 72%, 58% 50%, 40% 28%); clip-path: polygon(52% 28%, 70% 50%, 52% 72%, 40% 72%, 58% 50%, 40% 28%); }

.ysl__page .swiper-horizontal > .swiper-pagination-bullets, 
.ysl__page .swiper-pagination-bullets.swiper-pagination-horizontal { bottom: -45px; }


.ysl__shades-images-slides .swiper-pagination-bullets.swiper-pagination-horizontal { bottom: 15px; }
.ysl__shades-images-slides .swiper-pagination-bullet{background:#fff;}
.ysl__shades-images-slides .swiper-pagination-bullet-active{background:#000;}

@media(max-width: 768px) {

    .ysl__page .swiper-button-prev,
    .ysl__page .swiper-rtl .swiper-button-next{top: calc(47vw - 17px); }
    .ysl__page .swiper-button-next,
    .ysl__page .swiper-rtl .swiper-button-prev{ top: calc(47vw - 17px); }

}

@media(min-width: 768px) {

.ysl__shades-images-slides .swiper-pagination-bullets.swiper-pagination-horizontal { bottom: calc(50% - ( 15vw * 0.86 ) - 40px); }

}

@media(min-width: 945px) {

.ysl__page .ysl__shades-images-slides .swiper-pagination-bullets.swiper-pagination-horizontal { bottom: calc(50% - 122px - 40px); }

}